top of page

SVG Animation

Duration

1 Day

Level

Intermediate

About the Workshop

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 and GSAP, and have a ton of fun whilst doing it.


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.

- Animating an SVG with GSAP - GreenSock animation platform

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

Workshop Lead/s

Cassie Evans

Cassie Evans

Cassie is a creative 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 in developer education at GreenSock.

Modern Frontends Logo - White on Transparent - No Byline.png

Live!

bottom of page