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 coords;
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);

  coords = { x: 0, y: 0 };
  tween = new TWEEN.Tween(coords)
    .to({ x: 700, y: 200 }, 2000)
    .onUpdate(function() {
      cardImg.position.set(coords.x, coords.y);
    })
    .onComplete(function(){
    	redoTween();
    })
    .start();

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

function redoTween()
{
//tween.stop();
cardImg.position.set(0, 0);
tween._valuesStart = { x: 0, y: 0 };
tween._valuesEnd= { x: 700, y: 0 };
tween.start();
}

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

  TWEEN.update(app.ticker.lastTime);
}

init();