Konva.js: simultaneously run tweens look out of sync

Question

Here's the situation. I have a collection of nodes and need them to move up and then back down. For this I am using Konva.Tween as in the demo. As you can see, I create and run tweens in a for loop. What I want is all squares to move in sync, but it looks like some of them are moving altogether, but some of them are gone mad and moving with a delay or something. And the interesting part is, if you click the GO button many times, you will see that it's the same squares which go out of sync, not random ones, so this is something persistent.

What am I doing wrong and is there a correct way to implement what I need?

Answer 1

Add them to a Konva.Group and then run the tween on the group. You can add them to the group when they are created or you can rect.moveTo(group) [OR group.add(rect)] just before you need to tween them.

var tweenGroup = new Konva.Group();
layer.add(tweenGroup);

document.getElementById('go').addEventListener('click', () => {
    const durationSec = 0.3;
    for (const r of rects) {
        tweenGroup.add(r);
    }
    new Konva.Tween({
        node: tweenGroup,
        y: 70,
        duration: durationSec / 2,
        onFinish: function() {
            new Konva.Tween({
                node: tweenGroup,
                y: 100,
                duration: durationSec / 2
            }).play();
        }
    }).play();
})

Here is the updated codepen with them moving in sync. https://codepen.io/richardjonlewis/pen/VwrGqNN