Scrollytelling is a web design technique where scrolling drives the story: as the visitor scrolls, images, 3D objects, text and data animate in sequence. It is used for product launches, luxury brands and data journalism because it turns a static page into a guided, cinematic experience, while leaving the visitor in control of the pace.
Where scrollytelling comes from
The term grew out of digital journalism. The New York Times feature Snow Fall (2012) is often cited as the piece that popularised scroll-driven, multimedia storytelling. Product brands later adopted the same approach to reveal products piece by piece, most visibly in smartphone and hardware launch pages.
Four techniques behind scroll-driven pages
1. Image-sequence scrubbing
A product is rendered or filmed as a sequence of frames, often 100–300 images. A canvas element draws the frame that matches the current scroll position, so scrolling “plays” the animation forwards and backwards. Our Emerald Earring showcase uses a 210-frame sequence this way. It gives photographic quality, but every frame has to be downloaded, so compression and loading strategy matter.
2. Video scrubbing
Instead of individual images, the scroll position sets the current time of a video. It's lighter to download, but smooth scrubbing requires the video to be encoded with frequent keyframes, and behaviour varies between browsers.
3. Real-time 3D (WebGL)
Libraries such as Three.js render a 3D model live in the browser. Scrolling moves the camera, lighting or materials. It allows true interactivity (rotating, configuring colours) but needs careful optimisation for mid-range phones.
4. CSS scroll-driven animations
Modern CSS can link animations directly to scroll position using animation-timeline: scroll() and view(), with no JavaScript. It's ideal for lighter effects such as reveals, progress bars and parallax. Browser support has grown quickly; check current support and provide a graceful fallback.
Comparison
| Technique | Visual quality | Download weight | Interactivity | Best for |
|---|---|---|---|---|
| Image sequence | Photographic | High | Scroll only | Luxury products, jewellery, hero moments |
| Video scrubbing | Photographic | Medium | Scroll only | Longer sequences, lifestyle footage |
| WebGL 3D | High, real-time | Medium | Full | Configurators, technical products |
| CSS scroll timelines | Depends on assets | Low | Scroll only | Reveals, parallax, progress |
Keeping scrollytelling fast
- Use modern image formats such as WebP or AVIF and size frames for the device.
- Load the first frames immediately and stream the rest progressively.
- Serve a shorter or lower-resolution sequence on mobile.
- Draw on a canvas with
requestAnimationFramerather than swapping<img>sources. - Cache assets aggressively with long-lived, immutable cache headers.
Keeping it accessible
- Respect
prefers-reduced-motionand offer a static version of the story. - Never hide essential information inside the animation alone; say it in text too.
- Don't hijack scrolling speed; let the visitor scroll naturally.
- Make sure keyboard and screen-reader users can reach every piece of content.
Keeping it SEO-friendly
Search engines and AI assistants read text, not animation. Keep headings, product descriptions and key facts in real HTML alongside the visuals, add structured data, and make sure the page still makes sense if the animation never loads.
Is scrollytelling right for your brand?
It works best when the product itself is the hero (jewellery, fragrance, architecture, devices, vehicles) and when you have a story worth revealing in sequence. For a simple service page, it can be a distraction. Explore our interactive showcase or our custom website development service to see what's possible.