Web UI Fireworks with SVG and the Web Animation API

on YouTube ↗42m

" summary

Shows how to implement complex, design-driven Web UIs using SVG plus the Web Animations API (and CSS where appropriate). Provides many concrete examples of building graphical components and polishing them with animations to meet design specifications.

AI-written summary · about

" chapters (6)

1. 0:00Web UI components
2. 13:22SVG for animated components
3. 26:16D3.js interactions
4. 32:08CSS and Web Anim API
5. 38:26Web Components reuse
6. 41:14Summary

" related talks

• 38mAdvanced animation with CSS in HTML and SVG to improve UXÁngel Corral · FrontFest 2017
• 36mInteractive Web Animation with SVGCassie Evans · beyond tellerrand Berlin 2019
• 53mConstructing Modern UIs with SVGTim G. Thomas · NDC Oslo 2018
• 37mPractical Web AnimationLisi Linhart · ffConf 2018
• 59mThe web design cheat code: Using SVG to bridge CSS’ gapsLea verou · Frontend United 2019
• 46mThe Web in MotionRachel Nabors · Front-Trends 2016
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 39mThe Future of Web AnimationSarah Drasner · DinosaurJS 2019