PIxiJS GIFs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.0/pixi.js"></script>
<script src="https://rawgit.com/matt-way/gifuct-js/master/dist/gifuct-js.min.js"></script>

JavaScript

var app = new PIXI.Application(800, 500, {backgroundColor:0xdddddd});
document.body.appendChild(app.view);

squareContainer = new PIXI.Container();
app.stage.addChild(squareContainer);


var bigSquare = new PIXI.Graphics();
bigSquare.beginFill(0xFFFFFF);
bigSquare.drawRect(0, 0, 400, 400);
bigSquare.endFill();



var dragBigSquare = new PIXI.Sprite(PIXI.Texture.WHITE);
dragBigSquare.tint = 0x0000ff;
dragBigSquare.factor = 1;
dragBigSquare.interactive = true;
dragBigSquare.buttonmode = true;
dragBigSquare.anchor.set(0.5);
dragBigSquare.position.set(bigSquare.width - 10, bigSquare.height - 10);


dragBigSquare.on('pointerdown', onDragStart);

function onDragStart() {
	bigSquare.width = 300;
  bigSquare.height = 300;
}



var smallSquare = new PIXI.Graphics();
smallSquare.beginFill(0xFF0000);
smallSquare.drawRect(0, 0, 200, 200);
smallSquare.endFill();

var dragSmallSquare = new PIXI.Sprite(PIXI.Texture.WHITE);
dragSmallSquare.tint = 0x000000;
dragSmallSquare.factor = 1;
dragSmallSquare.interactive = true;
dragSmallSquare.buttonmode = true;
dragSmallSquare.anchor.set(0.5);
dragSmallSquare.position.set(smallSquare.width - 10, smallSquare.height - 10);



squareContainer.width = 200;
squareContainer.height = 200;

smallSquare.addChild(dragSmallSquare);
bigSquare.addChild(smallSquare);
squareContainer.addChild(bigSquare, dragBigSquare);