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/tween.js/16.3.5/Tween.min.js"></script>

<body>
</body>

</html>

JavaScript

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

var cardImg;
var gameScene;
var position;
var tween;

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, 0xff00ff, 1);
  graphics.beginFill(0xff00bb, 0.25);
  graphics.drawRoundedRect(10, 10, 100, 100, 5);
  graphics.endFill();
  cardImg.addChild(graphics);

  gameScene.addChild(cardImg);

  position = { x: 0, y: 0, rotation: 0 };
  tween = new TWEEN.Tween(position)
    .to({ x: 700, y: 200, rotation: 359 }, 2000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(update);

  tween.start();

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

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

  var result = TWEEN.update(app.ticker.elapsedMS);

  cardImg.position.set(position.x, position.y);

  console.log(position);
}

function update() {
  cardImg.position.set(position.x, position.y);
}

init();