Guide
What a scrollytelling website is
How a 3D animation moves with the scroll, why it stays fast and readable by Google, and when it is worth it.
A scrollytelling website tells its story through an animation that moves only when the visitor scrolls. This guide explains how it works, what it costs and when it is worth it, with examples from the sites we have built.
What a scrollytelling website is
A scrollytelling website is a site where the scroll drives an animation: the page is the remote control, and the reader sets the pace.
On our sites there are two animations. The first plays on its own when the page opens. The second, twenty to thirty seconds long, sits further down and moves frame by frame as the visitor scrolls, with the text of each chapter appearing beside it.
The visitor reads what the business does while watching it happen: a house rebuilt room by room, a Vespa turning in an alley, gelato being churned.
How a 3D animation follows the scroll
The animation is a sequence of still frames drawn on a canvas, and the scroll position chooses which frame is shown.
- We produce a 3D sequence of twenty to thirty seconds for the business, then cut it into 600 to 1,800 frames, at up to sixty per second.
- The frames are encoded in three or four sizes, from a vertical cut for phones to 1920 pixels for large screens.
- The browser receives the size that suits the screen, in packs that arrive in the order they are needed, or as a video stream decoded on the device.
- Each frame advances after about ten pixels of scroll, which keeps the motion smooth rather than jumpy.
On the home page of Cengel Holding the sequence has 957 frames in four sizes; on this site it has 1,800. On a phone, the video version of our own sequence weighs 17 MB instead of the 58 MB of the separate images.
Scrollytelling, parallax, background video and WebGL compared
Scrollytelling is the only one of the four techniques where the reader controls a real 3D sequence with the scroll.
| Technique | What moves | Who sets the pace | Best for |
|---|---|---|---|
| Scrollytelling with a 3D sequence | A full 3D animation, frame by frame | The reader, with the scroll | Products, places and processes worth showing |
| Parallax | Layers sliding at different speeds | The reader, but the image stays flat | Light depth on simple pages |
| Background video | A clip that plays on a loop | Nobody: it plays by itself | Atmosphere, with no story |
| Real-time WebGL (Three.js) | A 3D model rendered live | The reader, by dragging or scrolling | Configurators and technical models, at a much higher cost |
Can Google read an animated website?
Yes, as long as the text lives in the page and not inside the animation.
- Every heading, paragraph and caption is real HTML text, which search engines and AI assistants can read and quote.
- The page is complete with JavaScript turned off: a still image replaces the animation.
- Every page has its own title, description, structured data and social preview image.
- The animation starts loading after the first gesture, so it never delays the first paint of the page.
Does an animated website load slowly?
No, if the frames arrive in the right order and at the right size.
The text and the first image load first. The animation follows in packs, the first one alone, and phones never download the sizes meant for large screens. Fonts, styles and scripts are compressed and cached for a year, and every image is cut to the shape it is shown in.
When a scrollytelling website pays off
It pays off when a business has something worth showing in motion: a product, a place or a process.
- Products with a gesture: gelato, fresh pasta, fragrances, glasses, motorcycle parts.
- Places: hotels, relais, holiday homes, villas, a lake or a coast.
- Processes: a renovation, an architecture project, a lift being installed, a garden taking shape.
- Technology: engines, drones, boats, platforms that are hard to explain with photographs.
It is less useful for pages that must only be read quickly, such as a notice or a price list, and that is why the animation is one section of the site and not the whole site.
Examples of scrollytelling websites we built
Every site below has its own 3D animation, made for that business.
- Cengel Holding: a London terrace stripped back to the brick and rebuilt room by room.
- Tunnel Verde: a green Vespa turning in a Roman alley, for a marketplace of verified Vespas.
- Tatino: gelato churned and holiday cakes, for a gelato shop near Rome.
- Sandro Laffranchini: a cello in an empty theatre, for the principal cellist of La Scala.
- Simet and Delta: a lift built piece by piece, for two lift companies.
- RacingSyn: a race car taken apart in mid air, for a motorsport engineering alliance.
What a scrollytelling website costs
The price depends on the pages, the languages and the interactive parts, and every proposal lists each item with its price before you sign.
Elsewhere a single scrollytelling section is often built by hand in 3D software or in WebGL. We produce the sequence for each business and play it on a tested engine, so the animation is part of the website and not a separate project.
How we make one
A call, a demo of your home page before you sign, a clear proposal, about five weeks of work, then the site looked after every month.
(Questions)
Quick answers
What is scrollytelling?
Scrollytelling is a way of telling a story on a web page where scrolling drives an animation, so the reader sets the pace of what happens on screen.
Is scrollytelling good for SEO?
Yes, when the text is real HTML beside the animation. Search engines read the words, and the animation keeps visitors on the page longer.
Does scrollytelling work on mobile?
Yes. Phones receive a vertical cut of the animation at the right size, and the motion follows the thumb.