Advanced SVG Animations v2
Join us for an Awesome Workshop on:

Advanced SVG Animations v2

November 29, 2018 - 9:30am to 5:30pm Central US Time

RSVP to Attend Online

Live and in Full HD

Join in Person

From Downtown Minneapolis, MN

You're Registered to Attend Online!

November 29, 2018 - 9:30am to 5:30pm Central US Time

This Workshop's Online Chatroom is Currently Open!

November 29, 2018 - 9:30am to 5:30pm Central US Time

You can watch video of this workshop!

Advanced SVG Animations v2

Some Key Takeaways!

By coding along with us in the Workshop, you'll:

  • Learn platonic shapes, path commands, and all about the viewBox attribute.
  • Learn how to build an SVG graphic both in code and in graphics programs properly optimize them.
  • How to create control timelines with interaction, and make complex animations that are production-ready.
  • How to make SVG cross-browser compatible, backward compatible, and how to optimize it properly.
  • How to leverage the feature-rich GreenSock API for a variety of immersive effects.
  • How to use a variety of tools and techniques to create a seamless and engaging complex SVG animation that guides your users and compliments your branding.

Your (Awesome) Instructor

Sarah Drasner

Sarah Drasner

Sarah is a Senior Developer Advocate at Microsoft, a Vue core team member, and Staff Writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head and co-organizer of Concatenate Conference. 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 Master

Workshop Details

SVGs (Scalable Vector Graphics) are resolution-independent, scalable for responsive, and easy to navigate with their navigable DOM. Learn how to use this robust graphic format as well as how to make complex animations for a myriad of use cases across the web. In this updated workshop, you will cover practical UI/UX examples, learn how to create immersive graphics with impressively small filesizes, and have fun with creative techniques.

Daily Schedule

Frontend Masters has already held over 100 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.

  • 9:30AM
  • 10:00AM
  • 11:00AM
    Optimizing SVG
  • 11:30AM
    Animation SVG with CSS
  • 12:00PM
  • 1:00PM
    Best Practices for Performance
  • 2:00PM
    Tools and Techniques
  • 2:30PM
    GreenSock Introduction
  • 3:30PM
    GreenSock Plugins
  • 4:30PM
    GreenSock-powered SVG Animations and Effects
  • 5:00PM
    SVG Animations in React or Vue

Interact with the Instructor - Online & In-Person

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

Is This Workshop for Me?


This workshop is ideal for the curious developers that are interested in expanding your horizons with performant and cutting-edge programming techniques. You’ve seen beautiful animations enrich sites and want to learn either for performant productions sites or based on your interest!

Any Prerequisites?

  • You should know basics of CSS and some JavaScript.

Event Details


One Full Day Workshop Session

Replay Videos (available immediately)


November 29, 2018 - 9:30am to 5:30pm Central US Time


Option 1: Attend online on our full HD live stream

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