# russellsamora/scrollama **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/russellsamora-scrollama).** 5,982 stars · 291 forks · HTML · MIT ## Links - GitHub: https://github.com/russellsamora/scrollama - Homepage: https://russellsamora.github.io/scrollama/basic - awesome-repositories: https://awesome-repositories.com/repository/russellsamora-scrollama.md ## Description 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. ## Tags ### User Interface & Experience - [Scroll-Driven Animation Tools](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-animation-tools.md) — A JavaScript library that triggers narrative steps and animations as the user scrolls through a page using IntersectionObserver. - [Scroll Pinning Utilities](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/scroll-pinning-utilities.md) — Pins graphic elements using CSS position sticky while scrolling through associated text steps. ([source](https://russellsamora.github.io/scrollama/)) - [Scroll Progress Mapping](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/scroll-progress-mapping.md) — Reports scroll progress as a 0-1 ratio for driving continuous animations based on element visibility. ([source](https://russellsamora.github.io/scrollama/progress)) - [Step Enter-Exit Callbacks](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/custom-scroll-triggers/scroll-lifecycle-callbacks/step-enter-exit-callbacks.md) — Fires enter and exit callbacks when step elements cross configurable viewport thresholds. ([source](https://russellsamora.github.io/scrollama/)) - [Scroll Trigger Distance Configurators](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/custom-scroll-triggers/scroll-trigger-distance-configurators.md) — Fires callbacks when a scroll target reaches a configurable vertical offset from the viewport. ([source](https://russellsamora.github.io/scrollama/custom-offset)) - [Graphic Pinning](https://awesome-repositories.com/f/user-interface-experience/sidebars/sticky/graphic-pinning.md) — Relies on CSS position: sticky to pin graphic elements while text steps scroll past, avoiding JavaScript-driven layout calculations. - [Narrative Graphic Pinning](https://awesome-repositories.com/f/user-interface-experience/sticky-elements/narrative-graphic-pinning.md) — Pins graphic elements with CSS position sticky while scrolling through associated text steps for side-by-side narratives. - [Scrollytelling Graphics](https://awesome-repositories.com/f/user-interface-experience/sticky-elements/scrollytelling-graphics.md) — Pins graphic elements with CSS position sticky while scrolling through associated text steps for side-by-side narratives. - [Step Progress Reporting](https://awesome-repositories.com/f/user-interface-experience/progress-steps/step-progress-reporting.md) — Reports the percentage a step has scrolled through its threshold for fine-grained animation control. ([source](https://cdn.jsdelivr.net/gh/russellsamora/scrollama@main/README.md)) - [Target Offset Configurators](https://awesome-repositories.com/f/user-interface-experience/scroll-areas/programmatic-scrolling/element-targeted-scrolling/target-offset-configurators.md) — Allows setting unique viewport offsets for individual step elements via data attributes. ([source](https://russellsamora.github.io/scrollama/)) - [Per-Element Offset Overrides](https://awesome-repositories.com/f/user-interface-experience/scroll-areas/programmatic-scrolling/element-targeted-scrolling/target-offset-configurators/per-element-offset-overrides.md) — Ships per-element offset customization via data attributes for individual step elements. ([source](https://russellsamora.github.io/scrollama/)) - [Viewport Resize Handling](https://awesome-repositories.com/f/user-interface-experience/viewport-resize-handling.md) — Recalculates element dimensions and viewport state on window resize or DOM mutations. ([source](https://cdn.jsdelivr.net/gh/russellsamora/scrollama@main/README.md)) ### Software Engineering & Architecture - [Scroll-Driven Step Callbacks](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-callbacks/scroll-driven-step-callbacks.md) — Fires enter and exit callbacks when scroll positions cross configurable step boundaries for sequenced storytelling. - [Scroll-Position Event Triggers](https://awesome-repositories.com/f/software-engineering-architecture/scroll-position-event-triggers.md) — Fires callbacks when step elements enter or exit viewport thresholds for scroll-driven interactions. ([source](https://cdn.jsdelivr.net/gh/russellsamora/scrollama@main/README.md)) - [Observer Lifecycle Management](https://awesome-repositories.com/f/software-engineering-architecture/observable-state-management/observer-lifecycle-management.md) — Provides programmatic start, stop, and remove methods for scroll-trigger observers. ([source](https://russellsamora.github.io/scrollama/)) ### System Administration & Monitoring - [Scroll-Offset Thresholds](https://awesome-repositories.com/f/system-administration-monitoring/threshold-monitoring/scroll-offset-thresholds.md) — Accepts a single global offset or per-element data-attribute offsets to define the viewport position that triggers step events. - [Step Trigger Offsets](https://awesome-repositories.com/f/system-administration-monitoring/threshold-monitoring/scroll-offset-thresholds/step-trigger-offsets.md) — Sets the viewport position that triggers step events using a percentage or pixel value. ([source](https://cdn.jsdelivr.net/gh/russellsamora/scrollama@main/README.md)) ### Web Development - [Scroll Step Detectors](https://awesome-repositories.com/f/web-development/intersectionobserver-media-loaders/scroll-step-detectors.md) — Uses the browser's native IntersectionObserver API to detect when elements enter or exit viewport thresholds without polling scroll events. - [Story Step Observers](https://awesome-repositories.com/f/web-development/intersectionobserver-media-loaders/story-step-observers.md) — Uses the IntersectionObserver API to detect when story steps enter the viewport for efficient scroll-based interactions. ### Networking & Communication - [Scroll Progress Ratios](https://awesome-repositories.com/f/networking-communication/upload-progress-tracking/progress-tracked-uploads/decimal-progress-reports/scroll-progress-ratios.md) — Reports scroll progress as a 0-1 ratio of how far an element has moved through its observation threshold for fine-grained animation control.