Chapter 61: Animation performance guide

Core Idea

Boost web animation performance by understanding rendering and hardware acceleration. Learn which CSS properties to animate for smooth 120fps+ experiences, how to optimize rendering, and how Motion leverages hardware acceleration for jank-free animations.

Key Concepts

• Rendering: When we update the styles an element:
• Slow rendering: For instance
• Fast rendering: The best performing styles are those that trigger only the third rendering step
• Everything in-between: There are also plenty of values like box-shadow and border-radius that can be updated with
• Reduce layer size: First
• Use alternative styles: Second
• Which is which?: So how do you tell which styles will trigger layout or paint
• 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
• Hardware acceleration: Rendering performance should be your primary focus because it will be a consideration in e

Code Examples

element.style.height = "500px"

• What it demonstrates: Core usage pattern for Animation performance guide.

Key Takeaways

1. Animation performance guide supports Rendering.
2. Animation performance guide supports Slow rendering.
3. Animation performance guide supports Fast rendering.

Connects To

• 3D transforms: related Motion doc page.
• animate(): related Motion doc page.
• frame: related Motion doc page.
• Layout animations: related Motion doc page.