SVG clip-path scale animation not working correctly in safari

[Luke Dagnall]

Hey,

This is my first post on the forum, loving gsap!

I've ran into a little bit of an error. I have an SVG clip-path that I wan't to perform a simple scale animation on when in the viewport but for some reason it does not want to run in safari, I'm fairly new to gsap so don't have much experience troubleshooting SVG animations, so any help would be appreciated, cheers!

 

NOTE: I've not included the scrollTrigger library on the codepen just so you don't have to scroll to play the animation, the bug still stands.

See the Pen gOMJVxZ by lukedagnall (@lukedagnall) on CodePen.

[ZachSaucier]

Hey Luke and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club membership!

 

The issue that you're having has nothing to do with GSAP. CSS clip paths don't have great support. What you should likely do instead is include your image as an <image> in your SVG because clip paths on SVG content has much better support. 

[Luke Dagnall]

Thanks for the reply Zach, I can confirm that using an Image clip-path solved the issue! Cheers