Sarah Drasner on Advanced SVG Animation (April 6th 2017, San Francisco)

Sarah Drasner on Advanced SVG Animation (April 6th 2017, San Francisco)

SVG is just starting to have its heyday. This trend towards heavy adoption means that people should be aware of optimization techniques, how to begin by designing for performance, and how to animate complex, responsive, and beautiful animations with simple and easy-to-debug code for production.


In this full-day workshop, Sarah will teach you the basics of the SVG Animation development and the essentials needed to start using these techniques in production environments for animations both large and small.

SVG is extremely powerful, with its reduced HTTP requests and clarity on any display. It becomes increasingly more so as we explore its capabilities for responsive animation and performance boons.

What You'll Learn:

  • How to make SVG cross-browser compatible, backwards compatible, and how to optimize it properly,
  • How create an informative and stable animation, or even a more complex animation that is production-ready,
  • How to leverage the powerful GreenSock API to control and manipulate multiple tweens and overlapping transforms,
  • How to use a variety of tools and techniques to create a seamless and engaging complex SVG animation with ease.

What Prerequisite Skills Do You Need?

Basic understanding of CSS and JavaScript.

What Hardware/Software Do You Need?

Please bring your own laptop (Mac or Win) with your favorite text editor.

Workshop Schedule

  • 8:30—Doors open, Registration
  • 9:00—Introduction & Kick-off
  • 11:00—Coffee Break
  • 12:30—Lunch
  • 13:30—Afternoon Session
  • 15:00—Coffee Break
  • 17:00—The End, Networking


This full-day workshop will be hosted at the SF State University — Downtown Campus
Westfield San Francisco Centre
835 Market Street, 6th Floor
San Francisco, California
(Google Maps)

↑ Back to top