clip-path Firefox issues

[Wayrse]

Take a look at the following example in Chrome and Firefox. Inspect the span and see what value Greensock assigns to the <span> tag.

 

In Chrome: clip-path: circle(10px at 50% 50%)

In Firefox: clip-path: inset(9.999% 49.995% 49.995%)

 

Anybody know why this might be the case for Firefox? I don't want it to change the shape from circle to inset and the pixel value to a percent.

 

Thanks!

See the Pen 7ffddf797d62ebc97c4b73c489417e82 by MarioD (@MarioD) on CodePen

[Wayrse]

Searching around a bit more and I found out that `clip-path` is not fully supported by Greensock just yet.

 

It looks like there is a version that might be available for `inset()` in the next release (https://github.com/greensock/GreenSock-JS/issues/306)

 

Any word on getting `circle()` to work as well? Is this something we could potentially see in the future?

 

Thanks!

[GreenSock]

Well, there are a few challenges with clip-path:

• Some browsers just don't support it. 
• The kinds of values it can accommodate vary widely, and it'd take a ton of code to figure out how to smoothly animate, for example, from a circle() to a polygon() or inset(). Add to that the values inside each of those can be various units (px, %, etc.) and it's just a mess. 

The next release of GSAP can do basic stuff where the types of shapes, numbers of points, and units match between the starting and ending shapes, but it can't magically add browser support or animate between totally different shapes/units.