Jsplumb trunk connection

Question

I created a very simple setup with jsplumb that displays the top item and then connects that item to six others on the screen.

I am wondering if it is possible to animate connecting lines so that they seem to grow from the top element, and not just appear.

Here is the code I copied to create a simple layout.

jsPlumb.ready(function() { jsPlumb.importDefaults({ // notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother // than the curves on the first demo, which use the default curviness value. Connector : [ "Bezier", { curviness:50 } ], PaintStyle : { strokeStyle:"#000000", lineWidth:6 }, EndpointStyle : { radius:1, fillStyle:"#000000" }, HoverPaintStyle : {strokeStyle:"#ec9f2e" }, EndpointHoverStyle : {fillStyle:"#ec9f2e" }, Anchors : [ "BottomCenter", "TopCenter" ] }); jsPlumb.connect({source:"starterPoint", target:"window1"}); jsPlumb.connect({source:"starterPoint", target:"window2"}); jsPlumb.connect({source:"starterPoint", target:"window3"}); jsPlumb.connect({source:"starterPoint", target:"window4"}); jsPlumb.connect({source:"starterPoint", target:"window5"}); jsPlumb.connect({source:"starterPoint", target:"window6"}); }); 

The CSS I use is as follows:

 body { width: 960px; margin: 0 auto; } #starterPoint { width: 8px; height: 8px; margin: 0 auto; background-color:#000; } #window1, #window2, #window3, #window4, #window5, #window6 { width: 100px; height: 50px; float: left; margin-left: 50px; margin-top: 70px; background-color:#036; } 

And the contents of the body section of my html looks like this:

 <div id="starterPoint">&nbsp;</div> <div id="window1">&nbsp;</div> <div id="window2">&nbsp;</div> <div id="window3">&nbsp;</div> <div id="window4">&nbsp;</div> <div id="window5">&nbsp;</div> <div id="window6">&nbsp;</div> 

I would like the connectors to “grow” from starterPoint to each of the window elements below.

I am VERY new to using jsplumb and I cannot find much information there.

thanks

Answer 1

Make a new demo,

HTML side:

 <div id="main"> <div class="component window" id="window1"><strong>Window 1</strong></div> <div class="component window" id="window2"><strong>Window 2</strong></div> </div> 

CSS side:

 /** ELEMENT POSITIONS **/ #window1 { top:5em;left:4em;} #window2 { top:5em; left:49em;} /** OPEN SANS FONT **/ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src:local('Open Sans'), local('OpenSans'), url("OpenSans-Regular.ttf") format('truetype'), url("OpenSans.woff") format('woff'); } body { padding:0; margin:0; background-color:white; font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color:#eaedef; } .component { border:1px solid #346789; border-radius:0.5em; opacity:0.8; filter:alpha(opacity=80); background-color:white; color:black; padding:0.5em; font-size:0.8em; } .component:hover { border:1px solid #123456; box-shadow: 2px 2px 19px #444; -o-box-shadow: 2px 2px 19px #444; -webkit-box-shadow: 2px 2px 19px #444; -moz-box-shadow: 2px 2px 19px #fff; opacity:0.9; filter:alpha(opacity=90); } .window { background-color:white; border:1px solid #346789; box-shadow: 2px 2px 19px #e0e0e0; -o-box-shadow: 2px 2px 19px #e0e0e0; -webkit-box-shadow: 2px 2px 19px #e0e0e0; -moz-box-shadow: 2px 2px 19px #e0e0e0; -moz-border-radius:0.5em; border-radius:0.5em; width:5em; height:5em; position:absolute; color:black; padding:0.5em; width:8em; height:8em; line-height: 8em; font-size:0.8em; -webkit-transition: -webkit-box-shadow 0.15s ease-in; -moz-transition: -moz-box-shadow 0.15s ease-in; -o-transition: -o-box-shadow 0.15s ease-in; transition: box-shadow 0.15s ease-in; } .window:hover { border:1px solid #123456; box-shadow: 2px 2px 19px #444; -o-box-shadow: 2px 2px 19px #444; -webkit-box-shadow: 2px 2px 19px #444; -moz-box-shadow: 2px 2px 19px #fff; opacity:0.9; filter:alpha(opacity=90); } 

And the side of jQuery:

 jsPlumb.bind("ready", function() { jsPlumb.importDefaults({ // notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother // than the curves on the first demo, which use the default curviness value. Connector : [ "Bezier", { curviness:50 } ], PaintStyle : { strokeStyle:"#000000", lineWidth:6 }, EndpointStyle : { radius:1, fillStyle:"#000000" }, HoverPaintStyle : {strokeStyle:"#ec9f2e" }, EndpointHoverStyle : {fillStyle:"#ec9f2e" }, Anchors : [ "BottomCenter", "TopCenter" ] }); jsPlumb.connect({source:"window1", target:"window2"}); jsPlumb.bind("click", function(c) { var p = $(c.canvas).find("path"), l = p[0].getTotalLength(), i = l, d = -10, s = 10, att = function(a, v) { for (var i = 0; i < p.length; i++) p[i].setAttribute(a, v); }, tick = function() { if (i > 0) { i += d; att("stroke-dashoffset", i); window.setTimeout(tick, s); } }; att("stroke-dasharray", l + " " + l); tick(); }); }); 

The key point is jsPlumb.bind("click", function(c) { } ) ; . This function is launched when you click on the path. And he changes TotalLength to p[i].setAttribute(a, v);

In addition, there is a codepen link HERE to see the work.