Chapter 114: useAnimationFrame

Core Idea

Use Motion for Vue'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) => {
  domRef.value.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

• Vue animations with Motion for Vue: 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.