@juleshry/vue-animejs

🚀 Overview

vue-animejs wraps Anime.js v4 as idiomatic Vue 3 composables. It integrates with Vue's reactivity system — pass a ref as a target, as the options, or straight inside the options object ({ translateX: distance }), and the animation updates automatically. Lifecycle cleanup is handled for you.

SSR-safe: every composable and directive works with server-side rendering (Nuxt, @vue/server-renderer) with no <ClientOnly> wrapper. Nothing touches window or document on the server, and Anime.js instances are only created in the browser. Directives go further and render their initial state on the server (v-animate, v-waapi, v-svg-drawable, and v-text-split with ssrHidden), so elements don't flash their final state before hydration.

Before — raw Anime.js in a Vue component:

<script setup lang="ts">
import { useTemplateRef, onMounted, onUnmounted } from 'vue'
import { animate } from 'animejs'

const el = useTemplateRef<HTMLElement>('el')
let animation

onMounted(() => {
  if (!el.value) {
    console.warn('Targets element is null or undefined')
    return
  }
  
  animation = animate(el.value, { translateX: 250, duration: 800 })
})

onUnmounted(() => {
  animation?.cancel()
})
</script>

<template>
  <div ref="el" />
</template>

After — with vue-animejs:

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

const el = useTemplateRef<HTMLElement>('el')

useAnimate(el, { translateX: 250, duration: 800 })
</script>

<template>
  <div ref="el" />
</template>

📦 Requirements

• Vue 3.5+
• Anime.js 4+
• @vueuse/core 14+

🦄 Composables & Directives

Directives — declarative alternatives for element-bound animations:

🚀 Usage

For full API docs and live demos, see the doc here.

👨‍🚀 Contributors

🌸 Thanks

• Anime.js by Julian Garnier — the animation engine powering this library
• VueUse by Anthony Fu — inspiration for composable conventions and element ref patterns

🧱 Contributing

See the Contributing Guide.

🗺️ TODO

• Add components

📄 License

MIT © 2025-present Jules Hery