<canvas id="main"></canvas>
* {padding: 0; margin: 0}
const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 512,
  height: 512,
  antialias: true,
  transparent: false,
  backgroundColor: 0X000000,
});

const datGuiData = function() {
  this.speed = 0.05;
};

const datGuiTools = new datGuiData();
const gui = new dat.GUI();

gui.add(datGuiTools, 'speed', 0.00, 1);

AnimatedHex('top');




function AnimatedHex(status) {
  let alienImages = ["https://i.imgur.com/xAVBpW0.png","https://i.imgur.com/gs9NiFX.png"];
  let textureArray = [];

  for (let i=0; i < alienImages.length; i++)
  {
    let texture = PIXI.Texture.from(alienImages[i]);
    textureArray.push(texture);
  };

  let animatedSprite = new PIXI.AnimatedSprite(textureArray);

  app.stage.addChild(animatedSprite);
  animatedSprite.play();
  app.ticker.add((delta) => {
    animatedSprite.animationSpeed = datGuiTools.speed;
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js