JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
    <div id="container"></div>

CSS

body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 400,
    height: 300
});

var layer = new Kinetic.Layer();
var book = new Image();
book.onload = function() {
    bookImg = new Kinetic.Image({
        x: 100,
        y: 110,
        image: book,
        name: book,
        offset: [85.5, 106],
        opacity: 0,
        scale: { x:0.5, y:0.5 }
    });
    //layer.add(rect);
    //layer.add(circle);
    layer.add(bookImg);
    stage.add(layer);
}
book.src = "http://www.9positions.com/product_images/attribute_value_images/800.preview.png";

setTimeout(function() {
    bookImg.transitionTo({
        x: 100,
        y: 110,
        opacity: 1,
        duration: 4,
        scale: { x:1, y:1 }
    });
}, 1000);