Tween multiple blobs in KineticJs

Question

How can I tween multiple blobs in Kinetic JS?

I can tween a blob using two set of points, but what about more than that? Here's what I have so far:

    JS
    setTimeout(function () {
      for (var i = 0; i < blobPoints.length; i++) {
        var tween = new Kinetic.Tween({
          node: blob,
          duration: .5,
          points: blobPoints[i],
          onFinish: function () {
            //this is where I want to call next tween using next set of points
          }
        });
        tween.play();
      };
    }, 300);

Complete demo here: http://jsfiddle.net/4KLf8/1/

If you notice, it tweens to the next set of points but very fast, it's even hard to see. I want it to complete the tween first before it calls the next set of points. I'm not quiet sure how to do that.

Answer 1

function runTween(number) {
    var tween = new Kinetic.Tween({
            node: blob,
            duration: .5,
            points: blobPoints[number],
            onFinish: function () {
                var next = number+ 1;
                if (blobPoints[next]) {
                     runTween(next);
                }
            }
        });
        tween.play();
}
setTimeout(function () {
    runTween(0)
}, 300);

http://jsfiddle.net/4KLf8/3/