JSFiddle - React, Tailwind, and code Playground

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">apply random change</button>

CSS

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

JavaScript

var healthBarMaxWidth = 400;
var healthBarTargetWidth = 200;

function animateText(nr) {

    var toAnimate = text;
    // create new text if already running
    if (TweenMax.isTweening(text)) {
        toAnimate = text.clone();
        toAnimate._cloned = true;
        stage.addChild(toAnimate);
    }

    // apply text and x position
    toAnimate.text = Math.round(nr);
    toAnimate.visible = true;
    toAnimate.color = (toAnimate.text >= 0) ? '#00ff00' : '#ff0000';
    var bounds = toAnimate.getBounds();
    toAnimate.x = -bounds.width / 2 + healthBar.scaleX;

    var tl = new TimelineMax();
    tl.set(toAnimate, {
        y: text.originalY,
        //visible:1,
        alpha: 1
    })
        .to(toAnimate, 2, {
        y: 50,
        ease: Power3.easeOut
    })
        .to(toAnimate, 2, {
        alpha: 0 /*,ease: Power2.easeIn*/
    }, "-=2")
        .call(function (stage, t) {
        if (t._cloned) {
            stage.removeChild(t);
        }
    }, [stage, toAnimate]);


};

function animateBar(change) {

    healthBarTargetWidth += change;
    if (healthBarTargetWidth > healthBarMaxWidth) healthBarTargetWidth = healthBarMaxWidth;
    if (healthBarTargetWidth < 0) healthBarTargetWidth = 0;

    // greensock tweens
    TweenLite.to(
    healthBar,
    1, {
        scaleX: healthBarTargetWidth,
        onUpdate: function () {
            healthBarText.text = Math.round(this.scaleX) + ' / ' + healthBarMaxWidth;
        },
        onUpdateScope: healthBar
    });
};

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

var shape = new createjs.Shape();
shape.graphics.beginFill("#999999").drawRect(0, 100, healthBarMaxWidth, 22);
stage.addChild(shape);

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


var text = new createjs.Text("-15", "bold 20px Arial", "#0000ff");
text.visible =...