Chaging Class with Scroll Trigger

[SethR]

I'm new to all of this, so I'm probably missing something very basic, but I'm not sure what it is. Any ideas?

 

See the Pen WNLJOWe by ReSeth (@ReSeth) on CodePen

[Trapti]

I am assuming you want to change the color of the header based on the section which is in viewport. As the section changes on scroll, header color should also change. 

 This codepen will be helpful. 

See the Pen BadYrrY by tripti1410 (@tripti1410) on CodePen

 

if this is not the problem you are trying to solve, then please describe better what you are trying to achieve with this. 

[SethR]

So, I've figured out how to do what I wanted for now, but I'm still not sure why I can't get toggleClass to work. I keep getting the "Invalid property" "toggleClass" "set to" ".dark" "Missing plugin? gsap.registerPlugin()" error, but I'm not sure what I'm missing.

[Trapti]

gsap.to(header,{
  scrollTrigger:{ 
    trigger: ".dark",
    start: "top 80%",
    end: "bottom 20",
    toggleActions: "play reverse play reverse",
   markers: true,
    toggleClass: "dark-mode"
    },
  // '-webkit-filter':'invert(100%)',
  //   filter: 'invert(100%)'
  
});

You need to use it this way. It is a Syntax issue.