requirebin sketch

index.js

// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right
var mat4 = require('gl-mat4');
var interpolator = require('mat4-interpolator');
var inherits = require('inherits');

//
// Inlining mat4-css-parse & mat4-css-stringify here since RequireBin fails requiring them...
// nrmaliy we would just do
// var parseMatrix = require('mat4-css-parse');
// var stringifyMatrix = require('mat4-css-stringify');
// -------------------------------------------------------------------------------------------------------------------------
function toMat4(out, a) {
    if (!out) out = new Float32Array(16)
    out[0] = a[0]; 		out[1] = a[1]; 		out[2] = 0; 		out[3] = 0;
    out[4] = a[2]; 		out[5] = a[3]; 		out[6] = 0; 		out[7] = 0;
    out[8] = 0; 			out[9] = 0; 			out[10] = 1;		out[11] = 0;
    out[12] = a[4];		out[13] = a[5]; 	out[14] = 0;		out[15] = 1;
    return out
}

var splitter = /[,\s]+/i
var MAT_2D = 'matrix('
var MAT_3D = 'matrix3d('

function parseMatrix (str, out) {
  if (str === '') throw new Error('could not parse empty string');
  if (str === 'none') return mat4.identity(out || []);
  
  var start = MAT_3D.length
  if (str.charAt(6) === '(') start = MAT_2D.length;
  
  // get components as floats
  var numbers = str.substring(start, str.length-1).split(splitter);
  console.log(str, numbers)
  for (var i=0; i<numbers.length; i++) 
    numbers[i] = parseFloat(numbers[i], 10);
    
  //if 2D matrix, copy into mat4
  if (numbers.length<16) return toMat4(out, numbers);
    
  //if no out is specified, we can use the split() array
  if (!out) return numbers;
    
  //otherwise we will copy values over
  for (i=0; i<16; i++) 
    out[i] = numbers[i];
    return out;
}

var scratch = new Float32Array(16);
for (var i = 0; i < 16; i++) scratch[i] = 0;
function stringifyMatrix (matrix) {
   for (var i = 0; i < 16; i++) 
      scratch[i] = Math.round(matrix[i]*1e15) / 1e15
   return 'matrix3d('+scratch.join(', ')+')'
}


//
// Fix the FLIP core
// -------------------------------------------------------------------------------------------------------------------------

function getUntransformedRect (el) {
	// assume box-sizing: border-box for simplicity's sake
  var parent = el.offsetParent;
  var top = el.offsetTop;
  var left = el.offsetLeft;
  while (parent && parent !== document.body) {
    top += parent.offsetTop - parent.scrollTop;
    left += parent.offsetLeft - parent.scrollLeft;
    parent = parent.offsetParent;
  }
  return {top: top, left: left, width: el.offsetWidth, height: el.offsetHeight};
}

function FixedFLIP(options) {
  FLIP.call(this, options);
}
inherits(FixedFLIP, FLIP);
FixedFLIP.prototype.first = function () {
  	var css = getComputedStyle(this.element_);
    this.first_.layout = getUntransformedRect(this.element_);
    this.first_.transform = css.transform;
    this.first_.opacity = parseFloat(css.opacity);
};
FixedFLIP.prototype.last = function () {
    if (typeof lastclassname !== 'undefined')
      this.addclass(lastclassname);
    var css = getComputedStyle(this.element_);
    this.last_.layout = getUntransformedRect(this.element_);
    this.last_.transform = css.transform;
    this.last_.opacity = parseFloat(css.opacity);
};
FixedFLIP.prototype.invert = function () {
  	FLIP.prototype.invert.call(this);
    var transform = this.first_.transform === 'none' ? '' : this.first_.transform;
    this.element_.style.transformOrigin = '';
    this.element_.style.transform = 'translate(' + this.invert_.x + 'px, ' + this.invert_.y  + 'px)' +
			' scale(' + this.invert_.sx + ', ' + this.invert_.sy + ')' +
			' ' + transform;
};

//
// Create a new player
// -------------------------------------------------------------------------------------------------------------------------

var FixedRAF = {
  play_: function (startTime) {
    if (typeof startTime === 'undefined')
      this.start_ = window.performance.now() + this.delay_;
    else
      this.start_ = startTime + this.delay_;
		var start = parseMatrix(getComputedStyle(this.element_).transform);
    var end = parseMatrix(this.last_.transform);
    var lerp = interpolator(start, end);
    var transform = mat4.create();
    console.log(start, end)
    var self = this;
    var update = function () {
      var time = (window.performance.now() - self.start_) / self.duration_;
      time = self.clamp_(time, 0, 1);
      // interpolate matrices
      lerp(transform, self.easing_(time));
      self.element_.style.transform = stringifyMatrix(transform);
      if (time < 1) {
        requestAnimationFrame(update);
      } else {
        self.cleanUpAndFireEvent_();
      }
    };
    
    requestAnimationFrame(update);
  }
};

FLIP.extend('FixedRAF', FixedRAF);

//
// GOGOGO!
// -------------------------------------------------------------------------------------------------------------------------

