Webflow Native CMS Horizontal Scroll - Cloneable Instructions

This video explains how to quickly get started with this Native CMS Horizontal Scroll Cloneable, and also how the interaction works exactly.
No custom code needed, everything works with native Webflow interactions 😎
I hope this helps you get started faster with your next Webflow project !
You can find the cloneable here :
pierredemontal...
And a some written explanation here :
pierredemontal...
If you don't have a Webflow account yet and you want to support my channel, consider using my affiliate link below to create your account :
webflow.grsm.i...
(I might get a commission from this, which would help me produce more content like this in the future !)

[@timdaff]

Using the second collection list as the scroll trigger is a great idea, thank you!

[@pierredemontalte]

My pleasure Tim, glad this helps !

[@parasshah195]

Thank you for the scroll offset element idea! That fixed my use case.

[@pierredemontalte]

Glad it helped ! 🙂

[@Josh-Yu]

great tutorial thanks for your work. i have a quesiton though -- my scroll animation is incredibly fast.
i followed your video. i even tried the cloneable. the scroll is still too fast.
even with the offset, as soon as i scroll to the horizontal section the animation is already taking place. any clue how to slow it down?

[@remiwmartel]

Very helpful and super clear explanations. Thanks for your work and hope to see future videos!

[@pierredemontalte]

Thanks a lot for your support Rémi !
Will definitely be posting more soon 😉

[@reaquino]

thank you for sharing your knowledge and skills. this was super helpful!

[@pierredemontalte]

My pleasure ! 🙂

[@evanjoyal9540]

Really smart idea!

[@pierredemontalte]

Thanks ! 😊

[@theShaamim]

that's Very helpful
Thanks

[@pierredemontalte]

Thanks Shaamim 😊

[@Hmdbln]

omg you saved my portfolio hah thanks!
i am wondering if you know how to center elements to viewport in that case? like i.e. cantering an item after a click trigger?

[@pierredemontalte]

Happy to hear it was useful for your portfolio !
As for the centering of specific elements on the click of a button, it is definitely possible but might require a bit of coding (at least to make it work with a CMS collection).
But the main idea would be to add an empty section inside of each vertical spacer of the scroll trigger, and have the buttons link to the vertical section matching the horizontal item you want to link.
That way, the link/button will make the page scroll down to the linked spacer section, triggering the horizontal scroll animation until it shows the corresponding item, centered in the viewport.