Navbar Animation

[hshekhar]

Hi Folks , 

I am trying to build a Navbar with an Animation which comes from right to left in sync with hero section on scroll, like slide animation . 
- Initial bg color is white with black text then on scroll  black coloured navbar slides in from the right and makes it black with white text. 

can anyone help me achieve this. 

I am also unbale to make it sticky with overflow-X : hidden.  

[GSAP Helper]

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools!

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[hshekhar]

https://codesandbox.io/p/sandbox/modern-river-forked-dg9r3g

I have tried this 

[mvaneijgen]

Hi @hshekhar welcome to the forum!

 

Are you sure you've saved your work? It seems like this is a Codesandbox link from another user on this forum who asked a question a few days ago. I see no navbar in this example.

 

But it I think I understand you correctly it would be as easy as just adding the animation to the already existing timeline and using the position parameter to have tween start at the same time. Or if the are separate components just have two ScrollTrigger with the same settings, so that they start at the same time! 

 

Keep in mind that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Also when sharing a project link please include the file we should be looking at, so that we don't have to hunt for the GSAP code our selfs. Hope it helps and happy tweening!