Smooth Animations for Web & Hybrid
summary
Claims that CSS keyframes and GPU-backed transforms beat DOM-heavy JS are demonstrated with concrete tools and numbers: use requestAnimationFrame not setInterval (interval fires in background), prefer transform translateX to avoid reflow, and profile with Chrome Performance. Targets are 60 fps (≈16.6 ms/frame) or stable 30 if 60 is impossible. Examples show scripting time dropping from ~10,000ms to 4,800ms to ~1,000ms, FPS falling to 20–30 in the worst case, and a recycled-DOM carousel that runs smoothly.
AI-written summary · about
chapters (21)
- 0:00Intro
- 0:31Isle of Code
- 2:42FPS Target
- 4:02Animation Options
- 6:03How our content is rendered
- 6:57Layout Styles
- 7:37What causes Reflow?
- 8:49Paint Styles
- 10:41Promoting a Layer
- 12:16Layout Thrashing
- 13:06Profiler Tool
- 14:46Our Scene
- 15:27Animation 1
- 17:59Some of our problems
- 20:46CSS3 Animation
- 21:25Animation API
- 26:05animation Frame
- 28:47Still could be better
- 32:16Intersection Observer API
- 33:38Passive Event Listener
- 34:14My best practices
