AnimatePresence exit animations cancelled on ancestor unmount in Framer Motion 11
0 reputation · 17 Oct 2024, 03:27 UTC
Goal
What is the correct pattern for ensuring AnimatePresence exit animations complete before DOM removal when a parent component unmounts the AnimatePresence wrapper during rapid mount/unmount cycles?
Constraint
AnimatePresence only waits for exit animations while the child remains mounted in React's tree. If an ancestor unmounts the wrapper, React may batch removal before the exit animation starts, cancelling it. mode="wait" sequences siblings but does not protect against ancestor unmount, and no force-exit or defer-unmount API is documented in Framer Motion 10.x–11.x.
Version assumption: Framer Motion 11.x with React 18. Hydration contexts and older @types packages remain unverified.
Open questions
- Does keeping AnimatePresence mounted at a stable ancestor and toggling child visibility via props reliably complete exit animations during rapid unmount cycles?
- Is there any documented mechanism to defer ancestor unmount until exit animations finish?
- Should the absence of a force-exit API be treated as an intentional design decision rather than a configurable limitation?