How do I use GSAP with Vue 3?

How do I use GSAP with Vue 3?

To use GSAP with Vue 3, you first need to install GSAP via npm. You can do this by running npm install gsap.

What are the basic steps to animate a component?

After installing GSAP, you can import it in your component and use it in the mounted lifecycle hook to animate elements.

Can you show me a simple example?

Sure! Here's a simple example: In your component, import GSAP and use it like this:

import { gsap } from 'gsap';

export default {
  mounted() {
    gsap.to('.my-element', { duration: 1, x: 100 });
  }
};

This will move the element with the class my-element 100 pixels to the right.

What if I want to add a delay to the animation?

You can add a delay by using the delay property in the GSAP animation object. For example:

gsap.to('.my-element', { duration: 1, x: 100, delay: 0.5 });