Practical Web Animation
summary
Argues that performant animation means sticking to transform and opacity (promote frequent movers with will-change sparingly), shows the Web Animations API delivering controllable Animation objects (play/pause/reverse/playbackRate and sequencing) and uses requestAnimationFrame and CSS variables for reactive motion. Builds an SVG loader (logo clipPath + rotating needle) and a mouse-parallax card with matrix3d; demonstrates prefers-reduced-motion handling and suggests short timings (~≤200ms) for micro interactions, longer (up to ~500ms) for big moves.
AI-written summary · about
chapters (16)
- 0:00Intro
- 10:32Transitions
- 15:21Perception
- 17:16Web Animation API
- 19:41Animation Example
- 22:49Animation Object
- 27:04Attention Feedback
- 29:26Interface animations
- 29:51Reactive animation
- 35:04Matrix 3D
- 37:21Translation
- 37:38Variables
- 38:33Timing and easing
- 40:09Ease visualizer
- 41:01Recap
- 41:38Resources
