Scroll-driven animations
The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It’s honestly a very lovely API, and in this blog post, we’ll explore some of the super cool things we can do with it.
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
