Jump to content


Clip-path animation not working

Go to solution Solved by PointC,

Recommended Posts

The clip-path animation in the mentioned code pen is not working.


Can someone please point out what am I doing wrong? The other one with ellipse works just fine - https://codepen.io/sayaliga15/pen/abmpMdY

See the Pen PoGOvYr by sayaliga15 (@sayaliga15) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @s-15 :)


Welcome to the forum. 


Looks like updating to the latest version of GSAP makes everything work correctly. (You were using a version that is several years old.)

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


I also changed you syntax to the GSAP 3. Check out the migration guide for all the info.

Happy tweening.


  • Like 3
Link to comment
Share on other sites

Hey folks, a bit off-topic but I’m just wondering has CSS clip-path support changed dramatically since my simple inquiry earlier in the year. I’ve seen numerous threads shortly after that mentioned one all the way up to this one over time. When clip-path polygon has been mentioned with no suggestion of SVG as an alternative for offering better support.


I’ve just been wondering given the responses I received in that thread verse the many responses I’ve since read in newer threads with no suggestion of SVG. Browser support to my knowledge has not really dramatically improved to become more inclusive since that original inquiry or am I in-fact mistaken?

  • Like 2
Link to comment
Share on other sites

@PointC @akapowl Thanks. Updating the version did make it work. Since clip-path ellipse worked with the older version I was expecting the polygon one to work. Seems like upgrading is the only option. 

Link to comment
Share on other sites

18 hours ago, Shrug ¯\_(ツ)_/¯ said:

no suggestion of SVG as an alternative for offering better support.

I think I've said so that so many times that I thought I could stop saying it. It should be branded in the forum scrolls of history. :D


SVG is always my go-to for masks and clip-paths. I don't even bother checking support for anything else so if CSS clip-path suddenly gets broader support could somebody let me know? Thanks. ;)

  • Like 2
Link to comment
Share on other sites

  • 3 months later...

In case anyone else comes across this like I did, having trouble with GSAP animating from one clip-path to another: make sure both clip-paths are using the same units, including any zero values. 


For example, trying to animate from this:

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 

to this:

clip-path: polygon(-100% 0, -100% 0, -100% 100%, -100% 100%)

wasn't working, but when I changed the zero values to percentages, it worked perfectly.


// From
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)

// To
clip-path: polygon(-100% 0%, -100% 0%, -100% 100%, -100% 100%)


  • Like 9
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.