The SVG Animation Masterclass
- Your instructor
- Cassie Evans
-
Workshop includes:
- Working examples to take away
- Docs with all the info you'll be learning
- Interactive sessions
- Workshop recordings
- Dedicated Q&A time
- Smashing Certificate
Unfortunately, this workshop is fully sold out! But you can join the waiting list in case a ticket becomes available:
Workshop, 5×2h + Q&A • Thu & Fri, February 11–26 2021
09:00 – 11:30 AM PT (Pacific, US) • 18:00 – 20:30 CET (Europe)
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.
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!
Video Message From Cassie
A short introduction to the class by Cassie Evans herself.
🧕🏻👨🏻🦱👩🏽🤱🏾 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!
$450.00
Register for this workshop →
Five 2h live sessions + Q&A. Feb 11–26.
With all video recordings & slides. Get a ticket.
🎪 Save up to 25% on this workshop with Smashing Membership.
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.
Cassie ran this workshop before, and this is a Codepen collection of all the great work everybody made.
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. Learning in such a pleasant and friendly setting made all the difference.
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.
You covered just the right amount of content per day. Even though we went through a ton of topics, it never felt overwhelming, and there was always plenty of time to ask questions and dig in a bit more. The Docsify notes made it so easy to stay engaged, because there was never any fear of missing out--I could always easily catch up if I fell behind, or go back to review something I didn't quite catch the first time.
$450.00
Register for this workshop →
Five 2h live sessions + Q&A. Feb 11–26.
With all video recordings & slides. Get a ticket.
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 PT.
The workshop sessions will run on the following days:
- Thu, Feb 11, 09:00 – 11:30 AM PT
- Fri, Feb 12, 09:00 – 11:30 AM PT
- Thu, Feb 18, 09:00 – 11:30 AM PT
- Fri, Feb 19, 09:00 – 11:30 AM PT
- Fri, Feb 26, 09:00 – 11:30 AM PT
Day 1 — Intro to SVG
8:45 AM PT
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 PT
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 PT
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 PT
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 PT
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!
Unfortunately, this workshop is fully sold out! But you can join the waiting list in case a ticket becomes available: