GSAP Animation on Scroll Breaks on Safari Browser

[Rejown Ahmed Zisan]

Hi, I am trying to animate two cards with GSAP on scroll. It works on all browsers except the Safari browser. The cards get through each other inside-out.  Please watch the video to see the issue clearly and visit this link to see the actual live animation: https://reach.app.

 

I couldn't find any solution online. I'd really appreciate if anyone is able to find the issue and give a solution

[Rodrigo]

Hi @Rejown Ahmed Zisan and welcome to the GreenSock forums!

 

I tested this on iOS Safari 16.x and it works fine. What particular version you're seeing this? Also are you 100% sure that this is not a browser specific CSS/rendering problem? Does this happens if you completely remove GSAP from your app?

 

Have you tried perhaps using backface visibility hidden for the cards. I have no idea if this will work, just throwing ideas out there.

 

Finally we can't do much on a live site, please create a minimal demo that clearly illustrates the problem. Don't include your entire project just the part that is not working.

 

Happy Tweening!