Removing class onReverseComplete animation or simply when scroll up

[MMILDE]

Hello,
I will be much appreciate if someone can help me with this!
Since I am not a programmer I have used some help and basic knowledge to achieve the following scrolling effect.

Basically it start with a image sequence animation,
followed by second animation presenting a text with half opacity words, which becomes visible while the user scroll down,
and once all the words becomes visible the entire text continue to scroll to reveal the next content.

As you can see I am adding some classes on the html element while the user scroll down:
 - on the header I add .header-active and on the body I add .bg-1 when the first animation ends
 - and again on the body I add .bg-2 when the second animation ends

What I want to achieve is simply to remove those classes in the same order, once the user start to scroll up:
 - remove the class .bg-2 from the body once the second animation reveals from the t and start to play backwards

 - remove the class .header-active from the header and .bg-1 from the body, once the firs animation is showing from the top and star to go backwards while the user scrolling up.
So the final effect will be when the user scroll back to top the background is again white and the navigation is not visible.
 

on the top example I try with "onReverseComplete", but no success

Thank you in advance!

See the Pen pomNZeV by M-Milde-the-scripter (@M-Milde-the-scripter) on CodePen

[mvaneijgen]

It is much easier to edit the properties you add by adding a class to a GSAP tween and make that all part of the timeline that gets controlled by ScrollTrigger, then to juggle classes that needs to be add or removed. 

 

So instead of having this in your css .header-active { opacity: 1;  top: 4rem; }, just add it to your timeline mainTimeline.to('header', {opacity: 1, y: '4rem' ); that way it will reverse when you scroll up and play when scrolling down. Hope it helps and happy tweening! 

 

Edit: If you go that route be sure to remove transition: opacity .5s ease-out .5s, top .5s ease-out .5s; from your css You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

[MMILDE]

@mvaneijgen you the Boss!

Thank you very much for the kind answer and the additional information.
I've added the stiles in the timeline  and it works! Now I will try to create more timelines attached to different elements and in that way I will try to control the body background color.