ARAS
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by ARAS
-
-
Thanks for quick response and apologies for the confusion. Here is the CodePen link for specific example I'm trying to animate
See the Pen Wozmxj by anon (@anon) on CodePen
.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
See the Pen zLiux by GreenSock (@GreenSock) on CodePen
. 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?
Animating SVG Edges between Nodes using VisJs and GSAP.
in GSAP
Posted
That's awesome. Thanks for help!