I used to be reflecting on what I realized about CSS Carousels not too long ago. There’s quite a bit they’ll do proper out of the field (and a few issues they don’t) when you outline a scroll container and conceal the overflow.
Hey, isn’t there one other pretty new CSS characteristic that works with scroll areas? Oh sure, that’s Scroll-Pushed Animations. Shouldn’t that imply we are able to set off an animation whereas scrolling by the gadgets in a CSS carousel?
Why sure, that’s precisely what it means. Not less than in Chrome on the time I’m enjoying with this:
It’s as simple as you would possibly anticipate: outline your keyframes and apply them on the carousel gadgets:
@keyframes foo {
from {
peak: 0;
}
to {
peak: 100%;
font-size: calc(2vw + 1em);
}
}
.carousel li {
animation: foo linear each;
animation-timeline: scroll(inline);
}There are extra intelligent methods to animate these items in fact. However what’s fascinating to me is that this demo now combines CSS Carousels with Scroll-Pushed Animations. The one rub is that the demo additionally slaps CSS Scroll Snapping in there with clean scrolling, which is successfully worn out when making use of the scroll animation.
I believed I’d work round that with a view() timeline as a substitute. That actually makes for a smoother animation that’s utilized to every carousel merchandise as they scroll into view, however no cube on clean scrolling.
