Pinned Device Scrub
The signature Apple move. A device lifts into frame, the page pins, the device zooms until the screen fills the viewport, the app screens scrub one by one, then the pin releases and the page continues as if nothing happened.
- Difficulty
- Flagship
- Credits saved
- ~340
- Access
- Members
Technique
A tall wrapper (420vh) containing a sticky 100vh stage. Scroll progress through the wrapper drives translateY → scale → screen index, all on a single rAF-throttled listener. The pin releases naturally when the wrapper ends.
Choreography spec
420vh wrapper, sticky 100vh stage
- 0 → 0.18device rises 18vh and rotates from 14deg to flat
- 0.18 → 0.34scale 1 → 1.9, origin locked to the screen centre
- 0.34 → 0.9screens wipe through on a clip-path, sub-step drift
- 0.9 → 1scale returns to 1, chrome fades, pin releases
Reversibility
Every value derives from position — scrubbing up rewinds exactly.
Reduced motion
Static device at final scale, screen 1, no pin.
Build a "pinned-device-scrub" section for my landing page. TECHNIQUE A tall wrapper (420vh) containing a sticky 100vh stage. Scroll progress through the wrapper drives translateY → scale → screen index, all on a single rAF-throttled listener. The pin releases naturally when the wrapper ends. SPEC ██████████████████████████████████████████████ ██████████████████████████████████████ ████████████████████████████████████████████████████ RULES ████████████████████████████████████████████ ██████████████████████████████████████████████████
Full prompt unlocks with membership.
Anchored scroll — pin, zoom, scrub
The page stops. The product keeps going.
Explore feed, search pill, real listings with prices and ratings.
Hero photo, host, amenities — and one coral button: Reserve.
Dates, guests, price breakdown. Confirm and pay.
Reservation locked — itinerary, check-in, a note from the host.