Website Animation Guides · 2026-10-14 · 5 min read
What Is a Scroll-Driven Website? Definition, Examples and How They Are Built
A scroll-driven website is a site where animation is controlled by how far the visitor has scrolled, not by a clock. Scroll down and it plays; scroll up and it rewinds.
Written by AmJ, founder of Scrollhaus, and edited by the Scrollhaus editorial team. Sources and methodology are documented in the article.
A scroll-driven website is a website where animation is controlled by scroll position rather than by time. The distance the visitor has scrolled is the playhead: scroll down and the film, 3D scene or layout moves forward; stop and it stops; scroll up and it runs in reverse. Apple's product pages made the style familiar, and it is now common on launch pages, portfolios and brand sites.
Scroll-driven vs scroll-triggered
The two terms are often mixed up, and the difference matters when you brief someone.
| Scroll-triggered | Scroll-driven | |
|---|---|---|
| What starts it | An element enters the screen | Any scroll movement |
| What controls progress | A timer, for example 0.6 seconds | Scroll position |
| Runs backwards | Usually not | Yes, by scrolling up |
| Typical use | Fade or slide content in | Scrubbed film, 3D camera moves, pinned scenes |
Most real sites use both: a scroll-driven hero, then lighter scroll-triggered reveals for the sections below it.
Examples of scroll-driven websites
- Hibisca: a walk through the rain becomes an umbrella launch, with a gauge that tracks how soaked the walker is as you scroll.
- Maison Zerda: a film that starts inside an arched window and widens to full screen, with a live ticket that counts distance as you go.
- Grim & Tonic: a scrubbed film that hands over to a live 3D object.
- Morphos (free): a Three.js particle cloud that morphs between four forms as you scroll. Vesper Atlas (free): three planets, each opened by a scroll-controlled portal.
- Axiom R9 (free): a road bike page built from three scroll-scrubbed video plates.
There are more in the guides to scroll animation websites and scrollytelling examples.
How scroll-driven websites are built
Four techniques cover almost every case.
- Image sequence on a canvas. A video is exported as frames, and the frame shown is chosen by scroll position. This is the most dependable way to scrub film, because every frame is already an image. Tutorial here.
- Scrubbed video. The page sets the video's current time from scroll. It is lighter to ship, and it needs a video encoded with frequent keyframes or it will step. See scroll video animation.
- 3D scene. A Three.js scene where camera position and object rotation are interpolated between keyframes along the scroll.
- Pinned sections and timelines. GSAP ScrollTrigger, or native CSS scroll-driven animations in current browsers, pin a section and play a timeline while the user scrolls through it.
A smooth-scroll library such as Lenis is usually added so that wheel input feels even.
What makes a good one
- Enough scroll distance. Too little runway and a ten-second film flashes by in two wheel notches.
- Real text. Headlines and copy are HTML over the animation, so they can be read by people, search engines and AI assistants.
- A fast first frame. The first image appears immediately and the rest loads in the background.
- A reduced-motion version. Visitors who ask for less motion get a still page that reads in order.
- A phone layout. Designed, not just shrunk.
Ways to get one
You can hire an agency, build it by hand with GSAP and Three.js, use a visual builder such as Webflow or Framer, or start from a template with source code and adapt it with an AI coding tool. The last route is the quickest for most small teams: the timing is already solved, and the AI only changes your content. Guides for Claude Code, Cursor, Lovable, Bolt and v0 show the steps.
Summary
A scroll-driven website uses scroll position as its timeline. It is built from image sequences, scrubbed video, 3D scenes and pinned timelines, and it works when the text stays real, the first frame is fast and the phone version is designed on purpose.
Frequently asked questions
What is a scroll-driven website?
A scroll-driven website is a website whose animation is linked to scroll position. The page uses how far the visitor has scrolled as the playhead, so video, 3D scenes, text and layout changes move forward when scrolling down and backward when scrolling up.
What is the difference between scroll-triggered and scroll-driven animation?
A scroll-triggered animation starts when an element enters the screen and then plays on its own timer. A scroll-driven animation has no timer: its progress is tied directly to the scroll position, so it stops when the visitor stops.
Are scroll-driven websites slow?
They do not have to be. Well-built ones load a small set of frames first, animate only transform and opacity, and pause work that is off screen. Problems come from oversized video, too many simultaneous effects and animating layout properties.
How much does a scroll-driven website cost?
A custom build from an agency commonly runs from a few thousand dollars into five figures, depending on the 3D and video work. Starting from a template with source code reduces that to the price of the template plus your time; Scrollhaus plans start at $49.99, and some templates are free.
Do scroll-driven websites work on phones?
Yes. Touch scrolling drives the same timeline. A good build has a phone-specific layout, lighter media where needed and no sideways scrolling.
Explore animated website templates at Scrollhaus →
Need help with a template, account, or project? Email admin@scrollhaus.ai.