Join Us For an Exclusive Workshop on
Advanced SVG Animation

October 23rd, 2015 • 9:00am – 4:30pm CDT

Attend Online

Live and Full HD


Attend In-Person

From: Downtown Minneapolis, MN

Start Learning Today Learn Advanced SVG Money-back Guarantee

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.

By coding along with us for this workshop you’ll:

  • 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 ticket includes the full workshop (online or in-person), immediately available replay videos, plus a complimentary 6 month membership to watch all our video courses (a $234 value)

Your Instructor

Sarah Drasner

Sarah Drasner a Senior UX Engineer at Trulia (Zillow Group) and a staff writer for CSS-Tricks. Formerly she was Senior Interaction Designer at Fauna, Inc., a company founded by former Lead Engineers from Twitter. She is also the former Head of Design and Front-End Development at Basho, creators of Riak. At Basho, she increased lead generation by 75% through design improvements and managed all branding and visual communication.

See samples of her work and writings on CodePen, CSS-Tricks and Smashing Magazine!

Interact With the Instructor

Online & In-Person

Get Your Questions Answered

Spend a Full Day Immersed With a Leading SVG Animation Master

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.

What's Included



Watch Now

How We'll Spend Each Day

We've already held over 40 workshops holding thousands attendees in-person and online. In this time we've discovered ways to schedule the day so it goes smoothly and efficiently.

Regardless if you're in-person or participating with us online you'll have the full ability to replay things you missed, get your questions answered LIVE and interact with the teacher throughout the day.

How we'll spend the day:

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.


8:30 Tech Check and Hello
9:00 SVG anatomy overview
9:30 Optimization, CSS Keyframe animation and the SVG DOM
10:00 Hacking
10:30 SVG Sprites, Performance, and Planning
11:00 UI/UX SVG components and Interaction with jQuery and Vanilla JS
11:30 Making SVGs responsive and cross browser compatible
12:00 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 Hacking
2:30 Complex animations with SVG- basics, drawSVG, motion along a path, attr tweens
3:00pm Hacking
2:30 Troubleshooting and Debugging
3:00pm Putting it all together: responsive complex animation
3:30 Troubleshooting and Debugging
4:30pm Wrapping up

The Price

The price for attending this full day workshop is simply the cost of becoming a monthly ($39) member. If you have already attended one, you know this is a tremendous value. If you haven’t, you may be wondering if it’s truly worth becoming a member.

Browse through just a few of the testimonials and you’ll see that people RAVE over these workshops. They’re unique and provide an experience and education you simple cannot find anywhere else.

You’re getting access to some of the brightest, most highly sought after experts in the world, covering topics very few people discuss in detail. Many attendees report learning more in this full day workshop than they did about a particular topics in the past 1-2 years combined.

Combine that with access to thousands of unique, high quality videos in our membership area with 500 hours of in-depth training from world renowned experts and you’ll see why this is a bargain.

  1. These workshops are different from any others you’ve attended. They cover everything, from the basics to advanced material. All of which are available for replay so you can go back and review as your skill grows.

  2. We get a lot of people saying they are scared to join… until it was over. Then they brag about how much of an amazing value they got for the price.

  3. You’re also getting videos of the workshop, plus ALL other workshops we’ve recorded, instantly!

Watch Now

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.


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.

You'll Either LOVE This Workshop Or You Don't Pay. Period.

Our attendees are ecstatic by the high-quality, relevant content they receive at these workshops.

We cover everything in explicit detail (and the things we miss are covered by answers to YOUR questions) from basic to advanced tactics you can start working with the very same day. We don't want you to miss out on this opportunity because you've been to less-than-stellar workshops in the past. We promise you, ours are very unique.

That's why if you attend the workshop and aren't absolutely thrilled with the content… if you don't think it's worth the admission price… We refuse to accept your money. We will more than gladly issue you a full refund, so you risk nothing.

We're very specific about what you're getting here and have ran lots of workshops… so we've almost never have requests for refunds (99.8% satisfaction rate).

MJG Workshop Center • 60 South Sixth Street, Suite 3625, Minneapolis, MN, 55402

What Past Attendees Are Saying

"Superb presentation from a genuine domain expert. I learned a ton today."

Steve Jakubowski

"Keep up the good work. I've attended a lot of online workshops, and they are very shallow and unpractical. Most of the time, online people are treated as second class, but still paying citizens. Here we get all the content and get to participate as well (if only there was a way to get those cookies...)."

Adrian Murillo

"The class was great. It was really cool to get a bunch of links to example code to look at during the presentation and after the class."

Nate Yourchuck

"Good location and facility. Great technology for capture, presentation layout and video streaming. Really excellent being able to view the videos afterwards. It takes away the sense of having to absorb everything immediately or else lose it into the ether. It was fun. What more can you ask for?"

Laurence Bates

"Really well run...loved the communication pre-event. Very impressed with everything...this was my first online conference purchase, but I would definitely consider doing it again."

Jeff Sims

"I really enjoyed the online workshop experience. It is much better than just watching videos. I was able to participate in the conversations and benefit from other folks' questions."

Dana Greenberg

"You guys did a really great job! I cannot say enough good things about the experience."

Richard Ranke

"Everything was first class: excellent instructor, material, video, moderator, audio. Thank you!"

Oscar Pagani

My name is Marc Grabanski I'm the founder of Frontend Masters. I guarantee this workshop will be awesome. Period.

If you don't think it's worth 10x the value, I'm happy to give you back every penny. That's my promise to you!

Marc Grabanski
Founder Frontend Masters