SVG Animation

Duration

1 Day

Level

Intermediate

Open for Booking!

Some workshops are now open for booking, and the rest will be open soon!

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.

Some workshops are now open for booking, and the rest will be open soon!

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

Live!