Shake

by stot

HTML

<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<canvas id="canvas" width=400 height=200></canvas>
<button id="damage">shake</button>

CSS

canvas {
    border:1px solid red;
}
#damage {
    display:block;
}

JavaScript

var healthBarMaxWidth = 400;
var healthBarTargetWidth = 200;

function shake() {
    // greensock tweens
    TweenLite.to(
    healthBar,
    2, {
        x: healthBar.x+1,
        ease:  Elastic.easeInOut.config( 1.2, 1.1)
    });
};

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);

var healthBar = new createjs.Bitmap('http://www.playa.cc/pic/healthbar.png');
healthBar.scaleX = 100;
healthBar.x = 100;
healthBar.y = 100;
stage.addChild(healthBar);



function tick(event) {
    stage.update();
}

$('#damage').on('click', function () {
    shake();
});