Nuxt3 GSAP NuxtPage Transition

app.vue

<nuxt-page :transition="globalTransition" />

transition.js

import { gsap, Expo, Power2 } from 'gsap'

export const globalTransition = {
  name: 'global',
  mode: 'out-in',
  css: false,
  onBeforeEnter(el) {
    gsap.set(el, {
      opacity: 0,
      y: '12px'
    })
  },
  onEnter(el, done) {
    gsap.to(el, {
      ease: Expo.out,
      delay: 0.5,
      opacity: 1,
      y: 0,
      onComplete: done
    })
  },
  onLeave(el, done) {
    gsap.to(el, {
      ease: Power2.easeInOut,
      duration: 0.3,
      opacity: 0,
      onComplete: done
    })
  }
}