Chapter 43: useMotionValueEvent

Core Idea

Fire events when the value of a motion value changes.

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

function Component() {
  const x = useMotionValue(0)
  
  useMotionValueEvent(x, "animationStart", () => {
    console.log("animation started on x")
  })
  
  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })
  
  return <motion.div style={{ x }} />
}

• 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.
• Custom cursor & follow-cursor animations: related Motion doc page.
• React motion component: related Motion doc page.
• Scroll Direction: Hide Header example & tutorial for React: related Motion doc page.