Scroll Observer works on the way down but not on the way up

[PakoVince]

As you can see from the minimal demo, when you load in you have some text and when you scroll an observer triggers a timeline to play. And then the Observer disables and the user can scroll through the rest of the page. This is all great. However, after you scroll once you cant scroll back up to let the animation play in reverse. You actually have to scroll down again into the page and then come back up for it to play in reverse. This of course is not ideal. I understand that it is doing this because I have an onComplete() in the scrollTrigger that disables the Observer and then only re-enables it on an OnLeaveBack() 

 

So I understand the issue but because I am fairly new to Observers in general and using them with scrollTrigger I can not figure out the right approach for this... There is quite a bit of javaScript in my codepen but you should be able to ignore the top half. Everything inside the commented section IMAGE SLIDESHOW can be ignored. Its clearly marked with comments with a start and end point of that code. Furthermore the section in between the gsap.timeline() and the const scrollObserver is mostly just tl.to animations, which can also be ignored

I believe the issue I am trying to show is clear, to recreate the issue just scroll down once. Let the animation play out, and then try to scroll back up and you will see the animation will not reverse. You will notice if you scroll down, let the animation play out, then scroll down past the section, then scroll back up to the observer area, then it will in fact play in reverse

Any help at all is much apprieciated!

See the Pen vYqLEEy by calebluster (@calebluster) on CodePen.

[Rodrigo]

Hi,

 

Unfortunately there is far too much code in your demo (almost 300 lines) and we don't have the time resources to comb through all that and see what could be the issue, is beyond the scope of what we don in these free forums.

 

We do have a demo that uses the Observer + ScrollTrigger approach when the element is at the top of the DOM that seems to work OK:

See the Pen BagroVM by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps as a starting point.

Happy Tweening!