Jittery animation on mobile phone

[AmanVerma]

Hi Everyone, I have been trying to create a scroll trigger animation that slides in numbers from the left, on scrolling . The issue is that on desktop it works smoothly, but on mobile it shows jittery effect, even after using 

ScrollTrigger.normalizeScroll(true);
ScrollTrigger.config({
  ignoreMobileResize: true,
});

as mentioned in the thread: 

after adding those two lines, the numbers slide in kind of smoothly into the frame and not jump into it, but the scrolling becomes extremely jittery. My phone screen has a refresh rate of 90hz, but for 60hz, it looks absolutely terrible
Since the project has not been hosted yet, I have added the link to videos in drive : videos link

I am using React CRA 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[AmanVerma]

I created a codepen for the issue and opened it on mobile phone, scrolls perfectly smoothly on it 

See the Pen OJqKadX by amanopia (@amanopia) on CodePen

I was using LenisScroll on my main project for smooth scrolling, but I disabled it, still i got the jittery effect. Could multiple scrollTriggers be causing this issue? 
Edit: 
I disabled all the other scroll triggers on the page and enabled just one, still it is jittery on the phone

 

[GreenSock]

Nah, it's very doubtful that having multiple ScrollTriggers would cause an issue. 

 

Are you absolutely positive you're using the latest version of GSAP/ScrollTrigger on the site? 

 

We can't really troubleshoot Lenis-related stuff because that's not a GreenSock product (ours is ScrollSmoother). 

 

I wonder if the jitter is due to some kind of filter effects you're using (some filters are extremely CPU-intensive for rendering which is totally unrelated to GSAP)

[AmanVerma]

"I wonder if the jitter is due to some kind of filter effects you're using (some filters are extremely CPU-intensive for rendering which is totally unrelated to GSAP"

I was using some canvases, 4 in total that create sine waves of different colors, when I commented them out from the code, it is working smooth as butter. Is there any way I can still include it and not have jitters? I mean it is quite intensive on the CPU, but the canvas element shouldn't be causing this since it works perfectly in codepen : 

See the Pen ExMeqqj by amanopia (@amanopia) on CodePen

Stripe has one on their homepage, right on the top, how does that work both on phone and desktop?!!?
 

[GreenSock]

We really try to keep these forums focused on GSAP-specific questions. Performance is a very deep topic. Just that color effect you linked to is running 4,900 function calls on every tick, and each of those functions is calling another 4 functions. And if you're doing that on 4 canvases, well, that's a LOT of calculations. Mobile device processors are much weaker than desktop ones. There are probably much more efficient ways to do what you're attempting there, but unfortunately I don't have the time to research that and build it for you. Maybe someone else has some ideas to share. 

 

Good luck!

[AmanVerma]

Its absolutely fine! You helped in identifying the error, I'll take it forward from here! Thank you so much for your help!

[GreenSock]

No problem! Happy to assist. If you discover a great fix for the canvas thing, feel free to post back here. 

[Rodrigo]

Hi,

 

In mobile you could create a video of the background gradient and use that, it should be far easier on the hardware, you just would have to consider loading time, so the shorter the better. At least that's what I'd try first.

 

Happy Tweening!