JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});
var layer = new Kinetic.Layer();

var imageObj = new Image();

var yoda = new Kinetic.Image({
    x: 200,
    y: 50,
    image: imageObj,
    width: 106,
    height: 118
});
imageObj.onload = function () {
    // add the shape to the layer
    layer.add(yoda);poğıoüopüu

    // add the layer to the stage
    stage.add(layer);ıopğopğ
    ğ

    var amplitude = 150;
    var period = 2000;
    // in ms
    var centerX = stage.getWidth() / 2;

    var anim = new Kinetic.Animation(function (frame) {
        yoda.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
    }, layer);

    anim.start();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';