React Scroll Animations
Six components whose timeline is the scrollbar. Parallax rails, scroll-triggered entrances, sections that scrub a transform against progress. Scroll-driven animation is the one case where the user controls playback, which means it has to look right at any speed and in both directions — every one of these is driven by position rather than by a trigger that fires once.
6 components · all free
In This Collection
Plus Grid
A canvas field of '+' glyphs — scroll or pointer motion injects a traveling wave that ripples and decays across the grid.
Scroll-driven animation
Barcode
A procedural barcode whose bars light up like piano notes — looping on autoplay or scrubbed by scroll.
Scroll-driven animation
Starfield
Depth-layered stars drifting through a slow warp, each layer parallaxing at its own pace, with the occasional shooting star streaking a bright amethyst tail across the dark before the field settles back to its patient glimmer.
Parallax
Lumen
Copy that lights up as you read it — words ahead sit dim and unfocused, and stay lit once you pass them.
Scroll-driven animation · Scroll reveal
Sigil
An SVG crest that traces itself in when it scrolls into view, stroke by stroke.
Scroll reveal
Parallax Rail
A pinned section where scrolling down drives content sideways across depth planes moving at different rates.
Scroll-driven animation · Parallax
The Terms
- Scroll-driven animation
- An animation whose progress is tied directly to scroll position.
- Scroll reveal
- Elements fade or slide into place as they enter the viewport.
- Parallax
- Background and foreground move at different speeds while scrolling, creating depth.