Jump to content
Search Community

Animating clipPath

Olav test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi all,


I've included a codepen where I'm trying to animate a complex clipPath which I can't seem to get working. For now, it is supposed to animate from the complex css clip-path, to the simple gsap clipPath. Would this be possible, and if so, would it also to animate from a complex clip-path to a complex clipPath? Read complex as a clip-path that uses the css calc() function.


Thanks for reading!

See the Pen PoyLgGb by olavgit (@olavgit) on CodePen

Link to comment
Share on other sites

Yes this is possible, but both strings need to have the same logic eg if you tweening to 100% but your starting value is 0 you will need to give the initial value also a % sign.


Also you will need to have the same amount of point in both clipPath strings. Right now you're tweening from 6 points to 4 points which is not going to work. GSAP can't invent points to animate to. Personally I use the following to to modify my clip paths https://bennettfeely.com/clippy/ if you just place some extra points at your end shape which will be in line with other points, this will work. I don't know about the calc() function I think they would work, the most important thing is that both strings need to be the same and only the numbers need to be different, that is what GSAP will interpret and animate. 


polygon(6rem 0,100% 0, 100% calc(100% - 6rem), calc(100% - 6rem) 100%, 0 100%, 0 6rem);

// Not correct
polygon(0 0, 100% 0, 100% 100%, 0 100%)

// more correct 
polygon(0rem 0, 100% 0, 100% calc(100% - 0rem), calc(0% - 0rem) 100%, Missing points....)


If you don't want too worry about points you could look in to using a SVG mask and using the MoprhSVG docs plugin which can do these calculations (that said, it is always better to use the same amount of point this way you have the best control on what the animation will look like)

Link to comment
Share on other sites

Thanks for you reply! It seems like you are totally right, I edited my codepen a bit:

As you can see, making both values use 6 points, the animation plays. Not with the calc function though, if you uncomment those you can see the animation doesn't play. I'd like for my corners to be straight, and not use percentage based values. Any ideas on how I could get this working? In some other clipPath related posts I saw @Cassie mention the use of css variables, will that influence things?

Link to comment
Share on other sites

  • Solution

I wouldn't figure why this would not be possible, but it is! But to repeat both strings need to be the EXACT same! If there are percentages in one value the other value also needs %, even if it is tweeting to zero (0). If you use the calc() string for one value the other also needs calc (even if it isn't calculating anything!)


Your CSS string was also with spaces. To make sure both strings were the same I've moved it all to one line. To make it easier to debug I've moved the GSAP line to the css commented out to compare both strings and this is what it needs to look like to make it work. Hope it helps and happy tweening! 


See the Pen rNqRgPW?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
  • Thanks 1
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.
  • Create New...