This week we're making a big difference with small UI animations, visualising (visualising?) 3D transforms, building spinners, and of course, loads of great inspiration.

♥️

Donovan at CSSAnimation.rocks

Awesomeness

UI Animation in React — cssanimation.rocks

See how to use themed animations in styled components, as well as some handy wrapper components to bring small UI animations to a demo React app ⚡️

CSS Transform Functions Visualizer — css-transform.moro.es

Loving the 3D effect here in this tool that helps you visualise and understand CSS transforms

Building a pure CSS animated SVG spinner — glennmccomb.com

A handy tutorial - one to bookmark - all about creating spinning loaders

10 CSS Animated Underline Text Effect Snippets — speckyboy.com

Loads of ideas for creating underline text effects! This pairs nicely with my Animating Links article from last week

Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber — tympanus.net

Staying with the 3D theme, we're learning how to pull apart layers in an SVG

Featured

Level Up Your CSS Animation Skills — www.udemy.com

A practical guide to creating amazing animations on the web! Join me as I guide you through 4 hours of practical CSS animation lessons, each one about 15 minutes long (perfect for a lunch-break coding sesh!)

Also - as a subscriber, save over 90%

Inspiration

Pure CSS Emoji Carousel

Lovely work here on this pure CSS emoji masterpiece

CSSCities

More pure CSS work - this time a stunning 3D cityscape that builds right before your eyes!

Basic Animation Effects

A lovely demonstration / reference of lots of different types of animation

Hover card

One of those simple but thoroughly pleasant examples of card hover effects - perfect transitions and timing functions makes it a keeper

Guess Who

The classic game, Guess Who?, animated with CSS!

That's it for this week! Don't forget to save over 90% and help support this newsletter by taking the Udemy course! All 5* reviews also massively appreciated. Have a great week!