Scrollama is a JavaScript library for scroll-driven storytelling that uses the browser's native IntersectionObserver API to trigger step-based callbacks and animations as the user scrolls through a page. It pins graphic elements using CSS sticky positioning while scrolling through associated text steps, enabling side-by-side narrative experiences without JavaScript-driven layout calculations.
The library provides a configurable offset threshold system that accepts a single global offset or per-element data-attribute offsets to define the viewport position that triggers step events. It reports scroll progress as a 0-1 ratio for driving continuous animations, and offers programmatic observer lifecycle management with start, stop, and remove methods to control when scroll observers are active. The library is resize-aware, recalculating element bounding boxes and viewport dimensions on window resize or DOM mutations to maintain accurate scroll tracking.
Scrollama supports iframe embedding by allowing a custom root element for scroll observation, and provides per-element offset customization through data attributes. It fires enter and exit callbacks when step elements cross configurable viewport thresholds, and reports step progress for fine-grained animation control. The library also includes observer destruction capabilities to clean up all listeners and callbacks.