JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<canvas id="ripple" width="690px" height="690px"></canvas>

JavaScript

var audioRippleAnimate = function() {
  var rippleMesh = 'https://s33.postimg.cc/pejy716db/ripple.png';
  var textureBg = 'https://s33.postimg.cc/ud7gljfb3/ripple_Bg.jpg';
  var TimelineMax = new TimelineLite();

  var render = new PIXI.autoDetectRenderer(690, 690, {
    view: document.getElementById('ripple'),
    antialias: true,
    transparent: true
  });

  var animation = () => {

    var size = 690;

    var ripple = new PIXI.Container();
    var stage = new PIXI.Container();

    var circle = PIXI.Sprite.fromImage(rippleMesh);
    var filter = new PIXI.filters.DisplacementFilter(circle);
    var bg = PIXI.Sprite.fromImage(textureBg);

    bg.scale.set(1);

    circle.pivot.set(0);
    circle.anchor.set(0.5);
    circle.scale.set(0.01);
    circle.position.set(size / 2);

    filter.scale.set(200);
    ripple.filters = [filter];
    ripple.addChild(bg, circle);

    stage.addChild(ripple);
    
    
    var ease = Power1.easeOut;
    TimelineMax.to(circle.scale, 1.5, {
      repeatDelay: 0,
      x: 1.6,
      y: 1.6,
      ease,
      repeat: -1
    });

    TimelineMax.to(filter.scale, 1.5, {
      repeatDelay: 0,
      x: 0,
      y: 0,
      ease,
      repeat: -1
    });
		
    TweenLite.ticker.addEventListener('tick', () => {
      render.render(stage);
    });
  };

  animation();
};

audioRippleAnimate();