Compared with Vue packages

This page compares nanime with vue-animejs and v-anime, as of September 2026. If something is out of date, open an issue. For Nuxt modules, see Compared with Nuxt modules.

How do the Vue packages compare?

Which should you pick?

• nanime for a Nuxt app, transition components, or rebuilds that keep the playhead.
• vue-animejs for directives, useTimer or useScope, or a Vue app without Nuxt.
• v-anime for a thin wrapper around an AnimeJS scope.

How do lists animate in and out?

<AnimeTransitionGroup> scales items in and out of a v-for list. AnimeJS layout slides the other items to their new places:

<template>
  <AnimeTransitionGroup
    tag="ul"
    enter-animation="scale"
    leave-animation="scale"
    class="relative"
  >
    <li v-for="item in items" :key="item">{{ item }}</li>
  </AnimeTransitionGroup>
</template>

<script setup lang="ts">
import { useRawAnimate } from '@juleshry/vue-animejs'

function onEnter(el: Element, done: () => void) {
  useRawAnimate(el, { opacity: [0, 1], scale: [0.85, 1], onComplete: done })
}

function onLeave(el: Element, done: () => void) {
  useRawAnimate(el, { opacity: 0, scale: 0.85, onComplete: done })
}
</script>

<template>
  <TransitionGroup tag="ul" :css="false" @enter="onEnter" @leave="onLeave">
    <li v-for="item in items" :key="item">{{ item }}</li>
  </TransitionGroup>
</template>

Neither vue-animejs nor v-anime has transition components, so the vue-animejs version animates in the @enter and @leave hooks of Vue's <TransitionGroup>. Vue animates moves only through a CSS move class, so the other items jump to their new places.

How does nanime differ from vue-animejs?

vue-animejs covers almost the same AnimeJS v4 APIs. It also has five directives, such as v-animate, and the useTimer and useScope composables. It is a Vue package, so in Nuxt each component imports what it uses, or the app registers it in imports.presets.

Its composables take reactive options as a ref or computed. They return wrapper functions such as play and pause, and keep the AnimeJS instance in an animation ref. nanime composables also accept a getter and return the AnimeJS instance, so animation.play() calls AnimeJS directly. With keepTime, a rebuilt animation continues from where the old one was.

How does nanime differ from v-anime?

v-anime wraps the AnimeJS v4 createScope function. Its useAnime runs your code once in onMounted, so changing a ref afterwards does not rebuild the animation. The scope reverts on unmount. Install animejs alongside it, since the package does not list it as a dependency.