Scrollytelling website examples
Ten scroll-driven story sites, three of them ours, each explained by what the scroll controls and what happens with reduced motion on, plus a method to plan your own.
A scrollytelling website turns the scroll bar into a timeline. Each position on the page is a moment in a story, and the reader moves through it at their own pace. The question that decides whether one works is simple: what does the scroll control? A camera, a process, depth, time of day? This page explains ten examples by that question, shows what each does with reduced motion on, and ends with a method for planning your own. For how Laarpi plans motion in general, see animated websites.
What scrollytelling is, and what it isn't
- Scrollytelling makes scroll position the clock of a story. Scroll down and the story advances; scroll up and it rewinds.
- Parallax moves layers at different speeds to suggest depth. It's a technique, often used inside scroll stories, but it tells nothing by itself.
- Scroll-triggered animation plays a timed animation when an element crosses a point on screen. The reader starts it; the clock runs it.
- Scroll-linked animation maps progress directly to scroll position, so the reader scrubs it like a video. Stop scrolling and it stops.
Most good scroll stories mix the last two: scroll-linked for the main thread, scroll-triggered for small arrivals of text. What none of them do is take the scroll away from the reader.
Ours: three scroll axes
These are concept sites made by the Laarpi team with Laarpi's library and process, for invented studios and organisations. Each write-up has the full credits and load times.
Aster & Kiln: the scroll is the potter's hands
What the scroll controls: a process. 1.8 kg of wet red stoneware is centred, opened, pulled three times, shaped, flipped and trimmed, glazed and fired, in eight numbered steps. Scroll is the hands; nothing advances on a timer.
The handoff: at the firing step the page goes to soot and closes to a kiln spyhole. The firebrick glows from dull red to yellow-white, the pot nearly vanishes in the heat, and a counter climbs through a fourteen-hour schedule to 1280 °C. Then the spyhole opens on the fired celadon vase. The transition from clay to vase is the hardest moment in the site, and the one people remember.
Reduced motion: the scroll-driven making becomes a static catalogue: section drawings for each step and a still render of every pot. Numbered buttons reach any step from the keyboard. Because every state is driven by scroll position, "Throw it again" in the footer rewinds the whole story cleanly. Aster & Kiln write-up
HADAL: the scroll is the depth
What the scroll controls: depth. Scrolling lowers you through 10,047 metres of water to the floor of the Kermadec Trench. The water colour, the light and the gauge are all computed from your depth, so the picture and the numbers always agree. The light meter loses red first, then orange, yellow and green.
The handoff: at 1,000 metres the page goes black ("Lights out") and a lamp follows your cursor or finger. The scroll axis stays the same, but the reader's role changes from passenger to searcher.
Reduced motion: smooth scrolling is off, text appears at once, and each zone is a composed still that still changes colour with depth, so the story of the light survives. Every fact the lamp reveals is also in the page copy. HADAL write-up
Salt & Smoke: the scroll is the time of day
What the scroll controls: time and a camera. The whole site is one long take around one fire on a bluff above the Oregon coast. Sunset at the top, blue hour in the middle, moonlight at the end, while the camera comes down to the fire, works round it and rises into the smoke.
The handoff: at "So we wait" the camera rises into the plume and thick white smoke fills the frame; the type turns to soot to stay readable. Then the smoke thins to a blue thread rising through one line of type. Later, dish names from the menu condense out of the smoke above the coals.
Reduced motion: nothing animates. Each camera station renders as a finished still with the fire and smoke frozen at a settled moment, and a link skips straight to the menu. Salt & Smoke is a scroll story only; the restaurant is invented and the buttons sell nothing. Salt & Smoke write-up
Public scrollytelling worth studying
These belong to their makers. We link to each and describe what the scroll does.
| Example | What the scroll controls | Linked or triggered |
|---|---|---|
| Snow Fall, The New York Times | Chapters of a long feature; video and animated maps start as you reach them | Triggered |
| A visual introduction to machine learning, R2D3 | Data points sorting themselves into a decision tree | Linked |
| What's Really Warming the World?, Bloomberg | Each suspected cause of warming, added one by one against the measured record | Triggered, step by step |
| The Deep Sea, Neal Agarwal | Depth: animals appear at the depths they live | Linked |
| If the Moon Were Only 1 Pixel, Josh Worth | Distance: the solar system at scale, scrolled sideways | Linked |
| The Boat, SBS | The panels of a graphic novel, with sound and layered depth | Linked |
| Firestorm, The Guardian | Chapters of a family's escape from a bushfire, with full-screen video and sound | Triggered |
Snow Fall (John Branch, 2012) made the form famous in newsrooms. It reads as a long article first: the media are set into the text and start as you reach them, so the reader is never stuck waiting for an animation to finish. nytimes.com
A visual introduction to machine learning (Stephanie Yee and Tony Chu) is the clearest example of scroll-linked explanation: homes in two cities become dots, and the scroll sorts them into a classifier you can follow. r2d3.us
What's Really Warming the World? (Eric Roston and Blacki Migliozzi) builds an argument one step per scroll, testing each suspect against the temperature record before showing the one that fits. Scroll as proof. bloomberg.com
The Deep Sea (Neal Agarwal) uses the same axis as HADAL, depth, for a different purpose: wonder at scale rather than a single descent. Comparing the two shows how much the art direction changes a shared idea. neal.fun
If the Moon Were Only 1 Pixel (Josh Worth) makes the reader feel distance by scrolling through it, mostly empty space with occasional text. It's proof that a scroll story can be almost nothing but pacing. joshworth.com
The Boat (SBS, adapted by Matt Huynh from Nam Le's story) shows that a scroll story can be literature: panels, sound and layered depth arrive with the reader's scroll. sbs.com.au
Firestorm (Jon Henley, The Guardian, 2013) uses chapters as the unit, with full-screen video and sound between passages of text. theguardian.com
Pacing rules
- One idea per screen. If two things move at once, the reader watches one and misses the other.
- Choose linked or triggered on purpose. Linked for anything the reader should control and reverse: a process, a camera, depth. Triggered for small arrivals, such as a heading settling in.
- Never take the scroll. Don't change scroll speed, lock the page or snap the reader somewhere they didn't scroll to. Pin a section if you need time, but let every bit of scroll move the story.
- Let readers skip. Numbered steps, a chapter menu or a "skip to the menu" link mean nobody is forced through every beat.
- Keep the words in the page. Every fact told by the animation should also exist as text, for search engines, screen readers and anyone with motion turned off.
- Write the still version first. If the story doesn't work as a sequence of still frames with captions, motion won't save it. Accessible motion covers the rules.
Plan one
The method below is how the Laarpi team planned Aster & Kiln. It's team-made, from the site's brief, not a record of an SI run.
- Choose the axis. What does the scroll control? Aster & Kiln: the making of one vase. A good axis has a direction and an end.
- Write the beats. One line per screen: what the reader sees, what they learn. Aster & Kiln's eight: centre, open, pull, shape, trim, glaze, fire, the fired vase.
- Mark the handoffs. Where the scene changes state, decide what carries the eye across. Aster & Kiln: the pot stays in place while the world around it turns to the kiln.
- Decide linked or triggered per beat.
- Set a performance budget. Text and a loader arrive first. Measured cold on our phone profile (slow 4G, CPU slowed four times) on 6 October 2026, HADAL drew its first full frame at 3.8 s, Aster & Kiln at 11.8 s and Salt & Smoke, our heaviest scene, at 31.1 s. Decide how long your story is allowed to make people wait, and what they see meanwhile.
- Design the reduced-motion version at the same time as the moving one, not after.
| Beat | Aster & Kiln: what the reader sees | What they learn |
|---|---|---|
| Centre | A wobbling lump of wet stoneware on the wheel | The clay is off-centre, and centring is most of the work |
| Open, pull, shape | The floor opens; the wall rises in three pulls; belly, neck and lip form | Why there are three pulls and no fourth |
| Trim | The pot, leather-hard, upside down; the foot ring is cut | Where the weight goes |
| Glaze | Bisqued, dipped for a count of three | Why the foot is wiped clean |
| Fire | The kiln spyhole, the glow, the temperature climbing | What 1280 °C does to clay and glaze |
| The vase | AK–26 in celadon, then the spring firing at true scale | What you can buy, and what it took |
When you describe a scroll story to Laarpi, the brief SI writes covers the same ground: the story beat by beat, the centrepiece and how it answers scroll and cursor, and the reduced-motion version. SI is Laarpi's website agent: automated software running on AI models from third-party providers. Press Start building and the brief comes before any code, so you can change the beats first. More examples with 3D at their centre are in 3D website examples.
