Using Scroll-Driven Animations for Opposing Scroll Directions

Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving in opposite directions when a user scrolls the page. CodePen Embed Fallback Note: This demo respects reduced motion settings, so you’ll need to enable motion to see the effect. And we’re looking at Chrome and Safari support as I’m writing this. It’s really not as hard as you might think, thanks to modern CSS features, specifically scroll-driven animations . Mot only that, but it’s fun to make, too! Let me show you how I approached it — and maybe you will want to share how you would do it differently. The HTML The HTML consists of a parent element ( .opposing-columns ), its children ( .opposing-column ), and its children’s children ( .opposing-item ): This is all we need in the markup. CSS will do the rest! Styling the parent container First off, we’re going to set things up so that this effect only applies to larger screens — there’s no real sense supporting something like this on smaller screens because we need the additional space for the effect. /* Just on larger screens */ @media screen and (width >= 50rem) { .opposing-columns { display: flex; gap: 2rem; max-inline-size: min(90dvi, 50rem); margin-inline: auto; } } Setting up a “masking” effect We need to do a few more things with the parent container to get the illusion that items in each .opposing-column are disappearing as they scroll pas