Return animation to its original state that is based off a CMS selection


I have been working on trying to get the logo / menu SVG to return back to its original colour after being animated on this page:

The current process is black or white is selected in the CMS, I then add the class .white to the div based on the selection. This works. Then on scroll — once it hits the .colour-changer–upper div the nav and logo animate to black no matter what the original input was. Easy.

The tricky part is getting it to go back to its original colour .i.e white when returning to the top. I only want the projects with “White” selected from the CMS to go back to white. This would be easy to do if I could turn the animation off or something when it scrolls back to the hero div but I cant seem to make that work. I have tried using an “unset” colour which works for scrolling down, but not once and animation has been applied.

Please note, some menus and logos will be black to globally changing the colour to white wont work as a solution for those ones…

Does anyone know how I could achieve this?

Here is my public share link: Webflow - Pac Studio