JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
JavaScript
//set true or false to change render engine
useWEBGL = false; // ??? ///
if(useWEBGL == true)
renderer = new PIXI.WebGLRenderer(1900, 900,{backgroundColor : 0x1099bb});
else
renderer = new PIXI.CanvasRenderer(1900, 900,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
stage = new PIXI.Container();
container = new PIXI.Container();
stage.addChild(container);
for (var j=0; j< 5; j++)
{
for (var i = 0 ; i < 20; i++) {
var mushroom = PIXI.Sprite.fromImage('http://i.imgur.com/eE1bNCL.png');
mushroom.x = 256 * j;
mushroom.y = 256 * i;
container.addChild(mushroom);
}
};
container.x = 250;
container.y = -5120;
setTimeout(function(){TweenLite.to(container, 3, {y:700, ease:Linear.easeNone});}, 2000);
PIXI.ticker.shared.add(function () {
renderer.render(stage);
});
console.log("Using webgl : ", renderer instanceof PIXI.WebGLRenderer);
var weg = document.createTextNode("Using webgl : " + (renderer instanceof PIXI.WebGLRenderer));
document.getElementsByTagName('body')[0].appendChild(weg);
(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()