create curved line in-between two or more points with animation with the help of Greensock and greensock's bazier curve

[Vivek]

Hey,

 

Can we create curved line in-between two or more points with animation with the help of Greensock and greensock's bazier curve.

 

Just like to show an airplane flight route.

 

The above example is created in Flash CC 2014 using Canvas.

 

I dont want to use the DrawSVG plugin. (Thank you Greensock Facebook team for suggesting this to me.)

 

I want this to be in canvas with the help of greensock animation.

 

 

 

 

 

See the Pen NPBwaX by vivek2512 (@vivek2512) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

I believe you'll find this post very helpfull:

 

http://greensock.com/forums/topic/10688-challenge-convert-svg-path-to-bezier-anchor-and-control-points/

 

Let us know if you need more help with this matter, but I believe this should help. It's a bit of work but as you can see you can get the bezier path based on a path drawn in Illustrator that can be used to create a bezier path. Since you're already drawing the line, adding an element on top of that shouldn't be hard.

 

Finally some time ago I created this little code to draw a canvas circle using an arc(), so you can use that as well (lines 47-87):

 

See the Pen ohylp?editors=001 by rhernando (@rhernando) on CodePen

 

Happy Tweening!!

[Diaco]

Hi Vivek 

 

pls check this out for DOM base animation : 

See the Pen LEjQer by MAW (@MAW) on CodePen

 

but i think that's better to using SVG lineDrawing , pls take a look at DrawSvg plugin :

 

See the Pen PwBRxJ by MAW (@MAW) on CodePen

 

and check out the DrawSVGPlugin Doc. :

 

http://greensock.com/docs/#/HTML5/Plugins/DrawSVGPlugin/