Iterating over multiple elements to change another element's colour

[shainanigans]

Hey there, I'm having an issue implementing a scene used to control the colour of my header depending on which section of the page is currently at the top of the viewport. I'm using Scrollmagic with GSAP and iterating over each section of the page, changing the colour of my header each time a section reaches the header.

From the console.log I've added to my tween, it seems to be getting the right colour at the right time, but the first time the page is scrolled down and then up it doesn't look right visually.

Any help would be much appreciated! Been stuck on this for a while now.

https://codepen.io/shainanigans-1472169587/pen/dVgQOK

[el1f]

I'm not encountering any issues on my machine. The behaviour that I'm encountering is the header changing color whenever the section hits it by doing something like a "slide up" animation. Is this the intended behaviour?

[shainanigans]

Hi @el1f , thanks for having a look.

There are three strange things that happen, the first two of which I believe are related:

1. When the pen first loads, the magenta from the last page section "slides up" the header, even though the page hasn't been scrolled.
2. The first time you scroll down the page, magenta "slides up" the header before the header becomes the colour that matches the current section. In other words, it goes from old colour > magenta > new colour. That middle part where it turns magenta shouldn't be happening, and it doesn't do it once you reach the bottom and start scrolling up and then down again.
3. When scrolling up and down any time after you've reached the bottom of the page for the first time, the "slide up" happens inconsistently, though the colour does change (these are controlled with two different parts of the animation).