Jump to content
Search Community

Disable ScrollSmoother in mobile

Umberto test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

I would definitely avoid loading="lazy" on your images - that prevents them from loading (off-screen) until you scroll down far enough, but then when they load they shift the layout around which can affect the scroll positions, etc. If you insist on using loading="lazy", you should certainly call ScrollTrigger.refresh() whenever the layout shifts due to a new image loading and getting rendered. 

 

Also, by default ScrollSmoother automatically disables smoothing on touch devices. 

Link to comment
Share on other sites

8 hours ago, GreenSock said:

I would definitely avoid loading="lazy" on your images - that prevents them from loading (off-screen) until you scroll down far enough, but then when they load they shift the layout around which can affect the scroll positions, etc. If you insist on using loading="lazy", you should certainly call ScrollTrigger.refresh() whenever the layout shifts due to a new image loading and getting rendered. 

 

Also, by default ScrollSmoother automatically disables smoothing on touch devices. 

 

I tried to get rid of loading = "lazy", but it keeps giving me the same problem, even with different animations.

What can I do?

 

Thanks

Link to comment
Share on other sites

Hi there!


Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

Link to comment
Share on other sites

  • Solution

Hi,

 

The issue is that you create the animations and when you go through the breakpoint those are never properly reverted. I'd recommend you to use Match Media for all your different scenarios in order to have a better control.

 

This seems to work:

const mm = gsap.matchMedia();

let smoother;

const createFadeTweens = () => {
  const fadescroll = gsap.utils.toArray(".js-fade-scroll-1");
  fadescroll.forEach((elem) => {
    /* Timeline & ScrollTrigger Instances Here */
  });

  const fadeImage = gsap.utils.toArray(".js-fade-scroll-2");
  fadeImage.forEach((image) => {
    /* Timeline & ScrollTrigger Instances Here */
  });
};

mm.add("(min-width: 800px)", () => {
  let skewSetter = gsap.quickTo(".js-skew", "skewY"), // fast
    clamp = gsap.utils.clamp(-20, 20); // don't let the skew go beyond 20 degrees.

  smoother = ScrollSmoother.create({
    wrapper: "#smooth-wrapper",
    content: "#smooth-content",
    smooth: 2,
    normalizeScroll: true,
    ignoreMobileResize: true,
    effects: true,
    onUpdate: (self) => skewSetter(clamp(self.getVelocity() / -150)),
    onStop: () => skewSetter(0)
  });
  
  createFadeTweens();

  return () => smoother.kill();
});

mm.add("(max-width: 799px)", () => {
  createFadeTweens();
});

Here  is a live example:

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

 

Happy Tweening!

  • Like 3
Link to comment
Share on other sites

21 minutes ago, Umberto said:

Also I wanted to know if it is possible to disable only the Effects instead of all ScrollSmother.

Hi,

 

I'm not sure about this. My best guess is that because the way ScrollSmoother works is rather difficult because the plugin actually is tweening an entire container element in order to create the animations based on the effects being passed. Still I'll ping @GreenSock so he can shed some light on this subject.

 

Happy Tweening!

Link to comment
Share on other sites

You mean you want to create the effects initially, but then later you want to kill them? If so, I suppose you could: 

smoother.effects().forEach(trigger => trigger.kill());

Or set certain ones back to normal, as the docs say: 

// remove effects by setting back to defaults
smoother.effects(".box", {speed: 1, lag: 0});

 

  • Like 2
Link to comment
Share on other sites

Both solutions are perfect, only if I add

smoother.effects (). forEach (trigger => trigger.kill ());

 

const createFadeTweens = () => {
  .....
  };

  mm.add("(min-width: 800px)", () => {
     let skewSetter = gsap.quickTo(".js-skew", "skewY"), // fast
       clamp = gsap.utils.clamp(-20, 20); // don't let the skew go beyond 20 degrees.

     smoother = ScrollSmoother.create({
       wrapper: "#smooth-wrapper",
       content: "#smooth-content",
       smooth: 2,
       normalizeScroll: true,
       ignoreMobileResize: true,
       effects: true,
       onUpdate: (self) => skewSetter(clamp(self.getVelocity() / -150)),
       onStop: () => skewSetter(0)
     });

      createFadeTweens();
      ScrollHoriz();

      /*return () => smoother.kill();*/

     
   });

   mm.add("(max-width: 799px)", () => {
     createFadeTweens();
      smoother.effects().forEach(trigger => trigger.kill());
   });

disables not only effects but also
 

smoother = ScrollSmoother.create({
       ....
       smooth: 2,
       ....
     });

 

In practice we have the exact same solution with:

return () => smoother.kill ();

 

Is it possible not to delete the "smooth: 2" option?

 

Thanks

Link to comment
Share on other sites

All my animations, at the moment, work perfectly, only by inserting

 

smoother.effects (). forEach (trigger => trigger.kill ());

or

return () => smoother.kill ();

the Counter no longer works.


When I load the page everything is ok, but if I resize the layout, the numbers after the comma are no longer displayed.

 

See the Pen ExREwjx by umberto (@umberto) on CodePen

 

Thanks

Link to comment
Share on other sites

Hi,

 

Did you managed to fix this?

 

I tried your last codepen example and as I resize the screen, the numbers with the commas in them are displayed all the time. In fact if I resize as the number animation is happening everything is working as expected.

 

Maybe I'm missing something or just not understanding you correctly.

 

Happy Tweening!

Link to comment
Share on other sites

That's because you're altering the textContent directly inside of an onUpdate, but you never revert those values when the matchMedia() doesn't match anymore. You need to do proper cleanup. You can use the cleanup function that you can return from inside the matchMedia(): 

See the Pen NWzzgqE?editors=1010 by GreenSock (@GreenSock) on CodePen

 

You don't need to manually loop through all those effects and kill them either. It looks like you just want to kill the ScrollSmoother (which of course would kill those effects too). 

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

On 11/27/2022 at 12:27 AM, GreenSock said:

That's because you're altering the textContent directly inside of an onUpdate, but you never revert those values when the matchMedia() doesn't match anymore. You need to do proper cleanup. You can use the cleanup function that you can return from inside the matchMedia(): 

 

 

 

You don't need to manually loop through all those effects and kill them either. It looks like you just want to kill the ScrollSmoother (which of course would kill those effects too). 

 

Does that help? 

 

 

This is perfect.

 

What I intended to do is just make all animations work, and just get rid of data-speed and data-lag.

But this can be fine.

 

Thanks

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...