kineticJS loading images sequentially (and set fillPatternImg) opacity tween not working

Question

I am creating a little app with KineticJS which creates multiple nodes (RegularPolygons). After the stage is loaded (triggered with play(); ) I fill each node sequentially with an (pattern)image (triggered with loadImages(urls);.

This works fine, but now I want to add a nice fade-in effect with a Tween, like:

set all nodes > load single image > set node patternImage > tween to opacity 0.8 > on tween complete, load next image (repeat).

For some reason the tweens won't play, they just appear in complete state (opacity 1) ;(

var stage = new Kinetic.Stage({
    container: 'canvas',
    width: $(window).width(),
    height: $(window).height()
});

var layer = new Kinetic.Layer()
var layer2 = new Kinetic.Layer()
var urls = 
[
    'http://lorempixel.com/300/300/sports/1',
    'http://lorempixel.com/300/300/sports/2',
    'http://lorempixel.com/300/300/sports/3',
    'http://lorempixel.com/300/300/sports/4',
    'http://lorempixel.com/300/300/sports/5',
    'http://lorempixel.com/300/300/sports/6',
    'http://lorempixel.com/300/300/sports/7',
    'http://lorempixel.com/300/300/sports/8',
    'http://lorempixel.com/300/300/sports/9',
    'http://lorempixel.com/300/300/sports/10',
    'http://lorempixel.com/300/300/business/1',
    'http://lorempixel.com/300/300/business/2',
    'http://lorempixel.com/300/300/business/3',
    'http://lorempixel.com/300/300/business/4',
    'http://lorempixel.com/300/300/business/5',
    'http://lorempixel.com/300/300/business/6',
    'http://lorempixel.com/300/300/business/7',
    'http://lorempixel.com/300/300/business/8',
    'http://lorempixel.com/300/300/business/9',
    'http://lorempixel.com/300/300/business/10'/*,
    'http://lorempixel.com/300/300/cats/1',
    'http://lorempixel.com/300/300/cats/2',
    'http://lorempixel.com/300/300/cats/3',
    'http://lorempixel.com/300/300/cats/4',
    'http://lorempixel.com/300/300/cats/5',
    'http://lorempixel.com/300/300/cats/6',
    'http://lorempixel.com/300/300/cats/7',
    'http://lorempixel.com/300/300/cats/8',
    'http://lorempixel.com/300/300/cats/9',
    'http://lorempixel.com/300/300/cats/10',
    'http://lorempixel.com/300/300/nature/1',
    'http://lorempixel.com/300/300/nature/2',
    'http://lorempixel.com/300/300/nature/3',
    'http://lorempixel.com/300/300/nature/4',
    'http://lorempixel.com/300/300/nature/5',
    'http://lorempixel.com/300/300/nature/6',
    'http://lorempixel.com/300/300/nature/7',
    'http://lorempixel.com/300/300/nature/8',
    'http://lorempixel.com/300/300/nature/9',
    'http://lorempixel.com/300/300/nature/10',
    'http://lorempixel.com/300/300/people/1',
    'http://lorempixel.com/300/300/people/2',
    'http://lorempixel.com/300/300/people/3',
    'http://lorempixel.com/300/300/people/4',
    'http://lorempixel.com/300/300/people/5'*/
];

// LOAD IMAGES
function loadImages(arrayOfImages, index) {

index = index || 0;

if (arrayOfImages && arrayOfImages.length && arrayOfImages.length > index) {
    var img = new Image();
    img.onload = function() {

        var pane = layer2.get('#pane_' + index );               
        pane.fill('').fillPatternImage(img);
        stage.draw(); // <<< THIS WORKS 

        var tween = new Kinetic.Tween({
        node: pane, 
        duration: 1,
        opacity: 0.8,
        easing: Kinetic.Easings.BackEaseOut,
        onFinish: function() {
            loadImages(arrayOfImages, index + 1
           }
        }).play; // <<< NOT WORKING

        //setTimeout(function(){ loadImages(arrayOfImages, index + 1); }, 200);

    };
    img.src = arrayOfImages[index];
} 

}   

function start() {

 console.log("numOfPanes: " +urls.length);

 for (i = 0; i <= urls.length; i++) { 

    var shape0 = new Kinetic.RegularPolygon({
        x: i * 15,
        y: i * 15,
        sides: 5,
        rotation: i * 10,
        radius: 70,
        fill: 'Red'
    });

    var shape1 = new Kinetic.RegularPolygon({
        x: i * 15,
        y: i * 15,
        sides: 5,
        rotation: i * 10,
        radius: 70,
        opacity: 0,
        fillPatternOffset: {x:-220, y:70},
        id: 'pane_' + i,
        name: 'pane',
        fill: 'Green'
    });

    layer.add(shape0);
    layer2.add(shape1);

}

stage.add(layer,layer2);

}

// INIT
start();

// trigger loadimages() with console
loadImages(urls);

Answer 1

play is a function. So you should call it.

   var tween = new Kinetic.Tween({
    node: pane, 
    duration: 1,
    opacity: 0.8,
    easing: Kinetic.Easings.BackEaseOut,
    onFinish: function() {
        loadImages(arrayOfImages, index + 1
       }
    }).play();

Also: when you are finding node with get function it returns Collection. So if you need just node use:

var pane = layer2.get('#pane_' + index )[0];