Group transition not drawn to canvas until forced by other actions

Question

I am trying to transitionTo a group and it does it, but I can see the transition only when something else forces stage to be drawn. Transition itself doesn’t update the canvas while it’s going. There are 4 Kinetic.Image's and 4 Kinetic.Text's inside the group. Any idea how to get it working?

Let's say #score group x: 1000

var points = self.stage.get('#scoreGroup')[0];
points.transitionTo({
    x: 800,
    duration: 5
});

Answer 1

I'm afraid more code would be needed to actually tell what might be missing, but my guess is that you added the elements to the group, which was already in a layer, which was already on the stage. Your transitionTo is being rendered in the buffer, but because the elements were never "drawn" on the stage, the animation isn't being translated to the viewable stage. Perhaps if you provide more code or create a jsFiddle of this, I can provide more insight.

In the meantime, make sure your 4 images and 4 text objects appear on the stage before you call the transitionTo (comment out the transition temporarily), then give it another go.

var stage = new Kinetic.Stage({container : 'container', width : 800, height : 600});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({id : 'scoreGroup', x : 0, y : 0});
layer.add(group);
stage.add(layer);
// add images and text as usual
var imageObj = new Image();
imageObj.onload = function() {
    var image = new Kinetic.Image({x : 20, y : 20, width : 100, height : 100, image : imageObj});
    group.add(image);
};
imageObj.src = '[path_to_image]';
layer.draw();
group.transitionTo({x : 600, y : 400, duration : 3});

Let me know what you come up with.