Mobile Menu Flyout Help

Hello, I am trying to design a mobile menu that looks like this:

This is my site so far so you can see where I’m at.
https://jonathan-silverbergs-blank-site.webflow.io/

(read only link:)
https://preview.webflow.com/preview/jonathan-silverbergs-blank-site?utm_medium=preview_link&utm_source=dashboard&utm_content=jonathan-silverbergs-blank-site&preview=361db039be655d9ffdceec18ec78da27&mode=preview

I’m having a lot of difficulty with a few things that I’ll list below. At this point I am willing to pay someone to make this work for me lol.

  1. I can’t get the menu to be in the middle of the screen. It’s always in the top left, even though when previewed on the builder, it’s centered.

  2. I can’t get the animations to work right. If you click on the menu button, you’ll see the white overlay comes down. This is perfect. After the overlay comes down, I want the menu items to slide in from the left. This is where I am having great difficulty getting this to work. The menu won’t slide in as I want, it just appears there even though I thought I had my animations set up right, because they look right when previewed, but not on the live site.

I know the site isn’t optimized for mobile yet so parts look funky, I am just trying to get the mobile menu set up properly first.

Anyways, like I said, if you think you can build this pretty easily for me. I will be willing to pay you for it.