CSS Animation Weekly #190

March 16, 2020

I hope you're all staying safe, keeping out of any large social gatherings, and looking our for your neighbours. This week we're leaning in to the social isolation by learning some cool animated JS tricks, including 3D games, animating text and counters.

Lots of ♥️, Donovan at CSSAnimation.rocks

Articles

A great walkthrough of how to create a super-optimised little game in JS

Check out this guide showing 4 ways to create a text hover animation, with pros and cons for each

🎬 Awesome tutorial video showing how to make an animated total counter for animating totals on a page

This animated image background generator creates some lovely effects

Featured

If you're like me you'll be stuck inside all week. If you're able to work from home, anyway. If not, you have my utmost respect - please stay safe and thank you for doing all you're doing to help us all through this difficult time.

If you want to support this newsletter, the easiest way is this "buy me a coffee" link. I won't be buying any coffee with it, all funds go toward paying the hosting costs for the newsletter, so all contributions are massively appreciated.

Inspiration

Based on Washington Post data, this is an interesting idea that simulates the impact of staying home (still) at various levels. While it doesn't allow for hospital capacity, and assumes a generous 1% mortality rate, it's still an interesting piece of work

Possibly the fanciest game of life simulator I've seen yet, using Three.JS and GSAP

This is a lovely glowy shader demo

Say what you like about neumorphism - these waves look pretty nice

I'll be bookmarking this lovely CS-only radio button animation. So smooth!