Use Animation Frame

Documentation

Use Animation Frame

Reading Time:

1

min

Released

September 25, 2023

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} />
}

Istanbul

Follow us on social media