JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.3.min.js"></script>
<div id="container"></div>
<input id="button" type="button" value="Start tweens"></input>

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 400,
    height: 400
    // <-- remove drag function
});

var background = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: stage.getWidth(),
    height: stage.getHeight(),
    fill: '#FF0000'
});

var layer = new Kinetic.Layer({
    draggable: true,
    dragBoundFunc: function (pos) { // <-- added drag function here
        return {
            x: pos.x,
            y: this.getAbsolutePosition().y
        }
    }
});
var layer2 = new Kinetic.Layer(); // create new layer

layer.add(background);
stage.add(layer);

var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

layer2.add(rect); // <-- added rect on layer2
stage.add(layer2); // <-- added layer2 to stage

layer.drawScene();
layer2.drawScene(); // <-- draw layer2

stage.on('dragmove', function () {
    var dx = stage.getX();
    rect.setX(-dx);
});

document.getElementById("button").onclick = function () {
    new Kinetic.Tween({
        node: layer, // <-- changed stage to layer 
        x: -300,
        duration: 0.5,
        easing: Kinetic.Easings.EaseInOut
    }).play();

    // rect tween removed
};