Menu animation while scrolling

[GGQa]

Hello friends!

I'm working on navi to my project.  I wish it would hide when scrolling down, and show when scrolling up. I was able to achieve this effect using ScrollTrigger butI I'd like to add one more thing to my code, wchich is: Adding a background color to 'nav' element (when scrolling top). I wish it it wasn't visible to the user., and that menu start and ends its animation after the 'first' section. So it should hide and "secretaly change background" if user scrolls up and comes across a section called 'first'

Do you have any tips? Thank u! I hope I made myself clear...

See the Pen mdwdEzb by GGQa (@GGQa) on CodePen

[Cassie]

Hi there!

I'm sorry I'm not quite understanding what it is you're wanting to do.

Are you wanting the background color of the nav to match the section it's on?

 

Could you maybe try explaining again - apologies! I've had a long day. 😅

[GGQa]

Sorry, I had a long day too. I expressed myself vaquely. Here is a perfect example of what I want to achieve.

Ideally, this navi should hide before the scroll is at the top. So, for example, the Trigger to hide the animation while scrolling up would be the "first" section. 

[Cassie]

The navigation on that site doesn't hide at all when scrolling to the top.

The background color switches to transparent when it's up at the top though - is that what you're after?

Because otherwise it's almost *exactly* the same as your demo.

[GGQa]

Navigation while scrolling up adds a white background. In addition, I would like it to hide next to "first" section when scrolling up. Not just at the top. 
Scenario: 

1. Page loaded

2. The menu is at the top in the Absolute position

3. I scroll down (menu is hidding) 

4. I scroll up (menu is visible + white background + fixed position) 

5. When I scroll up and Trigger find the "first" section (menu is hidding by transform, and return to absolute position without background) 

[Cassie]

You can add more scrollTriggers to get more control like so -

See the Pen powoOaV?editors=0010 by GreenSock (@GreenSock) on CodePen

[Cassie]

Some of the logic needs a little finetuning - but that should set you off in the right direction.

[GGQa]

Hmm... the first problem here is the visible effect of adding a background to the menu while scrolling. 

Second thing is I want to hide navigation with transform transform effect on meet "first" section. Actually in your example that menn changing position and background with some "progress". 

[GGQa]

1 minute ago, Cassie said:

Some of the logic needs a little finetuning - but that should set you off in the right direction.

Oki, thank u Cassie.