ScrollTrigger scroll issue (toggle actions?)

[Nysh]

Not sure what I'm doing wrong here. Any help would be fantastic

I'd like the animation to play forwards when the scroller start is triggered (scrolling down) and reversed when the user scrolls back up.

My issue has to do with the first time it is triggered  on scrolling down. If the animation is given the opportunity to play the whole way through, then it works as expected. However, if the user scrolls back up before the animation has fully completed, instead of reversing, the animation jumps to the end state.

This issue only happens on the first scroll down, only if the animation has not fully completed AND the user decides to scroll back up (while it is playing forwards).

I've watched the intro vids, but I feel like I'm missing something kind of basic

Thanks,
N.

See the Pen bGEXaEP by Nysh (@Nysh) on CodePen

[ZachSaucier]

Hey Nysh. I think you're looking for 

toggleActions: "play none reverse none"

The third value is onEnterBack which is when I think you want it to reverse.

[Nysh]

Hi Zach, 

thanks for getting back  

The issue is still there with onEnterBack set to "reverse". Try scrolling past the trigger and quickly back up before the animation is complete. The animation just jumps straight to the end and then no longer works?

If on the first time scrolling down, you give it enough time to play through before scrolling back, then it works (and continues to subsequently work). But if the user scrolls down and back up quickly, for the first time, before the animation is complete - thats where i'm seeing the animation fail. 

 

See the Pen ZEQgjWZ by Nysh (@Nysh) on CodePen

 

[GreenSock]

I see what you mean, @Nysh, and it looks like that was a regression in the 3.4.0 core. Sorry about that. I've implemented a fix in the upcoming release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

[GreenSock]

I forgot to mention a few things:

• You're setting invalid transformOrigin values. You're doing one-word keywords like transformOrigin: "bottom" but it's supposed to be two values, space-delimited like "center bottom" or "50% bottom", etc. 
• You inverted the -= in your relative position parameter values. It's "-=0.35", not "=-0.35"
• You're using the old syntax where the duration is the 2nd parameter, but I'd recommend switching to the more modern v3 syntax where you set duration in the vars object. It still works either way, but eventually when v4 gets released, the really old v2 syntax probably won't work. 

[Nysh]

ahh no worries!

Hey thank you so much for all the info.  will def move to the new syntax. What's the ETA looking like for the upcoming release? 

[GreenSock]

It should be out by the middle of the week I'd guess. 👍