Weird effect at the end of ScrollTrigger

[devmartin]

First of all, I love GSAP so much. thank you !

I'm new to GSAP and I am currently studying the ScrollTrigger plugin.
I am trying to pin images on the left side.

the first and second image works just fine. however, when the "end-3" reaches the "scroll-end-3". there is this weird effect happening. the transform Y I applied on the previous pinned images gets reset to its original position. What I want is to save it as it is even when the scroll end trigger reaches the end.

everything is what I wanted to be. my only problems are the following:

1. Y position gets reset after the "end-3" trigger reaches "scroll-end-3" trigger.
2. when  I scroll fast at the end, the first and second image gets missing.

 

Am I missing something very obvious or I am doing a common mistake or both?
Thank you in advance.

See the Pen xxparwY?editors=0010 by devmartin055 (@devmartin055) on CodePen

[GreenSock]

Welcome to the forums, @devmartin. And more importantly welcome to GSAP/ScrollTrigger.

 

It looks like you're making one of the more common mistakes of nesting multiple ScrollTriggers inside tweens in a timeline. It's logically impossible to accommodate that (either the timeline's playhead controls the tween's playhead OR the scroll position does). 

 

See this article: 

 

 

So I'd recommend restructuring things accordingly. 

 

Good luck! If you get stuck and have a GSAP-specific question, let us know. 

[devmartin]

I will take a look, Thank you for such quick response @GreenSock! 

[devmartin]

1 hour ago, GreenSock said:

Welcome to the forums, @devmartin. And more importantly welcome to GSAP/ScrollTrigger.

 

It looks like you're making one of the more common mistakes of nesting multiple ScrollTriggers inside tweens in a timeline. It's logically impossible to accommodate that (either the timeline's playhead controls the tween's playhead OR the scroll position does). 

 

See this article: 

 

 

So I'd recommend restructuring things accordingly. 

 

Good luck! If you get stuck and have a GSAP-specific question, let us know. 

hello again @GreenSock,

is this what it looks like to make an independent tween?

See the Pen eYyLGjZ?editors=0010 by devmartin055 (@devmartin055) on CodePen

 

[GreenSock]

I'm having a tough time understanding exactly what you're trying to do but...

1. You should always create your ScrollTriggers in the order they'd trigger on the page (top-down). Currently, you've got 3 different ScrollTriggers all using ".parent-container" as the trigger, but your first one actually triggers AFTER the other two (start: "top top" would fire AFTER start: "top center"). If you really need to create them out of order, you can use the refreshPriority property to tell ScrollTrigger the proper order. 
2. You don't need to create your ScrollTriggers separately with ScrollTrigger.create() if you're just gonna pass an animation in. It's totally fine to do it that way - I'm just saying you could instead do gsap.timeline({ scrollTrigger: {...} })
3. Why are you creating 3 different ScrollTriggers that all use the same trigger instead of just one timeline that has one ScrollTrigger and then in that singe timeline, you can coordinate all your animations with the position parameter? Perhaps it'd help if you just focused on the raw animation first (don't wire it up to the scroll) and then once you're happy with that, you could hook it up to a ScrollTrigger? I may be misunderstanding what you're attempting - if so, sorry. Maybe it's because you want to have a different scrub value for each of the animations? 
4. Why are you animating from display: "none"?