Advanced SVG Animation
Join us for an Awesome Workshop on:

Advanced SVG Animation

October 23, 2015 - 9:30am to 5:30pm Central Daylight Time

This workshop has already been published as a course!

Advanced SVG Animation

Some Key Takeaways!

By participating along with us in the workshop, you'll learn:

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

Your (Awesome) Instructor

Sarah Drasner

Sarah Drasner

Sarah Drasner is an award-winning Speaker, VP of Developer Experience at Netlify, Vue core team member, and Staff Writer at CSS-Tricks. Sarah is formerly Principal Lead of Emerging Markets, Cloud Advocates at Microsoft and Manager of UX & Engineering at Trulia/Zillow Group. She’s the author of SVG Animations from O’Reilly and has given Frontend Masters workshops. Sarah is a co-organizer of ConcatenateConf, a free conference for Nigerian and Kenyan developers. Sarah is also the co-founder of Web Animation Workshops, with Val Head. She has worked for 15 years as a web developer, and at points worked as a Scientific Illustrator and a Professor in the Greek Islands.

Spend a Full Day Immersed With a Leading SVG Animation Master

Workshop Details

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. Come join Sarah Drasner and learn 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.

Daily Schedule

We'll begin by laying the fundamentals of the way that an SVG is organized, as well as familiarizing ourselves with the syntax in the SVG DOM. Then we'll move on to basic animation in SVG in CSS, and briefly discuss initial stages- how to plan your animation and how to optimize your code and design for performance. Next, we'll dive into how to access the SVG DOM in interaction, as well as the benefits and limitations of jQuery and how to solve problems in vanilla JS. We'll discuss real-life SVG animation in common UX patterns and how to create performant, responsive, and production-ready code. Finally, we'll dig deeper and explore the GreenSock Animation API. We'll set up complex animations with a number of techniques, including, but not limited to- DrawSVG, Motion Along a Path/Bezier Plugin, Draggable, Percentage-based animations, and Attr Tweens. We'll put it all together to make engaging, responsive, and performant animations. Then we'll talk about how to refine and debug our code.

  • 2:30AM
    Troubleshooting and Debugging
  • 3:30AM
    Troubleshooting and Debugging
  • 8:30AM
    Tech Check and Hello
  • 9:00AM
    SVG anatomy overview
  • 9:30AM
    Optimization, CSS Keyframe animation and the SVG DOM
  • 10:00AM
  • 10:30AM
    SVG Sprites, Performance, and Planning
  • 11:00AM
    UI/UX SVG components and Interaction with jQuery and Vanilla JS
  • 11:30AM
    Making SVGs responsive and cross browser compatible
  • 12:00PM
    Lunch and Hacking
  • 1:00PM
    Performance statistics with SVG and various animation technologies
  • 1:30PM
    GreenSock animation with SVG- basic syntax, setting up functions
  • 2:00PM
  • 3:00PM
    Putting it all together: responsive complex animation
  • 4:30PM
    Wrapping up

Interact with the Instructor - Online & In-Person

Get Your Questions Answered • Code Along with the Class • Classroom Format

Is This Workshop for Me?


It is possible to take this course as a beginner but perhaps best suited for those with either a very basic understanding of SVG, or some familiarity with animations, either CSS or JavaScript. If you are interested in either animation or SVG but have not used them in conjunction, this course is definitely for you. There are a plethora of technologies and techniques to use in order to animate SVG, you will likely want to learn the performance statistics of each, and how to put that knowledge into practice.

Any Prerequisites?

  • Some CSS and JavaScript experience is necessary to understand the code under discussion and keep up with the brisk pace of the class
  • Complete novice programmers are welcomed, but may find the pace of the content challenging
  • Past CSS Animation experience and familiarity with basic JavaScript functions is a plus

Event Details


One Full Day Workshop Session

Replay Videos (available immediately)


October 23, 2015 - 9:30am to 5:30pm Central Daylight Time


Option 1: Attend online on our full HD live stream

Option 2: Attend in-person at HQ in Minneapolis, MN