Leverage Scroll-Driven Animations + a Space Toggle or State Query to selectively style an element based on it being scrollable or not.
Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not
Tag Archives: css
Scroll-Driven Animations Debugger (DevTools Extension)
CSS @property improvements in Chrome DevTools (Chrome 118)
Chrome DevTools included with Chrome 118 has some nice improvements to working with @property.
A quick introduction to CSS @scope
Scroll-Driven Animations and View Transitions (2023.06.09 @ CSS Day)
Style Recalculation Secrets They Don’t Want You To Know | Patrick Brosset | CSS Day 2023
This talk by Patrick Brosset is one of my favorite talks from this year’s CSS Day Conference. How do browsers actually recalculate styles when webpages change? Can the way you write CSS impact the speed of the recalculation process? In this talk, we’ll go through the details of how browser engines react to DOM changes …
Faking a :snapped selector with Scroll-Driven Animations
(Ab)using Scroll-Driven Animations to apply styles on elements that are snapped within their scroll-snapping enabled ancestor scroller.
Synchronize videos, 3D-models, etc. to Scroll-Driven Animations
With a little bit of JavaScript, you can control 3D models and videos using Scroll-Driven Animations
How Blink invalidates styles when :has() in use?
Great post on style invalidation in Blink, written by Byungwoo who implemented :has() in Blink.
Creating Scroll-Triggered Animations by combining Scroll-Driven Animations, Custom Properties, Style Queries, and Transitions
When you combine Scroll-Driven Animations with Custom Properties, Style Queries, and Transitions you hack your way into creating Scroll-Triggered Animations.