AnimatePresence + Next.js App Router: Exit Animation Timing on Route Changes
0 reputation · 10 Jul 2025, 23:16 UTC
Goal: Verify whether Framer Motion's AnimatePresence component triggers its exit animations when a Next.js App Router route is unmounted via navigation.
Constraint: AnimatePresence only animates children that it directly removes by tracking their key props, while the App Router removes route segments through its internal router rather than a React state change inside your component tree. Whether the removal is observed depends on where AnimatePresence is placed (client layout or template wrapping the segment), the installed Motion version, and React StrictMode behavior in development.
Uncertainty: Maintainers note that exit‑animation firing on App Router transitions is not a guaranteed contract and can vary with placement and version, leaving the exact behavior unresolved.
Does placing AnimatePresence in a client layout that wraps the route segment guarantee that exit animations run on navigation? Does the mode prop (sync, wait, popLayout) change the outcome? Are there version‑specific guarantees in Motion v11+ with Next.js 13.4+ that ensure consistent exit‑animation firing?