First scrollytelly
Scrollytelling, a portmanteau of "scrolling" and "storytelling", has become a popular technique to tell immersive, digitally native stories. Taking advantage of the now universal "scroll" pattern on a webpage, scrollytelling stories often include graphics and interactive elements in an effort to make a story more engaging and accessible.
This guide will be three parts:
1. What is scrollytelling and when to use it →
This section will cover the basics of scrollytelling, including what it is, when to use it, and a few different types of scrollytelling techniques.
2. How to create a scrollytelling story →
This section will cover the technical aspects of creating a scrollytelling story, including how to create a sticky overlay and scroll-triggered animations using HTML, CSS, and JavaScript.
3. A simple demo →
This section will walk through a simple scrollytelling demo using Maplibre GL JS, a popular open-source mapping library. The demo will include a sticky overlay and scroll-triggered animations to demonstrate the basics of scrollytelling.
A basic familiarity with HTML, CSS, and JavaScript will be helpful for this guide.
Other resources
If you're interested in learning more about scrollytelling, here are some additional resources. Many are quite old at this point but still have some good information and examples.
- How to Create Scrollytelling Stories - YouTube
- An Introduction to Scrollytelling Data Storytelling using Scrollama.js, D3.js and HTML/CSS
- Responsive Scrollytelling - The Pudding
- How to Implement Scrollytelling - The Pudding
- How We Build Scrollytelling Articles - ONS Digital Blog
- What Makes for a Good Scrollytelling Article? - ONS Digital Blog
- Sticky Scroll Sections - Effect Labs
- Pudding Resources
- First Visual Story
Examples
Many places are doing incredible scrollytelling these days. Below are a few aggregators (both scrollytelling and interactive more generally) and some are newsrooms.
- Interactive Journalism: A Bluesky-bot that shares interactives, graphics, and other stories built using code from newsrooms around the world.
- FlowingData
- The Pudding
- Reuters Graphics
- New York Times Graphics
The style and flow of this guide was inspired by Ben Welsh's great lesson plans. LLMs were used to assist in building the web page for this guide but not the content.