# 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.

Canonical: https://gsapvault.com/effects/exploded-view-scroll
Live demo: https://gsapvault.com/demos/exploded-view-scroll/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | exploded-view, 3d-transforms, pinning, scrub, velocity-reactive, svg-line-draw, hover-effect |
| Uses Lenis | Yes |

## Overview

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.

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.

## Features

- 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

## Use Cases

- 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

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="path/to/style.css">
```

**2. Add before closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="path/to/script.js"></script>
```

**3. Add the effect HTML anywhere in your `<body>`:**

```html
<div class="exploded" data-exploded>
  <div class="exploded__scene">
    <div class="exploded__stack" data-exploded-stack>
      <!-- Bottom of the stack first, top last -->
      <button type="button" class="exploded__layer" data-exploded-layer aria-label="Base">
        <img src="base.png" alt="">
      </button>
      <button type="button" class="exploded__layer" data-exploded-layer aria-label="Core">
        <img src="core.png" alt="">
      </button>
      <button type="button" class="exploded__layer" data-exploded-layer aria-label="Cover">
        <img src="cover.png" alt="">
      </button>
    </div>
  </div>

  <svg class="exploded__lines" data-exploded-lines aria-hidden="true" focusable="false"></svg>

  <ol class="exploded__callouts">
    <li class="exploded__callout" data-exploded-callout data-exploded-title="Base" data-exploded-note="Machined aluminium">
      <span class="exploded__callout-index">01</span>
      <span class="exploded__callout-title">Base</span>
      <span class="exploded__callout-note">Machined aluminium</span>
    </li>
    <!-- one callout per layer, in the same order -->
  </ol>
</div>
```

The scene pins to the top of the viewport and holds for the runway distance, so give it a full viewport of height (the shipped CSS sets `100svh`).

### Options

Set these as attributes on the `[data-exploded]` element.

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-exploded-gap` | `20` to `400` | `110` | Depth between adjacent layers at full spread, in px at a 300px stack (scales with the rendered size) |
| `data-exploded-tilt` | `0` to `80` | `58` | Final rotateX in degrees |
| `data-exploded-turn` | `-90` to `90` | `-24` | Final rotateZ in degrees, applied in the stack's plane |
| `data-exploded-scale` | `0.3` to `1.5` | `0.86` | Stack scale at full spread, to keep a tall explosion inside the viewport |
| `data-exploded-runway` | `300` to `2400` | `900` | Pinned scroll distance in px on fine pointers |
| `data-exploded-mobile-runway` | `200` to `1600` | `620` | Pinned scroll distance in px on coarse pointers |
| `data-exploded-velocity` | `0` to `3` | `1` | Strength of the over-separation and fan on fast scrolls; `0` disables the velocity channel |
| `data-exploded-lift` | `0` to `200` | `32` | How far the other layers push away from an isolated layer, in px at a 300px stack (the isolated layer itself stays put so it never leaves its own hover) |
| `data-exploded-static` | `true` or `0` to `1` | unset | Render the diagram at a fixed progress with no pin or scroll; `true` is fully exploded |

### Accessibility

- **Reduced motion**: `prefers-reduced-motion: reduce` renders the finished diagram, fully exploded and labelled, with no pin and no scroll-linked motion. Isolation still works.
- **Keyboard**: every layer is a focusable button; focus mirrors hover, Enter pins the isolation and Escape releases it.
- **Focus visible**: `:focus-visible` draws an accent outline around the focused layer.
- **No JavaScript**: the stack renders assembled and the callouts render as a plain list beside it.
- **Screen readers**: give each layer button an `aria-label` naming the part; decorative inner markup should be `aria-hidden="true"`. The mobile legend is an `aria-live="polite"` region.

### Dependencies

**Required:**
- GSAP 3.12+ (demo uses 3.15.0)
- ScrollTrigger plugin

**Optional:**
- Lenis (smooth scroll; the shipped script wires it to ScrollTrigger's clock when present and honours `data-smooth="off"` on `<html>`, `?smooth=off` in the URL, and reduced motion)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Exploded View Scroll](https://gsapvault.com/effects/exploded-view-scroll)
- [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt