This week we delve into creating animations in React, create a cool text cut effect, learn how CSS flex works, build solar systems and more!

♥️ Donovan from CSSAnimation.rocks

Articles

How to Craft Animations in React with React Simple Animate — alligator.io

If you're using React you should keep an eye on this handy little animation package!

CSS Text Cut Effect On Hover — webdevtrick.com

Create an animated text-chopping effect in this step-by-step tutorial 🔪

CSS Flex – Animated Tutorial

This is amazing - see how flex works with a series of animated examples

Reducing motion with the picture element — bradfrost.com

Since the "picture" element accepts media queries you can pass in "prefers-reduced-motion" to present alternate content for people who don't want the animation. Handy!

Rebuilding the Solar System with CSS

If you wish to make apple pie from scratch, you must first create the universe. Or you could use CSS to create some planets 🌍

Featured

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

A practical guide to creating amazing CSS animation on the web - save 90% today

Inspiration

Bulgy radios

Cute and simple yet lovely effect on these radio buttons

Dog DNA Helix

Cool example of Zdog in action 🧬

bees&bombs

Simple yet mind-bending little loading animation

Day 9: Self Portrait

A simple yet perfectly created HTML + CSS animated illustration ✨

That's it for this week! Don't forget to share this newsletter - instant kudos!