useAnimateTimeline

useAnimateLine is the a Advance Entry for your Animations that uses more than one Element.
To register your animation, utilize the useAnimateLine composable with a Array of HTML Elements and provide the necessary AnimationParams. This will also return a ref of JSAnimation spezific for the Timeline, 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.

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


<script lang="ts" setup>
const boxes = ref();
useAnimate(boxes, {
  x: 320,
  rotate: -180,
  ease: "inOutQuint",
  loop: true,
  alternate: true,
});
</script>

You can start playing with Nuxt-Anime Playground in your browser using Stackblitz: