Fronteers Conference October 6-7, Amsterdam

Advanced SVG Animation with Sarah Drasner

Advanced SVG Animation

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.

What you'll learn

In this full-day workshop, Sarah will teach you 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.

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.

Topics that will be covered are

  • How to make SVG cross-browser compatible, backwards compatible, and how to optimize it properly
  • How create an informative and stable animation, or even a more complex animation that is production-ready
  • How to leverage the powerful GreenSock API to control and manipulate multiple tweens and overlapping transforms
  • How to use a variety of tools and techniques to create a seamless and engaging complex SVG animation with ease
  • How to make data visualizations with D3
  • How to work with SVGs with React, from icons, to illustrations to data visualization

What to bring

  • A laptop
  • Some basic knowledge of CSS and JavaScript

About Sarah Drasner

Sarah Drasner

Sarah is an award-winning Manager of UX Design & Engineering at Trulia (Zillow) and staff writer at CSS-Tricks. She’s given a Frontend Masters workshop on Advanced SVG Animations, and is working for a book for O’Reilly on SVG Animations. She has worked for 15 years as a web developer and designer, and at points worked as a Scientific Illustrator and a Undergraduate Professor, and has tutored a Byzantine Icon painter in Santorini.

Sarah loves SVG, informative animation, and welding together pieces of the DOM.