How to make this nav bar exit and enter when the page is scrolled

Design help Animations & Interactions
1

Hi guys,

The effect I’m looking for goes like this…

  • On page load the nav is already visible with a transparent background.
  • As you scroll down, the nav flies up off canvas
  • As you scroll back up, the nav drop back down on to the canvas, with a 10% black bar behind it.

If you take a look at my link you’ll see I’m almost there there but it’s just not quite working perfectly!

Any ideas?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

@davidjayukay
Took a look at your site - which part is not working perfectly, the scrolling interaction, or the fact that there is no 10% black bar behind it? Or both?

If it’s the scrolling interaction you’re concerned about, and if I read your post correctly, I suggest following this webflow tutorial as I checked your interactions and they seem incomplete compared to the tutorial (it’s 2min 30s, very concise):

If it’s the 10% black bar you’re concerned about, I suggest adding an interaction on the background video section that changes the opacity of the nav bg colour as you scroll past it - from 0% to 10% opacity, and the opposite (from 10% to 0%) when you scroll into view of it.

Let me know if that helped.

3

@feeei thanks for sharing this I’ll take a look now and come back to you – I’m still getting my head around interactions :wink:

4

Totally! I’m still transitioning my stuff from the old IX (Interactions) to the new IX2 they launched last Fall. Fortunately, I think it has improved a lot from the original :slightly_smiling_face:

You might have already done this but I started my journey by marathoning their intro to interactions and animations and found it very helpful:

If you have any specific questions let us know!

5

Superb, yes I had seen this course, although it’s not until I actually started trying things out that it really started to click :slight_smile:

P.S Managed to get the nav working.

1 Like