scrollama

Scrollama is a small JavaScript library that makes it easier to build "scrollytelling" experiences on the web. Scrollytelling is the technique where content on the screen changes or reacts as a reader scrolls down the page. You see it often in long-form journalism and interactive data stories where a chart updates or an animation plays as you move through the text.

Under the hood, Scrollama uses a browser feature called IntersectionObserver to watch when certain page sections come into view. Older approaches listened to every scroll event the browser fired, which could cause performance problems on large pages. The IntersectionObserver approach only fires when an element actually crosses a threshold you define, so it puts less strain on the browser.

You set up the library by pointing it at the page sections you want to treat as steps, then you provide callback functions that run when a reader enters or exits each step. You can also track how far through a step the reader has scrolled, called progress, which lets you animate things smoothly rather than snapping between states. There is a debug mode that draws visual guides on the page so you can see exactly where the trigger points sit.

Version 3 added a built-in resize observer, so the library adjusts automatically when a browser window is resized without you needing to call a manual resize function. You can also set a custom trigger offset on individual steps using a data attribute on the HTML element, which is useful when different sections of a page need to activate at different scroll positions.

Installation is either a script tag from a CDN or a standard npm package import. The library works with any JavaScript framework or with no framework at all. The examples in the repository cover common patterns such as a sticky graphic that stays fixed to the side of the text while the reader scrolls, a full-screen overlay layout, and a mobile-friendly configuration.