Scrollsmoother matchMedia console log error

[Andrey75]

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

[Rodrigo]

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!

[Andrey75]

Thank you! This works great. I saw my mistake.

[Andrey75]

It seems to work fine on desktop, but doesn't work on mobile. 

"smoother.paused" doesn't work on mobile.

[Rodrigo]

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!

[GreenSock]

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)

[Andrey75]

Thanks for your support.