document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('.btn');
  var box = document.querySelector('.box');
  var flip = new FixedFLIP({
  	element: box,
    duration: 1000,
    easing: function (t) {
      return --t * t * t * t * t + 1;
    },
    play: 'FixedRAF'
  });
  button.addEventListener('click', function() {
    flip.first();
    box.classList.toggle('flipped');
    flip.last();
    flip.invert();
    flip.play();
  });
});

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({inherits:[function(require,module,exports){if(typeof Object.create==="function"){module.exports=function inherits(ctor,superCtor){ctor.super_=superCtor;ctor.prototype=Object.create(superCtor.prototype,{constructor:{value:ctor,enumerable:false,writable:true,configurable:true}})}}else{module.exports=function inherits(ctor,superCtor){ctor.super_=superCtor;var TempCtor=function(){};TempCtor.prototype=superCtor.prototype;ctor.prototype=new TempCtor;ctor.prototype.constructor=ctor}}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=adjoint;function adjoint(out,a){var a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11],a30=a[12],a31=a[13],a32=a[14],a33=a[15];out[0]=a11*(a22*a33-a23*a32)-a21*(a12*a33-a13*a32)+a31*(a12*a23-a13*a22);out[1]=-(a01*(a22*a33-a23*a32)-a21*(a02*a33-a03*a32)+a31*(a02*a23-a03*a22));out[2]=a01*(a12*a33-a13*a32)-a11*(a02*a33-a03*a32)+a31*(a02*a13-a03*a12);out[3]=-(a01*(a12*a23-a13*a22)-a11*(a02*a23-a03*a22)+a21*(a02*a13-a03*a12));out[4]=-(a10*(a22*a33-a23*a32)-a20*(a12*a33-a13*a32)+a30*(a12*a23-a13*a22));out[5]=a00*(a22*a33-a23*a32)-a20*(a02*a33-a03*a32)+a30*(a02*a23-a03*a22);out[6]=-(a00*(a12*a33-a13*a32)-a10*(a02*a33-a03*a32)+a30*(a02*a13-a03*a12));out[7]=a00*(a12*a23-a13*a22)-a10*(a02*a23-a03*a22)+a20*(a02*a13-a03*a12);out[8]=a10*(a21*a33-a23*a31)-a20*(a11*a33-a13*a31)+a30*(a11*a23-a13*a21);out[9]=-(a00*(a21*a33-a23*a31)-a20*(a01*a33-a03*a31)+a30*(a01*a23-a03*a21));out[10]=a00*(a11*a33-a13*a31)-a10*(a01*a33-a03*a31)+a30*(a01*a13-a03*a11);out[11]=-(a00*(a11*a23-a13*a21)-a10*(a01*a23-a03*a21)+a20*(a01*a13-a03*a11));out[12]=-(a10*(a21*a32-a22*a31)-a20*(a11*a32-a12*a31)+a30*(a11*a22-a12*a21));out[13]=a00*(a21*a32-a22*a31)-a20*(a01*a32-a02*a31)+a30*(a01*a22-a02*a21);out[14]=-(a00*(a11*a32-a12*a31)-a10*(a01*a32-a02*a31)+a30*(a01*a12-a02*a11));out[15]=a00*(a11*a22-a12*a21)-a10*(a01*a22-a02*a21)+a20*(a01*a12-a02*a11);return out}},{}],2:[function(require,module,exports){module.exports=clone;function clone(a){var out=new Float32Array(16);out[0]=a[0];out[1]=a[1];out[2]=a[2];out[3]=a[3];out[4]=a[4];out[5]=a[5];out[6]=a[6];out[7]=a[7];out[8]=a[8];out[9]=a[9];out[10]=a[10];out[11]=a[11];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15];return out}},{}],3:[function(require,module,exports){module.exports=copy;function copy(out,a){out[0]=a[0];out[1]=a[1];out[2]=a[2];out[3]=a[3];out[4]=a[4];out[5]=a[5];out[6]=a[6];out[7]=a[7];out[8]=a[8];out[9]=a[9];out[10]=a[10];out[11]=a[11];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15];return out}},{}],4:[function(require,module,exports){module.exports=create;function create(){var out=new Float32Array(16);out[0]=1;out[1]=0;out[2]=0;out[3]=0;out[4]=0;out[5]=1;out[6]=0;out[7]=0;out[8]=0;out[9]=0;out[10]=1;out[11]=0;out[12]=0;out[13]=0;out[14]=0;out[15]=1;return out}},{}],5:[function(require,module,exports){module.exports=determinant;function determinant(a){var a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11],a30=a[12],a31=a[13],a32=a[14],a33=a[15],b00=a00*a11-a01*a10,b01=a00*a12-a02*a10,b02=a00*a13-a03*a10,b03=a01*a12-a02*a11,b04=a01*a13-a03*a11,b05=a02*a13-a03*a12,b06=a20*a31-a21*a30,b07=a20*a32-a22*a30,b08=a20*a33-a23*a30,b09=a21*a32-a22*a31,b10=a21*a33-a23*a31,b11=a22*a33-a23*a32;return b00*b11-b01*b10+b02*b09+b03*b08-b04*b07+b05*b06}},{}],6:[function(require,module,exports){module.exports=fromQuat;function fromQuat(out,q){var x=q[0],y=q[1],z=q[2],w=q[3],x2=x+x,y2=y+y,z2=z+z,xx=x*x2,yx=y*x2,yy=y*y2,zx=z*x2,zy=z*y2,zz=z*z2,wx=w*x2,wy=w*y2,wz=w*z2;out[0]=1-yy-zz;out[1]=yx+wz;out[2]=zx-wy;out[3]=0;out[4]=yx-wz;out[5]=1-xx-zz;out[6]=zy+wx;out[7]=0;out[8]=zx+wy;out[9]=zy-wx;out[10]=1-xx-yy;out[11]=0;out[12]=0;out[13]=0;out[14]=0;out[15]=1;return out}},{}],7:[function(require,module,exports){module.exports=fromRotationTranslation;function fromRotationTranslation(out,q,v){var x=q[0],y=q[1],z=q[2],w=q[3],x2=x+x,y2=y+y,z2=z+z,xx=x*x2,xy=x*y2,xz=x*z2,yy=y*y2,yz=y*z2,zz=z*z2,wx=w*x2,wy=w*y2,wz=w*z2;out[0]=1-(yy+zz);out[1]=xy+wz;out[2]=xz-wy;out[3]=0;out[4]=xy-wz;out[5]=1-(xx+zz);out[6]=yz+wx;out[7]=0;out[8]=xz+wy;out[9]=yz-wx;out[10]=1-(xx+yy);out[11]=0;out[12]=v[0];out[13]=v[1];out[14]=v[2];out[15]=1;return out}},{}],8:[function(require,module,exports){module.exports=frustum;function frustum(out,left,right,bottom,top,near,far){var rl=1/(right-left),tb=1/(top-bottom),nf=1/(near-far);out[0]=near*2*rl;out[1]=0;out[2]=0;out[3]=0;out[4]=0;out[5]=near*2*tb;out[6]=0;out[7]=0;out[8]=(right+left)*rl;out[9]=(top+bottom)*tb;out[10]=(far+near)*nf;out[11]=-1;out[12]=0;out[13]=0;out[14]=far*near*2*nf;out[15]=0;return out}},{}],9:[function(require,module,exports){module.exports=identity;function identity(out){out[0]=1;out[1]=0;out[2]=0;out[3]=0;out[4]=0;out[5]=1;out[6]=0;out[7]=0;out[8]=0;out[9]=0;out[10]=1;out[11]=0;out[12]=0;out[13]=0;out[14]=0;out[15]=1;return out}},{}],10:[function(require,module,exports){module.exports=invert;function invert(out,a){var a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11],a30=a[12],a31=a[13],a32=a[14],a33=a[15],b00=a00*a11-a01*a10,b01=a00*a12-a02*a10,b02=a00*a13-a03*a10,b03=a01*a12-a02*a11,b04=a01*a13-a03*a11,b05=a02*a13-a03*a12,b06=a20*a31-a21*a30,b07=a20*a32-a22*a30,b08=a20*a33-a23*a30,b09=a21*a32-a22*a31,b10=a21*a33-a23*a31,b11=a22*a33-a23*a32,det=b00*b11-b01*b10+b02*b09+b03*b08-b04*b07+b05*b06;if(!det){return null}det=1/det;out[0]=(a11*b11-a12*b10+a13*b09)*det;out[1]=(a02*b10-a01*b11-a03*b09)*det;out[2]=(a31*b05-a32*b04+a33*b03)*det;out[3]=(a22*b04-a21*b05-a23*b03)*det;out[4]=(a12*b08-a10*b11-a13*b07)*det;out[5]=(a00*b11-a02*b08+a03*b07)*det;out[6]=(a32*b02-a30*b05-a33*b01)*det;out[7]=(a20*b05-a22*b02+a23*b01)*det;out[8]=(a10*b10-a11*b08+a13*b06)*det;out[9]=(a01*b08-a00*b10-a03*b06)*det;out[10]=(a30*b04-a31*b02+a33*b00)*det;out[11]=(a21*b02-a20*b04-a23*b00)*det;out[12]=(a11*b07-a10*b09-a12*b06)*det;out[13]=(a00*b09-a01*b07+a02*b06)*det;out[14]=(a31*b01-a30*b03-a32*b00)*det;out[15]=(a20*b03-a21*b01+a22*b00)*det;return out}},{}],11:[function(require,module,exports){var identity=require("./identity");module.exports=lookAt;function lookAt(out,eye,center,up){var x0,x1,x2,y0,y1,y2,z0,z1,z2,len,eyex=eye[0],eyey=eye[1],eyez=eye[2],upx=up[0],upy=up[1],upz=up[2],centerx=center[0],centery=center[1],centerz=center[2];if(Math.abs(eyex-centerx)<1e-6&&Math.abs(eyey-centery)<1e-6&&Math.abs(eyez-centerz)<1e-6){return identity(out)}z0=eyex-centerx;z1=eyey-centery;z2=eyez-centerz;len=1/Math.sqrt(z0*z0+z1*z1+z2*z2);z0*=len;z1*=len;z2*=len;x0=upy*z2-upz*z1;x1=upz*z0-upx*z2;x2=upx*z1-upy*z0;len=Math.sqrt(x0*x0+x1*x1+x2*x2);if(!len){x0=0;x1=0;x2=0}else{len=1/len;x0*=len;x1*=len;x2*=len}y0=z1*x2-z2*x1;y1=z2*x0-z0*x2;y2=z0*x1-z1*x0;len=Math.sqrt(y0*y0+y1*y1+y2*y2);if(!len){y0=0;y1=0;y2=0}else{len=1/len;y0*=len;y1*=len;y2*=len}out[0]=x0;out[1]=y0;out[2]=z0;out[3]=0;out[4]=x1;out[5]=y1;out[6]=z1;out[7]=0;out[8]=x2;out[9]=y2;out[10]=z2;out[11]=0;out[12]=-(x0*eyex+x1*eyey+x2*eyez);out[13]=-(y0*eyex+y1*eyey+y2*eyez);out[14]=-(z0*eyex+z1*eyey+z2*eyez);out[15]=1;return out}},{"./identity":9}],12:[function(require,module,exports){module.exports=multiply;function multiply(out,a,b){var a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11],a30=a[12],a31=a[13],a32=a[14],a33=a[15];var b0=b[0],b1=b[1],b2=b[2],b3=b[3];out[0]=b0*a00+b1*a10+b2*a20+b3*a30;out[1]=b0*a01+b1*a11+b2*a21+b3*a31;out[2]=b0*a02+b1*a12+b2*a22+b3*a32;out[3]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[4];b1=b[5];b2=b[6];b3=b[7];out[4]=b0*a00+b1*a10+b2*a20+b3*a30;out[5]=b0*a01+b1*a11+b2*a21+b3*a31;out[6]=b0*a02+b1*a12+b2*a22+b3*a32;out[7]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[8];b1=b[9];b2=b[10];b3=b[11];out[8]=b0*a00+b1*a10+b2*a20+b3*a30;out[9]=b0*a01+b1*a11+b2*a21+b3*a31;out[10]=b0*a02+b1*a12+b2*a22+b3*a32;out[11]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[12];b1=b[13];b2=b[14];b3=b[15];out[12]=b0*a00+b1*a10+b2*a20+b3*a30;out[13]=b0*a01+b1*a11+b2*a21+b3*a31;out[14]=b0*a02+b1*a12+b2*a22+b3*a32;out[15]=b0*a03+b1*a13+b2*a23+b3*a33;return out}},{}],13:[function(require,module,exports){module.exports=ortho;function ortho(out,left,right,bottom,top,near,far){var lr=1/(left-right),bt=1/(bottom-top),nf=1/(near-far);out[0]=-2*lr;out[1]=0;out[2]=0;out[3]=0;out[4]=0;out[5]=-2*bt;out[6]=0;out[7]=0;out[8]=0;out[9]=0;out[10]=2*nf;out[11]=0;out[12]=(left+right)*lr;out[13]=(top+bottom)*bt;out[14]=(far+near)*nf;out[15]=1;return out}},{}],14:[function(require,module,exports){module.exports=perspective;function perspective(out,fovy,aspect,near,far){var f=1/Math.tan(fovy/2),nf=1/(near-far);out[0]=f/aspect;out[1]=0;out[2]=0;out[3]=0;out[4]=0;out[5]=f;out[6]=0;out[7]=0;out[8]=0;out[9]=0;out[10]=(far+near)*nf;out[11]=-1;out[12]=0;out[13]=0;out[14]=2*far*near*nf;out[15]=0;return out}},{}],15:[function(require,module,exports){module.exports=perspectiveFromFieldOfView;function perspectiveFromFieldOfView(out,fov,near,far){var upTan=Math.tan(fov.upDegrees*Math.PI/180),downTan=Math.tan(fov.downDegrees*Math.PI/180),leftTan=Math.tan(fov.leftDegrees*Math.PI/180),rightTan=Math.tan(fov.rightDegrees*Math.PI/180),xScale=2/(leftTan+rightTan),yScale=2/(upTan+downTan);out[0]=xScale;out[1]=0;out[2]=0;out[3]=0;out[4]=0;out[5]=yScale;out[6]=0;out[7]=0;out[8]=-((leftTan-rightTan)*xScale*.5);out[9]=(upTan-downTan)*yScale*.5;out[10]=far/(near-far);out[11]=-1;out[12]=0;out[13]=0;out[14]=far*near/(near-far);out[15]=0;return out}},{}],16:[function(require,module,exports){module.exports=rotate;function rotate(out,a,rad,axis){var x=axis[0],y=axis[1],z=axis[2],len=Math.sqrt(x*x+y*y+z*z),s,c,t,a00,a01,a02,a03,a10,a11,a12,a13,a20,a21,a22,a23,b00,b01,b02,b10,b11,b12,b20,b21,b22;if(Math.abs(len)<1e-6){return null}len=1/len;x*=len;y*=len;z*=len;s=Math.sin(rad);c=Math.cos(rad);t=1-c;a00=a[0];a01=a[1];a02=a[2];a03=a[3];a10=a[4];a11=a[5];a12=a[6];a13=a[7];a20=a[8];a21=a[9];a22=a[10];a23=a[11];b00=x*x*t+c;b01=y*x*t+z*s;b02=z*x*t-y*s;b10=x*y*t-z*s;b11=y*y*t+c;b12=z*y*t+x*s;b20=x*z*t+y*s;b21=y*z*t-x*s;b22=z*z*t+c;out[0]=a00*b00+a10*b01+a20*b02;out[1]=a01*b00+a11*b01+a21*b02;out[2]=a02*b00+a12*b01+a22*b02;out[3]=a03*b00+a13*b01+a23*b02;out[4]=a00*b10+a10*b11+a20*b12;out[5]=a01*b10+a11*b11+a21*b12;out[6]=a02*b10+a12*b11+a22*b12;out[7]=a03*b10+a13*b11+a23*b12;out[8]=a00*b20+a10*b21+a20*b22;out[9]=a01*b20+a11*b21+a21*b22;out[10]=a02*b20+a12*b21+a22*b22;out[11]=a03*b20+a13*b21+a23*b22;if(a!==out){out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15]}return out}},{}],17:[function(require,module,exports){module.exports=rotateX;function rotateX(out,a,rad){var s=Math.sin(rad),c=Math.cos(rad),a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11];if(a!==out){out[0]=a[0];out[1]=a[1];out[2]=a[2];out[3]=a[3];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15]}out[4]=a10*c+a20*s;out[5]=a11*c+a21*s;out[6]=a12*c+a22*s;out[7]=a13*c+a23*s;out[8]=a20*c-a10*s;out[9]=a21*c-a11*s;out[10]=a22*c-a12*s;out[11]=a23*c-a13*s;return out}},{}],18:[function(require,module,exports){module.exports=rotateY;function rotateY(out,a,rad){var s=Math.sin(rad),c=Math.cos(rad),a00=a[0],a01=a[1],a02=a[2],a03=a[3],a20=a[8],a21=a[9],a22=a[10],a23=a[11];if(a!==out){out[4]=a[4];out[5]=a[5];out[6]=a[6];out[7]=a[7];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15]}out[0]=a00*c-a20*s;out[1]=a01*c-a21*s;out[2]=a02*c-a22*s;out[3]=a03*c-a23*s;out[8]=a00*s+a20*c;out[9]=a01*s+a21*c;out[10]=a02*s+a22*c;out[11]=a03*s+a23*c;return out}},{}],19:[function(require,module,exports){module.exports=rotateZ;function rotateZ(out,a,rad){var s=Math.sin(rad),c=Math.cos(rad),a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7];if(a!==out){out[8]=a[8];out[9]=a[9];out[10]=a[10];out[11]=a[11];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15]}out[0]=a00*c+a10*s;out[1]=a01*c+a11*s;out[2]=a02*c+a12*s;out[3]=a03*c+a13*s;out[4]=a10*c-a00*s;out[5]=a11*c-a01*s;out[6]=a12*c-a02*s;out[7]=a13*c-a03*s;return out}},{}],20:[function(require,module,exports){module.exports=scale;function scale(out,a,v){var x=v[0],y=v[1],z=v[2];out[0]=a[0]*x;out[1]=a[1]*x;out[2]=a[2]*x;out[3]=a[3]*x;out[4]=a[4]*y;out[5]=a[5]*y;out[6]=a[6]*y;out[7]=a[7]*y;out[8]=a[8]*z;out[9]=a[9]*z;out[10]=a[10]*z;out[11]=a[11]*z;out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15];return out}},{}],21:[function(require,module,exports){module.exports=str;function str(a){return"mat4("+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+", "+a[4]+", "+a[5]+", "+a[6]+", "+a[7]+", "+a[8]+", "+a[9]+", "+a[10]+", "+a[11]+", "+a[12]+", "+a[13]+", "+a[14]+", "+a[15]+")"}},{}],22:[function(require,module,exports){module.exports=translate;function translate(out,a,v){var x=v[0],y=v[1],z=v[2],a00,a01,a02,a03,a10,a11,a12,a13,a20,a21,a22,a23;if(a===out){out[12]=a[0]*x+a[4]*y+a[8]*z+a[12];out[13]=a[1]*x+a[5]*y+a[9]*z+a[13];out[14]=a[2]*x+a[6]*y+a[10]*z+a[14];out[15]=a[3]*x+a[7]*y+a[11]*z+a[15]}else{a00=a[0];a01=a[1];a02=a[2];a03=a[3];a10=a[4];a11=a[5];a12=a[6];a13=a[7];a20=a[8];a21=a[9];a22=a[10];a23=a[11];out[0]=a00;out[1]=a01;out[2]=a02;out[3]=a03;out[4]=a10;out[5]=a11;out[6]=a12;out[7]=a13;out[8]=a20;out[9]=a21;out[10]=a22;out[11]=a23;out[12]=a00*x+a10*y+a20*z+a[12];out[13]=a01*x+a11*y+a21*z+a[13];out[14]=a02*x+a12*y+a22*z+a[14];out[15]=a03*x+a13*y+a23*z+a[15]}return out}},{}],23:[function(require,module,exports){module.exports=transpose;function transpose(out,a){if(out===a){var a01=a[1],a02=a[2],a03=a[3],a12=a[6],a13=a[7],a23=a[11];out[1]=a[4];out[2]=a[8];out[3]=a[12];out[4]=a01;out[6]=a[9];out[7]=a[13];out[8]=a02;out[9]=a12;out[11]=a[14];out[12]=a03;out[13]=a13;out[14]=a23}else{out[0]=a[0];out[1]=a[4];out[2]=a[8];out[3]=a[12];out[4]=a[1];out[5]=a[5];out[6]=a[9];out[7]=a[13];out[8]=a[2];out[9]=a[6];out[10]=a[10];out[11]=a[14];out[12]=a[3];out[13]=a[7];out[14]=a[11];out[15]=a[15]}return out}},{}],"gl-mat4":[function(require,module,exports){module.exports={create:require("./create"),clone:require("./clone"),copy:require("./copy"),identity:require("./identity"),transpose:require("./transpose"),invert:require("./invert"),adjoint:require("./adjoint"),determinant:require("./determinant"),multiply:require("./multiply"),translate:require("./translate"),scale:require("./scale"),rotate:require("./rotate"),rotateX:require("./rotateX"),rotateY:require("./rotateY"),rotateZ:require("./rotateZ"),fromRotationTranslation:require("./fromRotationTranslation"),fromQuat:require("./fromQuat"),frustum:require("./frustum"),perspective:require("./perspective"),perspectiveFromFieldOfView:require("./perspectiveFromFieldOfView"),ortho:require("./ortho"),lookAt:require("./lookAt"),str:require("./str")}},{"./adjoint":1,"./clone":2,"./copy":3,"./create":4,"./determinant":5,"./fromQuat":6,"./fromRotationTranslation":7,"./frustum":8,"./identity":9,"./invert":10,"./lookAt":11,"./multiply":12,"./ortho":13,"./perspective":14,"./perspectiveFromFieldOfView":15,"./rotate":16,"./rotateX":17,"./rotateY":18,"./rotateZ":19,"./scale":20,"./str":21,"./translate":22,"./transpose":23}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=clone;function clone(a){var out=new Float32Array(16);out[0]=a[0];out[1]=a[1];out[2]=a[2];out[3]=a[3];out[4]=a[4];out[5]=a[5];out[6]=a[6];out[7]=a[7];out[8]=a[8];out[9]=a[9];out[10]=a[10];out[11]=a[11];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15];return out}},{}],2:[function(require,module,exports){module.exports=create;function create(){var out=new Float32Array(16);out[0]=1;out[1]=0;out[2]=0;out[3]=0;out[4]=0;out[5]=1;out[6]=0;out[7]=0;out[8]=0;out[9]=0;out[10]=1;out[11]=0;out[12]=0;out[13]=0;out[14]=0;out[15]=1;return out}},{}],3:[function(require,module,exports){module.exports=determinant;function determinant(a){var a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11],a30=a[12],a31=a[13],a32=a[14],a33=a[15],b00=a00*a11-a01*a10,b01=a00*a12-a02*a10,b02=a00*a13-a03*a10,b03=a01*a12-a02*a11,b04=a01*a13-a03*a11,b05=a02*a13-a03*a12,b06=a20*a31-a21*a30,b07=a20*a32-a22*a30,b08=a20*a33-a23*a30,b09=a21*a32-a22*a31,b10=a21*a33-a23*a31,b11=a22*a33-a23*a32;return b00*b11-b01*b10+b02*b09+b03*b08-b04*b07+b05*b06}},{}],4:[function(require,module,exports){module.exports=fromRotationTranslation;function fromRotationTranslation(out,q,v){var x=q[0],y=q[1],z=q[2],w=q[3],x2=x+x,y2=y+y,z2=z+z,xx=x*x2,xy=x*y2,xz=x*z2,yy=y*y2,yz=y*z2,zz=z*z2,wx=w*x2,wy=w*y2,wz=w*z2;out[0]=1-(yy+zz);out[1]=xy+wz;out[2]=xz-wy;out[3]=0;out[4]=xy-wz;out[5]=1-(xx+zz);out[6]=yz+wx;out[7]=0;out[8]=xz+wy;out[9]=yz-wx;out[10]=1-(xx+yy);out[11]=0;out[12]=v[0];out[13]=v[1];out[14]=v[2];out[15]=1;return out}},{}],5:[function(require,module,exports){module.exports=identity;function identity(out){out[0]=1;out[1]=0;out[2]=0;out[3]=0;out[4]=0;out[5]=1;out[6]=0;out[7]=0;out[8]=0;out[9]=0;out[10]=1;out[11]=0;out[12]=0;out[13]=0;out[14]=0;out[15]=1;return out}},{}],6:[function(require,module,exports){module.exports=invert;function invert(out,a){var a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11],a30=a[12],a31=a[13],a32=a[14],a33=a[15],b00=a00*a11-a01*a10,b01=a00*a12-a02*a10,b02=a00*a13-a03*a10,b03=a01*a12-a02*a11,b04=a01*a13-a03*a11,b05=a02*a13-a03*a12,b06=a20*a31-a21*a30,b07=a20*a32-a22*a30,b08=a20*a33-a23*a30,b09=a21*a32-a22*a31,b10=a21*a33-a23*a31,b11=a22*a33-a23*a32,det=b00*b11-b01*b10+b02*b09+b03*b08-b04*b07+b05*b06;if(!det){return null}det=1/det;out[0]=(a11*b11-a12*b10+a13*b09)*det;out[1]=(a02*b10-a01*b11-a03*b09)*det;out[2]=(a31*b05-a32*b04+a33*b03)*det;out[3]=(a22*b04-a21*b05-a23*b03)*det;out[4]=(a12*b08-a10*b11-a13*b07)*det;out[5]=(a00*b11-a02*b08+a03*b07)*det;out[6]=(a32*b02-a30*b05-a33*b01)*det;out[7]=(a20*b05-a22*b02+a23*b01)*det;out[8]=(a10*b10-a11*b08+a13*b06)*det;out[9]=(a01*b08-a00*b10-a03*b06)*det;out[10]=(a30*b04-a31*b02+a33*b00)*det;out[11]=(a21*b02-a20*b04-a23*b00)*det;out[12]=(a11*b07-a10*b09-a12*b06)*det;out[13]=(a00*b09-a01*b07+a02*b06)*det;out[14]=(a31*b01-a30*b03-a32*b00)*det;out[15]=(a20*b03-a21*b01+a22*b00)*det;return out}},{}],7:[function(require,module,exports){module.exports=multiply;function multiply(out,a,b){var a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11],a30=a[12],a31=a[13],a32=a[14],a33=a[15];var b0=b[0],b1=b[1],b2=b[2],b3=b[3];out[0]=b0*a00+b1*a10+b2*a20+b3*a30;out[1]=b0*a01+b1*a11+b2*a21+b3*a31;out[2]=b0*a02+b1*a12+b2*a22+b3*a32;out[3]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[4];b1=b[5];b2=b[6];b3=b[7];out[4]=b0*a00+b1*a10+b2*a20+b3*a30;out[5]=b0*a01+b1*a11+b2*a21+b3*a31;out[6]=b0*a02+b1*a12+b2*a22+b3*a32;out[7]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[8];b1=b[9];b2=b[10];b3=b[11];out[8]=b0*a00+b1*a10+b2*a20+b3*a30;out[9]=b0*a01+b1*a11+b2*a21+b3*a31;out[10]=b0*a02+b1*a12+b2*a22+b3*a32;out[11]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[12];b1=b[13];b2=b[14];b3=b[15];out[12]=b0*a00+b1*a10+b2*a20+b3*a30;out[13]=b0*a01+b1*a11+b2*a21+b3*a31;out[14]=b0*a02+b1*a12+b2*a22+b3*a32;out[15]=b0*a03+b1*a13+b2*a23+b3*a33;return out}},{}],8:[function(require,module,exports){module.exports=scale;function scale(out,a,v){var x=v[0],y=v[1],z=v[2];out[0]=a[0]*x;out[1]=a[1]*x;out[2]=a[2]*x;out[3]=a[3]*x;out[4]=a[4]*y;out[5]=a[5]*y;out[6]=a[6]*y;out[7]=a[7]*y;out[8]=a[8]*z;out[9]=a[9]*z;out[10]=a[10]*z;out[11]=a[11]*z;out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15];return out}},{}],9:[function(require,module,exports){module.exports=translate;function translate(out,a,v){var x=v[0],y=v[1],z=v[2],a00,a01,a02,a03,a10,a11,a12,a13,a20,a21,a22,a23;if(a===out){out[12]=a[0]*x+a[4]*y+a[8]*z+a[12];out[13]=a[1]*x+a[5]*y+a[9]*z+a[13];out[14]=a[2]*x+a[6]*y+a[10]*z+a[14];out[15]=a[3]*x+a[7]*y+a[11]*z+a[15]}else{a00=a[0];a01=a[1];a02=a[2];a03=a[3];a10=a[4];a11=a[5];a12=a[6];a13=a[7];a20=a[8];a21=a[9];a22=a[10];a23=a[11];out[0]=a00;out[1]=a01;out[2]=a02;out[3]=a03;out[4]=a10;out[5]=a11;out[6]=a12;out[7]=a13;out[8]=a20;out[9]=a21;out[10]=a22;out[11]=a23;out[12]=a00*x+a10*y+a20*z+a[12];out[13]=a01*x+a11*y+a21*z+a[13];out[14]=a02*x+a12*y+a22*z+a[14];out[15]=a03*x+a13*y+a23*z+a[15]}return out}},{}],10:[function(require,module,exports){module.exports=transpose;function transpose(out,a){if(out===a){var a01=a[1],a02=a[2],a03=a[3],a12=a[6],a13=a[7],a23=a[11];out[1]=a[4];out[2]=a[8];out[3]=a[12];out[4]=a01;out[6]=a[9];out[7]=a[13];out[8]=a02;out[9]=a12;out[11]=a[14];out[12]=a03;out[13]=a13;out[14]=a23}else{out[0]=a[0];out[1]=a[4];out[2]=a[8];out[3]=a[12];out[4]=a[1];out[5]=a[5];out[6]=a[9];out[7]=a[13];out[8]=a[2];out[9]=a[6];out[10]=a[10];out[11]=a[14];out[12]=a[3];out[13]=a[7];out[14]=a[11];out[15]=a[15]}return out}},{}],11:[function(require,module,exports){module.exports=cross;function cross(out,a,b){var ax=a[0],ay=a[1],az=a[2],bx=b[0],by=b[1],bz=b[2];out[0]=ay*bz-az*by;out[1]=az*bx-ax*bz;out[2]=ax*by-ay*bx;return out}},{}],12:[function(require,module,exports){module.exports=dot;function dot(a,b){return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]}},{}],13:[function(require,module,exports){module.exports=length;function length(a){var x=a[0],y=a[1],z=a[2];return Math.sqrt(x*x+y*y+z*z)}},{}],14:[function(require,module,exports){module.exports=lerp;function lerp(out,a,b,t){var ax=a[0],ay=a[1],az=a[2];out[0]=ax+t*(b[0]-ax);out[1]=ay+t*(b[1]-ay);out[2]=az+t*(b[2]-az);return out}},{}],15:[function(require,module,exports){module.exports=normalize;function normalize(out,a){var x=a[0],y=a[1],z=a[2];var len=x*x+y*y+z*z;if(len>0){len=1/Math.sqrt(len);out[0]=a[0]*len;out[1]=a[1]*len;out[2]=a[2]*len}return out}},{}],16:[function(require,module,exports){var normalize=require("./normalize");var create=require("gl-mat4/create");var clone=require("gl-mat4/clone");var determinant=require("gl-mat4/determinant");var invert=require("gl-mat4/invert");var transpose=require("gl-mat4/transpose");var vec3={length:require("gl-vec3/length"),normalize:require("gl-vec3/normalize"),dot:require("gl-vec3/dot"),cross:require("gl-vec3/cross")};var tmp=create();var perspectiveMatrix=create();var tmpVec4=[0,0,0,0];var row=[[0,0,0],[0,0,0],[0,0,0]];var pdum3=[0,0,0];module.exports=function decomposeMat4(matrix,translation,scale,skew,perspective,quaternion){if(!translation)translation=[0,0,0];if(!scale)scale=[0,0,0];if(!skew)skew=[0,0,0];if(!perspective)perspective=[0,0,0,1];if(!quaternion)quaternion=[0,0,0,1];if(!normalize(tmp,matrix))return false;clone(perspectiveMatrix,tmp);perspectiveMatrix[3]=0;perspectiveMatrix[7]=0;perspectiveMatrix[11]=0;perspectiveMatrix[15]=1;if(Math.abs(determinant(perspectiveMatrix)<1e-8))return false;var a03=tmp[3],a13=tmp[7],a23=tmp[11],a30=tmp[12],a31=tmp[13],a32=tmp[14],a33=tmp[15];if(a03!==0||a13!==0||a23!==0){tmpVec4[0]=a03;tmpVec4[1]=a13;tmpVec4[2]=a23;tmpVec4[3]=a33;var ret=invert(perspectiveMatrix,perspectiveMatrix);if(!ret)return false;transpose(perspectiveMatrix,perspectiveMatrix);vec4multMat4(perspective,tmpVec4,perspectiveMatrix)}else{perspective[0]=perspective[1]=perspective[2]=0;perspective[3]=1}translation[0]=a30;translation[1]=a31;translation[2]=a32;mat3from4(row,tmp);scale[0]=vec3.length(row[0]);vec3.normalize(row[0],row[0]);skew[0]=vec3.dot(row[0],row[1]);combine(row[1],row[1],row[0],1,-skew[0]);scale[1]=vec3.length(row[1]);vec3.normalize(row[1],row[1]);skew[0]/=scale[1];skew[1]=vec3.dot(row[0],row[2]);combine(row[2],row[2],row[0],1,-skew[1]);skew[2]=vec3.dot(row[1],row[2]);combine(row[2],row[2],row[1],1,-skew[2]);scale[2]=vec3.length(row[2]);vec3.normalize(row[2],row[2]);skew[1]/=scale[2];skew[2]/=scale[2];vec3.cross(pdum3,row[1],row[2]);if(vec3.dot(row[0],pdum3)<0){for(var i=0;i<3;i++){scale[i]*=-1;row[i][0]*=-1;row[i][1]*=-1;row[i][2]*=-1}}quaternion[0]=.5*Math.sqrt(Math.max(1+row[0][0]-row[1][1]-row[2][2],0));quaternion[1]=.5*Math.sqrt(Math.max(1-row[0][0]+row[1][1]-row[2][2],0));quaternion[2]=.5*Math.sqrt(Math.max(1-row[0][0]-row[1][1]+row[2][2],0));quaternion[3]=.5*Math.sqrt(Math.max(1+row[0][0]+row[1][1]+row[2][2],0));if(row[2][1]>row[1][2])quaternion[0]=-quaternion[0];if(row[0][2]>row[2][0])quaternion[1]=-quaternion[1];if(row[1][0]>row[0][1])quaternion[2]=-quaternion[2];return true};function vec4multMat4(out,a,m){var x=a[0],y=a[1],z=a[2],w=a[3];out[0]=m[0]*x+m[4]*y+m[8]*z+m[12]*w;out[1]=m[1]*x+m[5]*y+m[9]*z+m[13]*w;out[2]=m[2]*x+m[6]*y+m[10]*z+m[14]*w;out[3]=m[3]*x+m[7]*y+m[11]*z+m[15]*w;return out}function mat3from4(out,mat4x4){out[0][0]=mat4x4[0];out[0][1]=mat4x4[1];out[0][2]=mat4x4[2];out[1][0]=mat4x4[4];out[1][1]=mat4x4[5];out[1][2]=mat4x4[6];out[2][0]=mat4x4[8];out[2][1]=mat4x4[9];out[2][2]=mat4x4[10]}function combine(out,a,b,scale1,scale2){out[0]=a[0]*scale1+b[0]*scale2;out[1]=a[1]*scale1+b[1]*scale2;out[2]=a[2]*scale1+b[2]*scale2}},{"./normalize":17,"gl-mat4/clone":1,"gl-mat4/create":2,"gl-mat4/determinant":3,"gl-mat4/invert":6,"gl-mat4/transpose":10,"gl-vec3/cross":11,"gl-vec3/dot":12,"gl-vec3/length":13,"gl-vec3/normalize":15}],17:[function(require,module,exports){module.exports=function normalize(out,mat){var m44=mat[15];if(m44===0)return false;var scale=1/m44;for(var i=0;i<16;i++)out[i]=mat[i]*scale;return true}},{}],18:[function(require,module,exports){var mat4={identity:require("gl-mat4/identity"),translate:require("gl-mat4/translate"),multiply:require("gl-mat4/multiply"),create:require("gl-mat4/create"),scale:require("gl-mat4/scale"),fromRotationTranslation:require("gl-mat4/fromRotationTranslation")};var rotationMatrix=mat4.create();var temp=mat4.create();module.exports=function recomposeMat4(matrix,translation,scale,skew,perspective,quaternion){mat4.identity(matrix);mat4.fromRotationTranslation(matrix,quaternion,translation);matrix[3]=perspective[0];matrix[7]=perspective[1];matrix[11]=perspective[2];matrix[15]=perspective[3];mat4.identity(temp);if(skew[2]!==0){temp[9]=skew[2];mat4.multiply(matrix,matrix,temp)}if(skew[1]!==0){temp[9]=0;temp[8]=skew[1];mat4.multiply(matrix,matrix,temp)}if(skew[0]!==0){temp[8]=0;temp[4]=skew[0];mat4.multiply(matrix,matrix,temp)}mat4.scale(matrix,matrix,scale);return matrix}},{"gl-mat4/create":2,"gl-mat4/fromRotationTranslation":4,"gl-mat4/identity":5,"gl-mat4/multiply":7,"gl-mat4/scale":8,"gl-mat4/translate":9}],19:[function(require,module,exports){module.exports=require("gl-quat/slerp")},{"gl-quat/slerp":20}],20:[function(require,module,exports){module.exports=slerp;function slerp(out,a,b,t){var ax=a[0],ay=a[1],az=a[2],aw=a[3],bx=b[0],by=b[1],bz=b[2],bw=b[3];var omega,cosom,sinom,scale0,scale1;cosom=ax*bx+ay*by+az*bz+aw*bw;if(cosom<0){cosom=-cosom;bx=-bx;by=-by;bz=-bz;bw=-bw}if(1-cosom>1e-6){omega=Math.acos(cosom);sinom=Math.sin(omega);scale0=Math.sin((1-t)*omega)/sinom;scale1=Math.sin(t*omega)/sinom}else{scale0=1-t;scale1=t}out[0]=scale0*ax+scale1*bx;out[1]=scale0*ay+scale1*by;out[2]=scale0*az+scale1*bz;out[3]=scale0*aw+scale1*bw;return out}},{}],"mat4-interpolator":[function(require,module,exports){var lerp=require("gl-vec3/lerp");var recomposeMat4=require("mat4-recompose");var decomposeMat4=require("mat4-decompose");var determinant=require("gl-mat4/determinant");var slerp=require("quat-slerp");var state0=state();var state1=state();var tmpState=state();module.exports=interpolator;function interpolator(start,end){var r0=decompose(start,state0);var r1=decompose(end,state1);var valid=r0&&r1;if(!valid)return false;return function(out,alpha){lerp(tmpState.translate,state0.translate,state1.translate,alpha);lerp(tmpState.skew,state0.skew,state1.skew,alpha);lerp(tmpState.scale,state0.scale,state1.scale,alpha);lerp(tmpState.perspective,state0.perspective,state1.perspective,alpha);slerp(tmpState.quaternion,state0.quaternion,state1.quaternion,alpha);recomposeMat4(out,tmpState.translate,tmpState.scale,tmpState.skew,tmpState.perspective,tmpState.quaternion);return out}}function decompose(m,state){if(determinant(m)===0)return false;return decomposeMat4(m,state.translate,state.scale,state.skew,state.perspective,state.quaternion)}function state(){return{translate:vec3(),scale:vec3(1),skew:vec3(),perspective:vec4(),quaternion:vec4()}}function vec3(n){return[n||0,n||0,n||0]}function vec4(){return[0,0,0,1]}},{"gl-mat4/determinant":3,"gl-vec3/lerp":14,"mat4-decompose":16,"mat4-recompose":18,"quat-slerp":19}]},{},[]);var mat4=require("gl-mat4");var interpolator=require("mat4-interpolator");var inherits=require("inherits");function toMat4(out,a){if(!out)out=new Float32Array(16);out[0]=a[0];out[1]=a[1];out[2]=0;out[3]=0;out[4]=a[2];out[5]=a[3];out[6]=0;out[7]=0;out[8]=0;out[9]=0;out[10]=1;out[11]=0;out[12]=a[4];out[13]=a[5];out[14]=0;out[15]=1;return out}var splitter=/[,\s]+/i;var MAT_2D="matrix(";var MAT_3D="matrix3d(";function parseMatrix(str,out){if(str==="")throw new Error("could not parse empty string");if(str==="none")return mat4.identity(out||[]);var start=MAT_3D.length;if(str.charAt(6)==="(")start=MAT_2D.length;var numbers=str.substring(start,str.length-1).split(splitter);console.log(str,numbers);for(var i=0;i<numbers.length;i++)numbers[i]=parseFloat(numbers[i],10);if(numbers.length<16)return toMat4(out,numbers);if(!out)return numbers;for(i=0;i<16;i++)out[i]=numbers[i];return out}var scratch=new Float32Array(16);for(var i=0;i<16;i++)scratch[i]=0;function stringifyMatrix(matrix){for(var i=0;i<16;i++)scratch[i]=Math.round(matrix[i]*1e15)/1e15;return"matrix3d("+scratch.join(", ")+")"}function getUntransformedRect(el){var parent=el.offsetParent;var top=el.offsetTop;var left=el.offsetLeft;while(parent&&parent!==document.body){top+=parent.offsetTop-parent.scrollTop;left+=parent.offsetLeft-parent.scrollLeft;parent=parent.offsetParent}return{top:top,left:left,width:el.offsetWidth,height:el.offsetHeight}}function FixedFLIP(options){FLIP.call(this,options)}inherits(FixedFLIP,FLIP);FixedFLIP.prototype.first=function(){var css=getComputedStyle(this.element_);this.first_.layout=getUntransformedRect(this.element_);this.first_.transform=css.transform;this.first_.opacity=parseFloat(css.opacity)};FixedFLIP.prototype.last=function(){if(typeof lastclassname!=="undefined")this.addclass(lastclassname);var css=getComputedStyle(this.element_);this.last_.layout=getUntransformedRect(this.element_);this.last_.transform=css.transform;this.last_.opacity=parseFloat(css.opacity)};FixedFLIP.prototype.invert=function(){FLIP.prototype.invert.call(this);var transform=this.first_.transform==="none"?"":this.first_.transform;this.element_.style.transformOrigin="";this.element_.style.transform="translate("+this.invert_.x+"px, "+this.invert_.y+"px)"+" scale("+this.invert_.sx+", "+this.invert_.sy+")"+" "+transform};var FixedRAF={play_:function(startTime){if(typeof startTime==="undefined")this.start_=window.performance.now()+this.delay_;else this.start_=startTime+this.delay_;var start=parseMatrix(getComputedStyle(this.element_).transform);var end=parseMatrix(this.last_.transform);var lerp=interpolator(start,end);
var transform=mat4.create();console.log(start,end);var self=this;var update=function(){var time=(window.performance.now()-self.start_)/self.duration_;time=self.clamp_(time,0,1);lerp(transform,self.easing_(time));self.element_.style.transform=stringifyMatrix(transform);if(time<1){requestAnimationFrame(update)}else{self.cleanUpAndFireEvent_()}};requestAnimationFrame(update)}};FLIP.extend("FixedRAF",FixedRAF);document.addEventListener("DOMContentLoaded",function(){var button=document.querySelector(".btn");var box=document.querySelector(".box");var flip=new FixedFLIP({element:box,duration:1e3,easing:function(t){return--t*t*t*t*t+1},play:"FixedRAF"});button.addEventListener("click",function(){flip.first();box.classList.toggle("flipped");flip.last();flip.invert();flip.play()})});

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "inherits": "2.0.1",
    "gl-mat4": "1.1.4",
    "mat4-interpolator": "1.0.3"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->
<button class="btn">FLIP!</button>
<div class="box"></div>

page-head.html

<!-- contents of this file will be placed inside the <head> -->
<script src="https://rawgit.com/ju1ius/flipjs/master/dist/flip.js"></script>
<style>
  
:root {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body, html {
  background-color: #171717;
  height: 100%;
}
.box {
  position: absolute;
  width: 100px; height: 100px;
  top: 24px; left: 24px;
  //border: 4px solid hsl(255, 40%, 30%);
  will-change: transform;
  transform: translate(100%, 100%) scale(0.8) rotate(12deg);
  background-color: #B4D455;
}
.box.flipped {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
}
  
</style>

requirebin.md

made with requirebin