// the find
joshwcomeau/react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
React Flip Move wraps a list of React children and animates position changes using the FLIP technique — recording positions before and after a DOM update, then playing back the difference as a CSS transform. It targets the common case of reordering or adding/removing items in a list without requiring you to track positions yourself. The approach is sound and the results look good with almost no setup.
Uses only `transform: translate` for animations, which stays on the compositor thread and avoids layout thrashing. Sub-5kb gzipped is genuinely small for what it does. The wrapperless mode (`typeName={null}`) makes it play nicely with flexbox and grid containers that break when an extra div appears in the middle. Staggered delay/duration per child ('humanizing') is a small touch that makes list reorders feel less mechanical.
Abandoned — last commit was 2022, the README says it's looking for maintainers, and the author points you to react-flip-toolkit instead. Still uses class component internals and the legacy ref pattern; hooks-based React apps work around this with `forwardRef` but it's friction. Overrides any existing `transition` or `transform` on direct children, which is a silent conflict if your list items already have CSS animations. Enter/exit animations have a known race condition when items are added/removed rapidly — the README admits 'interrupted enter/leave animations can be funky.'