Chapter 118: useMotionValueEvent

Core Idea

Manage motion value event listeners in Vue with useMotionValueEvent. Auto-cleans events like change & animationComplete for dynamic UIs.

Key Concepts

• Advanced: useMotionValueEvent is a helper function for a motion value's on method.
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<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>

• What it demonstrates: Core usage pattern for useMotionValueEvent.

Key Takeaways

1. change.
2. animationStart.
3. animationComplete.
4. animationCancel.

Connects To

• Motion values: related Motion doc page.
• Cursor: related Motion doc page.
• Vue <motion /> component: related Motion doc page.
• Scroll Direction: Hide Header example & tutorial for React: related Motion doc page.