How to achieve Three.js 55-60 fps on mobile with great smooth experience

Questions
1

Hi guys, I hope you’re doing well.
Currently struggling since many days to achieve the next goal: having 55-60 fps on mobile on my three.js scene.
My stack is based on three (r3f) , gsap and lenis.

I observed great studios like unseen, immerssive etc do all the same trick on mobile to preserve high fps range: they use scrollerProxy, so they dont scroll trough native scroll but on a children element.
GSAP seems to create some fps drop on mobile ( recalculations of scrollTriggers).

Lenis and Gsap got two options to fix the fps drop, but none works well:

  • Lenis got syncTouch option, which kill scroll inertia and velocity sensation.
  • GSAP got ScrollTrigger.normalizeScroll(true) which create jittering and really bad experience on scroll.

The greats studio I mentioned before use those 2 tools, and it seems to me they dont use those two options syncTouch and ScrollTrigger.normalizeScroll(true).

If I observe this site by ex: https://qu.ai/ , they use gsap, three, and lenis, they do overflow: hidden on body and html to block mobile browser’s navbar to hide/show, and I guess they scroll trough a proxy : https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()/ like on this doc, to get better perf.

The site I sent https://qu.ai/ have “native scroll” feeling, so they dont use lenis’ syncTouch in my opinion, they dont have scroll jittering, so I guess they neither use normalizeScroll() from gsap.

Here my current setup : Next.js Starter - StackBlitz, I tried to sync lenis, gsap and three.js by refresing them all on the same RAF, it’s a little bit better then refresing each one on it’s own RAF.

I dont understand if it’s inherent to three.js, but in my opinion it’s a gsap + three.js problem, gsap seems to do something non stop while scrolls on mobile and so put down the perfs.

Another strange thing, and certainly the most strange I tried to screenrecord my current proto:


As you can see, while screen recording , my fps is non stop 55-60… without recording while scrolling it drops to 40-50 fps, and when finish scrolling it go back to 60fps…

Sorry the question is long, the topic is not 100% legit here, but tried on another platforms and wasnt able to find inputs/help for this one.
I guess it would be great to have here one way to achieve great and smooth three.js experiences on mobile by using industry standards ( three + gsap + lenis)

Hope my topic is not irrelevant, and wont bother you guys.
Thanks for your time and help! <3

2

Assumptions like that can lead to days of debugging of irrelevant code - before going into coding, verify which one is it.

Comment out GSAP functionality in your code - did the performance get better?
Comment out three.js in your code - did the performance get better?

In general - GSAP, three.js, and GSAP+three.js can easily run on mobile at 90-120fps, so the issue is more likely related to your custom code. Consider running your app in Chrome and checking Performance tab in devtools - record a timeline snapshot of ~10sec while using your app, select the snapshot in the list, click Bottom-up tab, and see what appears at the top of that list - these are the things that most likely cause the FPS loss.

2 Likes
3

Hi, tested my app on mobile chrome, and firefox, everything works perfectly.
The problem occurs only on IOS Safari.
Also tried by reducing a lot my app complexity to got only 9 drawcalls, and 2900 vertices,still got the problem on Safari IOS.
I guess it’s Safari + gsap problem.
Thaks for you time <3