Sign up now for unlimited access to this (and every other) Forward workshop!
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



All Access Pass, All-You-Can-Watch Workshops

Get full access to the latest and greatest Forward has to offer!

Monthly Plan
$19/mo
  • Free Trial: Take 2 weeks to enjoy before we officially charge your card.
  • All Forward Lecture Videos
  • SFJS Meetup Videos
  • All Access: All online workshops
  • All Access: Live online webinar workshops
  • 10% off In-Person Workshops
  • 10% off Forward Conference Tickets
  • New Content, Published Regularly
    Topics include ES6, the offline web, Electron, Performance, IoT/JS, React, and IoT/Raspberry Pi app development.
Best Value!
Yearly Plan
$15.75/mo*
  • Free Trial: Take 2 weeks to enjoy before we officially charge your card.
  • All Forward Lecture Videos
  • SFJS Meetup Videos
  • All Access: All online workshops
  • All Access: Live online webinar workshops
  • 15% off In-Person Workshops
  • 15% off Forward Conference Tickets
  • New Content, Published Regularly
    Topics include ES6, the offline web, Electron, Performance, IoT/JS, React, and IoT/Raspberry Pi app development.
*paid for up front, yearly
Forward for Teams
Inquire for pricing
  • Big savings! Get your entire team up to expert-level and save big.
  • All Forward Lecture Videos
  • SFJS Meetup Videos
  • All Access: All online workshops
  • All Access: Live online webinar workshops
  • 15% off In-Person Workshops
  • 15% off Forward Conference Tickets
  • New Content, Published Regularly
    Topics include ES6, the offline web, Electron, Performance, IoT/JS, React, and IoT/Raspberry Pi app development.
Inquire for pricing