ScrollSmoother & matchMedia

[Marc Storch]

Hi,

I am trying to create a desktop only smooth scroll enabled website.

Everything works as expected. The only problem is the construction/deconstruction of smoothscroll when resizing the window (below 768px and back).

Scrolling the website suddenly stops working.

 

I don't know what I am doing wrong.

 

Thanks in advance!

See the Pen zYQEzKq by Marc-Storch (@Marc-Storch) on CodePen

[Rodrigo]

Hi @Marc Storch and welcome to the GSAP Forums!

 

I fiddled with your demo for a bit and can't seem to replicate the issue, the only  thing I did notice is your HTML structure and your ScrollSmoother config object. By default ScrollSmoother will look for this HTML structure:

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!--- ALL YOUR CONTENT HERE --->
  </div>
</div>

But yours is like this:

<div class="page">
  <!-- CONTENT HERE -->
</div>

So you need to set a content target in your ScrollSmoother config:

ScrollSmoother.create({
  smooth: 1,
  effects: true,
  smoothTouch: 0.1,
  content: ".page",
});

Here is a fork of your demo:

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

 

Finally there is no need for this in the return callback of GSAP MatchMedia:

mm.add("(min-width: 768px)", () => {

  ScrollSmoother.create({
    smooth: 1,
    effects: true,
    smoothTouch: 0.1,
  });

  return () => {
    const smooth = ScrollSmoother.get();
    if(smooth) ScrollSmoother.get().kill();
  };
});

Since GSAP MatchMedia is a wrapper for a GSAP Context instance, so it'll pick all the GSAP instances inside and revert them automatically for you when the breakpoint is passed.

 

Hopefully this helps.

Happy Tweening!

[Marc Storch]

That did the job. Thanks Rodrigo!