JSFiddle - React, Tailwind, and code Playground

by Max Liashuk

HTML

<script src="https://code.createjs.com/easeljs-0.8.0.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>
<canvas id="canvas" width="213" height="374"></canvas>

JavaScript

var image = new Image();
image.onload = init;
image.crossOrigin = "Anonymous";
image.src = "http://i.imgur.com/jomCVzE.png";

function init() { 
    var stage = new createjs.SpriteStage("canvas");
    if(stage.isWebGL){
    	alert('WebGL will be used! 60FPS');
    }else{
        alert('WebGL could not be used.:( \nCheck your video drivers');
    }
    var data = {
        images: [image],
        framerate: 60,
        'frames': {'height': 374, 'count': 75, 'width': 213},
        animations: {
            run:[0,74, true]
        }
    };
    
    var ss = new createjs.SpriteSheet(data);
    
    var container = new createjs.SpriteContainer(ss);
    
    var animation = new createjs.Sprite(ss);
    container.addChild(animation);
    
    stage.addChild(container);
    animation.gotoAndPlay("run");
    
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
}