GSAP unable to animate clip-path: polygon with calc percent + px units

[bradwoods.io]

I've seen sandboxes of GSAP animating polygon but none with calc using percent + px units. Does anyone know if I'm implementing this incorrectly or if not, a workaround for this? Sandbox: 

See the Pen BaEZorO?editors=0110 by bradwoods (@bradwoods) on CodePen

[GreenSock]

That's because your starting and ending strings have different amounts of numbers and are formatted differently, thus the complex string animation can't function the way you expected. 

 

There are two pretty easy solutions: 

 

1) Just make sure the start/end strings have matching formatting and quantity of numbers: 

See the Pen OJGgXRQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

2) Use a CSS variable to simplify things: 

See the Pen GRLEqNO by GreenSock (@GreenSock) on CodePen

 

Does that clear things up?