Animate a filtered list without confusing item identity

A filtered-list animation should show existing items moving to their new positions without changing their identity. Use stable keys, measure the old and new geometry, and handle interrupted updates. The list must remain correct when all motion is removed.

Preserve identity first

React’s list guidance explains why stable keys matter. Use an item’s durable ID rather than its array index when filtering or reordering. If the key changes with the position, the framework can treat one item as another and the animation may appear to move the wrong content.

items.map(item => (
  <article key={item.id} data-item-id={item.id}>
    <h3>{item.title}</h3>
  </article>
))

This is a rendering fragment. It needs your actual component state and DOM measurement code; it is not a complete animation hook.

Follow the geometry, not a guessed distance

Record each visible item’s rectangle before changing the filter. After the DOM update, measure the new rectangles. Existing items can animate from the old-to-new offset back to zero. Batch reads before writes so the code does not alternate layout measurement and style changes for every item.

Plan interruption explicitly

An item midway through a transform can produce misleading measurements for the next update. Choose a deliberate policy: cancel and settle before measuring, or measure the current visual position with a carefully tested implementation. Do not assume that repeated clicks arrive only after the previous effect finishes.

Test the sequence

Review this filtered-list animation.
Check stable identity, batched measurements, cancellation, final styles,
reduced motion, and focus when an item disappears.
Test filter A, filter B before the first animation finishes, then reset.
Do not claim the animation is correct from a single settled screenshot.
Component and hook: [code]

Verify keyboard focus if a focused item is removed. Announce result counts where useful without narrating every movement. The animated path should explain the change; the immediate path must preserve the same results and controls.