Have issue on svg clipPath animation

[Danile Yu]

This works perfectly except on Safari. What happened here? Thank you.

 

P.S. The issue on safari is laggy and the animation stopped

 

🤨

 

See the Pen bGjBRLv by yoz0713 (@yoz0713) on CodePen

[GreenSock]

That actually has nothing to do with GSAP - you can open Dev Tools and see that the values are changing exactly as they should. The problem is that Safari has quite a few rendering bugs and this is one of them. It doesn't repaint the graphics according to the changes that GSAP is making. Clip paths are just plain buggy in Safari. To force the browser to repaint things, you can use an onUpdate that basically removes the clip path and then re-applies it: 

See the Pen gOjLxPK?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Better? 

[Danile Yu]

Hi Jack, you're my hero,this problem bother me about three days....,

and now this been solved cause your solution !

I wondering that I can ask a question about svg transform-origin , you can see the codepen I poseted , I use the code below , but the rect still expend from left side , how can I fix that, 

 

Sincerely appreciate your help , have a nice day! 

 gsap.set("#clipPath1 rect", {
      transformOrigin: "center center",
    })

[GreenSock]

That's because transformOrigin only affects transforms, like scaleX, scaleY, rotation, etc. You're animating the "width" which has nothing to do with transforms. Maybe you could just animate scaleX instead: 

See the Pen rNrWzRy?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Or you could counter-animate the "x" attribute in the opposite direction, but I think scaleX is probably easiest and most performant.