Composables
useAnimatable
Documentation for useAnimatable composable.
Instant playView on GitHub
The useAnimatable composable wraps the createAnimatable function from AnimeJS.
Efficiently animates target properties, making it an ideal replacement for
animate()andutils.set()in situations where values change frequently, such as cursor events or animation loops.
Arguments
target
AnimeTargets required
The reactive object or array of objects to animate.
options
MaybeRefOrGetter<AnimatableParams>
Example
Counter: {"x":0}
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.
Notes
Do not destructure the return value. The instance is wrapped in
shallowReactive to maintain reactivity. Destructuring will break the connection to the underlying AnimeJS instance updates.// ❌ Avoid destructuring
const { revert } = useAnimatable(obj, { ... })
// ✅ Access methods directly
const animatable = useAnimatable(obj, { ... })
animatable.revert()