This week we take to space, fix CSS keyframes , integrate third party libraries, and study some animation theory - along with loads of cool demos to inspire as usual!

♥️ Donovan at CSSAnimation.rocks

Articles

Parallax scrolling — cssanimation.rocks

Take to the moon in this tutorial showing you how to use Rellax for some amazing parallax scrolling effects!

It’s Time to Fix CSS Animation Keyframes & Timing — medium.com

A great analysis of the way we create animations using keyframes with suggestions on how it could (should?) be better

Integrating Third-Party Animation Libraries to a Project

A thorough and thoughtful article that explores how we can add JavaScript animation libraries to our projects, but also goes deep on the history of hover effects and how to use prefers-reduced-motion

Design Animation Handbook — www.designbetter.co

Get this design handbook for free from Invision

Featured

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

A practical guide to creating amazing CSS animation on the web. It's currently over 90% off, but if that's a problem send me an email and I'll get you a free pass! I'm really keen that people learn this stuff and always happy to help

Inspiration

A Confusing Toggle Button

Try to see how this toggles - the selected circle animates to become the container 🤯

Rocket Through Space

Interesting effect with this rocket as it turns and travels through space (warning: might be a little bit motion-sickness-y) 🚀

Tesla coils w/ canvas

Nifty effect here created with Canvas - also includes React hooks!

Pizza animation on scroll

A delicious recipe made even better by some slick scroll-based animations 🍕😋

Face Button

Click this button for some nice interaction animations

Beauty and The Beast rose

Beautiful glittery animations on this magic floating rose in a jar 🌹

That's it for this week! Be sure to share this newsletter or get your friends to sign up here! See you next Monday.