ScrollTrigger Jitter issue

[katjang]

Im fairly new to gsap, but i have a question about Scrolltrigger with the "scroller" attribute. I have an app with a horizontal scroller, but when i use the scroller attribute instead of the window, there is some jitter in the Y position of the scroller position, which is not present when i do not use the "scroller" attribute. Am I doing something wrong? The issue seems to be worse in firefox (but it can also happen in chrome)

 

Here a gif of the issue: https://gyazo.com/624a2a30cfe13d98e8c53875e59db636

See the Pen rNGMyoR by katjang (@katjang) on CodePen

[akapowl]

Welcome to the forums @katjang

 

I asked about this myself, a while ago.

 

This thread has a nice explanation by @GreenSock and a suggested workaround. Hope it'll help you, too.

 

 

 

[katjang]

Thank you for the quick response @akapowl, I did actually find that thread while searching for a potential solution! Using pinType: "fixed" breaks the scrolling however, and the other solution doesn't seem to do anything
ScrollTrigger.scrollerProxy("#scroller", {    pinType: "fixed" });

i've added it to the codepen but the issue still persists...

[akapowl]

I think in your demo the scrollerProxy will actually not do much, because you set it up after you created your ScrollTrigger.

 

When I set it up before creating the ScrollTrigger, the scroll will break (just like you mentioned it happening with setting pinType: "fixed" to the ScrollTrigger directly). That's the case because now you will have the "fixed" element obscuring the events. As I mentioned in a later post of that linked thread above, I had to set pointer-events to none for the container. If you can't simply just do that because you e.g. have elements inside, that need to be accessable, check out this thread, which has a neat workaround by @GreenSock for that and also a more thorough explanation for why it is happening in the first place.

 

 

Edit: ...or alternatively this thread

 

 

 

With the pointer-events just set to none and the order of ScrollTrigger & scrollerProxy changed, I already couldn't replicate the issue anymore, not even in Firefox.

 

See the Pen NWaRvdj by akapowl (@akapowl) on CodePen

 

[katjang]

I think pointer-events: none isn't an option for me, as i need hover and click events within the horizontal scrolling container.

The anticipatePin option also didnt seem to fix the issue, sadly.

 

I have already restructured things so that I do not need the "scroller" option anymore (back to default behaviour; scrolling on body). I thought that I really needed the scroller option, but it turns out I don't (yet?), hopefully im not forced to use the "scroller" option later in the project again!

 

(also i think that codepen on the first thread is broken? the animation doesn't tween sometimes)

 

Maybe a comment in the docs on the "scroller" attribute would be helpful about this (browser) issue!

 

Thank you for the assistance, very much appreciated!

 

[GreenSock]

If I understand correctly, the issue is that you're using a tween to update the "scroll" position but you're not telling ScrollTrigger to update its values immediately after you have the tween move the scroller. So just add this to your tween: 

onUpdate: ScrollTrigger.update,

 

[katjang]

onUpdate: ScrollTrigger.update,

I have added this to the the scrollTrigger and it does not solve the issue in the codepen (also tried it in the gsap.to options as I wasn't sure what the correct place was).

According to the other forum posts it is probably a browser issue, thread-related...

 

What I was trying to achieve was exactly this: 

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

 (not my codepen)

But with a custom "scroller" container, instead of scrolling on the body. This pen is what I based my codepen off of, it is almost identical except mine has a custom "scroller" container. This is when the issue occurs.

[GreenSock]

4 hours ago, katjang said:

I have added this to the the scrollTrigger and it does not solve the issue in the codepen (also tried it in the gsap.to options as I wasn't sure what the correct place was).

Yeah, in the tween itself, not the ScrollTrigger. It definitely helped when I looked at it in your CodePen. 

 

4 hours ago, katjang said:

According to the other forum posts it is probably a browser issue, thread-related...

 

Yep, scrolling is handled on a different thread, thus it's virtually impossible to make the visual updates all completely seamless unless you handle all the scrolling via JS which is possible - that's what smooth scrolling libraries do. It's what this ScrollTrigger-based helper function does too: 

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