Too much lag in iOS for scrolltrigger

[Albin Joseph]

Hey guys I have created a scrolltrigger animation for my website using GSAP. Everything is working fine except for in iOS. I have tried ScrollTrigger.normalise(true), force3D: false, will-change: translate  based on various answers from @Cassie and other possible fixes but still no luck. can you please suggest any changes. Also when I tried to use ScrollTrigger.normalize(true) the entire browser got messed up and scroll trigger animation were extensively flickering and not moving forward. 

https://www.aestriks.com/

 

 

 

See the Pen by (@) on CodePen.

[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 dependencies 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. ✅

[Rodrigo]

Hi,

 

ScrollTrigger doesn't have in it's API a normalize or normalise methods. Maybe you're looking for nomralizeScroll()?

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Hopefully this helps

Happy Tweening!

[Albin Joseph]

@Rodrigo Apologies. I meant to say nomralizeScroll(). When I tried using the function to get rid of iOS lags the entire screen started to flicker and everything fell apart. I am trying to replicate the code using stackblitz. So that I can share it here for more info. 

[Rodrigo]

5 minutes ago, Albin Joseph said:

@Rodrigo Apologies. I meant to say nomralizeScroll(). When I tried using the function to get rid of iOS lags the entire screen started to flicker and everything fell apart. I am trying to replicate the code using stackblitz. So that I can share it here for more info. 

No problemo, we'll be waiting for your demo so we can take a better look 👍

[Albin Joseph]

@Rodrigo can you please check out this code in stackblitz. https://stackblitz.com/edit/stackblitz-starters-xs1w1p

If you try running it in Safari you'll see how the  corners of the SVG gets pixelated as compared to when runnning in chrome and if you try it on iOS safari then the entire animation flickers and skips to the next part without the smooth transition effect as observed in the android chrome.

Please have a look and suggest some change. Thanks in advance.

[Rodrigo]

Hi,

 

A few things, first there is a lot going on in your demo. Masking regular HTML elements with SVG can be tricky, although I'm not aware how tricky that can be on safari.

 

Also you have this timeline method on the component, that should actually return the Timeline instance being created, right now is just creating it nothing more, so that Timeline is not reverted when you revert the GSAP Context instance. Another recommendation use our useGSAP hook instead, is far more convenient than doing all the cleanup by hand:

https://gsap.com/resources/React

 

Ideally you should either return the Timeline created on that method or wrap the method on a contextSafe instance in order to revert that Timeline when the component unmounts.

 

I tried opening the Stackblitz demo on Safari 18 but is not showing anything, maybe something related to the fact that the webcontainer tech (what Stackblitz uses for running everything on the browser) is still on beta, so there could be some issues. Same for iOS, there is no support from Stackblitz to run on any iOS browser at the moment, so I can't test that on my iPad. I opened the link you shared first and I can confirm that there is some noticeable lag on iOS on both chrome and safari, while on safari on macos, it looks fine. I can also confirm that on android on chrome and firefox there is some severe lag as well, this leads me to think that this is more related to what you're asking from the hardware more than anything else.

 

If I was you I'd isolate just the masking animation to begin with, take it from there and perhaps present a codepen with it so we can have a better look, because it seems that that particular animation is the one that seems to create the biggest issue. Most likely this is due to browser rendering bottleneck more than a code one.

 

You could have a look at this masking guide by @mvaneijgen in order to see if there is some advice there that could improve your performance:

 

I wish we had a 100% bullet proof solution for you, but as I mentioned this doesn't look like a GSAP related issue.

[Albin Joseph]

I have replicated the code using codepen with minimal implementations. I have added only the specific animation that's causing the issue. Please have a look because it still causing same issues as we have discussed above. 

See the Pen JjgQGgV by amous4822-the-animator (@amous4822-the-animator) on CodePen.

@Rodrigo

[mvaneijgen]

When using scale it it best to stay between 0 and 1 for the scale values. So instead of having to scale it from 12, make the element as big as you need it to be and than scale to 0.1 as you final scale value. As you can see in the demo below no GSAP code a just CSS scale to 10 which is blurry which is not something GSAP can fix. 

 

Hope it helps and happy tweening! 

 

See the Pen gOVNqqx?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[Albin Joseph]

Thanks @mvaneijgen can you suggest how can I increase the size of SVGs like these ? the viewbox values always mess up and how can I reduce that size using gsap ? Also were you able to troubleshoot the laggy scroll in iOS ? 

[Rodrigo]

Hi,

 

Maybe this guide Mitchel wrote on the subject of masking could help:

 

 

Happy Tweening!