How to stagger Clip-path point animation using GSAP?

[Qamar Aziz]

I was trying to achieve the clip-path stagger animation using GSAP similar to this  website: https://alphatango.com/work
if you hover over the below image we can easily see how the clip-path is changing. Interestingly, I achieved very close to it, but not exactly what's there is the alphatango site. Can anyone have an idea of how we go about it? Attached the codepen

See the Pen vYMaMXr by azizqamar7 (@azizqamar7) on CodePen.

[mvaneijgen]

I think your issue is that you have two tweens that both have an ease that are separate from each other. What you can do is have a timeline with all tweens on it an ease of "none" and then use a .tweenTo() https://gsap.com/docs/v3/GSAP/Timeline/tweenTo()/ to play that timeline with an ease over the whole timeline. Check out the ease visualizer if you want to see what types of eases are build in to GSAP. Also you had a typo in duratin eg duration, doesn't really matter, but wanted to let you know. 

 

You could also look in to other mask features of the browser SVG mask could also be a solution. I've written a guide how to use most of them, see below. Hope it helps and happy tweening! 

 

 

See the Pen dyLjLBw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Qamar Aziz]

Thank you for helping with this, I believe I have figured it out.

See the Pen vYMaMXr by azizqamar7 (@azizqamar7) on CodePen.

[Qamar Aziz]

I'm thinking why the timeline animation is 1 sec, although the total has to be 2 sec right?

 

[mvaneijgen]

Each tween in GSAP has a default duration of 0.5 seconds, so in this pen the total timeline is 0.5 + 0.5 = 1 second 

[Carl]

Thanks for providing the demo, it made my approach much easier than starting completely from scratch.

 

This is a cool effect and as stated earlier, I'd probably try to use SVG for this 99% of the time.

 

However, I was intrigued about making a more flexible clipPath approach.

 

In the demo below I animate the y value of each bar independently using a stagger.

 

See the Pen rNbrEra?editors=0010 by snorkltv (@snorkltv) on CodePen.

 

In the onUpdate I glue all the values together into a giant clipPath string.

 

Using this technique you can

 

• animate the bars from center, start, or end
• adjust the stagger's each amount
• adjust the distribution of start times with an ease (in the stagger object)

[Qamar Aziz]

Thank you so much @Carl Your approach made my day. I took your course one of the amazing courses out there on GSAP.

I was thinking about how you added two more points in clip-path making it a staggered animation onUpdate was trying to understand from the below image I created 

 

1. Feeling a little overwhelmed by advanced clip-path animation if I have to create points manually, is there a way we can simplify things?
2. Would love to know about using SVG for this 99% of the time.

Also tried with the points shown in the image, but couldn't get the desired results for from: 'start' or 'end'

See the Pen vYMaMXr by azizqamar7 (@azizqamar7) on CodePen.

[Carl]

Thanks for the image. That's a great way to try to keep track of the points.

 

Sorry, for any confusion, but in my haste I actually had the "bar3" values duplicated in my clipPath code which is why you were seeing extra points.

 

Thanks for catching that. I removed the extra row of values.

 

As for the from values, you can use those point objects for each bar to come up with a totally custom starting position using a set().

 

In the demo below I removed the animation to hopefully make it easier to understand how each bar now has a custom y starting value

 

See the Pen qBwMPMw by snorkltv (@snorkltv) on CodePen.

 

 

For what it's worth, keeping track of all those points in the clipPath string is pretty tricky for me too, so don't feel bad if it feels like a lot ot take in.

 

 

As for using svg, the post @mvaneijgen linked to is quite comprehenisve. 

 

However, below is a demo from one of my svg lessons if it helps

 

See the Pen rNKVrYx by snorkltv (@snorkltv) on CodePen.

 

there are now 10 clipping and masking video lessons in SVG Animation with GreenSock if you want to dive deeper.

[Qamar Aziz]

Thank you so much for the clarification, will look into SVG and the course you shared. One of the Good animation for Scroll in View and Hover animation for Product images