React Layout Animation
Eleven components that animate between two layouts, not 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 right it keeps the element continuous, so the user follows one object instead of watching one disappear and another appear.
11 components · live previews
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
Flip CardPro
A grid card that flips out of its cell — GSAP Flip carries it to viewport center while it rotates to reveal its back face, then returns on close.
Layout animation
UnfoldPro
A row of slats that open on approach while their neighbours give up the room on a spring.
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
File ExplorerPro
A persistent three-pane file manager that stores real image, video, and blob uploads 100% client-side — OPFS when available, IndexedDB everywhere else — with nested folders, search, sort, drag-and-drop upload, move, and a live preview panel.
Layout animation
MasonryPro
A Pinterest-style grid where every item drops into the shortest column, packed by measurement rather than by a shared row baseline.
Layout animation
The Terms
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.