Toggle Class Updates the Wrong Component

[NewbieScroll]

Hi there, 

I'm experimenting with Scroll Trigger. Below is the code snippet 

Goal : When the green component enters the third section, I want to add a class 'active' and updates the CSS of green component. 
However, the code below seems to add 'active' class to the section instead of my green component

 

// HTML below
<section> one </section>
<section> two </section>
<section id="three"> three </section>
<section> four </section>
<section> fiive </section>
<div id="green"> another component </div>

// CSS Below 
section{
  border:1px solid black;
  height:500px;
  margin: 25px auto;
}
#green{
  font-size:30px;
  background-color:green;
  height:50px;
  width:500px;
  position:fixed;
  top:0;
}
.active{
  color:white ;
  background-color:black;
}

// JS below
gsap.registerPlugin(ScrollTrigger)
gsap.to('#green',{
  scrollTrigger:{
    trigger: "#three",
    start:'top top',
    end:"9999",
    markers:true,
    toggleClass:"active"
  
  },
   
})

 

Thanks for your help!!! :))

 

See the Pen gOXPKNx by Newbie2019 (@Newbie2019) on CodePen

[GreenSock]

That's because by default toggleClass will apply it to your trigger element but you can just use the object syntax to have it applied to something different: 

toggleClass:{targets: "#green", className: "active"}

See the Pen VwreRzb by GreenSock (@GreenSock) on CodePen

[NewbieScroll]

Ahhh I didn't know that ! THANK YOU so much GreenSock super hero

[GreenSock]

3 minutes ago, NewbieScroll said:

Ahhh I didn't know that ! THANK YOU so much GreenSock super hero

Happy to help! Just so you know, that info is in the ScrollTrigger docs (look where the toggleClass information is and you'll find that). 

 

Enjoy!