Motion Showcase

Pinned Scenes

Scroll. Each scene below grabs the viewport and holds it while your scroll scrubs the story forward — mask-opens, crossfades, zoom-throughs, a horizontal run, and a sticky handoff. This is the structural spine of a cinematic page.

01 — The hold

The simplest pin: the frame stops, your scroll becomes a slow push-in while a vignette closes around the doors.

scrollTrigger: { pin: true, scrub: 1, end: '+=120%' } — scale: 1 → 1.06

02 — Mask-open

A clip-path circle opens through the closed doors and reveals the candle-lit hall stacked beneath the mask — the doors never move, the geometry does.

clipPath: 'circle(10% at 50% 55%)' → 'circle(140% at 50% 55%)' — end: '+=150%'

03 — Scene crossfade

Three chapters on one scrubbed timeline: the hall, the table, the night. Layers crossfade with autoAlpha while the chapter counter keeps time.

tl.to(scene, { autoAlpha: 1 }, chapter * 2) — one timeline, stacked scenes, end: '+=200%'

04 — Zoom-through

The camera flies 9× into the darkest point of the corridor; as the frame goes black, the night exterior is already waiting underneath. A scene transition with no cut.

scale: 9, transformOrigin: '50% 40%', ease: 'power2.in' — end: '+=160%'

05 — Horizontal run

Vertical scroll becomes lateral travel: the section pins and the track slides by exactly its overflow. Each frame carries its own parallax, driven by the container animation instead of the page.

x: () => -(track.scrollWidth - innerWidth), invalidateOnRefresh: true — children ride containerAnimation

06 — Sticky hero handoff

The night scene pins with no spacer, so the next panel slides straight over it — the classic handoff from a cinematic hero into the content of the page.

pin: true, pinSpacing: false — the next section scrolls over the pinned hero