Animating jsplumb line

Question

Is there any way to animate jsplumb connecting lines as they are being drawn? I want to have an animation, instead of just a line appearing.

I call jsPlumb.connect to draw the line upon clicking a div, like this

$("#manchester").on('click', function() {
    jsPlumb.connect({source: "manchester", target: "paris"});
});

Answer 1

First we need to bind an event whenever a connection has been made in order to animate the newly created connection:

jsPlumb.bind("jsPlumbConnection", function(ci) {

            new animateConn(ci.connection); //call the animate function for the newly created function              
}

Now in the animation function just update the position of connection overlay to get the animation. Before doing make sure that you add overlay to your connections:

jsPlumb.connect({
source: "manchester", target: "paris",
overlays:[ 
    "Arrow", 
    [ "Label", { location:0.45, id:"arrow" } ]
]
});

Now the animateConn function:

        var interval = null; 
        animateConn = function(conn) {
            var arrow = conn.getOverlay("arrow");
            interval = window.setInterval(function() {
                arrow.loc += 0.05;
                if (arrow.loc > 1) {arrow.loc = 0;}
                try{
                    conn.repaint(); // writing in try block since when connection is removed we need to terminate the function for that particular connection
                }catch(e){stop();}
            }, 100);                 
        },
        stop = function() {
            window.clearInterval(interval);
        };

To customise the overlay refer the API DOC.