Opposite scrolling columns

Design help General
1

Hey guys,

I found this blog, and I was wondering if it’s possible in Webflow, to build a layout where CMS items are scrolling in opposite directions?

My thought process until now:

  • Add option field in CMS collection to choose between columns 1-3
  • Split layout into three columns with 33.333% width
  • Add the same CMS to each column and filter by option 1-3
  • Add scroll interaction to achieve the desired scroll effect

However, if I only want to display 1-2 columns for smaller breakpoints, this implementation is not ideal.

Is there any other way to create this opposite-scroll layout in Webflow? Thanks in advance for your help!!!

2

Hi @Baruch_Pi,

Just thinking out load here…

Create vertical 3 column Grid Wrapper
Create a column content wrapper for each column
Create the interaction required targeting column’s 1 & 3 (scroll opposite).
On smaller breakpoints, adjust grid wrapper to 2 columns (column 3 will not show)
Then smaller breakpoint again, adjust grid wrapper to 1 column.

Haven’t tested it, just thinking about possible ways to approach.

Let us know how you end up approaching it.

All the best,
Keiran

3

Thank you @knk! It’s an excellent solution for static content. But how can I display a collection list without having the same content in each column?

4

Hey guys,

Quick update on this matter. I found this solution by @Cjh for the opposite scroll interaction. However, I have not found a way yet, how to make it work for dynamic CMS content. Any help is appreciated!!

Cheers,
Baruch