This week we go back to basics with some ground rules, I find myself featured in a fun listicle of animation examples, and loads of cool inspiration.

♥️ Donovan at CSSAnimation.rocks

Articles

Ground Rules for Web Animations

Animations can make a site stand out. Or, they can just as easily kill the experience. When working with web animations, there are a few things to keep in mind

CSS animation examples to recreate — www.creativebloq.com

I contributed to a nice little set of animations you can recreate!

Featured

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

Learn how to improve your use of CSS in building web pages and bring animation to page loading, scrolling, interactions and more. The first 10 people to use this link get the course for free!

Inspiration

Soft UI Buttons

A bunch of button hover effects

Animated CheckBox with Sound Effect 🔊

Nice little animation / tilt of the check box along with a sound effect

Ramones

Some cool Swissted animation 

canvas animation

Wondering how to get started with animating using Canvas? This simple demo is a nice place to start

Small CLAWS

Explore an alien planet in 3D! Includes a VR mode

Morphing letters with GSAP ScrollTrigger and Polymorph.js

Scroll to see this letter mask morph between shapes

Animation in the real world

Are you working on something you'd like to share? I love finding examples of helpful or inspiring animation. Reply to this email and have your work shared with over 8,600 people!