How can I integrate Anime.js with Vue 3?

How can I integrate Anime.js with Vue 3?

To integrate Anime.js with Vue 3, you can install Anime.js via npm and then import it into your Vue components.

Can you show me a simple example?

Sure! First, install Anime.js using npm install animejs. Then, in your component, you can use it like this:

import anime from 'animejs';

export default {
  mounted() {
    anime({
      targets: '.my-element',
      translateX: 250,
      duration: 2000
    });
  }
};

What if I want to trigger the animation on a button click?

You can create a method that triggers the animation and bind it to the button's click event. Here's an example:

<template>
  <button @click="animate">Click me!</button>
  <div class="my-element"></div>
</template>

<script>
import anime from 'animejs';

export default {
  methods: {
    animate() {
      anime({
        targets: '.my-element',
        translateX: 250,
        duration: 2000
      });
    }
  }
};
</script>