Nav Bar Multiple interactions


I am having trouble with interactions. I want to recreate two interactions to the Navbar of my latest project. I have done this before on my portfolio website, but it seems what I did before is no longer working.

Can anyone advise me on how to combine Scroll out/in of view with a transparent nav on the hero? But as you scroll up, the background appears to be able to read the Navbar. I hope this makes sense. But if you see what I have done on my portfolio site, this is precisely what I want to achieve again.

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

Hi @Rebecca_A

I think I understand what you are trying to achieve. To do this, try the following steps:

  1. To keep your navbar at the top of the screen, change it from position static to position fixed to the top and sides 0%.

  2. Add interactions on page scroll to bring the nav out on scroll down and in on scroll up. Do this by applying move y -100% for your out animation and move y 0% for in. You can apply some easing to adjust the look and feel along with the timing.

  3. Create an interaction on the hero section for while scrolling in view. Set the background colour of your navbar to transparent at around 80% of the scroll, and then set the desired background colour at 100%.

Hope that helps you create what you are trying to develop.

1 Like

Amazing!! That worked… Thank you for your Help. Happy Saturday to you :slight_smile:

1 Like