Performant web animations — Emily Hayman

on YouTube ↗22m

" summary

Aim for 60fps (16.7ms per frame) by only animating properties that hit the compositor: transform and opacity. Use will-change to promote heavy or fixed elements to their own layer, apply requestAnimationFrame for imperative timing, and prefer CSS animations when possible for browser optimizations. Watch for layout thrash (read then write), use CSS containment for isolated widgets, and fall back to pragmatic hacks — e.g., replace thousands of SVG nodes with an image on touch devices when event listeners kill performance.

AI-written summary · about

" chapters (11)

1. 0:00Introduction to performance
2. 0:48Why performance matters
3. 2:39Browser rendering internals
4. 5:54Optimizing CSS properties
5. 8:23Manual layer promotion
6. 10:32The 'will-change' property
7. 13:05Imperative vs declarative
8. 16:01Avoiding layout thrashing
9. 16:52CSS containment
10. 18:12Hack-based optimizations
11. 19:35Performance testing tools

" related talks

• 28mMake your animations perform wellAnna Migas · JSConf Budapest 2017
• 36mSmooth Animations for Web & HybridAlexander Blom · Web Unleashed 2017
• 33mSaving the Web 16 Milliseconds at a TimeJOSH W COMEAU · React Boston 2019
• 44m60 Frames of AnimationsPablo Molina · Commit Conf 2018
• 18mDOM animations, almost nativeArun Subramaniam · Meta Refresh 2015
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 30mAlgorithms for AnimationCourtney Hemphill · Full Stack Fest 2015
• 33mSuper Fast TransitionsGiacomo Zinetti · CSSDay 2018