SVG animation workshop.

Hear about future workshops.

SVG animation is a brilliant way to bring personality and character to an online experience. But in an industry focused on metrics, these whimsical details are often overlooked or undervalued.

This workshop's really hands-on. You’ll have time to tinker around and experiment, you can work on your own graphics or use the pre-prepped ones, and most importantly - no one's left behind. There are notes and code snippets every step of the way.

Check out the amazing things past attendees made in this codepen collection

What you'll learn.

  • How to use motion design principles to improve your animations.
  • How best to structure and optimize your SVG for performance and accessibility.
  • Unlocking SVG’s superpowers — clipping, masking and filters.
  • How to animate SVG with CSS and the gotcha’s to be aware of.
  • Utilizing a JavaScript animation library for more complex animations — GSAP.
  • Creating animation with personality — choosing the right ease and timing.
  • Planning out and structuring your animation.
  • Achieving effects like stroke animation and morphing with GreenSock’s plugins.
  • Debugging your animations & avoiding common pitfalls.
  • How to use your new powers responsibly — respecting user preferences.
Stickers!
Stickers!

People have said very nice things 🥺

You covered ALL OF THE COOL THINGS. I'm seriously so excited to make a ton of cool stuff. It was all so helpful and inspiring and imo you can't put a price on inspiration!
— Joshua.
I thoroughly enjoyed the workshop. It was really well paced, everything explained in detail and the docs are outstanding.
— Paul.
This was, hands down, the best workshop I have ever participated in. Not only was I able to enjoy myself during our lessons (even though I was coding after a full day of coding), I couldn't wait for the next ones to come.
— Natalia.
Hear about future workshops.