This week, loads of cool tutorials including animating counters, scroll animations and mixed-reality XR!

♥️ Donovan at CSSAnimation.rocks

Articles

Animating Number Counters — css-tricks.com

This is amazing - how to animate a counter using CSS, including on hover

Recreating the "100 Days of Poetry" Effect with Shader, ScrollTrigger and CSS Grid — tympanus.net

(Video) Check out how to create this scroll cool effect from 100 DAYS OF POETRY

Using WebXR With Babylon.js — www.smashingmagazine.com

When we animate online it's not just flat screens we're designing for any more. This article introduces mixed reality (XR) with WebXR technologies and the Babylon.js framework

Inspiration

CSS 3D K-N95 Face Mask 😷

KN95 Face Mask 3D Simulation with CSS only!

10072020 - pure JavaScript

A great demo of how performant Canvas can be at animating lots of elements, with some interesting animation timing effects too

Synth rider

Classic retro-futuristic look 

SVG

Lovely text-introduction animation

Rainbow Hypercube

A cube inside a cube inside a cube...

Animated Rolling CodePen Logo

Some fun rolling-characters here

Coming next week... animated loaders! Got a favourite page-loading animation? Reply or send me a tweet and I'll feature it!