Clip-path animation

[rossnorth]

Hi, I am having difficulty making this animate smoothly, and I am not sure why. The div abruptly shifts position after the duration. It eventually gets there but it is very stiff.

Ideally the animation of the div starts at position  

clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 100%);
and smoothly transitions to

clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);

Thanks in advance!

See the Pen myrPKKw by rossnorthcode (@rossnorthcode) on CodePen.

[GreenSock]

The units need to match in the start/end strings, so just add the %. I'd also strongly recommend updating to the latest GSAP - you're using an ancient syntax from before 2019. TweenMax is long gone. 🙂

 

See the Pen NPRNzJL?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

I hope that helps.

[rossnorth]

I found that css needs to be have 0 represented without the % and js needs the %

 

CSS/SCSS

clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 100%); 

 

JS

clipPath: 'polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%)',