- CSS Animation Weekly
- Posts
- CSS Animation Weekly #187
CSS Animation Weekly #187
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

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

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

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
I can't believe this working Claw Crane game is made with no JavaScript at all! Amazing
An intriguing demo that uses GSAP to create interesting noise-based distortions. Best seen in Chrome
The subtle shape changes combined with colour transitions make this hypnotic
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!)
Check out this collection of interactive demos from Paul Neave
So much subtle detail and movement in this animated little CSS-mostly scene. Is it a full moon tonight?