Set the scene
Each panel owns an equal slice of the pin. Opacity ramps in, holds, then hands over to the next panel.
VIPEX Motion · 05 Scroll
One engine, four stacking modes: sections that cover each other, cards that pile with depth, a pinned crossfade stage and a media column that syncs to your copy. Native scroll only — position:sticky plus a progress calculator.
scroll ↓ · press H to toggle the panel
Full sections pin at the top. The next one slides over the previous, which scales down, dims and drifts up. Covered layers stop catching the pointer.
this section pins — the next slides over it
the layer beneath scales, dims and drifts
any background works — even loud ones
last layer — never dimmed, never disabled
Cards pile up with a per-card top offset. Each covered card shrinks from its stuck edge, so the stack reads as depth. Overlap slider sets the stagger.
Placeholder copy. Each card is just a child of the container — the engine handles sticky offsets, z-order, scale and dim.
Placeholder copy. The card behind starts shrinking the moment this one enters the viewport, easing the hand-off.
Placeholder copy. Transform and opacity only — no layout thrash, no scroll hijacking.
Placeholder copy. The last card never dims and never loses pointer events.
The container pins for a fixed scroll distance while its panels crossfade one after another. The header (marked with data-stack-header) drifts up as you move through.
Each panel owns an equal slice of the pin. Opacity ramps in, holds, then hands over to the next panel.
The crossfade width is one option. Widen it for slow dissolves, tighten it for hard cuts.
The last panel holds to the end of the pin instead of fading out, so the section exits on a full frame.
A sticky media column crossfades to match whichever text step sits in the center band of the viewport. On small screens the media stays inline with each step.
01
Placeholder copy. Mark the media inside each step with data-stack-media — the engine lifts it into the sticky frame.
02
Placeholder copy. As this step crosses the viewport center, the frame crossfades to its media.
03
Placeholder copy. The active band height is an option — narrow it for precise switching, widen it for lazy switching.
04
Placeholder copy. Below the mobile breakpoint the engine is inert and the media renders inline — no branching needed in your markup.