ScrollTrigger toggleClass: multiple class names.

[egrandinetti]

I'm trying to assign multiple class names to toggleClass parameter (space separated), but I noticed that, because of the classList.toggle method, it's impossibile. There's a way to avoid using a combination of jQuery and onEnter/onLeaveBack methods to get the same goal?

[ZachSaucier]

Hey egrandinetti. At the moment toggleClass only supports a single class to be provided. You can toggle multiple classes by writing your own logic. Here's an example:

const elem = document.querySelector(".myElem");
const classes = ["test", "test2"];
function toggleClasses() {
  classes.forEach(myClass => elem.classList.toggle(myClass) )
}
gsap.to(elem, {
  scrollTrigger: {
    trigger: elem,
    onEnter: toggleClasses,
    onLeaveBack: toggleClasses,
    onLeave: toggleClasses,
    onEnterBack: toggleClasses
  },
  // ...
});

 

[egrandinetti]

I already did something like that. I was looking for a toggleClass solution. It doesn't matter.