Animate a line going from point A to B

[Abarth]

I've recently got lucky with an answer from PointC in another thread, and now having spent a few hours researching without luck on another matter, I guess I'll try my luck again.

 

The problem: I have 30 points, each with a X and Y value (DIV's with a Top and Left setting), placed around a map of 1536x1080px.

A user can select any of these points, and when that happens, a line should be drawn (animated in) from one point, to the selected one.

 

This seems really straight forward, and to some extend I have managed to do that, with canvas drawing (p5.js), but it turns out extremely unsharp, and seems to be way to complicated, for what it should do, I've even tried just creating a DIV, and animating on it's width, thereby faking a line.

 

I'm assuming maybe the GSAP SVG animation tools can solve this, but had no luck finding it, it's all about pre made SVG files from illustrator, which then are masked in animations, I can't do that, seeing as I have too many points, and never know how many new ones will be created.

 

Any good solutions to this? It seems to simple, to be this complicated :S

 

/ Chris

See the Pen RppBaY by Abarth77 (@Abarth77) on CodePen.

[Carl]

It would be great to see a demo of what you've done so that we can gauge what is too unsharp about p5.js

 

You should get really crisp lines from SVG and you can inject <line> or <path> elements dynamically and update their values to animate them with GSAP.

 

 

 

there are plenty of tools out there to help you dynamically create SVGS too D3 is pretty popular:

http://bl.ocks.org/paulovn/9686202

http://christophermanning.org/projects/building-cubic-hamiltonian-graphs-from-lcf-notation

 

 

Pixi is another canvas library and here is a demo I found http://jsfiddle.net/tahirahmed/jy156qox/

 

 

Blake Bowen does a lot with animated lines in both SVG and canvas. Great results!

 

http://codepen.io/osublake/pen/vXZPxN (move circle)

http://codepen.io/osublake/pen/RrBXxB (move circle)

http://codepen.io/osublake/pen/QKYGyo

http://codepen.io/osublake/pen/yakOjY

[Abarth]

I wrote in this forum thinking I could easily animate this using some attr animation obviously, but thanks to Carl, I got a nice reminder of snap.svg which solved the problem for me with 9 lines of code, thanks Carl.

 

And thanks for this awesome forum, the good atmosphere and kind members.

 

See the Pen RppBaY by Abarth77 (@Abarth77) on CodePen.

 

 

[UnioninDesign]

Just in case anyone reads this and wants to go a little deeper, I have a related question from a few weeks ago, similar use case: