Share Posted April 11, 2019 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 Link to comment Share on other sites More sharing options...
Share Posted April 11, 2019 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. 4 Link to comment Share on other sites More sharing options...
Share Posted April 11, 2019 Yep - SVG mask or clip-path would make that behave consistently across browsers. See the Pen xJNWez by PointC (@PointC) on CodePen Happy tweening. 2 Link to comment Share on other sites More sharing options...
Author Share Posted April 11, 2019 Okay, thank you very much. Good luck Link to comment Share on other sites More sharing options...
Share Posted April 12, 2019 And here is a version using the overflow and a couple of nested elements. See the Pen EJXERq by dipscom (@dipscom) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now