Webflow: Trying to implement horizontal sticky gallery. Please help :)

[TobiKopp]

Hi guys,

 

I'm trying to implement a horizontally scrolling gallery on my website in Webflow.

I want it to be sticky until the gallery reaches the end, and then the page to resume regular scrolling.

There are a number of youtube tutorials that I tried, but none worked.

 

I have to admit, although I have a tiny little bit of experience in simple coding, I am by no means a pro. In fact, quite the opposite.

After having tried to make this work for the last 5 hours, I think I can justify asking you guys

 

Youtube-Turorial: https://www.youtube.com/watch?v=_LWinkSulwU

The website I'm trying to build: https://tobias-kopp-fotografie.webflow.io/home-new-copy-scrolltrigger2

 

Would be so awesome if you could help. I bet it's some stupid minor detail that makes it not work at all. I tried to find that error so hard, whithout success ...

 

Cheers,

Tobi

[mvaneijgen]

Hi @TobiKopp welcome to the forum!

 

Instead of working directly in Webflow it is adviesed to just open up a play ground and start playing with your logic there. Then you don't have to worry about Webflow trowing errors or other stuff being annoying. Codepen is a great place for that!

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

So all your animation needs to do is move all your elements on the x axis the width of the element minus the current window width. With this knowledge try opening up a code pen below a pen that loads all the plugins, so you can just start playing around and see how far you can come. When you got the animation down adding to ScrollTrigger will be trivial and then porting it over to Webflow will also be a lot easier!

 

Hoop dat het lukt en veel geluk met je project! 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

 

[TobiKopp]

 

Thanks mvaneijgen and sorry for the late answer. It's my own website, so I will work on it only if I have the time, unfortunately.

 

Anyways, yes trying the whole thing in a sandbox makes sense. However, because I'm merely trying to copy the backend of the project in the Youtube video, the sandbox version already exists:

See the Pen PoxojaO?editors=0110 by snorkltv (@snorkltv) on CodePen

 

My problem is really implementing it to my site, which for some reason doesn't work.

 

I would really the so thankful if you guys could have a look at it!

Thanks in advance

[mvaneijgen]

If I take a quick glance at your live site I see you're loading locomotive scroll, which is not part of the sandbox demo you've shared. That is why you make a minimal demo of your current setup, you already have a start point, great, so start introducing all the parts of your live site to the demo, so you can easily see when things break. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

This is not something we normally do on this forum, but because you're new here I've forked the pen from our own @Carl you've shared and add locomotive scroll to it and indeed everything breaks! We can't support third party tools on this free forum, we like to scope questions to GSAP tools only. We do however have our own smooth scroll library aptly named ScrollSmoother, you'll see this works out of the box with all the GSAP tools, but is only available for our club members. So you'll have to ask your self "how much is smooth scrolling worth for my project?", are you going to spend your free time debugging locomotive scroll with ScrollTrigger or become a member? I know what I would choose, but I can't judge that for you. 

 

In the past there where some to topic about locomotive scroll and ScrollTrigger, but since we've created our own plugin the advice use that this will work out of the box and will be much easier. 

 

See the Pen poBgrxy?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[TobiKopp]

Thanks so much, again.

 

I'm really not a programmer, as I wrote, so I didn't realize different plugins will break if used together.

Thanks for pointing that out, especially because I realize this is a forum for programmers.

 

I will have a look into everything you wrote and come up with a decision of how to proceed