React Layout Animation
Seven components that animate between two layouts rather than between two styles. A card that expands into a dialog, a grid that reflows when an item leaves, a panel that resizes without its contents jumping. Layout animation means measuring the before and after positions and interpolating the difference — done properly it keeps the element continuous, so the user tracks one object instead of watching one disappear and another appear.
7 components · all free
In This Collection
Reflow
Text whose words keep their identity when the line breaks move — narrow the measure and the sentence travels instead of re-wrapping.
Layout animation
Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
Layout animation
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
Layout animation
Segmented
A segmented control whose indicator travels on a shared layout id and smears in the direction it is moving.
Layout animation
Reorder
A sortable list that answers to a finger and to a keyboard equally — grab a row, and the rest step aside to make the space.
Layout animation
Approval Flow
A step-by-step approval checklist for agent permissions — radio and checkbox groups, an "Other…" escape hatch that grows a field in place, and per-step validation that blocks the commit. Answering a step sends the chosen option flying into a running record of what you have already decided, so the screen accumulates a decision trail instead of replacing itself.
Layout animation
Diff Review
A review surface for a patch an agent has proposed — accept or reject each hunk, fold long runs of unchanged lines away, and flip between unified and split. Switching views does not redraw the diff: every line is a shared element that flies from the stream into its column and back, so you never lose the line you were reading.
Layout animation
The Terms
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.