Effortless animations with AnimeJS

Create SSR Safe animations for Nuxt without having to worry about targets and component lifecycle.

<div class="boxes grid grid-cols-10 place-items-center gap-0.5 absolute inset-0 p-5">
  <div v-for="i in 40" :key="i" class="box size-9 rounded-sm bg-white/40 aspect-square" />
</div>

import { stagger } from '#nanime/utils'

useAnimate('.boxes > .box', {
  scale: [{ to: [0, 1.25] }, { to: 0 }],
  boxShadow: [
    { to: '0 0 1rem 0 currentColor' },
    { to: '0 0 0rem 0 currentColor' }
  ],
  delay: stagger(100, {
    grid: [10, 4],
    from: 'center',
  }),
})

Shipped with many features

Built with Nuxt 4

Created with nuxt for nuxt

Animation engine by animejs

SSR safe

Composables don't break SSR or cause hydration issues

Customizable

Enable or disable composables or components

Composables

Ready-to-use wrappers around every AnimeJS utility, built for Vue reactivity.

useAnimate

Core animation — CSS properties, transforms, SVG, and JS objects.

useWaapiAnimate

Web Animations API — hardware-accelerated, off-main-thread animations.

useAnimatable

Imperative property setters with built-in transitions.

useSplitText

Split text into lines, words, and characters for staggered animations.

useScrambleText New

Text scramble and reveal effects with reactive text cycling.

useDraggable

Drag interactions with snap, bounds, and axis constraints.