Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

clip-path Firefox issues

Recommended Posts

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.



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

Link to comment
Share on other sites

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?



Link to comment
Share on other sites

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. 

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.