The content of this module 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.
https://www.youtube.com/watch?v=v2LkaxaVH74
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.
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.
In a graphic sequence text blocks move over a fixed visual element in the background, which is replaced with a new graphic with each new text block.
Source: 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
Graphic sequences are often used for showing and highlighting information on a visualisation step by step. They can also work well with illustrations and photographs.
A room, a bar and a classroom: how the coronavirus is spread through the air
The race to save the river Ganges
In graphic sequences, the transition between the subsequent graphics can be direct or can be faded. The graphic can use the full viewport or can have smaller dimensions. In the latter case, it is usually centered in the middle of the screen.
In animated transitions, a fixed graphic animates to a new state when a new text block is scrolled into view next to it. While graphic sequences simply fade graphics in and out, animated transitions show the intermediate, interpolated states between graphics.
Source: 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