Documentation

Documentation

Vue

useMotionValueEvent

useMotionValueEvent

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

<script setup>
  import { useMotionValue, useMotionValueEvent } from "motion-v"
  const x = useMotionValue(0)
  
  useMotionValueEvent(x, "animationStart", () => {
    console.log("animation started on x")
  })
  
  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })
</script>

<template>
   <motion.div :style="{ x }" />
</template>

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

Usage

Import from Motion:

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.

watch([x, y],(n,o,onCleanUp) => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  onCleanUp(() => {
    unsubX()
    unsubY()
  })
},{
  immediate:true
})

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

<script setup>
  import { useMotionValue, useMotionValueEvent } from "motion-v"
  const x = useMotionValue(0)
  
  useMotionValueEvent(x, "animationStart", () => {
    console.log("animation started on x")
  })
  
  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })
</script>

<template>
   <motion.div :style="{ x }" />
</template>

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

Usage

Import from Motion:

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.

watch([x, y],(n,o,onCleanUp) => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  onCleanUp(() => {
    unsubX()
    unsubY()
  })
},{
  immediate:true
})

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

<script setup>
  import { useMotionValue, useMotionValueEvent } from "motion-v"
  const x = useMotionValue(0)
  
  useMotionValueEvent(x, "animationStart", () => {
    console.log("animation started on x")
  })
  
  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })
</script>

<template>
   <motion.div :style="{ x }" />
</template>

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

Usage

Import from Motion:

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.

watch([x, y],(n,o,onCleanUp) => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  onCleanUp(() => {
    unsubX()
    unsubY()
  })
},{
  immediate:true
})

useMotionValueEvent

Examples

Go beyond the basics

Motion+ is a one-time fee, lifetime membership.

As well as premium Motion features, early access content, and a private Discord community, you'll unlock access to the source code of 90+ premium examples that take the APIs on this page to the next level.

Loading...
Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.