SVGs, with their potential for high-quality and performant graphics, have myriad uses on the web. In this workshop, you’ll learn how to work with SVGs to create informative graphics, build well-optimized and high-performance images, and manipulate them to create UX animations and powerful illustrations.
When visiting a website, your eyes are constantly scanning, creating a spatial map of what you’re 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 three-hour workshop, Sarah Drasner will explain in detail how you can craft delightful SVG animations and give you the skills you need to start using them in production—both on small and large scale. She’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 should know:
What to bring:
Please bring your own laptop (Mac or Win) with your favorite text editor. Preferred: downloaded copy of Illustrator, Inkscape, or Sketch. Codepen account is recommended.
What you’ll learn:
- How to 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
- 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