Creating an animated arrow

[Rathagos]

Let me first start by apologizing because I am admittedly NOT a coder/programmer. However, I do have an issue I am trying to resolve. I am in the education field, and am trying to illustrate various routes using an animated arrow from point "A" to point "B".

 

I am trying to create an animated arrow that starts at one point and stretches to another (e.g., starts in El Paso and stretches (ends?) in Dallas). The location is not as important as figuring out how/what I need to make the animation happen in Green Sock. One I see/understand how it's made, I can use it to make the many other instances of an animated arrow I need to complete my task.

 

I am using Green Sock because it is so versatile and does not provide the system issues that Flash presents to our network.

 

I have Adobe CS6 and am familiar with PhotoShop if I need to use it for any reason.

 

Thank you in advance!

[PointC]

Hi Rathagos 

 

Welcome to the GreenSock forum.

 

There would be several ways to accomplish a line drawing animation. You could use the DrawSVG plugin or you may be able to just animate the scale of the line. It would depend on how/what you're animating. Is this some sort of map image and the route lines will be straight? Will the routes be a curved path of some sort with an arrow icon drawing as it goes? Are the lines and map SVGs or just plain divs?

 

At this point I'm just guessing about your project so I can't really give you any detailed answers. If you could put together a CodePen demo for us, we could get you some better information and guidance. Here's some information about that.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Once you have that ready, please reply with the link and we'd be happy to take a look at it for you.

 

Happy tweening.