CSS Animation Weekly #159

This week we learn how to animate SVGs using a cute mascot, put together some instant SVG line animations with Vivus, and create awesome tilt effects in jQuery. Also, loads of inspiration as ever.

♥️ Donovan at CSSAnimation.rocks

A cute mascot becomes built-and-animated on the web in this article about animating SVGs

If you're looking for a handy way to generate a line-drawing effect on your SVG, check out this helpful tool!

Handy little plugin for jQuery that lets you create mouse-hover-based tilt effects

Featured

A huge thank-you to those of you who signed up last week to help support this newsletter! Aside from the time I put into finding and curating links, this helps pay for the newsletter service (full disclosure, it's approaching paying for 50% of the monthly fee!) and every little helps.

If you'd like to help you can pledge as little as $1 per month, or more if you'd like to avail of my awesome CSS Animation stickers 🚀

With your support this newsletter will also remain free of external ads. Check out my Patreon page here.

Inspiration

I'm a big fan of text-reveal effects. Here's a nice simple one where the bars reveal the words

Scroll to see the hero section scale back nicely - no scroll jacking!

A super-simple CSS-only animation with an 80's style. What's not to love!?

Cute little HTML game - click to try to find the rainbow

Cutest little bee-themed loader I've seen in a while 🐝

A neat little 3D transform effect

Nice article from CSS In Real Life about how to create a subtly pulsating sun animation using CSS ☀️

And that's it for this week! Be sure to share this newsletter with your friends, and let them know they can sign up here for weekly CSS animation inspiration!