The best scrollytelling website examples share one idea: the scroll bar becomes a timeline. As the reader scrolls, a scene changes in step with the text, so the story is told by the visitor's own hand. Scrollytelling works when every scroll step reveals something new, and it fails when scrolling becomes a chore.
Where scrollytelling came from
The format grew up in data journalism. The usual reference point is "Snow Fall," a New York Times feature about an avalanche published online in December 2012. John Branch's story won the 2013 Pulitzer Prize for Feature Writing, and the citation specifically praised its "deft integration of multimedia elements."
Newsrooms turned it into a toolkit. Open-source libraries such as Scrollama made the core trick (trigger a change when a text block enters the viewport) easy to reuse. Product brands borrowed it next. Apple's product pages made the scrubbed image sequence famous; CSS-Tricks rebuilt the effect with 148 frames drawn to a canvas as you scroll.
Four scrollytelling patterns that cover most examples
Almost every scroll storytelling website is a mix of these four.
| Pattern | What happens | Best for | Watch out for |
|---|---|---|---|
| Pinned scene | A visual sticks in place while text cards scroll past and change it | Explaining a product, a process, a chart | Pins longer than ~3 screens feel stuck |
| Step-by-step reveal | Each section adds one element: a layer, a label, a number | Specs, ingredients, "how it works" | Too many steps and it becomes a slideshow |
| Scrub video or image sequence | Scroll position controls playback frame by frame | Product rotations, exploded views, transformations | File weight; frames must be tiny |
| Camera path | A 3D camera moves through a scene as you scroll | Spaces, buildings, product worlds | GPU load on older phones |
The camera path is where scrollytelling meets real-time 3D; our WebGL website examples cover that heavier end.
How to plan a scrollytelling page
Start with a storyboard in a spreadsheet, not a design tool. Each row is one beat.
- Write the story as five to nine beats. One sentence each. If you can't, the page has no story yet.
- Assign a visual state to every beat. What does the reader see when this sentence is on screen? "Product closed" then "lid opens" then "inner layer glows."
- Give each beat a scroll budget. Measure in viewport heights. One beat usually needs 0.5 to 1.5 screens. Add up the column: if the page needs 15 screens to say what a static page says in 3, cut.
- Mark the one hero moment. Most good examples spend their effort on a single big transformation. Everything else is quieter.
- Write the mobile column. For each beat, decide what a phone gets: the same animation, a simpler version, or a static image with the text.
- Write the reduced-motion column. Visitors who set prefers-reduced-motion should get final states, not animation.
Here is what a filled-in row looks like:
| Beat | Text | Visual state | Scroll | Mobile | Reduced motion |
|---|---|---|---|---|---|
| 3 | "Three layers, one shell." | Shell explodes into three layers | 1.5 screens | Same, 60 frames | Static exploded render |
This sheet becomes the brief for design, motion and code. For launch pages, the beats slot into the structure in product launch website.
The pitfalls that kill scroll storytelling
Scroll-jacking. Taking over scroll speed or snapping the page to fixed points breaks the most basic contract of the web: you scroll, the page moves. Webdesigner Depot lists where it breaks: touch devices, keyboard navigation, reduced-motion settings and trackpad acceleration. Let the browser scroll natively and tie animation to position. Smooth scrolling is fine if it eases, never blocks.
Mobile viewport jumps. On phones the address bar shows and hides, which changes the viewport height mid-scroll. Pinned scenes sized with plain 100vh jump. Use small-viewport units (svh) or fixed pixel heights for pinned sections and test on a real device.
Heavy scrub sequences. 150 full-size frames can outweigh the rest of the site. Keep frames small and load most of them after first paint.
Invisible text. If your story lives only inside a canvas or arrives through JavaScript, search engines may see an empty page. Utsubo's WebGL SEO guide puts it plainly: every meaningful page state should exist as crawlable HTML before the renderer boots. Keep the text in the DOM and animate around it. We cover the rest in animated website SEO.
Slow first screen. Google's "good" threshold for Largest Contentful Paint is 2.5 seconds or less. The first screen of a scrollytelling page should be plain HTML and an image, with the motion layered on afterwards.
