Scroll Product Launch Story — Free GSAP ScrollTrigger Cinematic Reveal

Product launch pages want a specific feeling: the device settles into frame, and features get introduced one at a time without ever losing the object at the center of attention. This snippet builds that entirely from one pinned, scrubbed GSAP timeline — no separate pins per feature, no manually staggered ScrollTriggers to keep in sync.

One timeline, one pin, three synchronized callouts

Rather than pinning three separate sections (one per feature, each needing its own enter/exit logic), a single gsap.timeline() is attached to one ScrollTrigger covering the entire 3200px pinned distance. The device's settle-and-tilt animation, and all three callouts' fade-in/fade-out pairs, are all positioned on this one timeline using absolute time offsets (0, 0.3, 1.4, 1.5...) — so their relative timing is fixed and readable in one place, instead of scattered across multiple trigger configs that would need separate distance math to line up.

Callouts occupy non-overlapping timeline slices

Each callout gets an in-tween and an out-tween scheduled back-to-back on the shared timeline (callout 1 fades in at 0.3, out at 1.4; callout 2 fades in at 1.5, right after callout 1 finishes exiting). Because they're all on the same timeline rather than independently-triggered elements, there's no risk of two callouts appearing on screen simultaneously by accident — their timing is declared relative to each other, not computed from separate viewport-crossing calculations.

A derived chapter label, not a fourth manually-timed tween

Rather than adding a fourth set of tweens just to swap the "01 — The Lens" style label, an onUpdate callback reads the master timeline's own current .time() and buckets it into whichever chapter's range it falls in. The label is a pure function of the timeline's existing playhead position — one more derived output riding on the same scrubbed value everything else already uses.

A real (if simple) 3D tilt, not a flat scale

transformPerspective: 800 is set once via gsap.set() before the timeline runs, which is what turns the rotateY tween on the device from a horizontally-squashed flat animation into something that reads as genuine 3D rotation settling toward the camera — a detail easy to miss since rotateY alone, without a perspective value on the element or its parent, looks visually wrong.

Customizing it

Swap the CSS-built camera body for a real product photo or a Three.js-rendered model (see scroll GLB turntable for that variant), and reposition the three callouts to point at whatever features matter — their timeline slice offsets are independent of their screen position, so moving a callout's top/left in CSS never affects its timing. Follow with the scroll stat reveal story pattern for an even more dramatic specs section.