Three.js Scroll Product Stages — GSAP Scrollytelling

The Three.js Scroll Product Stages snippet turns a scroll into a guided product tour: a 3D object spins, flips, explodes into parts, and reassembles across four stages while synchronized captions cross-fade beside it — every beat driven by scroll position, not a timer — using core Three.js and GSAP's ScrollTrigger plugin, both loaded from a CDN. This is the "scrollytelling" pattern popularized by high-end product pages.

One continuous stage value, not four discrete steps

Instead of snapping between four separate states, the snippet scrubs a single value s continuously from 0 to 3 — literally "which stage are we on, fractionally." A value of 1.5 means the tour is exactly halfway between the second and third beats. Every visual property is then written as a piecewise function of s, so the stages don't jump; they flow into one another, and any scroll position produces a coherent in-between frame.

A segment helper for smooth piecewise motion

The heart of the effect is a small seg(s, from, to, a, b) helper that returns a before its range, b after it, and a smooth-stepped blend in between. The product's Y spin is one segment (stage 0→1), its X flip is another (1→2), and its explode-and-settle is a pair of overlapping segments (2→2.6 out, 2.6→3 back). Composing motion from these labelled ranges keeps each stage's behavior isolated and readable — you can retune when the flip happens without touching the spin.

A product that comes apart

The object is built as three stacked ring segments in a parent group, each remembering its resting Y offset. During the explode segment those offsets are scaled outward so the parts separate, then pulled back as the final stage settles. Because the parts are children of one group, the staged spin and flip still apply to the whole assembly while the explode acts only on the individual parts — two independent transforms layered cleanly.

Captions cross-fade by proximity to their stage

The four HTML captions are positioned over the canvas, and each frame their opacity is set from how close s is to that caption's index, with a small horizontal drift as they fade. Driving the text from the same scrubbed value as the 3D means copy and motion are always in lockstep — the "see how it comes apart" line reaches full opacity exactly as the product explodes, with no separate scroll listeners to fall out of sync.

Idle life on top of staged motion

A gentle continuous yaw and a slow sine wobble are added on top of the staged rotation, so the product never looks frozen when the visitor pauses mid-scroll. The staged transform gives the tour its structure; the idle motion keeps it feeling alive between beats.

scrub: 0.6, pinned, fully reversible

A numeric scrub smooths the scenario against noisy input, and pinning for +=500% gives each of the four stages a comfortable span. Because everything — rotation, explode, and text opacity — derives from the one scrubbed s, scrolling back up rewinds the entire tour precisely. This is the same pinned-scrub foundation as the scroll camera path, here choreographing an object instead of a camera. Pair it with a horizontal gallery of variants or a particle assembly intro.