Using Scroll-Driven Animations for Opposing Scroll Directions

animations Scroll Driven Animation Using Scroll-Driven Animations for Opposing Scroll Directions Silvestar Bistrović on Jun 22, 2026 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 . Not 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 in 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: