What problem does it solve? In the Next.js App Router, Framer Motion AnimatePresence exit animations never fire on navigation because the router unmounts the old route before the exit animation can run. This Skill explains the structural cause and provides two working solutions: a pathname-keyed AnimatePresence with the FrozenRouter pattern, and the native View Transitions API. ## Core Features & Use Cases - FrozenRouter pattern: Snapshots LayoutRouterContext so the outgoing page keeps rendering its own content during the exit animation instead of flashing the new route. - template.tsx integration: Uses the App Router's per-navigation remounting template to host a keyed AnimatePresence with mode="wait" for clean exit-then-enter sequencing. - View Transitions API: Implements native cross-page fades and shared-element morphs via document.startViewTransition or the next-view-transitions library, with fallback guards. - Debug checklist: A seven-step ordered checklist for diagnosing why exit animations do not fire, plus a standalone HTML harness for screenshot-verifying transition phases. - Use Case: A developer adds a fade-and-slide transition between routes in a Next.js app, finds the exit animation skipped, and applies the FrozenRouter fix so the old page animates out correctly. ## Quick Start Ask the AI to add an animated page transition between routes in your Next.js App Router project and fix the exit animation that never fires on navigation.
