Andrey75 Posted December 16, 2022 Share Posted December 16, 2022 Hi. Help me please. If I use let mm = gsap.matchMedia(); mm.add("(min-width: 600px)", () => { if (ScrollTrigger.isTouch === 0) { let smoother = ScrollSmoother.create({ content: "#content", smooth: 1, ignoreMobileResize: true, effects: true }); } return () => { const wrapper = document.querySelector('.ScrollSmoother-wrapper'); wrapper.outerHTML = wrapper.innerHTML; } }); // menu button if (!$('body').hasClass('menu-open')) { smoother.paused(true); } else { smoother.paused(false); } $('body').toggleClass('menu-open'); // Error Uncaught TypeError: smoother is undefined Link to comment Share on other sites More sharing options...
Rodrigo Posted December 16, 2022 Share Posted December 16, 2022 Hi, You are creating the reference for the smoother inside the GSAP MatchMedia instance, so that doesn't exists outside that particular scope where the menu button event handler resides. Try this: let mm = gsap.matchMedia(), smoother; mm.add("(min-width: 600px)", () => { if (ScrollTrigger.isTouch === 0) { smoother = ScrollSmoother.create({ content: "#content", smooth: 1, ignoreMobileResize: true, effects: true }); } return () => { const wrapper = document.querySelector('.ScrollSmoother-wrapper'); wrapper.outerHTML = wrapper.innerHTML; } }); // menu button const menuBtn = document.getElementById("menuBtn"); menuBtn.addEventListener("click", () => { if (!$('body').hasClass('menu-open')) { smoother.paused(true); } else { smoother.paused(false); } $('body').toggleClass('menu-open'); }); If you keep having issues, please remember to include a minimal demo. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Andrey75 Posted December 16, 2022 Author Share Posted December 16, 2022 Thank you! This works great. I saw my mistake. Link to comment Share on other sites More sharing options...
Andrey75 Posted December 17, 2022 Author Share Posted December 17, 2022 It seems to work fine on desktop, but doesn't work on mobile. "smoother.paused" doesn't work on mobile. Link to comment Share on other sites More sharing options...
Rodrigo Posted December 17, 2022 Share Posted December 17, 2022 1 hour ago, Andrey75 said: It seems to work fine on desktop, but doesn't work on mobile. "smoother.paused" doesn't work on mobile. Hi, That's because of the breakpoint you're passing to GSAP MatchMedia: mm.add("(min-width: 600px)", () => { if (ScrollTrigger.isTouch === 0) { smoother = ScrollSmoother.create({ content: "#content", smooth: 1, ignoreMobileResize: true, effects: true }); } return () => { const wrapper = document.querySelector('.ScrollSmoother-wrapper'); wrapper.outerHTML = wrapper.innerHTML; } }); Basically you're telling GSAP to execute that code when the screen width is 600px or more. Anything below that that code is either not executed or completely reverted, so the ScrollSmoother instance doesn't exists in those screens. This boils down to what exactly you want to do in your setup. You actually want ScrollSmoother in every screen size? If you do, then That particular part of the code should be outside the MatchMedia callback. If you want ScrollSmoother only on large screens, then you can create a simple conditional logic in the click event: menuBtn.addEventListener("click", () => { if (!$('body').hasClass('menu-open')) { smoother && smoother.paused(true); } else { smoother && smoother.paused(false); } $('body').toggleClass('menu-open'); }); I'd recommend you to have a better look at the Match Media docs:https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Hopefully this clears things up. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted December 17, 2022 Share Posted December 17, 2022 One little thing to add: keep in mind that by default, ScrollSmoother doesn't apply any smoothing to touch devices. You can change that, of course, by setting smoothTouch: 2 (or whatever number you want) Link to comment Share on other sites More sharing options...
Andrey75 Posted December 18, 2022 Author Share Posted December 18, 2022 Thanks for your support. 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