Web Animations: Tools and Techniques

on YouTube ↗15m

" summary

A refactor of a Flash-era demo called Alice shows concrete use of the Web Animations API to sequence and chain animations, using a copy‑paste list of coordinates for spring easing and a live Firefox DevTools animation inspector to scrub, slow and fix a tricky bounce. The talk demos creating animations on a scroll-timeline and view-timeline, notes a polyfill for view timelines, warns the visual debugger can be flaky, and points to Rive and Jitter/Lottie exports for designer handoffs.

AI-written summary · about

" chapters (11)

1. 0:00in this talk…
2. 0:24hello hello
3. 1:10Alice v1: from Flash to Alice in Videoland
4. 2:58Alice v2: modern web animations
5. 4:19debugging animation timelines in Firefox
6. 5:36spring easings
7. 6:25scroll-driven animations
8. 7:40debugging CSS scroll timelines
9. 8:03view-driven animations and view timelines
10. 9:30moving towards Flash’s animation tools
11. 10:45audience questions and answers

" related talks

• 39mReturn to Web Animation WonderlandRachel Nabors · CascadiaJS 2024
• 38mReturn to Web Animation WonderlandRachel Nabors · Future Frontend 2024
• 19m'Web Animations: Past, Present & Future'Ishan Sharma · XtremeJS 2022
• 22mSweet Web Animations APIRodolfo Dias · FrontEnd Con 2018
• 40mAlice in Web Animations API LandRachel Nabors · CSSconf Argentina 2016
• 28mSweet Web Animations APIRodolfo Dias · code.talks commerce 2018
• 46mThe Web in MotionRachel Nabors · Front-Trends 2016
• 39mThe Future of Web AnimationSarah Drasner · DinosaurJS 2019