Why is this clip-path animation not working?

[jesper.landberg]

Hi,

 

How do I animate clip-path using TweenMax? My code below does not work.

var clipFrom = "polygon(52% 0, 77% 0, 39% 100%, 16% 100%)";
var clipTo = "polygon(0 0, 100% 0, 100% 100%, 0 100%)";

TweenMax.fromTo('.some-element', 0.75, { clip: clipFrom }, { clip: clipTo, ease: Power4.easeOut }),

[Jonathan]

Hello jesper.landberg, and Welcome to the GreenSock Forum!

 

I have some questions if you please:

• What does your SVG markup look like?
• Are you trying to animate elements within a SVG <defs> or <symbol> element?
• Does it work in just Google Chrome and/or Safari?

Also keep in mind that CSS clip is not widely supported when it comes to animating polygon due to browser support. So non webkit browsers like IE11, MS Edge, or Firefox will not support or have partial support for CSS clip polygon.

 

If possible can you please create a limited codepen demo so we can better help you by seeing your code live and in an editable environment.

 

 

Thanks

[jesper.landberg]

Hello jesper.landberg, and Welcome to the GreenSock Forum!

 

I have some questions if you please:

• What does your SVG markup look like?
• Are you trying to animate elements within a SVG <defs> or <symbol> element?
• Does it work in just Google Chrome and/or Safari?

Also keep in mind that CSS clip is not widely supported when it comes to animating polygon due to browser support. So non webkit browsers like IE11, MS Edge, or Firefox will not support or have partial support for CSS clip polygon.

 

If possible can you please create a limited codepen demo so we can better help you by seeing your code live and in an editable environment.

 

 

Thanks

Hi and thanks for the reply. 

 

I am animating a regular html element, so no SVG involved. I know the support isn't the best but it works if I animate it with CSS by toggling a "is-active" class so I thought I would be able to do the same with Tweenmax.

 

I will see if I can fix a simpel codepen=)