Jevermind Posted November 9, 2023 Share Posted November 9, 2023 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? Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 9, 2023 Share Posted November 9, 2023 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 1 Link to comment Share on other sites More sharing options...
Jevermind Posted November 9, 2023 Author Share Posted November 9, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 9, 2023 Share Posted November 9, 2023 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. 2 Link to comment Share on other sites More sharing options...
Jevermind Posted November 9, 2023 Author Share Posted November 9, 2023 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now