This content originally appeared on CSS-Tricks and was authored by Geoff Graham
I was reflecting on what I learned about CSS Carousels recently. There’s a lot they can do right out of the box (and some things they don’t) 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. 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:
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 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.
Scroll-Driven Animations Inside a CSS Carousel originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
This content originally appeared on CSS-Tricks and was authored by Geoff Graham
Geoff Graham | Sciencx (2025-05-15T12:30:59+00:00) Scroll-Driven Animations Inside a CSS Carousel. Retrieved from https://www.scien.cx/2025/05/15/scroll-driven-animations-inside-a-css-carousel/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.