How would I recreate this unique JavaScript animation?

Hey, I am working on a redesign of a website and the client wants to keep a very unique animation on the site. When the hamburger menu is clicked the entire viewport collapses into a container on the left of the screen and a full-screen nav menu is revealed on the right side.

Here is a link to the old site that I am redesigning: https://www.wilderness-air-escapes.com/

I’m not sure how to approach this one. I have already created a full page nav menu which is fairly straightforward to implement with native Webflow interations. However to get the page to collapse like the example I assume I’ll need some custom code. It’s not just taking a snapshot of the page and adding it as an image or something it’s containerizing the page the user was on and adding it to the smaller collapsed version. I’m thinking it would be something like when the menu button is clicked I would listen for this event and somehow grab all the dom elements and collapse them inside of this windowed container view.

I’ve been analyzing the page source from the example but I just can’t make sense of how I might recreate this in Webflow?

Thanks for any insight!


Here is my public share link: Webflow - Wilderness Air Escapes)