React Scroll Animation Components

A scroll effect where cards stick to the top one after another, stacking up and shrinking away layer by layer.

A multi-layer parallax section where each layer shifts at a different speed with scroll progress, stacking up depth and a sense of space.

A pinned section that turns vertical scrolling into horizontal movement, with built-in spring feel, a progress bar, and edge fading.

A sticky text-and-visual reveal: the text on the left flows with the scroll while the visual on the right stays pinned and cross-fades between states.

The product-page effect that scrubs a set of frames with scroll progress — the view stays pinned while the imagery plays frame by frame.

A photo group that zooms through with the scroll — each image scales from the center at its own rate, creating a fly-through depth parallax.

Three scroll indicators in one — a top bar, a bottom-right ring, and section dots on the right, all sharing the same scroll progress.

Skews and blurs content in real time based on scroll speed, springing back level when the scroll stops, for a reading feel full of kinetic energy.

A scroll-driven timeline where the growing line extends along the main axis and each node lights up and reveals its content as the line arrives.

Section pinning plus snap-scroll choreography — full-height sections snap one by one to fill the viewport, content reveals and exits in order, with side navigation dots.

A container that rotates in 3D as you scroll to reveal its content, flattening out from a tilted-back angle to push the view right up to the viewer.

A product/portfolio wall with alternating row parallax — each row sweeps in a different direction as you scroll, with a 3D reveal.

Layered cards that shift at different speeds while scrolling, creating a parallax sense of depth.

Fixed side dots that track the current section, jump smoothly on click, and expand a label.

A gradient blob that morphs between several organic shapes as the scroll progresses.