ScrollTrigger - When animation is triggered it needs to finish playing regardless of scroll

[lukestoked]

I'm trying to animate this scrolling section where the title and image are swapped out all your scroll down the page.

 

I've having trouble trying to stop the timeline from being stuck between stages. Ideally I'd like the animation to play in full as soon as it is trigged, not sure if I can put a time in second on each animation to try and achieve this.

 

Been a while since I last use GSAP so may be forgetting some of the basics .

See the Pen oNRKQYo by luke-stoked (@luke-stoked) on CodePen

[mvaneijgen]

I see this misunderstanding a lot, ScrollTrigger is build to hook animations to the scrollbar of the visitor, this means the scrollbar becomes the progress bar of the animation that is playing. But as you've already figured out there is ways to have ScrollTrigger behave like you want, but it will never be fully, but GSAP also has the observer plugins, which allows you do animate things based on certain actions it observers and so also the scroll actions. Check the demo below how it works and here the docs https://gsap.com/docs/v3/Plugins/Observer/  

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Also below a demo how you can use a timeline and then tween to labels on that timeline using the observer plugin 

See the Pen GRzrPPy by mvaneijgen (@mvaneijgen) on CodePen

 

And here an example that mixes normal scroll with the Observer plugin

See the Pen oNQPLqJ by GreenSock (@GreenSock) on CodePen

 

Hope it helps and happy tweening!