Help with GSAP animations

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import gsap from 'gsap';

const showNavigation = ref(false);
const timeline = gsap.timeline({paused: true});

function toggleNavigation() {
  showNavigation.value = true;
  timeline.reversed(!timeline.reversed());
}

onMounted(() => {
  timeline
    .addLabel('navigation')
    .to(
      'ul#main-navigation li',
      {
        webkitClipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
        duration: 1,
        stagger: 0.1,
      },
      'navigation'
    )
    .to(
      'ul#main-navigation li a',
      {
        y: 0,
        duration: 1,
        stagger: 0.1,
      },
      'navigation'
    )
    .reverse();
});
</script>