Locomotive Scroll for horizontal sticky section

Hey Folks! I wondered if anyone had any experience using locomotive scroll? I’m trying to replicate sticky elements using locomotive scroll as per the website below.

Sticky sections are disabled through webflow using locomotive but there’s a workaround through attributes to enable it.

Any help would be incredible.

Thanks in advance.

Here is my public share link: https://preview.webflow.com/preview/digitalflo-233754?utm_medium=preview_link&utm_source=designer&utm_content=digitalflo-233754&preview=df103bb0f3e784949945355a95af4cca&workflow=preview

Hi Gareth,

It looks like you’ve figured this out and I’m currently fumbling through locomotive and gsap to try and do the same thing! Would you be able to provide some guidance on how you structured your website?

I currently have lomocotive running successfully, but I was under the impression GSAP was needed to be able to create a sticky horizontal section.

Best,

Bryce

bryce.travis, my apologies! I sent a message to you, but checking my Log in I noticed there was nothing in correspondence to your last message. Did you get it sorted?

If I’m honest, I’m still learning how to manipulate the page with locomotive. I do love how it adds that smoothness, not only to page scroll, but interactions if you can use it right.

This guy right here deserves the credit. Clever chap. Locomotive Scroll (Smooth Scrolling) in Webflow - YouTube His video I’ve watched about 50 times. Just trialling and testing how things respond. I think if I knew more coding it would be much easier. But he makes it so easy to follow that with a little elbow grease and persistence you start getting the hang of it.

I just replaced all the interactions I would normally do through locomotive. I think with sticky the element you want to stick gets the data-scroll-sticky treatment. The parent/main section of the sticky element you insert an ID in the settings of it. The ID is #sticky1 This worked for me although still difficult.

I did manage to recreate horizontal scroll through setting up the way I normally would then adding data-scroll-speed and giving it the direction I wanted. The main element holder I managed to stick with data-sticky.

Sorry again about the delay. These things can get really frustrating and took me days even to get at a starter level of learning locomotive. I think once you completely master it, it’s an amazing tool to add to certain projects. It offers a completely different dynamic and feel to a site. I’m just starting this project https://practice-project-69c0f2.webflow.io/ but without locomotive I would never have been able to rotate elements so smoothly.

Hope you master it all!

Cheers
Gareth.

If you could send a read only link of your project that would be amazing!