JSFiddle - React, Tailwind, and code Playground

by javascriptismagic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.0/pixi.dev.js"></script>
<input value="http://i.imgur.com/egzJbiI.gif"/>

CSS

input { width: 100%; }
canvas { width: 100%; height: 100%; }

JavaScript

var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.view);

var animatedGif;

var stage = new PIXI.Stage(0xFFFFFF);
requestAnimationFrame(animate);
function animate() {
	requestAnimationFrame(animate);
	if (animatedGif) { animatedGif.rotation += 0.01; }
	renderer.render(stage);
}

var input = document.querySelector('input');
function loadGif() {
	if (animatedGif) { stage.removeChild(animatedGif); }
    
	var animatedGifUrl = input.value;
	console.log('Loading Animated Gif:', animatedGifUrl);
	
	animatedGif = PIXI.Sprite.fromImage(animatedGifUrl);
	
	console.log('Animated Gif Sprite: ', animatedGif);
	
	animatedGif.anchor.x = 0.5;
	animatedGif.anchor.y = 0.5;
    
    animatedGif.position.x = window.innerWidth * .5;
    animatedGif.position.y = window.innerHeight * .5;
	
	stage.addChild(animatedGif);
}
input.addEventListener("keyup", loadGif);
input.addEventListener("change", loadGif);
loadGif();