Masking with hover scale effect

[Jemes]

Hi Guys

 

I have a shape that animates with a clip-path so that it appears to be filling up on a rotation.

 

When the animation stops I need the shape to have a hover effect where it scales up out of the page.

 

My issue is that the clip-path is cutting off the scale hover, is there a way around this?

 

Thanks

 

Jemes

See the Pen yKMBjm by Jemes (@Jemes) on CodePen

[PointC]

Hi @jemes

 

You should be able to correct that by setting your svg overflow to visible in your CSS or scaling the entire SVG instead of the path.

 

Happy tweening.

 

[Jemes]

Thanks Craig

That works great.

 

I'm now adding some more shapes so the inside fills one after the other in a circle effect but I'm having issues with the rotation for the second and third shapes.

Would you know of the best way to solve this issue?

 

Thanks

 

Jemes

[PointC]

If I understand your desired outcome correctly, I think you'd want to use svgOrigin instead of transformOrigin.

 

 var pieFromLand = {
  opacity: 1,
  rotation: -120,
  svgOrigin: '171 171'
};

 

More info: https://greensock.com/gsap-1-16

 

Happy tweening.

 

[Jemes]

Thank you, that's perfect.