React Scroll Animations
Twenty-one 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, so it has to look right at any speed and in both directions. Every one of these is driven by position, not by a trigger that fires once.
12 components · live previews
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
Marquee VelocityPro
A wrapping marquee whose drift speed and direction follow scroll velocity — fast scrolls whip the row along, upward scrolls reverse it.
Scroll-driven animation
Word RevealPro
A scroll-scrubbed word reveal — each word brightens and rises as it enters the viewport, tied directly to scroll position.
Scroll-driven animation · Scroll reveal
Stretch TypePro
Type that deforms with how fast you are scrolling rather than how far. Each glyph springs toward the same velocity signal on a softer spring than the one before it, so the wave down the word is a consequence of the physics instead of a list of delays — change the string and it re-tunes itself.
Scroll-driven animation
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
MasonryPro
A Pinterest-style grid where every item drops into the shortest column, packed by measurement rather than by a shared row baseline.
Scroll reveal
Grid HorizonPro
A synthwave horizon in one fragment shader. A glowing grid floor, a banded sun, parallax ridges and a pulse rolling out of the vanishing point.
Parallax
Depth StagePro
A DOM hero stage where any children become parallax layers in real 3D. Pointer-tracked tilt, spring physics, a following spotlight, depth of field, staggered entrance, zero canvas.
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.