Animated Navbar, and background video

Sarah_Bouheddou · June 21, 2023, 9:28pm

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: www.openai.com
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 )

Nathaniel_Mether · June 22, 2023, 4:00am

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

Navbar:

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

Sarah_Bouheddou · June 22, 2023, 2:14pm

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

Nathaniel_Mether · June 22, 2023, 10:19pm

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

Sarah_Bouheddou · June 23, 2023, 2:01pm

Thank you so much it’s working