how to activate a different class on scroll up or scroll down

[CodeBoi]

i managed to toggle class when scrolling but when i am scrolling back up i wish to activate a different class

 

 gsap.timeline({
  scrollTrigger: {
    trigger: "#tesla-car",
    start: "center center",
    end: "+=900",
    toggleClass: "active"
  },
});

here is the code im currently using ^

but i want to toggle a different class  when i scroll back up (hopefully thats understandable 

[ZachSaucier]

Hey CodeBoi. You should use ScrollTrigger's callback methods (like onEnter, onLeave, onEnterBack, and onLeaveBack) to do more custom logic like this.

 

With that being said it might make more sense to just do what you need to do with an animation attached to your element(s) instead of toggling classes. Without seeing a minimal demo it's hard for us to give finite advice  

[CodeBoi]

3 hours ago, ZachSaucier said:

Hey CodeBoi. You should use ScrollTrigger's callback methods (like onEnter, onLeave, onEnterBack, and onLeaveBack) to do more custom logic like this.

 

With that being said it might make more sense to just do what you need to do with an animation attached to your element(s) instead of toggling classes. Without seeing a minimal demo it's hard for us to give finite advice  

wont lie had trouble yesterday adding tween but i finally managed to do it  (for those wondering why i used animations instead of gsap in the first place was due to an issue of the svg rotating out of place i fixed that by adding " transformOrigin: 50% 50% " to the gsap animation) now im using tween