Clip-Path polygon is not working

[FreddyFY]

Hi there,

I've upgraded GSAP and I saw that the clip-path animation is not working anymore since v2.1.0 Here is an example: https://codepen.io/freddyfy/pen/WWrBqw

Than I tried to do this with the endArrayPlugin, and the TweenLite.set methode inside the onUpdate function, and I've seen that it's not even working with TweenLite.set. Example: https://codepen.io/freddyfy/pen/LvGwEV

299 Is this behavior desired or a bug?

[jackdoyle]

GSAP never actually supported clipPath officially, largely because there isn't widespread browser support and because it would take a lot of extra code/logic to fully support all of the different variants and shapes. However, we did get a request to support inset() recently, at least in a generic sense and we did add that but again, it's not intended to be "official" support for clipPath.

You should be able to accomplish what you're after by using a proxy object (so you can circumvent the CSS-specific processing/getting/setting): https://codepen.io/GreenSock/pen/832197de3886322b79dc1e3b660e5ac4?editors=0010

Does that help?

(By the way, thanks so much for providing a reduced test case. That's super helpful.)

[FreddyFY]

Thanks for your information and your solution. A bit more code, but it does the job. 👍

[jackdoyle]

I think I figured out a way to make the built-in support more flexible so that it'd work with your polygon() example (as long as there are matching quantities of values). You can preview an uncompressed version of the next release here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

Does that work well for you?

[FreddyFY]

@jackdoyle Great, it works! Is there already a planned date for a new release on npm?