How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …
Combining Scroll-Driven Animations with @starting-style
Tag Archives: scroll-driven animations
Combining Scroll-Driven Animations with
Scroll-Driven Animations with CSS (2025.05.30 @ JSHeroes)
Scroll-Driven View Transitions – If View Transitions and Scroll-Driven Animations had a baby … (2024.12.10 @ Fronteers BE)
Re-imagine the web with Scroll-Driven Animations
Video from Chrome’s 2024 EOY campaign, highlighting Scroll-Driven Animations. I made sure the code snippets and animations that you see where Technically Correct™.
Scroll-driven animated card stack with scroll snap events
Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up.
By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value.
Feature detecting Scroll-Driven Animations with @supports: you want to check for animation-range too
CSS-only Custom Range Slider with Motion
Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)
Introducing “Unleash the Power of Scroll-Driven Animations”
I built a thing: a 10-part video course that teaches you all there is to know about scroll-driven animations with CSS or JavaScript.