11 min read
CSS Scroll-Driven Animations: 6 Patterns I Ship in 2026
CSS scroll-driven animations in 2026: 6 copy-paste patterns using animation-timeline scroll() and view(), zero JavaScript.
The Lab · Written in the open · Tagged animation
Working notes from the studio. The tools I build, the workflows I keep, the mistakes I paid for.
4 entries · latest 2026-05-27
Latest entry
interpolate-size and calc-size finally let a panel transition to height auto with no measuring script. transition-behavior allow-discrete plus @starting-style animates elements both into and out of display none. ::details-content turns the native details element into a smooth disclosure with zero...
Read the entry
Latest entry · Design
All entries · animation
11 min read
CSS scroll-driven animations in 2026: 6 copy-paste patterns using animation-timeline scroll() and view(), zero JavaScript.
9 min read
Same-document transitions wrap state changes like filter chips and tab switches in a single startViewTransition call.
2 min read
Radar sweeps, HUD effects, floating labels. All pure CSS, zero dependencies, 60fps.