Home icon
Data Visualisation Guide

Building scrollytelling articles

1 minute read

Scrollytelling

Producing articles that make use of scrollytelling techniques is costly: not only does the storyline need to be sketched out in detail, the graphics for each step need to be designed, and code for running the animations needs to be written. On top of that, a framework needs to be in place that can detect the users’ scroll position and trigger the update of the graphics in the scroller.

A popular javascript library for scrollytelling is Scrollama. Integrations of Scrollama exist for popular front end frameworks like React and Vue.

The options for non-coders are limited. Data visualisation tool Flourish offers a low coding scrollytelling option in its paying plans. Webflow has a “A beginner’s guid to scrollytelling” that highlights some techniques and provides links to how to implement them in their own web publishing tool.

Related pages

Annotated chart narrative visualisation

Scrollytelling: introduction

Scrollytelling: moviescroller

Scrollytelling: show-and-play

Scrollytelling: graphic sequence

Scrollytelling: animated transition

Scrollytelling