Oct 12, 2020

CSS Animation Weekly #220

By CSSAnimation.rocks • Issue #220 • View online

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

♥️ Donovan at CSSAnimation.rocks

Articles

Animating Number Counters

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

css-tricks.com • Share

Recreating the "100 Days of Poetry" Effect with Shader, ScrollTrigger and CSS Grid

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

tympanus.net • Share

Using WebXR With Babylon.js

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

www.smashingmagazine.com • Share

Inspiration

CSS 3D K-N95 Face Mask 😷

KN95 Face Mask 3D Simulation with CSS only!

codepen.io • Share

10072020 - pure JavaScript

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

codepen.io • Share

Synth rider

Classic retro-futuristic look

codepen.io • Share

SVG

Lovely text-introduction animation

codepen.io • Share

Rainbow Hypercube

A cube inside a cube inside a cube…

codepen.io • Share

Animated Rolling CodePen Logo

Some fun rolling-characters here

codepen.io • Share

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

Did you enjoy this issue?

By CSSAnimation.rocks

CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.

Tweet

Share

If you don't want these updates anymore, please unsubscribe here.

If you were forwarded this newsletter and you like it, you can subscribe here.