Jump to content
GreenSock

ARAS

Animating SVG Edges between Nodes using VisJs and GSAP.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:

  1. Is it possible to achieve the goal using GSAP while integrating it with third party libraries?
  2. What would be the best way to achieve the goal? My assumption was to use Bezier and DrawSVG plugins.
  3. If possible could you provide some examples/code spinets?  
  4. Is there anything else I should know?
Link to comment
Share on other sites

Hi ARAS,

 

Welcome to the forum!

 

I have zero experience with VisJS (never heard of it but again, there are so many JS libraries nowadays that no one will know them all - it will be the next Pokemon expansion set by the looks of it "Pokemon JS, Gotta Learn them All").

 

Erm... Anyways....

 

It is possible to integrate GSAP with pretty much anything that's a JavaScript object and tween its values. I can't give you any snippets or show any examples that are related to VisJS, maybe if you can set a little reduced case scenario other people can jump in with their thoughts.

 

I had a look at the link you sent but I am a bit confused as the link takes me to a visualisation that already is animating. Plus, it's a canvas element, not a SVG one so, DrawSVG won't be able to help you much unless your canvas is referencing SVG elements.

 

Ideally is best to provide a demo in CodePen or JSFiddle or some other online editor so we can focus on just the relevant code in your case, there's the whole rest of the site that makes it take a lot longer to identify what is relevant and what is not.

 

  • Like 2
Link to comment
Share on other sites

I don't have much to add to what Dipscom said.

GSAP can animate any value so you can animate the CSS rotation of a DOM element almost the same way you would rotate a camera in a 3D three.js WebGL world.

 

It sounds totally plausible that you would be able to animate the coordinates of visjs objects and render lines between them.

 

The demos below aren't exact solutions to what you are doing but might serve as inspiration or perhaps proof of what is possible when you animate a few values

 

 

http://codepen.io/chrisgannon/pen/ogypKa?editors=0010

http://codepen.io/chrisgannon/pen/PwQXgG?editors=0010

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi ARAS,

 

Thanks for the Pen, it helps and does make a bit more sense now.

 

The bad news is that VisJS is not drawing an SVG shape, at least not in the example you have provided. It's drawing shapes in canvas and from a quick glance VisJS does not offer ways to animate the actual connections between the nodes.

 

I'm afraid this is more of a question to the VisJS forums rather than the GSAP, as I said, I have no experience with it and can't really dedicate the time to learn that framework to see if I can come up with a way to do it. 

 

If you can find out how the edges are being drawn, we surely can make GSAP animate the values. But so far, from what I can see, the edges are on a on/off value only. No option to animate the length of it.

  • Like 1
Link to comment
Share on other sites

That's awesome. Thanks for help! 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×