GSAP+Scrolltrigger change header class

[Andrey75]

Hello everyone. 
I have a problem with changing classes when scrolling the page.

I think to use GSAP+Scrolltrigger+Locomotive scroll
What I need.
I have a logo and menu.
I would like to change the color of the logo and menu when changing the background. One class was removed and the other was added.

If the section is a black - menu and logo class changes to the "light" and, on the contrary, the "light" is removed and changes to "dark".

I just start studying it.) Help me please.

See the Pen JjJdKBO by AnChirkin (@AnChirkin) on CodePen

[Cassie]

Hey there!

Could you pop this in a minimal demo for us. Thanks!

[Andrey75]

Yes sure )

[GreenSock]

It looks like you were using the same ".dark" element as the trigger for ALL of those ScrollTriggers.

I assume that maybe this is more like what you wanted, but I'm not really sure I understand what you want: 

See the Pen vYZOpmw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If it were me, I'd probably simplify things so that I just use one loop and do all the animation with GSAP instead of swapping classes and relying on  CSS transitions, but that's just me

 

Happy tweening!

[Andrey75]

It is perfectly! It is beautiful and wonderful! You are great people if you understand so well. 
I'm just at the beginning of this path.)
This is 90% solution of my task. I see that it was in the right direction.

 

toggleClass: { targets: '.logo, .ctn-triggers', className: 'light' } - оnly adds class 'light'

Now it:

<div class="ctn-triggers link change light">
Scroll and
<div class="ctn-triggers link change">

 

I do not know how to make it like this:

<div class="ctn-triggers link change light"> - add class 'light' - Ok
Scroll and
<div class="ctn-triggers link change dark"> - remove class 'light' and add class 'dark' - How?

 

[GreenSock]

If you're trying to add/remove various other classes, that's not what toggleClass is for. That's simply for toggling a class. But it should be quite easy to accomplish what you're asking by using the onToggle callback. Sorta like: 

onToggle: self => {
  let classList = self.trigger.classList;
  if (self.isActive) {
    classList.add("light");
    classList.remove("dark");
  } else if (self.isActive) {
    classList.add("dark");
    classList.remove("light");
  }
}

But again, I'm a much bigger fan of just using GSAP to do those animations. Then you can just animate to the darker background color, set the scrollTrigger to that element, and then toggleActions: "play reverse play reverse". But it's totally up to you

 

[Andrey75]

Thank you very much for your attention and patience. Your decision seems to me very elegant and beautiful. But... 
One problem : In Safari :  TypeError: undefined is not an object (evaluating 'self.target.classList') 

In Chrome : Uncaught TypeError: Cannot read property 'classList' of undefined

It seems I understand what the problem is but I confused in the syntax (((

[Cassie]

Could you pop a minimal demo in so we can see how you've applied the solution?

[Andrey75]

I think that the error is due to the fact that it is not known where to add or remove a class. But I could be wrong.)

[GreenSock]

Sorry about the confusion there - it was late at night and my brain was foggy. Typo. It should be trigger, not target. 

See the Pen yLXYpvM?editors=0010 by GreenSock (@GreenSock) on CodePen

[Andrey75]

Hi. Thanks!
No. It can not work correctly as there is no logic work.
Look. When we work through the "ToggleClass" we have "targets" where we explicitly specify classes to which you apply it's '.logo, .ctn-triggers'.
When we use "onToggle" we have forEach(el) and "trigger: el". Trigger - (el). Right?) "onToggle" does not know which items to add and remove class.
Sorry for my English.))) This is not my native language. :)
I think that need to clearly specify the elements ('.logo, .ctn-triggers') that we will sort. But I can be wrong.

[GreenSock]

Oh, that's just all plain JavaScript logic unrelated to GSAP/ScrollTrigger. I assume you want this?:

See the Pen WNOreQR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It just loops through any elements that have the "change" class when a section activates and if that section has a class of "dark", it applies "light" to the ".change" elements and vice-versa. 

[Andrey75]

Oh yeah! It works great! You are my hero! 
I spent yesterday all day to understand. And when I look at your code, I see where I made only one stupid error. Because I first wrote the code for using jqwery and then translated it to GSAP.))) And I see minor differences in the principles of work. I'm really "Newbie".))) I think completely abandon jQuery.
I see that GSAP has everything I need and even more. Unfortunately in Russia, still know little about GreenSock.
But still I fell in love with this library.
Thank you very much!

[Cassie]

Are there any good web conferences in Russia @Andrey75?

I should come over and hype people up when the world opens up again!

[Andrey75]

Oh sure. They were before the covid.
There are many good developers and web designers in Russia. Russia is a huge country.
You have a very good wish @Cassie and this is very cool! But the world will not open very soon.

[Cassie]

I'll keep an eye out when things start opening up again ☺️ 

One day!

[Andrey75]

Oh sure. Why not? 👍