JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<script id = "vShader"
type = "x-shader/x-vertex" >
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main (void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
</script>
<script id = "fShader"
type = "x-shader/x-vertex" >
precision highp float;
varying vec4 vColor;
void main (void) {
gl_FragColor = vColor;
}
</script>
<script id = "main"
type = "application/x-javascript">
(function ( ) {
var body = document.getElementsByTagName('BODY')[0];
body.style.background = 'rgba(30, 60, 90, 1)';
var reqAnimFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var elementOnFocus = null;
function setIndex (element) {
if (elementOnFocus == null) {
elementOnFocus = element;
element.style.zIndex = '1000';
}
else {
elementOnFocus.style.zIndex = '1';
elementOnFocus = element;
element.style.zIndex = '1000';
}
}
function startAnimation (element, mode, duration) {
var d = duration * 60,
iteration = 0,
totalIterations = d;
var t;
if (mode === 'fadeIn') fadeIn ( );
else if (mode === 'fadeOut') fadeOut ( );
function ease(c, s, l, t) {
return l * Math.pow(c / t, 3) + s;
}
function fadeIn ( ) {
t = ease(iteration, 0, 100, totalIterations);
iteration++;
var opacity = t / 100;
element.style.opacity = opacity + '';
if (opacity <= 100) {
reqAnimFrame(fadeIn);
}
else {
element.style.opacity = '1';
}
}
function fadeOut ( ) {
t = ease(iteration, 0, 100, totalIterations);
iteration++;
var opacity = 1 - t / 100;
element.style.opacity = opacity + '';
if...