Animating SVGs

on YouTube ↗31m

" summary

Covers concrete techniques and tradeoffs: demos show CSS, SMIL and JavaScript approaches applied to a bouncing basketball, line‑drawing strokes and shape morphing so you see code and results; notes browser quirks like Firefox needs pixel transform‑origin for SVG rotation, toolchain choices like GSAP + MorphSVG (paid) or Snap.svg and viv.js for paths, and performance caveats on mobile; claims about what works are backed by live examples and sizing/timing details rather than vague promises.

AI-written summary · about

" chapters (10)

1. 0:00Intro
2. 1:40Basics
3. 2:40Animation Methods
4. 3:46Animating with CSS
5. 5:59Animating with Simul
6. 8:43Animating with JavaScript
7. 10:28Animating Basketball
8. 18:10Line Drawing
9. 21:00Morph SVG
10. 24:46Snap SVG

" related talks

• 49mSVG in motionSara Soueidan · ffconf 2015
• 36mInteractive Web Animation with SVGCassie Evans · beyond tellerrand Berlin 2019
• 22mSVG Can Do That?!Brenna O'Brien · CSSConf Oakland 2014
• 31mSurprise and delight: CSS + SVGChris Wright · CSSConf Australia 2014
• 29mStyling and Animating Scalable Vector Graphics with CSSSara Soueidan · CSSconf EU 2014
• 30mDown the SVG Rabbit HoleRobyn Larsen · JSUnconf 2018
• 25mSVG animationsGiulio Poggia · Intersection 22
• 25mAn SVG’s TaleElizabet Oliveira · React Amsterdam 2019