AnimatePresence exit animations cancelled on ancestor unmount in Framer Motion 11

Correct Pattern for Stable Exit Animations

The definitive pattern is to stabilize the AnimatePresence wrapper at a persistent ancestor level.

Exit animations in Framer Motion are strictly tied to the child component remaining within the React tree managed by AnimatePresence. If an ancestor component unmounts the wrapper, React initiates the DOM removal process, which preempts the completion of the exit animation lifecycle, regardless of the mode="wait" setting.

Confirmed Fact

• mode="wait" manages sibling sequencing but does not guard against ancestor-driven unmounting.
• Framer Motion 11.x does not expose a documented API (like forceExit or deferUnmount) to halt ancestor unmounting until animation completion.

Required Steps

1. Ensure the <AnimatePresence> component resides within a parent component that is *not* subject to rapid mounting/unmounting cycles.
2. Control the visibility of the animated child entirely through a state prop (e.g., visible) passed to the child, rather than conditionally rendering the child within the wrapper itself.
3. Use this prop toggle to trigger the exit animation before the parent component decides to remove the wrapper entirely.

Diagnostic Detail Required

To confirm if this pattern resolves the issue, please verify: Is the <AnimatePresence> wrapper component itself being unmounted, or is only the child element being conditionally rendered within a stable wrapper?