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:
  • 🍵 Tea, coffee, snacks and drinks during the whole day
  • 🥪 Lunch
  • 📒 Paper and pen/pencil

Full-day workshop • Thursday, October 13, 2022.
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 using SVG, CSS and GSAP, and have a ton of fun whilst doing it.

Here’s What You Should Be Expecting:

  • Inspiring & Immersive

    A full day of teaching in a small group

  • Interactive & Practical

    Plenty of time for practice & feedback

  • Hands-on exercises

    With reviews by your teacher

  • Cooperate

    Learn from your teacher and other attendees

  • Dedicated Q&A time

    To ask all your questions

  • Digital Smashing Certificate

    A well-deserved reward for your work

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

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

What Hardware/software Do You Need?

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

About Cassie Evans

Cassie is an international speaker and developer with a background in graphic design and motion design. She has written for CSS-Tricks and Codrops and has thrown workshops for Smashing Magazine. She currently works as a creative developer and educator at GreenSock.

When learning to code she was blown away by how supportive the web community was and loves nothing more than giving back and passing this knowledge on to new developers. Her favourite motto for teaching others is “assume zero experience but infinite intelligence”.

She loves creating and encouraging spaces for people to share, learn and bounce ideas off each other. When she’s not tinkering on the web, she’s off having adventures in the English countryside with her best pal Brody — the most wonderful dog in the world.

Time & Location

This full-day workshop will take place the day after SmashingConf. The workshop will be running from 9:30 AM to 5:30 PM on Thursday, October 13.

Schedule for Thursday, October 13

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

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

Register for this workshop →