Documentation

Documentation

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

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

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

Related topics

Motion+

Motion+

Motion+

Level up your animations with Motion+

Unlock the full vault of 290+ Motion examples, premium APIs, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Motion is supported by the best in the industry.