Changing background color (via data attributes) on one element using ScrollTrigger

[adamculpepper]

I'm trying to update the .nav-bar background color when I hit a new <section> element. The header and sections are 100% height. The .nav-bar background color shouldn't be set when the viewport is inside the <header> element. For some reason it's getting set to green (0, 255, 255) immediately and the "section 1" row is getting set to white (0, 0, 0). It looks like it's acting as if the <header> element isn't there, setting everything one step too soon.

See the Pen poEzbZK by adamculpepper (@adamculpepper) on CodePen

[ZachSaucier]

Hey Adam and welcome to the GreenSock forums.

 

Does either of these threads provide a solution to your question?

 

[akapowl]

 

Hey @adamculpepper - welcome.

 

If I understand you correctly, you simply just do want to change your .from()-tween to a .to()-tween.

 

See the Pen d34fcd3ad3daf38517ef6ae15e6e6800 by akapowl (@akapowl) on CodePen

 

Is that the result you wanted to achieve or did i totally misunderstand?

 

[adamculpepper]

@ZachSaucier I found that first one and it wasn't helpful, but that second one was for sure and gives me a lot more control over the styles that I didn't realized I needed until I got past this hump, so thank you for that! And thank you for such a quick response, this really made my day (yesterday). 😀

 

@akapowl Oh man, that was it! I felt like I was super close, but couldn't figure it out. I tried changing the .for() to a .to() several times, but I guess I wasn't as close with the other code when I did it. Thanks a bunch!

[JonQuayle]

I've just come across this post while searching for a way to replicate the behaviour of Midnight JS (https://aerolab.github.io/midnight.js/) using ScrollTrigger.

Is there a way to apply a class to the header of the above example when having scrolled to/over certain sections, much like Midnight js does? The closest I have got is here - https://codepen.io/JonQuayle/pen/MWbXOLZ but as you see, even though the class should be applied when over the orange section, the class is getting removed.

Can anyone enlighten me to how I can achieve this? Or even if it is possible. Thanks

[akapowl]

 

Hey @JonQuayle

 

The way you have it now, it will create only one ScrollTrigger that triggers on the first '.data-dark-header' of the page.

 

You do have the right way to go for this in your codepen already ( the commented out part ) - looping over each .data-dark-header and forEach creating a ScrollTrigger. In your commented out JS you would only have to change the trigger from '.data-dark-header' (which would cause all triggers to trigger on the first .data-dark-header on the page) to section  so you trigger them on each specific section instead.

 

See the Pen 9c4d4d9fbb9a34547789139a21216509 by akapowl (@akapowl) on CodePen

 

 

[JonQuayle]

Perfect @akapowl! I was so close, thanks very much!