Animating clipPath 'inset' does not work for top/bottom values

[tombigel]

GSAP version: 2.02 OS: macOs Mojave Browsers: Chrome / Safari / Firefox

Codepen: https://codepen.io/tombigel/pen/ErweEZ?editors=0010

When animating clip-path: inset(top, right, bottom, left) values, for some reason animating the left/right values works as expected but animating top/bottom does not.

The attached codepen demonstrates the issue compared to an Animation API implementation that works as expected (Animation API only works in Firefox and Chrome, not Safari)

[jackdoyle]

Hey Tom. Yeah, clip-path isn't well-supported in browsers so it hasn't been baked into GSAP yet either. However, I think we can pretty easily offer basic support for px-based inset() values in the next release which you can preview (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

Does that help?

You could, of course, accomplish whatever you want by leveraging GSAP's built-in complex string tweening (like via a property of a generic object) and then apply it to your element's style in an onUpdate. Let me know if you need some help with that. But again, in the upcoming release it should resolve this particular demo.

[tombigel]

Working with inset was simpler than working with polygon in an animation i'm working on, but i can wait for the next version. Thanks!

[jackdoyle]

Next version released 👍