Hello friends. 🥳
This month we’re celebrating!
Firstly - TEN EDITIONS! Woo! Thanks for hanging around for that long, we’re honoured to be clogging up your inboxes with SVG nonsense.
Secondly - Cassie is super excited to have started a new job at GreenSock, as Lead bestower of animation superpowers, so we’re going to be having a bit of a GSAP party today.
It’s animation superpower bestowing time! Let’s see what we’ve got in the box this week…
💡 SVG tip
If you’ve played around with SVG before, you’ve probably run into some confusion when SVG transforms don’t act the same as they do in HTML-land.
In SVG, all transforms are based around the [0,0] coordinates of the SVG viewBox, i.e the top left hand corner of the SVG. This can be annoying as with HTML elements, we’re used to elements transforming around their own center.
When animating with GSAP, the default origin for transforms is the top left corner of your SVG elements. But GSAP also allows us to customize this with two different properties:
transformOrigin allows you to define the origin based on the element bounding box.
alternately,
svgOrigin allows you to define the origin based on the SVG coordinates.
🎨 Article
Where better to go for GSAP knowledge than the GreenSock website itself. This page is the motherload of SVG and GSAP tips
It covers all the syntax you need to know to get started, tips to avoid common mistakes, and resources from around the web.
It also explains some of the bugs and challenges that GSAP solves for you so you can gain a better idea of when to reach for this powerful tool.
Read ‘Animating SVG with GSAP’
✨ Fun demos
GreenSock has a bunch of plugins which can help supercharge your animations, let’s take a look at some of them…
BOOST 💨 – view demo
This demo by Sikriti Dakua might look like variable font magic, but it’s actually using the MorphSVGPlugin to morph between different SVG paths.
MorphSVG allows you to morph <path> data even if the number (and type) of points are completely different between the start and end shapes. Powerful stuff.
Bloom – view demo
We’ve covered line drawing animations in a previous edition. So you can probably guess that this gorgeous demo by Shunya Koide is using the DrawSVGPlugin
DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of SVG elements.
Draggable – view demo
This adorable flower by Louise Flanagan is using GSAP’s draggable plugin to spin the flower around.
You can even team draggable with the InertiaPlugin, for physics type effects, making any element draggable, spinnable or even flickable.
Paper Cut – view demo
This is such a slick example of MotionPathPlugin in action by Aaron Iker.
MotionPathPlugin allows you to animate elements along an SVG <path> or array of points. You can even edit the path in-browser using MotionPathHelper!
Impossible checkbox – view demo
Ending off the demos with a healthy dose of GSAP fun from Jhey!
No plugins here, but we love how Jhey combines so many of his demos with noises. Make sure to leave your sound on. 🔈
Bonus video
If you’re more of a visual learner, here’s an episode of Learn with Jason to get you started.
We cover staggering animations, SVG masking and scroll based animation using ScrollTrigger
If you want to play around with any of these plugins, here’s a codepen you can fork with all the bonus plugins included.
Happy GSAP-ing gang! We’ll see you next month for more SVG fun.