A big week this week! We're learning how to make use of the power of transforms, crafting reveal animations and discovering some helpful tools to help with our web animation.

♥️

Donovan at CSSAnimation.rocks

Articles

Discover the Power of CSS Transforms — www.heartinternet.uk

Dan Wilson gets into the transform property and how you can use it to change your site, including some great examples of animation.

How to create fancy revealing animations with these simple CSS tricks

Revealing animations - always handy. This article will help you get going with creating impressive reveals.

Tools

Haiku — www.haiku.ai

This looks like an amazing tool for creating animate UI components, ready for production!

Inspector Spacetime — google.github.io

Struggling to communicate your After Effects animation timings to your developers? This tool from Google aims to help.

Inspiration

CSS Animated Pie Preloader — codepen.io

Impressive 3D effect on this animated pure-CSS pie preloader 🍰

Word switcher — codepen.io

Nice example of a glitchy word-switcher animation

La pleureuse — codepen.io

Really interesting use of blur and over-saturation on this blobby demo

mimic.css v1.0 — codepen.io

A very tongue-in-cheek "CSS animations library" :)

Pencil Sharpener — codepen.io

Nice attention to detail on this desk-mounted pencil sharpener

Motion Illustration - Song of The Sea — codepen.io

A simple demo of GSAP used to drift some SVG clouds across the sky

Animation in the real world

404 — www.404.ie

Full of nice glitchy hover effects as well as some nice scroll-reveals, there's loads going on on this site.