Scroll-Pushed Animations Inside a CSS Carousel

I used to be reflecting on what I discovered about CSS Carousels lately. There’s lots they will 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 will set off an animation whereas scrolling by means of the gadgets in a CSS carousel?

Why sure, that’s precisely what it means. At the least in Chrome on the time I’m taking part in with this:

It’s as simple as you would possibly count on: 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 assumed I would work round that with a view() timeline as an alternative. 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.