This week we're looking at how we work with teams to ensure animation isn't left to chance, and playing around with a new way to use position: sticky!

♥️

Donovan at CSSAnimation.rocks

Articles

Animation in design systems and process — www.slideshare.net

Working with animation within a team can be tricky. In this presentation Val Head sets out how we can better include animation in our workflow and not leave it to the end as decoration

An event for CSS position:sticky — developers.google.com

Not necessarily about animation but this could be useful for animators looking for a better way to attach elements to the page on scroll

Inspiration

Rotating carousel — codepen.io

This is new - a carousel where the content and the mask that transitions the background images rotates. Lovely effect 🌀

Astronaut Only CSS — codepen.io

An astronaut lost in space, created using only CSS and HTML 💫

Cat Swinging on String — codepen.io

Lovely use of motion in this swinging cat example, all done with CSS 😻

2047 — codepen.io

Amazing retro-text animated shadow 🕺

Animation in the real world

Era Ceramics — eraceramics.com

Sometimes a little animation is all you need. On this site there's a subtle but engaging scroll movement in the header, then a subtle tilt at the end to introduce their blog post. Simply, but great.