Use clipPath with GSAP for overlays

[LucieB]

Greetings!

 

I'm trying to create properly a simple overlay for pictures onClick event. 

I saw we can use the clipPath with GSAP, but I have some troubles : the duration is not respected for the animation. I wrote a duration of 1.5seconds and the animation is really quick! How to resolve this ? 

 

Of course, I could create a simple empty div that takes the width and the height of his container as an absolute position and animate this. But I'm trying to create and animate an overlay the cleanest possible way. So, my second question is : Is the clipPath a good way to create an overlay ? 

 

Thanks, and take care!

See the Pen QWbRNRj by thisislucie (@thisislucie) on CodePen

[mikel]

Hey @LucieB,

 

The speed is defined by the ease. Take e.g. ease: 'none'.

 

Please take a look at the Ease Visualizer.

Change to box:

// click and modify the underlined values
gsap.to (box, ...

and you will see all ease effects in comparison.

 

I hope it will help you.

 

Happy tweening ...

Mikel

[LucieB]

Hi Mikel ! 

Thanks for your answer. But it seems it's not about easings.

Because in my demo, if I change the target, the animation looks smoother :

See the Pen QWbRKQB by thisislucie (@thisislucie) on CodePen

[ZachSaucier]

4 hours ago, LucieB said:

the duration is not respected for the animation. I wrote a duration of 1.5seconds and the animation is really quick! How to resolve this ?

3 hours ago, LucieB said:

it seems it's not about easings.

Because in my demo, if I change the target, the animation looks smoother

The quickness in speed is because .myImage is larger than the img inside of it. Thus the clip path has a longer way to travel in the same amount of time, thus the speed appears faster. To fix it, make .myImage the size of your img.

 

4 hours ago, LucieB said:

Is the clipPath a good way to create an overlay ?

It can be fine if you're not using it too much and not on too large of elements. In general animating clip paths is not the most performant thing. If you can create the same effect you want using regular elements, layering, and overflow: hidden that's probably going to perform better.

[LucieB]

Oh okay! Thanks for this explication, Zach !