Resources

SVG Animations: From Common UX Implementations to Complex Responsive Animation

BookSprout

Sarah Drasner's guide to animating SVG — CSS transitions and keyframes on paths, SMIL where it still helps, GreenSock for sequencing, responsive and accessible motion — from the loading spinner to a full illustrated scene, with the performance and browser trade-offs of each technique.

Web

The book for the day an SVG needs to move: which parts to animate with CSS (transforms, opacity, stroke-dashoffset for the drawn-line effect), where SMIL's <animate> still earns its place, when to reach for GreenSock for anything sequenced, and how to keep a motion-heavy illustration responsive with viewBox and preserveAspectRatio rather than pixel math. Drasner wrote it from the CSS-Tricks articles and the conference talks, so every technique comes with the demo it was built for.

Read it beside this site's own drawn figures — the testing shapes, the Double Diamond, the GTD workflow — which are still. The chapters on stroke animation and on sequencing with a timeline are the ones that would make them explain themselves in motion; the accessibility chapter is the one that says when they should not.

  • a: Appearance
  • ?: Keyboard shortcuts