This week we're learning the differences between transitions, animations, web animation API and when to use them - and then checking out some awesome use of Three.JS in augmented reality.

♥️

Donovan at CSSAnimation.rocks

Articles

Getting Started with CSS Animations

A nice overview of CSS transitions, animations, the web animations API and when to use them. Handy if you've been exploring these but aren't quite sure how they all fit together! 

Introducing Expo AR: Three.js on ARKit — blog.expo.io

AR is everywhere right now - and you can even make your own augmented reality scenes using Three.JS! This article will show you how.

Draggable JS – JavaScript drag and drop library — shopify.github.io

Best viewed on Chrome for the interactive demos throughout - this gorgeous draggable library has some interesting features.

Inspiration

Only CSS: Paper Bird — codepen.io

A minimal and beautiful CSS-animated paper bird 🦅

campfire — codepen.io

A heartwarming demo of how a subtle fire animation effect can look really great 🔥

Hot Ones neon sign (SVG Animation) — codepen.io

I love the shading and flickering animation on this neon SVG animation 🐔

Flower dance — codepen.io

Try all the dance styles and see this sunflower boogie 🌻

Fuzzy Plus

I can't believe how smooth Three.js animations can be - this is almost like something from Monsters Inc. Lovely hair effect

Animation in the real world

BADASS - french production company — badassfilms.tv

Scroll through the names of directors in this super-slick animated site. Your scroll speed even changes the skew effect on the text 🙌