CSS Animation Weekly #205

June 29, 2020

It's a very scrolly week in the world of CSS animation!

♥️ Donovan at CSSAnimation.rocks

Scroll-related animations have been used on the web for years. With loads of animated examples, you'll be expert in scroll techniques by the end of this article

A deep dive into the inner workings of spring animations in Framer Motion

A nicely implemented carousel slider with realistic physics, a very "native" interaction and loads of great examples

Featured

Inspiration

A great example of scroll-based and triggered animations using GSAP

Hurts my head a bit but this is pretty cool

Controversial! Is it "Use TypeScript instead og JavaScript" or vice versa!?

I love creative hover effects and this one is amazing

A nice little VueJS demo with a heart micro-interaction. Click multiple times to see the randomised effect

A nice little eye made with HTML and CSS, and animated on hover

A simple demo with example of how to show/hide a "return to top" arrow

Animation in the real world

Check out the scroll effects on this - 3D curved transformations, scroll-triggered animations, and all of them doing a great job of explaining the service being offered