The Cost of a Missed Frame
summary
Examines why web animations still drop frames despite fast hardware, explaining rendering on GPU, layer composition, and transform/opacity animations. Covers consequences of missed frames, techniques to smooth animations both technically and visually, and developer tools and practical approaches for achieving smoother motion.
AI-written summary · about
chapters (20)
- 0:00Welcome
- 1:18Animation in UX
- 7:57Browser rendering basics
- 12:08Smoothness and FPS
- 13:30Missed frames consequences
- 15:37Why devices struggle
- 17:01Transform vs top/left
- 22:37FLIP technique
- 29:48JavaScript and rAF
- 35:21Debugging tools
- 41:41Platform differences
- 47:01Mobile performance issues
- 50:54CSS vs JS performance
- 53:44Team roles
- 55:07JS optimization with rAF
- 56:11Automating FLIP
- 57:16FLIP markup
- 58:41Scroll-linked animation
- 59:27Browser quirks
- 1:00:07Q&A
related talks
44m60 Frames of Animations
30mFast but not furious: debugging user interaction performance issues
30mAlgorithms for Animation
28mMake your animations perform well
36mSmooth Animations for Web & Hybrid
27mSaving the Web, 16ms at a Time
27mGotta Go Fast (A Performance and Instruments Talk)
22mPerformant web animations — Emily Hayman