I’m having a problem to animate the glb model I have in a correct way, but unfortunately I’m not that good with react-three-fiber.

Animation I’m trying to achieve is the background carousel (or I would call it snake effect) which is available at brainsave.ai

I have tried to use Math.sin function to get the similar result, but whatever I do cannot really work with it.

I have some variables:

    const [scrollOffset, setScrollOffset] = useState(0);
    const numRectangles = 20;
    const amplitude = 1; 
    const frequency = 0.4; 
    const spacing = 0.3; 
    const speed = 0.005; 

and using the scroll function I am trying to set the offset:

    const handleScroll = (event) => {
        setScrollOffset((prev) => prev + event.deltaY * speed);
    };

and in my jsx return I’m populating those rectangles and using the x and y coordinates setting the position for the rectangles.

 return (
        <div className={styles.card} onWheel={handleScroll} style={{ height: '100vh', overflow: 'hidden' }}>
            <Canvas>
                <ambientLight intensity={0.5} />
                <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} intensity={1} />
                <pointLight position={[-10, -10, -10]} intensity={1} />

                {Array.from({ length: numRectangles }).map((_, index) => {
                    // Positioning based on a sine wave pattern
                    const x = -index * spacing;
                    const y = amplitude * Math.sin(frequency * (x - scrollOffset));
                    
                    // Rotation based on the index, creating a gradual rotation
                    const rotation = [4, -10, 0]; // Rotate slightly around the z-axis

                    return <Model key={index} position={[x, y, 0]} rotation={rotation} />;
                })}
            </Canvas>
        </div>
    );

I’m also attaching the codesandbox I’m working on, so you could run the project.

However, animation is not really what I want to achieve, and cannot really get it done. Would appreciate if anyone could help with it.

Happy coding!