Composables
useAnimate
Documentation for useAnimate composable.
Instant playView on GitHub
The useAnimate composable wraps the animate function from AnimeJS.
Arguments
target
AnimeTargets required
The value to animate. Can be a CSS selector, DOM element, Vue component, JS object, or an array of these.
parameters
MaybeRefOrGetter<AnimationParams>
Example
{"x":0,"y":0}
import { round } from '#nanime/utils'
const vector2D = shallowReactive({ x: 0, y: 0 })
useAnimate(vector2D, {
x: 100,
y: 150,
duration: 10000,
modifier: round(0),
ease: 'outElastic',
alternate: true,
loop: true,
})
<template>
<p>
{{ JSON.stringify(vector2D) }}
</p>
</template>
Return Value
Returns a shallowReactive object wrapping the AnimeJS JSAnimation instance.
API
Types
function useAnimate(
target: AnimeTargets,
parameters?: MaybeRefOrGetter<AnimationParams>
): JSAnimation
type AnimeTargets = TargetsParam | MaybeElementRef | MaybeElementRef[]
See AnimeJS Animation documentation for more details.
Caveats
- A target object created with
refwill fail. Pass areactiveorshallowReactiveobject. - 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 { play } = useAnimate('.target', { ... })
// keeps it
const animation = useAnimate('.target', { ... })
animation.play()
Call
useAnimate synchronously in setup() for it to react to target and parameters
changes. Called from onMounted, a watcher, or a handler, it runs in
instant mode: the animation is
created once and parameters are read only that first time.