Native Web Animation
summary
Empirical rules and runnable code decide whether to watch: animations use transform and opacity to stay on the GPU compositing step, avoid layout-triggering properties, and create layers only when needed with will-change or 3D transforms; JavaScript pacing relies on requestAnimationFrame (the Web Animations API handles that for you); examples show Web Animations API keyframe arrays, timing objects, staggered sequences, playbackRate changes and callbacks, a working slider demo, and a polyfill strategy for cross‑browser use.
AI-written summary · about
chapters (15)
- 0:00Start
- 2:05The Transform Property
- 3:26Transform Origin Property
- 7:02What creates new layers?
- 8:08Creating a new layer
- 9:47requestAnimation Frame
- 10:17Summary Performance
- 12:24Web Animations API
- 13:04WAAPI Keyframes 2 options
- 13:32WAAPI Timing Object
- 14:04animate()
- 14:45controls
- 15:35callbacks
- 20:00WAAPI vs Libraries
- 24:39Level up your easings
