Okay just to make this simple, I am going to give my element positions and animations some shorthand names/definitions:
Tween-A: The first animation to run on page load, moving from Position-A to Position-B.
Tween-B: The animation with an attached/scrubbed scrollTrigger that animates from Position-B to Position-C as the page is scrolled down (and reverse on scroll up)
Position-A: the natural (hidden) starting position of the text, set in the CSS.
Position-B: the base visible position of the the text; the ending position of Tween-A, and the starting position of Tween-B.
Position-C: the final hidden position of the text; the ending position of Tween-B
----------------------
What I currently have working (potentially poorly) is taking some text from Position-A, then on page load running Tween-A to animate to Position-B. Then, as the user scrolls the page, running Tween-B, to animate from Position-B to Position-C. This is what my demo shows.
However, what I cannot for the life of me figure out (I have tried timelines, standalone scrollTriggers, and a whole other list of properties I am probably using wrong) is how to have the lines enter in from Position-A, but if the page is scrolled before Tween-A finishes, smoothly transition from where ever they they happen to be based on the progress of Tween-A, to wherever they should based on the progress of Tween-B. Finally, if the page is scrolled back up, animate with Tween-B back to Position-B.
If you look at the demo, and start scrolling before Tween-A finishes, you will see first, the lines just continue to finish their animation from Tween-A, and then second, an abrupt jump from Position-B to where ever they are supposed to be based on the progress Tween-B. This is the part I am trying to smooth out.
The demo doesn't make an attempt to do this part at all, because I have tried so many different ways to make it happen, and honestly I have no idea what I'm doing.