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

[Simon Turk]

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

[GreenSock]

Welcome, @Simon Turk! Looks like you're doing a nice job there, but it's a complicated thing partially because of the way you're engineering it with a bunch of different blocks that are all trying to act like they're one big cohesive curve/animation. It certainly looks to me like it's well beyond the type of help we can provide for free in these forums, but here are a few ideas: 

1. Maybe extend the path artwork in each <svg> so that goes beyond the very edge of the section, thus the circle can keep traveling past the edge naturally instead of suddenly stopping when it gets to the edge. Basically overshoot.
2. Or maybe just use the same exact artwork throughout, but change the viewBox values so that each section is focused where you need it to be. You can use the start/end motionPath properties to isolate each chunk too. 

If you still need some help, you're welcome to contact us about paid consulting options. Good luck with the project! 👍

[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

[GreenSock]

1 hour ago, Simon Turk said:

I wasn't sure if I could extend the circle past the path it's following.

With MotionPathPlugin, it can only animate on the path - you can't really tell it to go off the path like that although you probably could just kinda "fake" it by appending another tween at the start/end to animate the "y" up/down a tad further. Or adjust your artwork so the path extends a bit. 

 

Have fun!