GSAP ScrollTrigger within container

[edstasy]

Hi,

 

I am trying to adjust the ScrollTrigger horizontal scrolling example. I do not want to have the window as the scrolling container, but my .wrapper instead. The project in the mentioned codepen works, but as you can see, the content is all bouncy and laggy (especially when viewed on Codepen itself). What am I doing wrong here?

 

Thanks!

See the Pen RwGyjBX by edskeizer (@edskeizer) on CodePen

[ZachSaucier]

Hey edstasy and welcome to the GreenSock forums.

 

What bouncy/laggy-ness are you referring to? What OS and browser are you on?

 

Most likely there's not much to be done as is because scrolling is done in a separate thread. You might be able to fix whatever buggy-ness you're seeing by using a smooth scrolling library but that has its own issues  

[edstasy]

Hi @ZachSaucier,

 

Thanks for your reply. I'm currently using Brave Browser on Mac OS X. When I open the CodePen in a separate tab, I can see glitches in positioning the sections, like so:

https://www.loom.com/share/e4c6d886db9c49c7923fca7971c01079

 

Maybe I am not using the right approach for this?

[ZachSaucier]

Yeah, Webkit on MacOS is significantly worse than other browsers or Webkit on Windows in that demo. You set it up correctly and ScrollTrigger is doing its job but apparently Webkit on MacOS has syncing issues in this situation.

 

I was able to dramatically improve (but not fix completely) the situation by hiding the x overflow of the .wrapper:

overflow-x: hidden;
overflow-y: auto;

As I said before, perhaps some method of smooth scrolling could work but finding a smooth scrolling library that works with a sub-container and not the whole page is a different question  

[akapowl]

Hey @edstasy

 

1 hour ago, ZachSaucier said:

As I said before, perhaps some method of smooth scrolling could work but finding a smooth scrolling library that works with a sub-container and not the whole page is a different question

 

If you were to consider using a smooth-scrolling library:

Smooth-Scrollbar does work with multiple instances on the same page.

See the bottom of this page for an example in a seperate container:

 

https://idiotwu.github.io/smooth-scrollbar/

 

Didn't try to hook multiple instances up with .scrollerProxy yet myself, but it should be doable, shouldn't it?

 

 

Edit:

Just to add up on this - I had noticed some issues with jittering when swiping on mobile in a different scroller than the body, once.

That was only the case though, when using native scrolling/swiping behaviour - with smooth-scrollbar I didn't notice any jittering whatsoever back then.

 

But since I wanted the native scrolling/swiping on mobile, the suggested solution back then was to set the pinType to 'fixed' (which is 'transform' by default in different scrollers than the body itself, if I am not mistaken). That worked pretty well for me  - but I don't know if it will help you with regard to your issue in the WebKit browser / on MacOS.

 

May be worth a shot, though.

Here is the thread from back then

 

 

[edstasy]

@ZachSaucier and @akapowl thanks for your suggestions!

 

I have managed to do it in another way, with a separate scroller. See the following CodePen:

See the Pen jOMKNwJ by edskeizer (@edskeizer) on CodePen

 

Probably, this is not exactly the way how it should be used. And clickable elements within the .background div do not work (yet).