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

Design help Custom code
1

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)

image
image882×717 43.4 KB

image
image830×683 42.5 KB

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: https://preview.webflow.com/preview/jacksonhedden?utm_medium=preview_link&utm_source=designer&utm_content=jacksonhedden&preview=abb6072cb9676312e4601b96834b690a&workflow=preview

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

2

maybe Finsweet’s classAdder might help with this: