What happens to Framer Motion exit animations when a component with the same layoutId remounts before the exit completes?

Short answer

Remounting a component with the same layoutId does not cancel the exit animation. AnimatePresence tracks exiting children by React key, not layoutId, so the exiting copy keeps running until its exit transition finishes and is then removed. What you see is usually a shared layout handoff: the new element mounts with a matching layoutId and animates from the old bounding box, making the old element's exit appear cut short.

Likely explanation vs. confirmed behavior

Confirmed, well‑established behavior:

• Exiting children are keyed by React key; a same‑layoutId remount is a separate presence entry.
• layoutId triggers a shared layout transition from the last known bounding box of the previous element with that id.
• onExitComplete fires only after all exiting children finish.

Plausible but version‑sensitive: the exact timing of the layout snapshot handoff and whether stale measurements persist after unmount. This changed across major releases (notably around the layout‑animation refactors between 10.x and 11.x), so treat any claim that the exit is "cancelled" as an interpretation to verify against your installed version, not a guarantee.

How to get clean fade‑out‑then‑fade‑in

1. Use mode=\"wait\" on AnimatePresence. This forces the exiting child to fully complete before the new child enters. mode=\"sync\" (default) runs both simultaneously; mode=\"popLayout\" pops the exiting element out of layout flow — neither guarantees sequencing.
2. Gate the re‑insertion on onExitComplete. Defer setting the state that re‑adds the item until this callback fires. This guarantees zero overlap at the cost of a forced delay equal to the exit duration.
3. Drop layoutId on the remount if you don't need the shared transition. Removing the shared id eliminates the handoff artifact entirely.

Note: there is no public presence prop for cross‑component coordination — PresenceChild/presence context are internal. User‑facing synchronization is mode, onExitComplete, and per‑component exit transition duration.

React StrictMode

In development, StrictMode double‑invokes mount/unmount effects, so presence registration and layout measurements run twice. This can produce flicker or apparent "instant remounts" that never happen in production. Verify any timing anomaly in a production build with StrictMode off before tuning durations.

Verify before tuning

Build a minimal repro with your exact installed version: remove the item and re‑insert it after a delay shorter than the exit duration. Log a timestamp in onExitComplete and compare it to the remount time — this tells you whether the exit truly was interrupted or whether you are only seeing the layout handoff. Repeat with mode=\"wait\" to confirm the enter starts only after exit completion.