Documentation

Documentation

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

React Three Fiber

JS

React

Examples

Documentation

Courses

Animation

Components

Motion values

Hooks

Integrations

Guides

React Three Fiber

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+

Introducing Cursor

Cursor is a creative cursor component for React, that makes it super easy to make custom cursor and follow cursor effects.


Hover over these examples to check out some of what it can do:

Custom cursor

Follow with spring

Multicursor

?

?

Get Motion+

Get Motion+