Chapter 39: useAnimationFrame

Core Idea

Use Motion for React's useAnimationFrame hook to run callbacks on every frame. Leverage time & delta args for precise animation control & custom frame logic.

Key Concepts

• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

useAnimationFrame((time) => {
  ref.current.style.transform = `rotateY(${time}deg)`
})

• What it demonstrates: Core usage pattern for useAnimationFrame.

Key Takeaways

1. time, the total duration of time since the callback was first called.
2. delta, the total duration of time since the last animation frame.
3. useAnimationFrame supports Animate faster with Motion+..

Connects To

• React Animation: related Motion doc page.
• Motion Values: related Motion doc page.
• frame: related Motion doc page.
• Spinning 3D cube example & tutorial for React: related Motion doc page.