VIPEX Motion · 05 Scroll

Pinned Scenes

Four pinned scroll scenes from one engine: a clip-edge card wipe, a scrubbed mask reveal with a ghost-letter marquee, a horizontal timeline driven by vertical scroll, and a footer that rises under a fading overlay. Native scroll and position:sticky throughout — the page is never trapped.

scroll ↓ · press H to toggle the panel

01

card-wipe

One pinned stage holds every card. Each card's clip edge sweeps the next one in over the last, so the compositions swap in place while the media parallaxes behind.

01

Arrive

Placeholder copy. The composition holds the same viewport slot for every card, so only the clip edge moves.

Studio · Placeholder
02

Descend

Placeholder copy. Media behind the wipe drifts against the edge, which gives the swap depth without moving the text.

Identity · Placeholder
03

Break

Placeholder copy. The outgoing card dims as it is covered, so the incoming one reads as the front layer.

Product · Placeholder
04

Settle

Placeholder copy. The last card holds to the end of the pin, so the section exits on a full frame.

Motion · Placeholder
02

capsule-mask

A mask shape opens from the centre of a pinned stage as you scrub. Behind it, ghost copies of the title stream across in a marquee band and tiles fly through on a staggered arc.

Scene

Placeholder plate01
Placeholder plate02
Placeholder plate03
Placeholder plate04
Placeholder plate05
Placeholder plate06
Placeholder plate07
Placeholder plate08
03

horizontal-timeline

Vertical scroll distance is remapped to horizontal travel inside the pinned stage. Wheel, keyboard and vertical touch are never intercepted, so the section always releases at both ends. A sideways trackpad gesture is folded back into the same travel while pinned.

2016

First mark

Placeholder caption for the first milestone on the rail.

2018

Second mark

Placeholder caption. Items fade and settle as they pass the centre line.

2020

Third mark

Placeholder caption. The rail fill tracks the same progress value.

2022

Fourth mark

Placeholder caption. Raise the travel ratio for a slower, more deliberate pass.

2024

Fifth mark

Placeholder caption. Below the breakpoint the rail becomes a normal grid.

2026

Sixth mark

Placeholder caption. The last item lands as the stage hands scroll back.

04

footer-reveal

The footer starts pushed up out of place with a dark overlay over it, then settles into position as the bottom of the page comes into view and the overlay clears.

keep scrolling

window.PinnedScenes