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 — css-tricks.com

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

Building a Scrollable and Draggable Timeline with GSAP - Codrops — tympanus.net

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

Adam Argyle's Sick Mouse-Out CSS Hover Effect — css-tricks.com

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

Inspiration

ScrollTrigger: SVG Text Mask

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

Neumorphic Elements

Lots of subtle animations in this UI example

Space globe - Three.js

A gorgeous 3D blobby planet

SVG Sound Button 🔊

A nice simple on-off button representing a sound wave