gsap-nuxt

Set app.pageTransition with css: false and implement the JavaScript hooks onBeforeEnter, onEnter, and onLeave with GSAP timelines. Declare the done parameter and call it from onComplete, onInterrupt, and synchronously under reduced motion.

Use Vue Transition CSS for simple fades and slides, experimental.viewTransition for snapshot morphs, and GSAP JavaScript hooks for live-DOM outros, sequencing, and interruption. Use one engine per element and never run Vue hooks and a view transition on the same navigation.

A leave hook that never calls done keeps the old root in the DOM forever and blocks page:transition:finish and Nuxt's scroll. Call done from the timeline's onComplete and onInterrupt, since a killed timeline never completes.

GSAP runs only on the client, so guard it with import.meta.client, onMounted, or ClientOnly and never use appear on server-rendered pages. Under keepalive, revert contexts in onDeactivated and rebuild in onActivated, writing initial state explicitly since the DOM already holds settled values.

Set a root marker via an inline head script before first paint and hide intro targets with a scoped CSS visibility rule keyed to that marker. Register recovery with a bounded deadline so failed setups restore readable content instead of leaving it hidden.