DOM animations, almost native
summary
Goal is 60 FPS so each frame must finish in about 16 ms (aim for 10 ms to be safe). Use requestAnimationFrame not setInterval, avoid DOM trashing (read/write cycles), minimize painting cost and heavy trees, and prefer composited transforms like translate 3D and will change to get separate layers. For interactive motion use JS (libraries: velocity and green sock); for simple motion use CSS transforms (translate/rotate/scale/opacity). Demo code from Arya shows this approach works.
AI-written summary · about
chapters (12)
- 0:00DOM animations intro
- 2:14Frame rate impact
- 4:01Rendering pipeline
- 6:48requestAnimationFrame vs setInterval
- 9:01Optimizing event handling
- 10:48Avoid heavy scripting
- 11:09Prevent DOM trashing
- 12:54Reduce paint operations
- 14:16CSS transforms for smoothness
- 15:41JS vs CSS animations
- 16:23High-performance principles
- 17:49Native-like DOM animations
related talks
28mMake your animations perform well
36mSmooth Animations for Web & Hybrid
22mPerformant web animations — Emily Hayman
30mAlgorithms for Animation
33mSaving the Web 16 Milliseconds at a Time
32mDone in 0.0166666666 seconds
58mRendering performance from the ground up
27mSmooth Moves: Rendering at the Speed of Right ®