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

Variable Font Animation with CSS and Splitting JS — css-irl.info

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

Chris Gannon on Make It Move! — vimeo.com

Watch Chris's Smaching Magazine talk on how to use SVG and some JS to create animations from scratch 

Staggered CSS Transitions — css-tricks.com

Chris Coyier shares some handy tips on how to stagger animations using `transition-delay` for a fun effect

5 Ways to animate a React app in 2019 — medium.com

In case you missed it - a nice round-up of loads of ways we can animate in our React projects

Featured

You can help support this newsletter! — www.patreon.com

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

The perpetual mobile. (Elastic bounce)

It's hard to get a realistic-looking bounce effect in CSS but this pen does a pretty good job 🏀

RemiRuc

Cute logo with an eye that follows you around!

Rainbow Animation (RAF + Responsive)

Rainbows and sparkles! 🌈✨

Checkbox

A pleasant little checkbox circle animation 

Hummingbird

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.