svg text animation with delay

Question

i want to implement something like this http://24ways.org/2013/animating-vectors-with-svg/ but i want each letter start draw after the finish of the previous. i dont know how to implement this with delay.

here is my code :

var init = function() {

path = new Array();
length = new Array();

for(var i=1; i<3; i++){
       path[i] = document.getElementById('path'+i);
       length = path[i].getTotalLength();
       path[i].style.transition = path[i].style.WebkitTransition = 'none';

       length[i] = length;
       path[i].style.strokeDasharray = length + ' ' + length;
       path[i].style.strokeDashoffset = length;

       path[i].getBoundingClientRect();
       path[i].style.transition = path[i].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';

       path[i].style.strokeDashoffset = '0';
    }
};

init();

in this example i have two letters 'sp' and i want 's' draw first and then when finish start the 'p' letter. in my example the two letters draw simultaneously. if someone could help me i would appreciate it.

here is the example http://jsfiddle.net/thLvLkq0/

Answer 1

How about just making the animation start after a delay?

I forked your fiddle to make it work like that.

http://jsfiddle.net/pz19fL7h/

for(var i=1; i<3; i++) {
    init(i);
    (function(i) {
        window.setTimeout(function() { start(i, duration); }, (i-1)*duration);
    })(i);
}

So basically, the behavior is:

1. initialize (hide) all the paths
2. set them all to start after a duration*i delay

If the duration of a path drawing is already known, this should be easy to do.