What is a scrollytelling website?
A scrollytelling website tells a story that moves forward as the visitor scrolls: the pictures, the words and the motion are tied to the scroll, so reading and watching happen together instead of on separate pages.
By Fasih Ud Din Mazhar, founder of Atelier Vivance.
How does scrollytelling work?
The position of the scroll becomes the playhead. Scroll down and the story moves forward; stop, and it holds; scroll back, and it reverses.
In Atelier Vivance's builds the moving picture is a frame sequence drawn to a canvas, the surface a browser paints pictures onto. Each frame is one still image the scroll can land on, and only the frames near the screen are kept in memory, because one decoded frame costs about four megabytes.
When is a scrollytelling website worth it?
It suits a product that is understood better as a place or an experience than as a list of features: a fragrance, a property, a hotel, a collection or a launch.
It is the wrong format for content that changes daily, such as a news feed or a large catalogue, where a conventional site is quicker to read and cheaper to keep current.
What does it take to build one?
Five kinds of work, in the order a film is made: art direction first, then the scenes, the scroll choreography that decides what the visitor sees at every point, the web engineering, and a review on a throttled phone connection.
The scenes can come from your own footage and renders, from generated material, or from both, and a generated scene should never be passed off as filmed.
Does scrollytelling hurt speed or search?
It can, which is why the weight is budgeted before work starts. The Ponente build fails outright if its JavaScript passes 205 kB, the download limit the build enforces.
Search engines and screen readers cannot read a picture, so every fact the film shows should also be written out as plain text on the page.
What are examples of scrollytelling websites?
Atelier Vivance has published two scrollytelling builds of its own, and each has a case study explaining how it was made.
- Ponente case study The scroll walks a camera from a terrace, past a bronze door and down a stair cut through the rock, with a timecode that only advances while you scroll. Ponente, live at ponente.ateliervivance.com/v2
- Cinq Terres case study The scroll carries you through five worlds for one fragrance, and the fifth world returns to the first, so there is no end of the page to bounce off. Cinq Terres, live at cinq-terres.ateliervivance.com
Both are the studio's own work rather than client commissions, and their moving imagery was generated and composited by the studio.
How long does a scrollytelling website take?
Weeks, not days. Scope, schedule and price are agreed in writing before any scene is made, and the weight budget is agreed before work starts.
The service behind this guide
Scrollytelling sites are built under the studio's 3D and immersive websites service, whose page sets out who it suits and where its limits are.
- 3D and immersive websites Sites a visitor moves through by scrolling, held on one continuous timeline.
The registration, how a build is reviewed and the rest of the plain facts are set out on the studio page.
Asking about a site like this
To plan a scrollytelling site, write with the story it has to tell and the date it must go live.
- fasih@ateliervivance.com
- +92 307 578 9282