Building a navbar

Design help Animations & Interactions
1

Here is there link: LINK

I found this website here. I love their navbar function. Though I can’t seem to picture what rules they have in place to get that animation to work. Simply being when you scroll away from the top the logo and main menu stay fold into shape and when you return to the top the additional links are then available. Is this possible with Webflow? Or should I look to design this coding myself.

Thanks Fellow Webflow"ers".

2

Hello, @monstermage

What I would do:

  1. Add 2 divs (rows) to the navbar + Logo.
  2. Top-row would contain: phone number, extra links, etc.
  3. Bottom-row would contain: nav links, phone (width: 0px by default), other links as required
  4. Create interaction with Scroll trigger, which will affect
    __ a) top-row height going to 0px + display: none
    __ b) logo width become smaller
    __ c) phone link in the bottom row, width becomes auto (or fixed size)
    Automatically navbar height will shrink.
1 Like
3

I can see it!
Thank you.
@sabanna

1 Like
4

@sabanna Hey! I ran into an issue. Since the nav bar would be fixed so that it would stay with the page. How will the scroll action cause it to activate. My problem right now is that I can’t get the animation to activate because the whole bar is fixed and moves with the page. The scroll trigger isn’t starting the animations.

I am surely missing something. Thanks a bunch for your assistance. I am still obviously fairly new.

5

May I see read-only link?

6

Preview Link

I didn’t continue the animation creation when I couldn’t get it to take action by scrolling. I changed it to 100% last to see if it would respond then. I am most likely missing something.

Thank you,
Andrew

7

Hello, @monstermage. Sorry for the delay with answer (having pretty busy days :confused: )

First of all, you have to understand principals of Scroll Trigger:

You are applying interaction with Scroll Trigger to the element (object), which will activate some actions when this object scrolls IN and OUT of the screen.

So, in your case, you applied Scroll Trigger interaction to fixed navbar, which will not work, because it is not moving.

My suggestion:

  1. disconnect navbar from interaction “Navbarshrink” (just click on NONE);
  2. apply (connect) this interaction to the “paragraph1fs”
  3. in all actions inside the “Navbarshrink” remove 100% offset, it should be 0%
    239×542 23 KB

After that, you will see animation will work. But for making all navbar shrink you will have to use not scale effect, but change height. At least for the phone icon.Because when you scale object it doesn’t change the space, captured by this object by default.

Hope I was able to explain. Feel free to ask more if you need.

Cheers,
Anna

1 Like
8

@sabanna

So I have had success in getting closer to my desired result. So when you go to the main page (only one I have implemented nav bar) you can scroll down and the top bar scrolls up. and then the menu falls in place with the logo having its width shortened too. (thanks for object rule) Though it only eases the first time I scroll down. After that it jumps each time. Also how would I get that nav bar to ease its way up?

You have been wonderful help Sabanna! Thanks tons! :slight_smile: Your awesome.

-Andrew Fair
Read me Site

9

Update: Thanks a bunch sabanna! I was able to create what I was thinking. I believe it is working well now. Thank you very much for your great help and the explanations! It really comes together. I am going to play around with the timing a bit more but I have success!

Thanks again,

Andrew
websitegenii.webflow.io
Preview

1 Like
10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.