Aug 19, 2019

CSS Animation Weekly #160

By CSSAnimation.rocks • Issue #160 • View online

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

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

css-irl.info • Share

Chris Gannon on Make It Move!

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

vimeo.com • Share

Staggered CSS Transitions

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

css-tricks.com • Share

5 Ways to animate a React app in 2019

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

medium.com • Share

Featured

You can help support this newsletter!

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.

www.patreon.com • Share

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 🏀

codepen.io • Share

RemiRuc

Cute logo with an eye that follows you around!

codepen.io • Share

Rainbow Animation (RAF + Responsive)