Introduction

One composable per AnimeJS API, each with a live demo. For enter, leave and list animations, see the transition components.

When does an animation rebuild?

Composables run on the client only. Called in setup(), a composable rebuilds its animation when a ref, getter or reactive object it receives changes. The rebuild restarts the animation, unless keepTime: true carries the playhead over.

Instant play

Composables marked

also work outside setup(), for example in a click handler. There they build the animation once and read parameters a single time, so later ref changes are ignored. No warning is logged.

button.addEventListener('click', () => {
  // opacityRef changes after this call are ignored
  useAnimate('.box', () => ({ opacity: opacityRef.value }))
})

To keep reactivity, call the composable in setup() and call play() on the returned instance from the handler. A top-level await in <script setup> still counts as setup().

Buffered

Composables marked

create their instance after mount. Methods that return the instance, like play(), can be called before then. nanime queues them and replays them in order once the instance exists. Other properties and methods read undefined until then.

useDraggable, useAnimeTimeline, useAnimeScroll and useAnimeLayout are buffered. useAnimeTimeline called outside setup() creates its instance at once.