JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.0/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.0/dat.gui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js"></script>
<button onCLick="firstIssue();">
  FIRST ISSUE: OUTSIDE VIEWPORT, FILTER CAUSE JUMP
</button>
<br>
<button onCLick="secondIssue();">
  SECOND ISSUE: FILTER ARE NOT PROPORTIONALLY SCALED WHEN CHANGE SCALE
</button>

CSS

* {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  background: black;  
}

canvas {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}

.dg.ac {
 height: auto;
}

button {
  padding: 10px;
  position: relative;
  z-index: 100;
  width: 200px;
  margin-top: 5px;
  margin-left: 5px;
  cursor: pointer;
}

Babel + JSX

const app = new PIXI.Application({
  antialias: true,
  resolution: window.devicePixelRatio
});

const { renderer, stage } = app;
let container = null;

const gui = new window.dat.GUI();

renderer.autoResize = true;
renderer.resize(window.innerWidth, window.innerHeight);

document.body.appendChild(app.view);

const setup = () => {
  container = new PIXI.Container();
  stage.addChild(container);

  const sprite = new PIXI.Sprite(
    PIXI.loader.resources[image].texture
  );

  container.addChild(sprite);
  container.pivot.set(container.width / 2, container.height / 2);
  container.width = 300;
  container.height = 300;
  container.position.x = app.screen.width / 2;
  container.position.y = app.screen.height / 2;
  
  const filter = new PIXI.Filter(
    null,
    `precision mediump float;

    uniform float frequency;
    uniform float amplitude;
    uniform sampler2D uSampler;
    varying vec2 vTextureCoord;
        
    float upDown(float v) {
      return sin(v) * .5 + .5;
    }

		void main (void) {

        vec2 uv = vTextureCoord;

        float t1 = frequency * 0.2;
        float t2 = frequency * 0.35;
        float v = uv.y;
        float h = uv.x;

        float off1 = sin((h + 0.4) * mix(1., 6., upDown(t1))) * amplitude * 0.5;
        float off2 = sin((h + 0.8) * mix(3., 8., upDown(t2))) * amplitude  * 1.5;
        float off3 = sin((h) * mix(1., 2., upDown(t1))) * amplitude  * 0.5;

        uv = vec2(
            h + off1 + off2 + off3,
            v
        );

        gl_FragColor = texture2D(uSampler, uv);
    }`
  );
  
  container.filters = [
  	filter
  ];
  
  filter.uniforms.amplitude = 0.22;
	filter.uniforms.frequency = 1000;
 
 	gui.add(container.position, 'x', 0, app.screen.width, 1).name('Position X').listen()
 	gui.add(container.scale, 'x', 0, 5, 0.001).name('Scale X').listen()
 
}

const image = 'http://i.imgur.com/3tU4Vig.jpg';
PIXI.loader.add(image).load(setup)

const firstIssue = () => {
	TweenLite.fromTo(container.position, 1.5, {
  	x:...