I built this helper function that can encapsulate all mentioned above, might be helpful to someone
function polygonClipToArray(polygonString){
return polygonString.match(/\d+/g).map(Number);
}
/**
*
* @param element- Element to animate
* @param fromClip- e.g 'polygon(0 100%, 100% 100%, 0 100%, 0 100%)'
* @param toClip - e.g ''polygon(0 100%, 100% 100%, 0 100%, 0 100%)'
* @param duration - time to preform the animation
* @returns {TimelineMax}
*/
function clipPathAnimation(element,fromClip,toClip,duration){
let clipPathTimeline = new TimelineMax();
let fromPath = polygonClipToArray(fromClip);
let toPath = polygonClipToArray(toClip);
let clipPath = function(){
let valuesString = '';
fromPath.forEach((element,index)=>{
let postFix = (index % 2 === 1 && index !== fromPath.length -1)? ',':'';
valuesString += `${element.toString()}%${postFix}`
});
TweenMax.set(element, {clipPath:`polygon(${valuesString})`});
};
clipPathTimeline
.to(fromPath,duration,{endArray:toPath,onUpdate:clipPath})
return clipPathTimeline;
}
Used like this:
let timeline = new TimelineMax();
const FIRST_MASK_CLIPS = [
'polygon(0 100%, 100% 100%, 0 100%, 0 100%)','polygon(0 100%, 100% 100%, 0 0, 0 0)','polygon(0 100%, 50% 100%, 50% 0, 0 0)'];
timeline
.add( clipPathAnimation(masks[0],FIRST_MASK_CLIPS[0],FIRST_MASK_CLIPS[1],17/25), 1 +6/25);
.add( clipPathAnimation(masks[0],FIRST_MASK_CLIPS[1],FIRST_MASK_CLIPS[2],1 + 9/25),1 + 23/25);