ScrollTrigger Triggering Animations in reverse when scrolling up

[Spenquatch]

Hello, 

 

I have an animation I am working on that I need help with. The idea is this cube is assembling as you scroll through the page while text fades/slides in and out. I have the cube part figured out, it is pinned, and I just have to build out the rest of the animations. The part I am having issues with is the text fading in and pin and then fade out at a set point. The text fades in and out just fine while scrolling down, but I need it to also animate in reverse when scrolling back up. I cannot use scrubbing because the fade-in needs to be quick and not take the entire duration of the pin. That is why I set it up to animate on enter and exit instead of within the animation of the pin.

 

Is there a better approach to accomplish what I want? I need everything to animate in reverse when scrolling back up the page, but certain elements not to be set to the scrub because I need them to be quicker animations.

 

Thanks!!

See the Pen qBQWaYY by Spen_UN (@Spen_UN) on CodePen

[mvaneijgen]

Hi, would it work by using the onEnterBack and onLeaveBack callbacks? I've just copied the code from your onEnter and onLeave and created these, now the text is visible again when you scroll backwards.

 

Personally I think It's still better to add the animations to your timeline and play with the position parameter and just fade the text out when you don't need it anymore. 

 

See the Pen eYQORpX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen