jsplumb animate connector lines

Question

I have created a very simple set up with jsplumb that displays a top element and then connects that element to six others on the screen.

I am wondering if it is possible to animate the connector lines so that they appear to grow from the top element rather than just appearing.

Here is the code that I have copied to create the 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 have used 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 content 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'm VERY new to using jsplumb and I can't seem to find a lot of information out there about it

Thanks

Answer 1

Let's make 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 JQuery side :

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 triggered when mouse clicked on the path. And it change the TotalLength with p[i].setAttribute(a, v);

Also, there is a codepen link HERE to see working.