KineticJS: Play tween after finish other tween

Question

I just need animate something, i need create few tween for feew difrent object, example bubbles. So i just want animate bubble per bubble, i mean start animate bubble number two when animation bubble numer one was end. I write somethink like that:

var tweens = [];
      for(var i =0; i < bubbleTab.length; i++)
      {
        var tween = new Kinetic.Tween({
          node: bubbleTab[i], 
          x: invisibleBubbles[i].getX(),
          y: invisibleBubbles[i].getY(),
          easing: Kinetic.Easings.BounceEaseOut,
          onFinish: function(){
          tweens[i+1].play();
          },
          duration: 2
        });

        tweens.push(tween);
      }

or i just replace onFinish: function() to playNextTween(i) and write method

function playNextTween(i)
      {

        tweens[i].play();

      }

But still isn't working. I don't know what i can do. I try animate tween in loop but in loop all tween execute in the same time.

Any ideas? I know about GSAP and his TweenTimeline but with KineticJS no one ease from GSAP working

Answer 1

Instead of using

tweens[i+1].play();

Use a variable counter to iterate through your tween array. For example:

    var rects = layer.get('Rect');
    var rectCount = rects.length;

    var tweens = [];
    var tweenCounter = 1;
    for (var i = 0; i < rectCount; i++) {
        var tween = new Kinetic.Tween({
            node: rects[i],
            duration: 1,
            y: 150,
            onFinish: function() {
                if (tweenCounter !== rectCount) { //Prevent an undefined tween from being played at the end
                    tweens[tweenCounter].play();
                    tweenCounter++;
                }
            }
        });
        tweens.push(tween);
    }

JSFIDDLE