What happens to Framer Motion exit animations when a component with the same layoutId remounts before the exit completes?
0 reputation · 06 Sept 2023, 12:15 UTC
Goal
When a list item that uses a layoutId is removed from the DOM via animatePresence and then re‑inserted with the same layoutId after a short delay, we want the exit animation to finish cleanly without being interrupted by a new enter animation, so the UI shows a smooth fade‑out followed by a fade‑in.
Constraints and uncertainty
The exact timing of the exit animation relative to the remount is not documented; Framer Motion may interrupt the exit and start a new enter animation if the same layoutId appears before the exit finishes, potentially causing a visual glitch. Additionally, stale layout measurements may persist after unmount, and behavior may differ between Framer Motion versions 10.x and 11.x or under React StrictMode.
What determines whether the exit animation is cancelled when a new component with the same layoutId mounts? Which props or presence values can be used to synchronize the exit and enter animations to avoid interruption? How does React StrictMode influence the observed timing?