Adam’s such a mad scientist with CSS. He’s been placing collectively a collection of “notebooks” that make it straightforward for him to demo code. He’s received one for gradient text, one for a comparison slider, one other for accordions, and the checklist goes on.
One in every of his newest is a notebook of scroll-driven animations. They’re all spectacular as heck, as you’d anticipate from Adam. Nevertheless it’s the simplicity of the primary few examples that I really 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 assist.
It is a good instance of how a scroll-driven animation is just a traditional CSS animation, simply tied to scrolling as an alternative 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 {
rework: translateX(-100%);
}
}All we’ve got 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 must since we’re coping with a scroll-based timeline as an alternative of the doc’s timeline. We’re utilizing the view() perform as an alternative of the scroll() perform, which acts form of like JavsScript’s Intersection Observer the place scrolling relies on the place the ingredient comes into view and intersects the scrollable space.
It’s straightforward to drop your jaw and ooo and ahh throughout Adam’s demos, particularly as they get extra superior. However simply do not forget that we’re nonetheless working with plain ol’ CSS animations. The distinction is the timeline they’re on.
