gsap-nextjs

Intercept navigation with the Link `onNavigate` prop (Next.js 15.3+), play the outro on the live page, then call `router.push` after the end state. The incoming page runs initial state and intro behind a cover scoped to the route container.

Use React `<ViewTransition>` for shared-element morphs, crossfades, and Suspense swaps; use GSAP for live-DOM outros that gate navigation, interruptible sequences, split text, and scroll-linked motion. Never animate the same element with both engines in one transition.

Yes, but hidden routes stay in the DOM with `display: none`, so scope every selector through `useGSAP` scope or refs and never query `document`. Treat route hide as unmount and re-show as mount, writing initial state explicitly with `set` or `fromTo`.

The router unmounts the outgoing page immediately on commit, killing the outro. Cancel the navigation inside `onNavigate` with `e.preventDefault()`, run the outro timeline, and push the destination only after the end-state callback fires.

Reduced motion must pass through the same five phases with instant changes, firing every completion callback that commits navigation or unmounts content. Use a shared `prefersReducedMotion()` helper and zero-duration timelines rather than skipping phases.

Initially hidden primary content can delay Largest Contentful Paint and risks unreadable HTML if JavaScript fails. Keep text in server-rendered HTML, use a scoped pre-paint hiding rule with an early script and recovery deadline, and reveal hero content without waiting for unrelated setup.