Scrollytelling Examples (2026): Ten Sites Worth the Scroll

TL;DR. The origin: NYT's Snow Fall. The purest scroll ideas: The Deep Sea and If the Moon Were Only 1 Pixel. The data benchmarks: The Pudding, the Guardian's Bussed Out, SCMP's Forbidden City. Commercial scrollytelling that sells: Scout Motors, Superlist, Firewatch. The founder-budget scroll film: Paper Film, ours, honest about price. Every URL on this list was checked live before it shipped.

Scrollytelling is the one web trick that makes the reader do the storyteller's job and enjoy it. Your scroll position drives the story's state: the chart changes because you moved, the map animates because you pushed it, the film advances exactly as far as your thumb says. Done well, it is the difference between being told about the ocean and descending through it.

One thing worth knowing about the lists you will find for this search: most are written by the tools that want to sell you their template. We build these pages by hand: scrub engines, pins, frame sequences. So the notes below are about mechanics. What each site actually does under the thumb, what it costs in performance, and what happens when the screen is a phone.

What counts as scrollytelling

The test is authorship of the scroll. Three things qualify a site for this list. First, scroll position drives state: something changes because of where you are, not just once when a card enters the viewport. Second, the order is authored: there is a beginning, and you cannot reach the end without passing through the middle. Third, it survives a phone. The vocabulary for the craft notes below: a trigger starts something when it scrolls into view, a scrub follows your scroll position exactly, and a pin holds an element still while the story moves past it. Every site here is an arrangement of those three moves. Cards that fade in are none of them. That is decoration.

The ten examples

1. Snow Fall, The New York Times

What it is: The 2012 feature that started the whole genre: John Branch's six-part story of the Tunnel Creek avalanche, with wind-blown snow looping behind the headline and terrain graphics woven through the text. It won the Pulitzer for feature writing, and for years afterwards every newsroom and agency brief asked for "a Snow Fall."

The craft: Almost nothing here scrubs. Video loops and graphics trigger as they enter the viewport, play, and get out of the reading line, so a very long story stays a read instead of becoming a ride. The payload was brutal for 2012; today it opens like a normal article, and on mobile it degrades to text and stills while losing almost nothing. Live since December 2012 and still opening fine, which is the part worth copying.

Steal this: Trigger, don't scrub, when the story is words. Save scrubbing for the moments the reader should control, let everything else start itself, and never make someone scroll-drive their way through prose.

2. The Deep Sea, Neal Agarwal

What it is: One page, the entire ocean by depth. You scroll down from manatees to the Challenger Deep, past every creature placed at the depth it actually lives, with facts dropped along the way: the deepest human scuba dive at 332 meters, the Titanic at 3,800, and the story of the Trieste waiting at the bottom.

The craft: The scroll unit is depth. Meters map to pixels at a fixed rate, so the emptiness between creatures is information, not padding: the sparse zones feel sparse because they are. It is DOM elements and images, no WebGL, which is why it runs smoothly on a mid-range phone. And it pays your effort: one line tells you when you have scrolled the height of Everest.

Steal this: Map scroll to a unit your reader already understands: meters, years, dollars saved. Once the scrollbar means something real, people ride it all the way to the end.

3. If the Moon Were Only 1 Pixel, Josh Worth

What it is: A self-described tediously accurate map of the solar system, drawn to true scale with the Moon at one pixel. You scroll sideways through mostly nothing, and the nothing is the point: dry little captions float in the void to keep you company between planets.

The craft: The scrollbar is the argument. At this scale space is almost entirely empty, so the page is almost entirely empty, and the performance cost rounds to zero. The real craft is in the caption timing: the jokes land exactly when your patience runs out, which makes this the best scrub-pacing lesson on the list without a single animation.

Steal this: Let scale make the argument. A page that is mostly empty can persuade harder than one that is full, as long as the emptiness is the message and something rewards the reader for crossing it.

4. Are Pop Lyrics Getting More Repetitive?, The Pudding

What it is: The Pudding runs 15,000 Billboard Hot 100 songs through a compression algorithm to measure lyrical repetition, and lets you scroll through the results. The verdict: 2014 was the most repetitive year on record, with the average song compressing 22 percent more efficiently than one from 1960.

The craft: This is the canonical scroller pattern. The chart pins, prose steps scroll past, and each step mutates the chart's state, so you never lose the visual thread of the argument. Watch what happens when a point lands: the pin releases and the page breathes before the next act. Most agency scrollytelling copies the pin and forgets the release.

Steal this: Pin the visual, scroll the argument, release the pin the second the point lands. A chart that overstays its pin stops being evidence and becomes wallpaper.

5. Bussed Out, The Guardian

What it is: The Guardian's investigation into how American cities move homeless people between states with one-way bus tickets. Journeys draw themselves across a map as you scroll, in between the stories of the actual people on the buses.

