SVG animation

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.

requirements - a basic understanding of JS, laptop, a codepen account

session length - one day