JSFiddle - React, Tailwind, and code Playground

by greg tr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.2/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-tween.js@0.2.1/build/pixi-tween.min.js"></script>

JavaScript

var app = new PIXI.Application(1200, 800, {
  antialias: true
});
document.body.appendChild(app.view);
var raf;

function animate() {
  raf = window.requestAnimationFrame(animate);
  app.render(app.stage);
  PIXI.tweenManager.update();
}

function stop() {
  window.cancelAnimationFrame(raf);
}


var path = new PIXI.tween.TweenPath();
path.moveTo(0.4, 0.4);
path.bezierCurveTo(0.4, 360, 292, 652, 652, 652);
path.bezierCurveTo(87, 65, 105, 47, 105, 24);
path.closed = true;
var t = new PIXI.Graphics();
app.stage.addChild(t);
t.lineStyle(10, 0xff0000);
t.drawPath(path);
var tween = PIXI.tweenManager.createTween(t);


tween.path = path;
tween.time = 13000;
tween.easing = PIXI.tween.Easing.outBounce();
tween.loop = true;
tween.on('update', function() {
  t.lineStyle(10, 0xff0000);
  t.drawPath(path);
});
tween.start();


app.ticker.add(function(delta) {
  
  PIXI.tweenManager.update();
});