A small piece of JavaScript to run a scroll-driven animation only once.
Tag Archives: css
Animate between states with the View Transition API (2023.09.27 @ devs.gent)
Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not
Leverage Scroll-Driven Animations + a Space Toggle or State Query to selectively style an element based on it being scrollable or not.
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 …
Solved by CSS Scroll-Driven Animations: A :snapped selector
(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