Animating clip-path

[tamlyn 0 Likes (Newbie)]

I'm trying to convert a CSS transition to use GSAP because I need more control over it.

 

The CSS produces a triangular wipe from the outside to the centre:

    -webkit-clip-path: polygon(50% -150%, 170% 150%, -70% 150%);
    transition: -webkit-clip-path 3s;

    &.wipe {
        -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
    }

However when I port it to TweenMax (see Code Pen) I just get the first and last frames, no tweening. I know there is a policy of not supporting non-standardised properties but I would have expected it to just do string interpolation on the polygon spec. Am I doing something wrong?

See the Pen VYjPvE by tamlyn (@tamlyn) on CodePen

[Diaco 1,948 Likes (Superhero)]

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 )

 

[gimperdaniel 2 Likes (Newbie)]

can you explain how your answer works? I am a bit confused.

[Diaco 1,948 Likes (Superhero)]

Hi gimperdaniel 

 

this can help you :

 

http://stackoverflow.com/questions/11421986/add-a-method-to-array-object-in-javascript

 

pls add " console.log(arr2) " to arr2.onUpdate and check the Console .

[gimperdaniel 2 Likes (Newbie)]

Thank you very much!

[OSUblake 9,990 Likes (Superhero)]

It amazes me how many features GSAP has. I was trying to wrap my brain around how this tween actually worked, and discovered that there is a plugin that tweens arrays: EndArrayPlugin

 

Nothing fancy, but hey, it's there if you need it.

 

See the Pen xbyvPb?editors=001 by osublake (@osublake) on CodePen

[gimperdaniel 2 Likes (Newbie)]

I just noticed that the codepen posted Diaco.W does not work in Firefox. It seems that firefox only supports the url() method of clip-path.

[gmy8911 0 Likes (Newbie)]

Any idea how to add easing to this kind of animation?

[chrisgannon 72 Likes (Contributor)]

I used this technique sort of to create this - it was a massive ball ache

 

See the Pen 05bb421481b94c6941b746e83fb3a91c by chrisgannon (@chrisgannon) on CodePen

 

I don't recommend anyone else try it as the result to effort ratio is pretty lopsided (the wrong way).

[glivera 0 Likes (Newbie)]

 

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.

[OSUblake 9,990 Likes (Superhero)]

I used the endArray plugin from my example above, but you can do it just like Diaco showed. Not sure if string interpolation will work for this so you don't have to use arrays.

 

See the Pen obWLeZ?editors=001 by osublake (@osublake) on CodePen

[Dipscom 2,815 Likes (Superhero)]

Just to chime in and say I have just used Diaco's technique on a project today. So, thank you Diaco. 

 

[Climber 3 Likes (Newbie)]

@diaco

 

Any idea how to add easing to this kind of animation?

[Jonathan 5,176 Likes (Superhero)]

Just be to add my two cents that i would have to agree with Diaco about using an SVG clip path instead for cross browser compatibility.

 

Also webkitClipPath (-webkit-clip-path) will only work in Chrome and Safari. Since Firefox, IE, MS Edge do not widely support polygon yet for CSS clip-path. GSAP is still animating (interpolating the values) of the -webkit-clip-path polygon, but you just don't see it rendering in the Firefox browser, even with clip-path: polygon(..) with the webkit prefix.

 

if you don't use SVG clip path,, then instead you can use the W3C Standard of using CSS clip-path: url(#your-svg-path-definition). And animate the element that clip-path url is attached to, which will work in both Firefox and Chrome.
 

[Jonathan 5,176 Likes (Superhero)]

Hello Climber, and welcome to the GreenSock Forum!

 

If you need to add easing .. Using Blake's fork of Diaco's codepen from above you can simply just add that ease property:

 

See the Pen groRaL by jonathan (@jonathan) on CodePen

 

TweenLite.to(arr1, 3, { 
     endArray: arr2, 
     onUpdate: clipPath, 
     ease: Bounce.easeOut // adds bounce easing
});

I hope this helps!

 

[OSUblake 9,990 Likes (Superhero)]

This seems to be a really popular thread, but it also seems cause a lot of confusion. If you want to do an animation like this, use the EndArrayPlugin.

 

I'm not trying knock Diaco's code. My hat's off to him for figuring this out. It was the first time I ever saw an array being tweened, and is what led me to figure out how to do more complicated things like path morphing, but it's also confusing.

 

Arrays are a special type of object, so this works. The easing is a just a property of the object. Make sense? If not, use the plugin.

var arr1 = { 0:150, 1:30,  2:177, 3:113, length: 4};
var arr2 = { 0:123, 1:113, 2:150, 3:30,  length: 4};

arr2.ease = Back.easeInOut;
arr2.onUpdate = setPoints;

TweenMax.to(arr1, 1.2, arr2);

See the Pen mPpLMK?editors=0010 by osublake (@osublake) on CodePen

[greenanimation 2 Likes (Newbie)]

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);