How can I create animations in Vue using GSAP timelines?

How can I create animations in Vue using GSAP timelines?

You can create animations in Vue using GSAP timelines by integrating GSAP with Vue's lifecycle hooks. Would you like a code example?

Yes, please provide a code example!

Sure! First, install GSAP: npm install gsap. Then, in your Vue component, you can use the following code:

import { gsap } from 'gsap';

export default {
  mounted() {
    const timeline = gsap.timeline();
    timeline.to('.box', { duration: 1, x: 100 })
            .to('.box', { duration: 1, rotation: 360 });
  }
};

This will animate a box element moving to the right and rotating.

What if I want to reverse the animation?

You can reverse the animation by calling timeline.reverse() or by using the paused property to control playback. Would you like to know more about controlling timelines?