Utils

Guides

Introduction

Animation

Components

Motion values

Hooks

Guides

React Three Fiber

React

Introduction

Animation

Utils

Guides

Introduction

Animation

Components

Motion values

Hooks

Guides

React Three Fiber

React

useAnimationFrame

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

useDragControls

Support Motion

Motion is open source. Sponsorships keep the project sustainable.

Every sponsor receives access to our private Discord, and an exclusive mobile and desktop wallpaper pack.

Become a sponsor