Exploded View Scroll
A pinned product stack that separates into an exploded assembly diagram as you scroll, with layers that tilt into three-quarter view, callouts that draw in, and a velocity overshoot that springs back.
About This Effect
An exploded view effect that turns a stack of product layers into the assembly diagram every hardware launch page wants. ScrollTrigger pins the scene, and as the visitor scrolls the stack tilts from a flat product shot into a three-quarter view while each layer lifts along the stack's normal, its slab edge and drop shadow appearing as the gap opens.
Read the full effect overview
Every layer gets a callout: a numbered label with a leader line that draws itself in the moment its layer reaches position, and re-measures against the projected 3D position on every frame so it stays attached whatever the viewport. Scroll velocity over-separates and fans the layers, and they spring back with an elastic settle once the wheel stops. Hover, focus or tap a layer to lift it and dim the rest.
What's Included
- Scroll-scrubbed explosion of any number of stacked layers, pinned for a configurable runway on desktop and mobile
- Layers are plain elements, so each one can be a PNG, an SVG, a video frame or the CSS-drawn parts the demo ships with
- Three-quarter tilt and turn applied through custom properties, so the transform order never fights GSAP's
- Velocity channel: a fast flick over-separates and fans the stack, then elastic.out brings it back to the diagram
- Callouts with self-drawing leader lines, positioned from each layer's projected 3D bounds and pushed apart so labels never overprint
- Hover, keyboard focus and tap isolate one layer with a lift and a dim-and-blur on its siblings; Escape releases it
- A one-line legend replaces the callouts on phones and tracks the layer the scroll has just revealed
- Static mode renders the finished diagram at any progress without a pin, used for reduced motion and for print-style pages
Perfect For
- Hardware and wearable launch pages that need an Apple-style teardown without a 3D pipeline
- Product detail pages showing what is inside a device, a shoe, a mattress or a skincare formula
- Architecture and engineering sites explaining a system's layers as the visitor scrolls
- Packaging and materials brands walking through a laminate or a composite build
- Pitch and investor microsites explaining how a product is assembled
How It Works
Each [data-exploded] scene holds a preserve-3d stack of [data-exploded-layer] buttons. A ScrollTrigger pins the scene and scrubs a proxy tween from 0 to 1; a render function turns that progress through power2.inOut into a tilt, a turn and a scale on the stack, and a translateZ per layer proportional to its distance from the middle of the stack, all written as CSS custom properties so the transform order is fixed in the stylesheet.
The trigger's onUpdate reads getVelocity() and tweens two extra values, an over-separation factor and a tilt wobble, that the render multiplies in; a short timeout after the last scroll event starts an elastic.out settle back to zero. After every render the script reads each layer's getBoundingClientRect(), which returns the projected 3D bounds, and positions its callout and polyline from that, staggering each callout's reveal by its index and animating the line with stroke-dashoffset. Isolation tweens a per-layer lift value that the same render adds to the depth.
