This week we're creating awesome radial progress bars with SVG, making spinners with CSS, and learning how to keep our animations smooth. Have you found some cool animation you want to share? Reply to this email and let me know!

♥️

Donovan at CSSAnimation.rocks

Animated SVG Radial Progress Bars — daverupert.com

A great trick for creating animated radial progress bars using SVG and outline offset

@keyframers 1.0.0 | Flipping Fluent | Live streamed collaborative animation coding — www.youtube.com

A new show featuring David Khourshid and Stephen Shaw. Watch them live code an animation!

Epic Spinners

Looking for awesome inspiration for animated CSS spinners? Well, you're in luck! Loads to see here 😋

10 principles for smooth web animations

In case you missed it - this article has loads of good info on making sure your animations are smooth

Featured

Level Up your CSS animation skills — courses.cssanimation.rocks

If you're building websites for the web, it's time to make sure you know how to add animation. In this video course, Donovan Hutchinson sets out how you can build animations with CSS. Scroll effects, hover effects, parallax and more. For a short time, get it for just €29!

Inspiration

CSS random wave lines — codepen.io

Check this out in Chrome - CSS-generated animated wave lines! HTH? 🤔

Random Cubes — codepen.io

CSS-generated cubes, with a layer of JavaScript on top to create mesmerising animated 3D cubes 🎁

The Tombs — codepen.io

Dare to explore the never-ending tunnels of... the toooooombs! 🧟‍♂️

Meta Bubbles — codepen.io

Dynamic and very blobby animated bubbles 🛁

Much Hover, Much Wow — codepen.io

A tidy example of multiple animations that combine to make a very nice hover effect ✨

Animation in the real world

Célia LOPEZ - Interactive & 3D designer — celialopez.fr

Parallax, scroll animations and more on this slick portfolio website

CLEVER°FRANKE — www.cleverfranke.com

Some incredible data visualisation work