How to implement scrollytelling with six different libraries

Scrollytelling is the best (or the worst depending on your point of view). We love it here at The Pudding. But creating a scroll-driven story is hardly a standardized practice, and there are many libraries out there that can help make it happen. Check out my follow-up post, where we look at mobile solutions.

“Scrollytelling” is when content (e.g., a graphic) is revealed or changed as the user scrolls. It does not alter scroll behavior, but simply monitors it. As Martha Stewart would say, “It’s a good thing.” Do not confuse this will scrolljacking, which manipulates the browser’s scroll mechanics with JavaScript, which is generally considered bad practice. Here are a few examples of the good stuff in action:

In this post, I look at how to tackle a simple scroll-driven chart using six different libraries and share my thoughts on each implementation. It is inspired by Lisa Charlotte Rost’s great post comparing charting libraries.

I'm not going to get into the different types of scrollytelling, or debate the serious moral and ethical implications of the practice. I defer to these posts for scrollytelling primers.

We want to make something like this:

There are two goals here:

1. Use the "scroll-to-trigger" pattern where the trigger element (in our case a block of text) tells the chart to update to a new state.

2. We want the chart to stay fixed while the text moves and have it snap back into place as it enters and exits, because often the scrollytelling portion is not the entire story.

Disclaimer: this post does not cover responsive solutions (though you should do it, and most libraries make it pretty painless). If you have the audacity to resize your browser, refresh the page. For mobile and responsive solutions, check out my follow-up post,