Animations

Smooth web animation requires knowing something about the browser graphics architecture and how to keep your animations hardware accelerated.

Performance

• Animate only transform and opacity to stay on compositor (GPU)
  • Animating other properties will trigger expensive repaints and/or relayouts
  • Maybe filter in the near future
• Apply will-change: <property> before animating a property
• When animating in JS, apply style changes only in a window.requestAnimationFrame callback

Measuring performance

• Use Chrome DevTools:
  • Rendering tab > Paint Flashing to measure repaints
  • Performance Monitor tab:
    • CPU minimized
    • Layouts/sec minimized
    • Style recalcs/sec minimized

Tips

• Understand the Chrome rendering pipeline (similar to other browsers?)

1. Style recalculation (CPU)
2. Layout (CPU)
3. Paint (CPU)
4. Composite (GPU)

References

• Animations and Performance