I was reflecting on what I learned about [CSS Carousels](https://css-tricks.com/css-carousels/) recently. There’s a lot they can do right out of the box (and some things [they don’t](https://www.sarasoueidan.com/blog/css-carousels-accessibility/)) once you define a scroll container and hide the overflow.

Hey, isn’t there another fairly new CSS feature that works with scroll regions? Oh yes, that’s [Scroll-Driven Animations](https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/). Shouldn’t that mean we can trigger an animation while scrolling through the items in a CSS carousel?

Why yes, that’s exactly what it means. At least in Chrome at the time I’m playing with this:

CodePen Embed Fallback

It’s as straightforward as you might expect: define your keyframes and apply them on the carousel items:

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

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

There are more clever ways to animate these things of course. But what’s interesting to me is that this demo now combines CSS Carousels _with_ Scroll-Driven Animations. The only rub is that the demo also slaps [CSS Scroll Snapping](https://css-tricks.com/almanac/properties/s/scroll-snap-type/) in there with smooth scrolling, which is effectively wiped out when applying the scroll animation.

I thought I might work around that with a `view()` timeline instead. That certainly makes for a smoother animation that is applied to each carousel item as they scroll into view, but no dice on smooth scrolling.

CodePen Embed Fallback

---

[Scroll-Driven Animations Inside a CSS Carousel](https://css-tricks.com/scroll-driven-animations-inside-a-css-carousel/) originally published on [CSS-Tricks](https://css-tricks.com), which is part of the [DigitalOcean](https://try.digitalocean.com/css-tricks/?utm%5Fmedium=rss&utm%5Fsource=css-tricks.com&utm%5Fcampaign=family%5F&utm%5Fcontent=) family. You should [get the newsletter](https://css-tricks.com/newsletters/).