Jump to content
GreenSock

RGR

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

Recommended Posts

image.png.0f2bdaa435e13f21c1235dee723a395c.png

 

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×