Karl Koch | On layout choreography
Layout animation keeps spatial memory intact when lists reorder, panels expand, and items enter or leave. FLIP turns layout jumps into transform-based motion.
Interfaces teleport all the time. Remove an item from a list and everything below it snaps upward; insert a row and the existing content jumps down. Expand a panel and the neighbouring blocks instantly reflow around it. The layout is technically correct, but for one frame the reader loses the connection between the state change and the objects that moved. Layout choreography gives that reflow a visible path. The jump The simplest version of a dynamic list is just state: const [items, setItems] = useState(initialItems); return ( <ul> {items.map((item) => ( <li key={item.id}> {item.label}…
saved by
related reading
- AnimatePresence | React exit animationsmotion.dev
- 10 Principles for Fluid UIkarlkoch.me
- arc() | Animate along a curved pathmotion.dev
- Inside Framer's Magic Motionnan.fyi
- Great Animationsemilkowal.ski
- What will you ship?rauno.me
- Details That Make Interfaces Feel Betterjakub.kr
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- The Web Animation Performance Tier List | Motion Magazinemotion.dev
- Invisible Details of Interaction Designrauno.me
- animations.devanimations.dev
- On UI Animations - Shu Dingshud.in