Introducing scroll-driven-animations.style, a website I built to support the launch of Scroll-Driven Animations in Chrome 115.
Introducing scroll-driven-animations.style
Search results for: scroll-driven-animations
The Google Antigravity website, rebuilt with Modern CSS
As an experiment to see if Modern CSS is up to the task, I recreated the Google Antigravity website with Modern CSS.
Señors @ Scale: Modern CSS at Scale with Bramus
A while ago I joined Dan Neciu – whom I met at Frontmania in 2023 – on his “Señors @ Scale” podcast. We talked about all things CSS.
Combining Scroll-Driven Animations with @starting-style
How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …
Cranking View Transtions up to 11 (Safely, Maybe) (2025.06.12 – Middlesbrough Front End)
At Middlesbrough Front End 2025 I gave a talk about some of the more exotic applications of View Transitions
Scroll-Driven Animations with CSS (2025.05.30 @ JSHeroes)
The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident()
Uniquely name a bunch elements in CSS in one go! Instead of assigning 100 unique names through 100 declarations, write only 1 and use ident() to construct the names.
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.