useAnimate

useAnimate is the best Entry for your Animations.
To register your animation, utilize the useAnimatecomposable and provide the necessary AnimationParams. This will return a ref of JSAnimation , which includes all the relevant keys as well as methods for managing the animation. For more detailed information regarding the animation object, please refer to the Anime.js V4 Documatation.

<script lang="ts" setup>

const box = useTemplateRef("box");
const anim = await useAnimate(box, {
  autoplay: false,
  x: 100,
  rotate: 360,
});
</script>

Anime.js Mehtods - Stagger

Sometimes you might want to group elements and animate them in a staggered sequence. Anime.js provides excellent methods to support this flexible approach. You can easily incorporate functions from the base library directly into your AnimationParams.
You don't need to install the animejs package separately, as it's already included within NuxtAnime

For instance, here's how you can create a simple stagger animation:

<template>
  <div>
    <div v-for="i of 10" :key="i" ref="boxes" class="box" />
  </div>
</template>

<script lang="ts" setup>
import { stagger } from "animejs";

const boxes = ref();
useAnimate(boxes, {
  x: 320,
  rotate: -180,
  ease: "inOutQuint",
  loop: true,
  alternate: true,
  delay: stagger(65, {
    from: "center",
  }),
});
</script>