Iphone Low power mode animation flicker issue on single hold scroll.

[codechirag]

Namaste Guys, I have worked with quite many projects using gsap and recently found a very annoying issue in an old project. It is flickering a lot only while on low power mode in Iphone. I am attaching the video here. Please if you guys have any clue help me out.

 

Here is the link of video https://www.loom.com/share/3d5d2721c3ab4c2a801dde2ee702d8ff

and here is the url of website : https://ovecare.com/

[Rodrigo]

Hi,

 

I tested on my iPad and yeah it doesn't look good at all. Maybe you're using normalizeScroll? Try disabling it and use ignoreMobileResize instead:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()#details

ScrollTrigger.config({ ignoreMobileResize: true });

Hopefully this helps.

Happy Tweening!

[GreenSock]

Just to be clear, GSAP doesn't change ANYTHING when a device is in low-power mode; the problem here is that iOS devices suddenly slow down JS execution (the frame rate in particular, like requestAnimationFrame()) significantly when in low-power mode. The device is doing that, and GSAP has no way of forcing it back to normal performance levels. It's not a limitation of GSAP; it's a browser-forced issue.

[codechirag]

7 hours ago, Rodrigo said:

I tested on my iPad and yeah it doesn't look good at all. Maybe you're using normalizeScroll? Try disabling it and use ignoreMobileResize instead:

Hey @Rodrigo Thanks. I have tried this but still the same. I doubt on what the @GreenSock is saying because, I have used gsap in many websites not all those are causing issue in the same scenario. i.e. https://solusent.com/

[codechirag]

Can anyone help in this please?

[Rodrigo]

Sorry but I don't really know what to tell you. I checked  the other link you shared and it works fine on battery saving mode, same as these links from our site:

https://gsap.com/

 

https://gsap.com/scroll/

 

There is something in this other site that is causing that but I'm afraid that without a minimal demo that clearly reproduces the problem there is not a lot we can do to help debugging this 😞

[codechirag]

hi @Rodrigo since I can't recognise the particular section which is causing issue I have added top  sections here. Your guidance is much needed. Thanks.
https://stackblitz.com/edit/vitejs-vite-bkssx8?file=src%2Fpages%2FHome%2Findex.jsx

 

[Rodrigo]

Sorry but we don't have the time resources to comb through an entire codebase trying to find potential issues and problems, and then start testing in order to see what/how can they be resolved, is beyond the scope of what we do in these free forums.

[codechirag]

@Rodrigo I have put only 3 sections not whole site because the issue was mostly visible in that area.

[codechirag]

Hey @Rodrigo, I have made minimal code here with single page and all gsap code is there only.
https://stackblitz.com/edit/vitejs-vite-bkssx8?file=src%2Fpages%2FHome%2Findex.jsx

 

[newguy123]

On 9/16/2024 at 8:21 PM, Rodrigo said:

Hi,

 

I tested on my iPad and yeah it doesn't look good at all. Maybe you're using normalizeScroll? Try disabling it and use ignoreMobileResize instead:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()#details

ScrollTrigger.config({ ignoreMobileResize: true });

Hopefully this helps.

Happy Tweening!

where do I put this in a react app?
can I stick it directly after registering plugins after importing it, like so?

gsap.registerPlugin(useGSAP, ScrollTrigger, ScrollToPlugin);
ScrollTrigger.config({ ignoreMobileResize: true });

?

[codechirag]

@newguy123 yes, it is correct.

[codechirag]

hey @Rodrigo, Finally I found the issue. It is happening due to use of

if (ScrollTrigger.isTouch === 1) {
   ScrollTrigger.normalizeScroll(true);
}

And I have used this for some other section and also I took this solution from the thread and solution by you only 

So, I found this recent issue solution but if I remove the normalize scroll then the jerk issue starts comming.

[Rodrigo]

To be clear, if you remove normalizeScroll the flicker goes away but a new issue appears, right?

 

Sorry but I really don't know what to tell you, this really sucks and sounds like no fun at all. Unfortunately iOS is really painful when it comes to scroll and there are issues that have been open for years now without any response from apple. Normalize Scroll is our best attempt to make things work as good as possible across all devices and browsers but unfortunately is not a silver bullet for every issue out there.

 

What I could recommend is to do some checking for low battery mode on iOS and create a different version of your code and animations in order to prevent UX issues:

https://stackoverflow.com/questions/46670150/low-power-mode-detection-in-javascript-for-ios11

 

Beyond suggesting that, honestly IDK what else can be done 😞