Lag on mobile (iphone 6s) and tablet (Galaxy Tab A) when using scrollsmoother with normalize scroll

[Neolite]

Hello! Thank you very much for such an amazing library!

 

I've been using locomotive scroll for some time to achieve smooth scroll, but I had occasional performance issues when I would use power save mode on my laptop. So I decided to become a club member and use scrollsmoother.  After removing locomotive related code and updating JavaScript , website started to work perfectly on desktops, even on power save mode!

 

But unfortunately on my phone and tablet performance dropped drastically and way worse than used to be.

Address bar would show/hide sometimes despite setting normalize scroll to "true". After setting normalize scroll to "false", performance gets slightly better, but still very jumpy...

 

I would provide codepen demo but I am not sure what causing this behavior on phone and tablet and which part to isolate and put in codepen.

 

I really don't want to go back to using locomotive scroll, but it had better performance on mobile which doesn't make any sense. I am sure I am doing something wrong, but can't figure out what...

 

I would appreciate any help and advice!

 

this is demo

https://gsap-test-smoothscroll.netlify.app/

 

this is javascript snippet I use

 

 

// create the scrollSmoother before your scrollTriggers

let scroller = ScrollSmoother.create({

  wrapper: "#smooth-wrapper",

  content: "#smooth-content",

  normalizeScroll: true,

  ignoreMobileResize: true,

  smooth: 2.5,               // how long (in seconds) it takes to "catch up" to the native scroll position

  effects: true,           // looks for data-speed and data-lag attributes on elements

  smoothTouch: 0.3,        // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)

});

 

 

 

 

[Cassie]

Heya, thanks for being part of Club GreenSock.

So - Locomotive scroll actually doesn't do any smoothing on mobile - none at all. (Which is actually the better option UX wise)

My advice would also be not to use smooth scrolling on touch devices in general, it's often not necessary

normalizeScroll can help with some scroll animation bugs, but it can also hinder in other cases (it's experimental and our best attempt at getting round some IOS bugs)

 

First thing I'd try is to remove smoothTouch and normalizeScroll. Also, there were some fixes in the latest release too. 3.11.0.  so if you're not yet, then use the latest version, pop back and let us know how that's going for you.

 

Chat soon!

 

[Neolite]

Thank you so much for your response Cassie! 

 

I have been using latest release 3.11.0.

 

After removing normalizeScroll performance got slightly better, but still very jumpy and lags a lot.

 

Thank you for pointing out locomotive scroll, I am sorry for mistake. Locomotive scroll uses lerp and has option where you can enable "smooth"  for mobile and tablet devices.  But I don't know how does "lerp" work and how it gives feeling of smoothness when scrolling. 

 

Also, I was trying to reduce scroll speed and tried this code and it didn't work. I was wondering if there is a way to apply momentum based scrolling(inertial scrolling) using observer plugin or maybe scrollSmoother normalize scroll?

 

 

Observer.create({

  target: "#smooth-content",         // can be any element (selector text is fine)

  type: "touch, scroll",    // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer")

  scrollSpeed: 0.5

});

 

Thank you!

[GreenSock]

2 hours ago, Neolite said:

Also, I was trying to reduce scroll speed and tried this code and it didn't work. I was wondering if there is a way to apply momentum based scrolling(inertial scrolling) using observer plugin or maybe scrollSmoother normalize scroll?

If you want to get smoothing, then ScrollSmoother is definitely the way to go. Technically you might be able to write enough custom code to attempt something like that with Observer, but it wouldn't be easy. 

 

I think Cassie meant to just skip ScrollSmoothing completely on mobile, like: 

if (ScrollTrigger.isTouch !== 1) {
  ScrollSmoother.create({...});
}