Continuous mask navbar

Hi Boostrap Studio Community. For my website, Instead of a normal navbar, I'm trying to create a horizontal and continuous mask display & hide navbar.(I attached links with pictures of what I'm trying to accomplish.) I have never done this before and I couldn't find much about how it is done. The idea is to use a mask layer to hidden or display the content on the page. The website envoy has a good example. When you click on the burger, it created the mask display. I just couldn't find much info online about this effect and was hoping someone here could guide me. I thank you in advance for your help.

Pic 1 https://ibb.co/yS0VfVj Pic 2 https://ibb.co/vv6Cr2B

I would just reverse this effect ...add a transition to rotate nav as it happens....

https://getbootstrap.com/docs/4.3/examples/offcanvas/