useAnimatable

The useAnimatable composable wraps the createAnimatable function from AnimeJS.

Efficiently animates target properties, making it an ideal replacement for animate() and utils.set() in situations where values change frequently, such as cursor events or animation loops.

Arguments

Example

import { useIntervalFn } from '@vueuse/core'
import { round } from '#nanime/utils'

const counter = reactive({ x: 0 })
const animator = useAnimatable(counter, {
  x: 100,
  duration: 10000,
  modifier: round(0),
  ease: 'outElastic',
})

useIntervalFn(() => {
  animator.x?.(counter.x + 1)
}, 1000)

<template>
  <p>
    Counter: {{ JSON.stringify(counter) }}
  </p>
</template>

Return Value

Returns a shallowReactive object wrapping the AnimeJS AnimatableObject instance.

API

Types

function useAnimatable(
  target: AnimeTargets,
  options?: MaybeRefOrGetter<AnimatableParams>
): AnimatableObject

type AnimeTargets = TargetsParam | MaybeElementRef | MaybeElementRef[]

See AnimeJS Animatable documentation for more details.

Caveats

• Don't destructure the return value. The instance is wrapped in shallowReactive, and destructuring copies its values out once, disconnecting them from the instance.

// loses the connection to the instance
const { revert } = useAnimatable(obj, { ... })

// keeps it
const animation = useAnimatable(obj, { ... })
animation.revert()