Multi-Column Different-Speed Scrolling

The article demonstrates a CSS-based photo gallery where two columns scroll at different speeds, using Scroll-Driven Animations to create the effect. The left column scrolls at the normal page rate, while the right column moves faster via a directional transform tied to the root scroll timeline, with a padding offset of 80px for visual variation. The layout uses a two-column grid with a gap of 1.5rem, collapsing to a single column at a 500px breakpoint defined through a custom media query. The technique relies on the scroll() animation-timeline feature, wrapped in an @supports query so browsers lacking support simply fall back to standard scrolling. The effect is purely visual, preserving the scrollbar so users retain a sense of how much content remains. What to watch next is broader browser adoption of Scroll-Driven Animations, which determines whether this progressive-enhancement trick works without a fallback.