Assign a class to button

[DeltaFrog]

Can I apply a class to an object using gsap?   

 

This is the class:  
 

.lqd-cc__active-links

I want to target the text in "#btns1".   This is the JS path the browser gives me: 
 

document.querySelector("#btn1 > div > a")

 

I see toggleClass but not sure how to use it.    Can anyone point me in the right direction? 

 

Thanks!!!

[OSUblake]

You can use a function to toggle a class, so like in a timeline or callback you do...

 

.add(() => myElement.classList.toggle("someClass"))

 

[DeltaFrog]

Thanks Blake, you rock!    I have some buttons that take the users to different spots in the timeline but I want the mouse scrub of the timeline to toggle a class on the buttons also.     

 

Does this look right?  I can just drop this in my timeline?  

.add(() => "#btn1 > div > a".classList.toggle(".lqd-cc__active-links")) 

 

 

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".centerMeHorz",
    start: "center 40%",    // [trigger] [scroller] positions
    end: "6000px 3%", // [trigger] [scroller] positions
     markers: "true", // only during development!
    scrub: 1,
    //onUpdate: (self) => console.log( self.progress.toFixed(2)  ),
    
    snap: {
      snapTo: 0.33,
      duration: 0.01,
      ease: "none"
    },

    

    pin: "#wrap"  //  or just "true" no quotes  // or selector or element to pin
  
    
  }
  
});




tl.to(".chart1", {autoAlpha: 0, duration: 1})

tl.to(".chart2", {autoAlpha: 1, duration: 1},"-=1")

tl.to(".CopyID1", {autoAlpha: 0, duration: 1 },"-=1")

tl.to(".titleID1", {autoAlpha: 0, duration: 1},"-=1")

tl.to(".CopyID2", {autoAlpha: 1, duration: 1},"-=1")

tl.to(".titleID2", {autoAlpha: 1, duration: 1},"-=1")

tl.to(".chart2", {autoAlpha: 0, duration: 1})

tl.to(".titleID2", {autoAlpha: 0, duration: 1},"-=1")

tl.to(".CopyID2", {autoAlpha: 0, duration: 1},"-=1")

tl.to(".chart3", {autoAlpha: 1, duration: 1},"-=1")

tl.to(".CopyID3", {autoAlpha: 1, duration: 1},"-=1")

tl.to(".titleID3", {autoAlpha: 1, duration: 1},"-=1")

tl.to(".chart3", {autoAlpha: 0, duration: 1})

tl.to(".CopyID3", {autoAlpha: 0, duration: 1},"-=1")

tl.to(".titleID3", {autoAlpha: 0, duration: 1},"-=1")

tl.to(".chart4", {autoAlpha: 1, duration: 1},"-=1")

tl.to(".titleID4", {autoAlpha: 1, duration: 1},"-=1")

tl.to(".CopyID4", {autoAlpha: 1, duration: 1},"-=1")

 

[OSUblake]

Yeah, but you need to get a reference to the element first. And you don't include the . for the class name.

 

tl.add(() => document.querySelector("#btn1 > div > a").classList.toggle("lqd-cc__active-links"))