Animated Navbar, and background video

Hi everyone, I’m new to web flow and I really need your help I want to create a navbar that has a transparent background ,and a black background after scrolling like this website:
I also need to make the background video look like the same example
Can you please give me your feedback

Here is my public share link:(Webflow - Otopy Website)1**
([how to access public share )

Hey Sarah, have a look at the steps below and see if that helps :slight_smile:


  • Select the Navbar and go to the interactions panel
  • Add a page trigger and select “While page is scrolling”
  • Go to action and select “Play scroll animation”
  • Add scroll animation, select scroll action and choose "BG color
  • Have the 0% animation as a transparent background
  • Change the 100% animation to black background and change keyframe to 5%
  • Click save
    Have a look at this lesson if you need extra help: Navbar show & hide on scroll | Webflow University

Background video:

  • Set right-margin on the background video to 0
  • Set height on the background video to 100vh
  • Set the width of Section 4 to 100%
  • Move Container - 1 from Hero section and into Background Video under Nav bar
  • Set the top margin to Auto for Container - 1
    Have a look at this video if you need extra help: Backgrounds | Webflow University
1 Like

Thank you so much I managed to resize the video, but I struggle with the navbar animation
For the interaction is it while scrolling in view ? because I can’t find while page is scrolling
I tried with this scrolling in view but it ddnt work
You can see the options it shows on the screenshot

No worries! The option you want is under the Page trigger section, not the Element trigger.

1 Like

Thank you so much it’s working :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: