Unstable exit positions under AnimatePresence popLayout with layout prop during simultaneous unmounts

Direct answer

Under mode='popLayout', Framer Motion captures the exiting element's bounding rectangle before the exit animation starts. The element stays in the layout flow during that capture and remains mounted until the exit animation finishes; only then is it removed from the DOM. The layout prop is what keeps the exiting node visually anchored instead of letting it collapse immediately.

When several children unmount in the same render tick, React batches those unmounts. Framer Motion does not publish a deterministic ordering for multiple simultaneous exits, so the exact moment each exit animation starts can shift between renders and between major versions. If a sibling mounts or unmounts in the same tick, a browser reflow can occur before the exiting node is measured, making the snapshot stale and causing unstable exit positions.

Confirmed facts versus likely explanation

Confirmed behavior	Likely cause of instability
popLayout delays DOM removal until after the exit animation completes.	Simultaneous unmounts share one render commit; layout reads and writes can interleave with React's commit phase.
layout={true} holds the exiting element in flow using a measured snapshot.	A missing or stale snapshot causes fallback positioning and visual jumps.
Reusing layoutId across an exiting and entering node enables cross-fade pairing.	Pairing is implementation-defined; the wrong node can inherit the exit position or anchor.

Steps for this case

1. Scope every layoutId to a single instance. Derive it from a counter, UUID, or item key plus a role suffix so an exiting node and a concurrently mounting sibling never share an identifier.
2. Avoid triggering multiple unmounts in one state update when exit position stability is critical. Stagger removals across separate updates or animation frames so each popLayout cycle completes before the next unmount begins.
3. Add onLayoutExit and onLayoutEnter callbacks to log measurement, animation start, and removal order. Inspect the sequence in React DevTools Profiler to confirm whether layout capture precedes DOM removal in your version.
4. Pin the Framer Motion major version in package.json. Layout measurement deferral changes between releases, so retest the same component tree after any upgrade.

Missing diagnostic detail

Are the simultaneous unmounts caused by a single state update, such as filtering a list, or by separate event handlers firing in rapid succession? This determines whether staggering is possible or whether you need to defer measurement with a React transition.

Note: This is a conservative draft for human review. Verify the exact measurement and removal sequence against your installed Framer Motion version before deploying.