JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script src="http://my-archive.org/files/spriteanim-0.1.5.js"></script>
<p>WebGL<canvas id="canvas" style="opacity: 1;"></canvas></p>



<script id="spriteAnimVertexShader" type="x-shader/x-vertex">
		uniform float u_frameOffset;
		uniform vec4 u_screenDims;
		attribute vec2 centerPosition;
		attribute float rotation;
		attribute float perSpriteFrameOffset;
		attribute float spriteSize;
		attribute vec2 cornerOffset;
		attribute vec2 spriteTextureSize;
		attribute float spritesPerRow;
		attribute float numFrames;
		attribute vec4 textureWeights;
		varying vec2 v_texCoord;
		varying vec4 v_textureWeights;

		void main() {
		  float frameNumber = mod(u_frameOffset + perSpriteFrameOffset, numFrames);
		  float row = floor(frameNumber / spritesPerRow);  // Compute the upper left texture coordinate of the sprite
		  vec2 upperLeftTC = vec2(spriteTextureSize.x * (frameNumber - (row * spritesPerRow)),
		                          spriteTextureSize.y * row);
		  vec2 tc = upperLeftTC + spriteTextureSize * (cornerOffset + vec2(0.5, 0.5));
		  v_texCoord = tc;
		  v_textureWeights = textureWeights;
		  float s = sin(rotation);
		  float c = cos(rotation);
		  mat2 rotMat = mat2(c, -s, s, c);
		  // vec2 scaledOffset = spriteSize * cornerOffset;
		  vec2 scaledOffset = spriteSize * cornerOffset;
		  vec2 pos = centerPosition + rotMat * scaledOffset;
		  gl_Position = vec4(pos * u_screenDims.xy + u_screenDims.zw, 1.0, 1.0);
		}
	</script>
	<script id="spriteAnimFragmentShader" type="x-shader/x-fragment">
		precision mediump float;
		uniform sampler2D u_texture0;
		uniform sampler2D u_texture1;
		uniform sampler2D u_texture2;
		uniform sampler2D u_texture3;
		varying vec2 v_texCoord;
		varying vec4 v_textureWeights;
		void main() {
		  vec4 color;
		  if (v_textureWeights.x > 0.0)
		    color = texture2D(u_texture0, v_texCoord);
		  else if (v_textureWeights.y > 0.0)
		    color = texture2D(u_texture1,...

CSS

canvas {
    border: 1px dashed #333;
    vertical-align: middle;
}
body {
    background: #000;
}

JavaScript

// Load sprites with PreloadJS (or with any other you like)
		var queue = new createjs.LoadQueue(true);
		queue.loadManifest([
			{id:"boost", src:"http://i.imgur.com/t1cw5dp.png"},
		]);
		queue.on("complete", handleComplete, this);

		// After loading spritesheets, run animations
		function handleComplete() {
			boostWebGL = new SpriteAnim("canvas");


			boostWebGL.start({
				frameWidth: 20,
				frameHeight: 200,
				image: queue.getResult("boost"),
				fps: 30,
				className: 'boost_class',
				loop: true
			});  
		}