This week we're jumping into the art of optimising animation performance, learning how to bring icons to life, as well as bringing animation to Angular.

♥️

Donovan at CSSAnimation.rocks

Articles

Performant Web Animations and Interactions: Achieving 60 FPS — blog.algolia.com

Practical tips for making web animations silky-smooth

Icons In Motion — www.blog.thenounproject.com

Salih Abdul-Karim talks about Lottie, using After Effects animations in mobile apps, and the process of bringing an icon to live with animation

A web animations deep dive with Angular by thoughtram

Angular comes with a built-in animation system that lets us create powerful animations based on the Web Animations API. Learn how to create animations within Angular

Inspiration

Bear Cub in Pure CSS — codepen.io

A happy bear cub, created with just CSS 🐻

Experiment #6 — codepen.io

Gorgeous demo combining noise effects and filters.

Slow Drip — codepen.io

Best seen on Chrome, this uses a popular SVG gooey effect to simulate dripping water 💧

GitHub (Giants Remix) — codepen.io

Bodymovin' used here to create this super slick Github logo reveal.

Animated progress bar with Just Animate 2 — codepen.io

A simple demo of how Just Animate can be used to make a smooth loading progress bar

Animation in the real world

Chris Biron — biron.io

I love the simple use of scroll animation on this portfolio site from Chris Biron. Super slick 🙌