1. What is scrollytelling and when to use it
In 2012, the New York Times released Snow Fall, a multimedia feature about a deadly avalanche in Washington State. This story arguably changed the way newsrooms thought about storytelling. Today, newsrooms big and small create stunning visuals and works of immersive storytelling.
Scrollytelling could be considered one subset of a larger category of "immersive storytelling" techniques, also sometimes called "interactives." These are stories often take advantage online first (over print) formats to use interaction, animation, multimedia, and personalization to create engaging and interactive stories.
1.1. When to use scrollytelling
Traditional graphic techniques, such as inline graphics or interactive / personalized components are still the default style for most stories today. Scrollytelling can be a powerful tool for the right story. Stories that lend themselves to scrollytelling:
- have a strong narrative structure or might have elements like a dramatic reveal or surprising twist,
- are inherently visual,
- guide the readers step by step through a complex concept or process
Every story should not be a scrollytelly, because:
- they can be more complicated to produce than traditional articles, as it often requires more resources and expertise to create the graphics and interactive elements,
- they can be less accessible to users with disabilities, as it may not be compatible with screen readers or other assistive technologies,
- elements designed for desktop may not translate well to mobile devices.
1.2. Types of scrollytelling
The most common scrollytelling technique is the "scroll-based steps" style, where cards of text are overlaid on a background and certain cards trigger animations or changes as the user scrolls. This is the type of scrollytelling that will be covered in the next section. However, there are many other types of immersive storytelling techniques that can be used to create engaging and interactive stories:
- Scroll-based static: A vertically long static graphical element that goes beyond the viewport that the user must scroll through. (ex 1, ex 2)
- Scroll-based progress: Animations connected to the progress of the users scroll down then pages (ex 1)
- Click-based progression: A technique where the story progresses based on user clicks rather than scrolling. (ex 1 on mobile)