Another week, more CSS animation awesomeness. This week we take a look at some timeless advice on how to use animation in our design systems, explore animated stories, and loads of inspiration.

♥️ Donovan at CSSAnimation.rocks

Including Animation In Your Design System — www.smashingmagazine.com

In this guide from last year, Val Head sets out how to approach designing your motion guidelines as part of a design system.

Yelloworld • Onetold Stories — onetoldstori.es

A couple of words to remind us, and bytes to remember - this beautiful animated piece of art is worth exploring

Featured

CSSAnimation.rocks is creating a weekly newsletter | Patreon — www.patreon.com

Want to support this newsletter? 9 people currently are! Each month I put in a few hours creating this newsletter, and I pay a newsletter hosting fee of $40.

Currently 9 people are contributing a total of $16 between them. This is a great start but I could really do with a few more to keep this newsletter going.

If you'd like to help, you can become a patron of CSSAnimation.rocks today.

Inspiration

Pure CSS Claw Crane

I can't believe this working Claw Crane game is made with no JavaScript at all! Amazing

Rippling 3D SVG Text Displacement

An intriguing demo that uses GSAP to create interesting noise-based distortions. Best seen in Chrome

Neumorphic breathing polygon

The subtle shape changes combined with colour transitions make this hypnotic 

DLS Scroll nav

This is super useful if you're building a page with an index, and want to highlight the currently-viewed section (with nice transitions between each!)

Interactive Toys

Check out this collection of interactive demos from Paul Neave

Full Moon in Paris?

So much subtle detail and movement in this animated little CSS-mostly scene. Is it a full moon tonight?