The Short Answer
A 3D scroll website ties a 3D animation to the scrollbar, so the product turns, opens or changes as the visitor reads down the page. There are three ways to build one: a real-time WebGL scene, a pre-rendered image sequence, or a scrubbed video. Real-time is lightest and most flexible, image sequences look most cinematic, and video is cheapest but least smooth.
Three Ways to Build It
| Real-time 3D (WebGL) | Image sequence | Scrubbed video | |
|---|---|---|---|
| How it works | A 3D model moves live with scroll | Pre-rendered frames shown per scroll position | A video's playhead follows scroll |
| Visual quality | Good, limited by real-time lighting | Film quality | Film quality, softer |
| Download weight | Low, one compressed model | High, often 100+ images | Medium |
| Interactivity | Full: hover, drag, colour change | None beyond scroll | None beyond scroll |
| Smoothness on phones | Good if optimised | Good | Often choppy |
| Best for | Products, configurable items | Hero launch moments | Short, simple sequences |
Real-Time 3D, Driven by Scroll
The model is loaded once with Three.js, and GSAP's ScrollTrigger maps the scroll position to the camera, the model's rotation or the parts of an exploded view. Because it is live, the same scene can also respond to a click or a colour swatch.
This is the approach we use most, and the technique behind it is covered in our GSAP scroll animation guide.
Image Sequences, the Apple Technique
The animation is rendered in Blender or another 3D tool as a few hundred still frames, and the page draws the right frame onto a canvas as you scroll. The lighting can be as good as a film because nothing is rendered in the browser.
The cost is weight and rigidity. Hundreds of frames must download, so they need careful compression and lazy loading, and the camera path can never change without re-rendering.
Keeping It Smooth and Fair
Scroll-driven 3D goes wrong in predictable ways. These rules prevent most of it.
- Do not hijack the scroll. Smooth-scroll libraries such as Lenis are fine; changing how far a flick of the wheel goes is not.
- Keep the text in the page. Headings and copy belong in HTML beside the 3D, never baked into it, so they can be read, translated and indexed.
- Respect reduced motion. Visitors who turn motion off should get still images and the same information.
- Load a still first. The first thing on screen should be an image, with the 3D taking over once it is ready.
- Test on a mid-range phone. A desktop that runs it smoothly proves nothing.
When It Is Worth It
Scroll-driven 3D is worth it for a product launch, a product whose inside matters (headphones, engines, watches, appliances), or a brand that sells on craft. It is not worth it on a page whose visitors want a price, a menu or a phone number quickly. If you only need one moment of 3D, a single product viewer may be enough.
Working With Kalex
Kalex builds scroll-driven 3D in Three.js and GSAP, with models made in Blender. See our 3D website service, the 3D website examples we learn from, or what a scroll story costs.