Trying to understand Webflow's Site Navbar? (Expert Level)

Hello, Everyone!

I’ve literally just dived into the world of web design this month and I’ve decided to start my training my copying elements I find intriguing and somewhat complex.

My first project is to make the Webflow navbar. The design itself has so many little nuances that I’ve picked up on but don’t fully understand due to my limited knowledge.

So I’ve come to forums for help!

  1. The navbar when hovering starts it’s animation as normal. However, if you switch to the next tab it won’t play the animation instead it holds the bar in place and animates the content into place. If you leave the tab area then it will do the dropdown animation once you re-engage with it. So is there some type of custom or integrated method to activate like a second animation if the mouse doesn’t leave the space?

  2. I’ve also noticed depending on the direction you come from when hovering within the space the animation will come from a specific side. Unlike if you were to just hover and animate for just the button. It’s like it know the previous tab you were on so it registers that before it dictates what side the animation should happen from.

The example I’m studying from -

My example so far -

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