Introduction

nanime provides a set of composables that wraps AnimeJS utilities.

Instant play

Composables marked with the Instant play badge can be called after mount, from an event handler or a utility function, not only from setup(). They pick their mode from whether getCurrentInstance() returns an instance when they run:

• Reactive mode, with an instance. Target and parameters are watched, so a ref or getter that changes reverts the animation and builds a new one.
• Instant mode, without one. The animation is created once and parameters are read a single time, even if you pass a ref.

Top-level await in <script setup> keeps reactive mode, because the compiler wraps it in withAsyncContext() and the instance is restored once the promise settles. Event handlers, onMounted, watchers, setTimeout, awaits inside a nested async function and a plain Options API async setup() all run without one.

// instant: deferred past setup(), no instance to find
onMounted(() => {
  const anim = useAnimate('.box', () => ({ opacity: opacityRef.value }))
  // opacityRef changes are now ignored
})

useDraggable and useSplitText don't use this flag. They stay reactive whatever the call context, so there is no instant mode to fall into.