Chris’ Corner: GSAP, more like FREESap

The news is that GSAP, a hugely popular animation library on CodePen and the web writ large, is now entirely free to use thanks to their being acquired by Webflow.

Thanks to Webflow GSAP is now 100% FREE including ALL of the bonus plugins like SplitText, MorphSVG, and all the others that were exclusively available to Club GSAP members. That’s right – the entire GSAP toolset is FREE, even for commercial use! 🤯 You can read more about this on Webflow’s blog

Cool.

In celebration, they are also running a Community Challenge where you make stuff and submit it and maybe win some swag. You make something to submit either with Webflow or CodePen, and they provide a quick Pen template to get started.

As you can see in that template, GSAP is great at animating regular ol’ HTML content, and in this case text content that it splits into individual elements (accessibly!) with the brand-new entirely re-written for betterness SplitText plugin. But GSAP can animate… whatever. I actually think of it as being particularly good at animating SVG, so I figure we ought to spend the rest of our time together here looking at sweet SVG links that caught my eye recently.

• Animating Figma’s SVG Exports by Nanda Syahrasyad — These interactive posts that Nanda does are amazing. It really doesn’t have anything to do with Figma, but that’s a clever title as it will help connect with the kind of developer who needs this. This made me think of GSAP a bit as the last demo relies on a bit of transform-origin which GSAP explicitly fixes cross-browser (or at least that used to be a big sticking point it smoothed over).
• svg-gobbler by Ross Moody — Exporting SVG from a design tool, like above, is one way to get the SVG you need. Another is kiping it from existing sites! There is lots of SVG on the web already to get your hands on (be careful to account for copyright and taste). This browser extension helps you extract them cleanly.
• SVG Coding Examples: Useful Recipes For Writing Vectors By Hand by Myriam Frisano — The other way to get your hands on the SVG you need is to roll up your sleeves and write it, which is an entirely possible thing to do in SVG syntax. This guide doesn’t use <path> on purpose because that’s a whole thing unto itself (which I once documented and have played with on a limited basis). Myriam’s guide here does get into using JavaScript to variable-ize things and do loops and stuff which is all smart and useful stuff.
• From static to interactive: turn SVG diagrams into exciting experiences on your website by Vanessa Fillis — Flouish looks like a pretty cool tool. These demos by Vanessa to me feel like slightly fanci-fied image map demos, which is actually a perfectly great SVG use case.
• Changing Colors in an SVG Element Using CSS and JavaScript by Kirupa Chinnathambi — Just some SVG 101 here, which is always appreciated.
• Vectorpea by Ivan Kutskir— Web-based vector editor (ala Illustrator, with the Pen tool and such) that opens lots of file formats and works quite nicely in my limited experience.
• Lissajous Curve SVG Generator by Eva Decker — So niche.
• SVGFM by Chris Kirknielsen — SVG filters are ultra powerful and, I’ve always felt, a bit inscrutable. Chris brings some language and UI to the party making it a bit easier to experiment and play. But it’s still complex!
• Revisiting SVG filters – my forgotten powerhouse for duotones, noise, and other effects by Brecht De Ruyte — My favorite kind of SVG filters are the ones with one clear purpose and one filter that does the thing. Duotone images are that.
• The Truth(tm) about encoding SVG in data URIs by Stoyan Stefanov — When using SVG in CSS as a background, you can do: background: url('data:image/svg+xml,<svg ...></svg>'); and I mean that quite literally. You can put whatever SVG syntax in there and it’ll work generally as expected. No scripting or anything. There is only one thing to worry about: encode any # characters as %23.