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!