[Svg draw on scroll where the svg is "split" across react components]

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

[Svg draw on scroll where the svg is "split" across react components]

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