Help with Full Screen Nav Menu

Design help Animations & Interactions
1

Hey Everyone,

I’m having a few issues while putting together a full screen nav for a new website build. See-below:

  1. When the nav menu is clicked for the first time, everything just magically appears without animated out. But when you click on the nav menu button for a second time to reload the nav it animates everything out as intended.

  2. When Clicking one of the nav links (Home in this case, as it’s been programmed), it will activate the closing animation sequence as intended, but the Lottie animation will not revert back to the hamburger icon, despite using the exact same animation as the nav menu button.

  3. When clicking on the nav menu button after having selected a nav link previously from the menu, the first click does nothing, while clicking a second time gets everything to animate out as intended.

I’m assuming it’s an issue with Show / Hiding specific elements of the nav menu block / container, but thought I might get another opinion before a bunch of trial and error.

Read-only link below for reference:

Thanks in advance!

Here is my public share link: LINK
(how to access public share link)

2

Hey @sxb!

  1. In the Nav Menu Out animation, you can ctrl click to select all the initial state items & just set it to 0s delay 0s duration. Usually you dont want an initial state on the ending animations.

image
image323×784 36.7 KB

  1. In the hover out animation, make sure the lottie step has the class selection for all elements with this class.

image
image325×265 17.6 KB

  1. Whats happening is that it’s still waiting on the 2nd click animation from clicking the Nav - menu button. There’s probably multiple ways to handle this but an easy way might be just to have 2 links, for open animation & close animation, that are overlayed on top of the menu button & hide/show from the menu animations.
3

Hey lukev, much appreciated! You really saved me a ton of time laying that out so easily.

For the hide/show on selection of a nav link I’m still having a bit of trouble. I tried adding a second set of menu icon links that would replace the existing ones on click, but for some reason they don’t appear after making a selection of a nav link. Do you see anything missing here?

Thanks again for all of your help.