- CSS Animation Weekly
- Posts
- CSS Animation Weekly #160
CSS Animation Weekly #160
A huge week for animation on the web - this time we're exploring variable font animations, learning how to make stunning SVG animations with Chris Gannon, staggering animations and animating our React apps, and much more.
♥️ Donovan at CSSAnimation.rocks
Articles
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/82d86e88-f8a7-4e36-8380-66b024b794b1/social_1200x630-76d423a96afc8d83aad39e66700d444b.png)
Variable fonts are an interesting new approach to the infinite ways we can design our pages, and they can be animated! Learn how in this article
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/bdda2960-644e-45d4-ad38-638675ae97ba/overlay.jpeg)
Watch Chris's Smaching Magazine talk on how to use SVG and some JS to create animations from scratch
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/59a9f343-55b7-4dd6-a377-8d90ec9861b1/stagger.png)
Chris Coyier shares some handy tips on how to stagger animations using `transition-delay` for a fun effect
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/ae56949c-8960-420e-a986-a96ea61ed278/1_1Z177dpTeAp7uEFc5Zx2xg.png)
In case you missed it - a nice round-up of loads of ways we can animate in our React projects
Featured
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/33f6b971-f189-4a3b-b99f-031a49e5c22f/1.png)
Every week I search for the best examples of CSS (and other web) animation examples to share with you. But I need your help. Running a newsletter not only takes time it also costs money. If you can, please consider supporting me in one of two ways:
First, you can become a CSS Animation patron here from as little as $1 per month!
If that's not for you - please tell your friends, by word, blog, tweet, or sharing this signup page.
Many thanks, Donovan.
Inspiration
It's hard to get a realistic-looking bounce effect in CSS but this pen does a pretty good job 🏀
Cute logo with an eye that follows you around!
Rainbows and sparkles! 🌈✨
A pleasant little checkbox circle animation
This (mostly) CSS/HTML animated hummingbird is gorgeous. Move your cursor around to see it from different angles 🦜
Please remember to help support this newsletter by sharing this signup page. Thanks, Donovan.