Scroll Pushed Animations Pocket book

Adam’s such a mad scientist with CSS. He’s been placing collectively a sequence of “notebooks” that make it simple for him to demo code. He’s acquired one for gradient textual content, one for a comparability slider, one other for accordions, and the checklist goes on.

One in all his newest is a pocket book of scroll-driven animations. They’re all spectacular as heck, as you’d count on from Adam. However it’s the simplicity of the primary few examples that I like most. Right here I’m recreating two of the results in a CodePen, which you’ll wish to view within the newest model of Chrome for help.

This can be a excellent instance of how a scroll-driven animation is solely a traditional CSS animation, simply tied to scrolling as a substitute of the doc’s default timeline, which begins on render. We’re speaking about the identical set of keyframes:

@keyframes slide-in-from-left {
  from {
    remodel: translateX(-100%);
  }
}

All we now have to do to set off scrolling is name the animation and assign it to the timeline:

li {
  animation: var(--animation) linear each;
  animation-timeline: view();
}

Discover how there’s no period set on the animation. There’s no have to since we’re coping with a scroll-based timeline as a substitute of the doc’s timeline. We’re utilizing the view() perform as a substitute of the scroll() perform, which acts type of like JavsScript’s Intersection Observer the place scrolling relies on the place the aspect comes into view and intersects the scrollable space.

It’s simple to drop your jaw and ooo and ahh throughout Adam’s demos, particularly as they get extra superior. However simply keep in mind that we’re nonetheless working with plain ol’ CSS animations. The distinction is the timeline they’re on.

---

Scroll Pushed Animations Pocket book initially revealed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the e-newsletter.