JSFiddle - React, Tailwind, and code Playground

by Max Liashuk

HTML

<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script src="https://rawgit.com/CreateJS/EaselJS/master/src/easeljs/display/SpriteContainer.js"></script>
<script src="https://rawgit.com/CreateJS/EaselJS/master/src/easeljs/display/SpriteStage.js"></script>
<div class="content">
    <div class="content-inner">
        <div id="zAc" class="zAc">
            <canvas id="zAs" width="945" height="393" />
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    var zA = {
        stage: new createjs.Stage('zAs'),
        loader: new createjs.LoadQueue(false),
        container: $('#zAc'),
        ready: false,
        now: false,
        textContainer: $('<div class="zAs-text removeAction" />'),
        resources: [ //list all animation resources here
        {
            src: 'http://i.imgur.com/jomCVzE.png',
            id: 'boy'
        }],
        init: function () {
            zA.loader.addEventListener('complete', function () {
                zA.ready = true;
            });
            $(window).resize(function () {
                console.log(zA.stage);
            });
            zA.loader.loadManifest(zA.resources, true);
            zA.container.append(zA.textContainer);
        },
        animationComplete: function () {

        },
        showAnimation: function (aniType, settings) {
            zA.container.attr('class', zA.container.attr('class').replace(/\banimation-\S+\b/g, ''));

            if (!zA.ready) {
                setTimeout(function () {
                    zA.showAnimation(aniType, settings);
                }, 100);
                return false;
            }
            $.extend({
                text: false,
                sound: false,
                complete: function () {}
            }, settings);

            if (aniType == 'boy') {
                zA.stage.canvas.width = 213;
                zA.stage.canvas.height = 374;
                zA.container.addClass('animation-' + aniType);
                var spriteSheet = new createjs.SpriteSheet({
                    framerate: 24,
                        'images': [zA.loader.getResult('boy')],
                        'frames': {
                        'height': 374,
                            'count': 75,
                            'width': 213
                    },
                        'animations': {
                        begin: 0,
                        beforeAction: [0, 29,...