Jump to content
Search Community

Safari Clip-path not working during/after GSAP Flip animation

jramke test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts



i created a Gallery with a lightbox. Each image has a clippath wich is animated with gsap on mousemove or on the open/close transitions to get some sort of lerp movement effect.
To animate the position change of the images from grid to lightbox i used gsap.Flip animations. 


In chrome everything works fine but in safari the image is not visible when transitioning into the lightbox.

On my live site the image then is visible after the Flip animation which is not the case in the codepen.


I think this isnt directly related to GSAP and more likely because of the clip-path implementation from safari.

I already tried some things i read here in the forum like will-change: transform; , translate: transformZ(0); , adding a rect to the svg element or forcing the browser to rerender the element with setting the clippath during the onUpdate function, but i couldnt make it work.


Thanks for your time and help.

See the Pen gOQWaGM?editors=0100 by jramke (@jramke) on CodePen

Link to comment
Share on other sites



I can see the issue in Chrome and Safari on an iOS 16 device.


Unfortunately your example is far from being minimal and we don't have the time resources to go through complex codebases trying to figure what the problem is and where it could be.


This is a gross oversimplification that is working as expected on my device:

See the Pen yLGORYN by GreenSock (@GreenSock) on CodePen


So there has to be something else that is causing this. As I mentioned we don't have time to go through all your code and follow which part is doing what. If possible remove everything from your code (HTML/CSS/JS) that is not Flip related. Just create the simplest iteration that only uses Flip and nothing else.


Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hey thanks for your answer.
Yes that was a lot of code, my bad.


I simplified my codepen from above and i also forked your codepen and added the clippath to the image.

See the Pen poqbzMR?editors=0110 by jramke (@jramke) on CodePen

In both demos the image again dissapears during the flip animation in safari 16.6 and Chrome 116 works fine.

I also tried the things mentioned in this thread on the forked pen but nothing seems to work.


Link to comment
Share on other sites



So I took this to the top floor and the discovery is that is not a GSAP related issue. The problem lies in the fact that as soon as you add anything that creates a new stacking context such as a 3D transform or will-change: transform, Safari and Chrome (on the iOS devices we tested) don't render that anymore.


Check this example:

See the Pen mdaErQq by GreenSock (@GreenSock) on CodePen


As you can see there is absolutely no GSAP (or any other JS) code in it. In fact we're not even loading GSAP and/or any other GSAP Plugin. If you check the debug version (no iframes) on iOS Chrome and Safari, there is no image:



But as soon as you comment out the will-change: transform in line 11 of the CSS tag the image is rendered. Unfortunately we can't think of a way to force iOS browsers to render the image in these cases. If you find one we're all ears as we're constantly trying to solve this issues.


For now the solution would be to use a simplified approach (as the one in my previous post) for iOS devices and maybe devices in general. Sorry to be the bearer of this news.


Good luck with your project!

Happy Tweening!

  • Like 1
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.
  • Create New...