useAnimationControls

useAnimationControls provides an imperative way to control animations, allowing you to precisely control when animations start, stop and reset through code.

useAnimationControls returns an animation controller with start, stop, set methods.

<script setup lang="ts">
import { useAnimationControls } from 'motion-v'

const controls = useAnimationControls()
</script>

The returned animation controller can be passed to a motion component's animate prop to control its animations:

<Motion :animate="controls" />

Basic Usage

Methods

start

Starts an animation with a transition effect. Takes a target state and optional transition config:

controls.start({ x: 100 })

stop

Stops an animation.

controls.stop()

set

Sets the animation to a target state without a transition effect.

controls.set({ x: 100 })