Notes on Reverse-Scrolling Columns With CSS Scroll-Timeline

Lemme do this one quick-hits style:

• Mary Lou published a quintessentially-Codrops-y demo called Alternate Column Scroll.
• The scrolling effect is powered by Locomotive Scroll, which we’ve coincidentally covered before.
• Bramus has been exploring native CSS scrolling effects using the future CSS Scroll-Timeline feature for a while now. He’s got a four-parter that digs deep into it, starting here.
• It’s early days for it, but @scroll-timeline is flagged in Chrome-land. Bramus has also shown us how incredibly useful this feature will be right here on CSS-Tricks, especially when combined with WAAPI.
• So, Bramus set out to re-build the scrolling aspects of the demo (the middle column scrolls naturally and the outer two columns scroll in reverse). Turns out you can polyfill it and sprinkle in some WAAPI to replicate it nicely. Cool.

CSS Scroll-Timeline with prefers-reduced-motion

The only thing I’d add is something to honor prefers-reduced-motion, as I could see this sort of scrolling motion affecting someone with motion sickness. To do that, you could combine tests in the same line the support test is being done in JavaScript:

if (
    !CSS.supports("animation-timeline: foo") && 
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   ) {
     // Do fancy stuff
}

I’m not 100% if it’s best to test for no-preference or the opposite of reduce. Either way, the trick in CSS is to wrap anything you’re going to do with @scroll-timeline and animation-timeline in an @supports test (in case you want to do something different otherwise) and then wrap that in a preference test:

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: works) {

      /* Do fancy stuff */
    }

}

Here’s a demo of that, with all the real credit to Bramus here for getting it going.

Ooo and ya know what? The CSS gets nicer should @when land as a feature:

@when supports(animation-timeline: works) and media(prefers-reduced-motion: no-preference) {

} @else {

}

---

Notes on Reverse-Scrolling Columns With CSS Scroll-Timeline originally published on CSS-Tricks. You should get the newsletter and become a supporter.