Skip to main content

The SVG Animation Masterclass

Cassie Evans
On the web
www.cassie.codes
On Twitter
@cassiecodes
Tickets
Get a ticket

Workshop includes:
  • Working examples to take away
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Workshop, 5×2h + Q&A • Thu & Fri, October 8–22
09:00 – 11:30 AM PDT (Pacific Daylight Time)

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.

In this hands-on workshop, you’ll learn how to craft delightful animations, which will help you deliver more engaging digital products.


🧕🏻👨🏻‍🦱👩🏽🤱🏾 Together with Cassie, we are providing scholarship tickets to four underrepresented people in tech. Are you an underrepresented person in tech and would like to join us free of charge? Fill in our form and we’ll let you know if you are one of the lucky ones selected!

Cassie will cover both impact and implementation. Making sure the animations add the value as intended, as well as the development skills needed. That way you can confidently put your new SVG animation skills in practice after the workshop!

What Will You Learn In This Workshop?👩🏽

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

Who Is This For?

SVG sits in the sweet spot between design and development.

Whether you’re a designer or developer — if you’re comfortable with HTML, CSS and the fundamentals of JavaScript, this workshop is for you.

Register for this workshop →

What Do You Need To Bring?

You will need a laptop, with a modern browser and a (free tier) CodePen account.

About Cassie Evans

Cassie is a front-end developer and speaker, with a background in graphic design and motion design. She got started with coding back in the days of Myspace and Neopets and is on a mission to make the web more whimsical again.

She currently works at Clearleft in Brighton and can usually be found tinkering with SVG’s on CodePen.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:45, we start at 9 AM PDT. All sections will have a hands-on exercise apart from the very first part and the very last part of the workshop.

The workshop sessions will run on the following days:

  • Thu, Oct 8, 09:00 – 11:30 AM PDT
  • Fri, Oct 9, 09:00 – 11:30 AM PDT
  • Thu, Oct 15, 09:00 – 11:30 AM PDT
  • Fri, Oct 16, 09:00 – 11:30 AM PDT
  • Thu, Oct 22, 09:00 – 11:30 AM PDT

Day 1 — Intro to SVG

8:45 AM PDT
Virtual doors open, registration, chat and introduce yourself.

9:00 AM – 11:00 AM
What are the advantages of using animation? Why choose SVG? Intro to SVG markup, the viewBox & making your SVG accessible.

11:00 AM – 11:30 AM
Q&A with Cassie on the day’s material. Chat with each other.

Day 2 — Diving Deeper Into SVG

8:45 AM PDT
Virtual doors open, registration, chat, what was most useful yesterday?

9:00 AM – 11:00 AM
Performance & Optimising your SVG. SVG’s superpowers: Clipping, masking and filters.

11:00 AM – 11:30 AM
Q&A with Cassie on the day’s material. Chat with each other.

Day 3 — Intro to Animation

8:45 AM PDT
Virtual doors open, registration, chat, what was most useful yesterday?

9:00 AM – 11:00 AM
CSS animation, easing & solving transform issues. Animating with JavaScript. Introduction to Greensock animation library.

11:00 AM – 11:30 AM
Q&A with Cassie on the day’s material. Chat with each other.

Day 4 — Intro to Animation

8:45 AM PDT
Virtual doors open, registration, chat, what was most useful yesterday?

9:00 AM – 11:00 AM
Planning out an animation. Structuring and organizing more complex animation using timelines.

11:00 AM – 11:30 AM
Q&A with Cassie on the day’s material. Chat with each other.

Day 5 — Diving Deeper into Greensock

8:45 AM PDT
Virtual doors open, registration, chat, what was most useful yesterday?

9:00 AM – 11:00 AM
Using Greensock’s plugins & SVG stroke animation. Advanced GSAP features and some handy animation tips.

11:00 AM – 11:30 AM
Q&A with Cassie on the day’s material. Saying goodbye!

Register for this workshop →