Stop previous infinite tween after scrollTrigger hits

[kinglycodes]

Problem:

How can I stop an infinite previous tween, when the following tween with scrollTrigger is ended?

 

In the example the infinite previous tween starts again, after the scrollTrigger tween is ended.

You have to wait 2 seconds to see it.

 

I have created a stackblitz which shows the exact problem

Stackblitz Example

[GreenSock]

I noticed a few mistakes:

1. You're nesting an animation that has a ScrollTrigger INSIDE a timeline. That can't logically work because the playhead can't be controlled by both a parent timeline AND the scrollbar position (they could be going in completely different directions). Never nest ScrollTriggers inside animations that are inside other timelines. 
2. You're creating conflicting tweens. The infinitely bouncing one is fighting for control of opacity of the same element that's also trying to fade it out. 

I think the simplest solution is to just wrap your bouncing element in a wrapper so you can control their opacities independently: 

https://stackblitz.com/edit/gsap-stop-previous-tween-ghlqdk?file=pages%2Findex.js

 

I hope that helps. 

[kinglycodes]

Thank you so much, you saved my day!

 

It's working perfectly and I learned new things!