โ–ผ
Streaming live at 10am (PST)

Hamburger Menu Animation Help ๐Ÿ˜”

Hey there,

I wanted to create an animation which, when user scrolls 50% above the page, the hamburger menu(that 3 bars) will change itโ€™s bg color to WHITE, but when user scrolls 50% below the page, the hamburger menu will change itโ€™s bg color to BLACK.

Currently, by default, i set the hamburger menu color to WHITE, and i applied combo class to 1 & 2 bars, so, the problem now is, when the menu is at 50% below the page, 1 & 2 bars is BLACK(which is good) but the 3rd bar is still in WHITE. And my question is, how to make the 3 bar to become BLACK? Iโ€™m pretty sure that itโ€™s caused by the combo class but i just donโ€™t know how to fix it.


Here is my public share link: [LINK]

You are right. It is because you are using combo classes on two out of three hamburger-bars.
The easiest way, not the prettiest, is to add one more interaction on the bar that isnโ€™t changing color. (see screenshot) This solved it for me.

Hope it helped

1 Like

Hey @Pairing thanks let me try it out later:grinning:

@Pairing i got it works, thank you for your help!!!

1 Like