Basic gsap menu with clipPath in Nuxt3

gsap.js

import { gsap } from 'gsap'
import { CustomEase } from 'gsap/CustomEase'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'

export default defineNuxtPlugin(async () => {
  gsap.registerPlugin(CustomEase, ScrollToPlugin, ScrollTrigger)

  return {
    provide: { gsap, CustomEase, ScrollToPlugin, ScrollTrigger }
  }
})

menu.js

// Gsap
const { gsap, CustomEase } = useGsap()
const tl = gsap.timeline()

CustomEase.create(
  'snappy',
  'M0,0 C0.094,0.026 0.124,0.127 0.157,0.29 0.197,0.486 0.254,0.8 0.348,0.884 0.42,0.949 0.374,1 1,1'
)

function beforeEnter(el) {
  tl.clear()
  .set('.mobile-menu', {
    clipPath: 'inset(0% 0% 100% 0%)'
  })
  .set('.backdrop', {
    opacity: 0
  })
}

function enter(el, done) {
  tl.to(
    '.mobile-menu',
    {
      duration: 1,
      ease: 'snappy',
      clipPath: 'inset(0% 0% 0% 0%)'
    },
    'menuEnter'
  )
  .to(
    '.backdrop',
    {
      duration: 0.65,
      ease: 'power2.inOut',
      opacity: 1,
      onComplete: done
    },
    'menuEnter'
  )
}

function leave(el, done) {
  tl.to(
    '.mobile-menu',
    {
      duration: 0.85,
      ease: 'snappy',
      clipPath: 'inset(0% 0% 100% 0%)'
    },
    'menuLeave'
  )
  .to(
    '.backdrop',
    {
      duration: 0.65,
      ease: 'power2.inOut',
      opacity: 0,
      onComplete: done
    },
    'menuLeave'
  )
}

use-gsap.js

export default () => {
  const nuxtApp = useNuxtApp()

  return {
    gsap: nuxtApp.$gsap,
    CustomEase: nuxtApp.$CustomEase,
    ScrollTrigger: nuxtApp.$ScrollTrigger,
    ScrollToPlugin: nuxtApp.$ScrollToPlugin
  }
}