Scrollytelling
Scrollytelling is a technique in which the story advances as the visitor scrolls.
Also known as: scroll-driven storytelling · scroll narrative
Scrolling is not used to move the page but to advance the story. As the visitor scrolls, a chart fills in, a map moves, a scene turns, text arrives step by step. The pace belongs to the reader: stop and it waits, scroll back and it rewinds.
It is used most often in long-form journalism, annual reports and product stories. The technique is not necessarily three-dimensional; but combined with WebGL it becomes one of the building blocks of an immersive site.
When to use it
When it makes sense
When you have a sequence to tell — a process, a history, a chain of cause and effect — and the order matters.
When it is unnecessary
When the reader wants to reach a single piece of information. Making someone scroll through five screens for a phone number is punishment, not narrative.
How it looked in our work
On the home page of this site, scrolling does not move the page: it turns the camera. The studio tour advances with the same logic.
Common questions
Does scrollytelling hurt performance?
It does if it is built badly. Work tied to the scroll event must be handled in animation frames, not on every pixel of movement; otherwise the page stutters. Done properly it costs no more than an ordinary page.
What happens on a phone?
It works, but the design has to be reconsidered: the screen is narrow, the scroll is faster and the thumb covers part of the screen. Shrinking a desktop narrative and calling it done is the most common mistake.
How does this term apply to your work? Let us talk.
Get in touch