ScrollTrigger toggleClass and animation

[NickNo]

Hi, I'm trying to create a combined animation with scrub, with adding a class via toggleClass - at the moment the class only gets applied until the animation/trigger end - how would I keep the class applied until I reverse back up to the top?

See the Pen yLpwbOX by nickjacobsnz (@nickjacobsnz) on CodePen

[akapowl]

Hello there, Nick.

 

As you already found out, toggleClass will toggle a class every time the ScrollTrigger changes its state from active to inactive and vice versa, i.e. on each of enter/leave/enterBack/leaveBack.

 

So if you only wanted to toggle a class on certain events, you'd have to use the callback system - e.g. add the class to the element onEnter and remove it again onLeaveBack. Something like this:

 

See the Pen jOYREob by akapowl (@akapowl) on CodePen