Scroll Trigger doesn't work with properly with smooth scrollbar

[canberkaslan98]

Hello dear members,

I've been trying to use smooth scrollbar with scroll trigger, 

So basicly, I'm trying to pin a paragraph then animate it but even though I am using scrollerProxy function properly,

instead of using translate3d function, scroll trigger uses position: fixed, and since position: fixed doesnt work with smooth scrollbar

the whole section dissappears.

Is there any way to fix this? (I honestly couldn't understand what I'm doing wrong,  scrollTrigger uses translate3d in this pen, but it uses position: fixed on my code, what is wrong here? I copied scrolltrigger's cdn link from downloads section a couple of hours ago so I believe that it is up to date.)

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

[akapowl]

 

Hey @canberkaslan98 - welcome to the forums  

 

It is close to impossible to say what could be causing your issues, without having any chance to take a look at your code.

 

Please try and create a minimal demo codepen of what you are experiencing if you want further assistance on this.

[canberkaslan98]

hello,

here is the demo ( if you scroll slowly when you enter the section2, all content dissappears )

 

See the Pen ExydKOE by canberk-aslan (@canberk-aslan) on CodePen

[akapowl]

 

Well, I am not 100% sure, but I think this is related to using smooth-scrollbar on the body element itself.

Not that it is directly related to GSAP's ScrollTrigger, but idiotwu, the creator of smooth-scrollbar, himself advises on not doing so.

 

Edit:

I've gotta correct myself on this.

I thought, I remembered reading this in one of the issues of smooth-scrollbar over on Github, but actually the context was a whole different with what the creator said - and document.body is even set as the scroll element throughout the whole documentation.

Anyways, it appears that setting up a dedicated scroller-container for this definitely works better, than using the body as the scroller.

 

 

The best would be to use that wrapping div you have there anyway as the scroller and adjust your code accordingly.

With additionaly setting that element's height to 100vh, it works as it should.

 

See the Pen 27e92613c55fc6c31f06e62da81bc2ed by akapowl (@akapowl) on CodePen

 

 

Edit 2:

I remembered having issues with this, but after a bit of testing, it now seems, that a setup with the body as the scroller seems to be working just fine, too. But only when explicitely setting document.body as the scroller and pinType: 'transform'  for ScrollTriggers that use pins.

 

See the Pen 8df8b09dcc8e88b1f45f1d777c2e0425 by akapowl (@akapowl) on CodePen

[canberkaslan98]

oh thank you so so much, this fixed the issue!!! You are the best!

[GreenSock]

Nice job, @akapowl 🙌