How can we draw an animated curved route line between 2 points on a 2d image, something very similar to github globe arc

[RGR]

 

Curved line between 2 points, similar to github glob arc animation. I am working on react js for this animation.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[mvaneijgen]

Hi @RGR GSAP is not a drawing library, it is an animation library and if you give it a SVG path it will easily draw that line for your using the DrawSVG plugin, but it needs a line to animate it.

 

Most people opted for creating shapes in a vector editing program and then load the SVG in HTML to have GSAP animate it. Or you could dynamically create lines, but that requires a deep understanding on how SVG draws elements. There are also libraries that specialize in that sort of calculations D3.js springs to mind, here is an arc example that draws curves between two points https://d3-graph-gallery.com/arc.html and if you create something with that GSAP will happily animate that for you, but again GSAP draws nothing by it self.