CSS Animation Weekly

By CSSAnimation.rocks

CSS Animation Weekly #283

#283・ Jan 10, 2022

9.25K

subscribers

302

issues

CSS Animation Weekly #283

By CSSAnimation.rocks • Issue #283 • View online

This week we’re learning how to bring more empathy to our animation choices, building a cool interactive timeline, and working with in and out transitions on hover!

❤️ Donovan at CSSAnimation.rocks

Articles

Empathetic Animation

How to think about using animation to elevate your websites, adding personality and lessening cognitive load, while being mindful of accessibility

css-tricks.com • Share

Building a Scrollable and Draggable Timeline with GSAP - Codrops

Learn how to build a scrollable and draggable horizontal timeline using GSAP’s ScrollTrigger and Draggable plugins.

tympanus.net • Share

Adam Argyle's Sick Mouse-Out CSS Hover Effect

A useful walkthrough on how to create this deceptively simple text hover effect

css-tricks.com • Share

Inspiration

ScrollTrigger: SVG Text Mask

Probably the best example of an SVG text mask I’ve seen yet

codepen.io • Share

Neumorphic Elements

Lots of subtle animations in this UI example

codepen.io • Share

Space globe - Three.js

A gorgeous 3D blobby planet

codepen.io • Share

SVG Sound Button 🔊

A nice simple on-off button representing a sound wave

codepen.io • Share

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

In order to unsubscribe, click here.

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