Change color for each section by looping class name in array

[Valerie]

Hello,

I'm trying to change the color of the nav based on the scroll index of the section by looping through an array of class names that set the background color.

This pen is looping through an array of hex colors to set the background color, but i'm looking to change out line 17.  Rather than looping through navColors, I need to loop through navColorsClassBased and add/remove the class from .nav based on the scroll index.

 

Please let me know if you have any questions, I really appreciate your guidance on this one!

-Valerie

See the Pen poBrddQ?editors=1010 by vyeltman (@vyeltman) on CodePen

[mvaneijgen]

You don't need GSAP to add a class to an element, just use .classList.add(yourClass);

 

The problem with that is that it either has the class or it does not, there is no in-between state, so nothing will animate, see below. You're on the GSAP forum, so I think you look to animate things, then just create an animation for each property you want to change, much more fun and easier to control! Hope it helps and happy tweening! 

 

See the Pen dyLzJxg?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

On top of @mvaneijgen's great solution you could also use the onToggle callback from ScrollTrigger:

onToggle
Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. 

 

Here is a simple fork of your demo:

See the Pen XWQaZdV by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Valerie]

@Rodrigo I've implemented  the .toggle strategy and it works great in codepen, however when placing on my development environment there is an error "Cannot read properties of undefined (reading 'toggle'). 

I was able to log the container, array of colors and the index so i'm not sure what is missing here. Anything I'm missing here?

Thank you in advance! 


 

[Rodrigo]

Yeah is right there at the top of your log, splitScreenSlideshow is actually a collection of DOM nodes and not a single DOM node. Most likely you're using document.querySelectorAll()when you should be using document.querySelector() instead.

 

Hopefully this helps.

Happy Tweening!