CSS Animation Weekly #283

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


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

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

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


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

Lots of subtle animations in this UI example

A gorgeous 3D blobby planet

A nice simple on-off button representing a sound wave