Nuxt•2y ago

Help with GSAP animations

Hey guys, I am trying to setup animations for my fullscreen menu. When I click button I see the menu, but links are not animated.

<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>

<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>

1 Reply

Unknown User•2y ago

Message Not Public

Gaming

Programming

Help with GSAP animations