First Cloneable !

Finally made on my first cloneable, along with a quick helper video.
Very excited about this, and have many more ideas for other cloneables !

How does it work ?

The idea is to use the method of a vertical scroll-track (longer than viewport), a frame that is fixed to the viewport, and an inner horizontal strip.
But the problem with that method is that CMS collections might need some custom code to tweak the length of the scroll track depending on the number of items in the collection. So the idea is simple :
Instead of giving the scroll track a fixed height, I added a second collection list element in the scroll track, linked to the same collection. I call this collection my spacer collection, as it will make the scroll-track grow consistently with the number of items in the collection. The only important thing is to set a width value for the horizontal CMS items (100vw in my case), and a height value for the vertical CMS items (100vh in my case), so that both lists stay consistent in length, making the scroll animation smooth and perfectly timed, no matter how many items there are !
And it even works inside of a document flow, with regular sections before and after as well.

But what about touch screens ?

I added a simple line of javascript to detect if the user's browser has touch capabilities, in which case the spacer will be hidden, and the fixed frame will become static, with overflow: scroll, so that the user can now scroll the list horizontally with the touch screen, which is more natural.
This function was purposefully built based on touch capablities and not breakpoints, otherwise the horizontal scroll wouldn't work on desktop computer with smaller displays, and might also create issues on very large touch devices like the iPad (where it would feel weird to have to scroll up and down with your fingers to move the section horizontally).