Simon Turk

Thanks for the reply It's mostly working now - still a little flicker but I think your idea of extending past the edge is the best Idea, although I wasn't sure if I could extend the circle past the path it's following. I think extending the path might distort it and not flow? Plenty to play with Thanks again for your reply, I figured it was a bit of a complex use case and not really a gsap question per se -Simon

Hi Team, What I'm trying to achieve The overall effect is curvy timeline (vertical) that is revealed as the user scrolls down the page. As the user scrolls down the page, the curved line is drawn, dots are added to the line and content is revealed. The content is sourced from a CMS (rows), there are unknown number of rows, and the content in each row can vary in size/height The Tech This is all being done in React My approach I've broken the curvy line into multiple sections: Top - The start of the timeline (Data row 1) Middle 1 - The first Section (Data row 2) Middle 2 - The second section (data row 3) ...n middles sections Bottom - The end of the timeline Each is its own component which is responsible for the animation. Where I'm struggling All this, for the most part works OK. Where I'm getting unstuck is: 1) Nicely transitioning from row to row (leading dot on the motion path) 2) On scroll up removing the lead dot. I have a demo in stackbitz, I hope this is ok? I realise there's a bit going on in this so let me know if I need to simplify further. https://stackblitz.com/edit/react-ahd2tq?file=src%2FApp.js