Sweet Web Animations API

on YouTube ↗22m

" summary

Shows how to replace CSS/Flash/GreenSock workflows with the browser Web Animations API by building live examples: a shaking toy with tail, click-to-sleep/awake state toggled via animation.playState, and a voice-controlled demo using speech input that drives keyframes. Uses element.animate(keyframes, options), inspects playbackRate/frame-by-frame in DevTools, and notes mobile support gaps (works on Android, not iOS/Edge). Publishes a Web Animations Playground gallery collecting real working snippets.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 1:22PLATFORM IMPROVEMENTS
3. 4:34WHAT IS AN ANIMATION?
4. 5:20HOW HAVE WE BEEN CREATING ANIMATIONS?
5. 6:32CSS ANIMATIONS +KEYFRAMES
6. 8:02WHAT ARE THE PROBLEMS HERE?
7. 8:13HOW CAN WE MPROVE IT?
8. 10:47WHERE IS THE WAAPI POWER?

" related talks

• 20mSweet Web Animations APIRodolfo Dias · Voxxed Days Ticino 2018
• 28mSweet Web Animations APIRodolfo Dias · code.talks commerce 2018
• 19m'Web Animations: Past, Present & Future'Ishan Sharma · XtremeJS 2022
• 15mWeb Animations: Tools and TechniquesRachel Nabors · SquiggleConf 2024
• 01h 00mAnimating Web ExperiencesJohn Allsopp · Web Directions South 2013
• 46mThe Web in MotionRachel Nabors · Front-Trends 2016
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 27mNative Web AnimationLisi Linhart · JSUnconf 2018