ScrollTrigger toggle action, different point on play and reset?

[kisha]

Hi all,

I made a codepen demo, it works fine on scrolling down, but when I scroll back up, I want reset to be triggered but only when the element is 100% out of view, and I dont want to use reverse instead of reset. 

Basically I dont want reset animation to be visible on scrolling back, and the reason I want reset animation there is so my tween will play again on scrolling down.

I tried creating another tween with scrolltrigger but with no luck. How can I archive this? 
Maybe with changing start: "top 85%" to start: "top 100%" onComplete? 
 

See the Pen BaKzGVM?editors=1010 by kishadark (@kishadark) on CodePen

[ZachSaucier]

Hey kisha and welcome to the GreenSock forums. 

 

You can achieve this by using two ScrollTriggers: one for the enter and one for the leave. I showed how to do this just yesterday in a different thread:

 

[ZachSaucier]

Applied to your demo:

See the Pen eYZzxRQ?editors=0010 by GreenSock (@GreenSock) on CodePen

[kisha]

42 minutes ago, ZachSaucier said:

You can achieve this by using two ScrollTriggers: one for the enter and one for the leave. I showed how to do this just yesterday in a different thread:

 

Hi and thanks.

It worked for me.
Do you mind telling me why use of  anim.pause(0) for onLeaveBack? Does pause(0) reset it? I read some docs and saw options like reset and reverse for toggle actions.

[ZachSaucier]

5 minutes ago, kisha said:

Do you mind telling me why use of  anim.pause(0) for onLeaveBack? ... I read some docs and saw options like reset and reverse for toggle actions.

If you have two ScrollTriggers controlling the same animation then it's best to not directly hook up the animation to the ScrollTriggers but to use the callback methods like I showed. That way they don't conflict. But if you are just using the callback methods then the toggleActions don't apply. Does that make sense? If not, I recommend watching the ScrollTrigger video again.

 

6 minutes ago, kisha said:

Does pause(0) reset it?

Yep!

[kisha]

Thanks! I sure will rewatch it.