An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines

December 13, 2024

It’s been 10 years since scroll-driven animations were introduced in a spec proposal, and after five years in development, we’re finally beginning to see pop up in websites. There are scrolly-telling and maze games as well as cover flow animations and 3D rotation with scroll… but what exactly is new here? It’s not like we haven’t seen scroll animations before, but what we have now requires no JavaScript, no dependencies, no libraries — just pure CSS. And if that’s not exciting enough, these animations run off the main thread, delivering smooth, high-performance, GPU-accelerated experiences.

Source: An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine

Lean more about JS free scroll driven animations with Mariana Beldi.