The craft: A pinned map stage, with scroll advancing the investigation across it in stages. The pacing alternates scales on purpose: one person's ride, then the whole dataset, then back to a person, so the numbers never numb you. And the heavy sequences load as you approach them rather than up front, which is why a piece this dense still opens fast on a bad connection.

Steal this: Alternate scales. One human, then the whole dataset, then back to the human. Data numbs on its own; people are what carry it, and the scroll lets you switch between the two without a cut.

6. Life Inside the Forbidden City, South China Morning Post

What it is: SCMP's graphics team walks you through the Forbidden City chapter by chapter with hand-drawn diagrams that assemble as you scroll: the palace hierarchy, the selection rounds that whittled thousands of candidates down to three, the machinery of an empire's household. First published in 2018, updated and republished in October 2025.

The craft: No 3D anywhere. Each scene is one large illustration revealed in staged layers as you scroll, so the framerate cost is near zero and a phone gets the identical experience, not a cut-down one. The republish date is its own craft note: this is scrollytelling a newsroom found worth maintaining for seven years, which almost no WebGL build survives.

Steal this: When the subject is a process or a place, a staged illustration beats a 3D scene: cheaper to build, cheaper to run, identical on mobile, and it ages like a book instead of a demo.

7. Scout Motors

What it is: The revived American truck brand, taking reservations for the Traveler SUV and Terra truck before production starts in 2027, with entry-model pricing expected to start under $60,000. The homepage is a scroll story that starts in 1961 with the original Scout and works forward through a viewfinder of archive moments to the new machines.

The craft: Commercial scrollytelling with a job: sections disclose the heritage progressively, the archive carousel scrubs through decades, and the vehicle reveal is sequenced so the story lands before any spec does. The restraint is the point. This could have been a configurator; instead it reads like a story, because pre-order buyers are buying the story.

Steal this: Sequence heritage before hardware. If your product trades on a story, make the scroll tell it in order and put the spec sheet at the end, where it belongs.

8. Superlist

What it is: The task app's marketing site, and the current benchmark for making productivity software look like something you would hang on a wall. Playful illustration and real product UI carry you down the page, with testimonials and downloads for every platform waiting underneath.

The craft: The product is the artwork. Sections animate in on scroll with the app's own interface woven into hand-drawn scenes, in a palette no enterprise tool would risk, and it still behaves like a page: fast, real text, buttons where you expect them. Proof that scrollytelling and conversion are not enemies when someone engineers both.

Steal this: Make the product the artwork. Scrollytelling your actual UI beats an abstract brand film, because the demo and the story become the same thing and nobody has to book a call to see either.

9. Firewatch, Campo Santo

What it is: The landing page for the 2016 game, and the parallax hero that launched a thousand copies: a Wyoming lookout scene cut into layers that drift apart as you scroll, sinking you into the valley before the page has said a word.

The craft: The hero is a handful of image layers translating at different speeds, nothing more. Then the effect ends and the site becomes a plain, fast page. It has survived a decade unchanged because the trick is cheap, mobile-safe, and spent exactly once. Compare the sites that parallax every section and feel seasick by the third.

Steal this: Spend the effect once, at the top, then get out of the way. One perfect scroll moment outperforms ten mediocre ones stacked, and it costs a tenth as much to build.

10. Paper Film, DappaSol

What it is: Our own pitch, told as a paper-cut film. 658 hand-animated frames scrub on a pinned canvas as you scroll, and nine short beats of copy land in the empty top half of each frame until a website has, quietly, pitched you.

The craft: Frame-exact scrubbing: the sequence preloads, then draws to the canvas at whatever position your thumb holds, forward or backward. It is a JPEG sequence, no WebGL at all, and full static HTML lives underneath so search engines read every word of the pitch the film is making. That is the whole architecture, productized.

Steal this: Full disclosure, this one is ours. If your pitch has one strong visual scene, this format will carry it, and builds on this architecture start at a fixed $3,000.

The ten, side by side

What the look costs

Honest bands. The newsroom pieces on this list had newsroom budgets behind them, and their commercial equivalents, the kind studios enter into awards, commonly land between $20,000 and $60,000, and go up from there. Mid-tier agency scrollytelling runs roughly $8,000 to $20,000 over several weeks. Our Flagship builds start at a fixed $3,000. Not magic: we productized the scroll-film architecture behind Paper Film instead of rebuilding the scrub engine per client, so the money goes into your story, not our plumbing. Fixed prices, a weekly demo before each payment, and you own the code and IP from day one.

And the anti-pitch: if your buyer just wants a price and a phone number, scrollytelling is money spent impressing the wrong person. We will say so on the first call and point you at a $399 Overnight Site instead, live in 24 hours or it is free.