Shake
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>
<div id="page">
<canvas id="canvas">AAAAAAAAA</canvas>
<p id="pageText">this is some text</p>
</div>
<button id="damage">shake</button>
CSS
canvas {
border:1px solid red;
width:100%;
height:100%
}
#page {
border:1px solid blue;
}
JavaScript
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;
var domElement = new createjs.DOMElement(form = document.getElementById("pageText"));
stage.addChild(domElement);
function tick(event) {
stage.update();
}
$('#damage').on('click', function () {
shake();
});