Make your animations perform well
summary
Advice: avoid unnecessary motion, prefer CSS transforms and opacity for GPU compositing, and aim for 60fps so each frame meets a ~16ms budget. Use requestAnimationFrame for JS-driven frames, apply will-change sparingly because each layer consumes memory, and use the FLIP pattern to precompute positions. Test on real low-end devices and with Chrome/Firefox devtools (layer borders, paint flashing, FPS meter). Polyfill Web Animations API or use libraries only when their cost is justified.
AI-written summary · about
chapters (30)
- 0:00Introduction
- 0:45My story
- 1:40Living room
- 2:45Chairs
- 4:15Dont use them
- 4:40CSS vs JavaScript
- 7:00Browser paints a website
- 8:10Layout
- 8:30Layers
- 9:10Compositing
- 9:40Changes
- 11:35Why
- 13:30The problem
- 14:15Will Change
- 15:00Give a browser a moment
- 15:45Too many layers
- 16:35Use will change
- 18:10Flippityflip States
- 18:40Transforms
- 19:10Why use transforms
- 20:10Where to use flip
- 20:50Serving the frames
- 22:05The 60 millisecond deadline
- 22:40RequestAnimationFrame
- 23:10How it works
- 24:45Test your animations
- 25:40Timeline tool
- 26:00Layers tab
- 26:35Firefox
- 27:05Summary
related talks
22mPerformant web animations — Emily Hayman
36mSmooth Animations for Web & Hybrid
18mDOM animations, almost native
33mSaving the Web 16 Milliseconds at a Time
30mAlgorithms for Animation
59mRendering Performance
30mFast but not furious: debugging user interaction performance issues
49mRendering without lumpy bits