GSAP animation flashing and lagging in Safari 16

[Sundew]

Hi All,

I have used gsap animation with scrolltrigger and scrollsmooth plugin. I have noticed the animation on home page is very lagging and sometimes flashing in Safari 16. Please suggest some solution to fix this.

 

 

Thanks,

Sumit

[GreenSock]

Hi @Sundew. Sorry to hear about the trouble. That site is definitely performing very poorly and it looks like it's mostly due to repaint/compositing load (not GSAP). Performance is a very deep topic and unfortunately we don't have the resources to provide free performance audits and deep-dives into fixing the issues on live sites. I see four options: 

 

1.  Research how to fix your paint/composite problems. Perhaps you can resolve things on your own after you read up on it. 
2. Or you can try to isolate the issue in a simplified CodePen that you post here to see if anyone has ideas about how to resolve it. Again, it's just super difficult and time-consuming to try to fix things on a live web site. The problem could be related to CSS, markup, a 3rd party library, or many other factors. A simplified CodePen that isolates things as much as possible will GREATLY increase your chances of getting a good answer. Please don't include your whole project in a CodePen
3. Contact us if you'd like to hire us to help you. We can discuss pricing and scheduling privately.
4. Post in the "Jobs & Freelance" forum to see if you can hire someone else.

In my experience, I'd say 99.9% of the time, performance issues are completely unrelated to GSAP and are almost always related to graphics rendering in the browser. Steer clear of using CSS filters if you can. Masking can be expensive as well. Make use of will-change: transform wherever it makes sense. SVG can be expensive in some cases. It looks like you have a lot of media elements as well which can be expensive. 

 

Good luck! And thanks for being a Club GreenSock member! 💚

[Sundew]

Hi,

Thanks for your reply.

I have created Codepen demo and attached the purchased GSAP, ScrollTrigger, ScrollSmoother plugin link. The demo is working on Codepen but not in staging server. Can you please check and help me to understand what is wrong.

 

Thanks,

Sumit

[GSAP Helper]

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work on the live site' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid 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.

 

If it's working on CodePen but not on your live site, I would recommend slowly going through and making things match closer and closer between your CodePen and the live site. Something must be different that's causing the problem. Are you using the latest version of GSAP on both? Is your markup the same? Any CSS differences? 

 

Unfortunately we just don't have the resources to troubleshoot live web sites. There are way too many factors involved and it's not easy to make tweaks, etc.