Trying to morph to fill the viewport, regardless of proportion of path

[ThePixelPixie]

My ultimate goal is to have the morphing reveal navigation, but I want the #menu path to fill the viewport 90vw and 90vh. Right now it's very jumpy, and is only covering 90vh. I can't have the original svg covering the viewport entirely either, because there will be page content that needs to be interacted with when the nav isn't revealed. Also, for some reason, reclicking only works if I click at the verrrrry bottom tip of the #menu path.

 

Maybe I'm going about this the wrong way?

 

Guidance would be much appreciated.

See the Pen qBgMJmW by ThePixelPixie (@ThePixelPixie) on CodePen

Edited November 29, 2023 by ThePixelPixie
I forgot the point about reclicking to close being only a small point

[Rodrigo]

Hi,

 

This is the type of things the Flip Plugin was made for:

https://gsap.com/docs/v3/Plugins/Flip/

 

Thanks for the minimal demo! Here is a fork:

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

 

As for the click event, you should try to increase the z-index on the active class as I did in the codepen.

 

Hopefully this helps.

Happy Tweening!