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
- 10 Principles for Fluid UIkarlkoch.me
- AnimatePresence | React exit animationsmotion.dev
- Inside Framer's Magic Motionnan.fyi
- Animate with springs - WWDC23 - Videos - Apple Developerdeveloper.apple.com
- arc() | Animate along a curved pathmotion.dev
- Great Animationsemilkowal.ski
- The Web Animation Performance Tier List | Motion Magazinemotion.dev
- 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
- You Might Not Need an Effect – Reactreact.dev
- On UI Animations - Shu Dingshud.in