Jump to content
Search Community

How do I set toggleClass not for a ScrollTrigger element?

AlexanderGS test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello.
How do I add a class to another element that is not a trigger from scrollTrigger?

For example, the trigger is .content-1, but I need to set a class for .content-2. How do I do this?

 

<div className="content-1"></div>
<div className="content-2"></div>

let timelineScroll = gsap.timeline({
  scrollTrigger: {
     trigger: ".content-1",
     start: "100px top",
     ease: "none",
     toggleClass: ???,
  }
});

 

Link to comment
Share on other sites

  • Solution

 

Hello Alexander.

 

The ScrollTrigger docs have an explanation for how to do that - the object option is what you are looking for.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following:
  • String - The name of the class to add to the trigger element, like toggleClass: "active"
  • Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements.
Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).
  • Like 3
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...