Chapter 67: frame

Core Idea

Learn to use Motion's frame function to schedule tasks on its optimized animation loop. Discover how it prevents layout thrashing, offers a keep-alive API for custom loops, and improves performance by avoiding multiple requestAnimationFrame calls. Understand how to schedule callbacks for read, update, and render steps.

Key Concepts

• Schedule a callback: frame works like requestAnimationFrame
• Cancel a callback: cancelFrame can be used to cancel a callback.
• Animation loop: Often
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

import { frame } from "motion"

• What it demonstrates: Core usage pattern for frame.

Key Takeaways

1. Prevents layout thrashing.
2. Provides an easy keep-alive API for creating your own animation loop.
3. Avoids the significant performance overhead of multiple requestAnimationFrame calls.
4. read: Read values from or measure the DOM.
5. update: Amend values once all values have been read.

Connects To

• motionValue: related Motion doc page.
• animate(): related Motion doc page.
• Animation performance guide: related Motion doc page.
• Three.js example & tutorial for JavaScript: related Motion doc page.