onEnter , onEnterBack scrolltrigger with overflow

[Jevermind]

Hi everyone, I have some trouble with my project.

I'm trying to mix Observer and Scrolltrigger. I have a body with overflow: hidden to disable the native scroll of HTML. I am using a manual scroll with a Scrolltrigger. But I'm facing a problem when it becomes the manual scroll. It doesn't run onEnter and onEnterBack then using Observer to snap back. How can I  make onEnter and onEnterBack run while keeping overflow: hidden in the body and the manual scroll? 



 

[mvaneijgen]

Hi @Jevermind welcome to the forum!

 

ScrollTrigger uses the normal scroll of the browser to do its magic, so disabling it is not something that is easily fixed again. You can set a different scrolling element as the ScrollTrigger, check the scroller property https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroller

 

That said, is this maybe what you're looking for? It is an Observer effect that takes the page over, until it is done and then the normal scrolling takes effect. 

 

Hope it helps and happy tweening! 

 

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

[Jevermind]

24 minutes ago, mvaneijgen said:

Hi @Jevermind welcome to the forum!

 

ScrollTrigger uses the normal scroll of the browser to do its magic, so disabling it is not something that is easily fixed again. You can set a different scrolling element as the ScrollTrigger, check the scroller property https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroller

 

That said, is this maybe what you're looking for? It is an Observer effect that takes the page over, until it is done and then the normal scrolling takes effect. 

 

Hope it helps and happy tweening! 

 

 

 

I think my demo is quite similar to this 

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

. the difference is I'm using Observer for 2 sections. Instead of returning to the native scroll of HTML like the example above. I want to return my custom scroll when I already disabled the native when the body has hidden overflow. 

You said I can set a different scrolling element as the ScrollTrigger. I don't get it

 

[mvaneijgen]

1 hour ago, Jevermind said:

. the difference is I'm using Observer for 2 sections. Instead of returning to the native scroll of HTML like the example above. I want to return my custom scroll when I already disabled the native when the body has hidden overflow. 

ScrollTrigger needs a native scrolling element to do its magic, so if you can I would not disable the scroll and use the demo above as a starting point.

 

If you don't want to body to scroll and need some other element to scroll, you can do that with  https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroller, but everything will be so much easier of leverage the native scroll.

[Jevermind]

8 hours ago, mvaneijgen said:

ScrollTrigger needs a native scrolling element to do its magic, so if you can I would not disable the scroll and use the demo above as a starting point.

 

If you don't want to body to scroll and need some other element to scroll, you can do that with  https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroller, but everything will be so much easier of leverage the native scroll.

Thanks for you solution