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 received one for gradient textual content, one for a comparability slider, one other for accordions, and the checklist goes on.
Considered one of his newest is a pocket book of scroll-driven animations. They’re all spectacular as heck, as you’d count on 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.
This can be a good instance of how a scroll-driven animation is just a standard 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 now we 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 must 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 kind of like JavsScript’s Intersection Observer the place scrolling relies on the place the component 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.
