Advanced SVG Animation
Sarah Drasner
Workshop Date: 03/04/17

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. We'll talk about JavaScript Workflows, React and Vue technical implementation, and how to work with the virtual DOM.

You’ll leave the workshop with a deep understanding of what’s possible with SVG, and how you can add a bit of delight to your website experience. We’ll cover a lot of ground, from SVG workflow to data visualization, to responsive animation to performance issues.

WHAT YOU'LL LEARN: How to leverage powerful tools like GreenSock API, mo.js, D3, and React Motion to control and manipulate animations with ease, and when to use each tool. How create an informative and stable animation, or even a more complex animation that is production-ready. How to make SVG cross-browser compatible, responsive, backwards compatible, and how to optimize it properly. The nuts and bolts of how SVG is used to create beautiful and powerful data visualizations