Need Help With Jitters on Old Mobiles

[blitzve0]

Hi, I have used smooth-scrollbar throughout my website and have implemented core functionality and animations using it, so it's really not possible for me to remove it for mobile devices even though it's recommended to not use it on large pages, but it's really important for me to use it on mobile as well for core gsap(animation library) functionality to work.

If you try to open this link on a slightly older phone (maybe 3-5 years old), the scroll will be very jittery and really laggy, you can test it
https://haspr.in/about

I want to know if there are some tools or any special tricks to still keep the scroller on the full page and maybe just increase fps slightly just a little bit. Thanks in Advance

[idiotWu]

1. Increase the damping value: it looks like you are reducing the damping value on mobile devices? The smaller the damping value, the more frames will be rendered, which may cause the performance to drop. I'd suggest you use a larger damping value on mobile devices if possible.
2. Reduce GSAP animation durations: some animations keep running even if the scrolling has already stopped (for seconds!). This issue is noticeable in your gelly scrolling effect. Consider reducing animation durations to avoid unnecessary interpolations.
3. Reducing motion is always the best choice 😆.

Another micro-optimization: instead of setting elem.style.transform = translate(0, 0) in every idle frame, try modifying it only when needed to avoid unnecessary operations.

@ehsan-shv do you have any good ideas because you are familiar with GSAP?

[blitzve0]

Hi, Thanks for the Tips, I have now changed damping from 0.065 to 0.1 on mobile and it definitely increased fps, I have decreased amount of gelly in mobile, and I'm getting better performance, thanks, i'll continue on improving performance

[ehsan-shv]

@idiotWu @blitzve0 Hey guys. Daofeng said some points to increase performance. You are using React so make sure that you kill the GSAP timeline on destroying the component(tl.kill()). It's a useful article about React and GSAP. Read it, it has some useful tips. But personally, I have chosen another process in some of my enterprise apps based on how some big studio designs doing. Maybe it's not a good idea but it is what it is. I disabled GSAP and smooth-scrollbar on mobile devices because of performance issues and make the app minimal and simple. If you check the TubikStudio and Cuberto you can see they have the same approach on mobile devices. You can also use pure js and Web API(requestAnimationFrame) to animate your app. It may decrease performance issues. Recently I've seen some websites that are using WebGL and Three.js to animate. It's more efficient than the old approach.

[blitzve0]

Yes I too feel that mobile devices are just not powerful enough for these animation, unless I don't test it on iPhones or Snapdragon 8 Series Androids, It is Laggy, I feel like i have to disable these on mobile

[blitzve0]

HI Everyone i finally by luck found the issue that was causing severe framedrops in the scroller on old devices.
I had a 3D GLB Model used with threeJS on my website homepage, and it was not getting removed from dom when using router. Yesterday I was playing around desperately and I removed the 3d model from dom on page exit, and surprisingly the stutter went away. I don't know what happened, I might have never debugged the issue if wasn't desperately trying everything out. 😭🤣🤣 thanks for the help guys, the above tips also helped a lot