Skip to main content Jump to list of all articles

Interactive Web Animation With SVG

SVG is more than just a Vector image format. It provides a great bridge between design and front-end development, and works as a fun starting point to play around with other web technologies. Let’s explore the exciting world of SVG animation together. We’ll start with design, explore some animation and finish up with some interaction, as interaction is what makes motion on the web so much fun.

About The Session

  • Speaking: Cassie Evans
  • Date:

Interactive Web Animation With SVG

Having fun is an important part of learning. Especially in the world of web animation!

This talk will contain takeaways to help with SVG animation in production, but we'll also have fun with some experimental technology.

  • Creating, exporting and optimising an SVG for animation.
  • Getting started with Greensock for animation.
  • A look into some of Greensock's SVG plugins.
  • Looking at ways to add some interaction including webcam colour detection and face detection with chrome’s shape detection API.

About The Speaker

Cassie has a lot of love for animation, especially animation on the web. She can usually be found tinkering on Codepen and nerding out about colour palettes.

She is an organiser at codebar Brighton, a non-profit initiative that runs free programming workshops and currently works as a Front-end Developer at Clearleft in Brighton.

← Back to the overview

What’s Smashing TV?

Smashing TV is a series of webinars and live streams packed with practical tips for designers and developers. Not just talks — conversations and “here-is-how-I-work”-sessions. Smashing Members can download recordings, too.

Think of it as some sort of a Hollywood blockbuster with cats. Just better, because it’s for people like you. Check upcoming webinars.

Previous Webinars

We run practical sessions every week. No fluff, just actionable techniques and strategies for building and designing better experiences. Here are a few recent ones:

View upcoming webinars ↬