Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'visjs'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. 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?
×