3D & Scroll Animation
Master scroll-driven 3D animation for cinematic websites. These techniques make visitors stop scrolling and start exploring.
1. Three.js Fundamentals
Use Three.js with scroll-linked camera movement. The camera follows a path as the user scrolls, revealing content in 3D space.
2. Particle Systems
Add particle systems for atmosphere — stars, dust, or floating orbs. Keep particle count under 2000 for performance.
3. Scroll Progress
Map scroll progress to animation state with a scrollYProgress value (0 to 1) driving camera position, rotation, and element opacity.
4. Performance Tips
Use requestAnimationFrame, avoid heavy shadows, use instanced meshes, and enable antialiasing only when needed.
5. Fallbacks
Always provide a static 2D fallback for mobile devices and reduced-motion users.
Key Takeaway
Scroll-driven 3D: map scrollYProgress to camera position for cinematic reveals