Advanced SVG animations

Learn how to manipulate SVG for a myriad of uses- from icons to animations and everything you need to start using them in production in a performant manner. We'll cover uses from the practical, to the complex, responsive, and interactive.

Why you should attend:

When you’re visiting a site, your eyes are constantly scanning the digital landscape to create a spatial map of what it’s seeing. We are biologically trained to notice anything in this environment that’s moving- it draws our eye. Because of this, animation has the power to guide your users, define symbols and meaning, and even reflect your branding. But it has to be done well.

In this full-day workshop, Sarah will explain in detail how you can craft delightful SVG animations and everything you need to start using them in production — both on small and large scale.

We’ll cover animation in general, and then dive deep into SVG, exploring all its different facets, technical issues and gotchas, performance benefits, and possibilities for accessibility.

What you will learn:

• How create an informative and stable animation, or even a more complex animation that is production-ready,
• How to make SVG cross-browser compatible, backwards compatible, and how to optimize it properly,
• The nuts and bolts of how SVG is used to create beautiful and powerful data visualisations,
• How to leverage the powerful GreenSock API to control and manipulate multiple tweens to create stable animations for production,
• 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.

Who should attend?

• Frontend Engineers
• UX Engineers

What to bring

• Computer
• text editor
• nice to have- github account
• and Illustrator
• or Inkscape
• or Sketch