useMotionValueEvent

useMotionValueEvent manages a motion value event handler throughout the lifecycle of a vue component.

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

const x = useMotionValue(0)

useMotionValueEvent(x, 'animationStart', () => {
  console.log('animation has started')
})
</script>

<template>
  <Motion
    style:="{ x }"
  />
</template>

When the component is unmounted, event handlers will be safely cleaned up.

Usage

Import from Motion Vue:

import { useMotionValueEvent } from 'motion-v'

To add an event listener to a motion value, provide the value, event name and callback:

const color = useMotionValue('#00f')

useMotionValueEvent(color, 'change', (latest) => {
  console.log(latest)
})

Available events are:

• change
• animationStart
• animationComplete
• animationCancel

change events are provided the latest value of the motion value.

Advanced

useMotionValueEvent is a helper function for a motion value's on method. With on, you can start listening to events whenever you like, for instance within an event handler. But remember to also unsubscribe when the component unmounts.

• Motion React-useMotionValueEvent

function doSomething() {}

const color = useMotionValue('#00f')
const unsub = color.on('change', doSomething)

onUnmounted(() => {
  unsub()
})