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

useAnimationFrame

useAnimationFrame

useAnimationFrame runs a callback once every animation frame.

useAnimationFrame((time) => {
  ref.current.style.transform = `rotateY(${time}deg)`
})

The callback is provided two arguments:

  • time, the total duration of time since the callback was first called.

  • delta, the total duration of time since the last animation frame.

import { useAnimationFrame } from "motion/react"

function Component() {
  const ref = useRef(null)
  
  useAnimationFrame((time, delta) => {
    ref.current.style.transform = `rotateY(${time}deg)`
  })

  return <div ref={ref} />
}

useAnimate

useAnimate

useDragControls

useDragControls

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+