Advanced SVG Animation
Join us for an Exclusive Workshop:

Advanced SVG Animation

Sarah Drasner
Sarah Drasner
Microsoft
October 23, 2015 - 9:30am to 5:30pm Central US Time

Attend Online

Live and in Full HD
OR

Join in Person

From Downtown Minneapolis, MN

You're Registered to Attend Online!

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

This Workshop Is Currently Live

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

This Workshop Has Already Concluded

Advanced SVG Animation

Why You Should Join Us

By coding along with us in the 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 Instructor

Sarah Drasner

Sarah Drasner

Sarah is an award-winning Speaker, Senior Developer Advocate at Microsoft, and Staff Writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head. She’s the author of SVG Animations from O’Reilly and has given Frontend Masters workshops on Vue.js and Advanced SVG Animations. Sarah is formerly Manager of UX Design & Engineering at Trulia (Zillow).

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'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.

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
    Hacking
  • 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
    Hacking
  • 3:00PM
    Putting it all together: responsive complex animation
  • 4:30PM
    Wrapping up
Expand...

Interact with the Instructor - Online & In-Person

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

Is This Workshop for Me?

Summary

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.

Event Details

Free for EVERYONE

One Full Day Workshop Session

Replay Videos (available immediately)

When

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

Where

Option 1: Attend online on our full HD live stream

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