What problem does it solve? In the Next.js App Router, Framer Motion's AnimatePresence exit animations never fire on navigation because the router unmounts the old route and mounts the new one almost immediately, leaving no persistent wrapper to run the exit. 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 Next.js's internal LayoutRouterContext so the outgoing page keeps rendering its own content during the exit animation instead of flashing the new route's content. - 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 transitions. - View Transitions API alternative: Covers native document.startViewTransition, the next-view-transitions library, and shared-element morphs via view-transition-name CSS. - Debug checklist and verification harness: A seven-step AnimatePresence troubleshooting checklist plus a standalone HTML seek harness (?view= / ?phase=) for screenshot-verifying transition phases. - Use Case: A developer adds a crossfade between routes in a Next.js app, but the old page vanishes instantly. This Skill diagnoses the missing key and unmounted wrapper, then supplies the template.tsx, PageTransition, and FrozenRouter code to make exit animations fire. ## Quick Start Ask the AI to add an animated page transition between routes in your Next.js App Router app and fix the Framer Motion exit animation that does not fire on navigation.
