Documentation

Documentation

JS

React

Documentation

Courses

Introduction

Animation

Components

Motion values

Hooks

Integrations

Guides

React Three Fiber

JS

React

Documentation

Courses

Introduction

Animation

Components

Motion values

Hooks

Integrations

Guides

React Three Fiber

React
useAnimationFrame

Framer Motion is now Motion for React! Read more

Framer Motion is now Motion for React! Read more

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 Discord, and more.

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

Learn more

Learn more

Learn more