GSAP ScrollTrigger syncing multiple timelines

[delivous 5 Likes (Newbie)]

I'm trying to create a roadmap animation using GSAP ScrollTrigger. I'm stuck at syncing the timeline that reveals the line and the timelines that reveal the dots.

I'm not sure how I can achieve the following:
1. Keep the edge of the line always at the center
2. Fade in the dots at the center.

I suspect my approach isn't the right one? Any pointers are much appreciated!

See the Pen poLgyJK?editors=0010 by delivious (@delivious) on CodePen

[delivous 5 Likes (Newbie)]

I fixed the issue by dissecting the line into multiple segments and sequencing them one after another.