Scroll-driven animations
The article introduces scroll-driven animations using the new CSS Animation Timeline API, which allows animations to be controlled by a user's scroll position instead of time. It explains how the API builds on existing CSS keyframe animation knowledge and maps animation progress to scroll distance. The feature is supported in most major browsers except Firefox, where it is behind a flag, and includes a polyfill for broader compatibility.
Opening excerpt (first ~120 words) tap to expand
Table of ContentsIntroductionThe core conceptTiming functionsAnimation rangesEntry and exitRange percentagesScroll progress timelinesLinked timelinesScratching the surfaceIntroductionOne of the best ways to add a bit of personality to our websites is to animate things on scroll. For example, I recently created the following scroll-driven animation on the Whimsical Animations(opens in new tab) homepage: Historically, we’ve needed to use JavaScript for this kind of effect, but an exciting new API, Animation Timeline, makes it possible to do this sort of thing in native CSS! ✨ I’ve been experimenting with this new API for a few months, and honestly, it’s so good. It’s built on top of existing CSS primitives in a really elegant and natural way.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at Joshwcomeau.
Discussion
0 commentsMore from Joshwcomeau
