Documentation

Documentation

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

React

useMotionValueEvent

useMotionValueEvent

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

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

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

Usage

Import from Motion:

import { useMotionValueEvent } from "motion/react"

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.

useEffect(() => {
  const doSomething = () => {}
  
  const unsubX = x.on("change", doSomething)
  const unsubY = y.on("change", doSomething)
  
  return () => {
    unsubX()
    unsubY()
  }
}, [x, y])

Motion values overview

Motion values overview

useMotionTemplate

useMotionTemplate

A Motion+ membership will give you early access to features & content, access to our private Github and Discord, and more.

It's a one-time fee that grants lifetime access. No subscription necessary!

Learn more

Learn more

Learn more

MOTION+

Premium React components

Motion+ is a one-time fee, lifetime membership that supports Motion and grants access to the source code of an ever-growing library of examples.


You also gain access to Cursor and AnimateNumber, two exclusive new React components. Check out what they can do:

Get Motion+

Get Motion+