[ScrollTrigger: Animate two timelines one after another]

Thank you @GreenSock! That cleared a lot of things. I did try combining the tweens with a staggerFrom but that didn't work. Thank you for showing me the right way.

I have a question if you don't mind answering. Is it possible to change the pinning element after a certain amount of tweens have animated in a timeline?

[ScrollTrigger: Animate two timelines one after another]

I'm trying to do my first ScrollTrigger animation where I have two sections inside a container; first one has three boxes and the next one has a few lines of text. The goal is to animate the lines of text as the user scrolls down only after all the boxes in the previous container have been animated.

 

I have created an example below to demonstrate this. The boxes are being animated as needed, however the lines of text begins animating, while the boxes are still animating. Also, the elements and text containers overlap each other.

 

I'd like the text container to not overlap and reveal the lines of text as they are visible on the viewport. Any idea what I could be doing wrong? Any help is much appreciated, Thank you!

See the Pen zYqzNqp?editors=1010 by zainny (@zainny) on CodePen