33 / MOTION
Layout Animation
The problem
When an element resizes or moves due to a layout change, an instant jump hides the relationship between the two states.
The solution
The card animates smoothly between layout states.
Experiment
Task: Expand and collapse the card.
NAIVE
layout animFALSE
statecollapsed
THOUGHTFUL
layout animTRUE
statecollapsed
Play with the values
350ms
How it works
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.