ARAS

That's awesome. Thanks for help!

Thanks for quick response and apologies for the confusion. Here is the CodePen link for specific example I'm trying to animate http://codepen.io/anon/pen/Wozmxj. So, at the moment I have all the edges between nodes visualised and some animation is in place. However I would like to draw edges in sequence (using a timeline) and process of drawing should be similar to what was visualised here https://codepen.io/GreenSock/pen/zLiux/. I am still trying to work out how VisJs works and I was sure that it is drawing SVG elements but I might be wrong.

Hello, I'm new to GSAP. I have done a few tutorials on Tweenmax and I have basic understanding of GSAP. However, I am struggling with GSAP integration with VisJs library. GOAL: I am trying to visualise network traffic between hosts using VisJs. I would like to animate the connections between hosts using GSAP. Please have a look at static visualisation here: http://legendary-broccoli.azurewebsites.net/Home/VisJs. The lines between nodes represent a connection and I would like to animate the diagram when a new connection is added or old one is removed. For example, if there is a new connection from 172.10.1.10 to 172.10.0.6, I would like to start drawing a line from a source host to a destination node. Current tool: To draw Bezier curves between the nodes I am using VisJs library. The library is using quadraticCurveTo method to draw lines between nodes. /** * Draw a line between two nodes * @param {CanvasRenderingContext2D} ctx * @private */ }, { key: "_line", value: function _line(ctx, viaNode) { // draw a straight line ctx.beginPath(); ctx.moveTo(this.fromPoint.x, this.fromPoint.y); // fallback to normal straight edges if (viaNode.x === undefined) { ctx.lineTo(this.toPoint.x, this.toPoint.y); } else { ctx.quadraticCurveTo(viaNode.x, viaNode.y, this.toPoint.x, this.toPoint.y); } // draw shadow if enabled this.enableShadow(ctx); ctx.stroke(); this.disableShadow(ctx); } }, { key: "getViaNode", value: function getViaNode() { return this.via; } Questions: Is it possible to achieve the goal using GSAP while integrating it with third party libraries? What would be the best way to achieve the goal? My assumption was to use Bezier and DrawSVG plugins. If possible could you provide some examples/code spinets? Is there anything else I should know?