Back to Motion Prompt examples
Motion graphics moves, part 2 · #23
Exploded view
Parts separate to show the structure inside. A phone separates into its layers to show how it is built, then assembles again.
Transitions & highlightsexploded-viewexplodelayersisometricproductbreakdownexplainer
Full motion specification
How the movement works
Use it to explain what is inside a product, how it works or what it is made of, at a glance.
- 01An isometric phone built from four layers (back cover, battery, circuit board, screen). Each layer is a flat rounded plate drawn on axes scaled by 0.85 and tilted 30° either way, with 6 px thick sides.
- 02Separate: from 0.45 s, 0.75 s per layer, each layer 0.08 s after the one below, backOut (s = 1.3). Height of layer i (0–3 from the bottom) = 7i + 30i × progress, so the back cover stays put.
- 03While apart, each layer bobs ±3 px twice per 4.7 s, dotted guide lines join the corners, and name labels with leader lines appear on the right (in Japanese in the demo).
- 04Reassemble: from 3.25 s, 0.7 s per layer, starting with the top layer, 0.07 s apart, cubic ease-in-out.
Prompt
Show an exploded view of the product: four parts spread apart in 1 s, each with a name label.