I have used a timeline animation combined with to(), fromTo() it is occurring issue in IOS only.

[codechirag]

I  have used  gsap  time line in  my  project but It  is not working  proper in  Iphone only, rest works proper  in android  and  desktop.  need help.

https://stackblitz-starters-kunktk.stackblitz.io

[GSAP Helper]

We'd love to help, but vague details like 'it is not working proper' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

 

Also, this looks odd to me: 

filter: 'blur(250px)'

Filters are extremely expensive for the browser to render. That's totally unrelated to GSAP. So a huge blur like that looks problematic to me rendering-wise. Just be careful. Does everything work as expected if you remove the filter animations? 

 

Lastly, please link to the editable project, not just the preview. Like: 

https://stackblitz.com/edit/stackblitz-starters-kunktk?file=src%2FApp.tsx 

[codechirag]

On 1/23/2024 at 11:58 PM, GSAP Helper said:

We'd love to help, but vague details like 'it is not working proper' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

 

Also, this looks odd to me: 

filter: 'blur(250px)'

Filters are extremely expensive for the browser to render. That's totally unrelated to GSAP. So a huge blur like that looks problematic to me rendering-wise. Just be careful. Does everything work as expected if you remove the filter animations? 

 

Lastly, please link to the editable project, not just the preview. Like: 

https://stackblitz.com/edit/stackblitz-starters-kunktk?file=src%2FApp.tsx 

 

Here is the stackbiz editable  link
https://stackblitz.com/edit/stackblitz-starters-kunktk?file=src%2FApp.tsx

 

I have sent you my project link in message. Here  is  the video  link  of the exact problem.

https://jmp.sh/6HXxxOgj

[Rodrigo]

Hi,

 

Once again you're not giving us a clear description of the problem, sorry. 

 

I tested this on an iPad running iOS 17.2 and I'm getting the exact same result on the latest Chrome and Safari that I get on the browser on my desktop. Maybe I'm missing something here 🤷‍♂️

 

Happy Tweening!

[codechirag]

3 hours ago, Rodrigo said:

Hi,

 

Once again you're not giving us a clear description of the problem, sorry. 

 

I tested this on an iPad running iOS 17.2 and I'm getting the exact same result on the latest Chrome and Safari that I get on the browser on my desktop. Maybe I'm missing something here 🤷‍♂️

 

Happy Tweening!

please check  this url which has exact  animation there which I have shown in video, https://demo.solusent.com/

[GreenSock]

If you want help, @codechirag, please be very specific about what EXACTLY you mean by "It  is not working  proper". I have no idea what you mean, sorry. The video didn't help much. 

 

Also,

1. Why are you creating multiple gsap.matchMedia() objects? You only need one. 
2. Did you realize you've got an overlap of 1 pixel on your queries? max-width: 1024px and min-width: 1024px would BOTH match when the viewport is 1024px. 
3. Why are you animating from display: "none"? 
4. As mentioned earlier, be very careful about filter: 'blur(200px)' - browsers have a very hard time rendering blurs, especially extreme ones like that. 
5. You cannot set an ease on a timeline. Perhaps you meant defaults: { ease: "none" }?  Same goes for opacity. 
6. Your 7, 8, and 9 tweens are all going to exactly the same value which seems very strange and useless to me. 
7. You're animating '.anim-text spatailwindcssn' infinitely, but there are no such elements. There are several warnings in the console indicating you're using invalid targets. 

In short, please provide more details about exactly what you think the problem is, otherwise we won't be able to help. 

[codechirag]

10 hours ago, GreenSock said:

If you want help, @codechirag, please be very specific about what EXACTLY you mean by "It  is not working  proper". I have no idea what you mean, sorry. The video didn't help much. 

 

Also,

1. Why are you creating multiple gsap.matchMedia() objects? You only need one. 
2. Did you realize you've got an overlap of 1 pixel on your queries? max-width: 1024px and min-width: 1024px would BOTH match when the viewport is 1024px. 
3. Why are you animating from display: "none"? 
4. As mentioned earlier, be very careful about filter: 'blur(200px)' - browsers have a very hard time rendering blurs, especially extreme ones like that. 
5. You cannot set an ease on a timeline. Perhaps you meant defaults: { ease: "none" }?  Same goes for opacity. 
6. Your 7, 8, and 9 tweens are all going to exactly the same value which seems very strange and useless to me. 
7. You're animating '.anim-text spatailwindcssn' infinitely, but there are no such elements. There are several warnings in the console indicating you're using invalid targets. 

In short, please provide more details about exactly what you think the problem is, otherwise we won't be able to help. 

Hi @GreenSock,  thanks  for your response and sorry for improper explanation. I  have removed unnecessary things as  you said  and I have shared a video link  of the hero section flickering  animation in  iPhone 13  pro  max. 

 

here is  the link  https://demo.solusent.com/

 

here  is  the video of flickering https://jmp.sh/6HXxxOgj

 

and I have  refined the gsap code here. https://stackblitz.com/edit/stackblitz-starters-kunktk?file=src%2FApp.tsx

[Rodrigo]

Hi,

 

I just tested on my iPad again and I'm not seeing any issues neither on Chrome nor Safari.

 

The one thing I could suggest is to add will-change: transform to the elements that are moving:

.devList div {
  border: 1px solid;
  margin-bottom: 10px;
  padding: 5px;
  max-width: 200px;
  margin: 14px auto 0;
  min-height: 47px;
  /* ADD THIS */
  will-change: transform;
}

Beyond that honestly IDK what to tell you. This seems like a very specific rendering issue rather than a GSAP related problem.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

I'm not seeing problems either on my iPhone. Did you try removing the blur filter just to see if that resolves things? My suspicion is that your phone is just really struggling to render that blur filter (totally unrelated to GSAP). 

[codechirag]

7 hours ago, GreenSock said:

Did you try removing the blur filter just to see if that resolves things? My suspicion is that your phone is just really struggling to render that blur filter (totally unrelated to GSAP). 

I have tested removing  blur but still same and also I have tested in 3-4  devices iphone 13pro max,  iphone 14pro  max, iphone xr, iphone 11 etc.. Don't find any  clue.

16 hours ago, Rodrigo said:

Hi,

 

I just tested on my iPad again and I'm not seeing any issues neither on Chrome nor Safari.

 

The one thing I could suggest is to add will-change: transform to the elements that are moving:

 

I have added that also but still the  flickering issue is  there.

[codechirag]

I got solution the animation of type writer text was occurring issue it needed will-change property also. Now it is working fine. Thanks everyone  for  your efforts.