Draw line between points in React js

[Lema]

Hi everyone, I'm trying to create an animation in React Js, that will animate line starting from  the 1st point, then it will go to 2nd, 3rd and etc  when page loads, in total I'm planning to have 8 points on the page. If anyone knows how this idea can be implemented using gsap, I would be very grateful as I can't figure it out by myself.

This is a link to codesandbox

Any help and suggestions will be greatly appreciated,

 

Thank you)

See the Pen App.js by s (@s) on CodePen

[Rodrigo]

I would suggest using either SVG with the Draw SVG Plugin or canvas to draw the lines. Either way shouldn't be too complicated if we're talking about straight lines between each point (like the image you added). It could get a bit more complex for lines with more than 2 points in canvas. In SVG you can use a polyline for that.

 

This is something I've been working on for a few weeks, it uses SVG in a Vue component and since performance is good enough there was no need to use canvas. Unfortunately I can't share any code of this, but the animation is done using the Draw SVG plugin on click/touch events:

 

Another alternative would be to create a timeline and use that to draw between each point.

 

Unfortunately you caught me with very little time so I can't create a demo right now, but hopefully this information is enough to get you started.

 

Happy Tweening!!!

[ZachSaucier]

This is quite easy to do  with GSAP's MotionPathPlugin and DrawSVGPlugins: 

See the Pen mdyxvGX by GreenSock (@GreenSock) on CodePen