FLIP Sortable Lists

When to use this

• Animating list reorder, filtering, adding, or removing items with smooth position transitions.
• Implementing FLIP from scratch without a framework-specific animation library.
• Building framework-agnostic layout animations (works with vanilla JS, React, Vue, Svelte).
• Needing fine control over interrupted animations when rapid reorders happen.
• Do NOT use this for drag-and-drop interaction with sensors and collision detection; see drag-drop-dnd-kit instead.

Mental model

FLIP stands for First, Last, Invert, Play. It is a technique for animating layout changes that are otherwise impossible to animate smoothly (because CSS cannot transition auto layout properties like grid/flex positioning).

1. First: Before the DOM change, record every element's bounding rect (getBoundingClientRect()).
2. Last: Apply the DOM change (reorder, add, remove, filter). The browser recalculates layout. Record every element's new bounding rect.
3. Invert: For each element, calculate the delta between First and Last positions. Apply that delta as a transform so the element visually appears in its old position even though it is now in the new DOM position.
4. Play: Remove the inversion transform over time (using CSS transitions or WAAPI). The element smoothly moves from its visual (old) position to its actual (new) position.

The key insight: you are NOT animating the layout. You are letting the layout happen instantly, then using transforms to fake the visual transition. Transforms are compositor-safe, so this is fast regardless of what caused the layout change (flexbox reorder, grid area change, DOM insert/remove).