Scroll-Activated Animations Within a CSS Carousel

Here’s a rewritten version of the article with improved clarity and flow:

—

Recently, I’ve been exploring the capabilities of CSS Carousels, and I’m impressed by how much you can accomplish with just a scroll container and some overflow settings. They’re quite powerful out of the box. That said, there are still some accessibility concerns to keep in mind, as highlighted in this excellent piece by Sara Soueidan.

While experimenting, I started thinking—aren’t there newer CSS features that interact with scrollable regions? That’s when I remembered Scroll-Driven Animations, a relatively recent addition to CSS. Naturally, I wondered: could we use this to animate elements as we scroll through a CSS carousel?

The answer is yes—at least in Chrome, which currently supports this functionality.

Getting started is surprisingly simple. You just define your keyframes and apply them to the carousel items using a scroll-based animation timeline. Here’s a basic example:

“`css
@keyframes growText {
from {
height: 0;
}
to {
height: 100%;
font-size: calc(2vw + 1em);
}
}

.carousel li {
animation: growText linear both;
animation-timeline: scroll(inline);
}
“`

Of course, this is just a starting point. There are plenty of creative ways to animate carousel items. What’s exciting here is the combination of CSS Carousels and Scroll-Driven Animations—two modern features working together.

However, there is a caveat. This demo also includes CSS Scroll Snapping with smooth scrolling. Unfortunately, the scroll-driven animation overrides the smooth scroll effect, which can be a bit jarring.

To get around this, I tried using the view() timeline instead. This approach applies the animation as each carousel item enters the viewport, which results in a smoother animation. That said, it still doesn’t restore smooth scrolling behavior.

In summary, combining CSS Carousels with Scroll-Driven Animations opens up some exciting possibilities, even if there are still a few kinks to work out with scrolling behavior.