Practical Web Animation
summary
States that browsers composite only transform and opacity cheaply and that animating left/width triggers layout and repaints; recommends using will-change or translateZ to promote layers but warns hundreds of layers can crash memory. Gives a measured claim: animated progress bars cut perceived wait by about 11%. Shows a working SVG clip‑path loader and a cursor animation built with the Web Animations API, demonstrates playbackRate controls, and uses DevTools (paint flashing, layers, CPU slow‑down) and CSS variables for a mousemove parallax.
AI-written summary · about
chapters (22)
- 0:00Intro
- 0:37What is web animation
- 1:30Thinking about who
- 2:03Thinking about user
- 2:59Animation in the browser
- 6:00Takeaways
- 6:49Layers
- 11:58Orientation Transitions
- 13:30Building Transitions
- 16:02Perception
- 17:14Perception Performance
- 18:18Web Animations API
- 22:28Animation Controls
- 24:45Performance Comparison
- 25:03Browser Support
- 26:25Attention Feedback
- 27:19Example
- 27:45Attention
- 28:44Stripe
- 29:10Reactive animation
- 30:39Parallax animation
- 33:02CSS variables
