Sticky Reveal

ScrollVanilla JS · zero dependenciesposition: sticky does the pinning

scroll inside ↓

-- fps

prefers-reduced-motion detected — steps switch without crossfade

X-ray · layers

Pinthe panel sticks while you scroll

Crossfadesteps blend into each other

Step dotswhere am I in the story

Parameters

Steps3

Blend zone0.30

Slide distance30 px

Track length1500 px

your version · updates as you tinker

How this effect works

The pinning costs zero JavaScript: the panel sits in a tall track with position: sticky; top: 0, so the browser holds it in view while the track scrolls past underneath. What JS does is turn leftover scroll into story time: the overall progress (0→1) is cut into equal slices, one per step, and each step's opacity is a little tent function — fully visible in the middle of its slice, blending at the borders.

The blend zone slider is the storytelling dial: a narrow zone gives slideshow-style hard cuts, a wide one gives long dreamy dissolves where two steps coexist. The slide distance adds vertical drift so incoming text rises as it fades in — motion and opacity agreeing about direction is what makes a crossfade feel intentional. The dots are the same progress number quantized to a step index.

Production notes: prefers-reduced-motion: steps switch instantly at slice borders, no fade/drift · sticky is native and cheap; JS only writes opacity/transform on the two steps near a border · the copied snippet is self-contained with its own demo scroll box.