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 record goes on.
One among his newest is a pocket book of scroll-driven animations. They’re all spectacular as heck, as you’d anticipate from Adam. However 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 help.
This can be a good instance of how a scroll-driven animation is just a standard 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 {
remodel: translateX(-100%);
}
}All we have now 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 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 factor 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 do not forget that we’re nonetheless working with plain ol’ CSS animations. The distinction is the timeline they’re on.
