Sweet Web Animations API

on YouTube ↗28m

" summary

Demonstrates the experimental Web Animations API by wiring real code: use element.animate with keyframe arrays and options, inspect and control timelines via currentTime/playState/onfinish and methods like play, pause, reverse; debugs per-frame in Chrome DevTools. Shows a working repo, web-animations-playground, and an SVG pet that sleeps, wakes on clicks and on voice commands via Google speech integration. Notes limitations: runs well in Chrome but has poor iOS support today.

AI-written summary · about

" chapters (9)

1. 0:00Start
2. 0:18Web Animations Api
3. 1:56Platform Improvements
4. 5:06Basics
5. 5:59Creating Animations
6. 7:42Animation with Css
7. 8:42Performance for Css Animations
8. 14:05Event Handlers
9. 21:33Web Animations Playground

" related talks

• 22mSweet Web Animations APIRodolfo Dias · FrontEnd Con 2018
• 20mSweet Web Animations APIRodolfo Dias · Voxxed Days Ticino 2018
• 19m'Web Animations: Past, Present & Future'Ishan Sharma · XtremeJS 2022
• 15mWeb Animations: Tools and TechniquesRachel Nabors · SquiggleConf 2024
• 40mAlice in Web Animations API LandRachel Nabors · CSSconf Argentina 2016
• 39mReturn to Web Animation WonderlandRachel Nabors · CascadiaJS 2024
• 36mInteractive Web Animation with SVGCassie Evans · beyond tellerrand Berlin 2019
• 27mNative Web AnimationLisi Linhart · JSUnconf 2018