Circle clip-path working wrong in firefox

[Alexi1569 0 Likes (Newbie)]

Hi all.
Please, help me. Why does circle clip path on image working wrong in my pen in firefox browser?
My animation begin from circle(0% at 0% 50%) to circle(150% at 0% 50%), but in firefox it has value 
clip-path: inset(150px at 0% 50%). Why it happened? Thank you for answers

See the Pen mgmKze by Alexi1569 (@Alexi1569) on CodePen

[Dipscom 2,815 Likes (Superhero)]

It's because GSAP does not officially support clip-path. It's not widely supported in the browsers (see the compability table at the bottom of the MDN article) and it would require a significant amount of logic to implement correctly, which would not be a good use of resources given the not-so-great browser implementation.

 

You'll probablly be better off, putting the image you want to mask inside an SVG and clipping that or, since your masking is circular, creating a DIV, setting its border radius to 50% its overflow to hidden and animating that.

[PointC 8,599 Likes (Superhero)]

Yep - SVG mask or clip-path would make that behave consistently across browsers.

 

See the Pen xJNWez by PointC (@PointC) on CodePen

 

Happy tweening.

[Alexi1569 0 Likes (Newbie)]

Okay, thank you very much. Good luck

[Dipscom 2,815 Likes (Superhero)]

And here is a version using the overflow and a couple of nested elements.

 

See the Pen EJXERq by dipscom (@dipscom) on CodePen