Disable ScrollSmoother on Mobile?

[neontrenton]

Hello,

 

I'm using ScrollSmoother and it's working great, except for one small issue. With my mobile menu, I cannot "scroll" through it vertically when it's opened. This has something to do with ScrollSmoother. Is there an easy fix for this, or some way that I can disable ScrollSmoother on mobile so my menu works properly? Here's a link to my dev site.

[neontrenton]

Never mind, I found the .kill(); method and that works perfecly.

[Ulprus]

On 4/6/2022 at 4:02 AM, neontrenton said:

Never mind, I found the .kill(); method and that works perfecly.

 

Hi there! Could you please shed some light on how you achieved this? That would be great 🙏🏻

[Cassie]

You can pause the scrollsmoother - that's what I'd recommend

Just toggle the paused value when you open and close the modal

https://greensock.com/docs/v3/Plugins/ScrollSmoother/paused()

[Ulprus]

The issue I am having is that I am unable to pull down to refresh on mobiles while ScrollSmoother is enabled. I have found the following JS which does stop most of the ScrollSmoother:

window.onload = () => {
if (window.matchMedia('(max-width: 480px)').matches) {
window._mp_smoother.kill();
window.ScrollTrigger.killAll();
} else {}
}

However, I am still unable to refresh on mobile by pull-down.

 

Since I am using Motion.page, I am having to use JS externally.

[Rodrigo]

Hi,

 

I'd echo what Cassie is suggesting to pause the ScrollSmoother instance.

 

But if you need to just match a specific break point on the width, you should really take a look at GSAP MatchMedia, since it'll revert everything once you ass the provided breakpoint:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

If possible please create a minimal demo that illustrates your scenario in the simplest possible way. You can fork this codepen that has ScrollSmoother and every other GSAP Plugin in it:

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

 

Happy  Tweening!