MorphSVG on click - show then hide then show mobile menu

[ehsan91]

See the page below, I want to create an effect like this for the mobile menu of my site.

https://template.dsngrid.com/exfolio/light/project-1.html
When the user clicks on the open menu link (top right of page), first an SVG file comes from the bottom to the top of the page using the Morphsvg plugin, fills the page and then exits the page and then the site menu is displayed.
From inspect I found out that this process is done on this page by changing the path value inside the SVG, but I am having trouble implementing it with GSAP, the demo page I was able to implement is similar to the one below but it does not look like what I wanted.

 

 

Is there a way I can implement something like this page (https://template.dsngrid.com/exfolio/light/project-1.html) using GSAP?

 

See the Pen VYaLoxr by amirehsan (@amirehsan) on CodePen.

[Rodrigo]

Hi @ehsan91 and welcome to the GSAP Forums!

 

This thread has some great demos:

 

Hopefully this helps

Happy Tweening!