JSFiddle - React, Tailwind, and code Playground

by wijesijp

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>PixiJS</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/PixiPlugin.min.js"></script>


<body>
</body>

</html>

JavaScript

var app = new PIXI.Application({
  width: 1024,
  height: 800,
  antialias: true,
  backgroundColor: 0xced6e2
});

var cardImg;
var gameScene;

document.body.appendChild(app.view);

function init() {
  gameScene = new PIXI.Container();

  app.stage.addChild(gameScene);

  cardImg = new PIXI.Container();

  var graphics = new PIXI.Graphics();
  graphics.lineStyle(2, 0xffffff, 1);
  graphics.beginFill(0xff00bb, 0.25);
  graphics.drawRoundedRect(10, 10, 100, 100, 5);
  graphics.endFill();
  cardImg.addChild(graphics);

  gameScene.addChild(cardImg);

  TweenMax.to(cardImg, 1, {
    pixi: { x: 500, lineWidth: 5, fillColor: 0x0088f7 }
  });

  app.ticker.add(dt => gameLoop(dt));
}

function gameLoop() {
  var dt = app.ticker.elapsedMS / 1000;
}

init();