Design and publish your first free site today.
Getting started
Animation
Components
Motion values
Utilities
3D
Guides
Community

useAnimationFrame

An animation loop that outputs the latest frame time to the provided callback.

Runs a callback once every animation frame.

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 "framer-motion"


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


  return <div ref={ref} />
}
PrevioususeAnimationControlsNextuseDragControls