Lag when Horizontal Scroll with GSAP Scroll-Trigger

[blizve0 19 Likes (Newbie)]

Hi again, I am trying to implement Horizontal Scroll using GSAP Scroll Trigger 

Problem 1: The Scroll works fine while Vertically Scrolled but when I reach the Horizontal scroll section, suddenly the Scrolling becomes very Laggy.

Problem 2 : If you press Right Arrow Key or swipe left on mobile You'll be able to overscroll to white empty region on normal divs, how to fix that.

 

Quick UI Setup :

<>...

<div1 width 100vw height 100vh />

<div2 horizontalOne width 200vw (for horizontal scroll) height 100vh />

<div3 width 100vw height 100vh />

...</>

 

Sidenote : I'm using Smooth-Scrollbar as Scroller
Update ** Confusion : The Lag is not that much in this codepen miniviewer i don't know why
 

See the Pen oNeBRQJ by blitzve0 (@blitzve0) on CodePen

[GreenSock 18,885 Likes (Superhero)]

I'm not quite sure what you mean by "laggy" - do you just mean that it seems to take more scrolling to make it move horizontally? If so, all you need to do is adjust your "end" value. Currently, you've got this:

end: () => "+=" + scrollWidth,

So you can make it go twice as fast:

end: () => "+=" + (scrollWidth / 2),

(or whatever you want)

 

As for the right arrow key and swiping, that definitely sounds like issues with smooth-scrollbar. ScrollTrigger doesn't do any scroll-jacking at all; it only uses the native scroll technology. smooth-scrollbar is not a GreenSock product, so we can't support that - you may need to ask the author about the issues you're running into. 

 

Good luck with your project!

[blizve0 19 Likes (Newbie)]

For future visitors with same problem I found the solution

https://github.com/idiotWu/react-smooth-scrollbar/issues/15#issuecomment-335047892

 

Just realised it's not laggy on Windows, but on my machine (Pop OS Linux) in development , there horizontal scroll is laggy  as hell, maybe something to do with Linux. Anyways, Reducing Scroll Distance does seem to improve The Visual Smoothness, thanks.

 

Update : Yup just testing again on Pop OS, its definitely 3x more laggy here, I guess issues with the OS and Graphics Drivers