Jquery to trigger one animation when scrolling down but trigger the reverse animation when scrolling up

I want an animation to trigger on the “trigger” element when scrolling down and when I am scrolling back up I want it to trigger the reverse animation. So I need the reverse animation to not be active when scrolling down but activate when scrolling back up. I am using jquery to addClass and removeClass to the trigger to see if I can make an animation trigger on the new classes. To show you very clearly, I added blue and red color to the two classes on the trigger. (See on live site)

Super hard to explain and even harder to find a solution to. I cant use the “while scrolling in view” JS because it needs to be a timed Ease animation.

Code Used: ``

Read Only: Webflow - Jackson Hedden

Live site: https://jacksonhedden.webflow.io/

maybe Finsweet’s classAdder might help with this: