Clip path animation

[AntonioNB4]

Hi guys im trying to recreate this effects like in the video but is still hard to do. Any suggestion ?

See the Pen VwgVJEp by Antonio-Nocella (@Antonio-Nocella) on CodePen

[Rodrigo]

Hi,

 

There is a known issue with ClipPath inset in a few browsers. They report an incorrect set of values (one value of the inset is not returned so GSAP by default uses 0 in that one) which leads to unexpected results. This has nothing to do with GSAP, just a browser thing.

 

Is more reliable to use polygon instead:

See the Pen oNmJvRv by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[AntonioNB4]

16 minutes ago, Rodrigo said:

Hi,

 

There is a known issue with ClipPath inset in a few browsers. They report an incorrect set of values (one value of the inset is not returned so GSAP by default uses 0 in that one) which leads to unexpected results. This has nothing to do with GSAP, just a browser thing.

 

Is more reliable to use polygon instead:

 

 

 

Hopefully this helps.

Happy Tweening!

@Rodrigo OK now it's clear. Instead, if I wanted to move the mask from the bottom to the middle and then activate the clip-path  polygon that expand himself?

[Rodrigo]

Hi,

 

I'm not sure I follow 100% what you mean, maybe something like this:

See the Pen ExrGxwY by GreenSock (@GreenSock) on CodePen

 

If not, please be super specific about what you're trying to do.

 

Hopefully this helps.

Happy Tweening!

[AntonioNB4]

9 minutes ago, Rodrigo said:

Hi,

 

I'm not sure I follow 100% what you mean, maybe something like this:

 

 

 

If not, please be super specific about what you're trying to do.

 

Hopefully this helps.

Happy Tweening!

 

@Rodrigo

See the Pen jOdXOKQ by Antonio-Nocella (@Antonio-Nocella) on CodePen

ok rodrigo forgive me. I will try to be precise. If you see the video I attached. When the clipath moves upward on the Y axis, the video inside it looks free from the movement of the container itself. As if it were in absolute position.  I need something like that in the video.

 

 

 

[Rodrigo]

3 hours ago, AntonioNB4 said:

If you see the video I attached. When the clipath moves upward on the Y axis, the video inside it looks free from the movement of the container itself. As if it were in absolute position.  I need something like that in the video.

Sorry still don't understand, isn't that exactly what the demo is doing? (I updated it in order to trigger things after the video is loaded):

See the Pen ExrGxwY by GreenSock (@GreenSock) on CodePen

 

The video element never moves is the clip path that is moving all the time, just like in the video in your first post on the thread.

 

Happy Tweening!

[AntonioNB4]

17 hours ago, Rodrigo said:

Sorry still don't understand, isn't that exactly what the demo is doing? (I updated it in order to trigger things after the video is loaded):

 

 

 

The video element never moves is the clip path that is moving all the time, just like in the video in your first post on the thread.

 

Happy Tweening!

Yes ! Now i see it . Thank you for help.