Setting up menu icon animation to change colors on scroll

Hey all,
I’ve built a cool menu animation using two small divs as the outside lines on the hamburger. I’ve got that overlapping with a scroll interaction that changes the color of the menu icon based on scroll position, however, when I open the menu and then close it again, the two divs obviously don’t retain the initial background color since the 2nd background color is hard-written into the animation.

Is there a better way to set this up, can I somehow make the small divs inherit font color? Or am I doomed to using SVGs and losing the super clean hover effect?


Here is my public share link: LINK
(how to access public share link)