Jump to content
Search Community

Chaging Class with Scroll Trigger

SethR test
Moderator Tag

Recommended Posts

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. 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

    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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...