Hey everyone,
I’ve made a Navbar that needs to have 2 different animations. First one is a Scroll animation that changes Navbar Text and Background Colors as the user scrolls. Second one is a Dropdown Open/Close animation, which also changes Text and Background Colors of the Navbar.
Context:
There are 2 animations because, when Navbar is on top of the page, I want it to be transparent since there are some hero sections with background videos etc. That transparent Navbar should become white on Scroll, with text becoming darker. Same thing when opening a dropdown, Navbar background goes white and text goes dark.
I showed the problem in a 22 second silent Loom video:
I know that this is because a separate animation is affecting the colors. And I guess that I could solve the background problem with absolute div layer. But how to fix the text color changes?
If you didn’t quite understand me, test the staging link for yourself (Desktop) and you will notice the issue with transparency and colors.
Here is my public share link: LINK
(how to access public share link)
Here is the staging live link: Careers