JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.0/dat.gui.js"></script>
<script src="https://rawgit.com/magig/createShaderPlugin/master/createShaderPlugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.3/pixi.min.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

createShaderPlugin(
  'test',
  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);
  }
  `,
  {
    frequency: 0,
    amplitude: 0
  }
);

// INIT APPLICATION

const app = new PIXI.Application({
  antialias: true,
  autoresize: true,
  width: window.innerWidth,
  height: window.innerHeight,
  resolution: window.devicePixelRatio
});

const { renderer, stage } = app;
let sprite = null;
const gui = new window.dat.GUI();

document.body.appendChild(app.view);

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

  sprite.pivot.set(sprite.width / 2, sprite.height / 2);
  sprite.width = 300;
  sprite.height = 300;
  sprite.position.x = app.screen.width / 2;
  sprite.position.y = app.screen.height / 2;
   
	sprite.pluginUniforms = {
		frequency: 1000,
    amplitude: 0.22
	};
  
  sprite.pluginSize = new PIXI.Point(renderer.width, renderer.height);
  sprite.pluginName = 'test';
  stage.addChild(sprite);
  
 	gui.add(sprite.position, 'x', 0, app.screen.width, 1).name('Position X').listen()
 	gui.add(sprite.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(sprite.position, 1.5, {
  	x: window.innerWidth / 2
  },
  {
  	x: window.innerWidth - 30
  })
}

const secondIssue = () =>...