Bezier routes from the center on a world map

[nicmare]

Hi guys,

I need some brainstorming. I have a worldmap image in the background of a div. Inside the div i have several marker positioned with percentages to have it responsive. Now i would like to draw bezier curves from the center of the map to each point. And animate those curves in a fancy way. For instance sending pulsed dots over each line. Something like this:

[mikel]

Hey @nicmare,

 

These examples should give you some suggestions:

 

See the Pen dwooWw by mikeK (@mikeK) on CodePen

 

See the Pen XwKbeE by mikeK (@mikeK) on CodePen

 

See the Pen REXaxq by mikeK (@mikeK) on CodePen

 

If you have any questions about using GreenSock, feel free to contact us.

 

Happy tweening ...

Mikel

 

 

[nicmare]

Thank you Mikel. Last example is nice. But the problem is, customer inserts new destinations by time. So at the moment they are unknown for me. Therefore i need some kind of bullet prove drawing logic which draws new routes automatically correct and not flipped or straight. Thats the main task i see here.

[mikel]

Hey @nicmare,

 

Take a look at this: https://greensock.com/forums/topic/19706-staggering-data-from-multiple-arrays

 

Or:  https://www.amcharts.com/

 

Kind regards

Mikel