Move jquery plugni to experiments branch

https://github.com/thednp/kute.js/pull/52

ES6-kute.js

@@ -0,0 +1,837 @@
+/* KUTE.js - The Light Tweening Engine
+ * by dnp_theme
+ * Licensed under MIT-License
+ */
+(((root, factory) => {
+  if (typeof define === 'function' && define.amd) {
+    define([], factory); // AMD. Register as an anonymous module.
+  } else if (typeof exports == 'object') {
+    module.exports = factory(); // Node, not strict CommonJS
+  } else {
+    root.KUTE = factory();
+  }
+})(this, () => {
+  // set a custom scope for KUTE.js
+  const g = typeof global !== 'undefined' ? global : window; // tick must be null!!
+
+  const time = g.performance;
+  let tweens = [];
+  let tick = null;
+
+  //supported properties
+  const // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
+  _colors = ['color', 'backgroundColor']; //all properties default values
+
+  const // dimensions / box model
+  _boxModel  = ['top', 'left', 'width', 'height'];
+
+  const // transform
+  _transform  = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'];
+
+  const //scroll, it has no default value, it's calculated on tween start
+  _scroll  = ['scroll'];
+
+  const // opacity
+  _opacity  = ['opacity'];
+
+  const _all = _colors.concat( _opacity, _boxModel, _transform);
+  const al = _all.length;
+  const _defaults = {};
+
+  //populate default values object
+  for ( let i=0; i<al; i++ ){
+    let p = _all[i];
+    if (_colors.includes(p)){
+      _defaults[p] = 'rgba(0,0,0,0)'; // _defaults[p] = {r:0,g:0,b:0,a:1}; // no unit/suffix
+    } else if ( _boxModel.includes(p) ) {
+      _defaults[p] = 0;
+    } else if ( p === 'translate3d' ){ // px
+      _defaults[p] = [0,0,0];
+    } else if ( p === 'translate' ){ // px
+      _defaults[p] = [0,0];
+    } else if ( p === 'rotate' || /X|Y|Z/.test(p) ){ // deg
+      _defaults[p] = 0;
+    } else if ( p === 'scale' || p === 'opacity' ){ // unitless
+      _defaults[p] = 1;
+    }
+    p = null;
+  }
+
+  // default tween options, since 1.6.1
+  const defaultOptions = {
+      duration: 700,
+      delay: 0,
+      offset: 0,
+      repeat: 0,
+      repeatDelay: 0,
+      yoyo: false,
+      easing: 'linear',
+      keepHex: false,
+    }; // we optimize morph depending on device type
+
+  const // tools / utils
+  getPrefix = () => {
+    //returns browser prefix
+    let div = document.createElement('div');
+
+    var i = 0;
+    const pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
+    const s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
+    for (const i = 0, pl = pf.length; i < pl; i++) { if (s[i] in div.style) { return pf[i]; }  }
+    div = null;
+  };
+
+  const property = p => { // returns prefixed property | property
+    const r = (!(p in document.body.style)) ? true : false, f = getPrefix(); // is prefix required for property | prefix
+    return r ? f + (p.charAt(0).toUpperCase() + p.slice(1)) : p;
+  };
+
+  const selector = (el, multi) => { // a public selector utility
+    let nl;
+    if (multi){
+      nl = el instanceof Object || typeof el === 'object' ? el : document.querySelectorAll(el);
+    } else {
+      nl = typeof el === 'object' ? el
+         : /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el);
+    }
+    if (nl === null && el !== 'window') throw new TypeError(`Element not found or incorrect selector: ${el}`);
+    return nl;
+  };
+
+  const radToDeg = a => a*180/Math.PI;
+
+  const trueDimension = (d, p) => {
+    //true dimension returns { v = value, u = unit }
+    const x = parseInt(d) || 0;
+
+    const mu = ['px','%','deg','rad','em','rem','vh','vw'];
+    let y;
+    for (let i=0, l = mu.length; i<l; i++) { if ( typeof d === 'string' && d.includes(mu[i]) ) { y = mu[i]; break; } }
+    y = y !== undefined ? y : (p ? 'deg' : 'px');
+    return { v: x, u: y };
+  };
+
+  const trueColor = v => { // replace transparent and transform any color to rgba()/rgb()
+    if (/rgb|rgba/.test(v)) { // first check if it's a rgb string
+      const vrgb = v.replace(/\s|\)/,'').split('(')[1].split(','), y = vrgb[3] ? vrgb[3] : null;
+      if (!y) {
+        return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
+      } else {
+        return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(y) };
+      }
+    } else if (/^#/.test(v)) {
+      const fromHex = hexToRGB(v); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
+    } else if (/transparent|none|initial|inherit/.test(v)) {
+      return { r: 0, g: 0, b: 0, a: 0 };
+    } else if (!/^#|^rgb/.test(v) ) { // maybe we can check for web safe colors
+      const h = document.getElementsByTagName('head')[0]; h.style.color = v;
+      let webColor = g.getComputedStyle(h,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
+      h.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
+    }
+  };
+
+  const rgbToHex = (r, g, b) => // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
+  `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+
+  const hexToRGB = hex => {
+    const shr = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    hex = hex.replace(shr, (m, r, g, b) => r + r + g + g + b + b);
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null;
+  };
+
+  const getInlineStyle = (el, p) => { // get transform style for element from cssText for .to() method, the sp is for transform property
+    if (!el) return; // if the scroll applies to `window` it returns as it has no styling
+    const //the cssText
+          css = el.style.cssText.replace(/\s/g,'').split(';'),
+          trsf = {}; //the transform object
+    // if we have any inline style in the cssText attribute, usually it has higher priority
+    for ( let i=0, csl = css.length; i<csl; i++ ){
+      if ( /transform/i.test(css[i])) {
+        const tps = css[i].split(':')[1].split(')'); //all transform properties
+        for ( let k=0, tpl = tps.length-1; k< tpl; k++){
+          const tpv = tps[k].split('('), tp = tpv[0], tv = tpv[1]; //each transform property
+          if ( _transform.includes(tp) ){
+            trsf[tp] = /translate3d/.test(tp) ? tv.split(',') : tv;
+          }
+        }
+      }
+    }
+    return trsf;
+  };
+
+  const getCurrentStyle = (el, p) => { // get computed style property for element for .to() method
+    const styleAttribute = el.style,
+          computedStyle = g.getComputedStyle(el,null) || el.currentStyle,
+          //the computed style | prefixed property
+          pp = property(p),
+          styleValue = styleAttribute[p] && !/auto|initial|none|unset/.test(styleAttribute[p]) ? styleAttribute[p] : computedStyle[pp]; // s the property style value
+    if ( p !== 'transform' && (pp in computedStyle || pp in styleAttribute) ) {
+      if ( styleValue ){
+        if (pp==='filter') { // handle IE8 opacity
+          const filterValue = parseInt(styleValue.split('=')[1].replace(')',''));
+          return parseFloat(filterValue/100);
+        } else {
+          return styleValue;
+        }
+      } else {
+        return _defaults[p];
+      }
+    }
+  };
+
+  const //more internals
+  getAll = () => tweens;
+
+  const removeAll = () => { tweens = []; };
+  const add = tw => { tweens.push(tw); };
+  const remove = tw => { const i = tweens.indexOf(tw); if (i !== -1) { tweens.splice(i, 1); }};
+  const stop = () => { if (tick) { _cancelAnimationFrame(tick); tick = null; } };
+
+  const // support Touch?
+  canTouch = ('ontouchstart' in g || navigator && navigator.msMaxTouchPoints) || false;
+
+  const touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
+
+  const //events to prevent on scroll
+  mouseEnter = 'mouseenter';
+
+  const _requestAnimationFrame = g.requestAnimationFrame || g.webkitRequestAnimationFrame || (c => setTimeout(c, 16));
+  const _cancelAnimationFrame = g.cancelAnimationFrame || g.webkitCancelRequestAnimationFrame || (c => clearTimeout(c));
+  const transformProperty = property('transform');
+
+  const //true scroll container
+  body = document.body;
+
+  const html = document.getElementsByTagName('HTML')[0];
+  const scrollContainer = navigator && /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html;
+  const isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false;
+
+  const // check IE8/IE
+  isIE8 = isIE === 8;
+
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+  // KUTE.js INTERPOLATORS
+  const interpolate = g.Interpolate = {};
+
+  // core easing functions
+
+  const number = interpolate.number = (a, b, v) => { // number1, number2, progress
+    a = +a; b -= a; return a + b * v;
+  };
+
+  const unit = interpolate.unit = (a, b, u, v) => { // number1, number2, unit, progress
+    a = +a; b -= a; return ( a + b * v ) + u;
+  };
+
+  const color = interpolate.color = (a, b, v, h) => {
+    // rgba1, rgba2, progress, convertToHex(true/false)
+    const _c = {};
+
+    let c;
+    const n = number;
+    const ep = ')';
+    const cm =',';
+    const r = 'rgb(';
+    const ra = 'rgba(';
+    for (c in b) { _c[c] = c !== 'a' ? (number(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (number(a[c],b[c],v) * 100 >> 0 )/100 : null; }
+    return h ? rgbToHex( _c.r, _c.g, _c.b ) : !_c.a ? r + _c.r + cm + _c.g + cm + _c.b + ep : ra + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
+  };
+
+  const translate = interpolate.translate = isMobile ? (a, b, u, v) => {
+    const translation = {};
+    for (const ax in b){
+      translation[ax] = ( a[ax]===b[ax] ? b[ax] : (a[ax] + ( b[ax] - a[ax] ) * v ) >> 0 ) + u;
+    }
+    return translation.x||translation.y ? `translate(${translation.x},${translation.y})` :
+      `translate3d(${translation.translateX},${translation.translateY},${translation.translateZ})`;
+  } : (a, b, u, v) => {
+    const translation = {};
+    for (const ax in b){
+      translation[ax] = ( a[ax]===b[ax] ? b[ax] : ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 100 >> 0 ) / 100 ) + u;
+    }
+    return translation.x||translation.y ? `translate(${translation.x},${translation.y})` :
+      `translate3d(${translation.translateX},${translation.translateY},${translation.translateZ})`;
+  };
+
+  const rotate = interpolate.rotate = (a, b, u, v) => {
+    const rotation = {};
+    for ( const rx in b ){
+      rotation[rx] = rx === 'z' ? (`rotate(${((a[rx] + (b[rx] - a[rx]) * v) * 100 >> 0 ) / 100}${u})`)
+                                : (`${rx}(${((a[rx] + (b[rx] - a[rx]) * v) * 100 >> 0 ) / 100}${u})`);
+    }
+    return rotation.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||'');
+  };
+
+  const skew = interpolate.skew = (a, b, u, v) => {
+    const skewProp = {};
+    for ( const sx in b ){
+      skewProp[sx] = `${sx}(${((a[sx] + (b[sx] - a[sx]) * v) * 10 >> 0) / 10}${u})`;
+    }
+    return (skewProp.skewX||'') + (skewProp.skewY||'');
+  };
+
+  const scale = interpolate.scale = (a, b, v) => `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`;
+
+  const // KUTE.js DOM update functions
+  DOM = {};
+
+  const ticker = t => {
+    let i = 0;
+    while ( i < tweens.length ) {
+      if ( update.call(tweens[i],t) ) {
+        i++;
+      } else {
+        tweens.splice(i, 1);
+      }
+    }
+    tick = _requestAnimationFrame(ticker);
+  };
+
+  const update = function(t=time.now()) {
+    if ( t < this._startTime && this.playing ) { return true; }
+
+    const elapsed = Math.min(( t - this._startTime ) / this.options.duration, 1), progress = this.options.easing(elapsed); // calculate progress
+
+    for (const p in this.valuesEnd){ DOM[p](this.element,p,this.valuesStart[p],this.valuesEnd[p],progress,this.options); } //render the CSS update
+
+    if (this.options.update) { this.options.update.call(); } // fire the updateCallback
+
+    if (elapsed === 1) {
+      if (this.options.repeat > 0) {
+        if ( isFinite(this.options.repeat ) ) { this.options.repeat--; }
+
+        if (this.options.yoyo) { // handle yoyo
+          this.reversed = !this.reversed;
+          reverse.call(this);
+        }
+
+        this._startTime = (this.options.yoyo && !this.reversed) ? t + this.options.repeatDelay : t; //set the right time for delay
+        return true;
+      } else {
+
+        if (this.options.complete) { this.options.complete.call(); }
+
+        scrollOut.call(this); // unbind preventing scroll when scroll tween finished
+
+        for (let i = 0, ctl = this.options.chain.length; i < ctl; i++) { // start animating chained tweens
+          this.options.chain[i].start();
+        }
+
+        //stop ticking when finished
+        close.call(this);
+      }
+      return false;
+    }
+    return true;
+  };
+
+  const // applies the transform origin and perspective
+  perspective = function () {
+    const el = this.element, ops = this.options;
+    if ( ops.perspective !== undefined && transformProperty in this.valuesEnd ) { // element perspective
+      this.valuesStart[transformProperty]['perspective'] = this.valuesEnd[transformProperty]['perspective']; 
+    }
+    // element transform origin / we filter it out for svgTransform to fix the Firefox transformOrigin bug https://bugzilla.mozilla.org/show_bug.cgi?id=923193
+    if ( ops.transformOrigin !== undefined && (!('svgTransform' in this.valuesEnd)) ) { el.style[property('transformOrigin')] = ops.transformOrigin; } // set transformOrigin for CSS3 transforms only
+    if ( ops.perspectiveOrigin !== undefined ) { el.style[property('perspectiveOrigin')] = ops.perspectiveOrigin; } // element perspective origin
+    if ( ops.parentPerspective !== undefined ) { el.parentNode.style[property('perspective')] = `${ops.parentPerspective}px`; } // parent perspective
+    if ( ops.parentPerspectiveOrigin !== undefined ) { el.parentNode.style[property('perspectiveOrigin')] = ops.parentPerspectiveOrigin; } // parent perspective origin
+  };
+
+  const // plugin connector objects
+  // check current property value when .to() method is used
+  prepareStart = {};
+
+  const // checks for differences between start and end value, try to make sure start unit and end unit are same as well as consistent, stack transforms, process SVG paths
+  crossCheck = {};
+
+  const // parse properties object
+  // string parsing and property specific value processing
+  parseProperty = { // we already start working on core supported properties
+    boxModel(p, v) {
+      if (!(p in DOM)){
+        DOM[p] = (l, p, a, b, v) => {
+          l.style[p] = `${v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0}px`;
+        }
+      }
+      const boxValue = trueDimension(v);
+      return boxValue.u === '%' ? boxValue.v * this.element.offsetWidth / 100 : boxValue.v;
+    },
+    transform(p, v) {
+      if (!(transformProperty in DOM)) {
+        DOM[transformProperty] = (l, p, a, b, v, o) => {
+          l.style[p] = (a.perspective||'')
+                     + ('translate' in a ? translate(a.translate,b.translate,'px',v):'')
+                     + ('rotate' in a ? rotate(a.rotate,b.rotate,'deg',v):'')
+                     + ('skew' in a ? skew(a.skew,b.skew,'deg',v):'')
+                     + ('scale' in a ? scale(a.scale,b.scale,v):'');
+        }
+      }
+
+      // process each transform property
+      if (/translate/.test(p)) {
+        if (p === 'translate3d') {
+          const t3d = v.split(','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2]));
+          return {
+            translateX : t3d0.u === '%' ? (t3d0.v * this.element.offsetWidth / 100) : t3d0.v,
+            translateY : t3d1.u === '%' ? (t3d1.v * this.element.offsetHeight / 100) : t3d1.v,
+            translateZ : t3d2.u === '%' ? (t3d2.v * (this.element.offsetHeight + this.element.offsetWidth) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
+          };
+        } else if (/^translate(?:[XYZ])$/.test(p)) {
+          const t1d = trueDimension(v), percentOffset = /X/.test(p) ? this.element.offsetWidth / 100 : /Y/.test(p) ? this.element.offsetHeight / 100 : (this.element.offsetWidth+this.element.offsetHeight) / 200;
+
+          return t1d.u === '%' ? (t1d.v * percentOffset) : t1d.v;
+        } else if (p === 'translate') {
+          const tv = typeof v === 'string' ? v.split(',') : v;
+          const t2d = {};
+          let t2dv;
+          const t2d0 = trueDimension(tv[0]);
+          const t2d1 = tv.length ? trueDimension(tv[1]) : {v: 0, u: 'px'};
+          if (tv instanceof Array) {
+            t2d.x = t2d0.u === '%' ? (t2d0.v * this.element.offsetWidth / 100) : t2d0.v,
+            t2d.y = t2d1.u === '%' ? (t2d1.v * this.element.offsetHeight / 100) : t2d1.v
+          } else {
+            t2dv = trueDimension(tv);
+            t2d.x = t2dv.u === '%' ? (t2dv.v * this.element.offsetWidth / 100) : t2dv.v,
+            t2d.y = 0
+          }
+
+          return t2d;
+        }
+      } else if (/rotate|skew/.test(p)) {
+        if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(p)) {
+          const r3d = trueDimension(v,true);
+          return r3d.u === 'rad' ? radToDeg(r3d.v) : r3d.v;
+        } else if (p === 'rotate') {
+          const r2d = {}, r2dv = trueDimension(v,true);
+          r2d.z = r2dv.u === 'rad' ? radToDeg(r2dv.v) : r2dv.v;
+          return r2d;
+        }
+      } else if (p === 'scale') {
+        return parseFloat(v); // this must be parseFloat(v)
+      }
+    },
+    unitless(p, v) {  // scroll | opacity
+      if (/scroll/.test(p) && !(p in DOM) ){
+        DOM[p] = (l, p, a, b, v) => {
+          l.scrollTop = (number(a,b,v))>>0;
+        };
+      } else if (p === 'opacity') {
+        if (!(p in DOM)) {
+          if (isIE8) {
+            DOM[p] = (l, p, a, b, v) => {
+              const st = "alpha(opacity=", ep = ')';
+              l.style.filter = st + ((number(a,b,v) * 100)>>0) + ep;
+            };
+          } else {
+            DOM[p] = (l, p, a, b, v) => {
+              l.style.opacity = ((number(a,b,v) * 100)>>0)/100;
+            };
+          }
+        }
+      }
+      return parseFloat(v);
+    },
+    colors(p, v) { // colors
+      if (!(p in DOM)) {
+        DOM[p] = (l, p, a, b, v, o) => {
+          l.style[p] = color(a,b,v,o.keepHex);
+        };
+      }
+      return trueColor(v);
+    }
+  };
+
+  const // process properties for endValues and startValues or one of them
+  preparePropertiesObject = function(obj, fn) { // this, props object, type: start/end
+    const element = this.element, propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd, skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {};
+
+    for (const x in obj) {
+      if (_transform.includes(x)) { // transform object gets built here
+        if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
+          const ta = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, obj[x]);
+
+          for (let f = 0; f < 3; f++) {
+            const a = ta[f];
+            if ( /3d/.test(x) ) {
+              translateObject[`translate${a}`] = parseProperty.transform.call(this,`translate${a}`, obj[x][f]);
+            } else {
+              translateObject[`translate${a}`] = (`translate${a}` in obj) ? parseProperty.transform.call(this,`translate${a}`, obj[`translate${a}`]) : 0;
+            }
+          }
+          transformObject['translate'] = translateObject;
+        } else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
+          const ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], rtp = ap === 'rotate' ? rotateObject : skewObject;
+          for (let r = 0; r < 3; r++) {
+            const v = ra[r];
+            if ( obj[ap+v] !== undefined && x !== 'skewZ' ) {
+              rtp[ap+v] = parseProperty.transform.call(this,ap+v, obj[ap+v]);
+            }
+          }
+          transformObject[ap] = rtp;
+        } else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
+          transformObject[x] = parseProperty.transform.call(this, x, obj[x]);
+        }
+        propertiesObject[transformProperty] = transformObject;
+      } else {
+        if ( _boxModel.includes(x) ) {
+          propertiesObject[x] = parseProperty.boxModel.call(this,x,obj[x]);
+        } else if (_opacity.includes(x) || x === 'scroll') {
+          propertiesObject[x] = parseProperty.unitless.call(this,x,obj[x]);
+        } else if (_colors.includes(x)) {
+          propertiesObject[x] = parseProperty.colors.call(this,x,obj[x]);
+        } else if (x in parseProperty) {  // or any other property from css/ attr / svg / third party plugins
+          propertiesObject[x] = parseProperty[x].call(this,x,obj[x]);
+        }
+      }
+    }
+  };
+
+  const reverse = function () {
+    if (this.options.yoyo) {
+      for (const p in this.valuesEnd) {
+        const tmp = this.valuesRepeat[p];
+        this.valuesRepeat[p] = this.valuesEnd[p];
+        this.valuesEnd[p] = tmp;
+        this.valuesStart[p] = this.valuesRepeat[p];
+      }
+    }
+  };
+
+  const close = function () { //  when animation is finished reset repeat, yoyo&reversed tweens
+    if (this.repeat > 0) { this.options.repeat = this.repeat; }
+    if (this.options.yoyo && this.reversed===true) { reverse.call(this); this.reversed = false; }
+    this.playing = false;
+
+    setTimeout(() => { if (!tweens.length) { stop(); } }, 48);  // when all animations are finished, stop ticking after ~3 frames
+  };
+
+  const preventScroll = e => { // prevent mousewheel or touch events while tweening scroll
+    const data = document.body.getAttribute('data-tweening');
+    if (data && data === 'scroll') { e.preventDefault(); }
+  };
+
+  const scrollOut = function(){ //prevent scroll when tweening scroll
+    if ( 'scroll' in this.valuesEnd && document.body.getAttribute('data-tweening')) {
+      document.removeEventListener(touchOrWheel, preventScroll, false);
+      document.removeEventListener(mouseEnter, preventScroll, false);
+      document.body.removeAttribute('data-tweening');
+    }
+  };
+
+  const scrollIn = function(){
+    if ( 'scroll' in this.valuesEnd && !document.body.getAttribute('data-tweening')) {
+      document.addEventListener(touchOrWheel, preventScroll, false);
+      document.addEventListener(mouseEnter, preventScroll, false);
+      document.body.setAttribute('data-tweening', 'scroll');
+    }
+  };
+
+  const processEasing = fn => { //process easing function
+    if ( typeof fn === 'function') {
+      return fn;
+    } else if ( typeof fn === 'string' ) {
+      return easing[fn]; // regular Robert Penner Easing Functions
+    }
+  };
+
+  const getStartValues = function () { // stack transform props for .to() chains
+    const startValues = {}, currentStyle = getInlineStyle(this.element,'transform'), deg = ['rotate','skew'], ax = ['X','Y','Z'];
+
+    for (var p in this.valuesStart){
+      if ( _transform.includes(p) ) {
+        const r2d = (/(rotate|translate|scale)$/.test(p));
+        if ( /translate/.test(p) && p !== 'translate' ) {
+          startValues['translate3d'] = currentStyle['translate3d'] || _defaults[p];
+        } else if ( r2d ) { // 2d transforms
+          startValues[p] = currentStyle[p] || _defaults[p];
+        } else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
+          for (var d=0; d<2; d++) {
+            for (let a = 0; a<3; a++) {
+              const s = deg[d]+ax[a];
+              if (_transform.includes(s) && (s in this.valuesStart) ) { startValues[s] = currentStyle[s] || _defaults[s]; }
+            }
+          }
+        }
+      } else {
+        if ( p !== 'scroll' ) {
+          if (p === 'opacity' && isIE8 ) { // handle IE8 opacity
+            const currentOpacity = getCurrentStyle(this.element,'filter');
+            startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : _defaults['opacity'];
+          } else {
+            if ( _all.includes(p) ) {
+              startValues[p] = getCurrentStyle(this.element,p) || d[p];
+            } else { // plugins register here
+              startValues[p] = p in prepareStart ? prepareStart[p].call(this,p,this.valuesStart[p]) : 0;
+            }
+          }
+        } else {
+          startValues[p] = this.element === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
+        }
+      }
+    }
+    for ( var p in currentStyle ){ // also add to startValues values from previous tweens
+      if ( _transform.includes(p) && (!( p in this.valuesStart )) ) {
+        startValues[p] = currentStyle[p] || _defaults[p];
+      }
+    }
+
+    this.valuesStart = {};
+    preparePropertiesObject.call(this,startValues,'start');
+
+    if ( transformProperty in this.valuesEnd ) { // let's stack transform
+      for ( const sp in this.valuesStart[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
+        if ( sp !== 'perspective') {
+          if ( typeof this.valuesStart[transformProperty][sp] === 'object' ) {
+            for ( const spp in this.valuesStart[transformProperty][sp] ) { // 3rd level
+              if ( typeof this.valuesEnd[transformProperty][sp] === 'undefined' ) { this.valuesEnd[transformProperty][sp] = {}; }
+              if ( typeof this.valuesStart[transformProperty][sp][spp] === 'number' && typeof this.valuesEnd[transformProperty][sp][spp] === 'undefined' ) {
+                this.valuesEnd[transformProperty][sp][spp] = this.valuesStart[transformProperty][sp][spp];
+              }
+            }
+          } else if ( typeof this.valuesStart[transformProperty][sp] === 'number' ) {
+            if ( typeof this.valuesEnd[transformProperty][sp] === 'undefined' ) { // scale
+              this.valuesEnd[transformProperty][sp] = this.valuesStart[transformProperty][sp];
+            }
+          }
+        }
+      }
+    }
+  };
+
+  var easing = g.Easing = {};
+  easing.linear = t => t;
+  easing.easingSinusoidalIn = t => -Math.cos(t * Math.PI / 2) + 1;
+  easing.easingSinusoidalOut = t => Math.sin(t * Math.PI / 2);
+  easing.easingSinusoidalInOut = t => -0.5 * (Math.cos(Math.PI * t) - 1);
+  easing.easingQuadraticIn = t => t*t;
+  easing.easingQuadraticOut = t => t*(2-t);
+  easing.easingQuadraticInOut = t => t<.5 ? 2*t*t : -1+(4-2*t)*t;
+  easing.easingCubicIn = t => t*t*t;
+  easing.easingCubicOut = t => (--t)*t*t+1;
+  easing.easingCubicInOut = t => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1;
+  easing.easingQuarticIn = t => t*t*t*t;
+  easing.easingQuarticOut = t => 1-(--t)*t*t*t;
+  easing.easingQuarticInOut = t => t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;
+  easing.easingQuinticIn = t => t*t*t*t*t;
+  easing.easingQuinticOut = t => 1+(--t)*t*t*t*t;
+  easing.easingQuinticInOut = t => t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t;
+  easing.easingCircularIn = t => -(Math.sqrt(1 - (t * t)) - 1);
+  easing.easingCircularOut = t => Math.sqrt(1 - (t = t - 1) * t);
+  easing.easingCircularInOut = t => ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+  easing.easingExponentialIn = t => 2 ** (10 * (t - 1)) - 0.001;
+  easing.easingExponentialOut = t => 1 - 2 ** (-10 * t);
+  easing.easingExponentialInOut = t => (t *= 2) < 1 ? 0.5 * (2 ** (10 * (t - 1))) : 0.5 * (2 - 2 ** (-10 * (t - 1)));
+  easing.easingBackIn = t => { const s = 1.70158; return t * t * ((s + 1) * t - s); };
+  easing.easingBackOut = t => { const s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; };
+  easing.easingBackInOut = t => { const s = 1.70158 * 1.525;  if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));  return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2); };
+  easing.easingElasticIn = t => {
+    let s;
+    let _kea = 0.1;
+    const _kep = 0.4;
+    if ( t === 0 ) return 0;if ( t === 1 ) return 1;
+    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2;
+    return - ( _kea * (2 ** (10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) );
+  };
+  easing.easingElasticOut = t => {
+    let s;
+    let _kea = 0.1;
+    const _kep = 0.4;
+    if ( t === 0 ) return 0;if ( t === 1 ) return 1;
+    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ;
+    return ( _kea * (2 ** (- 10 * t)) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) + 1 );
+  };
+  easing.easingElasticInOut = t => {
+    let s;
+    let _kea = 0.1;
+    const _kep = 0.4;
+    if ( t === 0 ) return 0;if ( t === 1 ) return 1;
+    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ;
+    if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * (2 ** (10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) );
+    return _kea * (2 ** (-10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) * 0.5 + 1;
+  };
+  easing.easingBounceIn = t => 1 - easing.easingBounceOut( 1 - t );
+  easing.easingBounceOut = t => {
+    if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; }
+    else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; }
+    else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; }
+    else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
+  };
+  easing.easingBounceInOut = t => { if ( t < 0.5 ) return easing.easingBounceIn( t * 2 ) * 0.5; return easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
+
+  // single Tween object construct
+  const Tween = function (targetElement, startObject, endObject, options) {
+      this.element = 'scroll' in endObject && (targetElement === undefined || targetElement === null) ? scrollContainer : targetElement; // element animation is applied to
+
+      this.playing = false;
+      this.reversed = false;
+      this.paused = false;
+
+      this._startTime = null;
+      this._pauseTime = null;
+
+      this._startFired = false;
+      this.options = {}; for (const o in options) { this.options[o] = options[o]; }
+      this.options.rpr = options.rpr || false; // internal option to process inline/computed style at start instead of init true/false
+
+      this.valuesRepeat = {}; // internal valuesRepeat
+      this.valuesEnd = {}; // valuesEnd
+      this.valuesStart = {}; // valuesStart
+
+      preparePropertiesObject.call(this,endObject,'end'); // valuesEnd
+      if ( this.options.rpr ) { this.valuesStart = startObject; } else { preparePropertiesObject.call(this,startObject,'start'); } // valuesStart
+
+      if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { // element transform perspective
+        const perspectiveString = `perspective(${parseInt(this.options.perspective)}px)`;
+        this.valuesEnd[transformProperty].perspective = perspectiveString;
+      }
+
+      for ( const e in this.valuesEnd ) {
+        if (e in crossCheck && !this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
+      }
+
+      this.options.chain = []; // chained Tweens
+      this.options.easing = options.easing && typeof processEasing(options.easing) === 'function' ? processEasing(options.easing) : easing[defaultOptions.easing]; // you can only set a core easing function as default
+      this.options.repeat = options.repeat || defaultOptions.repeat;
+      this.options.repeatDelay = options.repeatDelay || defaultOptions.repeatDelay;
+      this.options.yoyo = options.yoyo || defaultOptions.yoyo;
+      this.options.duration = options.duration || defaultOptions.duration; // duration option | default
+      this.options.delay = options.delay || defaultOptions.delay; // delay option | default
+
+      this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish
+    };
+
+  const // tween control and chain
+  TweenProto = Tween.prototype = {
+    // queue tween object to main frame update
+    start(t) { // move functions that use the ticker outside the prototype to be in the same scope with it
+      scrollIn.call(this);
+
+      if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
+      perspective.apply(this); // apply the perspective and transform origin
+
+      for ( const e in this.valuesEnd ) {
+        if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
+        this.valuesRepeat[e] = this.valuesStart[e];
+      }
+
+      // now it's a good time to start
+      tweens.push(this);
+      this.playing = true;
+      this.paused = false;
+      this._startFired = false;
+      this._startTime = t || time.now();
+      this._startTime += this.options.delay;
+
+      if (!this._startFired) {
+        if (this.options.start) { this.options.start.call(); }
+        this._startFired = true;
+      }
+      !tick && ticker();
+      return this;
+    },
+    play() {
+      if (this.paused && this.playing) {
+        this.paused = false;
+        if (this.options.resume) { this.options.resume.call(); }
+        this._startTime += time.now()  - this._pauseTime;
+        add(this);
+        !tick && ticker();  // restart ticking if stopped
+      }
+      return this;
+    },
+    resume() { return this.play(); },
+    pause() {
+      if (!this.paused && this.playing) {
+        remove(this);
+        this.paused = true;
+        this._pauseTime = time.now();
+        if (this.options.pause) { this.options.pause.call(); }
+      }
+      return this;
+    },
+    stop() {
+      if (!this.paused && this.playing) {
+        remove(this);
+        this.playing = false;
+        this.paused = false;
+        scrollOut.call(this);
+
+        if (this.options.stop) { this.options.stop.call(); }
+        this.stopChainedTweens();
+        close.call(this);
+      }
+      return this;
+    },
+    chain() { this.options.chain = arguments; return this; },
+    stopChainedTweens() {
+      for (let i = 0, ctl = this.options.chain.length; i < ctl; i++) {
+        this.options.chain[i].stop();
+      }
+    }
+  };
+
+  const // the multi elements Tween constructs
+  TweensTO = function (els, vE, o) { // .to
+    this.tweens = []; const options = [];
+    for ( let i = 0, tl = els.length; i < tl; i++ ) {
+      options[i] = o || {}; o.delay = o.delay || defaultOptions.delay;
+      options[i].delay = i>0 ? o.delay + (o.offset||defaultOptions.offset) : o.delay;
+      this.tweens.push( to(els[i], vE, options[i]) );
+    }
+  };
+
+  const TweensFT = function (els, vS, vE, o) { // .fromTo
+    this.tweens = []; const options = [];
+    for ( let i = 0, l = els.length; i < l; i++ ) {
+      options[i] = o || {}; o.delay = o.delay || defaultOptions.delay;
+      options[i].delay = i>0 ? o.delay + (o.offset||defaultOptions.offset) : o.delay;
+      this.tweens.push( fromTo(els[i], vS, vE, options[i]) );
+    }
+  };
+
+  const ws = TweensTO.prototype = TweensFT.prototype = {
+    start(t=time.now()) {
+      for ( let i = 0, tl = this.tweens.length; i < tl; i++ ) {
+        this.tweens[i].start(t);
+      }
+      return this;
+    },
+    stop() { for ( let i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].stop(); } return this; },
+    pause() { for ( let i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].pause(); } return this; },
+    chain() { this.tweens[this.tweens.length-1].options.chain = arguments; return this; },
+    play() { for ( let i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].play(); } return this; },
+    resume() {return this.play()}
+  };
+
+  const // main methods
+  to = (element, endObject, options) => {
+    options = options || {}; options.rpr = true;
+    return new Tween(selector(element), endObject, endObject, options);
+  };
+
+  const fromTo = (element, startObject, endObject, options) => {
+    options = options || {};
+    return new Tween(selector(element), startObject, endObject, options);
+  };
+
+  const // multiple elements tweening
+  allTo = (elements, endObject, options) => new TweensTO(selector(elements,true), endObject, options);
+
+  const allFromTo = (elements, f, endObject, options) => new TweensFT(selector(elements,true), f, endObject, options);
+
+  return { // export core methods to public for plugins
+    property, getPrefix, selector, processEasing, // utils
+    defaultOptions, // default tween options since 1.6.1
+    to, fromTo, allTo, allFromTo, // main methods
+    ticker, tick, tweens, update, dom : DOM, // update
+    parseProperty, prepareStart, crossCheck, Tween, // property parsing & preparation | Tween | crossCheck
+    truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle, // property parsing
+  };
+}));

LICENSE

@@ -1,22 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 thednp
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-

README.md

@@ -1,139 +0,0 @@
-# KUTE.js
-A minimal <b>native Javascript</b> tweening engine with <b>jQuery</b> plugin, with most essential options for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations.
-
-<b>Important</b>: starting with 0.9.5 version, KUTE.js changes the prototype structure for performance, usability and browser support, as well as extensibility. The documentation and examples no longer support old versions prior to 0.9.5 release.
-
-# CDN
-Thanks to jsdelivr, we have a CDN link <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a>.
-
-# Demo
-For documentation, examples and other cool tips, check the <a href="http://thednp.github.io/kute.js/">demo</a>.
-
-# NPM/Bower
-You can install this through NPM or bower respectively:
-```
-    $ npm install kute.js
-    # or
-    $ bower install kute.js
-```
-
-# CommonJS/AMD support
-You can use this module through any of the common javascript module systems. For instance:
-
-```javascript
-// NodeJS/CommonJS style
-var kute = require("kute.js");
-// Add Bezier Easing
-require("kute.js/kute-bezier");
-// Add Physics Easing
-require("kute.js/kute-physics");
-
-// AMD
-define([
-    "kute.js",
-    "kute.js/kute-jquery.js", // optional for jQuery apps
-    "kute.js/kute-bezier.js", // optional for more accurate easing functions
-    "kute.js/kute-physics.js" // optional for more flexible & accurate easing functions
-], function(KUTE){
-    // ...
-});
-```
-
-# Basic Usage
-At a glance, you can write one line and you're done.
-```javascript
-//vanilla js
-KUTE.fromTo('selector', fromValues, toValues, options).start();
-
-//with jQuery plugin
-var tween = $('selector').KUTE('fromTo', fromValues, toValues, options);
-$(tween).KUTE('start');
-```
-
-# Advanced Usage
-Quite easily, you can write 'bit more lines and you're making the earth go round.
-```javascript
-//vanilla js is always the coolest
-KUTE.fromTo(el,
-    { translate: 0, opacity: 1 }, // fromValues
-    { translate: 150, opacity: 0 }, // toValues
-    
-    // tween options object
-    { duration: 500, delay: 0, easing	: 'exponentialInOut', // basic options
-
-      // callbacks
-      start: functionOne, // run function when tween starts
-      complete: functionTwo, // run function when tween animation is finished
-      update: functionThree // run function while tween running    
-      stop: functionThree // run function when tween stopped    
-      pause: functionThree // run function when tween paused    
-      resume: functionThree // run function when resuming tween    
-    }
-).start(); // this is to start animation right away
-```
-
-# jQuery Plugin
-This aims to make the KUTE.js script work native within other jQuery apps but it's not always really needed as we will see in the second subchapter here. The plugin is just a few bits of code to bridge all of the the awesome `kute.js` methods to your jQuery apps. The plugin can be found in the [/master](https://github.com/thednp/kute.js/blob/master/kute-jquery.js) folder. So let's have a look at the syntax.
-
-## Using the jQuery Plugin
-Here's a KUTE.js jQuery Plugin example that showcases most common usage in future apps:
-```javascript
-// first we define the object(s)
-var tween = $('selector').KUTE('fromTo', // apply fromTo() method to selector
-  
-    { translate: 0, opacity: 1 }, // fromValues
-    { translate: 150, opacity: 0 }, // toValues
-    
-    // tween options object
-    { duration: 500, delay: 0, easing	: 'exponentialInOut', // basic options
-
-      //callbacks
-      start: functionOne, // run function when tween starts
-      complete: functionTwo, // run function when tween animation is finished
-      update: functionThree // run function while tween running    
-      stop: functionThree // run function when tween stopped    
-      pause: functionThree // run function when tween paused    
-      resume: functionThree // run function when resuming tween    
-    }
-);
-
-// then we apply the tween control methods, like start
-$(tween).KUTE('start');
-```
-
-## Alternative usage in jQuery powered applications
-In some cases you can handle animations inside jQuery applications even without the plugin. Here's how the code could look like:
-```javascript
-var tween = KUTE.fromTo($('selector')[0], fromValues, toValues, options);
-tween.start();
-```
-Pay attention to that `$('selector')[0]` as jQuery always creates an array of selected objects and not a single object, that is why we need to focus a tween object to a single HTML object and not a selection of objects. Selections of objects should be handled with `for() {}` loops if that is the case, while the jQuery Plugin handles this properly for your app, as you would expect it to.
-
-
-# How it works
-* it computes all the values before starting the animation, then caches them to avoid layout thrashing that occur during animation
-* handles all kinds of `transform` properties and makes sure to always use the same order of the `transform` properties (`translate`, `rotate`, `skew`, `scale`)
-* allows you to set `perspective` for an element or it's parent for 3D transforms
-* computes properties' values properly according to their measurement unit (px,%,deg,etc)
-* properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent
-* converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB`
-* properly replaces `top`, `centered` or any other background position with proper value to be able to tween
-* for most supported properties it reads the current element computed style property value as initial value (via `currentStyle || getComputedStyle`)
-* because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's `.to()` method
-* allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options
-* since `translate3D` is best for movement animation performance, `kute.js` will always use it
-* accepts "nice & easy string" easing functions, like `linear` or `easingExponentialOut` (removes the use of the evil `eval`, making development safer, easier and closer to standards :)
-* uses all 31 Robert Penner's easing functions, as well as bezier and physics easing functions
-* handles browser prefixes for you for `transform`, `perspective`, `perspective-origin`, `border-radius` and `requestAnimationFrame`
-* all this is possible with a core script of less than 20k size!
-
-# Browser Support
-Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them <a href="https://cdn.polyfill.io/v2/docs/">polyfills</a>. I also packed a small polyfill set with most essential features required by KUTE.js to work, it's called [minifill](https://github.com/thednp/minifill), try it.
-
-# Contributions
-* Dav aka [@dalisoft](https://github.com/dalisoft) contributed a great deal for the performance and functionality of KUTE.js
-* [Ingwie Phoenix](https://github.com/IngwiePhoenix): RequireJS/CommonJS compatibility and usability with common package managers
-* Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project
-
-# License
-<a href="https://github.com/thednp/kute.js/blob/master/LICENSE">MIT License</a>

bower.json

@@ -1,32 +0,0 @@
-{
-  "name": "KUTE.js",
-  "version": "1.0.1",
-  "homepage": "http://thednp.github.io/kute.js",
-  "authors": [
-    "thednp"
-  ],
-  "description": "A minimal Native Javascript animation engine with jQuery plugin.",
-  "main": "kute.js",
-  "moduleType": [
-    "amd",
-    "globals",
-    "node"
-  ],
-  "keywords": [
-    "animations",
-    "animation engine",
-    "native-javascript",
-    "kute.js",
-    "tweening",
-    "engine"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {}
-}

demo/about.html

@@ -1,150 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
-<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
-<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
-
-<!--[if gte IE 9 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="KUTE.js is a minimal Javascript animation engine">
-    <meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
-    <meta name="author" content="dnp_theme">
-    <link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
-
-    <title>About KUTE.js | Javascript Animation Engine</title>
-	
-    <!-- RESET CSS -->
-    <link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
-	
-    <!-- DEMO KUTE CSS -->
-    <link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
-
-	<!-- Ion Icons -->
-    <link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
-
-</head>
-
-<body>
-  <div class="fill overlay"></div>
-  
-  <div class="site-wrapper">
- 
-	<div class="navbar-wrapper">
-      <div class="content-wrap">
-		<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
-		<ul class="nav">
-			<li><a href="features.html">Features</a></li>
-			<li><a href="examples.html">Examples</a></li>
-			<li><a href="api.html">API</a></li>
-			<li class="active"><a href="about.html">About</a></li>
-		</ul>
-      </div>
-    </div>
-
-	<div class="content-wrap">
-		
-		<h2>Did you know?</h2>
-		<p><strong>Tween</strong> is a term used by animators and software engineers to define the numeric start, end and the <a href="https://en.wikipedia.org/wiki/Inbetweening" target="_blank"><em>inbetween</em></a> values used in digital animation, while the digital animation uses these tween values on a given frequency (interval) or scaled by hardware capability (monitors refresh rate, GPU frames per second, etc). The term was introduced to the world of web development by early Javascrpt libraries and later used in dedicated animation libraries such as <a href="https://greensock.com" target="_blank">GSAP</a>, <a href="http://dynamicsjs.com" target="_blank">Dynamics</a>, <a href="http://julian.com/research/velocity/" target="_blank">Velocity</a>, <a href="https://jeremyckahn.github.io/shifty/" target="_blank">Shifty</a>, our own <strong>KUTE.js</strong> here and many others.</p>
-		<p><strong>Tween Object</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank"><em>Javascript Object</em></a> that stores temporarily or for a given time a set of variables such as tween values, HTML elements to animate, CSS properties and other tween options to be used for animation. To improve performance on repetitive animations, this object can be cached and reused whenever needed. In Javascript animation, the term <strong>tween</strong> actually refers to the <strong>tween object</strong>.</p>
-		<p><strong>polyfill</strong> is a term introduced by Remy Sharp back in 2009 as "a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide <em>natively</em>". Basically a polyfill covers what legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="_blank">More details</a>.</p>
-		<p><strong>requestAnimationFrame</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target="_blank"><em>Javascript method</em></a> developed to enable hardware acceleration animations for the web today. In Javascript, the <code>window.requestAnimationFrame(callback);</code> method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a <a href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">polyfil</a> to cover the legacy browsers chaos.</p>
-		<p><strong>JANK</strong> is a term used when browsers miss frames due to long script execution and/or long layout recomposition. JANK is the phenomenon reffering to severe frame drops. Luckily there are people who <a href="http://www.html5rocks.com/en/tutorials/speed/rendering/" target="_blank">explain all about it</a>, so you don't have to stay in the dark.</p>
-		<p><strong>Methods</strong> are functions that create <strong>tween objects</strong> or control the animation for KUTE.js, so we will encounter mostly <em>main methods</em> and <em>tween control methods</em>. Once a main method is used, then the control methods apply in a specific order.</p>
-
-		
-		<h2 id="how">How Does It Work?</h2>
-		<p>Well, first things first: it's smart built. Let's briefly explain the phases:</p>
-		<ol>
-			<li>On first initialization KUTE.js creates some variables such as supported properties and their default values, the user's browser prefix, the true scroll container (some browsers actually scroll the body, while others prefer the HTML tag), a boolean variable that makes KUTE.js aware it's working with IE8, as well as other variables required during the main thread. This phase is very important for the performance on the next phases.</li>
-			<li>In the next phase it's going to build the tween object with the chosen method according to it's distinct functionalities. If the chosen method is <code>.to()</code> KUTE.js will look for the current values of the properties used or assign the default values built in the previous phase. For both methods, KUTE.js collects all the data, processes values and options (for instance easing functions need to be processed if you use a string like 'easingElasticOut', right?) and builds the tween object, with all properties' values start and values end, measurement units, tween options and callback functions.</li>
-			<li>In the third phase KUTE.js is ready to start the animation, but the animation starts only after the <code>.start()</code> function, if used, has finished. When animation starts, KUTE.js will start <em>ticking</em> on the frequency decided by <code>requestAnimationFrame</code> or <code>setInterval</code> for legacy browsers, quickly updating the style for the properties and execute the <code>update:function</code> callback if any. Also while animating, KUTE.js will begin <em>listening</em> for your tween control input such as <code>.pause()</code> or <code>.stop()</code> or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.</li>
-			<li>When tween animation is finished, the <code>complete:function</code> callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with <code>cancelAnimationFrame</code> to save power.</li>
-		</ol>
-		<p>Basically, this is it!</p>
-		
-		<h2 id="performance">A Word On Performance</h2>
-		<p>As said before, performance varies from case to case; this chapter aims to explain what you should expect working with animation engines in these various scenarios at maximum stress, usually when your CPU cooler starts to work really hard, and how scalable performance can really be on various machines, operating systems or mobile devices.</p>
-		
-		<h3>Function Nesting</h3>
-		<p>This could be one of the most important factors that influence performance, because we neglect this fact most of the time and changing the scope of an animation engine is important to look after. A quick example would be when we create tween objects on events such as <code>click</code>, <code>scroll</code> or <code>resize</code>, we basically set a totally different scope for the animation and we fill the memory with large chunks of trash/jank, especially on events like <code>resize</code>.</p> 
-        <p>A better way to handle this is to create the tween objects outside the event handlers and only start the animation with these handlers when certain conditions are met. EG: <code>if (window.clientWidth > 760) { myTween.start() }</code>. Also keep in mind that this approach will eliminate any possible syncronization issues, but creating many animations is a huge temptation and this will create lots of problems for the old browsers, so keep the function nesting to as minimal as possible as a general rule.</p>
-		<p>In all animation engines, GSAP is the only one that exports all it's methods and computed values to the global scope to help diminish the time to access/execute, but it will find soon that it's no longer the case because modern browsers continuously improve their Javascript engines to a point where the access speed is the same, blazing fast, no matter how deep Javascript animation scope goes.</p>
-        
-		<h3>Translate and Position</h3>
-		<p>While the code execution is the <strong>fastest</strong> for the <em>layout modifiers</em> or what we call <em>box-model</em>, say the <code>position</code> based properties set such as <code>left</code> or <code>top</code>, they may force the entire page layout to change and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side <code>translate</code> doesn't trigger a repaint but involves more complex operations such as object traversing, string concatenation or check for certain conditions to be met. All of this is because <code>translate</code> is part of <code>transform</code> CSS3 property that has to stack in a single line many more properties such as <code>rotate</code>, <code>skew</code> and <code>scale</code>. <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" target="_blank">An article</a> by Paul Irish explains more about differences in performance between position and translation.</p>
-		
-		<p><span class="ion-android-plane media"></span>To put it short <code>left</code> executes faster but requires repaint on every frame while <code>translateX</code> or <code>translate3d</code> execute slower but require no repaint on each animation frame. The <strong>winner</strong> is <kbd>left</kbd>, when it comes to code execution speed, but if we also count the elements' size, the larger size the more favor the translation so the <strong>overall winner</strong> is <kbd>translate</kbd>. The more pixels to recompose in the layout, the more time spent on each frame, and this is why translation is better in most cases, and animated positioning is best to be used as fallback animation for legacy browsers.</p>
-		
-		<h3>Translate, TranslateX and Translate3D</h3>
-		<p>While running a 2D <code>translate:150</code> animation could score similar performance as <code>translateX:150</code>, interestingly, <code>translate3d:[150,0,0]</code> is slightly faster than the other translations. Some performance <a href="http://jsperf.com/translate3d-vs-xy/28">tests</a> confirm that <code>translate3d</code> is the prefered property for hardware acceleration. For this reason, <kbd>translate3d</kbd> is the <strong>winner</strong> and KUTE.js always uses it even if you only use <code>translateX</code> or <code>translateY</code> for instance.<p> 
-		<p>Similarly, if you animate the 2D <code>translate</code> this always goes <code>translate(x,y)</code> even if you use <code>translate:150</code> (only for the X axis) or <code>translate:[150,0]</code> (both X and Y axis), for better performance as well. And by the way, this works great on IE9 and other legacy browsers.</p>
-		
-		<h3>Box Model</h3>
-		<p><span class="ion-nuclear media"></span>We compared position with transition above, but now we are going to talk about other issues related to <strong>resizers</strong>: <code>width</code>, <code>height</code>, <code>margin</code>, <code>padding</code> and <code>borderWidth</code> or any of their variations. The code execution is super fast, but when resizing the window while animations are running, the browser is also computing the resize handlers, the animation performance is very very low on <strong>all</strong> browsers, especially when you animate these resize properties. When this <strong>toxic combination</strong> occurs animating a large amount of elements to animate could crash any browser, no exception, and I think any developer should know about this.</p>
-		<p>The <code>resize</code> event triggered by these resizer properties can cause some <strong>severe issues with legacy browsers</strong> such as IE8. These good old browsers don't understand much about Javascript driven layout changes and thus skip/fail to execute any handlers attached to window resize event bubbles.</p> 
-		<p>A workaound the resizers effect on the layout would be to use them only for absolute positioned elements, this way the layout will not need to be repainted and the recomposition is limited to the element itself. If not, and you are required to provide legacy support, you must DISABLE any resize handlers for IE8 and any other browser that runs slow or crashes. You should also consider not using any resize animation for legacy browsers especially when usability and larger reach is expected.</p>
-		
-		<h3>RGB and HEX</h3>
-		<p><span class="ion-android-color-palette media"></span>When animating any color property such as (text) <code>color</code> or <code>background-color</code>, KUTE.js always uses/converts to RGB/RGBA, but there is a <code>keepHex:true</code> tween option that overrides that. Still some browsers such as Chrome will still show you the computed style for your color as RGB no matter what. The conversion process will decrease performance, making <kbd>RGB</kbd> the <strong>winner</strong>.</p>
-		
-		<h3>TO and FROMTO</h3>
-		<p>The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are <code>.to()</code> and <code>.fromTo()</code>. While <code>.to()</code> is much more simple and convenient to use, very useful for tween chaining, it has to process the starting values on every <code>.start()</code> delaying the animation for a few miliseconds depending on the browser and hardware, making <kbd>.fromTo()</kbd> the <strong>winner</strong>. On a large amount of elements animating at the same time, these scripting based delays can produce some serious syncronization issues, so caution is advised. In that case you should use <code>.fromTo()</code> properly.</p>
-	
-		<h3>Easing Functions</h3>
-		<p>KUTE.js comes with 3 packs of easing functions: the popular <a href="http://robertpenner.com/easing/" target="_blank">easing functions</a> by Robert Penner, <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> easing functions by Michael Villar and <a href="https://github.com/gre/bezier-easing" target="_blank">bezier-easing</a> by Gaëtan Renaudeau. I've worked very hard to optimize the last 2 as much as possible, but they will never beat Robert Penner's functions in any performance test, that's an all time <strong>winner</strong>.</p>
-		<p><span class="ion-shuffle media"></span>The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the <code>cubic-bezier</code> based functions have a 0.0000001 error margin, while the <code>Exponential</code> easing functions by Robert Penner are somewhat glitchy on long page scrolls or translations. Interestingly, some physics based functions perform exceedingly well, and generally the difference in performance is fairly negligible even for large amounts of elements, and have no impact on very few elements.</p>
-		
-		<h3>Garbage Collection</h3>
-		<p><span class="ion-trash-a media"></span>The goal of the development strategy is to be able to execute the script, update layout and repaint, all under 16 miliseconds, so that the animation runs constantly at 60fps. However running some repeatable animations for a large amount of elements would really give garbage collectors a lot of work and thus some frames take more than 16 miliseconds. The more properties and/or elements, the more work.</p>		
-		<p>While garbage collection is a great way modern browsers use to clean the memory, sometimes the garbage collector can jump in anytime, cousing drops in the order of miliseconds. Still, if it's the case, there are ways to help composing the layout faster, but we will see that in the performance testing <a href="performance">page</a>.</p>
-	
-		<h3>OSs, Desktops and Mobiles</h3>
-		<p><span class="ion-social-tux media"></span>The performance tests have been performed mainly on Microsoft Windows 8.1 and Ubuntu Linux 14.04 Trusty Tahr with latest nVidia graphics drivers on both OSs, all set up for maximum performance. The browsers are obviously Firefox (both OSs), Google Chrome (both OSs), Opera (both OSs) and IE11 (Win8).</p> 
-		<p><span class="ion-social-windows media"></span>The results show <strong>Windows</strong> based browsers came better than Ubuntu based ones, mainly because of DirectX and better drivers that greatly improve hardware accelerated graphics, while Linux still faces some noticeable issues with vertical sync among many others, but hey it's a work in progress and it's open source!</p>
-		
-		<p><span class="ion-social-chrome media"></span>The browsers' performance goes like this (from best to poorest): <strong>Google Chrome</strong>, Opera, Internet Explorer, Firefox. Yes, Firefox is the slowest on Windows OS. I never tested anything on iOS or MAC-OS but I believe Safari performs very well with transforms. <a href="http://venturebeat.com/2014/05/12/apple-upgrades-safaris-webkit-to-challenge-googles-chrome-browser/" target="_blank">Some argue</a> that Safari outperforms Google Chrome due to the latest Webkit upgrade.</p>
-
-		<p>Also know that legacy browsers don't support <code>requestAnimationFrame</code> and pollyfills usually replace it with <code>setInterval</code>, a clasic Javascript method that's <a href="https://jsperf.com/requestanimationframe-vs-setinterval-loop/7" target="_blank">significantly</a> affecting performance, because it's one of the main causes for <a href="http://www.html5rocks.com/en/tutorials/speed/rendering/" target="_blank">lots of JANK</a>.</p>
-		
-		<p>Another important aspect as far as performance goes, the power saving profiles on Windows OS drops performance for desktop computers and especally laptops. Also when a laptop is unplugged, Windows automatically changes power profile drastically decreasing performance. </p>
-		
-		<p>As for the mobiles, you must know that even if you have an octacore CPU powered phone or tablet is never going to match a desktop and not even a laptop. For a mobile device <a href="https://www.youtube.com/watch?v=YyQYhhy1dZI" target="_blank">these guys</a> recommend to keep everything under 7 miliseconds for the smooth experience that most users expect and that the animation performance of a phone is actually up to 5 times lower than a desktop or laptop. I would stress that having 2 or 3 simoultaneous animations on a phone at a certain point is just about enough.</p> 
-		
-		<p><span class="ion-android-phone-portrait media"></span>Another thing to keep in mind is that scrollling on a mobile device is actually hardware accelerated animation and thus compete for power drastically reducing performance for any other CSS or Javascript driven animations. To understand how critical performance is on a mobile device, I highly recommend checking the <a href="https://youtu.be/WrA85a4ZIaM?t=16m6s" target="_blank">Google I/O 2014 presentation</a>. Now you understand how much performance really matters.</p>
-		<p><strong>Remember</strong>: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.</p>			
-		
-		<h2>KUTE.js Project</h2>
-		<p>KUTE.js continues what was started with <strong>jQueryTween</strong> (removed) and the main goal is to improve usability, compatibility, code quality and performance. KUTE.js includes a jQuery plugin to help you easily implement it in your jQuery applications, and also packs a set of tools such as bezier and physics based easing functions, all elegantly packed for convenience and distributed via CDN.</p>
-		<p>It all started with a fork of the popular <a href="https://github.com/tweenjs/tween.js" target="_blank">tween.js</a> and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, <a href="https://greensock.com" target="_blank">GSAP</a>, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, and a very tough competitor.</p>
-		<p>In the hystory of the making there were consistent contributions of <a href="https://github.com/dalisoft" target="_blank">Dav</a> aka @dalisoft for features such as play &amp; pause, as well as for performance related issues. Generally I would stress that the code is a joint work of me and Dav. Big thanks Dav, well done.</p>
-		<p>Also I would like to thank <a href="http://ingwie.me/" target="_blank">Ingwie Phoenix</a> for the npm/Bower and UMD implementations.</p>
-		
-		<ul id="share" class="nav">
-			<li>Share </li>
-			<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute.js animation engine by @thednp and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
-		</ul>
-	</div>
-	  
-      <!-- FOOTER -->
-     <footer>
-		<div class="content-wrap">
-			<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
-			<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
-		</div>
-    </footer>
-
- </div><!-- /.site-wrapper -->
- 
-
-
-<!-- JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->	
-
-</body>
-</html>

demo/api.html

@@ -1,386 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
-<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
-<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
-
-<!--[if !IE ]><!--> <html lang="en"> <!--<![endif]-->
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="KUTE.js is a minimal Javascript animation engine">
-    <meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
-    <meta name="author" content="dnp_theme">
-    <link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
-
-    <title>KUTE.js Developer API | Javascript Animation Engine</title>
-	
-    <!-- RESET CSS -->
-    <link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
-	
-    <!-- DEMO KUTE CSS -->
-    <link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
-
-	<!-- Ion Icons -->
-    <link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
-		
-	<!-- Synthax highlighter -->
-	<link href="./assets/css/prism.css" rel="stylesheet">	
-
-	<!-- legacy browsers support via polyfill 
-	<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
-	<!--[if IE]>
-		<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
-		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-	<![endif]-->
-	
-</head>
-
-<body>
-  <div class="fill overlay"></div>
-  
-  <div class="site-wrapper">
- 
-	<div class="navbar-wrapper">
-      <div class="content-wrap">
-		<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
-		<ul class="nav">
-			<li><a href="features.html">Features</a></li>
-			<li><a href="examples.html">Examples</a></li>
-			<li class="active"><a href="api.html">API</a></li>
-			<li><a href="about.html">About</a></li>
-		</ul>
-      </div>
-    </div>
-
-	<div class="content-wrap">		
-		
-		<h2>Getting Started</h2>
-		<p>Welcome to KUTE.js API documentation, here we're going to talk about how to download, install, use, control and set up cross browser animations, in great detailed. KUTE.js can be found on <a href="http://www.jsdelivr.com/#!kute.js" target="_blank">CDN</a> and also npm and Bower repositories with all it's features and tools.</p>
-
-		<h3>Bower and NPM</h3>
-		<p>You can install KUTE.js package by using either Bower or NPM.</p>
-<pre><code class="language-clike">$ npm install --save kute.js
-# Or
-$ bower install --save kute.js
-</code></pre>
-
-		<h3>Websites</h3>
-		<p>In your website add the following code, the best would be to put it at the end of your <code>body</code> tag:</p>
-<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
-
-		<p>Also you can include the tools that you need for your project:</p>
-<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
-&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-easing.min.js">&lt;/script> &lt;!-- Bezier Easing Functions -->
-&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-physics.min.js">&lt;/script> &lt;!-- Physics Easing Functions -->
-</code></pre>
-		<p>Your awesome animation coding would follow after these script links.</p>		
-		
-		<h3>Targeting Legacy Browsers</h3>
-		<p>You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers actually support. A quick note here: IE8 doesn't support any <code>transform</code> property or <code>RGBA</code> colors while IE9 can only do 2D transformations. Check the <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> and the <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a> browser support list for more information.</p> 
-		<p>Don't use <a href="https://modernizr.com/" target="_blank">Modernizr</a>, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and <a target="_blank" href="http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">here is the full refference</a> on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: <a href="http://browserhacks.com/" target="_blank">there you go</a>.</p>
-	</div>
-
-	<div class="content-wrap">
-		<h2>Main Methods</h2>
-		<p>These methods allow you to create <strong>tween objects</strong> and collections of <strong>tween objects</strong>; as we know, a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration, repeat or other options. The methods have different uses and performance scores while making it easy to work with.</p>
-        
-		<h3>Single Tween Object</h3>
-		<p>As the heading suggests, the following two methods allow you to create tween objects for a single HTML element, except when used in combination with jQuery and the KUTE.js plugin for jQuery, where, as jQuery always does, it always works with collections of elements.</p>
-        <p><kbd>.to()</kbd> method is the most simple method which allows you to create tween objects for animating CSS properties from a specific default value OR from current/computed value TO a desired value.
-		It's performance is not the same as for the <strong>.fromTo()</strong> method as it has to compute the default/current value on tween <code>.start()</code> and thus delays the animation for a couple of miliseconds; still this feature is great for simple animations AND it has the ability to stack transform properties as they go, making smooth transform animations on chained tweens. See the <a href="#start">.start()</a> method for the solution for sync/delay issue.</p>
-		<p>Considering a given <em>div</em> element is already transparent, a super quick example would be:</p>
-<pre><code class="language-javascript">KUTE.to(div,{opacity:1}).start()</code></pre>
-		
-        <p><kbd>.fromTo()</kbd> method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest method but unlike the <code>.to()</code> method, it does not stack transform properties on chained tweens. Along with the performance advantage, you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. Here's a quick example:</p> 
-<pre><code class="language-javascript">KUTE.fromTo(div,{opacity:1},{opacity:0}).start()</code></pre>
-
-		<h3>Tween Object Collections</h3>
-        <p>The two new methods allow you to create animations for multiple HTML elements at the same time, all in a single line of code. They use the above methods to create a tween object for each element of the collection and also enable the tween control methods in this new context.</p>	
-		<p><kbd>.allTo()</kbd> method allows you to create an array of tween objects for a collection of elements. This method is using the above <code>.to()</code> method and inherits it's functionality. Considering a given collection <code>myDivs</code> elements, a nice example would be:</p>
-<pre><code class="language-javascript">// on the fly, grab the elements by className, 
-// do the tween objects array, and start kicking
-KUTE.allTo( '.my-div-class', {opacity:1}, {offset: 200, duration: 500} ).start();
-
-// or we cache the objects for better performance and / or later control
-var myDivs          = document.querySelectorAll('.my-div-class');
-var myDivsTweens    = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 500} );
-</code></pre>
-
-		<p><kbd>.allFromTo()</kbd> method is also a method to animate a collection of elements and it uses the <code>.fromTo()</code> method. Quick example:</p> 
-<pre><code class="language-javascript">KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()</code></pre>
-
-        <p>Considering that the selector matches two DIV elements, the value for the above variable <code>myDivsTweens</code> is an object that only stores the two tweens, one for each element found:</p>
-<pre><code class="language-javascript">
-myDivsTweens = { // console.log(myDivsTweens);
-    tweens = [ Tween, Tween ] console.log(myDivsTweens.tweens);
-}
-</code></pre>
-        <p>As you can see the above code, these methods have a specific tween option called <code>offset</code> that allows you to set a delay in miliseconds between the starting time of each tween animation. Most tween control methods apply to both methods, except for the <code>.chain()</code> method. In order to chain another tween to one of the <code>myDivsTweens</code> objects, we would need to access it from the array, but let's leave that for later.</p>
-	</div>
-
-	<div class="content-wrap">
-		<h2>Tween Control Methods</h2>
-		<p>These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:</p>
-<pre><code class="language-javascript">var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});</code></pre>
-		<p>This tween object is now ready to work with the methods.</p>
-		
-		<h3 id="start">Starting Animations</h3>
-		<p><kbd>.start()</kbd> method starts animation for a given tween object. It can start the animation for both cached and non-cached objects. Unlike previous versions of KUTE.js, where animation started immediately after tween object creation, now you have to manually start them. This method also applies to arrays of tween objects created with <code>.allTo()</code> and <code>.allFromTo()</code> methods.</p>
-<pre><code class="language-javascript">//cached object defined above
-tween.start();
-
-// non-cached object are created on the fly and garbage collected after animation has finised
-KUTE.fromTo(div,{opacity:1},{opacity:0}).start();
-
-// also start the tween at a certain time
-tween.start(now); // where now must be the current or future time as number, see below
-
-// lastly the method works with tweens made with .allTo() and .allFromTo() methods
-KUTE.allFromTo(divs,{opacity:1},{opacity:0}).start();
-KUTE.allTo(divs,{opacity:0}).start();
-</code></pre>
-
-		<p>As you can see, you can also set a time for the animation to start, example: <code>tween.start(myTimeValue)</code>. Having access to the method is useful when starting animation for large amounts of elements with same properties at the same time because using it properly <strong>eliminates any syncronization issue</strong> that may occur on animations start, even if you are using the <code>.to()</code> method. The trick is super duper simple:</p> 
-
-<pre><code class="language-javascript">// step 1 - create an empty array and grab the elements to animate
-var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
-
-// step 2 - define tween objects for each element
-for (var i = 0; i < numberOfElements; i++) {
-	var tween = KUTE.fromTo(myElements[i], fromValues, toValues, options);
-	//now we populate the tweens array
-	tweens.push(tween);
-}
-
-// step 3 - calculate the right time to start
-// first we need the exact current time
-var now = window.performance.now(); // this returns the exact current time in numeric format
-
-// also we estimate/calculate an adjustment lag 
-// depending on the number of the elements AND hardware capability
-// maybe (numberOfElements / 16) would be an accurate value for PCs
-var lag = 100; // number of miliseconds for the script to built tween objects for all elements
-
-// step4 - we just start the animation for all elements at once
-for (var i = 0; i < numberOfElements; i++) {
-	tweens[i].start(now+lag);
-}
-</code></pre>
-		
-		<p>In other cases the new methods <code>.allTo()</code> and <code>.allFromTo()</code> can be more useful.</p>
-		
-		<h3>Stopping Animation</h3>
-		<p><kbd>.stop()</kbd> method stops animation for a given tween object or an array of tween objects (built with <code>.to()</code>/<code>.fromTo()</code> methods) while animating. You cannot stop the animation for tween objects created on the fly, only for cached objects. Let's assume that for the given tween we decide to stop the animation via <code>click</code> action:</p>
-<pre><code class="language-javascript">// for a tween object
-stopButton.addEventListener('click', function(){
-	myTween.stop(); // myMultiTweens.stop();
-}, false);
-</code></pre>
-		
-		<h3>Pausing Animation</h3>
-		<p><kbd>.pause()</kbd> method freezez the animation at any given time for a given tween object or collection, and unlike the <code>.stop()</code> method, this one allows resuming the animation on a later use of the next method <code>.play()</code>.</p>
-<pre><code class="language-javascript">pauseButton.addEventListener('click', function(){
-	tween.pause(); // or myMultiTweens.pause();
-}, false);
-</code></pre>
-		
-		<h3>Resuming Paused Animation</h3>
-		<p><kbd>.play()</kbd> or <kbd>.resume()</kbd> methods allows you to resume an animation for a given tween object or collection of tweens, only if it was paused or else will produce no effect.</p>		
-<pre><code class="language-javascript">playButton.addEventListener('click', function(){
-	tween.play(); // or tween.resume(); || or myMultiTweens.resume();
-}, false);
-</code></pre>
-		
-		<h3>Chaining Tweens</h3>
-		<p><kbd>.chain()</kbd> method can be used to chain tweens together. When the animation finishes for a given tween, it triggers the animation start for another tween.</p>
-<pre><code class="language-javascript">var tween2 = KUTE.fromTo(div,{left:50},{left:0});
-
-//the first tween chains the new tween
-tween.chain(tween2);
-
-//the new tween chains the first one creating a loop
-tween2.chain(tween);
-</code></pre>
-
-		<p>It's also possible to chain multiple tweens, just as shown in the below example.</p>
-<pre><code class="language-javascript">//chain multiple tweens
-tween.chain(tween1,tween2);
-</code></pre>
-
-        <p>Another thing we talked before is the ability to chain to one of the tween object within the array built with <code>.allTo()</code> or <code>.allFromTo()</code> methods.</p>
-<pre><code class="language-javascript">// chain to a tween from collection
-var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1}, {opacity: 0}, {duration: 500});
-
-// considering the collection has 5 tweens,
-// the array is right here tweensCollection.tweens, so
-// let's grab the second and chain another tween to it
-tweensCollection.tweens[1].chain(tween2);
-</code></pre>
-		
-
-	</div>
-
-	<div class="content-wrap">
-		<h2>Tween Options</h2>
-		<h3>Common Options</h3>
-		<p>These options affect all types of tweens, no matter the properties used or context.</p>
-		<p><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</p>
-		<p><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</p>
-		<p><kbd>delay: 500</kbd> option allows you to delay the tween animation for a certain number of miliseconds. The default value is <strong>0</strong>.</p>
-		<p><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> methods. This allows you to set a base delay in miliseconds that increases with each element in the collection. This has no effect on other methods and the default value is <strong>0</strong>.</p>
-		<p><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect. The default value is <strong>0</strong>.</p>		
-		<p><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code> option with at least value <b>1</b>. The default value is <strong>false</strong>.</p>
-		<p><kbd>easing: 'easingCubicInOut'</kbd> option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value is <strong>linear</strong>.</p>
-
-		<h3>Transform Options</h3>
-		<p>These options only affect animation involving any property from CSS3 <code>transform</code> specs and have no effect on other CSS properties. While you can set <code>perspective</code> or <code>perspective origin</code> via CSS, these options are here to help, especially with full browser support and preffix free handling.</p>
-		<p><kbd>perspective: 500</kbd> option allows you to set a 3D transformation <code>perspective</code> for a given HTML element that is subject to transform animation. No default value.</p>
-		<p><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.</p>
-		<p><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation.</p>
-		<p><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts valid CSS values.</p>
-		<p><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.</p>
-
-		<h3>Callback Options</h3>
-		<p>These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.</p>
-		<p><kbd>start: function</kbd> option allows you to set a function to run once tween animation starts.</p>
-		<p><kbd>update: function</kbd> option allows you to set a function to run on every frame.</p>
-		<p><kbd>pause: function</kbd> option allows you to set a function to run when animation is paused.</p>
-		<p><kbd>resume: function</kbd> option allows you to set a function to run when animation is resumed.</p>
-		<p><kbd>stop: function</kbd> option allows you to set a function to run when animation is stopped.</p>
-		<p><kbd>complete: function</kbd> option allows you to set a function to run when animation is finished.</p>
-		<p>A quick example would look like this:</p>
-<pre><code class="language-javascript">//define a function
-var callback = function(){
-	//do some foo
-}
-
-//create object and start animating already
-KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
-</code></pre>		
-		<h3>Other</h3>
-		<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.</p>
-	</div>
-
-	<div class="content-wrap">
-		<h2>Easing Functions</h2>
-		<p>The easing functions generally make animations closer to reality and completely eliminate the boring factor for a given context. The most simple example to understand what they do, think of gravity. Dropping an object from a given height, will start moving to the ground with accelerated speed. If the object has some sort of bounciness like a ball, it will jump back up and up again, till the gravity will eventually stick the object to the ground.</p> 
-		<p>What scientists observed and put in theory houndreads of years ago, later the pioneers of scripting started to implement the laws of physics into digital animation and came up with this notion of easing to describe the progression of movement. If you care to dig into the concept, <a href="http://upshots.org/actionscript/jsas-understanding-easing" targt="_blank">here's an excellent resource</a> some developers recommend. I would also recommend <a href="https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3" target="_blank">this one</a> too.</p>
-		
-		<h3>Core Functions</h3>
-		<p>Modern browsers that support <code>transition</code> can also make use of some generic easing functions via the CSS3 <code>transition-timing-function:ease-out</code> property, but in Javascript animation, we need some special functions. The popular <a href="robertpenner.com/easing/" target="_blank">Robert Penner's easing functions</a> set is one of them, and is the default set included with KUTE.js because it's the fastest set I know in terms of performance. Some functions may lack a bit of accuracy but they cover the most animation needs. Generally the easing functions' names are built with keywords that describe the type of easing, like <em>circular</em> or <em>exponential</em>, and also the type of progression <em>in</em> and/or <em>out</em>.</p>
-		
-		<p>To use them, simply set a tween option like so <code>easing: KUTE.Easing.easingSinusoidalInOut</code> or simply <code>easing: 'easingSinusoidalInOut'</code>.</p>
-		<p><kbd>linear</kbd> is the default easing function and just as it sounds, it means that the animation has no acceleration or deceleration over time. While this one is basically boring, it's the fastest in all, and it's very useful when animating opacity or colors because we cannot really distinguish changes in speed for such cases, but mostly for movement.</p>
-		
-		<p><kbd>curve</kbd> based functions are the next set of easings we are going to tak about. They are basically the same, the only difference is the number of multipliers applied (better think of it like the more weight an object has, the more acceleration):</p>
-		<ul>
-			<li><strong>Sinusoidal</strong> - multiplier of 1 (super light object, like a feather)</li>
-			<li><strong>Quadratic</strong> - multiplier of 2</li>
-			<li><strong>Cubic</strong> - multiplier of 3</li>
-			<li><strong>Quartic</strong> - multiplier of 4</li>
-			<li><strong>Quintic</strong> - multiplier of 5</li>
-			<li><strong>Circular</strong> - multiplier of 6</li>
-			<li><strong>Exponential</strong> - multiplier of 10 (super heavy object, like a truck)</li>
-		</ul>
-		
-		<p>The In / Out explained:</p>
-		<ul>
-			<li><strong>In</strong> - means that the animation starts with very very low speed and gains acceleration over time, but when it reaches the maximum speed, animation stops. These functions are: <kbd>easingSinusoidalIn</kbd>, <kbd>easingQuadraticIn</kbd>,<kbd>easingCubicIn</kbd>, <kbd>easingQuarticIn</kbd>, <kbd>easingQuinticIn</kbd>, <kbd>easingCircularIn</kbd> and <kbd>easingExponentialIn</kbd>.</li>
-			<li><strong>Out</strong> - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: <kbd>easingSinusoidalOut</kbd>, <kbd>easingQuadraticOut</kbd>, <kbd>easingCubicOut</kbd>, <kbd>easingQuarticOut</kbd>, <kbd>easingQuinticOut</kbd>, <kbd>easingCircularOut</kbd> and <kbd>easingExponentialOut</kbd>.</li>
-			<li><strong>InOut</strong> - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: <kbd>easingSinusoidalInOut</kbd>, <kbd>easingQuadraticInOut</kbd>, <kbd>easingCubicInOut</kbd>, <kbd>easingQuarticInOut</kbd>, <kbd>easingQuinticInOut</kbd>, <kbd>easingCircularInOut</kbd> and <kbd>easingExponentialInOut</kbd>.</li>
-		</ul>
-			 
-		<p><kbd>back</kbd> easing functions describe more complex animations (I would call them <em>reverse gravity</em> easings). They also come with <em>in</em> and/or <em>out</em> types of progression. </p>
-		<ul>		
-			<li><kbd>easingBackIn</kbd> would be best described when you throw an object into the air with a small amount of physical power, it will move up decelerating until it stops, then will move to the grund with acceleration.</li>
-			<li><kbd>easingBackOut</kbd> would be best described as the previous function, but viewed in reverse mode.</li>
-			<li><kbd>easingBackInOut</kbd> is a combination of the other two.</li>
-		</ul>
-		
-		<p><kbd>elasticity</kbd> easing functions describe the kind of animation where the object is elastic. With <em>in</em> and/or <em>out</em> as well. </p>
-		<ul>
-			<li><kbd>easingElasticOut</kbd> would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.</li>
-			<li><kbd>easingElasticIn</kbd> would be best described as the above function but viewed in reverse mode.</li>
-			<li><kbd>easingElasticInOut</kbd> is simply a combination of the other two.</li>
-		</ul>
-		
-		<p><kbd>gravity</kbd> based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With <em>in</em> and/or <em>out</em> as well.</p>
-		<ul>
-			<li><kbd>easingBounceOut</kbd> looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.</li>
-			<li><kbd>easingBounceIn</kbd> looks like the previous viewed in reverse mode</li>
-			<li><kbd>easingBounceInOut</kbd> is a combination of the other two.</li>
-		</ul>
-		
-		<h3>Cubic Bezier Functions</h3>
-		<p>While modern browsers support CSS3 <code>transition</code> with <code>transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5)</code>, in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the <a href="features.html">features page</a>, we are using a modified version of the <a href="https://github.com/gre/bezier-easing" target="_blank">cubic-bezier</a> by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.</p>
-		<p>You can use them either with <code>easing: KUTE.Ease.bezier(mX1, mY1, mX2, mY2)</code> or <code>easing: 'bezier(mX1, mY1, mX2, mY2)'</code>, where mX1, mY1, mX2, mY2 are <em>Float</em> values from 0 to 1. You can find the right values you need <a href="http://cubic-bezier.com/" target="_blank">right here</a>.</p>
-		<p>There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:</p>
-		<ul>
-			<li>Equivalents of the browser's <strong>generic</strong> timing functions: <kbd>easeIn</kbd>, <kbd>easeOut</kbd> and <kbd>easeInOut</kbd></li>
-			<li><strong>Sinusoidal</strong> timing functions: <kbd>easeInSine</kbd>, <kbd>easeOutSine</kbd> and <kbd>easeInOutSine</kbd></li>
-			<li><strong>Quadratic</strong> timing functions: <kbd>easeInQuad</kbd>, <kbd>easeOutQuad</kbd> and <kbd>easeInOutQuad</kbd></li>
-			<li><strong>Cubic</strong> timing functions: <kbd>easeInCubic</kbd>, <kbd>easeOutCubic</kbd> and <kbd>easeInOutCubic</kbd></li>
-			<li><strong>Quartic</strong> timing functions: <kbd>easeInQuart</kbd>, <kbd>easeInQuart</kbd> and <kbd>easeInOutQuart</kbd></li>
-			<li><strong>Quintic</strong> timing functions: <kbd>easeInQuint</kbd>, <kbd>easeOutQuint</kbd> and <kbd>easeInOutQuint</kbd></li>
-			<li><strong>Exponential</strong> timing functions: <kbd>easeInExpo</kbd>, <kbd>easeOutExpo</kbd> and <kbd>easeInOutExpo</kbd></li>
-			<li><strong>Back</strong> timing functions: <kbd>easeInBack</kbd>, <kbd>easeOutBack</kbd> and <kbd>easeInOutBack</kbd></li>
-			<li><strong>Special slow motion</strong> timing functions look <a href="http://cubic-bezier.com/#0,.58,1,.3" target="_blank">like this</a>: <kbd>slowMo</kbd>, <kbd>slowMo1</kbd> and <kbd>slowMo2</kbd></li>
-		</ul>
-		
-		<h3>Physics Based Functions</h3>
-		<p>KUTE.js also packs the <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> easing functions by Michael Villar and I have to say these functions are amazing in terms of flexibility, control and performance. They allow you to control the friction, bounciness, frequency, elasticity, or multiple bezier points for your animations.</p>
-		<p>You can use them either with regular Javascript invocation as shown below and configure / visualize them on the <a href="http://dynamicsjs.com/" target="_blank">author's website</a>, while you can also use the pack of presets featuring mostly <kbd>bezier</kbd> based functions. Ok now, let's get to it:</p>
-	
-		<ul>
-			<li><strong>spring</strong> function is basically an <strong>elastic</strong> type of easing that allows you to set <code>frequency:1-1000</code>, <code>friction:1-1000</code>, <code>anticipationSize:0-1000</code> (a kind of delay in miliseconds) and <code>anticipationStrength:0-1000</code> (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: <code>easing: KUTE.Physics.spring({friction:100,frequency:600})</code>.</li>
-			<li><strong>bounce</strong> function is also an <strong>elastic</strong> easing function, but it works different than Robert Penner's version that's basically a <kbd>gravity</kbd> based function. This one here will always come back to the starting values. This function allows you to set <code>frequency:0-1000</code> and <code>friction:0-1000</code>. Usage: <code>easing: KUTE.Physics.bounce({friction:100,frequency:600})</code>.</li>
-			<li><strong>gravity</strong> function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: <code>elasticity:1-1000</code> and <code>bounciness:0-1000</code>. Usage: <code>easing: KUTE.Physics.gravity({elasticity:100,bounciness:600})</code>.</li>
-			<li><strong>forceWithGravity</strong> function acts just like <code>gravity</code> except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: <code>elasticity:1-1000</code> and <code>bounciness:0-1000</code>. Usage: <code>easing: KUTE.Physics.forceWithGravity({elasticity:100,bounciness:600})</code>.</li>
-			<li><strong>bezier</strong> easing function is a bit more complicated as it allows you to set multiple points of bezier curves.  Usage: <code>easing: KUTE.Physics.bezier({points:POINTS_ARRAY_COMES HERE})</code>, again use the author's website, edit the bezier curve as you wish and copy paste the points array into this function. Here's how a basic <em>easeIn</em> looks like: 
-<pre><code class="language-javascript">// sample bezier based easing setting
-easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] })
-</code></pre>
-			</li>
-		</ul>
-		<p>The presets can be used both as a string <code>easing:'physicsIn'</code> or <code>easing:KUTE.Physics.physicsIn(friction:200)</code>. The list is:</p>
-		<ul>
-			<li><strong>curves</strong>: <kbd>physicsIn</kbd>, <kbd>physicsOut</kbd>, <kbd>physicsInOut</kbd> can do all multipliers (from sinusoidal to exponential) via the <code>friction</code> option;</li>
-			<li><strong>back</strong>: <kbd>physicsBackIn</kbd>, <kbd>physicsBackOut</kbd>, <kbd>physicsBackInOut</kbd> also benefit from the <code>friction</code> option.</li>
-		</ul>		
-
-		<ul id="share" class="nav">
-			<li>Share </li>
-			<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute.js animation engine by @thednp and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
-		</ul>
-		
-	</div>
-	  
-      <!-- FOOTER -->
-     <footer>
-		<div class="content-wrap">
-			<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
-			<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
-		</div>
-    </footer>
-
- </div><!-- /.site-wrapper -->
- 
-
-
-<!-- JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->	
-
-<!-- highlighter -->
-<script src="./assets/js/prism.js" type="text/javascript"></script>	
-
-<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script>  KUTE CDN -->
-
-<script src="./src/kute.js"></script> <!-- some stuff -->
-<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
-</body>
-</html>

demo/assets/css/kute.css

@@ -1,345 +0,0 @@
-/*!
- * KUTE.js | https://github.com/thednp/kute.js/
- * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
- */
-
-/* GLOBAL STYLES
--------------------------------------------------- */
-body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 2; /* ~25px */
-  color: #ddd;
-  background-color: #999;
-  position: relative
- 
-}
-
-body > .fill {
-	position: fixed; top: 0; left:0; right: 0; bottom:0; 
-}
-
-.fill { 
-	background-size: cover;
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	width: 100%; height: 100%; 
-}
-.ie8 .fill {background-size: auto 100%}
-
-.overlay {
-	background-color: #000; 
-	opacity: 0.7
-}
-
-.ie8 .overlay { filter: alpha(opacity=70) }
-
-footer {
-  clear: both; overflow: hidden; margin-top: 60px
-}
-
-footer .content-wrap {
-  padding-top: 5px;
-  border-top: 1px solid rgb(120,120,120); border-top: 1px solid rgba(255,255,255,0.2); 
-}
-
-footer p {margin: 0 0 10px}
-
-/* site-wrapper */
-.site-wrapper { position: relative; overflow: hidden}
-
-/* navbar */
-.navbar-wrapper { position: relative; clear: both }
-.navbar-wrapper .content-wrap { height: 64px; padding: 20px 0 0; }
-
-.navbar-wrapper h1 { color: #fff; font-size: 32px; line-height: 25px; letter-spacing: -2px; float: left; padding-right: 25px; margin-right: 25px; border-right: 1px solid rgb(120,120,120); border-right: 1px solid rgba(255,255,255,0.2) }
-.navbar-wrapper h1 span { font-size: 24px; color: #555; letter-spacing: -1px; }
-.navbar-wrapper h1.active span { color: #ffd626 }
-.navbar-wrapper .nav { float: left; padding: 0 0 18px; margin: 0; border-bottom: 1px solid #555 }
-.nav li { float: left; display: block; line-height: 25px; list-style: none }
-.nav li:not(:last-child) { margin-right: 12px }
-.ie8 .nav li { margin-right: 12px }
-.nav li.active a { color: #ffd626 }
-.nav li a { color: #ccc }
-@media (max-width: 768px){
-	.navbar-wrapper .content-wrap { height: 94px}
-	.navbar-wrapper h1 {border: 0}
-	.navbar-wrapper .nav,
-	.navbar-wrapper h1 { float: none;  }
-	.navbar-wrapper .nav { height: 30px }
-}
-
-.ie8 .btn.top-right { top:55px }
-
-/* featurettes */
-.featurettes {    
-background: #222;
-    padding: 60px 0;
-    width: 100%;
-    clear: both;
-    margin: 60px 0;
-    float: left;
-}
-
-.content-wrap .featurettes { margin: 0 0 20px; padding: 20px 0 0 20px; display: inline-block; border-radius: 10px; position: relative }
-
-/* example box */
-.example-box {
-	font-size: 40px; line-height: 150px; text-align:center; font-weight: bold; 
-	width: 150px; height: 150px; float: left; position:relative; 
-	border-radius: 5px; margin: 0 20px 20px 0;
-/* easy hack to improve box model properties performance on modern browsers only ofc */
-	transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); 
-}
-.example-buttons {position: absolute; top: 18px; right:0}
-
-/* text properties example */
-h1.example-item {
-    font-size: 50px;
-    line-height:50px;
-    color: #fff;
-}
-
-h1.example-item span {
-    line-height: inherit; 
-    opacity: 0; display: inline;
-    vertical-align: top;
-}
-.btn.example-item {opacity: 0}
-
-.ie8 h1.example-item span,
-.ie8 .btn.example-item {filter: alpha(opacity=0)}
-/*.ie8 .btn.example-item * {filter: inherit}*/
-
-/* UTILITY STYLES
--------------------------------------------------- */
-.clearfix:before,
-.clearfix:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after {
-  clear: both;
-}
-.center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-.pull-right {
-  float: right !important;
-}
-.pull-left {
-  float: left !important;
-}
-.hide {
-  display: none !important;
-}
-.show {
-  display: block !important;
-}
-.invisible {
-  visibility: hidden;
-}
-.text-hide {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.hiddenoverflow { overflow: hidden }
-
-.media {float: left; margin: 5px 20px 0 0; height: auto; font-size: 64px; line-height: 64px; width: 64px; text-align: center}
-
-
-/* WRAPPER STYLES
--------------------------------------------------- */
-.content-wrap { position: relative; width: 980px; margin: 0 auto; max-width: 100%; clear: both; }
-@media (max-width: 1200px){
-	.content-wrap { width: 100%; max-width: 80%; }
-}
-
-/* check div consistency 
-div { background-color: rgba(0,0,0,0.2) }*/
-
-/* TYPO STYLES
--------------------------------------------------- */
-p, ul, ol { margin: 0 0 20px }
-h1, h2, h3, h4, strong {color: #ffd626}
-h1 { font-size: 54px; letter-spacing:-3px; line-height: 0.92; font-weight: normal; }
-h2 { font-size: 46px; letter-spacing:-2px; line-height: 1.08; font-weight: normal; margin: 1.08em 0 0.27em; width: 100%; }
-h3 { font-size: 24px; letter-spacing:0px; line-height: 0.96; font-weight: normal; }
-h4 { font-size: 16px; letter-spacing:0px; line-height: 1.14; font-weight: normal; }
-h1, h3, [class*="col"] > h4 {margin: 0 0 20px}
-
-.lead { font-size: 16px }
-
-.nomargin { margin-top: 0px !important }
-@media (min-width: 768px){
-	.nomarginlarge { margin-top: 0 !important }
-}
-
-/* COLUMN STYLES
--------------------------------------------------- */
-.columns { position: relative; width: auto; margin: 0 -20px; clear: both }
-.columns > [class*="col"] { padding: 0 20px; float:left; position: relative }
-.col2 { width: 50% }
-.col3 { width: 33.3% }
-.col4 { width: 25% }
-.col8 { width: 75% }
-
-@media (min-width: 480px) and (max-width: 768px){
-	/*.columns:not(#blocks) .col3:last-child{width: 100%;}*/
-	.col3,
-	.col4 { width: 50% }
-	.col8 { width: 100% }
-}
-@media (max-width: 479px){
-	.columns > [class*="col"] { float:none; width: 100%; }
-}
-
-.table { display: table; height: 480px }
-.cell { display: table-cell; vertical-align: middle }
-
-@media (max-width: 479px){
-	.table { height: 320px }
-}
-
-/* welcome */
-.col3.bg { /*min-height: 120px;*/ width: 32%; margin: 1.3% 1.3% 0 0; float: left; padding: 0; opacity:0 }
-.ie8 .col3.bg { filter: alpha(opacity=0); }
-
-.col3.bg:nth-child(3),
-.col3.bg:nth-child(6),
-.col3.bg:nth-child(9) { margin: 1.3% 0 0 }
-
-.welcome > .table > .cell {perspective: 600px;	-webkit-perspective: 600px; }
-#blocks {
-	transform: rotateY(-10deg);	-webkit-transform: rotateY(-10deg);	width: 90%;
-}
-
-/*.replay { display: none; }*/
-
-@media (max-width: 768px){
-	.columns.welcome .col2.table { width: 100% !important; float: left }
-	.columns.welcome .col2:nth-child(2) { position: absolute; top: 0; z-index: -1 }
-	#blocks { width: auto }
-}
-
-/* STYLING CONTENT
--------------------------------------------------- */
-/* images */
-img { max-width: 100% }
-img.circle { border-radius: 50% }
-
-/* links */
-a {
-  color: #ffd626;
-  text-decoration: none;
-}
-a:hover,
-a:focus {
-  color: #4CAF50;
-  text-decoration: underline;
-}
-a:focus {
-  outline: none;
-}
-
-hr {
-    border: 1px solid #444;
-    margin: 10px 0;	
-}
-
-/* share */
-#share {position: fixed; top: 20px;right: 20px;}
-#share .icon {font-size: 24px; line-height: 1}
-
-/* buttons */
-.btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; }
-.bg-gray { color:#fff; background-color: #555; }
-.btn.active { background-color: #2196F3 }
-.btn:hover, .btn:active, .btn:focus { color: #fff; text-decoration: none; background-color: #777}
-.btn-olive, .bg-olive {background-color: #9C27B0; color: #fff} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #673AB7 }
-.btn-indigo, .bg-indigo { background-color: #673AB7; color: #fff} .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus { background-color: #ffd626; color:#000 }
-.btn-green, .bg-green { background-color: #4CAF50; color: #fff} .btn-green:hover, .btn-green:active, .btn-green:focus { background-color: #9C27B0 }
-.btn-red, .bg-red { background-color: #e91b1f; color: #fff} .btn-red:hover, .btn-red:active, .btn-red:focus { background-color: #4CAF50 }
-.btn-yellow, .bg-yellow { background-color: #ffd626; color:#000} .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus { background-color: #4CAF50; color: #000 }
-.btn-blue, .bg-blue { background-color: #2196F3; color: #fff} .btn-blue:hover, .btn-blue:active, .btn-blue:focus { background-color: #e91b1f }
-.btn-pink, .bg-pink { background-color: #E91E63; color: #fff} .btn-pink:hover, .btn-pink:active, .btn-pink:focus { background-color: #2196F3 }
-.btn-orange, .bg-orange { background-color: #FF5722; color: #fff} .btn-orange:hover, .btn-orange:active, .btn-orange:focus { background-color: #4CAF50 }
-.btn-lime, .bg-lime { background-color: #CDDC39; color: #000} .btn-lime:hover, .btn-lime:active, .btn-lime:focus { background-color: #e91b1f }
-.btn-teal, .bg-teal { background-color: #009688; color: #fff} .btn-teal:hover, .btn-teal:active, .btn-teal:focus { background-color: #9C27B0 }
-
-.icon-large { font-size: 78px; line-height: 0.64; text-shadow: 2px 2px 0 #FFF,3px 3px 0px #ccc;}
-.icon-large.fa-cogs:before { color: #4CAF50 }
-.icon-large.fa-rocket:before { color: #673AB7 }
-.icon-large.fa-code-fork:before { color: #9C27B0 }
-
-.btn span {
-    font-size: 150%;
-    vertical-align: middle;
-}
-
-.btn span.right { margin: 0 0 0 10px }
-.btn span.left { margin: 0 10px 0 0 }
-
-
-/* STYLE CODE WRAPPING
--------------------------------------------------- */
-code, kbd, pre {
-	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-}
-pre {
-	display: block;
-	padding: 10px 15px !important;
-	margin: 0 0 20px !important;
-	line-height: 2.08;
-	color: #999;
-	word-break: break-all;
-	background-color: rgb(33,33,33);
-	background-color: rgba(11,11,11,0.5);
-	/*border: 1px solid rgb(22,22,22);
-	border: 1px solid rgba(11,11,11,0.8);*/
-	border-radius: 4px;
-	text-align: left;
-	position: relative;
-}
-pre.language-javascript:after,
-pre.language-clike:after, 
-pre.language-markup:after { 
-	position: absolute; top:0; right:0; padding: 2px 5px;
-	background: #000;  
-	border-radius: 0px 0px 0px 5px;
-	font-family: Helvetica, Arial, sans-serif;
-	font-size: 12px; color: #999;
-}
-
-pre.language-javascript:after {content: 'Javascript';}
-pre.language-clike:after {content: 'node';}
-pre.language-markup:after {content: 'HTML';}
-pre code {background: none;padding: 0; font-weight: normal; font-size: 100%;}
-code {
-	padding: 2px 4px;
-	font-size: 90%;
-	color: #999;
-	background-color: #111;
-	border-radius: 4px;
-	white-space: pre;
-	font-weight: bold
-}
-
-kbd {
-	padding: 2px 4px;
-	font-size: 90%;
-	color: #333;
-	background-color: #eee;
-	border-radius: 3px;
-	font-weight: bold
-}

demo/assets/css/prism.css

@@ -1,3 +0,0 @@
- /* prism okaidia | ocodia */
-
-code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

demo/assets/css/reset.css

@@ -1,209 +0,0 @@
-/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  vertical-align: baseline;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background: transparent;
-}
-a:active,
-a:hover {
-  outline: 0;
-}
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-b,
-strong {
-  font-weight: bold;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sup {
-  top: -0.5em;
-}
-sub {
-  bottom: -0.25em;
-}
-img {
-  border: 0;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-pre {
-  overflow: auto;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
-}
-button {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-input {
-  line-height: normal;
-}
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-input[type="search"] {
-  -webkit-appearance: textfield;
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  border: 0;
-  padding: 0;
-}
-textarea {
-  overflow: auto;
-}
-optgroup {
-  font-weight: bold;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-td,
-th {
-  padding: 0;
-}
-* {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-*:before,
-*:after {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-html {
-  font-size: 10px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-input,
-button,
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-figure {
-  margin: 0;
-}
-img {
-  /*vertical-align: middle;*/
-}

demo/assets/js/examples.js

@@ -1,356 +0,0 @@
-// some regular checking
-var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
-	isIE8 = isIE === 8,
-	isIE9 = isIE === 9;
-		
-
-
-/* TRANSFORMS EXAMPLES */
-var featurettes = document.querySelectorAll('.featurettes'), fl = featurettes.length;
-
-for ( var i=0; i<fl; i++){
-	var example = featurettes[i];
-	if ( example.querySelector('[data-]') !== undefined ) {
-		var items = example.querySelectorAll('.example-item'), bl = items.length, tweens = [];
-		for (var j=0;j<bl;j++) {
-			var data = processData(items[j]), 
-				pp = data.options.perspective, 
-				ppp = data.options.parentPerspective,
-				to = data.properties, fr = getFrom(data.properties,items[j]),
-				tween1 = KUTE.fromTo(items[j], fr, to, {easing: 'easingCubicInOut', yoyo: true, repeat: 1, duration: 1500, perspective: pp, parentPerspective: ppp} );
-			tweens.push(tween1);
-		}
-		addListener(example,tweens);	
-	}
-}
-
-function addListener(example,tweens){
-	example.querySelector('.btn').addEventListener('click',function(e){
-		e.preventDefault();
-		for (var i=0;i<tweens.length;i++) {				
-			tweens[i].start();			
-		}
-	},false);	
-}
-
-function getFrom(to,el) {
-	var start = {}, css = window.getComputedStyle(el);
-	for (var p in to) {
-		if (p==='translate3d') { 
-			start[p] = [0,0,0];
-		} else if (p==='color' || p==='backgroundColor' || p==='border-color') {
-			start[p] = css[p] || 'rgba(0,0,0,0)';
-		} else if ( p === 'backgroundPosition' ){
-			start[p] = [50,50];
-		} else if ( p === 'clip' ){
-			start[p] = css[p] || [0,0,0,0];
-		} else if ( p === 'borderRadius' ){
-			start[p] = '5px';							
-		} else if ( p === 'scale' || p === 'opacity' ){
-			start[p] = 1;							
-		} else {
-			start[p] = css[p] || 0;
-		}
-	} 
-	return start;
-}
-
-//make a sort of data-api animation
-function processData(el){
-	var options = {}, properties = {}, l=0, attr=el.attributes;
-	for (l;l<attr.length;l++){
-		if (/^data-/.test(attr[l].nodeName)) {
-			if (/option/.test(attr[l].nodeName)) {
-				var op = attr[l].nodeName.replace('data-option-','').replace(/\s/,'').split('-');
-				for (var i=0;i<op.length;i++) { 
-					if (i>0 && op[i]!==undefined) { 
-						 op[i] = op[i].charAt(0).toUpperCase() + op[i].slice(1);
-					}
-				}
-				op = op.join('');
-				options[op] = attr[l].value;			
-			} else if (/property/.test(attr[l].nodeName)) {
-				var pp = attr[l].nodeName.replace('data-property-','').replace(/\s/,'').split('-');
-				for (var j=0;j<pp.length;j++) {
-					if (j>0 && pp[j]!==undefined) {  
-						pp[j] = pp[j].charAt(0).toUpperCase() + pp[j].slice(1);
-					}
-				}	
-				pp = pp.join('');
-				properties[pp] = pp === 'translate3d' || pp === 'translate' ? attr[l].value.replace(/\[|\]/g,'').split(',') : attr[l].value;
-			}
-		}		
-	}
-	return {options: options, properties: properties};
-}
-/* TRANSFORMS EXAMPLES */
-
-
-/*  CHAINED TWEENS EXAMPLE  */
-var chainedTweens = document.getElementById('chainedTweens'),
-	el1 = chainedTweens.querySelectorAll('.example-item')[0],
-	el2 = chainedTweens.querySelectorAll('.example-item')[1],
-	el3 = chainedTweens.querySelectorAll('.example-item')[2],
-	ctb = chainedTweens.querySelector('.btn');
-
-// built the tween objects for element1
-var tween11 = KUTE.fromTo(el1, {translateX:0, rotateX: 0}, {translateX:100, rotateX: 25}, {perspective:100, duration: 2000});
-var tween12 = KUTE.fromTo(el1, {translateY:0, rotateY: 0}, {translateY:20, rotateY: 15}, {perspective:100, duration: 2000});
-var tween13 = KUTE.fromTo(el1, {translate3d:[100,20,0], rotateX: 25, rotateY:15}, {translate3d:[0,0,0], rotateX: 0, rotateY:0}, {perspective:100, duration: 2000});
-
-// chain tweens
-tween11.chain(tween12);
-tween12.chain(tween13);
-
-// built the tween objects for element2
-var tween21 = KUTE.fromTo(el2, {translateX:0, translateY:0, rotateX: 0, rotateY:0 }, {translateX:150, translateY:0, rotateX: 25, rotateY:0}, {perspective:100, duration: 2000});
-var tween22 = KUTE.fromTo(el2, {translateX:150, translateY:0, rotateX: 25, rotateY: 0}, {translateX:150, translateY:20, rotateX: 25, rotateY: 15}, {perspective:100, duration: 2000});
-var tween23 = KUTE.fromTo(el2, {translate3d:[150,20,0], rotateX: 25, rotateY:15}, {translate3d:[0,0,0], rotateX: 0, rotateY:0}, {perspective:100, duration: 2000});
-
-// chain tweens
-tween21.chain(tween22);
-tween22.chain(tween23);
-
-// built the tween objects for element3
-var tween31 = KUTE.to(el3,{translateX:200, rotateX: 25}, {perspective:100, duration: 2000});
-var tween32 = KUTE.to(el3,{translate3d:[200,20,0], rotateY: 15}, {perspective:100, duration: 2000});
-var tween33 = KUTE.to(el3,{translate3d:[0,0,0], rotateX: 0, rotateY:0}, {perspective:100, duration: 2000});
-
-// chain tweens
-tween31.chain(tween32);
-tween32.chain(tween33);
-
-ctb.addEventListener('click',function(e){
-	e.preventDefault();
-	tween11.start(); tween21.start(); tween31.start();
-},false);
-/*  CHAINED TWEENS EXAMPLE  */
-
-
-/*  BOX MODEL EXAMPLE  */
-var boxModel = document.getElementById('boxModel'),
-	btb = boxModel.querySelector('.btn'),
-	box = boxModel.querySelector('.example-box');
-
-// built the tween objects
-var bm1 = KUTE.to(box,{width:250},{ yoyo: true, repeat: 1, duration: 1500, update: onWidth});
-var bm2 = KUTE.to(box,{height:250},{ yoyo: true, repeat: 1, duration: 1500, update: onHeight});
-var bm3 = KUTE.to(box,{left:250},{ yoyo: true, repeat: 1, duration: 1500, update: onLeft});
-var bm4 = KUTE.to(box,{top:-250},{ yoyo: true, repeat: 1, duration: 1500, update: onTop});
-var bm5 = KUTE.fromTo(box,{padding:0},{padding:20},{ yoyo: true, repeat: 1, duration: 1500, update: onPadding});
-var bm6 = KUTE.to(box,{marginTop:50,marginLeft:50,marginBottom:70},{ yoyo: true, repeat: 1, duration: 1500, update: onMargin, complete: onComplete});
-
-// chain the bms
-bm1.chain(bm2);
-bm2.chain(bm3);
-bm3.chain(bm4);
-bm4.chain(bm5);
-bm5.chain(bm6);
-
-//callback functions
-function onWidth() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'WIDTH<br>'+parseInt(css.width)+'px'; }
-function onHeight() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'HEIGHT<br>'+parseInt(css.height)+'px'; }
-function onLeft() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'LEFT<br>'+parseInt(css.left)+'px'; }
-function onTop() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'TOP<br>'+parseInt(css.top)+'px'; }
-function onPadding() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'PADDING<br>'+(parseInt(css.padding)+'px')||'auto'; }
-function onMargin() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'MARGIN<br>'+parseInt(css.marginTop)+'px'; }
-function onComplete() { box.innerHTML = 'BOX<br>MODEL'; btb.style.display='inline'; }
-
-btb.addEventListener('click', function(e){
-	e.preventDefault();
-	bm1.start();
-	btb.style.display='none';
-},false);
-/*  BOX MODEL EXAMPLE  */
-
-
-/*  TEXT PROPERTIES EXAMPLE  */
-var textProperties = document.getElementById('textProperties'),
-	heading = textProperties.querySelector('h1'),
-	button = textProperties.querySelectorAll('.btn')[0],                                            
-	tbt = textProperties.querySelectorAll('.btn')[1],                                           
-
-	// let's split the heading text by character
-	chars = heading.innerHTML.split('');
-
-// wrap the splits into spans and build an object with these spans 
-heading.innerHTML = '<span>' + chars.join('</span><span>') + '</span>';
-var charsObject = heading.getElementsByTagName('SPAN'), l = charsObject.length;
-
-
-// built the tween objects
-var tp1 = KUTE.fromTo(
-    button, 
-    {width: 150, opacity:0, height: 70, lineHeight:70, fontSize: 40}, 
-    {width: 100, opacity:1, height: 35, lineHeight:35, fontSize: 20});
-
-function runHeadingAnimation() {
-	for (var i=0; i<l; i++){    
-		var fn = i === l-1 ? startButtonAnimation : null,
-			delay = 250*i;
-		
-		KUTE.fromTo(charsObject[i], 
-			{opacity:0, height: 50, fontSize:80, letterSpacing: 20}, 
-			{opacity:1, height: 35, fontSize:50, letterSpacing: 0}, 
-			{complete: fn, delay: delay, duration: 500, easing: 'easingCubicOut'}
-		).start()
-	
-	}
-	function startButtonAnimation(){
-		tp1.start();
-	}	
-}
-
-tbt.addEventListener('click', function(e){
-	e.preventDefault();	
-	for (var i=0;i<l; i++) {
-		charsObject[i].style.opacity ="";
-	}
-	button.style.opacity = '';
-	runHeadingAnimation();
-},false);
-/*  TEXT PROPERTIES EXAMPLE  */
-
-
-/*  COLORS EXAMPLE  */
-var colBox = document.getElementById('colBox'),
-	colBoxElement = colBox.querySelector('.example-box'),
-	colbtn = colBox.querySelector('.btn');	
-
-var colTween1 = KUTE.to(colBoxElement, {color: '#9C27B0'}, {duration: 1000});
-var colTween2 = KUTE.to(colBoxElement, {backgroundColor: '#069'}, {duration: 1000});
-var colTween3 = KUTE.to(colBoxElement, {borderColor: '#069'}, {duration: 1000});
-var colTween4 = KUTE.to(colBoxElement, {color: '#fff'}, {duration: 1000});
-var colTween5 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1000});
-var colTween6 = KUTE.to(colBoxElement, {borderRightColor: '#9C27B0'}, {duration: 1000});
-var colTween7 = KUTE.to(colBoxElement, {borderBottomColor: '#9C27B0'}, {duration: 1000});
-var colTween8 = KUTE.to(colBoxElement, {borderLeftColor: '#9C27B0'}, {duration: 1000});
-var colTween9 = KUTE.to(colBoxElement, {backgroundColor: '#9C27B0'}, {duration: 1000});
-
-colTween1.chain(colTween2);
-colTween2.chain(colTween3);
-colTween3.chain(colTween4);
-colTween4.chain(colTween5);
-colTween5.chain(colTween6);
-colTween6.chain(colTween7);
-colTween7.chain(colTween8);
-colTween8.chain(colTween9);
-
-colbtn.addEventListener('click', function(e){
-	e.preventDefault();
-	colTween1.start();
-},false);
-/*  COLORS EXAMPLE  */
-
-
-/*  CLIP EXAMPLE  */
-var clipExample = document.getElementById('clip'),
-	clipElement = clipExample.querySelector('.example-box'),
-	clpbtn = clipExample.querySelector('.btn');	
-
-var clp1 = KUTE.fromTo(clipElement, {clip: [0,150,150,0]}, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
-var clp2 = KUTE.fromTo(clipElement, {clip: [0,20,150,0]}, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
-var clp3 = KUTE.fromTo(clipElement, {clip: [0,150,150,130]}, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
-var clp4 = KUTE.fromTo(clipElement, {clip: [0,150,20,0]}, {clip: [0,150,150,0]}, {duration:1200, easing: 'easingExponentialInOut'});
-
-//chain some clps
-clp1.chain(clp2);
-clp2.chain(clp3);
-clp3.chain(clp4);
-
-clpbtn.addEventListener('click', function(e){
-	e.preventDefault();	
-	clp1.start();
-},false);
-/*  CLIP EXAMPLE  */
-
-
-/*  BACKGROUND POSITION EXAMPLE  */
-var bgPos = document.getElementById('bgPos'),
-	bgBox = bgPos.querySelector('.example-box'),
-	bgb = bgPos.querySelector('.btn'),	
-	bpTween1 = KUTE.fromTo(bgBox, {backgroundPosition: ['50%','50%']}, {backgroundPosition: ['0%','50%']}, { yoyo: true, repeat: 1, duration: 1500, easing: 'easingCubicOut'});
-	
-bgb.addEventListener('click', function(e){
-	e.preventDefault();
-	bpTween1.start();
-},false);	
-/*  BACKGROUND POSITION EXAMPLE  */
-
-
-
-
-/* CROSS BROWSER EXAMPLE */
-// grab an HTML element to build a tween object for it 
-var element = document.getElementById("myElement");
-
-// create values and options objects
-var startValues = {}, endValues = {}, options = {};
-
-// here we define properties that are commonly supported
-startValues.opacity = 1; endValues.opacity = 0.1;
-startValues.backgroundColor = '#ffd626'; endValues.backgroundColor = '#ec1e71';
-
-// here we define the properties according to the target browsers
-if (isIE8) { // or any other browser that doesn"t support transforms		
-	startValues.left = 0; endValues.left = 250;
-} else if (isIE9) { // or any other browser that only support 2d transforms
-	startValues.translate = 0; endValues.translate = 250; // 2d translate on X axis	
-	startValues.rotate = 0; endValues.rotate = 180; // 2d rotation on Z axis	
-	startValues.scale = 1; endValues.scale = 1.5; // 2d scale
-} else { // most modern browsers
-	startValues.translate3d = [0,0,0]; endValues.translate3d = [250,0,0]; //3d translation on X axis					
-	startValues.rotateZ = 0; endValues.rotateZ = 180; // 3d rotation on Z axis	
-	startValues.rotateX = 0; endValues.rotateX = -70; // 3d rotation on X axis					
-	startValues.scale = 1; endValues.scale = 1.5; // 2d scale	
-	options.perspective = 600; // 3d transform option
-}
-
-// common tween options
-options.easing = "easingSinusoidalInOut";
-options.yoyo = true;
-options.repeat = 1;
-options.duration = 2500;
-
-// the cached object
-var myTween = KUTE.fromTo(element, startValues, endValues, options);
-
-// trigger buttons
-var startButton = document.getElementById('startButton'),
-	stopButton = document.getElementById('stopButton'),
-	playPauseButton = document.getElementById('playPauseButton');
-
-// add handlers for the trigger buttons
-startButton.addEventListener('click', function(e){
-	e.preventDefault();
-	if (!myTween.playing) { myTween.start(); }
-}, false);
-stopButton.addEventListener('click', function(e){
-	e.preventDefault();
-	if (myTween.playing) { myTween.stop(); }
-}, false);
-playPauseButton.addEventListener('click', function(e){
-	e.preventDefault();	
-	if (!myTween.paused && myTween.playing) { 
-		myTween.pause(); playPauseButton.innerHTML = 'Resume';
-		playPauseButton.className = playPauseButton.className.replace('btn-orange','btn-olive');
-	} else { 
-		myTween.resume(); 
-		playPauseButton.innerHTML = 'Pause';
-		playPauseButton.className = playPauseButton.className.replace('btn-olive','btn-orange');
-	}  
-}, false);
-
-/* CROSS BROWSER EXAMPLE */
-
-
-/* MULTI TWEENS EXAMPLE */
-var tweenMulti = KUTE.allFromTo('.example-multi',
-    {translate:[0,0], rotate: 0}, 
-    {translate:[0,-150], rotate: 360}, 
-    {transformOrigin: '10% 10%', offset: 300, duration: 1000, easing: 'easingCubicOut', repeat: 1, repeatDelay: 1000, yoyo: true}
-);
-function startMultiTween() {
-    tweenMulti.start();
-}
-/* MULTI TWEENS EXAMPLE */

demo/assets/js/home.js

@@ -1,97 +0,0 @@
-// vars
-var block = document.getElementById('blocks'),
-	bs = block.querySelectorAll('.bg'),
-	b = block.querySelector('.bg'),
-	isIE = /ie/.test(document.documentElement.className),
-	isIE8 = /ie8/.test(document.documentElement.className),
-	isIE10 = /MSIE|10.0/.test(navigator.userAgent),
-	replay = document.querySelector('.btn.replay');
-
-
-// resize and show the blocks
-window.addEventListener('load',resizeHandler,false);
-window.addEventListener('load',showBlocks,false);
-window.addEventListener('resize',resizeHandler,false);
-replay.addEventListener('click',runOnClick,false);
-
-function resizeHandler(e) {
-	var css = window.getComputedStyle(b),
-		bw = parseInt(css.width), i = 0;
-	for (i;i<9;i++){
-		bs[i].style.minHeight = bw+'px';
-		if (e.type==='load'){
-			bs[i].style.left = -bw+'px';
-		}	
-	}
-}
-
-function showBlocks() {
-	var i = 0, dl, css = window.getComputedStyle(b),
-		bw = parseInt(css.width), d = isIE || (/%/.test(css.width)) ? 300 : bw*3, ra, fn;
-	for (i;i<9;i++){
-		if ( i === 0 || i === 3 || i === 6 ) {
-			dl = 200 + i*bw;
-		} else if ( i === 1 || i === 4 || i === 7 ) {
-			dl = 400 + i*bw;
-		} else if ( i === 2 || i === 5 || i === 8 ) {
-			dl = 600 + i*bw;
-		}
-		fn = i === 0 ? openTheAnimations : null;
-		ra = i === 8 ? runAnimations : null;
-		KUTE.to(bs[i], {opacity:1,left:0}, {duration: d, delay: dl, complete: ra, easing: 'easingQuadraticOut', start: fn}).start();
-	}
-}
-
-function runOnClick() {
-	if ( !/animating/.test(block.className) ) {
-		runAnimations();
-	}
-}
-
-function doBlockAnimations() {
-	var i = 0;
-	for (i;i<9;i++){
-		var rd = getRandomInt(-300,300), rs = getRandomInt(0.1,5), sc = parseFloat(rs*0.5),
-			fn = i===8 ? closeTheAnimations : null,
-			t1 = KUTE.to(bs[i], { translate:rd}, { duration:1500, easing: 'easingQuadraticInOut', delay: 1500 }),
-			t2 = KUTE.to(bs[i], { rotate:720}, { duration:1500, easing: 'easingQuadraticOut' }),
-			t3 = KUTE.fromTo(bs[i], { translate:rd, borderRadius: '0%', scale:1, rotate:720}, { borderRadius: '100%', translate:rd, scale:rs, rotate:0}, { duration:1000, easing: 'easingQuadraticOut' }),
-			t4 = KUTE.to(bs[i], { scale: sc}, { duration:1000, easing: 'easingQuadraticIn' }),
-			t5 = KUTE.fromTo(bs[i], { translate:rd, borderRadius: '100%', scale:sc }, { translate:0, borderRadius: '0%', scale:1 }, { delay: 100, duration:1500, easing: 'easingBounceOut' }),
-			t6 = KUTE.to(bs[i], { backgroundColor: '#fff'}, { easing: 'easingCircularOut', delay: 550+i*50, duration:450, yoyo: true, repeat: 1, complete: fn });
-			
-		
-		// t6.start();
-		t1.start();
-		t1.chain(t2);
-		t2.chain(t3);
-		t3.chain(t4);
-		t4.chain(t5);
-		t5.chain(t6);
-
-	}	
-}
-function openTheAnimations() {
-	if (!/animating/.test(block.className)){
-		replay.style.display = 'none';
-		block.className += ' animating';
-	}
-}
-function closeTheAnimations() {
-	if (/animating/.test(block.className)){
-		replay.style.display = 'inline';
-		block.className = block.className.replace( ' animating', '');
-	}
-}
-
-function runAnimations() {
-	var t1 = KUTE.fromTo(block,{left:0},{left:150},{duration:1000, easing: 'easingCubicIn', start: openTheAnimations}).start(),
-		t2 = KUTE.fromTo(block,{left:150},{left:0},{duration:2500, easing: 'easingElasticOut', start: openTheAnimations}),
-		t3 = KUTE.fromTo(block,{rotateZ:0,rotateY:-10},{rotateZ:-20,rotateY:25},{duration:2500, easing: 'easingQuadraticInOut'}).start(),
-		t4 = KUTE.fromTo(block,{rotateZ:-20,rotateY:385},{rotateZ:0,rotateY:-10},{duration:3500, delay: 3600, easing: 'easingQuadraticInOut'});	
-
-	t1.chain(t2);
-	t3.chain(t4);
-
-	doBlockAnimations();
-}

demo/assets/js/minifill.js

@@ -1,359 +0,0 @@
-// Document
-if (!this.Document){this.Document = this.HTMLDocument; }
-
-// Element
-if (!window.HTMLElement) { window.HTMLElement = window.Element; }
-
-// Date.now
-if(!Date.now){ Date.now = function now() { return new Date().getTime(); }; }
-
-// performance.now
-(function(){
-	if ("performance" in window == false) {	window.performance = {}; }
-	
-	if ("now" in window.performance == false){	
-		var nowOffset = Date.now();
-		
-		window.performance.now = function now(){
-			return Date.now() - nowOffset;
-		}
-	}
-})();
-
-// Array.prototype.indexOf
-if (!Array.prototype.indexOf) {
-	Array.prototype.indexOf = function indexOf(searchElement) {
-		if (this === undefined || this === null) {
-			throw new TypeError(this + 'is not an object');
-		}
-	
-		var	arraylike = this instanceof String ? this.split('') : this,
-			length = Math.max(Math.min(arraylike.length, 9007199254740991), 0) || 0,
-			index = Number(arguments[1]) || 0;
-	
-		index = (index < 0 ? Math.max(length + index, 0) : index) - 1;
-	
-		while (++index < length) {
-			if (index in arraylike && arraylike[index] === searchElement) {
-				return index;
-			}
-		}
-	
-		return -1;
-	};
-}
-
-// getComputedStyle
-if (!('getComputedStyle' in window)) {
-	(function(){
-		function getComputedStylePixel(element, property, fontSize) {
-			
-			// Internet Explorer sometimes struggles to read currentStyle until the element's document is accessed.
-			var value = element.document && element.currentStyle[property].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/) || [0, 0, ''],
-				size = value[1],
-				suffix = value[2],
-				rootSize;
-	
-			fontSize = !fontSize ? fontSize : /%|em/.test(suffix) && element.parentElement ? getComputedStylePixel(element.parentElement, 'fontSize', null) : 16;
-			rootSize = property == 'fontSize' ? fontSize : /width/i.test(property) ? element.clientWidth : element.clientHeight;
-	
-			return suffix == '%' ? size / 100 * rootSize :
-				suffix == 'cm' ? size * 0.3937 * 96 :
-				suffix == 'em' ? size * fontSize :
-				suffix == 'in' ? size * 96 :
-				suffix == 'mm' ? size * 0.3937 * 96 / 10 :
-				suffix == 'pc' ? size * 12 * 96 / 72 :
-				suffix == 'pt' ? size * 96 / 72 :
-				size;
-		}
-	
-		function setShortStyleProperty(style, property) {
-			var	borderSuffix = property == 'border' ? 'Width' : '',
-				t = property + 'Top' + borderSuffix,
-				r = property + 'Right' + borderSuffix,
-				b = property + 'Bottom' + borderSuffix,
-				l = property + 'Left' + borderSuffix;
-	
-			style[property] = (style[t] == style[r] && style[t] == style[b] && style[t] == style[l] ? [ style[t] ] :
-							style[t] == style[b] && style[l] == style[r] ? [ style[t], style[r] ] :
-							style[l] == style[r] ? [ style[t], style[r], style[b] ] :
-							[ style[t], style[r], style[b], style[l] ]).join(' ');
-		}
-	
-		// <CSSStyleDeclaration>
-		function CSSStyleDeclaration(element) {
-			var style = this,
-			currentStyle = element.currentStyle,
-			fontSize = getComputedStylePixel(element, 'fontSize'),
-			unCamelCase = function (match) {
-				return '-' + match.toLowerCase();
-			},
-			property;
-	
-			for (property in currentStyle) {
-				Array.prototype.push.call(style, property == 'styleFloat' ? 'float' : property.replace(/[A-Z]/, unCamelCase));
-	
-				if (property == 'width') {
-					style[property] = element.offsetWidth + 'px';
-				} else if (property == 'height') {
-					style[property] = element.offsetHeight + 'px';
-				} else if (property == 'styleFloat') {
-					style.float = currentStyle[property];
-				} else if (/margin.|padding.|border.+W/.test(property) && style[property] != 'auto') {
-					style[property] = Math.round(getComputedStylePixel(element, property, fontSize)) + 'px';
-				} else if (/^outline/.test(property)) {
-					// errors on checking outline
-					try {
-						style[property] = currentStyle[property];
-					} catch (error) {
-						style.outlineColor = currentStyle.color;
-						style.outlineStyle = style.outlineStyle || 'none';
-						style.outlineWidth = style.outlineWidth || '0px';
-						style.outline = [style.outlineColor, style.outlineWidth, style.outlineStyle].join(' ');
-					}
-				} else {
-					style[property] = currentStyle[property];
-				}
-			}
-	
-			setShortStyleProperty(style, 'margin');
-			setShortStyleProperty(style, 'padding');
-			setShortStyleProperty(style, 'border');
-	
-			style.fontSize = Math.round(fontSize) + 'px';		
-		}
-		
-		CSSStyleDeclaration.prototype = {
-			constructor: CSSStyleDeclaration,
-			// <CSSStyleDeclaration>.getPropertyPriority
-			getPropertyPriority: function () {
-				throw new Error('NotSupportedError: DOM Exception 9');
-			},
-			// <CSSStyleDeclaration>.getPropertyValue
-			getPropertyValue: function (property) {
-				return this[property.replace(/-\w/g, function (match) {
-					return match[1].toUpperCase();
-				})];
-			},
-			// <CSSStyleDeclaration>.item
-			item: function (index) {
-				return this[index];
-			},
-			// <CSSStyleDeclaration>.removeProperty
-			removeProperty: function () {
-				throw new Error('NoModificationAllowedError: DOM Exception 7');
-			},
-			// <CSSStyleDeclaration>.setProperty
-			setProperty: function () {
-				throw new Error('NoModificationAllowedError: DOM Exception 7');
-			},
-			// <CSSStyleDeclaration>.getPropertyCSSValue
-			getPropertyCSSValue: function () {
-				throw new Error('NotSupportedError: DOM Exception 9');
-			}
-		};		
-	
-		// <Global>.getComputedStyle
-		window.getComputedStyle = function getComputedStyle(element) {
-			return new CSSStyleDeclaration(element);
-		};
-	})();
-}
-
-// requestAnimationFrame
-if (!window.requestAnimationFrame) {
-
-	var	lT = Date.now(); // lastTime
-	window.requestAnimationFrame = function (callback) {
-		'use strict';
-		if (typeof callback !== 'function') {
-			throw new TypeError(callback + 'is not a function');
-		}
-		
-		var	cT = Date.now(), // currentTime
-			dl = 16 + lT - cT; // delay
-
-		if (dl < 0) { dl = 0;	}
-
-		lT = cT;
-
-		return setTimeout(function () {
-			lT = Date.now();
-			callback(window.performance.now());
-		}, dl);
-	};
-
-	window.cancelAnimationFrame = function (id) {
-		clearTimeout(id);
-	};
-}
-
-
-// Event
-if (!window.Event||!Window.prototype.Event) {
-	(function (){
-		window.Event = Window.prototype.Event = Document.prototype.Event = Element.prototype.Event = function Event(t, args) {
-			if (!t) { throw new Error('Not enough arguments'); } // t is event.type
-			var ev, 
-				b = args && args.bubbles !== undefined ? args.bubbles : false,
-				c = args && args.cancelable !== undefined ? args.cancelable : false;
-			if ( 'createEvent' in document ) {
-				ev = document.createEvent('Event');			
-				ev.initEvent(t, b, c);
-			} else {
-				ev = document.createEventObject();		
-				ev.type = t;
-				ev.bubbles = b;
-				ev.cancelable = c;	
-			}
-			return ev;
-		};
-	})();
-}
-
-// CustomEvent
-if (!('CustomEvent' in window) || !('CustomEvent' in Window.prototype)) {
-	(function(){		
-		window.CustomEvent = Window.prototype.CustomEvent = Document.prototype.CustomEvent = Element.prototype.CustomEvent = function CustomEvent(type, args) {
-			if (!type) {
-				throw Error('TypeError: Failed to construct "CustomEvent": An event name must be provided.');
-			}
-			var ev = new Event(type, args);
-			ev.detail = args && args.detail || null;
-			return ev;
-		};
-		
-	})()
-}
-
-// addEventListener
-if (!window.addEventListener||!Window.prototype.addEventListener) {
-	(function (){
-		window.addEventListener = Window.prototype.addEventListener = Document.prototype.addEventListener = Element.prototype.addEventListener = function addEventListener() {
-			var	el = this, // element
-				t = arguments[0], // type
-				l = arguments[1]; // listener
-	
-			if (!el._events) {	el._events = {}; }
-	
-			if (!el._events[t]) {
-				el._events[t] = function (e) {
-					var	ls = el._events[e.type].list, evs = ls.slice(), i = -1, lg = evs.length, eE; // list | events | index | length | eventElement
-
-					e.preventDefault = function preventDefault() {
-						if (e.cancelable !== false) {
-							e.returnValue = false;
-						}
-					};
-	
-					e.stopPropagation = function stopPropagation() {
-						e.cancelBubble = true;
-					};
-	
-					e.stopImmediatePropagation = function stopImmediatePropagation() {
-						e.cancelBubble = true;
-						e.cancelImmediate = true;
-					};
-	
-					e.currentTarget = el;
-					e.relatedTarget = e.fromElement || null;
-					e.target = e.target || e.srcElement || el;
-					e.timeStamp = new Date().getTime();
-	
-					if (e.clientX) {
-						e.pageX = e.clientX + document.documentElement.scrollLeft;
-						e.pageY = e.clientY + document.documentElement.scrollTop;
-					}
-	
-					while (++i < lg && !e.cancelImmediate) {
-						if (i in evs) {
-							eE = evs[i];
-	
-							if (ls.indexOf(eE) !== -1 && typeof eE === 'function') {
-								eE.call(el, e);
-							}
-						}
-					}
-				};
-	
-				el._events[t].list = [];
-	
-				if (el.attachEvent) {
-					el.attachEvent('on' + t, el._events[t]);
-				}
-			}
-	
-			el._events[t].list.push(l);
-		};
-	
-		window.removeEventListener = Window.prototype.removeEventListener = Document.prototype.removeEventListener = Element.prototype.removeEventListener = function removeEventListener() {
-			var	el = this, t = arguments[0], l = arguments[1], i; // element // type  // listener // index
-
-			if (el._events && el._events[t] && el._events[t].list) {
-				i = el._events[t].list.indexOf(l);
-	
-				if (i !== -1) {
-					el._events[t].list.splice(i, 1);
-	
-					if (!el._events[t].list.length) {
-						if (el.detachEvent) {
-							el.detachEvent('on' + t, el._events[t]);
-						}
-						delete el._events[t];
-					}
-				}
-			}
-		};
-	})();
-}
-
-// Event dispatcher	/ trigger
-if (!window.dispatchEvent||!Window.prototype.dispatchEvent||!Document.prototype.dispatchEvent||!Element.prototype.dispatchEvent) {
-	(function(){	
-		window.dispatchEvent = Window.prototype.dispatchEvent = Document.prototype.dispatchEvent = Element.prototype.dispatchEvent = function dispatchEvent(e) {
-			if (!arguments.length) {
-				throw new Error('Not enough arguments');
-			}
-	
-			if (!e || typeof e.type !== 'string') {
-				throw new Error('DOM Events Exception 0');
-			}
-	
-			var el = this, t = e.type; // element | event type
-	
-			try {
-				if (!e.bubbles) {
-					e.cancelBubble = true;
-	
-					var cancelBubbleEvent = function (event) {
-						event.cancelBubble = true;
-	
-						(el || window).detachEvent('on' + t, cancelBubbleEvent);
-					};
-	
-					this.attachEvent('on' + t, cancelBubbleEvent);
-				}
-	
-				this.fireEvent('on' + t, e);
-			} catch (error) {
-				e.target = el;
-	
-				do {
-					e.currentTarget = el;
-	
-					if ('_events' in el && typeof el._events[t] === 'function') {
-						el._events[t].call(el, e);
-					}
-	
-					if (typeof el['on' + t] === 'function') {
-						el['on' + t].call(el, e);
-					}
-	
-					el = el.nodeType === 9 ? el.parentWindow : el.parentNode;
-				} while (el && !e.cancelBubble);
-			}
-	
-			return true;
-		};
-	})();
-}

demo/assets/js/perf.js

@@ -1,178 +0,0 @@
-//returns browser prefix
-function getPrefix() { 
-	var div = document.createElement('div'), i = 0,	pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
-		s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
-		
-	for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; }	}
-	div = null;
-}
-
-// generate a random number within a given range
-function random(min, max) {
-	return Math.random() * (max - min) + min;
-}
-
-// vendor prefix handle 
-var prefix = getPrefix(), // prefix
-	prefixRequired = (!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for transform
-	transformProperty = prefixRequired ? prefix + 'Transform' : 'transform';
-
-// the variables
-var container = document.getElementById('container'),
-	easing = 'easingQuadraticInOut',
-	tweens = [];
-		
-function createTest(count, property, engine, repeat, hack) {
-	for (var i = 0; i < count; i++) {
-		var tween,
-			div = document.createElement('div'),
-			windowHeight = document.documentElement.clientHeight - 10,
-			left = random(-200, 200),
-			toLeft = random(-200, 200),
-			top = Math.round(Math.random() * parseInt(windowHeight)),
-			background = 'rgb('+parseInt(random(0, 255))+','+parseInt(random(0, 255))+','+parseInt(random(0, 255))+')',
-			fromValues, toValues, fn = i===count-1 ? complete : null;
-			repeat = parseInt(repeat);
-			
-		div.className = 'line';
-		div.style.top =  top + 'px';
-		div.style.backgroundColor = background;
-		
-		if (property==='left') {
-			div.style.left = left + 'px';
-			if (hack) { div.className += ' hack'; }
-			fromValues = engine==="tween" ? { left: left, div: div } : { left: left };
-			toValues = { left: toLeft }
-		} else {
-			div.style[transformProperty] = 'translate3d('+left + 'px,0px,0px)';
-			if (engine==="kute"){
-				fromValues = { translateX: left }
-				toValues = { translateX: toLeft }
-			} else if ((engine==="gsap") || (engine==="tween")) {
-				fromValues = engine==='gsap' ? { x: left } : { x: left, div : div }
-				toValues = { x: toLeft }				
-			}
-		}
-		
-		container.appendChild(div);
-	
-		// perf test
-		if (engine==='kute') {
-			tween = KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn });
-			tweens.push(tween);
-		} else if (engine==='gsap') {
-			if (property==="left"){
-           		tween = TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });							
-			} else {
-          		tween = TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });							
-			}
-		} else if (engine==='tween') {
-			var update; 			
-			
-			if (property==="left"){
-				update = function(){
-					this.div.style['left'] = this.left+'px';
-				}					
-			} else if (property==="translateX"){
-				update = function(){
-					this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
-				}
-			}			
-			
-			tween = new TWEEN.Tween(fromValues)
-				.to(toValues,1000)
-				.easing( TWEEN.Easing.Quadratic.InOut )
-				.onComplete( complete )
-				.onUpdate( update)
-				.repeat(repeat)
-				.yoyo(true);
-			tweens.push(tween);		
-		}
-	}
-	if (engine==='tween') {
-		animate();
-		function animate( time ) {
-			requestAnimationFrame( animate );
-			TWEEN.update( time );
-		}
-	}	
-	
-	// since our engines don't do sync, we make it our own here
-	if (engine==='tween'||engine==='kute') {
-		var now = window.performance.now();
-		for (var t =0; t<count; t++){
-			tweens[t].start(now+count/16)
-		}	
-	}
-}
-
-function complete(){
-	document.getElementById('info').style.display = 'block';
-	container.innerHTML = '';
-	tweens = [];
-}
-
-//some button toggle 
-var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length;
-
-for (var i=0; i<l; i++) {
-	var g = btnGroups[i], links = g.querySelectorAll('a'), ll = links.length; 
-	for (var j=0; j<ll; j++) {
-		links[j].onclick = function() {
-			var link = this, b = link.parentNode.parentNode.parentNode.querySelector('.btn');
-			b.innerHTML = link.id.toUpperCase() + ' <span class="caret"></span>';
-			b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
-			if ( /LEFT/.test(document.getElementById('property').querySelector('.btn').innerHTML) ) {
-				document.getElementById('hack').style.display = 'block';
-			} else {
-				document.getElementById('hack').style.display = 'none';
-			}
-		}
-	}
-}
-
-document.getElementById('hack').querySelector('.btn').onclick = function(){
-	var self= this;
-	setTimeout(function(){
-		if ( !self.querySelector('INPUT').checked ) {
-			self.className = self.className.replace('btn-info','btn-warning');			
-			self.querySelector('.state').innerHTML = 'Hack ON';
-		} else if ( self.querySelector('INPUT').checked ) {
-			self.className = self.className.replace('btn-warning','btn-info');
-			self.querySelector('.state').innerHTML = 'Hack OFF';
-		}		
-	},200)
-}
-
-// the start  button handle
-document.getElementById('start').onclick = function(){
-	var c = document.querySelector('[data-count]'),	e = document.querySelector('[data-engine]'), r = document.querySelector('[data-repeat]'),
-		p = document.querySelector('[data-property]'),	ct = c && document.querySelector('[data-count]').getAttribute('data-count'), 
-		count = ct ? parseInt(ct) : null,
-		engine = e && document.querySelector('[data-engine]').getAttribute('data-engine') || null,
-		repeat = r && document.querySelector('[data-repeat]').getAttribute('data-repeat') || null,
-		property = p && document.querySelector('[data-property]').getAttribute('data-property') || null,
-		hack = document.getElementById('hack').getElementsByTagName('INPUT')[0].getAttribute('checked') ? true : false,
-		warning = document.createElement('DIV');
-		
-	warning.className = 'text-warning padding lead';
-	container.innerHTML = '';	
-	if (count && engine && property && repeat) {
-		document.getElementById('info').style.display = 'none';
-		
-		createTest(count,property,engine,repeat,hack);
-	} else {
-
-		if (!count && !property && !repeat && !engine){
-			warning.innerHTML = 'We are missing all the settings here.';
-		} else {
-			warning.innerHTML = 'Now missing<br>';
-			warning.innerHTML += !engine ? '- engine<br>' : ''; 
-			warning.innerHTML += !property ? '- property<br>' : '';
-			warning.innerHTML += !repeat ? '- repeat<br>' : ''; 
-			warning.innerHTML += !count ? '- count<br>' : ''; 
-		}
-		
-		container.appendChild(warning);
-	}
-}

demo/assets/js/prism.js

@@ -1,6 +0,0 @@
-/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var l=r[e];if(2==arguments.length){a=arguments[1];for(var i in a)a.hasOwnProperty(i)&&(l[i]=a[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==n)for(var i in a)a.hasOwnProperty(i)&&(o[i]=a[i]);o[s]=l[s]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,n,a){for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}},plugins:{},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),l=0;a=r[l++];)t.highlightElement(a,e===!0,n)},highlightElement:function(n,a,r){for(var l,i,o=n;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1],i=t.languages[l]),n.className=n.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=n.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var s=n.textContent,u={element:n,language:l,grammar:i,code:s};if(!s||!i)return t.hooks.run("complete",u),void 0;if(t.hooks.run("before-highlight",u),a&&_self.Worker){var g=new Worker(t.filename);g.onmessage=function(e){u.highlightedCode=e.data,t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)},g.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=t.highlight(u.code,u.grammar,u.language),t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(n),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)},highlight:function(e,a,r){var l=t.tokenize(e,a);return n.stringify(t.util.encode(l),r)},tokenize:function(e,n){var a=t.Token,r=[e],l=n.rest;if(l){for(var i in l)n[i]=l[i];delete n.rest}e:for(var i in n)if(n.hasOwnProperty(i)&&n[i]){var o=n[i];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),P=[p,1];b&&P.push(b);var A=new a(i,g?t.tokenize(m,g):m,h);P.push(A),w&&P.push(w),Array.prototype.splice.apply(r,P)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var l={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}t.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code,l=n.immediateClose;_self.postMessage(t.highlight(r,t.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[^\s>\/=.]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
-Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\w\W]*?>)[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
-Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
-Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;

demo/assets/js/scripts.js

@@ -1,14 +0,0 @@
-// common demo JS
-
-function getRandomInt(min, max) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-//scroll top?
-var toTop = document.getElementById('toTop');
-toTop.addEventListener('click',topHandler,false);
-
-function topHandler(e){
-	e.preventDefault(); 
-	KUTE.to( 'window', { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500  } ).start();
-}

demo/examples.html

@@ -1,499 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
-<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
-<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
-
-<!--[if gte IE 10 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="KUTE.js is a minimal Javascript animation engine">
-    <meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
-    <meta name="author" content="dnp_theme">
-    <link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
-
-    <title>KUTE.js Examples | Javascript Animation Engine</title>
-	
-    <!-- RESET CSS -->
-    <link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
-	
-    <!-- DEMO KUTE CSS -->
-    <link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
-
-	<!-- Ion Icons -->
-    <link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
-		
-	<!-- Synthax highlighter -->
-	<link href="./assets/css/prism.css" rel="stylesheet">
-	
-	<!-- legacy browsers support via polyfill 
-	<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
-	<!--[if IE]>
-		<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
-		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-	<![endif]-->
-</head>
-
-<body>
-  <div class="fill overlay"></div>
-  
-  <div class="site-wrapper">
- 
-	<div class="navbar-wrapper">
-      <div class="content-wrap">
-		<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
-		<ul class="nav">
-			<li><a href="features.html">Features</a></li>
-			<li class="active"><a href="examples.html">Examples</a></li>
-			<li><a href="api.html">API</a></li>
-			<li><a href="about.html">About</a></li>
-		</ul>
-      </div>
-    </div>
-
-	<div class="content-wrap">
-		<h2>Quick Examples</h2>
-		<p>KUTE.js can be used in most cases with native Javascript, but also with jQuery. So, before we head over to the more advanced examples, let's have a quick look at these two basic examples here. <strong>Note</strong>: the examples are posted on <a href="http://codepen.io/thednp/pens/public/" target="_blank">codepen</a>.</p>
-		
-		<h3>Basic Native Javascript Example</h3>
-		<p>When developing with native Javascript, a very basic syntax goes like this:</p>
-
-<pre>
-<code class="language-javascript">// this is the tween object, basically KUTE.method(element, from, to, options);
-var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});</code>
-</pre>
-
-		<p>Now the tween object is created, it's a good time for you to know that via Native Javascript we <strong>always</strong> animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements such as <code>querySelectorAll()</code> or <code>getElementsByTagName()</code>, you need to do a <code>for ()</code> loop. Now let's apply the tween control methods:</p>
-<pre><code class="language-javascript">tween.start(); // starts the animation
-tween.stop(); // stops current tween and all chained tweens animating
-tween.pause(); // pauses current tween animation
-tween.play(); // or tween.resume(); resumes current tween animation
-tween.chain(tween2); // when tween animation finished, you can trigger the start of another tween
-</code></pre>
-		<p>The demo for the above example is  <a href="http://codepen.io/thednp/pen/Bozbgg" target="_blank">here</a>.</p>
-		
-		<h3>Basic jQuery Example</h3>
-		<p>KUTE.js includes a jQuery plugin to help you easily implement KUTE.js in your jQuery applications. When using jQuery, the syntax is familiar but works a bit different than plain Javascript due to jQuery's specific code standards. Let's have a look:</p>
-<pre><code class="language-javascript">// this is the tween object, basically $('selector').KUTE(method, from, to, options);
-var tween = $('selector').KUTE('fromTo', {top: 20}, {top: 100}, {yoyo: true});
-</code></pre>
-		<p>We mentioned that the KUTE jQuery plugin is different, and here's why: the above code creates an <code>Array</code> of objects for each <code>HTML</code> element of chosen selector, while the Native Javascript creates a single object. For these objects we can now apply the tween control methods as follows:</p>
-<pre><code class="language-javascript">$(tween).KUTE('start'); // starts the animation
-$(tween).KUTE('stop'); // stops current tween and all chained tweens animating
-$(tween).KUTE('pause'); // pauses current tween animation
-$(tween).KUTE('play'); // or $(myTween).KUTE('resume'); resumes current tween animation
-$(tween).KUTE('chain',myTween2); // when tween animation finished, you can trigger the start of another tween
-</code></pre>
-		<p>The demo for the above example is <a href="http://codepen.io/thednp/pen/dYXLyj" target="_blank">here</a>.</p>
-		
-		<h2>Transform Properties Examples</h2>
-		<p>KUTE.js supports almost all about <code>transform</code> as described in the <a href="http://www.w3.org/TR/css3-transforms/" target="_blank">spec</a>: the 2D <code>translate</code>, <code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code>, as well as the 3D <code>translateX</code>, <code>translateY</code>, <code>translateZ</code>, <code>translate3d</code>, <code>rotateX</code>, <code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> properties. Additionally it allows you to set a <code>perspective</code> for the element or it's parent as well as a <code>perpective-origin</code> for the element or it's parent.</p>
-		
-		<h3>Translations</h3>
-		<p>In the next example the first box is moving to left 250px with <code>translate</code> property, the second box is moving to the right by 200px using <code>translateX</code> and the third box is moving to the bottom using <code>translate3d</code>. The last box also uses <code>translate3d</code> but requires a <code>perspective</code> value for the animation on the Z axis to be effective.</p>
-<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{translate:0},{translate:-250}); // or translate:[x,y] for both axis
-var tween2 = KUTE.fromTo('selector2',{translateX:0},{translateX:200});
-var tween3 = KUTE.fromTo('selector3',{translate3d:[0,0,0]},{translate3d:[0,100,0]});
-var tween4 = KUTE.fromTo('selector4',{translate3d:[0,0,0]},{translate3d:[0,0,-100]},{parentPerspective: 100});
-</code></pre>
-		<p>And here is how it looks like:</p>
-		<div class="featurettes">
-			<div data-property-translate="170" class="example-item example-box bg-indigo">2D</div>
-			<div data-property-translate-x="-170" class="example-item example-box bg-olive">X</div>
-			<div data-property-translate3d="[0,170,0]" class="example-item example-box bg-pink">Y</div>
-			<div data-property-translate3d="[0,0,-100]" data-option-parent-perspective="200" class="example-item example-box bg-red">Z</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-blue" href="#">Start</a>	
-			</div>
-		</div>
-		
-		<p>As you can see in your browsers console, for all animations <code>translate3d</code> is used, as explained in the <a href="features.html">features page</a>. Also the first example that's using the 2D <code>translate</code> for both vertical and horizontal axis even if we only set X axis. You can download this example <a href="http://codepen.io/thednp/share/zip/rOLbyY">here</a>.</p>
-		<p><strong>Remember</strong>: stacking <code>translate</code> and <code>translate3d</code> together may not work and IE9 does not support <code>perspective</code>.</p>
-		
-		<h3>Rotations</h3>
-		<p>Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support <code>rotate3d</code>.</p>
-<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{rotate:0},{rotate:-720});
-var tween2 = KUTE.fromTo('selector2',{rotateX:0},{rotateX:200});
-var tween3 = KUTE.fromTo('selector3',{rotateY:0},{rotateY:160},{perspective:100});
-var tween4 = KUTE.fromTo('selector4',{rotateZ:0},{rotateZ:360});
-</code></pre>		
-		<p>And here is how it looks like:</p>
-		<div class="featurettes">
-			<div data-property-rotate="-720" class="example-item example-box bg-blue">2D</div>
-			<div data-property-rotate-x="180" class="example-item example-box bg-indigo">X</div>
-			<div data-property-rotate-y="-180" data-option-perspective="200" class="example-item example-box bg-olive">Y</div>
-			<div data-property-rotate-z="360" class="example-item example-box bg-pink">Z</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-green" href="#">Start</a>	
-			</div>
-		</div>
-		<p>The <code>rotateX</code> and <code>rotateY</code> are 3D based rotations, so they require a perspective in order to make the browser render proper 3D layers, but in the example they animate different because only the second, Y axis, uses a <code>perspective</code> setting. The rotation on Z axis does not require a perspective. Unlike translations, you can stack all axis rotation for your animation, but we will see that in a later example. You can download this example <a href="http://codepen.io/thednp/share/zip/NGrmMR">here</a>.</p>
-				
-		<h3>Skews</h3>
-		<p>KUTE.js supports <code>skewX</code> and <code>skewY</code> so let's animate the two. Since they are 2D transformations, IE9 supports skews.</p>
-<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
-var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});
-</code></pre>		
-		
-		<p>And here is how it looks like:</p>
-		<div class="featurettes">
-			<div data-property-skew-x="-25" class="example-item example-box bg-teal">X</div>
-			<div data-property-skew-y="25" class="example-item example-box bg-green">Y</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-yellow" href="#">Start</a>	
-			</div>
-		</div>
-		<p>You can download this example <a href='http://codepen.io/thednp/share/zip/wKWbKd/'>here</a>.</p>
-				
-		<h3>Mixed Transformations</h3>
-		<p>The current specification does not support animating different transform properties with multiple tween objects at the same time, you must stack them all together into a single object. See the example below:</p>
-
-<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
-var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
-</code></pre>		
-		<p>If you check the <a href="http://codepen.io/thednp/pen/avZrYo" target="_blank">test here</a>, you will notice that only the <code>skewY</code> is going to work and no rotation. Now let's do this properly.</p>
-
-<pre><code class="language-javascript">var tween1 = KUTE.fromTo(
-	'selector1', // element
-	{translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
-	{translateX:250, rotateX:360, rotateY:15, rotateZ:5}, // to
-	{perspective:400, perspectiveOrigin: 'center top'} // trasform options
-);
-var tween2 = KUTE.fromTo(
-	'selector2', // element
-	{translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from values
-	{translateX:-250, rotateX:360, rotateY:15, rotateZ:5}, // to values
-	{parentPerspective:400, parentPerspectiveOrigin: 'center top'} // trasform options
-);
-</code></pre>
-		<p>Now you can see we are using the specific transform options, the first tween object uses these settings for an element and the second for its parent.</p>
-
-		<div class="featurettes">
-			<div data-property-translate-x="200" data-property-rotate-x="360" data-property-rotate-y="15" data-property-rotate-z="5" data-option-perspective="400" class="example-item example-box bg-pink" style="line-height: 50px; font-size: 25px;">element perspective 400px</div>
-			<div data-property-translate-x="-200" data-property-rotate-x="360" data-property-rotate-y="15"  data-property-rotate-z="5" data-option-parent-perspective="400" class="example-item example-box bg-orange" style="line-height: 50px; font-size: 25px;">parent perspective 400px</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-olive" href="#">Start</a>	
-			</div>
-		</div>
-		
-		<p>This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example <a href='http://codepen.io/thednp/share/zip/jbrovv/'>here</a>.</p>
-		
-		<h3>Chained Transformations</h3>
-		<p>I'm gonna insist on the tween chaining feature a bit because when we run animations one after another we are kinda expecting a certain degree of continuity. As explained before, the best solution is the <code>.to()</code> method because it has the ability to <strong>stack</strong> properties found in the element's inline styling, mostly from previous tween animation, and use them as start values for the next tween. It also transfers unchanged values to values end for that same reason. OK now, let's see a side by side comparison with 3 elements:</p>
-		<div id="chainedTweens" class="featurettes">
-			<div class="example-item example-box bg-gray" style="font-size: 30px">FROMTO</div>
-			<div class="example-item example-box bg-olive" style="font-size: 30px">FROMTO</div>
-			<div class="example-item example-box bg-indigo" style="font-size: 30px">TO</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-blue" href="#">Start</a>	
-			</div>
-		</div>		
-		<p>What's this all about?</p>
-		<ul>		
-			<li>the first box uses a regular <code class="bg-gray">.fromTo()</code> object, we are doing things normally, we would expect them to work properly but due to the nature of the transforms, this is what it does</li>		
-			<li>the second box is also using <code class="bg-olive">.fromTo()</code> object, but using proper values for all tweens at all times, so we fixed that glitch</li>		
-			<li>and the last box uses the <code class="bg-indigo">.to()</code> method, and does the chaining easier for most properties, especially for <code>transform</code></li>		
-		</ul>		
-		
-		<p>When coding transformation chains I would highly recommend:</p>
-		<ul>
-			<li>keep the same order of the transform properties, best would be: translation, rotation, skew and scale; an example of the difference shown <a href="http://jsfiddle.net/nvy26bgb/" target="_blank">here</a> for rotations and <a href="http://jsfiddle.net/nvy26bgb/1/" target="_blank">here</a> for rotations and skew;</li>
-			<li>2D and 3D translations would work best in if you provide a value at all times; eg. <code>translate:[x,y]</code> and <code>translate3d:[x,y,z]</code>; for instance using <code>translate:150</code> or <code>translateX:150</code> would mean that all other axis are 0;</li>
-			<li>on larger amount of elements animating chains, the <code>.fromTo()</code> method is fastest, so you will have more work, but can potentially minimize or eliminate any syncronization issues that may occur, as explained in the <a href="features.html">features page</a>;</li>
-			<li>download this example <a href='http://codepen.io/thednp/share/zip/PPWZRL/'>here</a>.</li>
-		</ul>
-
-		<h2>Border Radius</h2>
-		<p>In the example below we are doing some animation on the <code>border-radius</code> property. The first box animates all corners, while the other boxes animate each corner at a time. A quick reminder, for radius properties KUTE.js supports <code>px</code>, <code>%</code> and text properties' units such as <code>em</code> or <code>rem</code>.</p>
-<pre><code class="language-javascript">KUTE.to('selector1',{borderRadius:'100%'}).start();
-KUTE.to('selector2',{borderTopLeftRadius:'100%'}).start();
-KUTE.to('selector3',{borderTopRightRadius:'100%'}).start();
-KUTE.to('selector4',{borderBottomLeftRadius:'100%'}).start();
-KUTE.to('selector5',{borderBottomRightRadius:'100%'}).start();
-</code></pre>		
-
-		<p>And here is how it looks like:</p>
-
-		<div class="featurettes">
-			<div data-property-border-radius="80" class="example-item example-box bg-red">ALL</div>
-			<div data-property-border-top-left-radius="150" class="example-item example-box bg-pink">TL</div>
-			<div data-property-border-top-right-radius="150" data-option-perspective="200" class="example-item example-box bg-olive">TR</div>
-			<div data-property-border-bottom-left-radius="150" class="example-item example-box bg-indigo">BL</div>
-			<div data-property-border-bottom-right-radius="150" class="example-item example-box bg-blue">BR</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-green" href="#">Start</a>	
-			</div>
-		</div>
-		
-		<p>A quick important reminder here is that KUTE.js does not support shorthands for radius properties. Also early implementations by Mozilla's Firefox browser like <code>-moz-border-radius-topleft</code> are not supported because they were depracated with later versions. Download this example <a href='http://codepen.io/thednp/share/zip/VvpypW/'>here</a>.</p>			
-	
-		<h2>Box Model Properties</h2>
-		<p>While KUTE.js supports almost all the box model properties, the next example will animate most common properties, we will focus mostly on size, spacing and position. Other properties such as <code>minWidth</code> or <code>maxHeight</code> require a more complex context and we won't insist on them.</p>
-<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{width:200});
-var tween2 = KUTE.to('selector1',{height:300});
-var tween3 = KUTE.to('selector1',{left:250});
-var tween4 = KUTE.to('selector1',{top:100});
-var tween5 = KUTE.to('selector1',{padding:'5%'});
-</code></pre>
-		<p>We're gonna chain these tweens and start the animation. You can download this example <a href='http://codepen.io/thednp/share/zip/xwqYbX/'>here</a>.</p>		
-		<div id="boxModel" class="featurettes">
-			<div class="example-item example-box bg-lime" style="line-height: 75px; font-size:30px">BOX MODEL</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-orange" href="#">Start</a>	
-			</div>
-		</div>		
-		
-		
-		<p>TIP: the <code>width</code> and <code>height</code> properties used together can be great for <code>scale</code> animation fallback on images for legacy browsers.</p>
-		
-		<h2>Text Properties</h2>
-		<p>OK here we're gonna do a cool example for text properties. Basically the below code would work:</p>
-<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{fontSize:'200%'});
-var tween2 = KUTE.to('selector1',{line-height:24});
-var tween3 = KUTE.to('selector1',{letter-spacing:50});
-</code></pre>
-		<p>But our example will feature some more than just that. We're gonna animate each character of a given string, with a small delay. The heading will animate <code>fontSize</code> and <code>letterSpacing</code> properties for each character while the button will animate <code>fontSize</code> and <code>lineHeight</code> properties. Watch this:</p>		
-		
-		<div id="textProperties" class="featurettes" style="min-height: 150px">
-			<h1 class="example-item">Howdy!</h1>
-			<a href="javascript:void(0)" class="example-item btn btn-red">Button</a>
-				
-			<div class="example-buttons">
-				<a class="btn btn-pink" href="javascript:void(0)">Start</a>	
-			</div>
-		</div>
-		<p>TIP: this should also work in IE8 as a fallback for scale animation for text. It's not perfect, can be improved for sure, but if it's a must, this would do. Download this example <a href='http://codepen.io/thednp/share/zip/bVqLpb/'>here</a>.</p>
-
-		<h2>Color Properties</h2>
-		<p>The next example is about animating color properties. As for example, check these lines for reference.</p>
-<pre><code class="language-javascript">KUTE.to('selector1',{color:'#069'}).start();
-KUTE.to('selector1',{backgroundColor:'#069'}).start();
-KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
-KUTE.to('selector1',{borderTopColor:'#069'}).start();
-KUTE.to('selector1',{borderRightColor:'rgba(25,25,25,0.25)'}).start();
-KUTE.to('selector1',{borderBottomColor:'#069'}).start();
-KUTE.to('selector1',{borderLeftColor:'#069'}).start();
-</code></pre>
-		<p>Let's get some animation going. Download the example <a href='http://codepen.io/thednp/share/zip/OypvNR/'>here</a>.</p>		
-		
-		<div id="colBox" class="featurettes">
-			<div class="example-item example-box bg-olive" style="width: 135px; height: 135px; border:15px solid #9C27B0; line-height: 105px; font-size:30px">Colors</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-blue" href="#">Start</a>	
-			</div>
-		</div>
-
-		<p>A quick reminder: you can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on IE8 and it will fallback to <code>RGB</code>.</p>	
-
-		<h2>Clip Property</h2>
-		<p>This property allows you to animate the rectangular shape of an element that is set to <code>position:absolute</code>. In CSS this property works like this <code>clip: rect(top,right,bottom,left)</code> forming a rectangular shape that masks an element making parts of it invisible.</p>
-<pre><code class="language-javascript">KUTE.to('selector',{clip:[0,150,100,0]}).start();</code></pre>
-		<p>A quick example here could look like this:</p>
-		
-		<div id="clip" class="featurettes" style="min-height: 190px">
-			<div class="example-item example-box bg-red" style="position: absolute; background: url('http://img.dummy-image-generator.com/people/dummy-250x250-Eye.jpg') center center no-repeat;"></div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-olive" href="#">Start</a>	
-			</div>
-		</div>
-		<p><strong>Note</strong> that this would produce no effect for elements that have <code>overflow:visible</code> style rule. Download this example <a href='http://codepen.io/thednp/pen/NGpYmM/'>here</a>.</p>	
-
-		<h2>Background Position</h2>
-		<p>Another property we can animate with KUTE.js is <code>backgroundPosition</code>. Quick example:</p>
-<pre><code class="language-javascript">KUTE.to('selector1',{backgroundPosition:[0,50]}).start();</code></pre>
-		<p>A working example would look like this:</p>
-		
-		<div id="bgPos" class="featurettes">
-			<div class="example-item example-box" style="background: url('http://img.dummy-image-generator.com/abstract/dummy-400x300-Rope.jpg') center center no-repeat;"></div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-lime" href="#">Start</a>	
-			</div>
-		</div>		
-		<p>Download this example <a href='http://codepen.io/thednp/share/zip/EVWEwJ/'>here</a>.</p>
-		
-		<h2>Vertical Scrolling</h2>
-		<p>Another property we can animate with KUTE.js is <code>scrollTop</code>. I works for both the window and any scrollable object. Quick example:</p>
-<pre><code class="language-javascript">KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
-KUTE.to('window',{scroll:450}).start(); // for the window
-</code></pre>
-		<p>A working example would work like <a href="http://codepen.io/thednp/pen/bVqKmp/" target="_blank">this</a>. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.</p>
-		
-		
-		<h2 id="crossbrowser">Cross Browser Animation Example</h2>
-		<p>Unlike the examples <a href="http://codepen.io/thednp/pens/public/" target="_blank">hosted on Codepen</a>, most examples here should be supported on legacy browsers. The next example is going to explain more details about how to target browsers according to their supported properties, so stick around. So, if your target audience uses legacy browsers in a significant percent, check to have the proper polyfills and also make sure you target your browsers, here's a <a href="http://browserhacks.com/" target="_blank">complete reference</a>.  Now we are ready:</li>
-		</ul>
-		<h3>Collect Information And Cache It</h3>
-<pre><code class="language-javascript">// grab an HTML element to build a tween object for it 
-var element = document.getElementById("myElement");
-
-// check for IE legacy browsers
-var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false;
-var isIE8 = isIE === 8;
-var isIE9 = isIE === 9;
-
-
-// most browsers have specific checks, so make sure 
-// you include all you need for your target audience
-
-</code></pre>
-		<h3>Define Properties And Options Objects</h3>
-<pre><code class="language-javascript">// create values and options objects
-var startValues = {};
-var endValues = {};
-var options = {};
-
-// here we define properties that are commonly supported
-startValues.opacity = 1;
-endValues.opacity = 0.2;
-startValues.backgroundColor = '#CDDC39'; 
-endValues.backgroundColor = '#ec1e71';
-
-// here we define the properties according to the target browsers
-if (isIE8) { // or any other browser that doesn"t support transforms		
-	startValues.left = 0;
-	endValues.left = 250;
-} else if (isIE9) { // or any other browser that only support 2d transforms
-	startValues.translate = 0; // 2d translate on X axis
-	endValues.translate = 250;
-	startValues.rotate = -180; // 2d rotation on Z axis
-	endValues.rotate = 0;
-	startValues.scale = 1; // 2d scale
-	endValues.scale = 1.5;
-} else { // most modern browsers
-	startValues.translate3d = [0,0,0]; //3d translation on X axis
-	endValues.translate3d = [250,0,0];				
-	startValues.rotateZ = -180; // 3d rotation on Z axis
-	endValues.rotateZ = 0;
-	startValues.rotateX = -20; // 3d rotation on X axis
-	endValues.rotateX = 0;				
-	startValues.scale = 1; // 2d scale
-	endValues.scale = 1.5;
-	options.perspective = 400; // 3d transform option
-}
-
-// common tween options
-options.easing = "easingCubicOut";
-options.duration = 2500;
-options.yoyo = true;
-options.repeat = 1;
-</code></pre>
-
-		<h3>Build Tween Object And Tween Controls</h3>
-<pre><code class="language-javascript">// the cached object
-var myTween = KUTE.fromTo(element, startValues, endValues, options);
-
-// trigger buttons
-var startButton = document.getElementById('startButton'),
-	stopButton = document.getElementById('stopButton'),
-	playPauseButton = document.getElementById('playPauseButton');
-
-// add handlers for the trigger buttons
-startButton.addEventListener('click', function(e){
-	e.preventDefault();
-	if (!myTween.playing) { myTween.start(); } // only start the animation if hasn't started yet
-}, false);
-stopButton.addEventListener('click', function(e){
-	e.preventDefault();
-	if (myTween.playing) { myTween.stop(); } // only stop the animation if there is any
-}, false);
-playPauseButton.addEventListener('click', function(e){
-	e.preventDefault();	
-	if (!myTween.paused && myTween.playing) { 
-		myTween.pause(); playPauseButton.innerHTML = 'Resume';
-	} else { 
-		myTween.resume(); 
-		playPauseButton.innerHTML = 'Pause';
-	}  
-}, false);
-</code></pre>
-		<h3>Live Demo</h3>
-		<div class="featurettes" id="crossBrowser">
-			<div id="myElement" class="example-item example-box bg-yellow">
-				
-			</div>
-			<div class="example-buttons">
-				<a id="playPauseButton"  class="btn btn-orange" href="#">Pause</a>
-				<a id="startButton" class="btn btn-blue" href="#">Start</a>
-				<a id="stopButton" class="btn btn-red" href="#">Stop</a>
-			</div>
-		</div>
-		<p>Let's explain this code a bit. KUTE.js gives you the internal variables <code>myTween.playing</code> and <code>myTween.paused</code> (both true/false) to help you easily manage the tween control methods all together as in this example here. As said before, KUTE.js version 0.9.5 doesn't stat animating by default, for all the examples on this page you have to start it yourself, unlike their versions hosted on Codepen.</p>
-		<ul>
-			<li>the <code class="bg-blue">START</code> button will use the <code>.start()</code> method and the animation starts;</li>
-			<li>the <code class="bg-red">STOP</code> button will use the <code>.stop()</code> method and stops the animation; after this the, animation can only be started again</li>
-			<li>the <code class="bg-orange">PAUSE</code> button will use the <code>.pause()</code> method and pauses the animation; this also changes the button's text and functionality;</li>
-			<li>the <code class="bg-olive">RESUME</code> button will use the <code>.resume()</code> method and resumes the animation; this reverses the button's initial state;</li>
-			<li>make sure you work with the conditions properly when you want to pause an animation you MUST check both <code>!myTween.playing</code> and <code>myTween.paused</code> conditions because you could end up with errors.</li>			
-		</ul>
-        
-		<h2>Tween Object Collections</h2>
-		<p>With KUTE.js 1.0.1 we introduced new tween object constructor methods, they allow you to create a tween object for each element in a collection, a very handy way to ease and speed up the animation programing workflow. Let's have a little fun.</p>
-<pre><code class="language-javascript">// a simple .to() for a collection of elements would look like this
-var myMultiTween1 = KUTE.allTo('selector1',{translate:[0,150]});
-
-// or a more complex .fromTo() example with the two new options
-var myMultiTween2 = KUTE.allFromTo(
-    'selector2',
-    {translate:[0,0], rotate: 0}, 
-    {translate:[0,150], rotate: 360}, 
-    {transformOrigin: '10% 10%', offset: 200 }
-);
-
-</code></pre>
-		<p>And should looks like this:</p>
-		<div class="featurettes">
-			<div class="example-item example-box example-multi bg-indigo">K</div>
-			<div class="example-item example-box example-multi bg-olive">U</div>
-			<div class="example-item example-box example-multi bg-pink">T</div>
-			<div class="example-item example-box example-multi bg-red">E</div>
-				
-			<div class="example-buttons">
-				<a class="btn btn-green" onclick="startMultiTween();" href="#">Start</a>	
-			</div>
-		</div>
-		<p>As you can see, we also used the new tween options <code>offset</code> and <code>transformOrigin</code> and they make it so much more easy.</p>
-		<ul id="share" class="nav">
-			<li>Share </li>
-			<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute.js animation engine by @thednp and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
-		</ul>		
-	</div>
-
-      <!-- FOOTER -->
-     <footer>
-		<div class="content-wrap">
-			<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
-			<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
-		</div>
-    </footer>
-
- </div><!-- /.site-wrapper -->
- 
-
-
-<!-- JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->	
-
-<!-- highlighter -->
-<script src="./assets/js/prism.js" type="text/javascript"></script>
-
-<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script>  KUTE CDN -->
-<script src="./src/kute.js"></script> <!-- some stuff -->
-<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
-<script src="./assets/js/examples.js"></script> <!-- examples stuff -->
-</body>
-</html>

demo/features.html

@@ -1,223 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
-<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
-<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
-
-<!--[if !IE ]><!--> <html lang="en"> <!--<![endif]-->
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="KUTE.js is a minimal Javascript animation engine">
-    <meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
-    <meta name="author" content="dnp_theme">
-    <link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
-
-    <title>KUTE.js Features | Javascript Animation Engine</title>
-	
-    <!-- RESET CSS -->
-    <link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
-	
-    <!-- DEMO KUTE CSS -->
-    <link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
-	
-	<!-- Ion Icons -->
-    <link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
-
-	<!-- legacy browsers support via polyfill 
-	<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
-	<!--[if IE]>
-		<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
-		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-	<![endif]-->
-
-</head>
-
-<body>
-  <div class="fill overlay"></div>
-  
-  <div class="site-wrapper">
- 
-	<div class="navbar-wrapper">
-      <div class="content-wrap">
-		<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
-		<ul class="nav">
-			<li class="active"><a href="features.html">Features</a></li>
-			<li><a href="examples.html">Examples</a></li>
-			<li><a href="api.html">API</a></li>
-			<li><a href="about.html">About</a></li>
-		</ul>
-      </div>
-    </div>
-
-	<div class="content-wrap">
-		<h2 id="performance">Badass Performance</h2>
-		<p>KUTE.js was developed with best practices in mind for <strong>fastest code execution</strong> and <strong>memory efficiency</strong>, but performance varies from case to case, as well as for all the other Javascript based animation engines. As a quick note on <a href="about.html#how">how it works</a>, well for the most part values are cached for the entire duration of the animation so that the repetitive tasks run smoothly, uninterruptible and avoid layout thrashing. We all know the more properties used or the more elements to animate at the same time, the more power is required.</p>
-
-		<p><span class="ion-ios-cog media"></span>Of course some would argue on many aspects, but we all trade something for the sake of something else, such as convenience and/or flexibility or fork a project that's already great to make it.. better. For the sake of performance or simply willing to provide a feature, some trade/neglect other elements such as syncronisation (check this <a href="https://www.youtube.com/watch?v=1ZWugkJV5Ks" target="_blank">video</a>), code simplicity (lots of CSS for a <a href="https://daneden.github.io/animate.css/" target="_blank">custom animation</a>) and more other.</p>
-		<p>To learn more about how performance can vary from case to case, check out <a href="about.html#performance">this secion</a>, it's very informative.</p>
-	</div>
-
-	<div class="content-wrap">
-		<h2 id="prefix">Browser Prefixes Free</h2>
-		<p>KUTE.js uses a simple function to determine the vendor prefix and checks if the prefix is required. In any case it caches the prefixed/unprefixed property name in a variable to make it available when needed. This applies to the following CSS3 properties: <code>transform</code>, <code>perspective</code>, <code>perspective-origin</code>, <code>border-radius</code> and the <code>requestAnimationFrame</code> Javascript method.</p>
-		<p><span class="ion-paper-airplane media"></span>We aren't only targeting properly browsers for CSS3 styling, but also increase performance because we don't need to update the styling on every frame for all browsers (and their versions) at once, just the right and only one; <strong>less</strong> string concatenation = <strong>more</strong> performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.</p> 
-		<p>This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.</p>
-	</div>
-
-	<div class="content-wrap">
-		<h2 id="compatibiity">Browser Compatibility</h2>
-		<p>KUTE.js covers all <strong>modern</strong> browsers but also provides fallback options for legacy browsers. The <strong>prefix free</strong> feature mentioned above is one way to enable smooth Javascript based animations on older versions Gecko/Webkit/IE browsers for <code>transform</code> and <code>border-radius</code>. Generally, KUTE.js is built around most used properties, so I highly recommend checking the <a href="http://caniuse.com" target="_blank">can I use</a> website for a very detailed properties support list on many browsers and versions. For instance legacy browsers may support <a href="http://caniuse.com/#feat=transforms2d">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d">3D transforms</a> so make sure you know what browsers support and <a href="http://browserhacks.com/" target="_blank">how to target them</a> before you get to work with a complete browser supported animation setup.</p> 
-		<p><span class="ion-android-globe media"></span>I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 and it really works with the help of <a href="https://polyfill.io/" target="_blank">polyfills</a> and the appropriate code to detect them. All you need to do is to let the browser breathe, espectially IE8 needs to have resize handlers as minimal as possible. On the other side, IE9 really shines with 2D transforms animation, something that's impossible with CSS <code>transition</code>.</p>	
-		<p>Speaking of polyfills, KUTE.js requires <code>window.requestAnimationFrame()</code> for the main thread, <code>window.performance.now()</code> for checking the current time, <code>.indexOf()</code> for array checks, <code>window.getComputedStyle()</code> for the <code>.to()</code> method and <code>.addEventListener()</code> for scroll. Unlike other developers I didn't include these polyfills in the code to keep it clean, so that YOU decide whether your project need them or not. Also know that when using the recommended <a href="https://polyfill.io/"target="_blank">polyfill service</a> some <strong>browser detection will not work</strong> because they fill the gap and your code won't work as expected. For instance this would check for IE8 browser <code>var isIE = document.all && !document.addEventListener;</code> but the polyfill covers <code>.addEventListener()</code> so you will never succeed. The provided <strong>ideal HTML template</strong> is the best solution for targeting Microsoft's legacy browsers.</p>
-		<p>As of Safari, we did some tests there too, KUTE.js does it really well.</p>
-	</div>
-	
-	<div class="content-wrap">
-		<h2 id="methods">Methods, Tools and Options</h2>
-		<h3>Building Tween Objects</h3>
-		<p>KUTE.js allows you to create tween objects with the help of <code>.to()</code> and <code>.fromTo()</code> public methods for a single element, with distinctive functionalities, and the other <code>.allTo()</code> and <code>.allFromTo()</code> that use the first two for collections of elements.</p> 
-		
-        <p><kbd>KUTE.to('selector', toValues, options)</kbd> method is super simple and straightforward and requires a polyfill for <code>window.getComputedStyle()</code> Javascript method on IE8 and more other legacy browsers in order to read the current property value. If no value is set in the stylesheets or inline style, a property specific value will be used. It also computes the value on animation start, delaying the actual animation and potentially creating sync issues on large amounts of elements, but it has the great ability to stack <code>transform</code> properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at <a href="api.html#start">start()</a> method API.</p>
-		
-        <p><kbd>KUTE.fromTo('selector', fromValues, toValues, options)</kbd> is the other method that's most powerful in terms of performance, flexibility and control on the animation. As an example, while the first method may not process properties' measurement units properly, this method will never fail in that regard, because you can set for both starting values and end values the exact values with the right unit you need.</p> 
-
-		<p>It doesn't stack <code>transform</code> properties for chained tweens but you can set all properties to be used in all tweens if you want (end values from previous tween become start values for the next AND unchanged start values become end values), and make sure nothing is left unchecked, to avoid animation glitches. Still, this method is the fastest and bestest for super performance and super control.</p>
-        
-        <p><kbd>KUTE.allTo('selector', toValues, options)</kbd> inherits all functionality from the <code>.to()</code> method but is applied to collections of elements.</p>
-        
-        <p><kbd>KUTE.allFromTo('selector', fromValues, toValues, options)</kbd> is the same as <code>.fromTo()</code> and is applied to collections of elements.</p> 
-
-		<h3>Tween Control</h3>
-		<p>Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: <code>.start()</code>, <code>.stop()</code>, <code>.pause()</code> and <code>.resume()</code>. These public methods work either when animation is running or is paused. You need to see the <a href="api.html">documentation</a> to learn how these work.</p> 
-		
-		<h3>Tween Options</h3>
-		<p>Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for <code>transform</code>. For instance 3D rotations require a <code>perspective</code> or a <code>perspective-origin</code>, right?</p>
-		
-		<h3>Callback System</h3>
-		<p>Another important KUTE.js feature is the solid callback system. This allows you to schedule functions to run on animation start, on each frame, on pause / resume, on stop and on complete. The functions bound at start or resume will delay the animation, while the functions running on each frame can potentially influence performance on large amounts of elements so you must use them wisely.</p>
-
-		<h3>Addons</h3>
-		<p>KUTE.js sports some fine tuned addons: jQuery Plugin, cubic bezier easing functions and also physics based easing functions. I am also considering to feature an attributes plugin as well as SVG library and maybe other tools in the future.</p>
-		
-		<p>Check the <a href="api.html">documentation</a> on these methods and the <a href="examples.html">examples page</a> for more.</p>
-	</div>
-	
-	<div class="content-wrap">
-		<h2>Support For Plenty Of Properties</h2>
-		<p>KUTE.js covers all animation needs such as most <code>transform</code> properties, <code>scroll</code> for window or a given element, colors, <code>border-radius</code>, and almost the full box model. Due to it's modular coding, KUTE.js is very flexible and makes it very easy to add support for more properties, but I'm considering removing unnecessary properties in the future (mostly from the box model category). Note: not all browsers support <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a>.</p>
-		<p>All common measurement units are supported: <code>px</code> and <code>%</code> for translations and box-model properties, or <code>deg</code> and <code>rad</code> for rotations and skews, while <code>clip</code> only supports <code>px</code>. Other properties such as <code>opacity</code>, <code>scale</code> or <code>scroll</code> are unitless, and <code>background-position</code> always uses <code>%</code> as measurement unit. As for the text properties you can use <code>px</code>, <code>em</code>, <code>rem</code>, <code>vh</code> and <code>vw</code>. Be sure to <a href="http://caniuse.com/#feat=viewport-units" target="_blank">check</a> what your browsers support in terms of measurement unit.</p>
-				
-		<h3>Opacity</h3>
-		<p>In most cases, the best animation possible is the <code>opacity</code>, for performance, aesthetics and maybe more other reasons such as avoiding unwanted layout changes. KUTE.js also covers IE8 here with the help of proprietary synthax <code>filter: alpha(opacity=0)</code> but requires that you use the provided HTML template in order to detect the browser. Also, opacity can be used for instance on legacy browsers that don't support <code>RGBA</code> colors. Eg. <code>opacity:0.5</code> will make an element semitransparent.</p>
-		
-		<h3>2D Transform Properties</h3>
-		<ul>
-			<li><kbd>translate</kbd> property can be used for horizontal and / or vertical movement. EG. <code>translate:150</code> to translate an element 150px to the right or <code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. Supported on IE9.</li>
-			<li><kbd>rotate</kbd> is a property used to rotate an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. Supported on IE9.</li>
-			<li><kbd>skewX</kbd> is a property used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew an element by 25 degrees. Supported on IE9.</li>
-			<li><kbd>skewY</kbd> is a property used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew an element by 25 degrees. Supported on IE9.</li>
-			<li><kbd>scale</kbd> is a property used to apply a size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. Supported on IE9.</li>
-			<li><kbd>matrix</kbd> property is not supported.</li>
-		</ul>		
-		
-		<h3>3D Transform Properties</h3>
-		<ul>
-			<li><kbd>translateX</kbd> property is for horizontal movement. EG. <code>translateX:150</code> to translate an element 150px to the right. Modern browsers only.</li>
-			<li><kbd>translateY</kbd> property is for vertical movement. EG. <code>translateY:-250</code> to translate an element 250px towards the top. Modern browsers only.</li>
-			<li><kbd>translateZ</kbd> property is for movement on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px to it's back, making it smaller. Modern browsers only and requires a <code>perspective</code> tween option to be used; the smaller perspective value, the deeper translation.</li>
-			<li><kbd>translate3d</kbd> property is for movement on all the axis in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer, making it larger. Modern browsers only and also requires using a <code>perspective</code> tween option.</li>
-			<li><kbd>rotateX</kbd> property rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Modern browsers only and requires perspective.</li>
-			<li><kbd>rotateY</kbd> property rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees. Modern browsers only and also requires perspective.</li>
-			<li><kbd>rotateZ</kbd> property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by 150 degrees. Modern browsers only and doesn't require perspective.</li>
-			<li><kbd>rotate3d</kbd> and <kbd>matrix3d</kbd> properties are not supported.</li>
-		</ul>
-
-		<h3>Box Model Properties</h3>
-		<ul>
-			<li><kbd>left</kbd>, <kbd>top</kbd>, <kbd>right</kbd> and <kbd>bottom</kbd> are <code>position</code> based properties for movement on vertical and / or horizontal axis. These properties require that the element to animate uses <code>position: absolute/relative</code> styling as well as it's parent element requires <code>position:relative</code>. These properties can be used as fallback for browsers with no support for <code>translate</code> properties such as IE8.</li>
-			<li><kbd>width</kbd>, <kbd>height</kbd>, <kbd>minWidth</kbd>, <kbd>minHeight</kbd>, <kbd>maxWidth</kbd>, <kbd>maxHeight</kbd> are properties that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for <code>scale</code> on IE8 again, as well as for other purposes.</li>
-			<li><kbd>padding</kbd>, <kbd>margin</kbd>, <kbd>paddingTop</kbd>, <kbd>paddingBottom</kbd>, <kbd>paddingLeft</kbd>, <kbd>paddingRight</kbd>, <kbd>marginTop</kbd>, <kbd>marginBottom</kbd>, <kbd>marginLeft</kbd> and <kbd>marginRight</kbd> are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as <code>margin: "20px 50px"</code> or any other type are not supported.</li>
-			<li><kbd>borderWidth</kbd>, <kbd>borderTopWidth</kbd>, <kbd>borderRightWidth</kbd>, <kbd>borderBottomWidth</kbd> are <kbd>borderLeftWidth</kbd> are properties that allow you to animate the border of an element either on all sides at once or each side separatelly. Shorthand notations are not supported.</li>
-		</ul>		
-		<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong> that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger <code>resize</code> event that may cause crashes on old browsers such as IE8 when using handlers bound on <code>resize</code>, so use with caution.</p>
-
-		<h3>Border Radius</h3>
-		<ul>
-			<li><kbd>borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
-			<li><kbd>borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
-			<li><kbd>borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
-			<li><kbd>borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
-			<li><kbd>borderBottomRightRadius</kbd> allows you to animate the <code>border-bottom-right-radius</code>for a given element.</li>
-		</ul>			
-		<p>For all radius properties above <code>borderRadius:20</code> or <code>borderTopLeftRadius:'25%'</code> will do. In the first case <code>px</code> is the default measurement unit used, while in the second we require using <code>%</code> unit which is relative to the element's size.</p>
-		<p><strong>Remember</strong>: shorthands for <code>border-radius</code> are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. <code>-moz-border-radius-topleft</code>) as they were deprecated with later versions.</p>
-
-		<h3>Color Properties</h3>
-		<p>KUTE.js currently supports values such as <code>HEX</code>, <code>RGB</code> and <code>RGBA</code> for all color properties, but IE8 does not support <code>RGBA</code> and always uses <code>RGB</code> when detected, otherwise will produce no effect. There is also a tween option <code>keepHex:true</code> to convert the color format. Eg. <code>color: '#ff0000'</code> or <code>backgroundColor: 'rgb(202,150,20)'</code> or <code>borderColor: 'rgba(250,100,20,0.5)'</code></p>	
-		<ul>
-			<li><kbd>color</kbd> allows you to animate the color for a given text element.</li>
-			<li><kbd>backgroundColor</kbd> allows you to animate the <code>background-color</code> for a given element.</li>
-			<li><kbd>borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a given element.</li>
-			<li><kbd>borderTopColor</kbd>, <kbd>borderRightColor</kbd>, <kbd>borderBottomColor</kbd> and <kbd>borderLeftColor</kbd> properties allow you to animate the color of the border on each side of a given element.</li>
-		</ul>			
-		<p><strong>Remember</strong>: shorthands for <code>border-color</code> property as well as web color names (Eg. red, green, olive, etc.) are not supported.</p>
-
-		<h3>Text Properties</h3>
-		<p> These properties can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code> on browsers that don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>
-		<ul>
-			<li><kbd>fontSize</kbd> allows you to animate the <code>font-size</code> for a given element.</li>
-			<li><kbd>lineHeight</kbd> allows you to animate the <code>line-height</code> for a given element.</li>
-			<li><kbd>letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a given element.</li>
-		</ul>
-		<p><strong>Remember</strong>: these properties are also <strong>layout modifiers</strong>.</p>
-
-		<h3>Scroll Animation</h3>
-		<p>KUTE.js currently supports only vertical scroll for both the window and a given element that's scrollable. Both <code>scroll: 150</code> or <code>scrollTop: 150</code> notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles.</p>			
-
-		<h3>Other properties</h3>
-		<ul>
-			<li><kbd>clip</kbd> allows you to animate the <code>clip</code> property for a given element. Only rect is supported. Eg. <code>clip:[250,200,300,0]</code>. See <a href="http://www.w3.org/TR/CSS2/visufx.html#propdef-clip" target="_blank">spec</a> for details.</li>
-			<li><kbd>backgroundPosition</kbd> allows you to animate the <code>background-position</code> for a given element that uses a background image. It only uses % as measurement unit. Eg. <code>backgroundPosition:[50,20]</code></li>
-		</ul>
-		
-		<h3>Did We Miss Any Important Property?</h3>			
-		<p>Make sure you go to <a href="https://github.com/thednp/kute.js/issues" target="_blank">the issues tracker</a> and report the missing property ASAP.</p>			
-	</div>
-
-	<div class="content-wrap">
-		<h2>Developer Friendly</h2>
-		<p><span class="ion-happy media"></span>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms. The terms in short allow you to use the script <strong>for free</strong> in both <strong>personal</strong> and <strong>commercial application</strong> as long as you give <strong>proper credits</strong> to the original author. Also a link back would be appreciated.</p>
-		<p>Also KUTE.js is <a href="api.html">super documented</a>, all features and options are showcased with detailed <a href="examples.html">examples</a> so you can get your hands really dirty.</p>
-		
-		<ul id="share" class="nav">
-			<li>Share </li>
-			<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute.js animation engine by @thednp and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
-		</ul>		
-	</div>
-	  
-      <!-- FOOTER -->
-     <footer>
-		<div class="content-wrap">
-			<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
-			<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
-		</div>
-    </footer>
-
- </div><!-- /.site-wrapper -->
- 
-
-
-<!-- JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->	
-
-<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script>  KUTE CDN -->
-
-<script src="./src/kute.js"></script> <!-- some stuff -->
-<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
-</body>
-</html>

demo/index.html

@@ -1,189 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
-<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
-<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
-
-<!--[if !IE ]><!--> <html lang="en"> <!--<![endif]-->
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="KUTE.js is a minimal Javascript animation engine">
-    <meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
-    <meta name="author" content="dnp_theme">
-    <link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
-
-    <title>KUTE.js | Javascript Animation Engine</title>
-	
-    <!-- RESET CSS -->
-    <link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
-	
-    <!-- DEMO KUTE CSS -->
-    <link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
-
-	<!-- Ion Icons -->
-    <link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
-	
-	<!-- legacy browsers support via polyfill 
-	<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
-	<!--[if IE]>
-		<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
-		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-	<![endif]-->
-	
-</head>
-
-<body>
-  <div class="fill overlay"></div>
-  
-  <div class="site-wrapper">
- 
-	<div class="navbar-wrapper">
-      <div class="content-wrap">
-		<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
-		<ul class="nav">
-			<li><a href="features.html">Features</a></li>
-			<li><a href="examples.html">Examples</a></li>
-			<li><a href="api.html">API</a></li>
-			<li><a href="about.html">About</a></li>
-		</ul>
-      </div>
-    </div>
-	
-
-	<div class="content-wrap">	
-		<div class="columns welcome">
-			<div class="col2 table">
-				<div class="cell">
-					<h2 class="nomargin">Welcome Developers!</h2>
-					<p class="lead">KUTE.js is a Javascript animation engine with top performance, memory efficient &amp; modular code. It delivers a whole bunch of tools to help you create great custom animations.</p> 
-					<p>	
-						<a class="btn btn-blue" href="https://github.com/thednp/kute.js/archive/master.zip">Download</a>
-						<a class="btn" href="https://github.com/thednp/kute.js">Github</a>
-						<a class="btn" href="http://www.jsdelivr.com/#!kute.js">CDN</a>
-						<a class="btn btn-green replay" href="#">Replay</a>
-					</p>
-				</div>		
-			</div>		
-			<div class="col2 table">		
-				<div class="cell">
-					<div id="blocks" class="columns nomargin">
-						<div class="col3 bg bg-yellow"></div>
-						<div class="col3 bg bg-orange"></div>
-						<div class="col3 bg bg-red"></div>
-					
-						<div class="col3 bg bg-blue"></div>
-						<div class="col3 bg bg-olive"></div>
-						<div class="col3 bg bg-indigo"></div>	
-											
-						<div class="col3 bg bg-lime"></div>
-						<div class="col3 bg bg-green"></div>
-						<div class="col3 bg bg-teal"></div>	
-
-					</div>
-				</div>
-
-			</div>
-		</div>
-	</div>
-
-	<div class="featurettes">
-		<div class="content-wrap">
-			<h2 class="nomarginlarge">At A Glance</h2>
-			<div class="columns hiddenoverflow">
-				<div class="col2">
-					<h3>Killer Performance</h3>
-					<p>KUTE.js is crazy fast with it's <a href="features.html#performance">outstanding performance</a>, with super fast code execution, it's also memory efficient. I made a <a href="performance.html">cool demo</a> to showcase how KUTE.js really scales on performance. </p>
-				</div>
-				<div class="col2">
-					<h3>Prefix Free</h3>
-					<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> for <code>requestAnimationFrame</code>, <code>transform</code> and <code>border-radius</code>, hustle free for older Gecko/Webkit/IE browsers.</p>
-				</div>
-			</div>
-			<div class="columns hiddenoverflow">
-				<div class="col2">
-					<h3>All Browsers Compatible</h3>
-					<p>KUTE.js covers <a href="features.html#compatibiity">all modern browsers</a> with fallback options for legacy browsers. When using <a href="https://polyfill.io/">polyfills</a> and the right <a href="http://browserhacks.com" target="_blank">browser detection</a> you can manage all kinds of <a href="examples.html#crossbrowser">fallback animations</a> for legacy browsers.</p>
-				</div>
-				<div class="col2">
-					<h3>Powerful Methods</h3>
-					<p>KUTE.js allows you to create tweens and chainable tweens, gives you tween control methods (stop/pause/resume/restart) and comes with full <a href="features.html#methods">spectrum tween options</a>.</p>
-				</div>
-			</div>
-			<div class="columns hiddenoverflow">
-				<div class="col2">
-					<h3>Packed With Tools</h3>
-					<p>KUTE.js comes with tools to help you configure awesome animations: jQuery plugin, cubic-bezier and physics easing functions, color convertors, and a lot of options to play with.</p>
-				</div>
-				<div class="col2">
-					<h3>Plenty Of Properties</h3>
-					<p>KUTE.js covers all animation needs such as <code>transform</code>, <code>scroll</code> (window or other elements), colors (border, background and text), <code>border-radius</code>, almost the full box model and also text properties.</p>
-				</div>
-			</div>
-			<div class="columns hiddenoverflow">	
-				<div class="col2">
-					<h3>MIT License</h3>
-					<p>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms.</p>
-				</div>
-				<div class="col2">
-					<h3>Top Notch Documentation</h3>
-					<p>All examples, code, tips &amp; tricks are very well documented.</p>
-				</div>
-			</div>		
-		</div>
-	</div>
-
-	<div class="content-wrap">
-		<h2>Getting Started</h2>
-		<div class="columns hiddenoverflow">
-			<div class="col3">
-				<span class="ion-ios-game-controller-b media"></span>
-				<h3>Examples</h3>
-				<p>See <a href="examples.html">KUTE.js in action</a> with all it's functions, options and features.</p>
-			</div>			
-			<div class="col3">
-				<span class="ion-ios-paper media"></span>
-				<h3>Documentation</h3>
-				<p>The <a href="api.html">API documentation</a> is here for you to get you started.</p>
-			</div>
-
-			<div class="col3">
-				<span class="ion-ios-pulse-strong media"></span>
-				<h3>Performance</h3>
-				<p class="marginbottom">Head over to the <a href="performance.html">performance</a> test page right away.</p>
-			</div>
-		</div>
-
-		<ul id="share" class="nav">
-			<li>Share </li>
-			<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute.js animation engine by @thednp and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></a></li>
-			<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
-		</ul>
-
-	</div>
-	  
-      <!-- FOOTER -->
-     <footer>
-		<div class="content-wrap">
-			<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
-			<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
-		</div>
-    </footer>
-
- </div><!-- /.site-wrapper -->
- 
-
-
-
-<!-- JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->	
-<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script>  KUTE CDN -->
-
-<script src="./src/kute.js"></script> <!-- KUTE local -->
-<script src="./assets/js/home.js"></script> <!-- some stuff -->
-<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
-</body>
-</html>

demo/performance.html

@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="KUTE.js is a minimal Javascript animation engine">
-    <meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
-    <meta name="author" content="dnp_theme">
-    <link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
-
-    <title>KUTE.js | Performance Testing Page</title>
-    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">	
-		<style>
-      body {background-color: #2e2e2e; color: #999; font-size: 12px; font-family: Helvetica, Arial, Helvetica, sans-serif;}
-      a {color:#ffd626; text-decoration: none}
-      a:hover,a:focus {color:#fff;}
-			#container {
-				  width: 200px; /*height: 200px;*/
-				  margin: 0 auto;
-				  position: relative;
-
-				  display: block;
-			  }
-			  
-			  .line {
-				  width: 200px;
-				  height: 2px;
-				  position: absolute;  
-          transform: translate3d(0px, 0px, 0px);  		
-			  }
-        .box { height: 200px }
-        #info {position: absolute; top: 0; left: 0; width: 400px;}
-        .hack { transform: translate3d(0px,0px,0px); }
-        .padding {padding: 20px}
-        .btn-group { margin-bottom: 15px; }
-        .btn {font-size: 13px; }
-		</style>
-
-</head>
-
-<body>
-  
-<div id="info" class="padding">
-    <p><a class="back" href="index.html">Back to KUTE.js</a></p>
-    <p>Engine  </p>     
-        <span id="engine" class="btn-group">
-          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
-          <ul class="dropdown-menu" role="menu">
-            <li><a id="kute" href="#">KUTE</a></li>
-            <li><a id="gsap" href="#">GSAP</a></li>
-            <li><a id="tween" href="#">Tween.js</a></li>
-          </ul>
-        </span>
-    
-    <p>Property </p>  
-        <span id="property" class="btn-group">
-          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
-          <ul class="dropdown-menu" role="menu">
-            <li><a id="left" href="#">left</a></li>
-            <li><a id="translateX" href="#">translateX</a></li>
-          </ul>
-        </span>
-      
-      
-      <p>Repeat   </p> 
-        <span id="repeat" class="btn-group">
-          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
-          <ul class="dropdown-menu" role="menu">
-            <li><a id="5" href="#">5</a></li>
-            <li><a id="10" href="#">10</a></li>
-            <li><a id="15" href="#">15</a></li>
-            <li><a id="20" href="#">20</a></li>
-          </ul>
-        </span>
-      
-        
-      <p>How many elements to animate:</p> 
-        <span id="count" class="btn-group">
-            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
-            <ul class="dropdown-menu" role="menu">
-              <li><a id="100" href="#">100</a></li>
-              <li><a id="200" href="#">200</a></li>
-              <li><a id="300" href="#">300</a></li>
-              <li><a id="400" href="#">400</a></li>
-              <li><a id="500" href="#">500</a></li>
-              <li><a id="600" href="#">600</a></li>
-              <li><a id="700" href="#">700</a></li>
-              <li><a id="800" href="#">800</a></li>
-              <li><a id="900" href="#">900</a></li>
-              <li><a id="1000" href="#">1000</a></li>
-            </ul>
-        </span>
-          
-        
-        <div id="hack" style="display: none">
-          <p>When left is used, try the hack:  </p>
-          <span class="btn-group" data-toggle="buttons">              
-            <label class="btn btn-info">
-              <input type="checkbox" autocomplete="off"><span class="state">Hack OFF</span>
-            </label>
-          </span>             
-        </div>
-          
-        <hr>
-          
-        <div style="width:100%;clear: both">
-          <button class="btn btn-success" id="start" type="button" style="margin-bottom: 15px">Start</button>
-        </div>
- 
-<!--[if IE]><p class="text-danger">The test page is not intended for legacy browsers.</p><![endif]-->
-<!--[if !IE ]><!-->
-<p>These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
-<p>The hack refers to adding a blank transform <code>translate3d(0px,0px,0px);</code> for the elements to promote them into separate layers, as described <a href="https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas#promote-elements-that-move-or-fade" target="_blank">here</a>.</p>
-<p class="text-danger">Do not try this test on lower end or mobile devices.</p>
-<!--<![endif]-->         
-
-</div>
-<div id="container"></div>
-
-	
-
-
-<!-- JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->	
-<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script>  KUTE CDN -->
-
-<!--[if !IE ]><!-->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.9/bootstrap-native.min.js"></script>
-
-<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
-<script src="./assets/js/tween.min.js"></script>
-<script src="./src/kute.js"></script>
-<script src="./assets/js/perf.js"></script>
-<!--<![endif]-->  
-</body>
-</html>

demo/src/kute-bezier.js

@@ -1,198 +0,0 @@
-/*
- * KUTE.js - The Light Tweening Engine | dnp_theme
- * package bezier easing
- * BezierEasing by Gaëtan Renaudeau 2014 – MIT License
- * optimized by dnp_theme 2015 – MIT License
- * Licensed under MIT-License
-*/
-
-// /* THIS IS THE OLD CODE */
-// (function(kute_ea){
-//   // Obtain a reference to the base KUTE.
-//   // Since KUTE supports a variety of module systems,
-//   // we need to pick up which one to use.
-//   if(define == "function") {
-//     define(["./kute.js"], function(KUTE){ kute_ea(KUTE); return KUTE; });
-//   } else if(typeof module == "object" && typeof require == "function") {
-//     // We assume, that require() is sync.
-//     var KUTE = require("./kute.js");
-//     kute_ea(KUTE);
-//     // Export the modified one. Not really required, but convenient.
-//     module.exports = KUTE;
-//   } else if(typeof window.KUTE != "undefined") {
-//     kute_ea(window.KUTE);
-//   } else {
-//     throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
-//   }
-// })(function(KUTE){
-  
-(function (factory) {
-  if (typeof define === 'function' && define.amd) {
-    define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
-  } else if(typeof module == "object" && typeof require == "function") {
-    // We assume, that require() is sync.
-    var KUTE = require("./kute.js");   
-    // Export the modified one. Not really required, but convenient.
-    module.exports = factory(KUTE);
-  } else if ( typeof window.KUTE !== 'undefined' ) {
-    // Browser globals		
-    window.KUTE.Ease = window.KUTE.Ease || factory(KUTE);
-  } else {
-    throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");
-  }
-}( function (KUTE) {
-  'use strict';
-  var E = E || {};
-
-  E.Bezier = function(mX1, mY1, mX2, mY2) {
-    return _bz.pB(mX1, mY1, mX2, mY2);
-  };
-
-  var _bz = E.Bezier.prototype;
-
-  // These values are established by empiricism with tests (tradeoff: performance VS precision)
-  _bz.ni    = 4; // NEWTON_ITERATIONS
-  _bz.nms   = 0.001; // NEWTON_MIN_SLOPE
-  _bz.sp    = 0.0000001; // SUBDIVISION_PRECISION
-  _bz.smi   = 10, // SUBDIVISION_MAX_ITERATIONS
-
-  _bz.ksts = 11; // k Spline Table Size
-  _bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
-
-  _bz.f32as = 'Float32Array' in window; // float32ArraySupported
-  _bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
-
-  _bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
-  _bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
-  _bz.C = function(aA1)      { return 3.0 * aA1; };
-
-  _bz.r = {};
-  _bz.pB = function (mX1, mY1, mX2, mY2) {
-    this._p = false; var self = this;
-
-    _bz.r = function(aX){
-          if (!self._p) _bz.pc(mX1, mX2, mY1, mY2);
-          if (mX1 === mY1 && mX2 === mY2) return aX;
-
-          if (aX === 0) return 0;
-          if (aX === 1) return 1;
-          return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);
-    };
-    return _bz.r;
-  };
-
-  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-  _bz.cB = function(aT, aA1, aA2) { // calc Bezier
-    return ((_bz.A(aA1, aA2)*aT + _bz.B(aA1, aA2))*aT + _bz.C(aA1))*aT;
-  };
-
-  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
-  _bz.gS = function (aT, aA1, aA2) { // getSlope
-    return 3.0 * _bz.A(aA1, aA2)*aT*aT + 2.0 * _bz.B(aA1, aA2) * aT + _bz.C(aA1);
-  };
-
-  _bz.bS = function(a, aA, aB, mX1, mX2) { // binary Subdivide
-    var x, t, i = 0, j = _bz.sp, y = _bz.smi;
-    do {
-      t = aA + (aB - aA) / 2.0;
-      x = _bz.cB(t, mX1, mX2) - a;
-      if (x > 0.0) {
-        aB = t;
-      } else {
-        aA = t;
-      }
-    } while (Math.abs(x) > j && ++i < y);
-    return t;
-  };
-
-  _bz.nri = function (aX, agt, mX1, mX2) { // newton Raphs on Iterate
-    var i = 0, j = _bz.ni;
-    for (i; i < j; ++i) {
-        var cs = _bz.gS(agt, mX1, mX2);
-        if (cs === 0.0) return agt;
-        var x = _bz.cB(agt, mX1, mX2) - aX;
-        agt -= x / cs;
-    }
-    return agt;
-  };
-
-  _bz.csv = function (mX1, mX2) { // calc Sample Values
-  var i = 0, j = _bz.ksts;
-      for (i; i < j; ++i) {
-          _bz.msv[i] = _bz.cB(i * _bz.ksss, mX1, mX2);
-      }
-  };
-
-  _bz.gx = function (aX,mX1,mX2) { //get to X
-      var iS = 0.0, cs = 1, ls = _bz.ksts - 1;
-
-      for (; cs != ls && _bz.msv[cs] <= aX; ++cs) {
-          iS += _bz.ksss;
-      }
-      --cs;
-
-      // Interpolate to provide an initial guess for t
-      var dist = (aX - _bz.msv[cs]) / (_bz.msv[cs+1] - _bz.msv[cs]),
-          gt = iS + dist * _bz.ksss,
-          ins = _bz.gS(gt, mX1, mX2),
-    fiS = iS + _bz.ksss;
-
-      if (ins >= _bz.nms) {
-          return _bz.nri(aX, gt, mX1, mX2);
-      } else if (ins === 0.0) {
-          return gt;
-      } else {
-          return _bz.bS(aX, iS, fiS, mX1, mX2);
-      }
-  };
-
-  _bz.pc = function(mX1, mX2, mY1, mY2) {
-    this._p = true;
-    if (mX1 != mY1 || mX2 != mY2)
-        _bz.csv(mX1, mX2);
-  };
-
-  // predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
-  // _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
-  E.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
-  E.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
-  E.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
-
-  E.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
-  E.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
-  E.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
-
-  E.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
-  E.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
-  E.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
-
-  E.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
-  E.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
-  E.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
-
-  E.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
-  E.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
-  E.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
-
-  E.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
-  E.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
-  E.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
-
-  E.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
-  E.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
-  E.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
-
-  E.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
-  E.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
-  E.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
-
-  E.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
-  E.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
-  E.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
-
-  E.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
-  E.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
-  E.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
-  
-  return E;
-}));

demo/src/kute-jquery.js

@@ -1,49 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * package jQuery Plugin
- * by dnp_theme
- * Licensed under MIT-License
- */
-
- (function(factory){
-  // We need to require the root KUTE and jQuery.
-  if (typeof define === 'function' && define.amd) {
-    define(["./kute.js", "jquery"], function(KUTE, $){
-      factory($, KUTE);
-      return KUTE;
-    });
-  } else if(typeof module == "object" && typeof require == "function") {
-    // We assume, that require() is sync.
-    var KUTE = require("./kute.js");
-    var $ = require("jquery");
-    
-    // Export the modified one. Not really required, but convenient.
-    module.exports = factory($, KUTE);
-  } else if (typeof window.KUTE !== "undefined" && (typeof window.$ !== 'undefined' || typeof window.jQuery !== 'undefined' ) ) {
-    // jQuery always has two ways of existing... Find one, and pass.
-    var $ = window.jQuery || window.$, KUTE = window.KUTE;
-    $.fn.KUTE = factory($, KUTE);
-  } else {
-    throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");
-  }
- })(function($, KUTE) {
-  'use strict';
-  var $K = function( method, start, end, ops ) { // method can be fromTo(), to(), stop(), start(), chain(), pause()
-    var tws = [], i, l = this.length;
-
-    for (i=0;i<l;i++){
-      var mt = this[i][method];
-      if ( typeof mt === 'function' ) {
-        mt.apply(this[i]);
-      }
-      if ( method === 'to' ) {
-        tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
-      } else if ( method === 'fromTo' || method === 'Animate' ) {
-        tws.push( new KUTE[method]( this[i], start, end, ops ) );
-      } else if ( method === 'chain' ) {
-        this[i].chain.apply(this[i],start);
-      }
-    }
-    return tws;
-  };
-  return $K;
-});

demo/src/kute-physics.js

@@ -1,322 +0,0 @@
-/*
- * KUTE.js - The Light Tweening Engine | dnp_theme
- * package dynamics.js easings pack by Michael Villar
- * https://github.com/michaelvillar/dynamics.js
- * optimized by dnp_theme 2015 – MIT License
- * Licensed under MIT-License
- */
-
-(function(factory){
-  // Obtain a reference to the base KUTE.
-  // Since KUTE supports a variety of module systems,
-  // we need to pick up which one to use.
-  if (typeof define === 'function' && define.amd) {
-    define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
-  } else if(typeof module == "object" && typeof require == "function") {
-    // We assume, that require() is sync.
-    var KUTE = require("./kute.js");
-    
-    // Export the modified one. Not really required, but convenient.
-    module.exports = factory(KUTE);
-  } else if(typeof window.KUTE != "undefined") {
-    window.KUTE.Physics = window.KUTE.Physics || factory(KUTE);
-  } else {
-    throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.")
-  }
-})(function(KUTE){
-  'use strict';
-  var P = P || {}, _hPI = Math.PI / 2;
-
-  // spring easing
-  P.spring = function(options) {
-    options = options || {};
-
-    var fq = Math.max(1, (options.frequency || 300 ) / 20),
-        fc = Math.pow(20, (options.friction || 200 ) / 100),
-        aSt = options.anticipationStrength || 0,
-        aS = (options.anticipationSize || 0) / 1000;
-
-    _kps.run = function(t) {
-      var A, At, a, angle, b, frictionT, y0, yS;
-
-      frictionT = (t / (1 - aS)) - (aS / (1 - aS));
-      if (t < aS) {
-        yS = (aS / (1 - aS)) - (aS / (1 - aS));
-        y0 = (0 / (1 - aS)) - (aS / (1 - aS));
-        b = Math.acos(1 / _kps.A1(t,yS));
-        a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
-        A = _kps.A1;
-      } else {
-        A = _kps.A2;
-        b = 0;
-        a = 1;
-      }
-      At = A(frictionT,aS,aSt,fc);
-      angle = fq * (t - aS) * a + b;
-      return 1 - (At * Math.cos(angle));
-    };
-
-    return _kps.run;
-  };
-
-  var _kps = P.spring.prototype;
-  _kps.run = {};
-  _kps.A1 = function(t,aS,aSt) {
-    var a, b, x0, x1;
-    x0 = aS / (1 - aS);
-    x1 = 0;
-    b = (x0 - (0.8 * x1)) / (x0 - x1);
-    a = (0.8 - b) / x0;
-    return (a * t * aSt / 100) + b;
-  };
-  _kps.A2 = function(t,aS,aSt,f) {
-    return Math.pow(f / 10, -t) * (1 - t);
-  };
-
-
-  // bounce
-  P.bounce = function(options) {
-    options = options || {};
-    var fq = Math.max(1, (options.frequency || 300) / 20),
-        f = Math.pow(20, (options.friction || 200) / 100);
-
-    _kpo.run = function(t) {
-      var At = Math.pow(f / 10, -t) * (1 - t),
-          angle = fq * t * 1 + _hPI;
-      return At * Math.cos(angle);
-    };
-    return _kpo.run;
-  };
-
-  var _kpo = P.bounce.prototype;
-  _kpo.run = {};
-
-
-  // gravity
-  P.gravity = function(options) {
-    var bounciness, curves, elasticity, gravity, initialForce;
-
-    options = options || {};
-    bounciness = ( options.bounciness || 400 ) / 1250;
-    elasticity = ( options.elasticity || 200 ) / 1000;
-    initialForce = options.initialForce || false;
-
-    gravity = 100;
-    curves = [];
-    _kpg.L = (function() {
-      var b, curve;
-      b = Math.sqrt(2 / gravity);
-      curve = {
-        a: -b,
-        b: b,
-        H: 1
-      };
-      if (initialForce) {
-        curve.a = 0;
-        curve.b = curve.b * 2;
-      }
-      while (curve.H > 0.001) {
-        _kpg.L = curve.b - curve.a;
-        curve = {
-          a: curve.b,
-          b: curve.b + _kpg.L * bounciness,
-          H: curve.H * bounciness * bounciness
-        };
-      }
-      return curve.b;
-    })();
-
-    (function() {
-      var L2, b, curve, _results;
-      b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
-      curve = {
-        a: -b,
-        b: b,
-        H: 1
-      };
-      if (initialForce) {
-        curve.a = 0;
-        curve.b = curve.b * 2;
-      }
-      curves.push(curve);
-      L2 = _kpg.L;
-      _results = [];
-      while (curve.b < 1 && curve.H > 0.001) {
-        L2 = curve.b - curve.a;
-        curve = {
-          a: curve.b,
-          b: curve.b + L2 * bounciness,
-          H: curve.H * elasticity
-        };
-        _results.push(curves.push(curve));
-      }
-      return _results;
-    })();
-    _kpg.fn = function(t) {
-      var curve, i, v;
-      i = 0;
-      curve = curves[i];
-      while (!(t >= curve.a && t <= curve.b)) {
-        i += 1;
-        curve = curves[i];
-        if (!curve) {
-          break;
-        }
-      }
-      if (!curve) {
-        v = initialForce ? 0 : 1;
-      } else {
-        v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
-      }
-      return v;
-    };
-
-    return _kpg.fn;
-  };
-
-  var _kpg = P.gravity.prototype;
-  _kpg.L = {};
-  _kpg.fn = {};
-  _kpg.getPointInCurve = function(a, b, H, t, o, L) {
-    var c, t2;
-    L = b - a;
-    t2 = (2 / L) * t - 1 - (a * 2 / L);
-    c = t2 * t2 * H - H + 1;
-    if (o.initialForce) {
-      c = 1 - c;
-    }
-    return c;
-  };
-
-  //throw up and pull down by gravity
-  P.forceWithGravity = function(o) {
-    var ops = o || {};
-    ops.initialForce = true;
-    return P.gravity(ops);
-  };
-
-
-  // multi point bezier
-  P.bezier = function(options) {
-    options = options || {};
-    var points = options.points,
-    returnsToSelf = false, Bs = [];
-
-    (function() {
-      var i, k;
-
-      for (i in points) {
-        k = parseInt(i);
-        if (k >= points.length - 1) {
-          break;
-        }
-        _kpb.fn(points[k], points[k + 1], Bs);
-      }
-      return Bs;
-    })();
-
-    _kpb.run = function(t) {
-      if (t === 0) {
-        return 0;
-      } else if (t === 1) {
-        return 1;
-      } else {
-        return _kpb.yForX(t, Bs, returnsToSelf);
-      }
-    };
-    return _kpb.run;
-  };
-
-  var _kpb = P.bezier.prototype;
-  _kpb.B2 = {};
-  _kpb.run = {};
-
-  _kpb.fn = function(pointA, pointB, Bs) {
-    var B2 = function(t) {
-      return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB);
-    };
-    return Bs.push(B2);
-  };
-
-  _kpb.Bezier = function(t, p0, p1, p2, p3) {
-    return {
-      x: (Math.pow(1 - t, 3) * p0.x) + (3 * Math.pow(1 - t, 2) * t * p1.x) + (3 * (1 - t) * Math.pow(t, 2) * p2.x) + Math.pow(t, 3) * p3.x,
-      y: (Math.pow(1 - t, 3) * p0.y) + (3 * Math.pow(1 - t, 2) * t * p1.y) + (3 * (1 - t) * Math.pow(t, 2) * p2.y) + Math.pow(t, 3) * p3.y
-    };
-  };
-
-  _kpb.yForX = function(xTarget, Bs, rTS) {
-    var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length;
-    B = null;
-    for (_i; _i < _len; _i++) {
-      aB = Bs[_i];
-      if (xTarget >= aB(0).x && xTarget <= aB(1).x) {
-        B = aB;
-      }
-      if (B !== null) {
-        break;
-      }
-    }
-    if (!B) {
-    return ( rTS ? 0 : 1 );
-    }
-    xT = 0.0001; // xTolerance
-    lower = 0; upper = 1;
-    percent = (upper + lower) / 2;
-    x = B(percent).x; i = 0;
-    while (Math.abs(xTarget - x) > xT && i < 100) {
-      if (xTarget > x) {
-        lower = percent;
-      } else {
-        upper = percent;
-      }
-      percent = (upper + lower) / 2;
-      x = B(percent).x;
-      i++;
-    }
-    return B(percent).y;
-  };
-
-  P.physicsInOut = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
-  };
-
-  P.physicsIn = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
-  };
-
-  P.physicsOut = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }]  });
-  };
-
-  P.physicsBackOut = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}]  });
-  };
-
-  P.physicsBackIn = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}]  });
-  };
-
-  P.physicsBackInOut = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.68-(friction / 1000),"y":-0.55}]},{"x":1,"y":1,"cp":[{"x":0.265+(friction / 1000),"y":1.45}]}]  });
-  };
-  return P;
-});

demo/src/kute.js

@@ -1,902 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * by dnp_theme
- * Licensed under MIT-License
- */
-
-(function (factory) {
-  if (typeof define === 'function' && define.amd) {
-    define([], factory); // AMD. Register as an anonymous module.
-  } else if (typeof exports == 'object') {
-    module.exports = factory(); // Node, not strict CommonJS
-  } else {
-    // Browser globals    
-    window.KUTE = window.KUTE || factory();
-  }
-}( function () {
-  "use strict";
-  var K = K || {}, _tws = [], _t = null,
-    _pf = getPrefix(), // prefix
-    _rafR = (!('requestAnimationFrame' in window)) ? true : false, // is prefix required for requestAnimationFrame
-    _pfT = (!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for transform
-    _pfB = (!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for border-radius
-    _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch?
-    _ev = _tch ? 'touchstart' : 'mousewheel', //event to prevent on scroll
-
-    _bd = document.body, _htm = document.getElementsByTagName('HTML')[0],
-    _sct = (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm),
-
-    _isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
-    _isIE8 = _isIE === 8, // check IE8/IE
-
-    //assign preffix to DOM properties
-    _pfto = _pfT ? _pf + 'TransformOrigin' : 'transformOrigin',
-    _pfp = _pfT ? _pf + 'Perspective' : 'perspective',
-    _pfo = _pfT ? _pf + 'PerspectiveOrigin' : 'perspectiveOrigin',
-    _tr = _pfT ? _pf + 'Transform' : 'transform',
-    _br = _pfB ? _pf + 'BorderRadius' : 'borderRadius',
-    _brtl = _pfB ? _pf + 'BorderTopLeftRadius' : 'borderTopLeftRadius',
-    _brtr = _pfB ? _pf + 'BorderTopRightRadius' : 'borderTopRightRadius',
-    _brbl = _pfB ? _pf + 'BorderBottomLeftRadius' : 'borderBottomLeftRadius',
-    _brbr = _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius',
-    _raf = _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'],
-    _caf = _rafR ? (window[_pf + 'CancelAnimationFrame'] || window[_pf + 'CancelRequestAnimationFrame']) : window['cancelAnimationFrame'],
-    
-    //supported properties
-    _cls = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
-    _sc  = ['scrollTop', 'scroll'], //scroll, it has no default value, it's calculated on tween start
-    _clp = ['clip'], // clip
-    _op  = ['opacity'], // opacity
-    _rd  = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
-    _bm  = ['top', 'left', 'right', 'bottom', 
-        'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
-        'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight', 
-        'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'], // dimensions / box model
-    _tp  = ['fontSize','lineHeight','letterSpacing'], // text properties
-    _bg  = ['backgroundPosition'], // background position
-    _3d  = ['rotateX', 'rotateY','translateZ'], // transform properties that require perspective
-    _tf  = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'], // transform
-    _all = _cls.concat(_sc, _clp, _op, _rd, _bm, _tp, _bg, _tf), al = _all.length,
-    _tfS = {}, _tfE = {}, _tlS = {}, _tlE = {}, _rtS = {}, _rtE = {}, //internal temp
-    _d = _d || {}; //all properties default values
-
-  //populate default values object
-  for ( var i=0; i< al; i++ ){
-    var p = _all[i];
-    if (_cls.indexOf(p) !== -1){
-      _d[p] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1};
-    } else if ( _rd.indexOf(p) !== -1 || _bm.indexOf(p) !== -1 || _tp.indexOf(p) !== -1) {
-      _d[p] = 0;      
-    } else if ( _bg.indexOf(p) !== -1 ){
-      _d[p] = [50,50];
-    } else if ( p === 'clip' ){
-      _d[p] = [0,0,0,0];       
-    } else if ( p === 'translate3d' ){
-      _d[p] = [0,0,0];
-    } else if ( p === 'translate' ){
-      _d[p] = [0,0];
-    } else if ( p === 'rotate' || /X|Y|Z/.test(p) ){
-      _d[p] = 0;    
-    } else if ( p === 'scale' || p === 'opacity' ){
-      _d[p] = 1;    
-    }
-  }
-  
-  // main methods
-  K.to = function (el, to, o) {  
-    var _el = typeof el === 'object' ? el : document.querySelector(el),
-        _vS = to, _vE = K.prP(to, true);  // we're gonna have to build _vS object at start
-    o = o || {}; o.rpr = true;
-    return new K.Tween(_el, _vS, _vE, o);
-  };
-
-  K.fromTo = function (el, f, to, o) {
-    var _el = typeof el === 'object' ? el : document.querySelector(el),
-        _vS = K.prP(f, false), _vE = K.prP(to, true); o = o || {};
-    return new K.Tween(_el, _vS, _vE, o);
-  };
-  
-  // multiple elements tweening
-  K.allTo = function (el, to, o) {
-    var _els = typeof el === 'object' && el.length ? el : document.querySelectorAll(el);
-    return new K.TweensAT(_els, to, o);
-  };
-  K.allFromTo = function (el, f, to, o) {
-    var _els = typeof el === 'object' && el.length ? el : document.querySelectorAll(el);
-    return new K.TweensFT(_els, f, to, o); 
-  };
-  
-  // render functions
-  K._r = {}; var _r = K._r;
-  K._u = function(w,t) {
-    t = t || window.performance.now();
-    if (t < w._sT && w.playing && !w.paused) { return true; }
-
-    var p, s = s || w._sT, 
-      d = d || w._dr, 
-      e = ( t - s ) / d,
-      ve = ve || w._vE,
-      es = es || w._e;
-    e = e > 1 ? 1 : e;
-    
-    //render the CSS update
-    for (p in ve){
-      _r[p](w,p,es(e));
-    }
-    
-    if (w._uC) { w._uC.call(); }
-
-    if (e === 1) {  
-      if (w._r > 0) {
-        if ( w._r < 9999 ) { w._r--; }      
-        
-        if (w._y) { w.reversed = !w.reversed; w.reverse(); } // handle yoyo
-          
-        w._sT = (w._y && !w.reversed) ? t + w._rD : t; //set the right time for delay
-        return true;        
-      } else {
-        
-        if (w._cC) { w._cC.call(); }
-        
-        //stop preventing scroll when scroll tween finished 
-        w.scrollOut();
-        
-        // start animating chained tweens
-        var i = 0, ctl = w._cT.length;
-        for (i; i < ctl; i++) {
-          w._cT[i].start(w._sT + w._dr);
-        }
-        
-        //stop ticking when finished
-        w.close();          
-        return false;
-      }
-    }
-    return true;
-  }; 
-  
-  var _u = K._u;
-  // internal ticker
-  K._t = function (t) {
-    var i = 0, tl; 
-    _t = _raf(K._t); 
-    while ( i < (tl = _tws.length) ) {
-      if ( _u(_tws[i],t) ) {
-        i++;
-      } else {
-        _tws.splice(i, 1);
-      }
-    }
-    return true;
-  };
-  
-  // aplies the transform origin and perspective
-  K.perspective = function (l,w) {
-    if ( w._to !== undefined ) { l.style[_pfto] = w._to; } // element transform origin    
-    if ( w._ppo !== undefined ) { l.style[_pfo] = w._ppo; } // element perspective origin
-    if ( w._ppp !== undefined ) { l.parentNode.style[_pfp] = w._ppp + 'px'; } // parent perspective  
-    if ( w._pppo !== undefined ) { l.parentNode.style[_pfo] = w._pppo; } // parent perspective origin
-  };
-  
-  //more internals
-  K.getAll = function () { return _tws; };
-  K.removeAll = function () {  _tws = []; };
-  K.add = function (tw) {  _tws.push(tw); };
-  K.remove = function (tw) {
-    var i = _tws.indexOf(tw);
-    if (i !== -1) {
-      _tws.splice(i, 1);
-    }
-  };  
-  K.s = function () { _caf(_t);  _t = null; }; 
-  
-  // builds render functions for the render object K.render(w, p, w._e(e));
-  K._queue = function (w) {
-    for ( var p in w._vE ) {
-      // checking array on every frame takes time so let's cache these
-      var cls = _cls.indexOf(p) !== -1, 
-        bm = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1,
-        rd = _rd.indexOf(p) !== -1,
-        sc = _sc.indexOf(p) !== -1,
-        bg = _bg.indexOf(p) !== -1,
-        clp = _clp.indexOf(p) !== -1,
-        op = _op.indexOf(p) !== -1,
-        tf = p === 'transform';
-        
-      //process styles by property / property type
-      if ( bm && (!(p in K._r)) ) {
-        K._r[p] = function(w,p,v) {
-          w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-        };
-      } else if ( rd && (!(p in K._r)) ) {
-        if (p === 'borderRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_br] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };        
-        } else if (p === 'borderTopLeftRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brtl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderTopRightRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brtr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderBottomLeftRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brbl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderBottomRightRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brbr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        }
-      } else if (tf && (!(p in K._r)) ) {
-
-        K._r[p] = function(w,p,v) {
-          var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) ';
-          for (tP in w._vE[p]) {
-            var t1 = w._vS[p][tP], t2 = w._vE[p][tP];
-            rps = rps || _3d.indexOf(tP) !== -1 && !_isIE; 
-
-            if ( tP === 'translate' ) {
-              var tls = '', ts = {}, ax;
-
-              for (ax in t2){
-                var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px';
-                ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;  
-              }
-              tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
-                'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';                  
-
-              _tS = (_tS === '') ? tls : (tls + ' ' + _tS);              
-            } else if ( tP === 'rotate' ) {
-              var rt = '', rS = {}, rx;
-
-              for ( rx in t2 ){
-                if ( t1[rx] ) {
-                  var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg', 
-                    av = a1 + (a2 - a1) * v;
-                  rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
-                }
-              }
-              rt = t2.z ?  rS.z  : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
-
-              _tS = (_tS === '') ? rt : (_tS + ' ' + rt);  
-            } else if (tP==='skew') {
-              var sk = '', sS = {};
-              for ( var sx in t2 ){
-                if ( t1[sx] ) {
-                  var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg', 
-                    sv = s1 + (s2 - s1) * v;
-                  sS[sx] = sx + '(' + sv + su + ') ';
-                }
-              }
-              sk = (sS.skewX||'') + (sS.skewY||'');
-              _tS = (_tS === '') ? sk : (_tS + ' ' + sk);          
-            } else if (tP === 'scale') {
-              var sc1 = t1.value, sc2 = t2.value,
-                s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';                  
-              _tS = (_tS === '') ? scS : (_tS + ' ' + scS);
-            }
-          }
-          w._el.style[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS;
-        };
-
-      } else if ( cls && (!(p in K._r)) ) {
-        K._r[p] = function(w,p,v) {
-          var _c = {}; 
-          for (var c in w._vE[p].value) {
-            if ( c !== 'a' ){
-              _c[c] = parseInt(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v )||0;            
-            } else {
-              _c[c] = (w._vS[p].value[c] && w._vE[p].value[c]) ? parseFloat(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v) : null;
-            }          
-          }
-
-          if ( w._hex ) {
-            w._el.style[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) );
-          } else {
-            w._el.style[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';          
-          }                    
-        };
-      } else if ( sc && (!(p in K._r)) ) {   
-        K._r[p] = function(w,p,v) {
-          w._el = (w._el === undefined || w._el === null) ? _sct : w._el;
-          w._el.scrollTop = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
-        };
-      } else if ( bg && (!(p in K._r))  ) {        
-        K._r[p] = function(w,p,v) {
-          var px1 = w._vS[p].x.v, px2 = w._vE[p].x.v, py1 = w._vS[p].y.v, py2 = w._vE[p].y.v,
-            px = (px1 + ( px2 - px1 ) * v), pxu = '%', py = (py1 + ( py2 - py1 ) * v), pyu = '%';      
-          w._el.style[p] = px + pxu + ' ' + py + pyu;
-        };
-      } else if ( clp && (!(p in K._r))  ) {
-        K._r[p] = function(w,p,v) {
-          var h = 0, cl = [];
-          for (h;h<4;h++){
-            var c1 = w._vS[p][h].v, c2 = w._vE[p][h].v, cu = w._vE[p][h].u || 'px';
-            cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu;
-          }  
-          w._el.style[p] = 'rect('+cl+')';
-        };
-      } else if ( op && (!(p in K._r)) ) {
-        if (_isIE8) {
-          K._r[p] = function(w,p,v) {
-            w._el.style.filter = "alpha(opacity=" + ( w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v) * 100 + ")";
-          };
-        } else {
-          K._r[p] = function(w,p,v) {
-            w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
-          };
-        }
-      }
-    }       
-  };
-        
-  // process properties
-  K.prP = function (t, e) { // process tween properties for .fromTo() method 
-    var _st = {},
-      tr = e === true ? _tfE : _tfS,
-      tl = e === true ? _tlE : _tlS,
-      rt = e === true ? _rtE : _rtS;
-
-    tl = {}; tr = {};
-
-    for (var x in t) {
-      if (_tf.indexOf(x) !== -1) {
-        
-        if (x !== 'translate' && /translate/.test(x)) { //process translate3d
-          var ta = ['X', 'Y', 'Z'], f = 0; //coordinates //   translate[x] = pp(x, t[x]);  
-
-          for (f; f < 3; f++) {        
-            var a = ta[f];
-            if ( /3d/.test(x) ) {
-              tl['translate' + a] = K.pp('translate' + a, t[x][f]);                
-            } else {
-              tl['translate' + a] = ('translate' + a in t) ? K.pp('translate' + a, t['translate' + a]) : { value: 0, unit: 'px' };
-            }
-          }
-
-          tr['translate'] = tl;
-        } else if ( x !== 'rotate' && /rotate|skew/.test(x)) { //process rotation
-          var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], r = 0, 
-            _rt = {}, _sk = {}, rt = ap === 'rotate' ? _rt : _sk; 
-          for (r; r < 3; r++) {
-            var v = ra[r];
-            if ( t[ap+v] !== undefined && x !== 'skewZ' ) {
-              rt[ap+v] = K.pp(ap + v, t[ap+v]);
-            }
-          }
-          
-          tr[ap] = rt;
-        } else if ( x === 'translate' || x === 'rotate' || x === 'scale' ) { //process 2d translation / rotation
-          tr[x] = K.pp(x, t[x]);
-        }
-
-        _st['transform'] = tr;
-
-      } else if (_tf.indexOf(x) === -1)  {
-        _st[x] = K.pp(x, t[x]);
-      }
-    }
-    return _st;
-  };
-    
-  // _cls _sc _op _bm _tp _bg _tf     
-  K.pp = function(p, v) {//process single property
-    if (_tf.indexOf(p) !== -1) {
-      var t = p.replace(/X|Y|Z/, ''), tv;
-      if (p === 'translate3d') { 
-        tv = v.split(','); 
-        return {
-          translateX : { value: K.truD(tv[0]).v, unit: K.truD(tv[0]).u },
-          translateY : { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u },
-          translateZ : { value: K.truD(tv[2]).v, unit: K.truD(tv[2]).u }
-        };
-      } else if (p !== 'translate' && t === 'translate') {
-        return { value: K.truD(v).v, unit: (K.truD(v).u||'px') };
-      } else if (p !== 'rotate' && (t === 'skew' || t === 'rotate') && p !== 'skewZ' ) {
-        return { value: K.truD(v).v, unit: (K.truD(v,p).u||'deg') };
-      } else if (p === 'translate') {
-        tv = typeof v === 'string' ? v.split(',') : v; var t2d = {};
-        if (tv instanceof Array) {
-          t2d.x = { value: K.truD(tv[0]).v, unit: K.truD(tv[0]).u },
-          t2d.y = { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u }
-        } else {
-          t2d.x = { value: K.truD(tv).v, unit: K.truD(tv).u },
-          t2d.y = { value: 0, unit: 'px' }        
-        }
-        return t2d;
-      } else if (p === 'rotate') {
-        var r2d = {};
-        r2d.z = { value: parseInt(v, 10), unit: (K.truD(v,p).u||'deg') };
-        return r2d;
-      } else if (p === 'scale') {
-        return { value: parseFloat(v, 10) };
-      }
-    }
-    if (_tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1) {
-      return { value: K.truD(v).v, unit: K.truD(v).u };
-    }
-    if (_op.indexOf(p) !== -1) {
-      return { value: parseFloat(v, 10) };
-    }
-    if (_sc.indexOf(p) !== -1) {
-      return { value: parseFloat(v, 10) };
-    }
-    if (_clp.indexOf(p) !== -1) {
-      if ( v instanceof Array ){
-        return [ K.truD(v[0]), K.truD(v[1]), K.truD(v[2]), K.truD(v[3]) ];
-      } else {        
-        var ci;
-        if ( /rect/.test(v) ) {
-          ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/); 
-        } else if ( /auto|none|initial/.test(v) ){
-          ci = _d[p];  
-        }        
-        return [ K.truD(ci[0]),  K.truD(ci[1]), K.truD(ci[2]),  K.truD(ci[3]) ];
-      }  
-    }
-    if (_cls.indexOf(p) !== -1) {
-      return { value: K.truC(v) };
-    }
-    if (_bg.indexOf(p) !== -1) {
-      if ( v instanceof Array ){        
-        return { x: K.truD(v[0])||{ v: 50, u: '%' }, y: K.truD(v[1])||{ v: 50, u: '%' } };
-      } else {
-        var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g),
-          xp = K.truD(posxy[0]), yp = K.truD(posxy[1]);
-        return { x: xp, y: yp };
-      }  
-    }
-    if (_rd.indexOf(p) !== -1) {
-      var rad = K.truD(v);
-      return { value: rad.v, unit: rad.u };
-    }
-  };
-    
-  K.truD = function (d,p) { //true dimension returns { v = value, u = unit }
-    var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length, 
-      y = getU();
-    function getU() {
-      var u,i=0;
-      for (i;i<l;i++) { if ( typeof d === 'string' && d.indexOf(mu[i]) !== -1 ) u = mu[i]; }
-      u = u !== undefined ? u : (p ? 'deg' : 'px')
-      return u;
-    }
-    return { v: x, u: y };
-  };
-  
-  K.preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll
-    var data = document.body.getAttribute('data-tweening');
-    if (data && data === 'scroll') {
-      e.preventDefault();
-    }
-  };
-    
-  K.truC = function (v) { // replace transparent and transform any color to rgba()/rgb()
-    var vrgb, y;
-    if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized
-      vrgb = v.replace(/[^\d,]/g, '').split(','); y = vrgb[3] ? vrgb[3] : null;
-      if (!y) {
-        return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
-      } else {
-        return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(y) };
-      }
-    }
-    if (/#/.test(v)) {
-      return { r: K.htr(v).r, g: K.htr(v).g, b: K.htr(v).b };
-    }
-    if (/transparent|none|initial|inherit/.test(v)) {
-      return { r: 0, g: 0, b: 0, a: 0 };
-    }
-  };
-    
-  K.rth = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
-    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-  };
-  K.htr = function (hex) {
-    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-    var shr = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-    hex = hex.replace(shr, function (m, r, g, b) {
-      return r + r + g + g + b + b;
-    });
-
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    } : null;
-  };  
-  
-  K.pe = function (es) { //process easing
-    if ( typeof es === 'function') {
-      return es;
-    } else if ( typeof es === 'string' ) {
-      if ( /easing|linear/.test(es) ) {
-        return K.Easing[es]; //regular Robert Penner Easing Functions
-      } else if ( /bezier/.test(es) )  { 
-        var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','), i = 0, l = bz.length;
-        for (i; i<l;i++) { bz[i] = parseFloat(bz[i]); }
-        return K.Ease.Bezier(bz[0],bz[1],bz[2],bz[3]); //bezier easing            
-      } else if ( /physics/.test(es) )  {
-        return K.Physics[es](); // predefined physics bezier based easing functions
-      } else {
-        return K.Ease[es](); // predefined bezier based easing functions            
-      }
-    }
-  };
-  
-  // core easing functions  
-  var _es = K.Easing = {};
-  _es.linear = function (t) { return t; };
-
-  var _PI = Math.PI, _2PI = Math.PI * 2, _hPI = Math.PI / 2,
-    _kea = 0.1, _kep = 0.4;
-  
-  _es.easingSinusoidalIn = function(t) { return -Math.cos(t * _hPI) + 1; };
-  _es.easingSinusoidalOut = function(t) { return Math.sin(t * _hPI); };
-  _es.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(_PI * t) - 1); };
-  _es.easingQuadraticIn = function (t) { return t*t; };
-  _es.easingQuadraticOut = function (t) { return t*(2-t); };
-  _es.easingQuadraticInOut = function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; };
-  _es.easingCubicIn = function (t) { return t*t*t; };
-  _es.easingCubicOut = function (t) { return (--t)*t*t+1; };
-  _es.easingCubicInOut = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; };
-  _es.easingQuarticIn = function (t) { return t*t*t*t; };
-  _es.easingQuarticOut = function (t) { return 1-(--t)*t*t*t; };
-  _es.easingQuarticInOut = function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; };
-  _es.easingQuinticIn = function (t) { return t*t*t*t*t; };
-  _es.easingQuinticOut = function (t) { return 1+(--t)*t*t*t*t; };
-  _es.easingQuinticInOut = function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; };
-  _es.easingCircularIn = function(t) { return -(Math.sqrt(1 - (t * t)) - 1); };
-  _es.easingCircularOut = function(t) { return Math.sqrt(1 - (t = t - 1) * t); };
-  _es.easingCircularInOut = function(t) {  return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); };
-  _es.easingExponentialIn = function(t) { return Math.pow(2, 10 * (t - 1)) - 0.001; };
-  _es.easingExponentialOut = function(t) { return 1 - Math.pow(2, -10 * t); };
-  _es.easingExponentialInOut = function(t) { return (t *= 2) < 1 ? 0.5 * Math.pow(2, 10 * (t - 1)) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))); };
-  _es.easingBackIn = function(t) { var s = 1.70158; return t * t * ((s + 1) * t - s); };
-  _es.easingBackOut = function(t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; };
-  _es.easingBackInOut = function(t) { var s = 1.70158 * 1.525;  if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));  return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2); };
-  _es.easingElasticIn = function(t) {
-    var s;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI;
-    return - ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI / _kep ) );
-  };
-  _es.easingElasticOut = function(t) {
-    var s;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI ;
-    return ( _kea * Math.pow( 2, - 10 * t) * Math.sin( ( t - s ) * _2PI  / _kep ) + 1 );
-  };
-  _es.easingElasticInOut = function(t) {
-    var s;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI ;
-    if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI  / _kep ) );
-    return _kea * Math.pow( 2, -10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI  / _kep ) * 0.5 + 1;
-  };
-  _es.easingBounceIn = function(t) { return 1 - _es.easingBounceOut( 1 - t ); };
-  _es.easingBounceOut = function(t) {
-    if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; } 
-    else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; } 
-    else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; } 
-    else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
-  };
-  _es.easingBounceInOut = function(t) { if ( t < 0.5 ) return _es.easingBounceIn( t * 2 ) * 0.5; return _es.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
-  
-  // single Tween object construct
-  K.Tween = function (_el, _vS, _vE, _o) {
-    this._el = _el; // element animation is applied to
-    this._dr = _o&&_o.duration || 700; //duration
-    this._r = _o&&_o.repeat || 0; // _repeat
-    this._vSR = {}; // internal valuesStartRepeat
-    this._vS = _vS; // valuesStart
-    this._vE = _vE; // valuesEnd
-    this._y = _o&&_o.yoyo || false; // _yoyo
-    this.playing = false; // _isPlaying
-    this.reversed = false; // _reversed
-    this._rD = _o&&_o.repeatDelay || 0; // _repeatDelay
-    this._dl = _o&&_o.delay || 0; //delay
-    this._sT = null; // startTime
-    this.paused = false; //_paused
-    this._pST = null; //_pauseStartTime    
-    this._to = _o.transformOrigin; // transform-origin    
-    this._pp = _o.perspective; // perspective    
-    this._ppo = _o.perspectiveOrigin; // perspective origin  
-    this._ppp = _o.parentPerspective; // parent perspective    
-    this._pppo = _o.parentPerspectiveOrigin; // parent perspective origin    
-    this._rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
-    this._hex = _o.keepHex || false; // option to keep hex for color tweens true/false
-    this._e = _o && _o.easing ? K.pe(_o.easing) : K.Easing.linear; // _easing function
-    this._cT = []; //_chainedTweens
-    this._sC = _o&&_o.start || null; // _on StartCallback
-    this._sCF = false; //_on StartCallbackFIRED
-    this._uC = _o&&_o.update || null; // _on UpdateCallback
-    this._cC = _o&&_o.complete || null; // _on CompleteCallback
-    this._pC = _o&&_o.pause || null; // _on PauseCallback
-    this._rC = _o&&_o.play || null; // _on ResumeCallback
-    this._stC = _o&&_o.stop || null; // _on StopCallback    
-    this.repeat = this._r; // we cache the number of repeats to be able to put it back after all cycles finish
-
-    K._queue(this);
-  };
-    
-  var w = K.Tween.prototype;
-        
-  w.start = function (t) {
-    this.scrollIn();
-    var f = {};
-    
-    K.perspective(this._el,this); // apply the perspective and transform origin
-        
-    if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method
-      f = this.prS();
-      this._vS = {};
-      this._vS = K.prP(f,false);
-      
-      for ( var p in this._vS ) {
-        if ( p === 'transform' && (p in this._vE) ){
-          for ( var sp in this._vS[p]) {
-            if (!(sp in this._vE[p])) { this._vE[p][sp] = {}; }
-            for ( var spp in this._vS[p][sp] ) { // 3rd level
-              if ( this._vS[p][sp][spp].value !== undefined ) {
-                if (!(spp in this._vE[p][sp])) { this._vE[p][sp][spp] = {}; }
-                for ( var sppp in this._vS[p][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d
-                  if ( !(sppp in this._vE[p][sp][spp])) {
-                    this._vE[p][sp][spp][sppp] = this._vS[p][sp][spp][sppp]; // sppp = unit | value
-                  }
-                }
-              }
-            }
-            if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level                    
-              for ( var spp1 in this._vS[p][sp] ) { // scale
-                if (!(spp1 in this._vE[p][sp])) {
-                  this._vE[p][sp][spp1] = this._vS[p][sp][spp1]; // spp = unit | value 
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    
-    for ( var e in this._vE ) {
-      this._vSR[e] = this._vS[e];      
-    }
-    if (!this._sCF) {
-      if (this._sC) { this._sC.call(); }
-      this._sCF = true;
-    }
-
-    // now it's a good time to start
-    _tws.push(this);
-    this.playing = true;
-    this.paused = false;
-    this._sCF = false;
-    this._sT = t || window.performance.now();
-    this._sT += this._dl;
-    
-    if (!_t) K._t();
-    
-    return this;
-  };
-        
-  w.stop = function () {
-    if (!this.paused && this.playing) {
-      K.remove(this);
-      this.playing = false;
-      this.paused = false;
-      this.scrollOut();
-        
-      if (this._stC !== null) {
-        this._stC.call();
-      }    
-      this.stopChainedTweens();
-      this.close();
-    }
-    return this;
-  };
-
-  w.pause = function() {
-    if (!this.paused && this.playing) {
-      K.remove(this);
-      this.paused = true;    
-      this._pST = window.performance.now();    
-      if (this._pC !== null) {
-        this._pC.call();
-      }
-    }
-    return this;
-  };
-
-  w.play = w.resume = function () {
-    if (this.paused && this.playing) {
-      this.paused = false;
-      if (this._rC !== null) { this._rC.call(); }        
-      this._sT += window.performance.now() - this._pST;    
-      K.add(this);
-      if (!_t) K._t();  // restart ticking if stopped
-    }
-    return this;
-  };
-
-  w.reverse = function () {
-    if (this._y) {
-      for (var p in this._vE) {
-        var tmp = this._vSR[p];
-        this._vSR[p] = this._vE[p];
-        this._vE[p] = tmp;  
-        this._vS[p] = this._vSR[p];    
-      }
-    }
-  };
-  
-  w.chain = function () {  this._cT = arguments; return this; };
-
-  w.stopChainedTweens = function () {
-    var i = 0, ctl =this._cT.length;
-    for (i; i < ctl; i++) {
-      this._cT[i].stop();
-    }
-  };
-  
-  w.scrollOut = function(){ //prevent scroll when tweening scroll    
-    if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
-      this.removeListeners();
-      document.body.removeAttribute('data-tweening');
-    }
-  };
-  
-  w.scrollIn = function(){
-    if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
-      if (!document.body.getAttribute('data-tweening') ) {
-        document.body.setAttribute('data-tweening', 'scroll');
-        this.addListeners();
-      }
-    }
-  };
-  
-  w.addListeners = function () {
-    document.addEventListener(_ev, K.preventScroll, false);
-  };
-
-  w.removeListeners = function () {
-    document.removeEventListener(_ev, K.preventScroll, false);
-  };
-    
-  //prepare valuesStart for .to() method
-  w.prS = function () { 
-    var f = {}, el = this._el, to = this._vS, cs = this.gIS('transform'), deg = ['rotate','skew'], ax = ['X','Y','Z'];
-        
-    for (var p in to){
-      if ( _tf.indexOf(p) !== -1 ) {
-        var r2d = (p === 'rotate' || p === 'translate' || p === 'scale');
-        if ( /translate/.test(p) && p !== 'translate' ) {
-          f['translate3d'] = cs['translate3d'] || _d[p];           
-        } else if ( r2d ) { // 2d transforms
-          f[p] = cs[p] || _d[p]; 
-        } else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
-          for (var d=0; d<2; d++) {
-            for (var a = 0; a<3; a++) {
-              var s = deg[d]+ax[a];                
-              if (_tf.indexOf(s) !== -1 && (s in to) ) { f[s] =  cs[s] || _d[s]; }
-            }
-          }
-        }
-      } else {
-        if ( _sc.indexOf(p) === -1 ) {                    
-          if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity  
-            var co = this.gCS('filter');          
-            f['opacity'] = typeof co === 'number' ? co : _d['opacity'];
-          } else {
-            f[p] = this.gCS(p) || _d[p];
-          }
-        } else {
-          f[p] = (el === null || el === undefined) ? (window.pageYOffset || _sct.scrollTop) : el.scrollTop;
-        }      
-      }
-    }
-    for ( var p in cs ){ // also add to _vS values from previous tweens  
-      if ( _tf.indexOf(p) !== -1 && (!( p in to )) ) {
-        f[p] = cs[p] || _d[p]; 
-      }    
-    }
-    return f;  
-  };  
-  
-  w.gIS = function(p) { // gIS = get transform style for element from cssText for .to() method, the sp is for transform property
-    if (!this._el) return; // if the scroll applies to `window` it returns as it has no styling
-    var l = this._el, cst = l.style.cssText,//the cssText  
-      trsf = {}; //the transform object
-    // if we have any inline style in the cssText attribute, usually it has higher priority
-    var css = cst.replace(/\s/g,'').split(';'), i=0, csl = css.length;    
-    for ( i; i<csl; i++ ){
-      if ( /transform/.test(css[i])) {
-        var tps = css[i].split(':')[1].split(')'), k=0, tpl = tps.length; //all transform properties        
-        for ( k; k< tpl; k++){
-          var tp = tps[k].split('('); //each transform property          
-          if ( tp[0] !== '' && _tf.indexOf(tp) ){
-            trsf[tp[0]] = /translate3d/.test(tp[0]) ? tp[1].split(',') : tp[1];
-          }
-        }
-      }
-    }
-    return trsf;
-  };
-  
-  w.gCS = function (p) { // gCS = get style property for element from computedStyle for .to() method
-    var el = this._el, cs = window.getComputedStyle(el) || el.currentStyle, //the computed style
-      ppp = ( !_isIE8 && _pfT && ( /transform|Radius/.test(p) ) ) ? ('-'+ _pf.toLowerCase()+'-'+p) : p, //prefixed property for CSS match
-      s = ( (_pfT && p==='transform' ) || (_pfT && _rd.indexOf(p) !== -1)) // s the property style value
-        ? cs[ppp]
-        : cs[p];
-
-    if ( p !== 'transform' && (ppp in cs) ) {
-      if ( s ){
-        if (ppp==='filter') { // handle IE8 opacity
-          var si1 = parseInt(s.split('=')[1].replace(')','')), si = parseFloat(si1/100);
-          return si;
-        } else {
-          return s;
-        }        
-      } else {      
-        return _d[p];
-      }      
-    }
-  };
-  
-  w.close = function () {
-    var self = this;
-    setTimeout(function(){
-      var i = _tws.indexOf(self);
-      if (i === _tws.length-1) { K.s(); }  
-      if (self.repeat > 0) { self._r = self.repeat; }
-      if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; }
-      self.playing = false;
-    },61)
-  };
-
-  // the multi elements Tween constructs
-  K.TweensAT = function (els, vE, o) { // .to
-    this.tweens = []; var i, tl = els.length, _o = []; 
-    for ( i = 0; i < tl; i++ ) {
-      _o[i] = o || {}; o.delay = o.delay || 0;
-      _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
-      this.tweens.push( K.to(els[i], vE, _o[i]) );
-    }
-  };
-  K.TweensFT = function (els, vS, vE, o) { // .fromTo
-    this.tweens = []; var i, tl = els.length, _o = []; 
-    for ( i = 0; i < tl; i++ ) {
-      _o[i] = o || {}; o.delay = o.delay || 0;
-      _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
-      this.tweens.push( K.fromTo(els[i], vS, vE, _o[i]) );
-    }
-  };
-  var ws = K.TweensAT.prototype = K.TweensFT.prototype;
-  ws.start = function(t){
-    t = t || window.performance.now(); 
-    var i, tl = this.tweens.length;
-    for ( i = 0; i < tl; i++ ) { 
-      this.tweens[i].start(t);
-    }
-    return this;
-  }
-  ws.stop = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].stop(); } return this; }
-  ws.pause = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].pause(); } return this; }
-  ws.play = ws.resume = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; }
-
-
-  //returns browser prefix
-  function getPrefix() { 
-    var div = document.createElement('div'), i = 0,  pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
-      s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
-      
-    for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; }  }
-    div = null;
-  }
-  
-  return K;
-}));

dist/kute-bezier.min.js

@@ -1,2 +0,0 @@
-// bezier easing for KUTE.js | dnp_theme | MIT License
-!function(n){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return n(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=n(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");window.KUTE.Ease=window.KUTE.Ease||n(e)}}(function(n){"use strict";var e=e||{};e.Bezier=function(n,e,r,u){return t.pB(n,e,r,u)};var t=e.Bezier.prototype;return t.ni=4,t.nms=.001,t.sp=1e-7,t.smi=10,t.ksts=11,t.ksss=1/(t.ksts-1),t.f32as="Float32Array"in window,t.msv=t.f32as?new Float32Array(t.ksts):new Array(t.ksts),t.A=function(n,e){return 1-3*e+3*n},t.B=function(n,e){return 3*e-6*n},t.C=function(n){return 3*n},t.r={},t.pB=function(n,e,r,u){this._p=!1;var i=this;return t.r=function(s){return i._p||t.pc(n,r,e,u),n===e&&r===u?s:0===s?0:1===s?1:t.cB(t.gx(s,n,r),e,u)},t.r},t.cB=function(n,e,r){return((t.A(e,r)*n+t.B(e,r))*n+t.C(e))*n},t.gS=function(n,e,r){return 3*t.A(e,r)*n*n+2*t.B(e,r)*n+t.C(e)},t.bS=function(n,e,r,u,i){var s,o,c=0,f=t.sp,a=t.smi;do o=e+(r-e)/2,s=t.cB(o,u,i)-n,s>0?r=o:e=o;while(Math.abs(s)>f&&++c<a);return o},t.nri=function(n,e,r,u){var i=0,s=t.ni;for(i;s>i;++i){var o=t.gS(e,r,u);if(0===o)return e;var c=t.cB(e,r,u)-n;e-=c/o}return e},t.csv=function(n,e){var r=0,u=t.ksts;for(r;u>r;++r)t.msv[r]=t.cB(r*t.ksss,n,e)},t.gx=function(n,e,r){for(var u=0,i=1,s=t.ksts-1;i!=s&&t.msv[i]<=n;++i)u+=t.ksss;--i;var o=(n-t.msv[i])/(t.msv[i+1]-t.msv[i]),c=u+o*t.ksss,f=t.gS(c,e,r),a=u+t.ksss;return f>=t.nms?t.nri(n,c,e,r):0===f?c:t.bS(n,u,a,e,r)},t.pc=function(n,e,r,u){this._p=!0,(n!=r||e!=u)&&t.csv(n,e)},e.easeIn=function(){return t.pB(.42,0,1,1)},e.easeOut=function(){return t.pB(0,0,.58,1)},e.easeInOut=function(){return t.pB(.5,.16,.49,.86)},e.easeInSine=function(){return t.pB(.47,0,.745,.715)},e.easeOutSine=function(){return t.pB(.39,.575,.565,1)},e.easeInOutSine=function(){return t.pB(.445,.05,.55,.95)},e.easeInQuad=function(){return t.pB(.55,.085,.68,.53)},e.easeOutQuad=function(){return t.pB(.25,.46,.45,.94)},e.easeInOutQuad=function(){return t.pB(.455,.03,.515,.955)},e.easeInCubic=function(){return t.pB(.55,.055,.675,.19)},e.easeOutCubic=function(){return t.pB(.215,.61,.355,1)},e.easeInOutCubic=function(){return t.pB(.645,.045,.355,1)},e.easeInQuart=function(){return t.pB(.895,.03,.685,.22)},e.easeOutQuart=function(){return t.pB(.165,.84,.44,1)},e.easeInOutQuart=function(){return t.pB(.77,0,.175,1)},e.easeInQuint=function(){return t.pB(.755,.05,.855,.06)},e.easeOutQuint=function(){return t.pB(.23,1,.32,1)},e.easeInOutQuint=function(){return t.pB(.86,0,.07,1)},e.easeInExpo=function(){return t.pB(.95,.05,.795,.035)},e.easeOutExpo=function(){return t.pB(.19,1,.22,1)},e.easeInOutExpo=function(){return t.pB(1,0,0,1)},e.easeInCirc=function(){return t.pB(.6,.04,.98,.335)},e.easeOutCirc=function(){return t.pB(.075,.82,.165,1)},e.easeInOutCirc=function(){return t.pB(.785,.135,.15,.86)},e.easeInBack=function(){return t.pB(.6,-.28,.735,.045)},e.easeOutBack=function(){return t.pB(.175,.885,.32,1.275)},e.easeInOutBack=function(){return t.pB(.68,-.55,.265,1.55)},e.slowMo=function(){return t.pB(0,.5,1,.5)},e.slowMo1=function(){return t.pB(0,.7,1,.3)},e.slowMo2=function(){return t.pB(0,.9,1,.1)},e});

dist/kute-jquery.min.js

@@ -1,2 +0,0 @@
-// KUTE jQuery Plugin for KUTE.js | by dnp_theme | License - MIT
-!function(e){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(n,i){return e(i,n),n});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),i=require("jquery");module.exports=e(i,n)}else{if("undefined"==typeof window.KUTE||"undefined"==typeof window.$&&"undefined"==typeof window.jQuery)throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");var i=window.jQuery||window.$,n=window.KUTE;i.fn.KUTE=e(i,n)}}(function(e,n){"use strict";var i=function(e,i,o,t){var r,u=[],f=this.length;for(r=0;f>r;r++){var d=this[r][e];"function"==typeof d&&d.apply(this[r]),"to"===e?u.push(new n[e](this[r],i,o)):"fromTo"===e||"Animate"===e?u.push(new n[e](this[r],i,o,t)):"chain"===e&&this[r].chain.apply(this[r],i)}return u};return i});

dist/kute-physics.min.js

@@ -1,2 +0,0 @@
-// dynamics easings KUTE.js | dnp_theme | MIT License 
-!function(n){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return n(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=n(r)}else{if("undefined"==typeof window.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.");window.KUTE.Physics=window.KUTE.Physics||n(r)}}(function(n){"use strict";var r=r||{},t=Math.PI/2;r.spring=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),t=Math.pow(20,(n.friction||200)/100),i=n.anticipationStrength||0,o=(n.anticipationSize||0)/1e3;return e.run=function(n){var u,c,a,f,p,y,s,h;return y=n/(1-o)-o/(1-o),o>n?(h=o/(1-o)-o/(1-o),s=0/(1-o)-o/(1-o),p=Math.acos(1/e.A1(n,h)),a=(Math.acos(1/e.A1(n,s))-p)/(r*-o),u=e.A1):(u=e.A2,p=0,a=1),c=u(y,o,i,t),f=r*(n-o)*a+p,1-c*Math.cos(f)},e.run};var e=r.spring.prototype;e.run={},e.A1=function(n,r,t){var e,i,o,u;return o=r/(1-r),u=0,i=(o-.8*u)/(o-u),e=(.8-i)/o,e*n*t/100+i},e.A2=function(n,r,t,e){return Math.pow(e/10,-n)*(1-n)},r.bounce=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),e=Math.pow(20,(n.friction||200)/100);return i.run=function(n){var i=Math.pow(e/10,-n)*(1-n),o=r*n*1+t;return i*Math.cos(o)},i.run};var i=r.bounce.prototype;i.run={},r.gravity=function(n){var r,t,e,i,u;return n=n||{},r=(n.bounciness||400)/1250,e=(n.elasticity||200)/1e3,u=n.initialForce||!1,i=100,t=[],o.L=function(){var n,t;for(n=Math.sqrt(2/i),t={a:-n,b:n,H:1},u&&(t.a=0,t.b=2*t.b);t.H>.001;)o.L=t.b-t.a,t={a:t.b,b:t.b+o.L*r,H:t.H*r*r};return t.b}(),function(){var n,c,a,f;for(c=Math.sqrt(2/(i*o.L*o.L)),a={a:-c,b:c,H:1},u&&(a.a=0,a.b=2*a.b),t.push(a),n=o.L,f=[];a.b<1&&a.H>.001;)n=a.b-a.a,a={a:a.b,b:a.b+n*r,H:a.H*e},f.push(t.push(a));return f}(),o.fn=function(r){var e,i,c;for(i=0,e=t[i];!(r>=e.a&&r<=e.b)&&(i+=1,e=t[i]););return c=e?o.getPointInCurve(e.a,e.b,e.H,r,n,o.L):u?0:1},o.fn};var o=r.gravity.prototype;o.L={},o.fn={},o.getPointInCurve=function(n,r,t,e,i,o){var u,c;return o=r-n,c=2/o*e-1-2*n/o,u=c*c*t-t+1,i.initialForce&&(u=1-u),u},r.forceWithGravity=function(n){var t=n||{};return t.initialForce=!0,r.gravity(t)},r.bezier=function(n){n=n||{};var r=n.points,t=!1,e=[];return function(){var n,t;for(n in r){if(t=parseInt(n),t>=r.length-1)break;u.fn(r[t],r[t+1],e)}return e}(),u.run=function(n){return 0===n?0:1===n?1:u.yForX(n,e,t)},u.run};var u=r.bezier.prototype;return u.B2={},u.run={},u.fn=function(n,r,t){var e=function(t){return u.Bezier(t,n,n.cp[n.cp.length-1],r.cp[0],r)};return t.push(e)},u.Bezier=function(n,r,t,e,i){return{x:Math.pow(1-n,3)*r.x+3*Math.pow(1-n,2)*n*t.x+3*(1-n)*Math.pow(n,2)*e.x+Math.pow(n,3)*i.x,y:Math.pow(1-n,3)*r.y+3*Math.pow(1-n,2)*n*t.y+3*(1-n)*Math.pow(n,2)*e.y+Math.pow(n,3)*i.y}},u.yForX=function(n,r,t){var e,i,o,u,c,a,f,p,y=0,s=r.length;for(e=null,y;s>y&&(i=r[y],n>=i(0).x&&n<=i(1).x&&(e=i),null===e);y++);if(!e)return t?0:1;for(p=1e-4,u=0,a=1,c=(a+u)/2,f=e(c).x,o=0;Math.abs(n-f)>p&&100>o;)n>f?u=c:a=c,c=(a+u)/2,f=e(c).x,o++;return e(c).y},r.physicsInOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.92-t/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+t/1e3,y:1}]}]})},r.physicsIn=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.92-t/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},r.physicsOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+t/1e3,y:1}]}]})},r.physicsBackOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+t/1e3,y:1.3}]}]})},r.physicsBackIn=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.28-t/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},r.physicsBackInOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.68-t/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+t/1e3,y:1.45}]}]})},r});

kute-bezier.js

@@ -5,50 +5,29 @@
  * optimized by dnp_theme 2015 – MIT License
  * Licensed under MIT-License
 */
-
-// /* THIS IS THE OLD CODE */
-// (function(kute_ea){
-//   // Obtain a reference to the base KUTE.
-//   // Since KUTE supports a variety of module systems,
-//   // we need to pick up which one to use.
-//   if(define == "function") {
-//     define(["./kute.js"], function(KUTE){ kute_ea(KUTE); return KUTE; });
-//   } else if(typeof module == "object" && typeof require == "function") {
-//     // We assume, that require() is sync.
-//     var KUTE = require("./kute.js");
-//     kute_ea(KUTE);
-//     // Export the modified one. Not really required, but convenient.
-//     module.exports = KUTE;
-//   } else if(typeof window.KUTE != "undefined") {
-//     kute_ea(window.KUTE);
-//   } else {
-//     throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
-//   }
-// })(function(KUTE){
   
-(function (factory) {
+(function (root,factory) {
   if (typeof define === 'function' && define.amd) {
-    define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
-  } else if(typeof module == "object" && typeof require == "function") {
-    // We assume, that require() is sync.
-    var KUTE = require("./kute.js");   
-    // Export the modified one. Not really required, but convenient.
-    module.exports = factory(KUTE);
-  } else if ( typeof window.KUTE !== 'undefined' ) {
+    define(['kute.js'], factory);
+  } else if(typeof module == 'object' && typeof require == 'function') {
+    module.exports = factory(require('kute.js'));
+  } else if ( typeof root.KUTE !== 'undefined' ) {
     // Browser globals		
-    window.KUTE.Ease = window.KUTE.Ease || factory(KUTE);
+    root.Bezier = factory(root.KUTE);
   } else {
-    throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");
+    throw new Error("Bezier Easing functions depend on KUTE.js");
   }
-}( function (KUTE) {
+}(this, function (KUTE) {
   'use strict';
-  var E = E || {};
 
-  E.Bezier = function(mX1, mY1, mX2, mY2) {
+  var g = typeof global !== 'undefined' ? global : window, E = {};
+  // E.Bezier = g.Bezier = function(mX1, mY1, mX2, mY2) {
+  g.Bezier = function(mX1, mY1, mX2, mY2) {
     return _bz.pB(mX1, mY1, mX2, mY2);
   };
 
-  var _bz = E.Bezier.prototype;
+  // var _bz = E.Bezier.prototype = g.Bezier.prototype;
+  var _bz = g.Bezier.prototype;
 
   // These values are established by empiricism with tests (tradeoff: performance VS precision)
   _bz.ni    = 4; // NEWTON_ITERATIONS
@@ -59,26 +38,24 @@
   _bz.ksts = 11; // k Spline Table Size
   _bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
 
-  _bz.f32as = 'Float32Array' in window; // float32ArraySupported
+  _bz.f32as = 'Float32Array' in g; // float32ArraySupported
   _bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
 
   _bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
   _bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
   _bz.C = function(aA1)      { return 3.0 * aA1; };
 
-  _bz.r = {};
   _bz.pB = function (mX1, mY1, mX2, mY2) {
     this._p = false; var self = this;
 
-    _bz.r = function(aX){
-          if (!self._p) _bz.pc(mX1, mX2, mY1, mY2);
-          if (mX1 === mY1 && mX2 === mY2) return aX;
+    return function(aX){
+      if (!self._p) _bz.pc(mX1, mX2, mY1, mY2);
+      if (mX1 === mY1 && mX2 === mY2) return aX;
 
-          if (aX === 0) return 0;
-          if (aX === 1) return 1;
-          return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);
+      if (aX === 0) return 0;
+      if (aX === 1) return 1;
+      return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);
     };
-    return _bz.r;
   };
 
   // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
@@ -152,47 +129,49 @@
         _bz.csv(mX1, mX2);
   };
 
+  g.Ease = {}; // export these functions to global for best performance
+
   // predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
   // _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
-  E.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
-  E.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
-  E.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
+  g.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
+  g.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
+  g.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
 
-  E.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
-  E.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
-  E.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
+  g.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
+  g.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
+  g.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
 
-  E.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
-  E.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
-  E.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
+  g.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
+  g.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
+  g.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
 
-  E.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
-  E.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
-  E.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
+  g.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
+  g.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
+  g.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
 
-  E.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
-  E.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
-  E.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
+  g.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
+  g.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
+  g.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
 
-  E.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
-  E.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
-  E.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
+  g.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
+  g.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
+  g.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
 
-  E.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
-  E.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
-  E.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
+  g.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
+  g.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
+  g.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
 
-  E.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
-  E.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
-  E.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
+  g.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
+  g.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
+  g.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
 
-  E.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
-  E.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
-  E.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
+  g.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
+  g.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
+  g.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
 
-  E.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
-  E.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
-  E.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
+  g.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
+  g.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
+  g.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
   
-  return E;
+  // return E;
 }));

kute-bs.js

@@ -0,0 +1,116 @@
+/* KUTE.js - The Light Tweening Engine
+ * package - Box Shadow Plugin
+ * desc - adds support for boxShadow property with an array of values [h-shadow, v-shadow, blur, spread, color, inset]
+ * examples
+ * var bShadowTween1 = KUTE.to('selector', {boxShadow: '1px 1px 1px #069'}); // accepting string value
+ * var bShadowTween2 = KUTE.to('selector', {boxShadow: [1, 1, 1, '#069', 'inset'] }); // accepting array value
+ * by dnp_theme
+ * Licensed under MIT-License
+ */
+
+(function (factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
+  } else if(typeof module == "object" && typeof require == "function") {
+    var KUTE = require("./kute.js");   
+    module.exports = factory(KUTE);
+  } else if ( typeof window.KUTE !== 'undefined' ) {
+    factory(KUTE);
+  } else {
+    throw new Error("Box Shadow Plugin require KUTE.js.");
+  }
+}( function (KUTE) {
+  'use strict';
+  
+  // filter unsupported browsers
+  if (!('boxShadow' in document.body.style)) {return;}
+  
+  // add a reference to KUTE object
+  var K = window.KUTE;
+
+  // the preffixed boxShadow property, mostly for legacy browsers
+  // maybe the browser is supporting the property with its vendor preffix
+  // box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
+  var _boxShadow = K.property('boxShadow'); // note we're using the KUTE.property() autopreffix utility
+  var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi; // a full RegEx for color strings
+
+  // for the .to() method, you need to prepareStart the boxShadow property
+  // which means you need to read the current computed value
+  K.prS['boxShadow'] = function(element,property,value){
+      var cssBoxShadow = K.gCS(element,'boxShadow');
+      return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
+  }
+
+  // the processProperty for boxShadow 
+  // registers the K.dom['boxShadow'] function 
+  // returns an array of 6 values with the following format
+  // [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
+  K.pp['boxShadow'] = function(property,value,element){
+    if ( !('boxShadow' in K.dom) ) {
+      
+      // the DOM update function for boxShadow registers here
+      // we only enqueue it if the boxShadow property is used to tween
+      K.dom['boxShadow'] = function(w,p,v) {
+        // let's start with the numbers | set unit | also determine inset
+        var numbers = [], unit = 'px', // the unit is always px
+          inset = w._vS[p][5] !== 'none' || w._vE[p][5] !== 'none' ? ' inset' : false; 
+        for (var i=0; i<4; i++){
+          numbers.push( (w._vS[p][i] + (w._vE[p][i] - w._vS[p][i]) * v ) + unit);
+        }
+
+        // now we handle the color
+        var color, _color = {}; 
+        for (var c in w._vE[p][4]) {
+          _color[c] = parseInt(w._vS[p][4][c] + (w._vE[p][4][c] - w._vS[p][4][c]) * v )||0;            
+        }
+        color = 'rgb(' + _color.r + ',' + _color.g + ',' + _color.b + ') ';          
+        
+        // the final piece of the puzzle, the DOM update
+        w._el.style[_boxShadow] = inset ? color + numbers.join(' ') + inset : color + numbers.join(' ');
+      };
+    }
+    
+    // processProperty for boxShadow, builds basic structure with ready to tween values
+    if (typeof value === 'string'){
+      var color, inset = 'none';
+      // make sure to always have the inset last if possible
+      inset = /inset/.test(value) ? 'inset' : inset;
+      value = /inset/.test(value) ? value.replace(/(\s+inset|inset+\s)/g,'') : value;
+   
+      // also getComputedStyle often returns color first "rgb(0, 0, 0) 15px 15px 6px 0px inset"
+      color = value.match(colRegEx); 
+      value = value.replace(color[0],'').split(' ').concat([color[0].replace(/\s/g,'')],[inset]);
+      
+      value = K.processBoxShadowArray(value);
+    } else if (value instanceof Array){
+      value = K.processBoxShadowArray(value);
+    }
+    return value;
+  }
+  
+  // utility function to process values accordingly
+  // numbers must be integers and color must be rgb object
+  K.processBoxShadowArray = function(shadow){
+    var newShadow, i;
+
+    if (shadow.length === 3) { // [h-shadow, v-shadow, color]
+      newShadow = [shadow[0], shadow[1], 0, 0, shadow[2], 'none'];
+    } else if (shadow.length === 4) { // [h-shadow, v-shadow, color, inset] | [h-shadow, v-shadow, blur, color]
+      newShadow = /inset|none/.test(shadow[3]) ? [shadow[0], shadow[1], 0, 0, shadow[2], shadow[3]] : [shadow[0], shadow[1], shadow[2], 0, shadow[3], 'none'];
+    } else if (shadow.length === 5) { // [h-shadow, v-shadow, blur, color, inset] | [h-shadow, v-shadow, blur, spread, color]
+      newShadow = /inset|none/.test(shadow[4]) ? [shadow[0], shadow[1], shadow[2], 0, shadow[3], shadow[4]] : [shadow[0], shadow[1], shadow[2], shadow[3], shadow[4], 'none'];           
+    } else if (shadow.length === 6) { // ideal [h-shadow, v-shadow, blur, spread, color, inset]
+      newShadow = shadow; 
+    }
+
+    // make sure the values are ready to tween
+    for (i=0;i<4;i++){
+      newShadow[i] = parseFloat(newShadow[i]);  
+    }
+    // also the color must be a rgb object
+    newShadow[4] = K.truC(newShadow[4]);
+    return newShadow;
+  }
+    
+  return this;
+}));

kute-effects.js

@@ -0,0 +1,114 @@
+/* KUTE.js - The Light Tweening Engine
+ * package - KUTE Effects Plugin
+ * desc - Customized and easy accessible FX effects
+ * by @dalisoft (https://github.com/dalisoft)
+ * Licensed under MIT-License
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(["./kute.js"], function (KUTE) {
+			factory(KUTE);
+			return KUTE;
+		});
+	} else if (typeof module == "object" && typeof require == "function") {
+		// We assume, that require() is sync.
+		var KUTE = require("./kute.js");
+		// Export the modified one. Not really required, but convenient.
+		module.exports = factory(KUTE);
+	} else if (typeof window.KUTE !== 'undefined') {
+		// Browser globals
+		factory(window.KUTE);
+	} else {
+		throw new Error("Effects plugin require KUTE.js.");
+	}
+}
+	(function (KUTE) {
+
+		KUTE.Effects = {
+			setEffect : function (name, to, options) {
+				KUTE.Effects[name] = function (element) {
+					return {
+						to : to,
+						options : options(element)
+					}
+				}
+			},
+			Show : function (element) {
+				return {
+					to : {
+						opacity : 1
+					},
+					options : {
+						start : function () {
+							element.style.display = 'block';
+						}
+					}
+				}
+			},
+			Hide : function (element) {
+				return {
+					to : {
+						opacity : 0
+					},
+					options : {
+						complete : function () {
+							element.style.display = 'none';
+						}
+					}
+				}
+			},
+			SlideUp : function (element) {
+				return {
+					to : {
+						height : 0
+					},
+					options : {
+						easing : 'easingQuadInOut',
+						complete : function () {
+							element.style.display = 'none';
+						}
+					}
+				}
+			},
+			/* TO-Do
+			SlideDown : function ( element ) {
+			return {
+			to : { maxHeight : 200 },
+			options : {
+			start : function () {
+			element.style.display = 'block';
+			element.style.height = '0px';
+			},
+			complete : function () {
+			element.style.height = '';
+			}
+			}
+			}
+			}*/
+		};
+
+		KUTE.setEffect = KUTE.Effects.setEffect;
+
+		// you can add effects with ```setEffect``` function like this
+		KUTE.Effects.setEffect('ScaleOut', { scale : [0, 0], }, function ( element ) {
+		return {
+			easing : 'easingQuadInOut',
+			complete : function () {
+				element.style.display = 'none';
+			}
+		}
+	  });
+
+		KUTE.pp['effect'] = function (property, effect, element) {
+
+			if (KUTE.Effects[effect]) {
+				var effects = KUTE.Effects[effect](element),
+				tween = KUTE.to(element, effects.to, effects.options).start();
+
+				KUTE.dom['effect'] = function (object, propertyName, value) {}
+			}
+
+			return {};
+		};
+
+	}));

kute-html.js

@@ -0,0 +1,30 @@
+/* KUTE.js - The Light Tweening Engine
+ * package - HTML Plugin
+ * desc - makes tween object with HTML
+ * by @dalisoft (https://github.com/dalisoft)
+ * Licensed under MIT-License
+ */
+
+(function (factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
+  } else if(typeof module == "object" && typeof require == "function") {
+    // We assume, that require() is sync.
+    var KUTE = require("./kute.js");   
+    // Export the modified one. Not really required, but convenient.
+    module.exports = factory(KUTE);
+  } else if ( typeof window.KUTE !== 'undefined' ) {
+    // Browser globals		
+    factory(window.KUTE);
+  } else {
+    throw new Error("HTML Plugin require KUTE.js.");
+  }
+}( function (KUTE) {
+  'use strict';
+		// performance-ready simple & lightweight HTML plug-in for KUTE.js
+	  var kute = [].slice.call(document.querySelectorAll('[kute]'));
+		  kute.map(function(k){
+			var type = k.getAttribute("kute"), prop = (new Function("return {" + k.getAttribute("kute-props") + "}")()), opt = (new Function("return {" + k.getAttribute("kute-options") + "}")())
+			KUTE[type](/all/.test(type) ? (k.getAttribute("class") || "").split(" ")[0] || k.tagName : k, type === "fromTo" ? prop.from : prop, type === "fromTo" ? prop.to : opt, type === "fromTo" && opt).start();
+		  });
+}));

kute-jquery.js

@@ -4,7 +4,7 @@
  * Licensed under MIT-License
  */
 
- (function(factory){
+(function(root,factory){
   // We need to require the root KUTE and jQuery.
   if (typeof define === 'function' && define.amd) {
     define(["./kute.js", "jquery"], function(KUTE, $){
@@ -18,32 +18,25 @@
     
     // Export the modified one. Not really required, but convenient.
     module.exports = factory($, KUTE);
-  } else if (typeof window.KUTE !== "undefined" && (typeof window.$ !== 'undefined' || typeof window.jQuery !== 'undefined' ) ) {
+  } else if (typeof root.KUTE !== "undefined" && (typeof root.$ !== 'undefined' || typeof root.jQuery !== 'undefined' ) ) {
     // jQuery always has two ways of existing... Find one, and pass.
-    var $ = window.jQuery || window.$, KUTE = window.KUTE;
-    $.fn.KUTE = factory($, KUTE);
+    var $ = root.jQuery || root.$, KUTE = root.KUTE;
+    factory($, KUTE);
   } else {
-    throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");
+    throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");
   }
- })(function($, KUTE) {
+ })(this, function($, KUTE) {
   'use strict';
-  var $K = function( method, start, end, ops ) { // method can be fromTo(), to(), stop(), start(), chain(), pause()
-    var tws = [], i, l = this.length;
 
-    for (i=0;i<l;i++){
-      var mt = this[i][method];
-      if ( typeof mt === 'function' ) {
-        mt.apply(this[i]);
-      }
-      if ( method === 'to' ) {
-        tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
-      } else if ( method === 'fromTo' || method === 'Animate' ) {
-        tws.push( new KUTE[method]( this[i], start, end, ops ) );
-      } else if ( method === 'chain' ) {
-        this[i].chain.apply(this[i],start);
-      }
-    }
-    return tws;
+  $.fn.fromTo = function(from,to,ops) {
+    var el = this.length > 1 ? this : this[0], method = this.length > 1 ? 'allFromTo' : 'fromTo';
+    return KUTE[method](el,from,to,ops);
   };
-  return $K;
-});
+
+  $.fn.to = function(to,ops) {
+    var el = this.length > 1 ? this : this[0], method = this.length > 1 ? 'allTo' : 'to';
+    return KUTE[method](el,to,ops);
+  };
+
+  return this;
+});

kute-matrix.js

@@ -0,0 +1,509 @@
+/* KUTE.js - The Light Tweening Engine
+ * package - Matrix Transform Plugin
+ * desc - adds the ability to animate transform with matrix / matrix3d
+ * by dnp_theme
+ * Licensed under MIT-License
+ */
+
+
+(function(factory){
+  if (typeof define === 'function' && define.amd) {
+    define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
+  } else if(typeof module == "object" && typeof require == "function") {
+    var KUTE = require("./kute.js");
+    // Export the modified one. Not really required, but convenient.
+    module.exports = factory(KUTE);
+  } else if(typeof window.KUTE != "undefined") {
+    // window.KUTE.Matrix = window.KUTE.Matrix || factory(KUTE);
+    factory(KUTE);
+  } else {
+    throw new Error("Matrix Plugin require KUTE.js.")
+  }
+})(function(KUTE){
+  'use strict';
+  var K = window.KUTE, _pf = K.getPrefix(),
+    _pfT = (!('transform' in document.body.style)) ? true : false, // is prefix required for transform
+    _tr = _pfT ? _pf + 'Transform' : 'transform',
+    _3d  = ['rotateX', 'rotateY','translateZ', 'perspective', 'rotate3d', 'scale3d', 'translate3d'], // transform properties that require perspective
+    _tf  = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale']; // transform
+  
+
+    /**
+     * CSSMatrix Shim
+     * @constructor
+     */
+    // CSS Matrix as implemented by @arian
+    // https://github.com/arian/M/blob/master/CSSMatrix.js
+    var CSSMatrix = function(){
+      var a = [].slice.call(arguments),
+        m = this;
+    //   if (a.length) for (var i = a.length; i--;){
+    //     if (Math.abs(a[i]) < CSSMatrix.SMALL_NUMBER) a[i] = 0;
+    //   }
+      m.setIdentity();
+      if (a.length == 16){
+        m.m11 = m.a = a[0];  m.m12 = m.b = a[1];  m.m13 = a[2];  m.m14 = a[3];
+        m.m21 = m.c = a[4];  m.m22 = m.d = a[5];  m.m23 = a[6];  m.m24 = a[7];
+        m.m31 = a[8];  m.m32 = a[9];  m.m33 = a[10]; m.m34 = a[11];
+        m.m41 = m.e = a[12]; m.m42 = m.f = a[13]; m.m43 = a[14]; m.m44 = a[15];
+      } else if (a.length == 6) {
+        this.affine = true;
+        m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m14 = m.e = a[4];
+        m.m21 = m.c = a[2]; m.m22 = m.d = a[3]; m.m24 = m.f = a[5];
+      } else if (a.length === 1 && typeof a[0] == 'string') {
+        m.setMatrixValue(a[0]);
+      } else if (a.length > 0) {
+        throw new TypeError('Invalid Matrix Value');
+      }
+    };
+
+    // decimal values in WebKitCSSMatrix.prototype.toString are truncated to 6 digits
+    CSSMatrix.SMALL_NUMBER = 1e-20;
+
+    // Transformations
+
+    // http://en.wikipedia.org/wiki/Rotation_matrix
+    CSSMatrix.Rotate = function(rx, ry, rz){
+      rx *= Math.PI / 180;
+      ry *= Math.PI / 180;
+      rz *= Math.PI / 180;
+      // minus sin() because of right-handed system
+      var cosx = Math.cos(rx), sinx = - Math.sin(rx);
+      var cosy = Math.cos(ry), siny = - Math.sin(ry);
+      var cosz = Math.cos(rz), sinz = - Math.sin(rz);
+      var m = new CSSMatrix();
+
+      m.m11 = m.a = cosy * cosz;
+      m.m12 = m.b = - cosy * sinz;
+      m.m13 = siny;
+
+      m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
+      m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
+      m.m23 = - sinx * cosy;
+
+      m.m31 = sinx * sinz - cosx * siny * cosz;
+      m.m32 = sinx * cosz + cosx * siny * sinz;
+      m.m33 = cosx * cosy;
+
+      return m;
+    };
+
+    CSSMatrix.RotateAxisAngle = function(x, y, z, angle){
+      angle *= Math.PI / 360;
+
+      var sinA = Math.sin(angle), cosA = Math.cos(angle), sinA2 = sinA * sinA;
+      var length = Math.sqrt(x * x + y * y + z * z);
+
+      if (length === 0){
+        // bad vector length, use something reasonable
+        x = 0;
+        y = 0;
+        z = 1;
+      } else {
+        x /= length;
+        y /= length;
+        z /= length;
+      }
+
+      var x2 = x * x, y2 = y * y, z2 = z * z;
+
+      var m = new CSSMatrix();
+      m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
+      m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA);
+      m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
+      m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA);
+      m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2;
+      m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
+      m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
+      m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
+      m.m33 = 1 - 2 * (x2 + y2) * sinA2;
+      m.m14 = m.m24 = m.m34 = 0;
+      m.m41 = m.e = m.m42 = m.f = m.m43 = 0;
+      m.m44 = 1;
+
+      return m;
+    };
+
+    CSSMatrix.ScaleX = function(x){
+      var m = new CSSMatrix();
+      m.m11 = m.a = x;
+      return m;
+    };
+
+    CSSMatrix.ScaleY = function(y){
+      var m = new CSSMatrix();
+      m.m22 = m.d = y;
+      return m;
+    };
+
+    CSSMatrix.ScaleZ = function(z){
+      var m = new CSSMatrix();
+      m.m33 = z;
+      return m;
+    };
+
+    CSSMatrix.Scale = function(x, y, z){
+      var m = new CSSMatrix();
+      m.m11 = m.a = x;
+      m.m22 = m.d = y;
+      m.m33 = z;
+      return m;
+    };
+
+    CSSMatrix.SkewX = function(angle){
+      angle *= Math.PI / 180;
+      var m = new CSSMatrix();
+      m.m21 = m.c = Math.tan(angle);
+      return m;
+    };
+
+    CSSMatrix.SkewY = function(angle){
+      angle *= Math.PI / 180;
+      var m = new CSSMatrix();
+      m.m12 = m.b = Math.tan(angle);
+      return m;
+    };
+
+    CSSMatrix.Translate = function(x, y, z){
+      var m = new CSSMatrix();
+      m.m41 = m.e = x;
+      m.m42 = m.f = y;
+      m.m43 = z;
+      return m;
+    };
+
+    CSSMatrix.multiply = function(m1, m2){
+
+      var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
+        m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42,
+        m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43,
+        m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
+
+        m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
+        m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
+        m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43,
+        m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
+
+        m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
+        m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
+        m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43,
+        m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
+
+        m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
+        m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
+        m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43,
+        m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
+
+      return new CSSMatrix( m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 );
+    };
+
+    // w3c defined methods
+
+    /**
+     * The setMatrixValue method replaces the existing matrix with one computed
+     * from parsing the passed string as though it had been assigned to the
+     * transform property in a CSS style rule.
+     * @param {String} string The string to parse.
+     */
+    CSSMatrix.prototype.setMatrixValue = function(string){
+      string = String(string).trim();
+      var m = this;
+      m.setIdentity();
+      if (string == 'none') return m;
+      var type = string.slice(0, string.indexOf('(')), parts, i;
+      if (type == 'matrix3d'){
+        parts = string.slice(9, -1).split(',');
+        for (i = parts.length; i--;) parts[i] = parseFloat(parts[i]);
+        m.m11 = m.a = parts[0]; m.m12 = m.b = parts[1]; m.m13 = parts[2];  m.m14 = parts[3];
+        m.m21 = m.c = parts[4]; m.m22 = m.d = parts[5]; m.m23 = parts[6];  m.m24 = parts[7];
+        m.m31 = parts[8]; m.m32 = parts[9]; m.m33 = parts[10]; m.m34 = parts[11];
+        m.m41 = m.e = parts[12]; m.m42 = m.f = parts[13]; m.m43 = parts[14]; m.m44 = parts[15];
+      } else if (type == 'matrix'){
+        m.affine = true;
+        parts = string.slice(7, -1).split(',');
+        for (i = parts.length; i--;) parts[i] = parseFloat(parts[i]);
+        m.m11 = m.a = parts[0]; m.m12 = m.b = parts[2]; m.m41 = m.e = parts[4];
+        m.m21 = m.c = parts[1]; m.m22 = m.d = parts[3]; m.m42 = m.f = parts[5];
+      } else {
+        throw new TypeError('Invalid Matrix Value');
+      }
+      return m;
+    };
+
+    /**
+     * The multiply method returns a new CSSMatrix which is the result of this
+     * matrix multiplied by the passed matrix, with the passed matrix to the right.
+     * This matrix is not modified.
+     *
+     * @param {CSSMatrix} m2
+     * @return {CSSMatrix} The result matrix.
+     */
+    CSSMatrix.prototype.multiply = function(m2){
+      return CSSMatrix.multiply(this, m2);
+    };
+
+    /**
+     * The translate method returns a new matrix which is this matrix post
+     * multiplied by a translation matrix containing the passed values. If the z
+     * component is undefined, a 0 value is used in its place. This matrix is not
+     * modified.
+     *
+     * @param {number} x X component of the translation value.
+     * @param {number} y Y component of the translation value.
+     * @param {number=} z Z component of the translation value.
+     * @return {CSSMatrix} The result matrix
+     */
+    CSSMatrix.prototype.translate = function(x, y, z){
+      if (z == null) z = 0;
+      return CSSMatrix.multiply(this, CSSMatrix.Translate(x, y, z));
+    };
+
+    /**
+     * The scale method returns a new matrix which is this matrix post multiplied by
+     * a scale matrix containing the passed values. If the z component is undefined,
+     * a 1 value is used in its place. If the y component is undefined, the x
+     * component value is used in its place. This matrix is not modified.
+     *
+     * @param {number} x The X component of the scale value.
+     * @param {number=} y The Y component of the scale value.
+     * @param {number=} z The Z component of the scale value.
+     * @return {CSSMatrix} The result matrix
+     */
+    CSSMatrix.prototype.scale = function(x, y, z){
+      if (y == null) y = x;
+      if (z == null) z = 1;
+      return CSSMatrix.multiply(this, CSSMatrix.Scale(x, y, z));
+    };
+
+    /**
+     * The rotate method returns a new matrix which is this matrix post multiplied
+     * by each of 3 rotation matrices about the major axes, first X, then Y, then Z.
+     * If the y and z components are undefined, the x value is used to rotate the
+     * object about the z axis, as though the vector (0,0,x) were passed. All
+     * rotation values are in degrees. This matrix is not modified.
+     *
+     * @param {number} rx The X component of the rotation value, or the Z component if the rotY and rotZ parameters are undefined.
+     * @param {number=} ry The (optional) Y component of the rotation value.
+     * @param {number=} rz The (optional) Z component of the rotation value.
+     * @return {CSSMatrix} The result matrix
+     */
+    CSSMatrix.prototype.rotate = function(rx, ry, rz){
+      if (ry == null) ry = rx;
+      if (rz == null) rz = rx;
+      return CSSMatrix.multiply(this, CSSMatrix.Rotate(rx, ry, rz));
+    };
+
+    /**
+     * The rotateAxisAngle method returns a new matrix which is this matrix post
+     * multiplied by a rotation matrix with the given axis and angle. The right-hand
+     * rule is used to determine the direction of rotation. All rotation values are
+     * in degrees. This matrix is not modified.
+     *
+     * @param {number} x The X component of the axis vector.
+     * @param {number=} y The Y component of the axis vector.
+     * @param {number=} z The Z component of the axis vector.
+     * @param {number} angle The angle of rotation about the axis vector, in degrees.
+     * @return {CSSMatrix} The result matrix
+     */
+    CSSMatrix.prototype.rotateAxisAngle = function(x, y, z, angle){
+      if (y == null) y = x;
+      if (z == null) z = x;
+      return CSSMatrix.multiply(this, CSSMatrix.RotateAxisAngle(x, y, z, angle));
+    };
+
+    // Defined in WebKitCSSMatrix, but not in the w3c draft
+
+    /**
+     * Specifies a skew transformation along the x-axis by the given angle.
+     *
+     * @param {number} angle The angle amount in degrees to skew.
+     * @return {CSSMatrix} The result matrix
+     */
+    CSSMatrix.prototype.skewX = function(angle){
+      return CSSMatrix.multiply(this, CSSMatrix.SkewX(angle));
+    };
+
+    /**
+     * Specifies a skew transformation along the x-axis by the given angle.
+     *
+     * @param {number} angle The angle amount in degrees to skew.
+     * @return {CSSMatrix} The result matrix
+     */
+    CSSMatrix.prototype.skewY = function(angle){
+      return CSSMatrix.multiply(this, CSSMatrix.SkewY(angle));
+    };
+
+    /**
+     * Returns a string representation of the matrix.
+     * @return {string}
+     */
+    CSSMatrix.prototype.toString = function(){
+      var m = this;
+
+      if (this.affine){
+        return  'matrix(' + [
+          m.a, m.b,
+          m.c, m.d,
+          m.e, m.f
+        ].join(', ') + ')';
+      }
+      // note: the elements here are transposed
+      return  'matrix3d(' + [
+        m.m11, m.m12, m.m13, m.m14,
+        m.m21, m.m22, m.m23, m.m24,
+        m.m31, m.m32, m.m33, m.m34,
+        m.m41, m.m42, m.m43, m.m44
+      ].join(', ') + ')';
+    };
+
+
+    // Additional methods
+
+    /**
+     * Set the current matrix to the identity form
+     *
+     * @return {CSSMatrix} this matrix
+     */
+    CSSMatrix.prototype.setIdentity = function(){
+      var m = this;
+      m.m11 = m.a = 1; m.m12 = m.b = 0; m.m13 = 0; m.m14 = 0;
+      m.m21 = m.c = 0; m.m22 = m.d = 1; m.m23 = 0; m.m24 = 0;
+      m.m31 = 0; m.m32 = 0; m.m33 = 1; m.m34 = 0;
+      m.m41 = m.e = 0; m.m42 = m.f = 0; m.m43 = 0; m.m44 = 1;
+      return this;
+    };
+
+    /**
+     * Transform a tuple (3d point) with this CSSMatrix
+     *
+     * @param {Tuple} an object with x, y, z and w properties
+     * @return {Tuple} the passed tuple
+     */
+    CSSMatrix.prototype.transform = function(t /* tuple */ ){
+      var m = this;
+
+      var x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w,
+        y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w,
+        z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w,
+        w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w;
+
+      t.x = x / w;
+      t.y = y / w;
+      t.z = z / w;
+
+      return t;
+    };
+
+    // CSSMatrix.prototype.toFullString = function(){
+    //   var m = this;
+    //   return [
+    //     [m.m11, m.m12, m.m13, m.m14].join(', '),
+    //     [m.m21, m.m22, m.m23, m.m24].join(', '),
+    //     [m.m31, m.m32, m.m33, m.m34].join(', '),
+    //     [m.m41, m.m42, m.m43, m.m44].join(', ')
+    //   ].join('\n');
+    // }; 
+  
+  CSSMatrix.Perspective = function(d){
+    var m = new CSSMatrix(); 
+    m.m34 = -1/d; 
+    return m;
+  };
+
+
+  
+  /**
+   * The perspective method returns a new matrix which is this matrix post
+   * multiplied by a perspective matrix containing the passed values. If the 
+   * y and z components are undefined, a 0 value is used in its place.
+   *
+   * @param {number} x X component of the perspective value.
+   * @param {number} y Y component of the perspective value.
+   * @param {number=} z Z component of the perspective value.
+   * @return {M} The result matrix
+   */
+  CSSMatrix.prototype.perspective = function(d){
+    return CSSMatrix.multiply(this, CSSMatrix.Perspective(d));
+  };  
+  
+  CSSMatrix.toMat4 = function(out, a) {
+    if (!out)
+        out = new Array(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
+  }
+  
+  CSSMatrix.prototype.toArray = function(p){
+    if (p === 'matrix'){
+      return [this.a, this.b, this.c, this.d, this.e, this.f];
+    } else {
+      return [this.m11, this.m12, this.m13, this.m14, this.m21, this.m22, this.m23, this.m24, this.m31, this.m32, this.m33, this.m34, this.m41, this.m42, this.m43, this.m44];
+    }
+  }
+
+  K.pp['matrix'] = function(p,v,l){
+    if ( !('matrix' in K.dom) ) {
+      K.dom['matrix'] = function(w,p,v) {
+        var m = [], i, l = w._vS[p].length, t = l===6 ? 'matrix' : 'matrix3d';
+        for (i=0; i<l; i++ ){
+          m.push( w._vS[p][i] + (w._vE[p][i] - w._vS[p][i]) * v)
+        }
+        w._el.style[_tr] = t + '(' + m + ')';
+      };
+    }
+    if (v instanceof Object){
+      return K.compose(v);
+    } else if (typeof v === 'string'){
+      return CSSMatrix.prototype.setMatrixValue(v);
+    } else if (v instanceof Array){
+      return v;
+    }
+  }
+
+  K.compose = function(o){
+    var m = new CSSMatrix(), p = 'matrix3d', ps, x, y ,z, rx, ry, rz, sx, sy, scx, scy, scz;
+    ps = o['perspective'] ? o['perspective'] : false;
+    x = o['translateX'] ? o['translateX'] : 0;
+    y = o['translateY'] ? o['translateY'] : 0;
+    z = o['translateZ'] ? o['translateZ'] : 0;
+    rx = o['rotateX'] ? o['rotateX'] : 0;
+    rz = o['rotateZ'] ? o['rotateZ'] : rx;
+    ry = o['rotateY'] ? o['rotateY'] : rx;
+    sx = o['skewX'] ? o['skewX'] : 0;
+    sy = o['skewY'] ? o['skewY'] : 0;
+    scx = o['scaleX'] ? o['scaleX'] : 1;
+    scy = o['scaleY'] ? o['scaleY'] : 1;
+    scz = o['scaleZ'] ? o['scaleZ'] : 1;
+
+    m = ps&&(rx||ry||z||scz!==1) ? m.perspective(ps) : m;
+    m = x||y||z ? m.translate(x, y, z) : m;
+    // m = rx!==0||ry!==0||rz!==0 ? m.rotate(rx,ry,rz) : m;
+    m = m.rotate(rx,0,0).rotate(0,ry,0).rotate(0,0,rz);
+    m = sx ? m.skewX(sx) : m;
+    m = sy ? m.skewY(sy) : m;
+    m = scx!==1||scy!==1||scz!==1 ? m.scale(scx, scy, scz) : m;
+    
+    p = ps&&(rx!==0||ry!==0||z!==0||scz!==1) ? p : 'matrix';
+    m = m.toArray(p);
+
+    return m;
+  };
+
+  return this;
+});  

kute-physics.js

@@ -6,29 +6,22 @@
  * Licensed under MIT-License
  */
 
-(function(factory){
-  // Obtain a reference to the base KUTE.
-  // Since KUTE supports a variety of module systems,
-  // we need to pick up which one to use.
+(function(root,factory){
   if (typeof define === 'function' && define.amd) {
-    define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
-  } else if(typeof module == "object" && typeof require == "function") {
-    // We assume, that require() is sync.
-    var KUTE = require("./kute.js");
-    
-    // Export the modified one. Not really required, but convenient.
-    module.exports = factory(KUTE);
-  } else if(typeof window.KUTE != "undefined") {
-    window.KUTE.Physics = window.KUTE.Physics || factory(KUTE);
+    define(['kute.js'], factory);
+  } else if(typeof module == 'object' && typeof require == 'function') {
+    module.exports = factory(require('kute.js'));
+  } else if ( typeof root.KUTE !== 'undefined' ) {
+    factory(root.KUTE);
   } else {
-    throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.")
+    throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js")
   }
-})(function(KUTE){
+})(this, function(KUTE){
   'use strict';
-  var P = P || {}, _hPI = Math.PI / 2;
+  var g = typeof global !== 'undefined' ? global : window;
 
   // spring easing
-  P.spring = function(options) {
+  g.spring = function(options) {
     options = options || {};
 
     var fq = Math.max(1, (options.frequency || 300 ) / 20),
@@ -36,13 +29,13 @@
         aSt = options.anticipationStrength || 0,
         aS = (options.anticipationSize || 0) / 1000;
 
-    _kps.run = function(t) {
-      var A, At, a, angle, b, frictionT, y0, yS;
+    return function(t) {
+      var A, At, a, angle, b, frictionT, y0, yS, dif = 1 - aS;
 
-      frictionT = (t / (1 - aS)) - (aS / (1 - aS));
+      frictionT = t / dif - aS / dif;
       if (t < aS) {
-        yS = (aS / (1 - aS)) - (aS / (1 - aS));
-        y0 = (0 / (1 - aS)) - (aS / (1 - aS));
+        yS = aS / dif - aS / dif;
+        y0 = 0 / dif - aS / dif;
         b = Math.acos(1 / _kps.A1(t,yS));
         a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
         A = _kps.A1;
@@ -55,12 +48,9 @@
       angle = fq * (t - aS) * a + b;
       return 1 - (At * Math.cos(angle));
     };
-
-    return _kps.run;
   };
 
-  var _kps = P.spring.prototype;
-  _kps.run = {};
+  var _kps = g.spring.prototype;
   _kps.A1 = function(t,aS,aSt) {
     var a, b, x0, x1;
     x0 = aS / (1 - aS);
@@ -75,26 +65,21 @@
 
 
   // bounce
-  P.bounce = function(options) {
+  g.bounce = function(options) {
     options = options || {};
     var fq = Math.max(1, (options.frequency || 300) / 20),
         f = Math.pow(20, (options.friction || 200) / 100);
 
-    _kpo.run = function(t) {
+    return function(t) {
       var At = Math.pow(f / 10, -t) * (1 - t),
-          angle = fq * t * 1 + _hPI;
+          angle = fq * t * 1 + Math.PI / 2;
       return At * Math.cos(angle);
     };
-    return _kpo.run;
   };
 
-  var _kpo = P.bounce.prototype;
-  _kpo.run = {};
-
-
   // gravity
-  P.gravity = function(options) {
-    var bounciness, curves, elasticity, gravity, initialForce;
+  g.gravity = function(options) {
+    var bounciness, curves, elasticity, gravity, initialForce, L;
 
     options = options || {};
     bounciness = ( options.bounciness || 400 ) / 1250;
@@ -103,7 +88,7 @@
 
     gravity = 100;
     curves = [];
-    _kpg.L = (function() {
+    L = (function() {
       var b, curve;
       b = Math.sqrt(2 / gravity);
       curve = {
@@ -116,10 +101,10 @@
         curve.b = curve.b * 2;
       }
       while (curve.H > 0.001) {
-        _kpg.L = curve.b - curve.a;
+        L = curve.b - curve.a;
         curve = {
           a: curve.b,
-          b: curve.b + _kpg.L * bounciness,
+          b: curve.b + L * bounciness,
           H: curve.H * bounciness * bounciness
         };
       }
@@ -128,7 +113,7 @@
 
     (function() {
       var L2, b, curve, _results;
-      b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
+      b = Math.sqrt(2 / (gravity * L * L));
       curve = {
         a: -b,
         b: b,
@@ -139,7 +124,7 @@
         curve.b = curve.b * 2;
       }
       curves.push(curve);
-      L2 = _kpg.L;
+      L2 = L;
       _results = [];
       while (curve.b < 1 && curve.H > 0.001) {
         L2 = curve.b - curve.a;
@@ -152,7 +137,7 @@
       }
       return _results;
     })();
-    _kpg.fn = function(t) {
+    return function(t) {
       var curve, i, v;
       i = 0;
       curve = curves[i];
@@ -166,17 +151,13 @@
       if (!curve) {
         v = initialForce ? 0 : 1;
       } else {
-        v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
+        v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, L);
       }
       return v;
     };
-
-    return _kpg.fn;
   };
 
-  var _kpg = P.gravity.prototype;
-  _kpg.L = {};
-  _kpg.fn = {};
+  var _kpg = g.gravity.prototype;
   _kpg.getPointInCurve = function(a, b, H, t, o, L) {
     var c, t2;
     L = b - a;
@@ -189,15 +170,14 @@
   };
 
   //throw up and pull down by gravity
-  P.forceWithGravity = function(o) {
+  g.forceWithGravity = function(o) {
     var ops = o || {};
     ops.initialForce = true;
-    return P.gravity(ops);
+    return g.gravity(ops);
   };
 
-
   // multi point bezier
-  P.bezier = function(options) {
+  g.BezierMultiPoint = function(options) {
     options = options || {};
     var points = options.points,
     returnsToSelf = false, Bs = [];
@@ -215,7 +195,7 @@
       return Bs;
     })();
 
-    _kpb.run = function(t) {
+    return function(t) {
       if (t === 0) {
         return 0;
       } else if (t === 1) {
@@ -224,12 +204,9 @@
         return _kpb.yForX(t, Bs, returnsToSelf);
       }
     };
-    return _kpb.run;
   };
 
-  var _kpb = P.bezier.prototype;
-  _kpb.B2 = {};
-  _kpb.run = {};
+  var _kpb = g.BezierMultiPoint.prototype;
 
   _kpb.fn = function(pointA, pointB, Bs) {
     var B2 = function(t) {
@@ -277,46 +254,44 @@
     return B(percent).y;
   };
 
-  P.physicsInOut = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
+  // export predefined BezierMultiPoint functions to window
+  g.Physics = {
+    physicsInOut : function(options) {
+      var friction;
+      options = options || {};
+      friction = options.friction|| 200;
+      return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
+    },
+    physicsIn : function(options) {
+      var friction;
+      options = options || {};
+      friction = options.friction|| 200;
+      return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
+    },
+    physicsOut : function(options) {
+      var friction;
+      options = options || {};
+      friction = options.friction|| 200;
+      return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }]  });
+    },
+    physicsBackOut : function(options) {
+      var friction;
+      options = options || {};
+      friction = options.friction|| 200;
+      return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:0.735+(friction/1000),y:1.3}]}]  });
+    },
+    physicsBackIn : function(options) {
+      var friction;
+      options = options || {};
+      friction = options.friction|| 200;
+      return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0.28-(friction / 1000),y:-0.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]  });
+    },
+    physicsBackInOut : function(options) {
+      var friction;
+      options = options || {};
+      friction = options.friction|| 200;
+      return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0.68-(friction / 1000),y:-0.55}]},{x:1,y:1,cp:[{x:0.265+(friction / 1000),y:1.45}]}]  });
+    }
   };
 
-  P.physicsIn = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
-  };
-
-  P.physicsOut = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }]  });
-  };
-
-  P.physicsBackOut = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}]  });
-  };
-
-  P.physicsBackIn = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}]  });
-  };
-
-  P.physicsBackInOut = function(options) {
-    var friction;
-    options = options || {};
-    friction = options.friction|| 500;
-    return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.68-(friction / 1000),"y":-0.55}]},{"x":1,"y":1,"cp":[{"x":0.265+(friction / 1000),"y":1.45}]}]  });
-  };
-  return P;
 });

kute-textticker.js

@@ -0,0 +1,63 @@
+/*!
+ * TextTickerPlugin.js
+ * version 1.0.0
+ * A string character tweening
+ * special for KUTE.js
+ * by @dalisoft (https://github.com/dalisoft)
+ * Licensed under MIT-License
+ */
+(function (factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
+  } else if(typeof module == "object" && typeof require == "function") {
+    var KUTE = require("./kute.js");   
+    module.exports = factory(KUTE);
+  } else if ( typeof window.KUTE !== 'undefined' ) {		
+    factory(window.KUTE);
+  } else {
+    throw new Error("TextTicker-Plugin requires KUTE.js.");
+  }
+}( function (KUTE) {
+
+	function TextTicker( element, _a ) {
+
+		return function ( _b ) {
+
+			var len = Math.max(_a.length, _b.length);
+
+			return function( value ) {
+
+				var substr = Math.floor( Math.min( value * len, len ) );
+
+				element.innerHTML = _b.substring( 0, substr ) + _a.substr( substr );
+				
+			};
+
+		}
+
+}
+
+KUTE.pp['text'] = function( prop, value, element ){
+
+	if ( typeof value === "string" ) {
+
+		var t = TextTicker( element, element.innerHTML )( value );
+
+		if ( !( 'text' in KUTE.dom ) ) {
+
+			KUTE.dom['text'] = function (elem, prop, value) {
+
+					t(value);
+			}
+
+		}
+
+	}
+
+	return this;
+
+}
+
+    return this;
+
+}));

kute.js

@@ -1,902 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * by dnp_theme
- * Licensed under MIT-License
- */
-
-(function (factory) {
-  if (typeof define === 'function' && define.amd) {
-    define([], factory); // AMD. Register as an anonymous module.
-  } else if (typeof exports == 'object') {
-    module.exports = factory(); // Node, not strict CommonJS
-  } else {
-    // Browser globals    
-    window.KUTE = window.KUTE || factory();
-  }
-}( function () {
-  "use strict";
-  var K = K || {}, _tws = [], _t = null,
-    _pf = getPrefix(), // prefix
-    _rafR = (!('requestAnimationFrame' in window)) ? true : false, // is prefix required for requestAnimationFrame
-    _pfT = (!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for transform
-    _pfB = (!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for border-radius
-    _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch?
-    _ev = _tch ? 'touchstart' : 'mousewheel', //event to prevent on scroll
-
-    _bd = document.body, _htm = document.getElementsByTagName('HTML')[0],
-    _sct = (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm),
-
-    _isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
-    _isIE8 = _isIE === 8, // check IE8/IE
-
-    //assign preffix to DOM properties
-    _pfto = _pfT ? _pf + 'TransformOrigin' : 'transformOrigin',
-    _pfp = _pfT ? _pf + 'Perspective' : 'perspective',
-    _pfo = _pfT ? _pf + 'PerspectiveOrigin' : 'perspectiveOrigin',
-    _tr = _pfT ? _pf + 'Transform' : 'transform',
-    _br = _pfB ? _pf + 'BorderRadius' : 'borderRadius',
-    _brtl = _pfB ? _pf + 'BorderTopLeftRadius' : 'borderTopLeftRadius',
-    _brtr = _pfB ? _pf + 'BorderTopRightRadius' : 'borderTopRightRadius',
-    _brbl = _pfB ? _pf + 'BorderBottomLeftRadius' : 'borderBottomLeftRadius',
-    _brbr = _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius',
-    _raf = _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'],
-    _caf = _rafR ? (window[_pf + 'CancelAnimationFrame'] || window[_pf + 'CancelRequestAnimationFrame']) : window['cancelAnimationFrame'],
-    
-    //supported properties
-    _cls = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
-    _sc  = ['scrollTop', 'scroll'], //scroll, it has no default value, it's calculated on tween start
-    _clp = ['clip'], // clip
-    _op  = ['opacity'], // opacity
-    _rd  = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
-    _bm  = ['top', 'left', 'right', 'bottom', 
-        'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
-        'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight', 
-        'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'], // dimensions / box model
-    _tp  = ['fontSize','lineHeight','letterSpacing'], // text properties
-    _bg  = ['backgroundPosition'], // background position
-    _3d  = ['rotateX', 'rotateY','translateZ'], // transform properties that require perspective
-    _tf  = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'], // transform
-    _all = _cls.concat(_sc, _clp, _op, _rd, _bm, _tp, _bg, _tf), al = _all.length,
-    _tfS = {}, _tfE = {}, _tlS = {}, _tlE = {}, _rtS = {}, _rtE = {}, //internal temp
-    _d = _d || {}; //all properties default values
-
-  //populate default values object
-  for ( var i=0; i< al; i++ ){
-    var p = _all[i];
-    if (_cls.indexOf(p) !== -1){
-      _d[p] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1};
-    } else if ( _rd.indexOf(p) !== -1 || _bm.indexOf(p) !== -1 || _tp.indexOf(p) !== -1) {
-      _d[p] = 0;      
-    } else if ( _bg.indexOf(p) !== -1 ){
-      _d[p] = [50,50];
-    } else if ( p === 'clip' ){
-      _d[p] = [0,0,0,0];       
-    } else if ( p === 'translate3d' ){
-      _d[p] = [0,0,0];
-    } else if ( p === 'translate' ){
-      _d[p] = [0,0];
-    } else if ( p === 'rotate' || /X|Y|Z/.test(p) ){
-      _d[p] = 0;    
-    } else if ( p === 'scale' || p === 'opacity' ){
-      _d[p] = 1;    
-    }
-  }
-  
-  // main methods
-  K.to = function (el, to, o) {  
-    var _el = typeof el === 'object' ? el : document.querySelector(el),
-        _vS = to, _vE = K.prP(to, true);  // we're gonna have to build _vS object at start
-    o = o || {}; o.rpr = true;
-    return new K.Tween(_el, _vS, _vE, o);
-  };
-
-  K.fromTo = function (el, f, to, o) {
-    var _el = typeof el === 'object' ? el : document.querySelector(el),
-        _vS = K.prP(f, false), _vE = K.prP(to, true); o = o || {};
-    return new K.Tween(_el, _vS, _vE, o);
-  };
-  
-  // multiple elements tweening
-  K.allTo = function (el, to, o) {
-    var _els = typeof el === 'object' && el.length ? el : document.querySelectorAll(el);
-    return new K.TweensAT(_els, to, o);
-  };
-  K.allFromTo = function (el, f, to, o) {
-    var _els = typeof el === 'object' && el.length ? el : document.querySelectorAll(el);
-    return new K.TweensFT(_els, f, to, o); 
-  };
-  
-  // render functions
-  K._r = {}; var _r = K._r;
-  K._u = function(w,t) {
-    t = t || window.performance.now();
-    if (t < w._sT && w.playing && !w.paused) { return true; }
-
-    var p, s = s || w._sT, 
-      d = d || w._dr, 
-      e = ( t - s ) / d,
-      ve = ve || w._vE,
-      es = es || w._e;
-    e = e > 1 ? 1 : e;
-    
-    //render the CSS update
-    for (p in ve){
-      _r[p](w,p,es(e));
-    }
-    
-    if (w._uC) { w._uC.call(); }
-
-    if (e === 1) {  
-      if (w._r > 0) {
-        if ( w._r < 9999 ) { w._r--; }      
-        
-        if (w._y) { w.reversed = !w.reversed; w.reverse(); } // handle yoyo
-          
-        w._sT = (w._y && !w.reversed) ? t + w._rD : t; //set the right time for delay
-        return true;        
-      } else {
-        
-        if (w._cC) { w._cC.call(); }
-        
-        //stop preventing scroll when scroll tween finished 
-        w.scrollOut();
-        
-        // start animating chained tweens
-        var i = 0, ctl = w._cT.length;
-        for (i; i < ctl; i++) {
-          w._cT[i].start(w._sT + w._dr);
-        }
-        
-        //stop ticking when finished
-        w.close();          
-        return false;
-      }
-    }
-    return true;
-  }; 
-  
-  var _u = K._u;
-  // internal ticker
-  K._t = function (t) {
-    var i = 0, tl; 
-    _t = _raf(K._t); 
-    while ( i < (tl = _tws.length) ) {
-      if ( _u(_tws[i],t) ) {
-        i++;
-      } else {
-        _tws.splice(i, 1);
-      }
-    }
-    return true;
-  };
-  
-  // aplies the transform origin and perspective
-  K.perspective = function (l,w) {
-    if ( w._to !== undefined ) { l.style[_pfto] = w._to; } // element transform origin    
-    if ( w._ppo !== undefined ) { l.style[_pfo] = w._ppo; } // element perspective origin
-    if ( w._ppp !== undefined ) { l.parentNode.style[_pfp] = w._ppp + 'px'; } // parent perspective  
-    if ( w._pppo !== undefined ) { l.parentNode.style[_pfo] = w._pppo; } // parent perspective origin
-  };
-  
-  //more internals
-  K.getAll = function () { return _tws; };
-  K.removeAll = function () {  _tws = []; };
-  K.add = function (tw) {  _tws.push(tw); };
-  K.remove = function (tw) {
-    var i = _tws.indexOf(tw);
-    if (i !== -1) {
-      _tws.splice(i, 1);
-    }
-  };  
-  K.s = function () { _caf(_t);  _t = null; }; 
-  
-  // builds render functions for the render object K.render(w, p, w._e(e));
-  K._queue = function (w) {
-    for ( var p in w._vE ) {
-      // checking array on every frame takes time so let's cache these
-      var cls = _cls.indexOf(p) !== -1, 
-        bm = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1,
-        rd = _rd.indexOf(p) !== -1,
-        sc = _sc.indexOf(p) !== -1,
-        bg = _bg.indexOf(p) !== -1,
-        clp = _clp.indexOf(p) !== -1,
-        op = _op.indexOf(p) !== -1,
-        tf = p === 'transform';
-        
-      //process styles by property / property type
-      if ( bm && (!(p in K._r)) ) {
-        K._r[p] = function(w,p,v) {
-          w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-        };
-      } else if ( rd && (!(p in K._r)) ) {
-        if (p === 'borderRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_br] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };        
-        } else if (p === 'borderTopLeftRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brtl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderTopRightRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brtr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderBottomLeftRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brbl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderBottomRightRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brbr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        }
-      } else if (tf && (!(p in K._r)) ) {
-
-        K._r[p] = function(w,p,v) {
-          var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) ';
-          for (tP in w._vE[p]) {
-            var t1 = w._vS[p][tP], t2 = w._vE[p][tP];
-            rps = rps || _3d.indexOf(tP) !== -1 && !_isIE; 
-
-            if ( tP === 'translate' ) {
-              var tls = '', ts = {}, ax;
-
-              for (ax in t2){
-                var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px';
-                ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;  
-              }
-              tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
-                'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';                  
-
-              _tS = (_tS === '') ? tls : (tls + ' ' + _tS);              
-            } else if ( tP === 'rotate' ) {
-              var rt = '', rS = {}, rx;
-
-              for ( rx in t2 ){
-                if ( t1[rx] ) {
-                  var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg', 
-                    av = a1 + (a2 - a1) * v;
-                  rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
-                }
-              }
-              rt = t2.z ?  rS.z  : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
-
-              _tS = (_tS === '') ? rt : (_tS + ' ' + rt);  
-            } else if (tP==='skew') {
-              var sk = '', sS = {};
-              for ( var sx in t2 ){
-                if ( t1[sx] ) {
-                  var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg', 
-                    sv = s1 + (s2 - s1) * v;
-                  sS[sx] = sx + '(' + sv + su + ') ';
-                }
-              }
-              sk = (sS.skewX||'') + (sS.skewY||'');
-              _tS = (_tS === '') ? sk : (_tS + ' ' + sk);          
-            } else if (tP === 'scale') {
-              var sc1 = t1.value, sc2 = t2.value,
-                s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';                  
-              _tS = (_tS === '') ? scS : (_tS + ' ' + scS);
-            }
-          }
-          w._el.style[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS;
-        };
-
-      } else if ( cls && (!(p in K._r)) ) {
-        K._r[p] = function(w,p,v) {
-          var _c = {}; 
-          for (var c in w._vE[p].value) {
-            if ( c !== 'a' ){
-              _c[c] = parseInt(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v )||0;            
-            } else {
-              _c[c] = (w._vS[p].value[c] && w._vE[p].value[c]) ? parseFloat(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v) : null;
-            }          
-          }
-
-          if ( w._hex ) {
-            w._el.style[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) );
-          } else {
-            w._el.style[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';          
-          }                    
-        };
-      } else if ( sc && (!(p in K._r)) ) {   
-        K._r[p] = function(w,p,v) {
-          w._el = (w._el === undefined || w._el === null) ? _sct : w._el;
-          w._el.scrollTop = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
-        };
-      } else if ( bg && (!(p in K._r))  ) {        
-        K._r[p] = function(w,p,v) {
-          var px1 = w._vS[p].x.v, px2 = w._vE[p].x.v, py1 = w._vS[p].y.v, py2 = w._vE[p].y.v,
-            px = (px1 + ( px2 - px1 ) * v), pxu = '%', py = (py1 + ( py2 - py1 ) * v), pyu = '%';      
-          w._el.style[p] = px + pxu + ' ' + py + pyu;
-        };
-      } else if ( clp && (!(p in K._r))  ) {
-        K._r[p] = function(w,p,v) {
-          var h = 0, cl = [];
-          for (h;h<4;h++){
-            var c1 = w._vS[p][h].v, c2 = w._vE[p][h].v, cu = w._vE[p][h].u || 'px';
-            cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu;
-          }  
-          w._el.style[p] = 'rect('+cl+')';
-        };
-      } else if ( op && (!(p in K._r)) ) {
-        if (_isIE8) {
-          K._r[p] = function(w,p,v) {
-            w._el.style.filter = "alpha(opacity=" + ( w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v) * 100 + ")";
-          };
-        } else {
-          K._r[p] = function(w,p,v) {
-            w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
-          };
-        }
-      }
-    }       
-  };
-        
-  // process properties
-  K.prP = function (t, e) { // process tween properties for .fromTo() method 
-    var _st = {},
-      tr = e === true ? _tfE : _tfS,
-      tl = e === true ? _tlE : _tlS,
-      rt = e === true ? _rtE : _rtS;
-
-    tl = {}; tr = {};
-
-    for (var x in t) {
-      if (_tf.indexOf(x) !== -1) {
-        
-        if (x !== 'translate' && /translate/.test(x)) { //process translate3d
-          var ta = ['X', 'Y', 'Z'], f = 0; //coordinates //   translate[x] = pp(x, t[x]);  
-
-          for (f; f < 3; f++) {        
-            var a = ta[f];
-            if ( /3d/.test(x) ) {
-              tl['translate' + a] = K.pp('translate' + a, t[x][f]);                
-            } else {
-              tl['translate' + a] = ('translate' + a in t) ? K.pp('translate' + a, t['translate' + a]) : { value: 0, unit: 'px' };
-            }
-          }
-
-          tr['translate'] = tl;
-        } else if ( x !== 'rotate' && /rotate|skew/.test(x)) { //process rotation
-          var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], r = 0, 
-            _rt = {}, _sk = {}, rt = ap === 'rotate' ? _rt : _sk; 
-          for (r; r < 3; r++) {
-            var v = ra[r];
-            if ( t[ap+v] !== undefined && x !== 'skewZ' ) {
-              rt[ap+v] = K.pp(ap + v, t[ap+v]);
-            }
-          }
-          
-          tr[ap] = rt;
-        } else if ( x === 'translate' || x === 'rotate' || x === 'scale' ) { //process 2d translation / rotation
-          tr[x] = K.pp(x, t[x]);
-        }
-
-        _st['transform'] = tr;
-
-      } else if (_tf.indexOf(x) === -1)  {
-        _st[x] = K.pp(x, t[x]);
-      }
-    }
-    return _st;
-  };
-    
-  // _cls _sc _op _bm _tp _bg _tf     
-  K.pp = function(p, v) {//process single property
-    if (_tf.indexOf(p) !== -1) {
-      var t = p.replace(/X|Y|Z/, ''), tv;
-      if (p === 'translate3d') { 
-        tv = v.split(','); 
-        return {
-          translateX : { value: K.truD(tv[0]).v, unit: K.truD(tv[0]).u },
-          translateY : { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u },
-          translateZ : { value: K.truD(tv[2]).v, unit: K.truD(tv[2]).u }
-        };
-      } else if (p !== 'translate' && t === 'translate') {
-        return { value: K.truD(v).v, unit: (K.truD(v).u||'px') };
-      } else if (p !== 'rotate' && (t === 'skew' || t === 'rotate') && p !== 'skewZ' ) {
-        return { value: K.truD(v).v, unit: (K.truD(v,p).u||'deg') };
-      } else if (p === 'translate') {
-        tv = typeof v === 'string' ? v.split(',') : v; var t2d = {};
-        if (tv instanceof Array) {
-          t2d.x = { value: K.truD(tv[0]).v, unit: K.truD(tv[0]).u },
-          t2d.y = { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u }
-        } else {
-          t2d.x = { value: K.truD(tv).v, unit: K.truD(tv).u },
-          t2d.y = { value: 0, unit: 'px' }        
-        }
-        return t2d;
-      } else if (p === 'rotate') {
-        var r2d = {};
-        r2d.z = { value: parseInt(v, 10), unit: (K.truD(v,p).u||'deg') };
-        return r2d;
-      } else if (p === 'scale') {
-        return { value: parseFloat(v, 10) };
-      }
-    }
-    if (_tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1) {
-      return { value: K.truD(v).v, unit: K.truD(v).u };
-    }
-    if (_op.indexOf(p) !== -1) {
-      return { value: parseFloat(v, 10) };
-    }
-    if (_sc.indexOf(p) !== -1) {
-      return { value: parseFloat(v, 10) };
-    }
-    if (_clp.indexOf(p) !== -1) {
-      if ( v instanceof Array ){
-        return [ K.truD(v[0]), K.truD(v[1]), K.truD(v[2]), K.truD(v[3]) ];
-      } else {        
-        var ci;
-        if ( /rect/.test(v) ) {
-          ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/); 
-        } else if ( /auto|none|initial/.test(v) ){
-          ci = _d[p];  
-        }        
-        return [ K.truD(ci[0]),  K.truD(ci[1]), K.truD(ci[2]),  K.truD(ci[3]) ];
-      }  
-    }
-    if (_cls.indexOf(p) !== -1) {
-      return { value: K.truC(v) };
-    }
-    if (_bg.indexOf(p) !== -1) {
-      if ( v instanceof Array ){        
-        return { x: K.truD(v[0])||{ v: 50, u: '%' }, y: K.truD(v[1])||{ v: 50, u: '%' } };
-      } else {
-        var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g),
-          xp = K.truD(posxy[0]), yp = K.truD(posxy[1]);
-        return { x: xp, y: yp };
-      }  
-    }
-    if (_rd.indexOf(p) !== -1) {
-      var rad = K.truD(v);
-      return { value: rad.v, unit: rad.u };
-    }
-  };
-    
-  K.truD = function (d,p) { //true dimension returns { v = value, u = unit }
-    var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length, 
-      y = getU();
-    function getU() {
-      var u,i=0;
-      for (i;i<l;i++) { if ( typeof d === 'string' && d.indexOf(mu[i]) !== -1 ) u = mu[i]; }
-      u = u !== undefined ? u : (p ? 'deg' : 'px')
-      return u;
-    }
-    return { v: x, u: y };
-  };
-  
-  K.preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll
-    var data = document.body.getAttribute('data-tweening');
-    if (data && data === 'scroll') {
-      e.preventDefault();
-    }
-  };
-    
-  K.truC = function (v) { // replace transparent and transform any color to rgba()/rgb()
-    var vrgb, y;
-    if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized
-      vrgb = v.replace(/[^\d,]/g, '').split(','); y = vrgb[3] ? vrgb[3] : null;
-      if (!y) {
-        return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
-      } else {
-        return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(y) };
-      }
-    }
-    if (/#/.test(v)) {
-      return { r: K.htr(v).r, g: K.htr(v).g, b: K.htr(v).b };
-    }
-    if (/transparent|none|initial|inherit/.test(v)) {
-      return { r: 0, g: 0, b: 0, a: 0 };
-    }
-  };
-    
-  K.rth = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
-    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-  };
-  K.htr = function (hex) {
-    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-    var shr = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-    hex = hex.replace(shr, function (m, r, g, b) {
-      return r + r + g + g + b + b;
-    });
-
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    } : null;
-  };  
-  
-  K.pe = function (es) { //process easing
-    if ( typeof es === 'function') {
-      return es;
-    } else if ( typeof es === 'string' ) {
-      if ( /easing|linear/.test(es) ) {
-        return K.Easing[es]; //regular Robert Penner Easing Functions
-      } else if ( /bezier/.test(es) )  { 
-        var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','), i = 0, l = bz.length;
-        for (i; i<l;i++) { bz[i] = parseFloat(bz[i]); }
-        return K.Ease.Bezier(bz[0],bz[1],bz[2],bz[3]); //bezier easing            
-      } else if ( /physics/.test(es) )  {
-        return K.Physics[es](); // predefined physics bezier based easing functions
-      } else {
-        return K.Ease[es](); // predefined bezier based easing functions            
-      }
-    }
-  };
-  
-  // core easing functions  
-  var _es = K.Easing = {};
-  _es.linear = function (t) { return t; };
-
-  var _PI = Math.PI, _2PI = Math.PI * 2, _hPI = Math.PI / 2,
-    _kea = 0.1, _kep = 0.4;
-  
-  _es.easingSinusoidalIn = function(t) { return -Math.cos(t * _hPI) + 1; };
-  _es.easingSinusoidalOut = function(t) { return Math.sin(t * _hPI); };
-  _es.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(_PI * t) - 1); };
-  _es.easingQuadraticIn = function (t) { return t*t; };
-  _es.easingQuadraticOut = function (t) { return t*(2-t); };
-  _es.easingQuadraticInOut = function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; };
-  _es.easingCubicIn = function (t) { return t*t*t; };
-  _es.easingCubicOut = function (t) { return (--t)*t*t+1; };
-  _es.easingCubicInOut = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; };
-  _es.easingQuarticIn = function (t) { return t*t*t*t; };
-  _es.easingQuarticOut = function (t) { return 1-(--t)*t*t*t; };
-  _es.easingQuarticInOut = function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; };
-  _es.easingQuinticIn = function (t) { return t*t*t*t*t; };
-  _es.easingQuinticOut = function (t) { return 1+(--t)*t*t*t*t; };
-  _es.easingQuinticInOut = function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; };
-  _es.easingCircularIn = function(t) { return -(Math.sqrt(1 - (t * t)) - 1); };
-  _es.easingCircularOut = function(t) { return Math.sqrt(1 - (t = t - 1) * t); };
-  _es.easingCircularInOut = function(t) {  return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); };
-  _es.easingExponentialIn = function(t) { return Math.pow(2, 10 * (t - 1)) - 0.001; };
-  _es.easingExponentialOut = function(t) { return 1 - Math.pow(2, -10 * t); };
-  _es.easingExponentialInOut = function(t) { return (t *= 2) < 1 ? 0.5 * Math.pow(2, 10 * (t - 1)) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))); };
-  _es.easingBackIn = function(t) { var s = 1.70158; return t * t * ((s + 1) * t - s); };
-  _es.easingBackOut = function(t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; };
-  _es.easingBackInOut = function(t) { var s = 1.70158 * 1.525;  if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));  return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2); };
-  _es.easingElasticIn = function(t) {
-    var s;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI;
-    return - ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI / _kep ) );
-  };
-  _es.easingElasticOut = function(t) {
-    var s;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI ;
-    return ( _kea * Math.pow( 2, - 10 * t) * Math.sin( ( t - s ) * _2PI  / _kep ) + 1 );
-  };
-  _es.easingElasticInOut = function(t) {
-    var s;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI ;
-    if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI  / _kep ) );
-    return _kea * Math.pow( 2, -10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI  / _kep ) * 0.5 + 1;
-  };
-  _es.easingBounceIn = function(t) { return 1 - _es.easingBounceOut( 1 - t ); };
-  _es.easingBounceOut = function(t) {
-    if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; } 
-    else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; } 
-    else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; } 
-    else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
-  };
-  _es.easingBounceInOut = function(t) { if ( t < 0.5 ) return _es.easingBounceIn( t * 2 ) * 0.5; return _es.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
-  
-  // single Tween object construct
-  K.Tween = function (_el, _vS, _vE, _o) {
-    this._el = _el; // element animation is applied to
-    this._dr = _o&&_o.duration || 700; //duration
-    this._r = _o&&_o.repeat || 0; // _repeat
-    this._vSR = {}; // internal valuesStartRepeat
-    this._vS = _vS; // valuesStart
-    this._vE = _vE; // valuesEnd
-    this._y = _o&&_o.yoyo || false; // _yoyo
-    this.playing = false; // _isPlaying
-    this.reversed = false; // _reversed
-    this._rD = _o&&_o.repeatDelay || 0; // _repeatDelay
-    this._dl = _o&&_o.delay || 0; //delay
-    this._sT = null; // startTime
-    this.paused = false; //_paused
-    this._pST = null; //_pauseStartTime    
-    this._to = _o.transformOrigin; // transform-origin    
-    this._pp = _o.perspective; // perspective    
-    this._ppo = _o.perspectiveOrigin; // perspective origin  
-    this._ppp = _o.parentPerspective; // parent perspective    
-    this._pppo = _o.parentPerspectiveOrigin; // parent perspective origin    
-    this._rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
-    this._hex = _o.keepHex || false; // option to keep hex for color tweens true/false
-    this._e = _o && _o.easing ? K.pe(_o.easing) : K.Easing.linear; // _easing function
-    this._cT = []; //_chainedTweens
-    this._sC = _o&&_o.start || null; // _on StartCallback
-    this._sCF = false; //_on StartCallbackFIRED
-    this._uC = _o&&_o.update || null; // _on UpdateCallback
-    this._cC = _o&&_o.complete || null; // _on CompleteCallback
-    this._pC = _o&&_o.pause || null; // _on PauseCallback
-    this._rC = _o&&_o.play || null; // _on ResumeCallback
-    this._stC = _o&&_o.stop || null; // _on StopCallback    
-    this.repeat = this._r; // we cache the number of repeats to be able to put it back after all cycles finish
-
-    K._queue(this);
-  };
-    
-  var w = K.Tween.prototype;
-        
-  w.start = function (t) {
-    this.scrollIn();
-    var f = {};
-    
-    K.perspective(this._el,this); // apply the perspective and transform origin
-        
-    if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method
-      f = this.prS();
-      this._vS = {};
-      this._vS = K.prP(f,false);
-      
-      for ( var p in this._vS ) {
-        if ( p === 'transform' && (p in this._vE) ){
-          for ( var sp in this._vS[p]) {
-            if (!(sp in this._vE[p])) { this._vE[p][sp] = {}; }
-            for ( var spp in this._vS[p][sp] ) { // 3rd level
-              if ( this._vS[p][sp][spp].value !== undefined ) {
-                if (!(spp in this._vE[p][sp])) { this._vE[p][sp][spp] = {}; }
-                for ( var sppp in this._vS[p][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d
-                  if ( !(sppp in this._vE[p][sp][spp])) {
-                    this._vE[p][sp][spp][sppp] = this._vS[p][sp][spp][sppp]; // sppp = unit | value
-                  }
-                }
-              }
-            }
-            if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level                    
-              for ( var spp1 in this._vS[p][sp] ) { // scale
-                if (!(spp1 in this._vE[p][sp])) {
-                  this._vE[p][sp][spp1] = this._vS[p][sp][spp1]; // spp = unit | value 
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    
-    for ( var e in this._vE ) {
-      this._vSR[e] = this._vS[e];      
-    }
-    if (!this._sCF) {
-      if (this._sC) { this._sC.call(); }
-      this._sCF = true;
-    }
-
-    // now it's a good time to start
-    _tws.push(this);
-    this.playing = true;
-    this.paused = false;
-    this._sCF = false;
-    this._sT = t || window.performance.now();
-    this._sT += this._dl;
-    
-    if (!_t) K._t();
-    
-    return this;
-  };
-        
-  w.stop = function () {
-    if (!this.paused && this.playing) {
-      K.remove(this);
-      this.playing = false;
-      this.paused = false;
-      this.scrollOut();
-        
-      if (this._stC !== null) {
-        this._stC.call();
-      }    
-      this.stopChainedTweens();
-      this.close();
-    }
-    return this;
-  };
-
-  w.pause = function() {
-    if (!this.paused && this.playing) {
-      K.remove(this);
-      this.paused = true;    
-      this._pST = window.performance.now();    
-      if (this._pC !== null) {
-        this._pC.call();
-      }
-    }
-    return this;
-  };
-
-  w.play = w.resume = function () {
-    if (this.paused && this.playing) {
-      this.paused = false;
-      if (this._rC !== null) { this._rC.call(); }        
-      this._sT += window.performance.now() - this._pST;    
-      K.add(this);
-      if (!_t) K._t();  // restart ticking if stopped
-    }
-    return this;
-  };
-
-  w.reverse = function () {
-    if (this._y) {
-      for (var p in this._vE) {
-        var tmp = this._vSR[p];
-        this._vSR[p] = this._vE[p];
-        this._vE[p] = tmp;  
-        this._vS[p] = this._vSR[p];    
-      }
-    }
-  };
-  
-  w.chain = function () {  this._cT = arguments; return this; };
-
-  w.stopChainedTweens = function () {
-    var i = 0, ctl =this._cT.length;
-    for (i; i < ctl; i++) {
-      this._cT[i].stop();
-    }
-  };
-  
-  w.scrollOut = function(){ //prevent scroll when tweening scroll    
-    if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
-      this.removeListeners();
-      document.body.removeAttribute('data-tweening');
-    }
-  };
-  
-  w.scrollIn = function(){
-    if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
-      if (!document.body.getAttribute('data-tweening') ) {
-        document.body.setAttribute('data-tweening', 'scroll');
-        this.addListeners();
-      }
-    }
-  };
-  
-  w.addListeners = function () {
-    document.addEventListener(_ev, K.preventScroll, false);
-  };
-
-  w.removeListeners = function () {
-    document.removeEventListener(_ev, K.preventScroll, false);
-  };
-    
-  //prepare valuesStart for .to() method
-  w.prS = function () { 
-    var f = {}, el = this._el, to = this._vS, cs = this.gIS('transform'), deg = ['rotate','skew'], ax = ['X','Y','Z'];
-        
-    for (var p in to){
-      if ( _tf.indexOf(p) !== -1 ) {
-        var r2d = (p === 'rotate' || p === 'translate' || p === 'scale');
-        if ( /translate/.test(p) && p !== 'translate' ) {
-          f['translate3d'] = cs['translate3d'] || _d[p];           
-        } else if ( r2d ) { // 2d transforms
-          f[p] = cs[p] || _d[p]; 
-        } else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
-          for (var d=0; d<2; d++) {
-            for (var a = 0; a<3; a++) {
-              var s = deg[d]+ax[a];                
-              if (_tf.indexOf(s) !== -1 && (s in to) ) { f[s] =  cs[s] || _d[s]; }
-            }
-          }
-        }
-      } else {
-        if ( _sc.indexOf(p) === -1 ) {                    
-          if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity  
-            var co = this.gCS('filter');          
-            f['opacity'] = typeof co === 'number' ? co : _d['opacity'];
-          } else {
-            f[p] = this.gCS(p) || _d[p];
-          }
-        } else {
-          f[p] = (el === null || el === undefined) ? (window.pageYOffset || _sct.scrollTop) : el.scrollTop;
-        }      
-      }
-    }
-    for ( var p in cs ){ // also add to _vS values from previous tweens  
-      if ( _tf.indexOf(p) !== -1 && (!( p in to )) ) {
-        f[p] = cs[p] || _d[p]; 
-      }    
-    }
-    return f;  
-  };  
-  
-  w.gIS = function(p) { // gIS = get transform style for element from cssText for .to() method, the sp is for transform property
-    if (!this._el) return; // if the scroll applies to `window` it returns as it has no styling
-    var l = this._el, cst = l.style.cssText,//the cssText  
-      trsf = {}; //the transform object
-    // if we have any inline style in the cssText attribute, usually it has higher priority
-    var css = cst.replace(/\s/g,'').split(';'), i=0, csl = css.length;    
-    for ( i; i<csl; i++ ){
-      if ( /transform/.test(css[i])) {
-        var tps = css[i].split(':')[1].split(')'), k=0, tpl = tps.length; //all transform properties        
-        for ( k; k< tpl; k++){
-          var tp = tps[k].split('('); //each transform property          
-          if ( tp[0] !== '' && _tf.indexOf(tp) ){
-            trsf[tp[0]] = /translate3d/.test(tp[0]) ? tp[1].split(',') : tp[1];
-          }
-        }
-      }
-    }
-    return trsf;
-  };
-  
-  w.gCS = function (p) { // gCS = get style property for element from computedStyle for .to() method
-    var el = this._el, cs = window.getComputedStyle(el) || el.currentStyle, //the computed style
-      ppp = ( !_isIE8 && _pfT && ( /transform|Radius/.test(p) ) ) ? ('-'+ _pf.toLowerCase()+'-'+p) : p, //prefixed property for CSS match
-      s = ( (_pfT && p==='transform' ) || (_pfT && _rd.indexOf(p) !== -1)) // s the property style value
-        ? cs[ppp]
-        : cs[p];
-
-    if ( p !== 'transform' && (ppp in cs) ) {
-      if ( s ){
-        if (ppp==='filter') { // handle IE8 opacity
-          var si1 = parseInt(s.split('=')[1].replace(')','')), si = parseFloat(si1/100);
-          return si;
-        } else {
-          return s;
-        }        
-      } else {      
-        return _d[p];
-      }      
-    }
-  };
-  
-  w.close = function () {
-    var self = this;
-    setTimeout(function(){
-      var i = _tws.indexOf(self);
-      if (i === _tws.length-1) { K.s(); }  
-      if (self.repeat > 0) { self._r = self.repeat; }
-      if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; }
-      self.playing = false;
-    },61)
-  };
-
-  // the multi elements Tween constructs
-  K.TweensAT = function (els, vE, o) { // .to
-    this.tweens = []; var i, tl = els.length, _o = []; 
-    for ( i = 0; i < tl; i++ ) {
-      _o[i] = o || {}; o.delay = o.delay || 0;
-      _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
-      this.tweens.push( K.to(els[i], vE, _o[i]) );
-    }
-  };
-  K.TweensFT = function (els, vS, vE, o) { // .fromTo
-    this.tweens = []; var i, tl = els.length, _o = []; 
-    for ( i = 0; i < tl; i++ ) {
-      _o[i] = o || {}; o.delay = o.delay || 0;
-      _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
-      this.tweens.push( K.fromTo(els[i], vS, vE, _o[i]) );
-    }
-  };
-  var ws = K.TweensAT.prototype = K.TweensFT.prototype;
-  ws.start = function(t){
-    t = t || window.performance.now(); 
-    var i, tl = this.tweens.length;
-    for ( i = 0; i < tl; i++ ) { 
-      this.tweens[i].start(t);
-    }
-    return this;
-  }
-  ws.stop = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].stop(); } return this; }
-  ws.pause = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].pause(); } return this; }
-  ws.play = ws.resume = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; }
-
-
-  //returns browser prefix
-  function getPrefix() { 
-    var div = document.createElement('div'), i = 0,  pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
-      s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
-      
-    for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; }  }
-    div = null;
-  }
-  
-  return K;
-}));

package.json

@@ -1,26 +0,0 @@
-{
-  "name": "kute.js",
-  "version": "1.0.1",
-  "description": "A minimal Native Javascript animation engine with jQuery plugin.",
-  "main": "kute.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/thednp/kute.js.git"
-  },
-  "keywords": [
-    "kute.js",
-    "animation engine",
-    "animations",
-    "native-javascript"
-  ],
-  "author": "thednp",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/thednp/kute.js/issues"
-  },
-  "homepage": "http://thednp.github.io/kute.js",
-  "dependencies": {}
-}