Image reveal from ellipse shape

[Policsek]

Hi guys!

 

What I'm trying to achieve is to reveal an image from an ellipse shape. My code seems " to work somehow " but I'm pretty sure I did something wrong. First, I tried to change it's clip-path with gsap, to make it from the ellipse, in CSS, to polygon ( 0  0, 100% 0, 100% 100%, 0 100% ), in GSAP. But it didn't work ( probably you can't transfrom from a shape to another, from ellipse to polygon ). So I simply changed the ellipse's width and height ( you can see that in my code).

Tho' I did something wrong because the animation duration is 2.5s, and if you watch my example, the animation surely take less time ( like 1s or even less ), at least visually. So, I guess the code works "just fine", but because I'm setting the ellipse to expand to (100% 100%), I can't see the entire animation ( like the animation really takes 2.5s, but I can't see the whole process ).

 

Any better ways to do this?

Thanks a lot!

See the Pen VwmGvRw by bogdan-florin (@bogdan-florin) on CodePen

[PointC]

Most of that perceived shorter duration is because of your ease. Please try setting it to none to see the difference.

 

 ease: "none", 

Happy tweening.