CodePen Blog
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 <pathon 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'); and I mean that quite literally. You can put whatever SVG syntax in there and it’ll work generally a[...]

s expected. No scripting or anything. There is only one thing to worry about: encode any # characters as %23.

Top 30 CSS Libraries Every Developer Should Know

If you're a web developer or designer, using CSS libraries can greatly speed up your workflow and enhance your UI design. Here's a list of the Top 30 most used CSS libraries along with their key features:

1. Bootstrap – Responsive layout, grid system, UI components.
2. Tailwind CSS – Utility-first classes for custom designs.
3. Foundation – Responsive framework with accessibility features.
4. Bulma – Modern CSS framework based on Flexbox.
5. Materialize – Based on Google’s Material Design.
6. Animate.css – Ready-to-use CSS animations.
7. Skeleton – Lightweight boilerplate for basic UI.
8. Pure.css – Small, responsive CSS modules.
9. UIkit – Modern UI components and grid system.
10. Metro 4 UI – Metro-style components and animations.
11. Tachyons – Functional CSS with atomic classes.
12. NES.css – Retro 8-bit game-inspired UI.
13. Cirrus – Clean and responsive CSS framework.
14. Material UI – Material Design for React apps.
15. W3.CSS – Simple, responsive CSS from W3Schools.
16. BEM Methodology – Naming convention for scalable CSS.
17. Clarity Design – Enterprise UI by VMware.
18. Fomantic-UI – Community fork of Semantic UI.
19. Shoelace – Web components for modern apps.
20. Picnic CSS – Lightweight and minimal.
21. Basscss – Low-level CSS toolkit.
22. Wing – Minimal CSS framework with defaults.
23. Blaze UI – Flexible and responsive UI components.
24. Bojler – Email-friendly CSS boilerplate.
25. Water.css – Style websites without writing CSS.
26. Min.css – Minimal, responsive CSS library.
27. CSShake – Shake animations in CSS.
28. Style Framework – Simple and modern CSS framework.
29. LayerCSS – UI layers like modals, alerts, tooltips.
30. Open Props – Custom CSS variables (props) for themes.

🚀 Free Web Dev Courses with Certificates!

✅ freeCodeCamp – Full certifications (HTML, CSS, JS)
✅ Great Learning – Short courses (1-6 hrs, free cert)
✅ IBM SkillsBuild – Beginner-friendly + certificate
📌 *Others: Coursera (audit free), Harvard CS50 (free learning)

💡 Boost your resume & skills for FREE!

❤ @Html_codee

#LearnToCode #WebDev #FreeCertificates

💡 HTML Tip of the Day: The Power of <div> and <span>!

Did you know?

<div> is a block-level container, great for wrapping sections of your content.
<span> is inline, ideal for styling small parts of text or elements!
👉 Try this code:

<div style="background-color: lightgray;">
  <p>This is inside a div.</p>
</div>
<span style="color: red;">This is inside a span.</span>

Subscribe to @Html_codee for more coding tips!

CodePen Blog
Chris’ Corner: CSS Deep Cuts

Sometimes we gotta get into the unglamorous parts of CSS. I mean *I* think they are pretty glamorous: new syntax, new ideas, new code doing foundational and important things. I just mean things that don’t demo terribly well. Nothing is flying across the screen, anyway.

* The Future of CSS: Construct <custom-identand <dashed-identvalues with ident() by Bramus Van Damme — When you go anchor-name: --name; the --name part is a custom property, right? No. It is a “custom ident”. It doesn’t have a value, it’s just a name. Things get more interesting with ident() as a function, which can help us craft them from other attributes and custom properties, making for much less repetitive code in some situations.
* Beating !important user agent styles (sort of) by Noah Liebman — Using !important is a pretty hardcore way for a rule to apply, made even more hardcore when used by a low level stylesheet, of which user agent styles are the lowest. So is it even possible to beat a style set that way? Click to find out.
* Here’s Why Your Anchor Positioning Isn’t Working by James Stuckey Weber — There is a whole host of reasons why including DOM positioning and order. If you ask Una she’ll say it’s probably the inset property.
* Faux Containers in CSS Grids by Tyler Sticka — Elements that stick out of their “container” is a visually compelling look. A classic way to do it is with negative margins and absolute positioning and the like. But those things are a smidge “dangerous” in that they can cause overlaps and unexpected behavior due to being out of regular flow. I like Tyler’s idea here of keeping it all contained to a grid and just making it look like it’s breaking out.
* Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus Van Damme — A regular MutationObserver watches the DOM for changes. But not style changes. Bramus has created a version of it that does, thanks to a very newfangled CSS property that helps it work efficiently. I’m not overflowing with use case ideas, but I have a feeling that when you need it, you need it.
* Using the upcoming CSS when/else rules by Christiana Uloma — There is a working draft spec for @when/@else so while these aren’t real right now, maybe they will be? The if() function seems more real and maybe that is enough here? The if() function would just be a value though not a whole block of stuff, so maybe we’ll get both.

Test my new code!
@Html_codee