Advanced SVG Animation

sarah-drasner

Full-day workshop • April 6th
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.

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.

What you'll learn:

  • 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.

What prerequisites skills do you need?

Basic understanding of CSS and JavaScript.

What hardware/software do you need?

Please bring your own laptop (Mac or Win) with your favorite text editor.

Time & Location

This full-day workshop will be hosted at the SF State University — Downtown Campus and will take place after two days of Smashing Conference. The workshop will be running from 9:00am to 5:00pm on Thursday, April 6th.

Save $100 when signing up for the conference and a workshop!

Register for this workshop →
On the Web
http://sarahdrasnerdesign.com/
On Twitter
@sarah_edo
Workshop includes
  • Snacks and drinks during the whole day
  • Tea and coffee
  • Lunch
  • Paper and pen/pencil

Sponsors & Partners