The content of this and the other pages about scrollytelling is based on the paper “Scrolling into the newsroom: A vocabulary for scrollytelling techniques in visual online articles”, written by members of the graphics team at the Neue Zurcher Zeiting, and to be published in the Information Design Journal (reference: Oesch, Jonas, Manuel Roth, and Adina Renner. “Scrolling into the Newsroom: A Vocabulary for Scrollytelling Techniques in Visual Online Articles.” Information Design Journal. Forthcoming 2022.)
You can watch the video below to see all the scrollytelling examples in action, or you can read the text and click through to check the examples yourself.
The paper has a handy definitition of what scrollytelling is:
Scrollytelling refers to a storytelling format in which visual and textual elements appear or change as the reader scrolls through an online article. It is more clearly defined in the negative: when readers scroll, something other than the conventional movement of a document through the viewport happens.
Scrollytelling usually involves a fixed or updating visual that updates as text blocks scroll by.
An animation illustrating scrollytelling. Source: Russell Goldenberg
But other techniques also exist. The paper authors analysed 50 scrollytelling articles, and identified 5 kinds of scrollytelling.
Five scrollytelling techniques
Based on an analysis of the properties of the scrollers in a a collection scrollytelling stories, the graphics team of the Neue Zurcher Zeitung identified 5 types:
- Scrollytelling technique: graphic sequence
- Scrollytelling technique: animated transition
- Scrollytelling technique: pan and zoom
- Scrollytelling technique: moviescroller
- Scrollytelling technique: show-and-play