Native CMS Horizontal Scroll

How to use this cloneable :

1. Clean Up

You should start by deleting the div with a class of .delete-me, and also removing the combo class of .bkg-gradient on the .horizontal-strip collection list. You can also delete the .inner-card inside the .horizontal-item element.
That will remove all the unnecessary styles and elements, leaving you only with a neutral structure.

2. CMS Structure & Layout

Rename and customize the CMS Collection by adding all the relevant fields that you will need (images, rich text, links, etc..).
Once your CMS is populated, you can start building your own layout directly inside the .horizontal-item collection item.
You can also change the styling of the .horizontal-item itself, but make sure to keep its width set to a fixed value. And if you change the width of the .horizontal-item, you should also adjust the height of the .vertical-spacer proportionally.

3. How does it work ?

A common problem with a CMS based horizontal scroll is that the scroll trigger needs to have a height proportional to the width of the horizontal strip. This means that any change in the number of collection items would also impact the animation, making it inconsistent, unless you adapt the scroll track height value every time you add/remove a CMS items, which isn't really convenient. While that can be easily fixed with custom code, I wanted to find a solution using only Webflow interactions.

I tried to solve this by using a second collection list (linked to the same collection), to act as a vertical spacer for the scroll trigger, which therefore doesn't need to have a set height and will grow based on the number of CMS items in the collection.
Each .horizontal-item has a fixed width of 100VW, while each .vertical-spacer has a fixed height 100VH, ensuring proportionality between both elements.
Just make sure that if you use any filters on the visible collection, you also apply the same filters to the spacer collection, so that the number of items stays consistent between the horizontal and the vertical collections.

4. What about touch screens ?

We simply need to remove the .scroll-trigger collection list, and change the flex-direction of the .horizontal-strip to vertical, so that the content now stacks vertically.
‍
But instead of using breakpoints to achieve that, I used a few lines of Javascript to detect wether the user's browser has a touch screen or not, so that it adapts better to larger touch screens, and smaller browser windows on desktops. But feel free to remove that code (which is before the </body> tag), and use breakpoints instead to set the scroll overflow on mobile devices if you prefer.