Creating Scroll-Based Animations in Full view() | CSS-Tricks

"The CSS animation-timeline property accepts a view() function which, in turn, returns a timeline of how much of an element is visible in the part of a scroll container that's viewable (formally known as a scrollport). In other words, rather than letting an animation run a linear progression based on how much time has elapsed, view() runs animations based on the visibility of the animated element within a scrollport."

"Pretty neat, right? Depending on where an image is in the scrollable carousel, it goes from small and blurry at the far sides while getting larger and clearer when it hits the center. We have a little scroll snapping in there as well to make sure each image item makes a stop. It's not that hard to do! I'll show you how it's really the same old animation you're used to writing in CSS, only applied on a view timeline instead of a normal timeline."

The CSS animation-timeline property accepts a view() function that returns a timeline representing how much of an element is visible inside a scrollport. view() drives animations by element visibility within the scrollport instead of elapsed time, enabling animations to run as elements enter and exit the visible area. The behavior resembles JavaScript's Intersection Observer and supports scroll-driven effects like changing size and blur based on carousel position. The example uses a .carousel container with display:flex, overflow-x:auto, width:max(480px, 50vw), and scroll snapping. Slides use flex-shrink:0, width:calc(100%/3), aspect-ratio:.8, and images sized to width:100%.

Read at CSS-Tricks