Jump to content
Search Community

Remove GSAP ScrollSmoother on Touch Devices

Dennis Snellenberg test
Moderator Tag

Go to solution Solved by Dennis Snellenberg,

Recommended Posts

Is there any way to fully remove the GSAP ScrollSmoother Plugin from a website on touch devices? On mobile a part of the "smooth" effect is gone, but I like to have it removed completely. For example swiping down to refresh a page is not possible.

 

In LocomotiveScroll this behaviour is standard. On Mobile the user got the default experience.

  • Like 1
Link to comment
Share on other sites

  • Dennis Snellenberg changed the title to Remove GSAP ScrollSmoother on Touch Devices

The best way to go about it would (in my mind) be to only activate ScrollSmoother if you detect the kind of device you want to activate it for.

window.matchMedia usually is a good way to go with, checking for

@media (hover: none) and (pointer: coarse)

but maybe  you could have a go with the wheel event?

It totally depends on your use-case. Also there are a lot of fringe-cases like tablets with pens, or convertible laptops, and various implementations depending on os and hardware. 
That swiping down for refresh isn't possible seems strange to me, (which device are we talking) - but if should be possible to fix this, by simply reacting when the page is on top and pausing scrollTrigger, or changing some configuration detils. 

Link to comment
Share on other sites

Heya Dennis, thanks for being part of club GreenSock!

So, by default, ScrollSmoother doesn't apply scroll smoothing on touch-only devices (like phones) Just like locomotive. We do keep the 'effects' though, they're separated out from smooth scroll.

 

It would be helpful to see your setup to advise about what's going on and what you mean by 'fully remove' - I assume you've either set up wrapper divs in the HTML which won't be removed for you, or you have smoothTouch set to something other than false?

 

Take a look at this example - no smooth scrolling on mobile, pull to refresh working a ok.

 

https://cdpn.io/pen/debug/PoRQrap

 

Hope this helps you figure it out. Pop back with some code if not.

Link to comment
Share on other sites

@Cassie I see the "lerp" effect is not there on mobile. When I test on my iPhone with ScrollSmoother init, and without. It feels different. For example if you scroll to the top, or the bottom is won't stop/end the same as without ScrollSmoother, it stills smooths out this motion. 


I also tested the codepen you posted, and I don't have that problem there. So maybe it has something to do with my CSS.


Will edit if I know the problem.

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...