How to recreate Stripe.com 's navbar hover transition?

Design help Animations & Interactions
1

Hi there,

Behold the almighty and admired stripe.com

I wanted to ask if anyone managed to recreate their very smooth navbar hover transition animation? When you move from one category (e.g. products) to another one (i.e. developers), the dropdown moves from point A to point B, instead of retracting and re-appearing. Does it make sense?

2

It’s possible, I think. A little complicated.

What I’m seeing on a basic level for the structure:

<div class="dropdown">

    <div class="dropdown-developers" style="display: none, opacity: 0">
         Links / Content
    </div>

    <div class="dropdown-company" style="display: none, opacity: 0">
          Links / Content
    </div>

</div>

You could then use interactions to control the positioning of the dropdown that’s set to (position: absolute). When you hover over “developers”, it would change the absolute positioning so that it would appear below that tab… Though I can see an issue… Let me see if I can mock it up for you.

3

Here’s a really rough version… You should get the idea and be able to expand on it from there.

As to getting it to responsively resize to the content within it and all that jazz, that’d take some work, but also doable. Another thing to note is that the way I’ve positioned the menus with the interactions is based on the size of the outer wrapper (.dropdown-window), so have had to compensate for this as it changes in size based on which of the coloured menus appears within it.

Also - say if you hover on red, then off, then hover on blue… you see it moving across from red’s position. That needs a fix too, but the only way I can see of doing it is long winded.

https://interactive-nav-dropdown.webflow.io/

https://webflow.com/website/Interactive-Nav-Dropdown?s=interactive-nav-dropdown

4

Hey guys - this example nav mimics the Stripe hover effects. Preview it in Webflow for a closer look at how it works.

Hope this helps!

1 Like
5

@JoeMillion @brjohnson thanks a lot for the effort dudes! webflow community is indeed amazing and I’ll be integrating what both of you contributed! hoping it’ll help more people besides myself

1 Like
6

I would love to see how to make it responsive like stripe’s, webflow did make it responsive on mobile for their website but not as cool as stripe’s mobile nav.

7

here some thing similar but need some modification.
read-only link.
https://preview.webflow.com/preview/mega-menu-6bf3a4?utm_medium=preview_link&utm_source=designer&utm_content=mega-menu-6bf3a4&preview=42ab2ec037f9b43722d311a3cb52f528&mode=preview
Actual website.
https://mega-menu-6bf3a4.webflow.io/