ScrollTrigger.scrollerProxy() with locomotive smooth, triggers move

[sonja]

Hello everyone,

I am relatively new to the topic of GSAP but have already grown very fond of it.

I have been trying to implement a horizontal pinned scroll with some divs scrolling vertically on top of it and got it to work:

See the Pen eYeoPdO by sonjara (@sonjara) on CodePen

So far, so good!

Sadly, as I tried to add a smooth scroll (I tried locomotive and smooth scrollbar) that didn't work at all:


It seems as if the trigger of my ".pinElem" moves as I am scrolling and my divs are too far down?
I have looked at a lot of forum entries, but so far I couldn't find a solution.

I would be very happy and grateful if someone could take the time to help me

Thank you!

See the Pen GROLBOb by sonjara (@sonjara) on CodePen

[OSUblake]

Welcome to the forums @sonja

 

You would need to set the scroller if you're using something like locomotive scroll.

 

Quote

scroller

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

I'd just set it with the defaults so you don't have to add that to every ScrollTrigger.

 

ScrollTrigger.defaults({
  scroller: ".smooth-scroll"
})

 

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

 

[sonja]

Thank you very much for your kind and very fast (!) response.

That did in fact fix the issue with the ".pinElem".

But if I set the default scroller, it seems as if the startTrigger on the top of my window gets stuck or delayed when scrolling?
Do you maybe have a guess what my mistake is here?

Thank you again for your help!
 

[OSUblake]

Not really. Locomotive scroll isn't a GSAP product so we don't officially support it over here. And to be honest, I've never used to I wouldn't even know where to start. It seems very finicky and sometimes fails to start up correctly. Like sometimes when I reload it and there's a huge scrollbar.

 

 

 

Maybe try another smooth scrolling library or the that's built on top of ScrollTrigger.

 

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

 

 

[sonja]

Hi again,

followed your advice and chose the option that's built on top of ScrollTrigger.
Changed some dependencies from % to vh and now it works just fine. 
Couldn't be happier:)

Thank you!