Drawing an animated line from Div to Div

[glitcheclipse]

I am just getting introduced to GSAP and I basically have it set up in angular was able to get a circle svg moving. Yeah me. I am looking into this animation library because I have a need to create a node system for my app. Between the nodes I will need to create an animated line that will start from the node I click on and terminate at a different node clicked as an endpoint. You've seen the flow chart systems I am sure, so something similar to that. But I will also need to disconnect the line when it is dragged off of a node. Drawing the animated line is I need guidance on.

 

Since I am brand new to this I have no idea where to start, but after watching a conference video online where GSAP was talked about I believe it might be what I am looking for and would allow me some other options as my interactive node diagram grows. 

 

I am not worried about the coordinate system for mouse clicks. I can handle that. But I need to know how to draw the animation and where to start.

 

The closest example I can find to what I am wanting to accomplish is referenced in this conference video from a few years ago. 

refer to time 1:05 in the intro. 

https://www.youtube.com/watch?v=30li6w62eCo

 

There is a tree visualization in that video as an example. I am not looking for anything that complicated, but I would need the user to interactively draw the lines from a node to another node (or element) in a tree to connect it and disconnect it. I feel that if this could be created as an example, that it was completely possible. I just need a starting point. 

 

Thank you and I am excited to get started. 

[ZachSaucier]

Hey glitcheclipse and welcome to the GreenSock forums!

 

9 hours ago, glitcheclipse said:

The closest example I can find to what I am wanting to accomplish is referenced in this conference video from a few years ago. 

refer to time 1:05 in the intro. 

https://www.youtube.com/watch?v=30li6w62eCo

Based on that clip, I'd set things up as a large SVG with paths from node to node. Then when a node is clicked, you animate the paths to the sub nodes using DrawSVG. 

 

9 hours ago, glitcheclipse said:

I would need the user to interactively draw the lines from a node to another node (or element) in a tree to connect it and disconnect it.

That's a bit more complicated, especially if you want the lines to be curved similar to the example video. If there's a very limited amount of lines you could create paths from every node to each node it can go to and just show/DrawSVG the path from one to the other. If you have a lot of nodes/possibilities then you probably want a solution that creates dynamic paths based on the nodes clicked. 

 

For the dragging you could make use of GSAP's Draggable.

[glitcheclipse]

Thank you for a starting point. I didn't think it was going to be easy, but if I could find a library that could specifically do what I wanted to do I wouldn't be trying to create it.  

 

From an interaction standpoint. Generally a user will only be trying to connect one node to another (so one line). I would like to give the option for them to select multiple starting nodes and connect to a single node. But that is the extent of the interactive "connection" piece I am envisioning. 

 

From a loading standpoint though, they could build elaborate systems of nodes and on load that would need to draw all the connected nodes and relatively fast. But that would just be looping through the saved paths and getting them to draw much like the video is doing on click.  I wouldn't need the curved path as as a starting point. A straight line would do to start with. 

 

Thank you again. I'll start with the DrawSVG  and venture into this new world of graphics and see how much trouble I can get into.  

[Shrug ¯\_(ツ)_/¯]

You might find something useful in this older thread. I mentioned some 3rd party libraries in this post that might be useful to you for this sort of thing.

[glitcheclipse]

The older post link has a node example that looks very useful. Thank you. I've seen the recommendations for the 3rd party libraries. Libraries like Jointjs are ideal, but they are extremely expensive if you are just a single developer designing your own thing and not doing this as part of a larger company. 

 

Thank you for the help. This should get me going. 

[Shrug ¯\_(ツ)_/¯]

4 minutes ago, glitcheclipse said:

I've seen the recommendations for the 3rd party libraries. Libraries like Jointjs are ideal, but they are extremely expensive if you are just a single developer designing your own thing and not doing this as part of a larger company. 

Not all of them require investment most are open source.

[glitcheclipse]

Most of the open source libraries I have found do not support types for Angular 2+ and will not load correctly if typescript cannot interpret the JavaScript. Trying to find a library that does or is native to angular that is not a paid solution isn't as common unfortunately. 

 

If you know of one, I am all ears. 

[ZachSaucier]

1 minute ago, glitcheclipse said:

will not load correctly if typescript cannot interpret the JavaScript

You could always write your own TS declarations.

[OSUblake]

Any valid JavaScript is valid TypeScript. If a library doesn't have types, you can easily ignore it.

 

declare var SomeLibrary: any;