How can I use GSAP in my Vue.js project?

How can I use GSAP in my Vue.js project?

You can integrate GSAP in your Vue.js project by installing the GSAP library and using it in your components.

What is the best way to animate a component on mount?

You can use the mounted lifecycle hook to trigger GSAP animations when the component is mounted.

Can you show me a code example?

Sure! Here's a simple example:

<template>
  <div ref="myElement">Animate me!</div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  mounted() {
    gsap.from(this.$refs.myElement, { duration: 1, opacity: 0, y: -50 });
  }
};
</script>

What if I want to animate multiple elements?

You can use gsap.to() or gsap.from() with a selector to target multiple elements at once. Just make sure to use a class or a common ref.