57 Layout Animation. 57 of 95.
57/MOTION/57 of 95
Layout Animation
Layout changes — expand, add, remove, pack — should be a journey, not a jump cut.
The problem
When elements resize, move, appear, or leave holes in a grid, instant jumps hide what changed.
The solution
Cards and list items animate between layout states; neighbors pack without holes.
Experiment
Play with the values
350ms
How it works
- A state change — expand, add, remove, or pack — produces a new layout.
- Positions are measured before the change, which is the first frame.
- The new layout is applied, which is the last frame.
- The difference is inverted so elements still look like they are in the old place.
- That difference plays to zero, so neighbors travel into the new arrangement instead of jumping.
Seen in
Expanding cards
A summary card grows into a detail view, keeping continuity of the element.
Grid ↔ list toggles
Switching layouts animates items to their new arrangement instead of reflowing abruptly.
Tab panels
Content containers resize smoothly as different tabs change their height.
Filter results
Cards rearrange with motion as filters add or remove items.