Jump to content
Search Community

Lag when Horizontal Scroll with GSAP Scroll-Trigger

blizve0 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...