[Animating clip-path]

 

Hi tamlyn 

 

i dont know that there's a native solution in CSSplugin for this type of webkit property or not ... anyway , you can handle that with this piece of code :

var arr1 = [50,-150,170,150,-70,150];
var arr2 = [50,50,50,50,50,50]; 

arr2.onUpdate = function() {
  TweenMax.set('#square', {webkitClipPath:'polygon('+arr1[0]+'%'+arr1[1]+'%,'+arr1[2]+'%'+arr1[3]+'%,'+arr1[4]+'%'+arr1[5]+'%)'});
};

TweenLite.to(arr1,3, arr2);

pls check this out :

See the Pen ogLZax by MAW (@MAW) on CodePen

 

and i think that's better to use SVG clip path ( browsers compatibility )

 

 

Is it example can be converted for using in "timeline" with multiple elements?

I will be very thankful for the example.