The Vibeary — round-up

Best scroll animation and scrollytelling tools

Scroll is the only interaction every visitor performs, which is why scroll-driven animation carries so much weight on a landing page — and why it goes wrong so often. The tools here cover both ends: low-level scroll-linked animation and pinning for interface work, and full scrollytelling frameworks for narrative and data-led pieces where content advances as the reader moves. Also included are the modern CSS scroll-driven animation references, which now replace a surprising amount of JavaScript.

What earned a place

Smooth without hijacking native scrolling
Degrades sensibly under prefers-reduced-motion
Does not fight the browser's own scroll-driven animation features
Works on touch as well as it does on a trackpad

21 picks from the library

01
ai2html
Adobe Illustrator script that exports artboards as responsive HTML text over a background image, per breakpoint.
Why it made the list: How NYT ships hand-designed charts with selectable, translatable text
Scrollytellingopen-sourceArchie Tse / NYT Graphics (@nytgraphics)github.com
02
animere
Scroll-triggered animation runner that drives Animate.css classes via IntersectionObserver with no configuration.
Why it made the list: Declarative data-attribute API; add one script and reveal-on-scroll just works
Scroll effectsMITJohann Schopplich (@johannschopplich)github.com
03
basement scrollytelling
React and GSAP library for declarative scroll-driven animation timelines with waypoints and parallel tweens.
Why it made the list: Studio-grade scroll choreography exposed as declarative React components
ScrollytellingMITbasement.studio (@basementstudio)github.com
04
Closeread
Quarto extension adding scrollytelling to reproducible documents so prose scroll steps drive plots and maps.
Why it made the list: Scrollytelling from an .qmd file — no build pipeline, no JS to write
ScrollytellingMITQuarto Lab (@qmd-lab)github.com
05
Lax.js
Vanilla scroll-animation plugin driving CSS transforms and filters from scroll position via a declarative preset syntax.
Why it made the list: Dependency-free parallax with a preset language; far lighter than ScrollTrigger.
Scroll animationMITAlex Fox (@alexfoxy)github.com
06
Lenis
Smooth-scroll runtime that virtualizes wheel input while keeping native scrollbars, anchors and accessibility behaviour intact.
Why it made the list: The award-site default that replaced Locomotive; tiny and framework-agnostic.
Scroll animationMITdarkroom.engineering (@darkroomengineering)lenis.dev
07
Loconative Scroll
Locomotive Scroll's API reimplemented on native scrolling plus Lenis, keeping the data-attribute syntax without the fake scroll container.
Why it made the list: Migration path off Locomotive that keeps your markup and fixes the a11y problems.
Scroll animationMITQuentin Hocdé (@quentinhocde)github.com
08
Motus
Scroll animation library that mimics CSS keyframe syntax, letting you define percentage-based frames tied to scroll progress.
Why it made the list: Keyframe mental model applied to scroll — reads far clearer than tween chains.
Scroll animationMITAlexandru Cambose (@alexcambose)github.com
09
Mural
Self-hosted tool for building visual scrolling stories with video, audio and image backgrounds, no code required.
Why it made the list: Shorthand-style scrolling stories you fully own, without the subscription
Scrollytellingopen-sourceGetMural (@GetMural)github.com
10
react-kino
Scroll-driven cinematic storytelling primitives for React under one kilobyte gzipped, built on native scroll timelines.
Why it made the list: Uses native scroll-timeline instead of scroll listeners, so it is basically free
Scroll effectsMITBilal Tahir (@btahir)github.com
11
react-scroll-parallax
React hooks and components for scroll-linked parallax on elements, banners and backgrounds with easing and rotation.
Why it made the list: Controller-based so dozens of parallax elements share one scroll listener
Scroll effectsMITJ Scott Smith (@jscottsmith)github.com
12
Sal
Performance-focused scroll reveal library using IntersectionObserver and CSS classes, weighing under 3KB with no dependencies.
Why it made the list: AOS replacement that is a tenth the size and does not poll scroll events.
Scroll animationMITMirek Ciastek (@mciastek)github.com
13
Scroll-Driven Animations
Reference site of live demos, tools and recipes for CSS scroll() and view() timelines, including a progress-bar and stacking-cards cookbook.
Why it made the list: The definitive resource for killing your scroll-animation JS dependency entirely.
Scroll animationfreeBramus Van Damme (@bramus)scroll-driven-animations.style
14
Scroll-Driven Animations Debugger
DevTools extension that lists scroll and view timelines on a page and visualizes their ranges and current progress.
Why it made the list: Only tool that makes native scroll timelines inspectable instead of guesswork.
Scroll animationMITBramus Van Damme (@bramus)github.com
15
Scrollama
IntersectionObserver-based scrollytelling library that fires step callbacks and progress values without listening to scroll events.
Why it made the list: The newsroom standard from The Pudding; battle-tested on huge editorial pieces.
ScrollytellingMITRussell Samora (@russellsamora)github.com
16
scroller (rdmurphy)
Sub-1KB scrollytelling library exposing enter/exit events for steps with no dependencies or framework assumptions.
Why it made the list: Under a kilobyte for the whole scrollytelling contract
ScrollytellingMITRyan Murphy (@rdmurphy)github.com
17
ScrollMagic
Scroll interaction framework for pinning elements, scrubbing tweens and triggering callbacks against scroll position, with a visual debug indicator mode.
Why it made the list: Free ScrollTrigger predecessor; the built-in visual scene indicators are still unmatched.
Scroll animationMITJan Paepke (@janpaepke)github.com
18
ScrollReveal
Library that reveals elements as they enter the viewport, with per-element distance, rotation, scale, interval and sequencing config.
Why it made the list: The reveal library that predates AOS and still has the richest sequencing options.
Scroll animationGPLFisssion (@scrollreveal)github.com
19
ScrollyVideo.js
Component that scrubs a video frame-accurately against scroll position across React, Vue, Svelte and vanilla, handling decode differences per browser.
Why it made the list: Frame-accurate scroll-scrubbed video is notoriously hard; this handles the codec edge cases.
ScrollytellingMITDaniel Kao (@dkaoster)scrollyvideo.js.org
20
simpleParallax.js
Applies parallax to images by transforming and scaling them within their container, avoiding layout shift.
Why it made the list: Image-only parallax that never breaks layout, unlike background-attachment hacks
Scroll effectsMITGeoffrey Signorato (@geosigno)github.com
21
tw-fade
Tailwind v4 plugin adding scroll-edge fade masking to overflow containers with zero JavaScript.
Why it made the list: Solves the ugly hard-cut scroll edge that every carousel and list has
Scroll effectsMIT(@petekp)github.com

Questions

Is smooth-scroll hijacking bad for accessibility?: It can be. Keep native scroll speed, avoid trapping the user, and provide a reduced-motion path that simply shows the content.
Can CSS handle scroll animation now?: For many effects, yes — scroll-timeline and view-timeline cover reveals and progress indicators without JavaScript.

All round-ups Search all gems Newest additions