60 FPS or Bust: Bleeding Edge Web Animation
summary
Covers concrete claims and tools rather than theory CSS often renders smoother on mobile so complex motion is exported to CSS by injecting large style blocks JavaScript wins where timelines or interactivity need precise control using requestAnimationFrame versus setTimeout The hard target is 60 frames per second so pick techniques that let the GPU do work and animate only opacity and transform Recappy Styly Animatron and Edge are shown and the CSS injection trick works but can cost render time and VRAM on mobile
AI-written summary · about
chapters (16)
- 0:00Intro
- 1:42Art + Science = magic
- 2:08Animation is a communication tool
- 2:44Methodology
- 2:58Kinematics
- 7:22APls: JavaScript
- 9:32CSS/JavaScript hybrid solutions
- 10:06Trigger CSS transitions with JavaScript
- 11:57Generate CSS animations with JavaScript
- 15:17Performance
- 16:11Jank kills the precious illusion of life
- 17:12Leverage the GPU
- 19:08Limit GPU texture uploads
- 19:42Prevent GPU texture uploads by only animating opacity and transform
- 22:57Tooling: Graphical editors
- 23:16Using code to make an animation is like using poetry to draw a painting
