Jump to content

Rejown Ahmed Zisan

GSAP Animation on Scroll Breaks on Safari Browser

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.