Horizontal Scrolling Issues with ScrollTrigger

[Archetype]

Hi everyone

 

I'm having some issues with scrolling horizontally using ScrollTrigger.

 

Firstly we have one very wide section which we want to scroll and it's working fine however there's a large space towards the end, not sure where that's coming from.

 

Secondly we have elements in the wide section which we want moving slowly to give a parallax effect (see bottom white box) however what's happening is that the box moves once the scrolling stops instead of moving with the scroll. We also want the box to move only when it's in view.

 

Note: We have dragging setup in the main project so a user can drag horizontally however I haven't put that in the codepen.

 

Can anyone point me in the right direction?

See the Pen XWeerLZ by umarsheikh13 (@umarsheikh13) on CodePen

[Archetype]

I think I've figured it out. Scrub should be set to "true" and the container should have the exact width size of the contents otherwise it will display the extra space towards the end.

[OSUblake]

6 hours ago, Archetype said:

Note: We have dragging setup in the main project so a user can drag horizontally however I haven't put that in the codepen.

 

Can anyone point me in the right direction?

 

Here are some threads that might show you the way...