From 65c14a6cce8d40b20eff0f9bad32cb9f1587ade6 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 3 Aug 2015 16:53:17 +0300 Subject: [PATCH 001/187] Create kute-dev --- kute-dev | 999 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 999 insertions(+) create mode 100644 kute-dev diff --git a/kute-dev b/kute-dev new file mode 100644 index 0000000..a3b52a1 --- /dev/null +++ b/kute-dev @@ -0,0 +1,999 @@ +/* KUTE.js - The Light Tweening Engine + * by dnp_theme + * Licensed under MIT-License + */ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['KUTE'], factory); + } else if (typeof exports === 'object') { + // Node, not strict CommonJS + module.exports = factory(require('KUTE')); + } else { + // Browser globals + root.KUTE = root.KUTE || factory(root.KUTE); + } +}(this, function () { + 'use strict'; + var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick, + _pf = _pf || getPrefix(), // prefix + _rafR = _rafR || ((!('requestAnimationFrame' in window)) ? true : false), // is prefix required for requestAnimationFrame + _pfT = _pfT || ((!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for transform + _tch = _tch || (('ontouchstart' in window || navigator.msMaxTouchPoints) || false), // support Touch? + _ev = _ev || (_tch ? 'touchstart' : 'mousewheel'), //event to prevent on scroll + + _bd = document.body, + _htm = document.getElementsByTagName('HTML')[0], + _sct = _sct || (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm), + + _isIE = _isIE || document.documentElement.classList.contains('ie'), + _isIE8 = _isIE8 || document.documentElement.classList.contains('ie8'), + + //assign preffix to DOM properties + _pfp = _pfp || _pfT ? _pf + 'Perspective' : 'perspective', + _pfo = _pfo || _pfT ? _pf + 'PerspectiveOrigin' : 'perspectiveOrigin', + _tr = _tr || _pfT ? _pf + 'Transform' : 'transform', + _br = _br || _pfT ? _pf + 'BorderRadius' : 'borderRadius', + _brtl = _brtl || _pfT ? _pf + 'BorderTopLeftRadius' : 'borderTopLeftRadius', + _brtr = _brtr || _pfT ? _pf + 'BorderTopRightRadius' : 'borderTopRightRadius', + _brbl = _brbl || _pfT ? _pf + 'BorderBottomLeftRadius' : 'borderBottomLeftRadius', + _brbr = _brbr || _pfT ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius', + _raf = _raf || _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'], + _caf = _caf || _rafR ? window[_pf + 'CancelAnimationFrame'] : 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/% + _dm = ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'], // dimensions / box model + _po = ['top', 'left', 'right', 'bottom'], // position + _bg = ['backgroundPosition'], // background position TO DO + _3d = ['rotateX', 'rotateY','translateZ'], // transform properties that require perspective + _tf = ['matrix', 'matrix3d', 'rotateX', 'rotateY', 'rotateZ', 'translate3d', 'translateX', 'translateY', 'translateZ', 'skewX', 'skewY', 'scale'], // transform + _all = _cls.concat(_sc, _clp, _op, _rd, _dm, _po, _bg, _tf), al = _all.length, + // _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo"], + + _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 || _dm.indexOf(p) !== -1 || _po.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 === 'matrix' ){ + _d[p] = [1, 0, 0, 1, 0, 0]; + } else if ( p === 'matrix3d' ){ + _d[p] = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; + } else if ( p === 'translate3d' ){ + _d[p] = [0,0,0]; + } else if ( /X|Y|Z/.test(p) ){ + _d[p] = 0; + } else if ( p === 'scale' || p === 'opacity' ){ + _d[p] = 1; + } + } + + //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); + } + }; + + // internal ticker + K.t = function (t) { + _t = _raf(K.t); + var i = 0, l = _tws.length; + while ( i < l ) { + if (!_tws[i]) {return false;} + if (K.u(_tws[i],t)) { + i++; + } else { + _tws.splice(i, 1); + } + } + _stk = false; + return true; + }; + + // internal stopTick + K.s = function () { + if ( _stk === false ) { + _caf(_t); + _stk = true; + _t = null; + } + }; + + //main methods + K.to = function (el, to, o) { + var _el = _el || typeof el === 'object' ? el : document.querySelector(el), + _o = _o || o; + + _o.rpr = true; + _o.toMatrix = o.toMatrix||false; + _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; + + var _vS = to, // we're gonna have to build this object at start + _vE = K.prP(to, true), + _tw = new K.Tween(_el, _vS, _vE, _o); + + return _tw; + }; + + K.fromTo = function (el, f, to, o) { + var _el = _el || typeof el === 'object' ? el : document.querySelector(el); + var _o = o; + + _o.toMatrix = o.toMatrix||false; + _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; + + var _vS = K.prP(f, false), + _vE = K.prP(to, true), + _tw = new K.Tween(_el, _vS, _vE, _o); + + return _tw; + }; + // fallback method for previous versions + K.Animate = function (el, f, to, o) { + return K.fromTo(el, f, to, o); + }; + + //main worker, doing update on tick + K.u = function(w,t) { + if (t < w._sT) { return true; } + + if (!w._sCF) { + if (w._sC) { w._sC.call(); } + w._sCF = true; + } + + var e = ( t - w._sT ) / w._dr; //elapsed + e = e > 1 ? 1 : e; + var _v = w._e(e); + + //render the CSS update + K.r(w,_v); + + if (w._uC) { w._uC.call(); } + + if (e === 1) { + if (w._r > 0) { + if ( w._r !== Infinity ) {w._r--; } + var p; + // reassign starting values, restart by making _sT = now + for (p in w._vSR) { + if (w._y) { + var tmp = w._vSR[p]; + w._vSR[p] = w._vE[p]; + w._vE[p] = tmp; + } + w._vS[p] = w._vSR[p]; + } + if (w._y) { w._rv = !w._rv; } + + //set the right time for delay + w._sT = (w._y && !w._rv) ? t + w._rD : t; + return true; + } else { + if (w._cC) { w._cC.call(); } + //stop ticking when finished + w.close(); + //stop preventing scroll when scroll tween finished + w.scrollOut(); + var i = 0, ctl = w._cT.length; + for (i; i < ctl; i++) { + w._cT[i].start(t); + } + return false; + } + } + return true; + }; + + // render for each property + K.r = function (w,v) { + var p; + for (p in w._vE) { + + var _start = w._vS[p], + _end = w._vE[p], + v1 = _start.value, + v2 = _end.value, + u = _end.unit; + + //process styles by property / property type + if (p === 'transform') { + var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) '; //transform style & property + + for (tP in _end) { + var t1 = _start[tP], t2 = _end[tP]; + rps = _3d.indexOf(tP) !== -1; + if ( /matrix/.test(tP) ) { //if (!t1) return false; + var i=0, va = []; + for ( i; i 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); + }; + + //returns browser prefix + function getPrefix(){ + var div = document.createElement('div'), i = 0, pf = ['Moz', 'Webkit', 'O', 'Ms'], + s = ['MozTransform', 'WebkitTransform', 'OTransform', 'MsTransform'], pl = s.length; + for (i; i < pl; i++) { if (s[i] in div.style) return pf[i]; } + div = null; + return false; + } + + return K; +})); From 7903fcd16605c552c780e184baffc00153ccb9b6 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 3 Aug 2015 16:54:59 +0300 Subject: [PATCH 002/187] Rename kute-dev to kute-dev.js --- kute-dev => kute-dev.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename kute-dev => kute-dev.js (100%) diff --git a/kute-dev b/kute-dev.js similarity index 100% rename from kute-dev rename to kute-dev.js From ae8d9d9472e45c228498130bc89ec1dd73dd9f20 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 3 Aug 2015 18:28:28 +0300 Subject: [PATCH 003/187] Update kute-dev.js --- kute-dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kute-dev.js b/kute-dev.js index a3b52a1..2d726ab 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -829,7 +829,7 @@ } }; - K.Ease = {}; K.Easing = {}; K.Physics = {}; // we build nice ease objects here + K.Ease = {}; /*K.Easing = {}; K.Physics = {};*/ // we build nice ease objects here //high performance for accuracy (smoothness) trade K.Easing.linear = function (t) { return t; }; From 0a24580341c7bbc3142253f8118364d9317d604c Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 3 Aug 2015 18:29:58 +0300 Subject: [PATCH 004/187] Update kute-dev.js --- kute-dev.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 2d726ab..64a1882 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -829,10 +829,10 @@ } }; - K.Ease = {}; /*K.Easing = {}; K.Physics = {};*/ // we build nice ease objects here + K.Ease = {}; /*K.Easing = {}; K.Physics = {}; // we build nice ease objects here //high performance for accuracy (smoothness) trade - K.Easing.linear = function (t) { return t; }; + K.Easing.linear = function (t) { return t; };*/ //high accuracy for tiny performance trade K.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); }; From d5a18b8fd578b55acd033a7c6f6a5faed823a848 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 18 Sep 2015 18:29:15 +0300 Subject: [PATCH 005/187] Update kute-dev.js --- kute-dev.js | 306 +++++++++++++++++++--------------------------------- 1 file changed, 113 insertions(+), 193 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 64a1882..f245948 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -15,7 +15,6 @@ root.KUTE = root.KUTE || factory(root.KUTE); } }(this, function () { - 'use strict'; var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick, _pf = _pf || getPrefix(), // prefix _rafR = _rafR || ((!('requestAnimationFrame' in window)) ? true : false), // is prefix required for requestAnimationFrame @@ -28,7 +27,6 @@ _sct = _sct || (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm), _isIE = _isIE || document.documentElement.classList.contains('ie'), - _isIE8 = _isIE8 || document.documentElement.classList.contains('ie8'), //assign preffix to DOM properties _pfp = _pfp || _pfT ? _pf + 'Perspective' : 'perspective', @@ -47,14 +45,16 @@ _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/% - _dm = ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'], // dimensions / box model - _po = ['top', 'left', 'right', 'bottom'], // position - _bg = ['backgroundPosition'], // background position TO DO + _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 = ['matrix', 'matrix3d', 'rotateX', 'rotateY', 'rotateZ', 'translate3d', 'translateX', 'translateY', 'translateZ', 'skewX', 'skewY', 'scale'], // transform - _all = _cls.concat(_sc, _clp, _op, _rd, _dm, _po, _bg, _tf), al = _all.length, - // _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo"], + _all = _cls.concat(_sc, _clp, _op, _rd, _bm, _tp, _bg, _tf), al = _all.length, _tfS = {}, _tfE = {}, _tlS = {}, _tlE = {}, _rtS = {}, _rtE = {}, //internal temp @@ -65,7 +65,7 @@ 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 || _dm.indexOf(p) !== -1 || _po.indexOf(p) !== -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]; @@ -98,11 +98,12 @@ // internal ticker K.t = function (t) { _t = _raf(K.t); - var i = 0, l = _tws.length; + var i = 0, l = _tws.length; while ( i < l ) { - if (!_tws[i]) {return false;} + if (!_tws[i]) {return false;} + if (K.u(_tws[i],t)) { - i++; + i++; } else { _tws.splice(i, 1); } @@ -122,9 +123,9 @@ //main methods K.to = function (el, to, o) { + if ( o === undefined ) { o = {}; } var _el = _el || typeof el === 'object' ? el : document.querySelector(el), _o = _o || o; - _o.rpr = true; _o.toMatrix = o.toMatrix||false; _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; @@ -137,6 +138,7 @@ }; K.fromTo = function (el, f, to, o) { + if ( o === undefined ) { o = {}; } var _el = _el || typeof el === 'object' ? el : document.querySelector(el); var _o = o; @@ -215,16 +217,24 @@ _end = w._vE[p], v1 = _start.value, v2 = _end.value, - u = _end.unit; + u = _end.unit, + // checking array on every frame takes time so let's cache these + 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; //process styles by property / property type if (p === 'transform') { var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) '; //transform style & property - + for (tP in _end) { var t1 = _start[tP], t2 = _end[tP]; rps = _3d.indexOf(tP) !== -1; - if ( /matrix/.test(tP) ) { //if (!t1) return false; + if ( tP === 'matrix' || tP === 'matrix3d' ) { var i=0, va = []; for ( i; i 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); - }; - //returns browser prefix function getPrefix(){ var div = document.createElement('div'), i = 0, pf = ['Moz', 'Webkit', 'O', 'Ms'], s = ['MozTransform', 'WebkitTransform', 'OTransform', 'MsTransform'], pl = s.length; for (i; i < pl; i++) { if (s[i] in div.style) return pf[i]; } div = null; - return false; } return K; From c4effded66808b0e696200d6ac8865a98b678ad6 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 26 Sep 2015 21:58:29 +0300 Subject: [PATCH 006/187] Update kute-dev.js --- kute-dev.js | 465 ++++++++++++++++++++++++---------------------------- 1 file changed, 212 insertions(+), 253 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index f245948..147a159 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -7,36 +7,37 @@ if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['KUTE'], factory); - } else if (typeof exports === 'object') { + } else if (typeof exports == 'object') { // Node, not strict CommonJS - module.exports = factory(require('KUTE')); + module.exports = factory(); } else { // Browser globals - root.KUTE = root.KUTE || factory(root.KUTE); + root.KUTE = root.KUTE || factory(); } }(this, function () { var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick, - _pf = _pf || getPrefix(), // prefix + _pf = getPrefix(), // prefix _rafR = _rafR || ((!('requestAnimationFrame' in window)) ? true : false), // is prefix required for requestAnimationFrame _pfT = _pfT || ((!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for transform + _pfB = _pfB || ((!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for border-radius _tch = _tch || (('ontouchstart' in window || navigator.msMaxTouchPoints) || false), // support Touch? _ev = _ev || (_tch ? 'touchstart' : 'mousewheel'), //event to prevent on scroll _bd = document.body, _htm = document.getElementsByTagName('HTML')[0], - _sct = _sct || (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm), + _sct = (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm), - _isIE = _isIE || document.documentElement.classList.contains('ie'), + _isIE8 = /ie8/.test(document.documentElement.className), //assign preffix to DOM properties _pfp = _pfp || _pfT ? _pf + 'Perspective' : 'perspective', _pfo = _pfo || _pfT ? _pf + 'PerspectiveOrigin' : 'perspectiveOrigin', _tr = _tr || _pfT ? _pf + 'Transform' : 'transform', - _br = _br || _pfT ? _pf + 'BorderRadius' : 'borderRadius', - _brtl = _brtl || _pfT ? _pf + 'BorderTopLeftRadius' : 'borderTopLeftRadius', - _brtr = _brtr || _pfT ? _pf + 'BorderTopRightRadius' : 'borderTopRightRadius', - _brbl = _brbl || _pfT ? _pf + 'BorderBottomLeftRadius' : 'borderBottomLeftRadius', - _brbr = _brbr || _pfT ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius', + _br = _br || _pfB ? _pf + 'BorderRadius' : 'borderRadius', + _brtl = _brtl || _pfB ? _pf + 'BorderTopLeftRadius' : 'borderTopLeftRadius', + _brtr = _brtr || _pfB ? _pf + 'BorderTopRightRadius' : 'borderTopRightRadius', + _brbl = _brbl || _pfB ? _pf + 'BorderBottomLeftRadius' : 'borderBottomLeftRadius', + _brbr = _brbr || _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius', _raf = _raf || _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'], _caf = _caf || _rafR ? window[_pf + 'CancelAnimationFrame'] : window['cancelAnimationFrame'], @@ -53,7 +54,7 @@ _tp = ['fontSize','lineHeight','letterSpacing'], // text properties _bg = ['backgroundPosition'], // background position _3d = ['rotateX', 'rotateY','translateZ'], // transform properties that require perspective - _tf = ['matrix', 'matrix3d', 'rotateX', 'rotateY', 'rotateZ', 'translate3d', 'translateX', 'translateY', 'translateZ', 'skewX', 'skewY', 'scale'], // transform + _tf = ['rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'translate3d', 'translateX', 'translateY', 'translateZ', '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 @@ -71,13 +72,11 @@ _d[p] = [50,50]; } else if ( p === 'clip' ){ _d[p] = [0,0,0,0]; - } else if ( p === 'matrix' ){ - _d[p] = [1, 0, 0, 1, 0, 0]; - } else if ( p === 'matrix3d' ){ - _d[p] = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; } else if ( p === 'translate3d' ){ - _d[p] = [0,0,0]; - } else if ( /X|Y|Z/.test(p) ){ + _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; @@ -98,12 +97,11 @@ // internal ticker K.t = function (t) { _t = _raf(K.t); - var i = 0, l = _tws.length; + var i = 0, l = _tws.length; while ( i < l ) { - if (!_tws[i]) {return false;} - + if (!_tws[i]) {return false;} if (K.u(_tws[i],t)) { - i++; + i++; } else { _tws.splice(i, 1); } @@ -127,7 +125,6 @@ var _el = _el || typeof el === 'object' ? el : document.querySelector(el), _o = _o || o; _o.rpr = true; - _o.toMatrix = o.toMatrix||false; _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; var _vS = to, // we're gonna have to build this object at start @@ -142,7 +139,6 @@ var _el = _el || typeof el === 'object' ? el : document.querySelector(el); var _o = o; - _o.toMatrix = o.toMatrix||false; _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; var _vS = K.prP(f, false), @@ -194,14 +190,17 @@ return true; } else { if (w._cC) { w._cC.call(); } - //stop ticking when finished - w.close(); + //stop preventing scroll when scroll tween finished w.scrollOut(); var i = 0, ctl = w._cT.length; for (i; i < ctl; i++) { w._cT[i].start(t); - } + } + + //stop ticking when finished + w.close(); + return false; } } @@ -210,62 +209,88 @@ // render for each property K.r = function (w,v) { - var p; + var p, css = w._el && w._el.style, ets = (w._el === undefined || w._el === null) ? _sct : w._el, opp = _isIE8 ? 'filter':'opacity'; for (p in w._vE) { var _start = w._vS[p], _end = w._vE[p], - v1 = _start.value, - v2 = _end.value, + v1 = _start.value||0, + v2 = _end.value||0, + tv = v1 + (v2 - v1) * v, u = _end.unit, // checking array on every frame takes time so let's cache these cls = _cls.indexOf(p) !== -1, bm = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1, - rd = _rd.indexOf(p) !== -1, + rd = _rd.indexOf(p) !== -1 && !_isIE8, sc = _sc.indexOf(p) !== -1, bg = _bg.indexOf(p) !== -1, clp = _clp.indexOf(p) !== -1, - op = _op.indexOf(p) !== -1; + op = _op.indexOf(p) !== -1, + tf = p === 'transform' && !_isIE8; - //process styles by property / property type - if (p === 'transform') { + //process styles by property / property type + if ( rd ) { + if (p === 'borderRadius') { + css[_br] = tv + u; + } else if (p === 'borderTopLeftRadius') { + css[_brtl] = tv + u; + } else if (p === 'borderTopRightRadius') { + css[_brtr] = tv + u; + } else if (p === 'borderBottomLeftRadius') { + css[_brbl] = tv + u; + } else if (p === 'borderBottomRightRadius') { + css[_brbr] = tv + u; + } + + } else if (tf) { var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) '; //transform style & property for (tP in _end) { var t1 = _start[tP], t2 = _end[tP]; rps = _3d.indexOf(tP) !== -1; - if ( tP === 'matrix' || tP === 'matrix3d' ) { - var i=0, va = []; - for ( i; i Date: Sun, 27 Sep 2015 18:39:44 +0300 Subject: [PATCH 007/187] Update kute-dev.js --- kute-dev.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 147a159..1aaf993 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -302,10 +302,10 @@ } } - if ( w._hex || _isIE8 ) { - css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) ); + if ( w._hex ) { + css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) ); } else { - css[p] = !_c.a ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')'; + css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')'; } } else if ( bm ) { From f3353235c25c176fdf204d804f4f2e27fe965d99 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 27 Sep 2015 23:35:49 +0300 Subject: [PATCH 008/187] Update kute-dev.js --- kute-dev.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 1aaf993..4ad275f 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -214,8 +214,8 @@ var _start = w._vS[p], _end = w._vE[p], - v1 = _start.value||0, - v2 = _end.value||0, + v1 = _start.value ? _start.value : 0, + v2 = _end.value ? _end.value : 0, tv = v1 + (v2 - v1) * v, u = _end.unit, // checking array on every frame takes time so let's cache these From a89203dfdaa5a2334ae4def63cf29bb141ab7276 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 27 Sep 2015 23:37:40 +0300 Subject: [PATCH 009/187] Update kute-dev.js --- kute-dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kute-dev.js b/kute-dev.js index 4ad275f..38d32c4 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -211,7 +211,7 @@ K.r = function (w,v) { var p, css = w._el && w._el.style, ets = (w._el === undefined || w._el === null) ? _sct : w._el, opp = _isIE8 ? 'filter':'opacity'; for (p in w._vE) { - +console.log(w._vS[p]) var _start = w._vS[p], _end = w._vE[p], v1 = _start.value ? _start.value : 0, From 1e1bb9306c5319dd9f86eed008b81ff6c2bd7ef9 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 28 Sep 2015 15:12:41 +0300 Subject: [PATCH 010/187] Update kute-dev.js --- kute-dev.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 38d32c4..4c820fe 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -214,8 +214,8 @@ console.log(w._vS[p]) var _start = w._vS[p], _end = w._vE[p], - v1 = _start.value ? _start.value : 0, - v2 = _end.value ? _end.value : 0, + v1 = _start.value || 0, + v2 = _end.value || 0, tv = v1 + (v2 - v1) * v, u = _end.unit, // checking array on every frame takes time so let's cache these @@ -384,7 +384,7 @@ console.log(w._vS[p]) if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method var f = {}; - for ( p in this._vS ) { if ( typeof this._vS[p] !== 'object' /*|| ( this._vS[p] instanceof Array ) */) hasStart = false; } + for ( p in this._vS ) { if ( typeof this._vS[p] !== 'object' || ( this._vS[p] instanceof Array ) ) hasStart = false; } for ( p in f ) { if (typeof f[p] !== 'undefined') { hasFrom = true; } else { hasFrom = false; } } if ( !hasStart && !hasFrom ){ From 780e3a07930bcd5225d08e225bfd9fe9cc422360 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 28 Sep 2015 15:13:27 +0300 Subject: [PATCH 011/187] Update kute-dev.js --- kute-dev.js | 1 - 1 file changed, 1 deletion(-) diff --git a/kute-dev.js b/kute-dev.js index 4c820fe..cde8ecb 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -211,7 +211,6 @@ K.r = function (w,v) { var p, css = w._el && w._el.style, ets = (w._el === undefined || w._el === null) ? _sct : w._el, opp = _isIE8 ? 'filter':'opacity'; for (p in w._vE) { -console.log(w._vS[p]) var _start = w._vS[p], _end = w._vE[p], v1 = _start.value || 0, From c2d8f0805ec60b4f60d01f00d1d114197bcddb0c Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 28 Sep 2015 17:59:54 +0300 Subject: [PATCH 012/187] Update kute-dev.js --- kute-dev.js | 62 +++++++++++++++++++++++------------------------------ 1 file changed, 27 insertions(+), 35 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index cde8ecb..0211745 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -130,7 +130,6 @@ var _vS = to, // we're gonna have to build this object at start _vE = K.prP(to, true), _tw = new K.Tween(_el, _vS, _vE, _o); - return _tw; }; @@ -144,7 +143,6 @@ var _vS = K.prP(f, false), _vE = K.prP(to, true), _tw = new K.Tween(_el, _vS, _vE, _o); - return _tw; }; // fallback method for previous versions @@ -195,7 +193,7 @@ w.scrollOut(); var i = 0, ctl = w._cT.length; for (i; i < ctl; i++) { - w._cT[i].start(t); + w._cT[i].start(); } //stop ticking when finished @@ -211,6 +209,7 @@ K.r = function (w,v) { var p, css = w._el && w._el.style, ets = (w._el === undefined || w._el === null) ? _sct : w._el, opp = _isIE8 ? 'filter':'opacity'; for (p in w._vE) { + var _start = w._vS[p], _end = w._vE[p], v1 = _start.value || 0, @@ -276,7 +275,9 @@ } else { var aS = {}, rx, ap = tP === 'rotate' ? 'rotate' : 'skew'; for ( rx in t2 ){ - var a1 = t1[rx].value||0, a2 = t2[rx].value||0, av = a1 + (a2 - a1) * v; + var a1 = (t1[rx] !== undefined && t1[rx].value)||0, + a2 = (t2[rx] !== undefined && t2[rx].value)||0, + av = a1 + (a2 - a1) * v; aS[rx] = rx + '(' + (av) + 'deg' + ') '; } rt = ap === 'rotate' ? (aS.rotateX||'') + (aS.rotateY||'') + (aS.rotateZ||'') : (aS.skewX||'') + (aS.skewY||''); @@ -302,9 +303,9 @@ } if ( w._hex ) { - css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) ); + css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) ); } else { - css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')'; + css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')'; } } else if ( bm ) { @@ -377,32 +378,25 @@ this._sT = t || window.performance.now(); this._sT += this._dl; this.scrollIn(); - var p, sp, hasStart = true, hasFrom = false; + var p, sp; K.perspective(this._el,this); // apply the perspective if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method var f = {}; - for ( p in this._vS ) { if ( typeof this._vS[p] !== 'object' || ( this._vS[p] instanceof Array ) ) hasStart = false; } - for ( p in f ) { if (typeof f[p] !== 'undefined') { hasFrom = true; } else { hasFrom = false; } } - - if ( !hasStart && !hasFrom ){ - f = this.prS(); - this._vS = {}; - this._vS = K.prP(f,false); - } else if ( !hasStart && hasFrom ){ - this._vS = {}; - this._vS = K.prP(f,false); - } + + f = this.prS(); + this._vS = {}; + this._vS = K.prP(f,false); // make a better chaining for .to() method - // set transform properties from inline style coming from previous tween + // transfer unchanged values to this._vE for ( p in this._vS ) { if ( p === 'transform' ){ for ( sp in this._vS[p]) { - var tp = this._vS[p][sp]; + var tp = this._vS[p][sp]; - if (tp.value !== undefined && (!( sp in this._vE[p])) ) { // 2d transforms + if ( tp.value !== undefined && (!( sp in this._vE[p])) ) { // 2d transforms this._vE[p][sp] = this._vS[p][sp]; } for (var spp in tp){ // 3d transforms @@ -444,9 +438,9 @@ for (var a = 0; a<3; a++) { var s = deg[d]+ax[a]; - if ( s in cs ) { + if ( s in cs && s !== 'skewZ' ) { f[s] = cs[s]; - } else { + } else if ( s !== 'skewZ' ) { f[s] = _d[s]; } } @@ -643,22 +637,20 @@ 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 ) { + 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' ) { //process 2d translation / rotation - tr[x] = K.pp(x, t[x]); - } else { //process scale + } else if ( x === 'translate' || x === 'rotate' || x === 'scale' ) { //process 2d translation / rotation tr[x] = K.pp(x, t[x]); } _st['transform'] = tr; - } else { + } else if (_tf.indexOf(x) === -1) { _st[x] = K.pp(x, t[x]); } } @@ -677,16 +669,16 @@ 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 }; - } else if (p !== 'rotate' && (t === 'skew' || t === 'rotate') ) { - return { value: K.truD(v).v, unit: 'deg' }; + 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') { var tv2 = typeof v === 'string' ? v.split(',') : v; return (typeof tv2 === 'object' && tv2 instanceof Array) ? [ {value: K.truD(tv2[0]).v, unit: K.truD(tv2[0]).u}, {value: K.truD(tv2[1]).v, unit: K.truD(tv2[1]).u} ] : [{ value: K.truD(tv2).v, unit: K.truD(tv2).u }, { value: 0, unit: 'px'} ]; } else if (p === 'rotate') { - return { value: parseInt(v, 10), unit: 'deg' }; + return { value: parseInt(v, 10), unit: (K.truD(v,p).u||'deg') }; } else if (p === 'scale') { return { value: parseFloat(v, 10) }; } @@ -730,14 +722,14 @@ } }; - K.truD = function (d) { //true dimension returns { v = value, u = unit } + K.truD = function (d,p) { //true dimension returns { v = value, u = unit } var x = parseInt(d), mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length, y = getU(); function getU() { var u; while (l--) { if ( typeof d === 'string' && d.indexOf(mu[length]) ) u = mu[length]; } - u = u !== undefined ? u : 'px' + u = u !== undefined ? u : (p ? 'deg' : 'px') return u; } return { v: x, u: y }; From 641281daf5cd75ca13a78ddc18d61512f3a87577 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 28 Sep 2015 18:14:23 +0300 Subject: [PATCH 013/187] Update kute-dev.js --- kute-dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kute-dev.js b/kute-dev.js index 0211745..0339b7a 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -422,7 +422,7 @@ var p, f = {}, el = this._el, to = this._vS, cs = this.gIS('transform'), deg = ['rotate','skew'], ax = ['X','Y','Z']; for (p in to){ if ( _tf.indexOf(p) !== -1 ) { - if ( p === 'translateX' || p === 'translateY' || p === 'translateZ' ) { + if ( p === 'translateX' || p === 'translateY' || p === 'translateZ' || p === 'translate3d' ) { if ( cs[p] !== undefined ) { f[p] = cs[p] } else if ( cs['translate3d'] !== undefined ) { From 147a8e9fc85a051ffd9ccb5bb56b7c3c7f4deaef Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 29 Sep 2015 17:05:48 +0300 Subject: [PATCH 014/187] Update kute-dev.js --- kute-dev.js | 74 ++++++++++++++++++++++------------------------------- 1 file changed, 31 insertions(+), 43 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 0339b7a..fcd9f99 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -378,49 +378,41 @@ this._sT = t || window.performance.now(); this._sT += this._dl; this.scrollIn(); - var p, sp; K.perspective(this._el,this); // apply the perspective if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method - var f = {}; - - f = this.prS(); + var f = this.prS(); this._vS = {}; this._vS = K.prP(f,false); - - // make a better chaining for .to() method - // transfer unchanged values to this._vE - for ( p in this._vS ) { - if ( p === 'transform' ){ - for ( sp in this._vS[p]) { + + for ( var p in this._vS ) { + if ( p === 'transform' && (p in this._vE) ){ + for ( var sp in this._vS[p]) { var tp = this._vS[p][sp]; - - if ( tp.value !== undefined && (!( sp in this._vE[p])) ) { // 2d transforms + if ( (!( sp in this._vE[p])) ) { // 2d transforms this._vE[p][sp] = this._vS[p][sp]; - } + } for (var spp in tp){ // 3d transforms if (this._vE[p][sp] === undefined ) { this._vE[p][sp] = {} } if ( (spp in tp) && tp[spp].value !== undefined && (!( spp in this._vE[p][sp])) ) { this._vE[p][sp][spp] = this._vS[p][sp][spp]; } - } + } } } } } - for ( p in this._vE ) { this._vSR[p] = this._vS[p]; } - if (!_t) K.t(); return this; }; w.prS = function () { //prepare valuesStart for .to() method - var p, f = {}, el = this._el, to = this._vS, cs = this.gIS('transform'), deg = ['rotate','skew'], ax = ['X','Y','Z']; - for (p in to){ + 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 ) { if ( p === 'translateX' || p === 'translateY' || p === 'translateZ' || p === 'translate3d' ) { if ( cs[p] !== undefined ) { @@ -431,9 +423,8 @@ f[p] = _d[p]; } } else if ( p === 'rotate' || p === 'translate' || p === 'scale' ) { // 2d transforms - f[p] = cs[p] || _d[p]; - } else { // all angles + } else if ( /rotate/.test(p) || /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]; @@ -447,8 +438,7 @@ } } } else { - if ( _sc.indexOf(p) === -1 ) { - + 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']; @@ -460,7 +450,7 @@ } } } - for ( p in cs ){ // also add to _vS values from previous tweens + for ( var p in cs ){ // also add to _vS values from previous tweens if ( _tf.indexOf(p) !== -1 && (!( p in to )) && cs[p] !== undefined ) { f[p] = cs[p]; } @@ -473,16 +463,12 @@ 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; - + var css = cst.replace(/\s/g,'').split(';'), i=0, csl = css.length; for ( i; i Date: Sat, 3 Oct 2015 13:35:12 +0300 Subject: [PATCH 015/187] Update kute-dev.js --- kute-dev.js | 142 ++++++++++++++++++++++++++++------------------------ 1 file changed, 76 insertions(+), 66 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index fcd9f99..45db294 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -54,7 +54,7 @@ _tp = ['fontSize','lineHeight','letterSpacing'], // text properties _bg = ['backgroundPosition'], // background position _3d = ['rotateX', 'rotateY','translateZ'], // transform properties that require perspective - _tf = ['rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'translate3d', 'translateX', 'translateY', 'translateZ', 'skewX', 'skewY', 'scale'], // transform + _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 @@ -247,46 +247,44 @@ var t1 = _start[tP], t2 = _end[tP]; rps = _3d.indexOf(tP) !== -1; - if ( tP === 'translate' ) { var tls = '', ts = {}, ax; - if ( t2[0] && t2[0].value !== undefined ) { // do the 2d translate - var tlx1 = t1[0].value || 0, tlx2 = t2[0].value || 0, txu = t2[0].unit, - tly1 = t1[1].value || 0, tly2 = t2[1].value || 0, tyu = t2[1].unit; - ts.x = tlx1===tlx2 ? tlx2+txu : (tlx1 + ( tlx2 - tlx1 ) * v) + txu; - ts.y = tly1===tly2 ? tly2+tyu : (tly1 + ( tly2 - tly1 ) * v) + tyu; - - tls = 'translate(' + ts.x + ',' + ts.y + ')'; - } else { // do the 3d translate - 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 = 'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')'; - } + + 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' || tP === 'skew') { - var rt = ''; + } else if ( tP === 'rotate' ) { + var rt = '', rS = {}, rx; - if ( t2.value !== undefined ) { // process 2d rotation on Z axis - var a21 = t1.value || 0, a22 = t2.value || 0, a2u = t2.unit; - rt = 'rotate('+(a21 + (a22 - a21) * v) + a2u + ')'; - } else { - var aS = {}, rx, ap = tP === 'rotate' ? 'rotate' : 'skew'; - for ( rx in t2 ){ - var a1 = (t1[rx] !== undefined && t1[rx].value)||0, - a2 = (t2[rx] !== undefined && t2[rx].value)||0, + 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; - aS[rx] = rx + '(' + (av) + 'deg' + ') '; + rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') '; } - rt = ap === 'rotate' ? (aS.rotateX||'') + (aS.rotateY||'') + (aS.rotateZ||'') : (aS.skewX||'') + (aS.skewY||''); } - - _tS = (_tS === '') ? rt : (_tS + ' ' + rt); + 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 s1 = t1.value, s2 = t2.value, - s = s1 + (s2 - s1) * v, scS = tP + '(' + s + ')'; + var sc1 = t1.value, sc2 = t2.value, + s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')'; _tS = (_tS === '') ? scS : (_tS + ' ' + scS); } } @@ -378,31 +376,41 @@ this._sT = t || window.performance.now(); this._sT += this._dl; this.scrollIn(); + var f = {}; K.perspective(this._el,this); // apply the perspective if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method - var f = this.prS(); + f = this.prS(); this._vS = {}; this._vS = K.prP(f,false); - for ( var p in this._vS ) { + for ( p in this._vS ) { if ( p === 'transform' && (p in this._vE) ){ for ( var sp in this._vS[p]) { - var tp = this._vS[p][sp]; - if ( (!( sp in this._vE[p])) ) { // 2d transforms - this._vE[p][sp] = this._vS[p][sp]; - } - for (var spp in tp){ // 3d transforms - if (this._vE[p][sp] === undefined ) { this._vE[p][sp] = {} } - if ( (spp in tp) && tp[spp].value !== undefined && (!( spp in this._vE[p][sp])) ) { - this._vE[p][sp][spp] = this._vS[p][sp][spp]; + 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 spp in this._vS[p][sp] ) { // scale + if (!(spp in this._vE[p][sp])) { + this._vE[p][sp][spp] = this._vS[p][sp][spp]; // spp = unit | value + } + } + } + } } } } + for ( p in this._vE ) { this._vSR[p] = this._vS[p]; } @@ -412,28 +420,23 @@ w.prS = function () { //prepare valuesStart for .to() method 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 ) { - if ( p === 'translateX' || p === 'translateY' || p === 'translateZ' || p === 'translate3d' ) { - if ( cs[p] !== undefined ) { - f[p] = cs[p] - } else if ( cs['translate3d'] !== undefined ) { - f['translate3d'] = cs['translate3d']; + var r2d = (p === 'rotate' || p === 'translate' || p === 'scale'); + if ( /translate/.test(p) && p !== 'translate' ) { + if ( to['translate3d'] !== undefined ) { + f['translate3d'] = cs['translate3d']; } else { f[p] = _d[p]; } - } else if ( p === 'rotate' || p === 'translate' || p === 'scale' ) { // 2d transforms - f[p] = cs[p] || _d[p]; - } else if ( /rotate/.test(p) || /skew/.test(p) ) { // all angles + } 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 ( s in cs && s !== 'skewZ' ) { - f[s] = cs[s]; - } else if ( s !== 'skewZ' ) { - f[s] = _d[s]; - } + var s = deg[d]+ax[a]; + if (_tf.indexOf(s) !== -1 && (s in to) ) { f[s] = cs[s] || _d[s]; } } } } @@ -451,8 +454,8 @@ } } for ( var p in cs ){ // also add to _vS values from previous tweens - if ( _tf.indexOf(p) !== -1 && (!( p in to )) && cs[p] !== undefined ) { - f[p] = cs[p]; + if ( _tf.indexOf(p) !== -1 && (!( p in to )) ) { + f[p] = cs[p] || _d[p]; } } return f; @@ -661,12 +664,19 @@ } 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; // console.log( typeof v === 'string' && v.split(',')) - return (typeof tv === 'object' && tv instanceof Array) - ? [ { value: K.truD(tv[0]).v, unit: K.truD(tv[0]).u}, {value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u} ] - : [ { value: K.truD(tv).v, unit: K.truD(tv).u }, { value: 0, unit: 'px'} ]; + 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') { - return { value: parseInt(v, 10), unit: (K.truD(v,p).u||'deg') }; + 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) }; } From 05748003ea59a77baf5cb5244b47251ef031bd01 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 3 Oct 2015 14:36:33 +0300 Subject: [PATCH 016/187] Update kute-dev.js --- kute-dev.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 45db294..d27956c 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -420,16 +420,12 @@ w.prS = function () { //prepare valuesStart for .to() method 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' ) { - if ( to['translate3d'] !== undefined ) { - f['translate3d'] = cs['translate3d']; - } else { - f[p] = _d[p]; - } + 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 From f0d50965726d1ae8dc798684726ce25803563993 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 3 Oct 2015 20:58:57 +0300 Subject: [PATCH 017/187] Update kute-dev.js --- kute-dev.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index d27956c..58f8891 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -312,8 +312,8 @@ ets.scrollTop = v1 + ( v2 - v1 ) * v; } else if ( bg ) { var px1 = _start.x.v||50, px2 = _end.x.v||50, py1 = _start.y.v||50, py2 = _end.y.v||50, - px = px1 + ( px2 - px1 ) * v, pxu = _end.x.u || '%', - py = py1 + ( py2 - py1 ) * v, pyu = _end.y.u || '%'; + px = px1 + ( px2 - px1 ) * v, pxu = '%', + py = py1 + ( py2 - py1 ) * v, pyu = '%'; css[p] = px + pxu + ' ' + py + pyu; } else if ( clp ) { var h = 0, cl = []; From b2bfd94608e8965951577fbe8d45901ddc0477ab Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 3 Oct 2015 21:03:46 +0300 Subject: [PATCH 018/187] Update kute-dev.js --- kute-dev.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 58f8891..d2aa2c4 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -706,8 +706,9 @@ 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); - return { x: K.truD(posxy[0])||{ v: 50, u: '%' }, y: K.truD(posxy[1])||{ v: 50, u: '%' } }; + 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) { @@ -722,8 +723,8 @@ function getU() { var u,i=0; - for (i;i Date: Sat, 3 Oct 2015 21:06:08 +0300 Subject: [PATCH 019/187] Update kute-dev.js --- kute-dev.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index d2aa2c4..03042ce 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -311,7 +311,7 @@ } else if ( sc ) { ets.scrollTop = v1 + ( v2 - v1 ) * v; } else if ( bg ) { - var px1 = _start.x.v||50, px2 = _end.x.v||50, py1 = _start.y.v||50, py2 = _end.y.v||50, + var px1 = _start.x.v, px2 = _end.x.v, py1 = _start.y.v, py2 = _end.y.v, px = px1 + ( px2 - px1 ) * v, pxu = '%', py = py1 + ( py2 - py1 ) * v, pyu = '%'; css[p] = px + pxu + ' ' + py + pyu; @@ -323,7 +323,7 @@ } css[p] = 'rect('+cl+')'; } else if ( op ) { - css[opp] = !_isIE8 ? tv : "alpha(opacity=" + parseInt(tv*100) + ")"; + css[opp] = _isIE8 ? "alpha(opacity=" + parseInt(tv*100) + ")" : tv; } } From 2a159049636c03581e15380a3cef640c57b1ad08 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 3 Oct 2015 22:02:25 +0300 Subject: [PATCH 020/187] Update kute-dev.js --- kute-dev.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/kute-dev.js b/kute-dev.js index 03042ce..33a25c6 100644 --- a/kute-dev.js +++ b/kute-dev.js @@ -323,7 +323,7 @@ } css[p] = 'rect('+cl+')'; } else if ( op ) { - css[opp] = _isIE8 ? "alpha(opacity=" + parseInt(tv*100) + ")" : tv; + css[opp] = !_isIE8 ? tv : "alpha(opacity=" + parseInt(tv*100) + ")"; } } @@ -723,8 +723,8 @@ function getU() { var u,i=0; - for (i;i Date: Sun, 18 Oct 2015 09:40:11 +0300 Subject: [PATCH 021/187] Added some more features, a changelog will come with the tagged release. --- LICENSE | 22 - README.md | 90 -- about.html | 148 ++++ api.html | 363 ++++++++ assets/css/kute.css | 345 ++++++++ assets/css/prism.css | 3 + assets/css/reset.css | 209 +++++ assets/img/favicon.png | Bin 0 -> 1456 bytes assets/img/img-blank.gif | Bin 0 -> 1512 bytes assets/img/loader.gif | Bin 0 -> 31313 bytes assets/js/examples.js | 343 +++++++ assets/js/home.js | 97 ++ assets/js/minifill.js | 376 ++++++++ assets/js/perf.js | 178 ++++ assets/js/prism.js | 6 + assets/js/scripts.js | 14 + assets/js/tween.min.js | 2 + dist/kute.full.min.js | 2 - dist/kute.jquery.js | 10 - dist/kute.min.js | 2 - examples.html | 470 ++++++++++ features.html | 217 +++++ index.html | 189 ++++ kute.full.js | 811 ----------------- kute.js | 676 -------------- performance.html | 132 +++ src/kute-bezier.js | 159 ++++ src/kute-jquery.js | 26 + src/kute-physics.js | 302 +++++++ kute-dev.js => src/kute.js | 1719 ++++++++++++++++++------------------ 30 files changed, 4434 insertions(+), 2477 deletions(-) delete mode 100644 LICENSE delete mode 100644 README.md create mode 100644 about.html create mode 100644 api.html create mode 100644 assets/css/kute.css create mode 100644 assets/css/prism.css create mode 100644 assets/css/reset.css create mode 100644 assets/img/favicon.png create mode 100644 assets/img/img-blank.gif create mode 100644 assets/img/loader.gif create mode 100644 assets/js/examples.js create mode 100644 assets/js/home.js create mode 100644 assets/js/minifill.js create mode 100644 assets/js/perf.js create mode 100644 assets/js/prism.js create mode 100644 assets/js/scripts.js create mode 100644 assets/js/tween.min.js delete mode 100644 dist/kute.full.min.js delete mode 100644 dist/kute.jquery.js delete mode 100644 dist/kute.min.js create mode 100644 examples.html create mode 100644 features.html create mode 100644 index.html delete mode 100644 kute.full.js delete mode 100644 kute.js create mode 100644 performance.html create mode 100644 src/kute-bezier.js create mode 100644 src/kute-jquery.js create mode 100644 src/kute-physics.js rename kute-dev.js => src/kute.js (85%) diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 0de8c9e..0000000 --- a/LICENSE +++ /dev/null @@ -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. - diff --git a/README.md b/README.md deleted file mode 100644 index afec5ec..0000000 --- a/README.md +++ /dev/null @@ -1,90 +0,0 @@ -# kute.js -A minimal Native Javascript tweening engine forked from tween.js. Since most of web developers don't actually use yoyo, repeat, play/pause/resume/timeline/whatever or tweening array values (processed with array interpolation functions), I've removed them. kute.js is like a merge of my own jQueryTween with tween.js, but generally it's a much more smarter build. You link the script at your ending <body> tag and write one line to do just about any animation you can think of. - -# CDN -Thanks to jsdelivr, we have CDN link here. - -# Basic Usage -At a glance, you can write one line and you're done. -
-//vanilla js
-new KUTE.Animate(el,options);
-
-//with jQuery plugin
-$('selector').Kute(options);
-
- - -# Advanced Usage -Quite easily, you can write 'bit more lines and you're making the earth go round. -
-//vanilla js
-new KUTE.Animate(el, {
-  //options
-    from	: {},
-    to	: {}, 
-    duration: 500,
-    delay	: 0,
-    easing	: 'exponentialInOut',
-    start			: functionOne, // run function when tween starts 
-    finish			: functionTwo, // run function when tween finishes
-    special			: functionThree // run function while tween runing    
-  }
-);
-
-//with jQuery plugin
-$('selector'). Kute({
-  //options
-    from	: {},
-    to	: {}, 
-    duration: 500,
-    delay	: 0,
-    easing	: 'exponentialInOut',
-    start			: functionOne, // run function when tween starts 
-    finish			: functionTwo, // run function when tween finishes
-    special			: functionThree // run function while tween runing    
-  }
-);
-
- -# Full distribution (12Kb min) -It does most of the animation work you need. -* size: width and height -* colors: text color and background-color (values ) -* transform: translate3D, scale, rotateX, rotateY, rotateZ -* position: top, left (ideal for IE9- translate3D(left,top,0) fallback) -* zoom: for scale on IE8 fallback -* backgroundPosition -* window scroll - -# Base Distribution (9Kb min) -This distribution is much lighter and more suitable for most projects: -* size: width and height -* transform: translate3D, scale, rotateX, rotateY, rotateZ -* position: top, left (ideal for IE9- translate3D(left,top,0) fallback) -* zoom: for scale on IE8 fallback -* window scroll - -#jQuery Plugin -That's right, there you have it, just a few bits of code to bridge the awesome kute.js to your jQuery projects. - -# What else it does -* computes option values properly according to their measurement unit (px,%,deg,etc) -* properly handles IE10+ 3D transforms when elements have a perspective -* it converts RGBA & HEX colors to RGB and tweens the inner values, then ALWAYS updates color via HEX -* 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 style property value as initial value (via currentStyle || getComputedStyle) -* allows you to add 3 different callbacks: start, update, finish, and they can be set as tween options (so no more nested functions needed) -* since translate3D is best for performance, kute.js will always uses it -* accepts "nice & easy string" easing functions, like 'linear' or 'exponentialOut' (removes the use of the evil eval, making development easier and closer to fast development standards :) -* uses 31 easing functions, all Robert Penner's easing equations -* like mentioned above, for IE8 zoom is used for transform: scale(0.5), it's not perfect as the object moves from it's floating point to the middle, and some left & top adjustments can be done, but to keep it simple and performance driven, I leave it as is, it's better than nothing. - -# Browser Support -Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills.io. Also kute.js needs to know when doing stuff for IE9- like my other scripts here, I highy recommend Paul Irish's conditional stylesheets guides to add ie ie[version] to your site's HTML tag. - -# Demo -coming soon.. - -# License -MIT License diff --git a/about.html b/about.html new file mode 100644 index 0000000..907e3f0 --- /dev/null +++ b/about.html @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + About KUTE.js | Javascript Animation Engine + + + + + + + + + + + + + + +
+ +
+ +
+
+

KUTE.js

 + +
+
+ +
+ +

Did you know?

+

Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween 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 GSAP, Dynamics, Velocity, Shifty, our own KUTE.js here and many others.

+

Tween Object is a Javascript Object 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 tween actually refers to the tween object.

+

polyfill 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 natively". Basically a polyfill covers what legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. More details.

+

requestAnimationFrame is a Javascript method developed to enable hardware acceleration animations for the web today. In Javascript, the window.requestAnimationFrame(callback); method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a polyfil to cover the legacy browsers chaos.

+

JANK 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 explain all about it, so you don't have to stay in the dark.

+

Methods are functions that create tween objects or control the animation for KUTE.js, so we will encounter mostly main methods and tween control methods. Once a main method is used, then the control methods apply in a specific order.

+ + +

How Does It Work?

+

Well, first things first: it's smart built. Let's briefly explain the phases:

+
    +
  1. 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.
    2. +
  2. 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 .to() 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.
    3. +
  3. In the third phase KUTE.js is ready to start the animation, but the animation starts only after the .start() function, if used, has finished. When animation starts, KUTE.js will start ticking on the frequency decided by requestAnimationFrame or setInterval for legacy browsers, quickly updating the style for the properties and execute the update:function callback if any. Also while animating, KUTE.js will begin listening for your tween control input such as .pause() or .stop() or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.
    4. +
  4. When tween animation is finished, the complete:function callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with cancelAnimationFrame to save power.
    5. +
+

Basically, this is it!

+ +

A Word On Performance

+

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.

+ +

Translate and Position

+

While the code execution is the fastest for the layout modifiers or what we call box-model, say the position based properties set such as left or top, 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 translate 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 translate is part of transform CSS3 property that has to stack in a single line many more properties such as rotate, skew and scale. An article by Paul Irish explains more about differences in performance between position and translation.

+ +

I would stress on this a bit: even faster performance for translation can be achieved by using an improved version of the tiny tween.js, as it only tweens the values and allows you to concatenate strings as you please. On large amounts of elements translating on vertical or horizontal axis, tween.js would be the best of them all, but well, we'll see about that in the performance testing page.

+ +

To put it short left executes faster but requires repaint on every frame while translateX or translate3d execute slower but require no repaint on each animation frame. The winner is left, when it comes to code execution, but if we also count the elements' size, the larger size the more favor the translation so the overall winner is translate. With other words 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.

+ +

Translate, TranslateX and Translate3D

+

While running a 2D translate:150 animation could score similar performance as translateX:150, interestingly, translate3d:[150,0,0] is slightly faster than the other translations. Some performance tests confirm that translate3d is the prefered property for hardware acceleration. For this reason, translate3d is the winner and KUTE.js always uses it even if you only use translateX or translateY for instance.

+

Similarly, if you animate the 2D translate this always goes translate(x,y) even if you use translate:150 (only for the X axis) or translate:[150,0] (both X and Y axis), for better performance as well. And by the way, this works great on IE9 and other legacy browsers.

+ +

Box Model

+

We compared position with transition above, but now we are going to talk about other issues related to resizers: width, height, margin, padding and borderWidth 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 all browsers, especially when you animate these resize properties. When this toxic combination occurs animating a large amount of elements to animate could crash any browser, no exception, and I think any developer should know about this.

+

The resize event triggered by these resizer properties can cause some severe issues with legacy browsers 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.

+

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.

+ +

RGB and HEX

+

When animating any color property such as (text) color or background-color, KUTE.js always uses/converts to RGB/RGBA, but there is a keepHex:true 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 RGB the winner.

+ +

TO and FROMTO

+

The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are .to() and .fromTo(). While .to() is much more simple and convenient to use, very useful for tween chaining, it has to process the starting values on every .start() delaying the animation for a few miliseconds depending on the browser and hardware, making .fromTo() the winner. 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 .fromTo() properly.

+ +

Easing Functions

+

KUTE.js comes with 3 packs of easing functions: the popular easing functions by Robert Penner, dynamics physics easing functions by Michael Villar and bezier-easing 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 winner.

+

The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the cubic-bezier based functions have a 0.0000001 error margin, while the Exponential 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.

+ +

Garbage Collection And Repeat

+

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.

+

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 page.

+ +

OSs, Desktops and Mobiles

+

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).

+

The results show Windows 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!

+ +

The browsers' performance goes like this (from best to poorest): Google Chrome, 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. Some argue that Safari outperforms Google Chrome due to the latest Webkit upgrade.

+ +

Also know that legacy browsers don't support requestAnimationFrame and pollyfills usually replace it with setInterval, a clasic Javascript method that's significantly affecting performance, because it's one of the main causes for lots of JANK.

+ +

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.

+ +

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 these guys 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.

+ +

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 Google I/O 2014 presentation. Now you understand how much performance really matters.

+

Remember: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.

+ +

KUTE.js Project

+

KUTE.js continues what was started with jQueryTween 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.

+

It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, GSAP, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, a true inspiration for the entire developers' community, not to mention the huge contribution and knowledge sharing.

+

In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & 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.

+

Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.

+ + +
+ + + + +
+ + + + + + + + diff --git a/api.html b/api.html new file mode 100644 index 0000000..08df62d --- /dev/null +++ b/api.html @@ -0,0 +1,363 @@ + + + + + + + + + + + + + + + + + KUTE.js Developer API | Javascript Animation Engine + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+

KUTE.js

 + +
+
+ +
+ +

Getting Started

+

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 CDN and also npm and Bower repositories with all it's features and tools.

+ +

Bower and NPM

+

You can install KUTE.js package by using either Bower or NPM.

+
$ npm install --save kute.js
+# Or
+$ bower install --save kute.js
+
+ +

Websites

+

In your website add the following code, the best would be to put it at the end of your body tag:

+
<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> <!-- core KUTE.js -->
+ +

Also you can include the tools that you need for your project:

+
<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
+<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
+
+

Your awesome animation coding would follow after these script links.

+ +

Ideal HTML Template

+

You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers can actually do. A quick note here: IE8 doesn't support any transform property or RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more information.

+

Don't use Modernizr, the best thing we can actually do is use the Microsoft's synthax for it's own legacy browsers, so here's how a very basic HTML template for your websites would look like:

+
<!DOCTYPE html>
+	<!--[if lt IE 8]><html class="ie prehistory" 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">				
+		<!-- SEO meta here  -->					
+		<!-- add your CSS here  -->				
+		<!-- add polyfills  -->
+		<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script>
+	</head>					
+	<body>
+		<!-- site content here -->	
+		<!-- scripts go here -->				
+	</body>
+</html>
+
+

For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.

+
+ +
+

Main Methods

+

These methods allow you to create tween objects; here a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration or repeat. The methods have different uses and performance scores while making it easy to work with.

+

.to() 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 next two because it has to compute the default/current value on tween .start() and thus delays the animation for a cuple of miliseconds, but 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 .start() method for the solution for sync/delay issue.

+

Considering a given div element is already transparent, a super quick example would be:

+
KUTE.to(div,{opacity:1}).start()
+

.fromTo() method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest methods but unlike the .to() method, it does not stack transform properties on chained tweens. Also, another advantage is the fact that you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the features page. So here's a quick example:

+
KUTE.fromTo(div,{opacity:1},{opacity:0}).start()
+

.Animate() method is only a fallback for the older KUTE.js versions and works as the .fromTo() method. It will be deprecated with later versions.

+
+ +
+

Tween Control Methods

+

These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:

+
var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});
+

This tween object is now ready to work with the methods.

+ +

Starting Animations

+

.start() 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.

+
//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
+
+ +

As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue). 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 eliminates any syncronization issue that may occur, even if you are using the .to() method. This applies to our performance test page as well, and the trick is super duper simple:

+ +
// step 1 - create an empty array and grab the elements to animate
+var tweens = [], myElements = document.querySelector('.myManyElements');
+
+// 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);
+}
+
+ +

If you care to see the actual working code, check it in the perf.js file.

+ +

Stopping Animation

+

.stop() method stops animation for a given tween object 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 click action:

+
stopButton.addEventListener('click', function(){
+	tween.stop();
+}, false);
+
+ +

Pausing Animation

+

.pause() method freezez the animation at any given time for a given tween object, and unlike the .stop() method, this one allows resuming the animation on a later use of the next method .play().

+
pauseButton.addEventListener('click', function(){
+	tween.pause();
+}, false);
+
+ +

Resuming Paused Animation

+

.play() or .resume() methods allows you to resume an animation for a given tween object only if it was paused or else will produce no effect.

+
playButton.addEventListener('click', function(){
+	tween.play(); // or tween.resume();
+}, false);
+
+ +

Chaining Tweens

+

.chain() method can be used to chain tweens together. When the animation finishes for a given tween, it triggers the animation start for another tween.

+
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);
+
+

It's also possible to chain multiple tweens, just as shown in the below example, but the one that finishes last (has longest delay and duration together) should be used last in the .chain() method arguments list. Why? Because when a tween is finished it triggers cancelAnimationFrame() and KUTE.js will stop "ticking" causing all other chained tweens to stop prematurelly.

+
//chain multiple tweens
+tween.chain(tween1,tween2);
+
+ + +
+ +
+

Tween Options

+

Common Options

+

These options affect all types of tweens, no matter the properties used or context.

+

duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.

+

repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.

+

delay: 500 option allows you to schedule the tween animation after a certain number of miliseconds. The default value is 0.

+

repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.

+

yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value 1. The default value is false.

+

easing: 'easingCubicInOut' 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 linear.

+ +

Transform Options

+

These options only affect animation involving any property from CSS3 transform specs and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.

+

perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element that is subject to transform animation. No default value.

+

perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.

+

parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.

+

parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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.

+ +

Callback Options

+

These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.

+

start: function option allows you to set a function to run once tween animation starts.

+

update: function option allows you to set a function to run on every frame.

+

pause: function option allows you to set a function to run when animation is paused.

+

resume: function option allows you to set a function to run when animation is resumed.

+

stop: function option allows you to set a function to run when animation is stopped.

+

complete: function option allows you to set a function to run when animation is finished.

+

A quick example would look like this:

+
//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();
+
+

Other

+

keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.

+
+ +
+

Easing Functions

+

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.

+

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, here's an excellent resource some developers recommend. I would also recommend this one too.

+ +

Core Functions

+

Modern browsers that support transition can also make use of some generic easing functions via the CSS3 transition-timing-function:ease-out property, but in Javascript animation, we need some special functions. The popular Robert Penner's easing functions 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 circular or exponential, and also the type of progression in and/or out.

+ +

To use them, simply set a tween option like so easing: KUTE.Easing.easingSinusoidalInOut or simply easing: 'easingSinusoidalInOut'.

+

linear 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.

+ +

curve 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):

+
    +
  • Sinusoidal - multiplier of 1 (super light object, like a feather)
    • +
  • Quadratic - multiplier of 2
    • +
  • Cubic - multiplier of 3
    • +
  • Quartic - multiplier of 4
    • +
  • Quintic - multiplier of 5
    • +
  • Circular - multiplier of 6
    • +
  • Exponential - multiplier of 10 (super heavy object, like a truck)
    • +
+ +

The In / Out explained:

+
    +
  • In - 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: easingSinusoidalIn, easingQuadraticIn,easingCubicIn, easingQuarticIn, easingQuinticIn, easingCircularIn and easingExponentialIn.
    • +
  • Out - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: easingSinusoidalOut, easingQuadraticOut, easingCubicOut, easingQuarticOut, easingQuinticOut, easingCircularOut and easingExponentialOut.
    • +
  • InOut - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: easingSinusoidalInOut, easingQuadraticInOut, easingCubicInOut, easingQuarticInOut, easingQuinticInOut, easingCircularInOut and easingExponentialInOut.
    • +
+ +

back easing functions describe more complex animations (I would call them reverse gravity easings). They also come with in and/or out types of progression.

+
    +
  • easingBackIn 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.
    • +
  • easingBackOut would be best described as the previous function, but viewed in reverse mode.
    • +
  • easingBackInOut is a combination of the other two.
    • +
+ +

elasticity easing functions describe the kind of animation where the object is elastic. With in and/or out as well.

+
    +
  • easingElasticOut would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.
    • +
  • easingElasticIn would be best described as the above function but viewed in reverse mode.
    • +
  • easingElasticInOut is simply a combination of the other two.
    • +
+ +

gravity based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With in and/or out as well.

+
    +
  • easingBounceOut looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.
    • +
  • easingBounceIn looks like the previous viewed in reverse mode
    • +
  • easingBounceInOut is a combination of the other two.
    • +
+ +

Cubic Bezier Functions

+

While modern browsers support CSS3 transition with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5), in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the features page, we are using a modified version of the cubic-bezier by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.

+

You can use them either with easing: KUTE.Ease.bezier(mX1, mY1, mX2, mY2) or easing: 'bezier(mX1, mY1, mX2, mY2)', where mX1, mY1, mX2, mY2 are Float values from 0 to 1. You can find the right values you need right here.

+

There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:

+
    +
  • Equivalents of the browser's generic timing functions: easeIn, easeOut and easeInOut
    • +
  • Sinusoidal timing functions: easeInSine, easeOutSine and easeInOutSine
    • +
  • Quadratic timing functions: easeInQuad, easeOutQuad and easeInOutQuad
    • +
  • Cubic timing functions: easeInCubic, easeOutCubic and easeInOutCubic
    • +
  • Quartic timing functions: easeInQuart, easeInQuart and easeInOutQuart
    • +
  • Quintic timing functions: easeInQuint, easeOutQuint and easeInOutQuint
    • +
  • Exponential timing functions: easeInExpo, easeOutExpo and easeInOutExpo
    • +
  • Back timing functions: easeInBack, easeOutBack and easeInOutBack
    • +
  • Special slow motion timing functions look like this: slowMo, slowMo1 and slowMo2
    • +
+ +

Physics Based Functions

+

KUTE.js also packs the dynamics physics 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.

+

You can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly bezier based functions. Ok now, let's get to it:

+ +
    +
  • spring function is basically an elastic type of easing that allows you to set frequency:1-1000, friction:1-1000, anticipationSize:0-1000 (a kind of delay in miliseconds) and anticipationStrength:0-1000 (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: KUTE.Physics.spring({friction:100,frequency:600}).
    • +
  • bounce function is also an elastic easing function, but it works different than Robert Penner's version that's basically a gravity based function. This one here will always come back to the starting values. This function allows you to set frequency:0-1000 and friction:0-1000. Usage: easing: KUTE.Physics.bounce({friction:100,frequency:600}).
    • +
  • gravity function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: elasticity:1-1000 and bounciness:0-1000. Usage: easing: KUTE.Physics.gravity({elasticity:100,bounciness:600}).
    • +
  • forceWithGravity function acts just like gravity except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000 and bounciness:0-1000. Usage: easing: KUTE.Physics.forceWithGravity({elasticity:100,bounciness:600}).
    • +
  • bezier easing function is a bit more complicated as it allows you to set multiple points of bezier curves. Usage: easing: KUTE.Physics.bezier({points:POINTS_ARRAY_COMES HERE}), 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 easeIn looks like: +
    // 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}]}] })
+
    +
    • +
+

The presets can be used both as a string easing:'physicsIn' or easing:KUTE.Physics.physicsIn(friction:200). The list is:

+
    +
  • curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
    • +
  • back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.
    • +
+ + + +
+ + + + +
+ + + + + + + + + + + + + + + diff --git a/assets/css/kute.css b/assets/css/kute.css new file mode 100644 index 0000000..6689962 --- /dev/null +++ b/assets/css/kute.css @@ -0,0 +1,345 @@ +/*! + * 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 +} \ No newline at end of file diff --git a/assets/css/prism.css b/assets/css/prism.css new file mode 100644 index 0000000..c7ced87 --- /dev/null +++ b/assets/css/prism.css @@ -0,0 +1,3 @@ + /* 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} \ No newline at end of file diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 0000000..af84377 --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,209 @@ +/*! 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;*/ +} \ No newline at end of file diff --git a/assets/img/favicon.png b/assets/img/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..7737268571726fc43479a2dbb66d9e9e5523b7ed GIT binary patch literal 1456 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`k|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*9U+m{T%CB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+* zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxKsVXI%s|1+P|wiV z#N6CmN5ROz&_Lh7NZ-&%*U;R`*vQJjKmiJrfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj z%k|2Q_413-^$jg8EkR}&8R-I5=oVMzl_XZ^<`pZ$OmImpPA){ffi_eM3D1{oGuTzrd=COM+4n&cLd=IHa;5RX-@T zIKQ+g85kdF$}r8qu)}W=NFmTQR{lkqz(`5Vami0E%}vcK@pQ3O0?O#6WTsd-Ihi`T zI6D~|TADb!niv{7xmlVzx|%wf8dx|x8XFnH%)qAC&Dhe-(89vf)YRC~(9qSy!p+#g z$<)}u#mvRf%+=Byrq?sCxFj(zITdDaCeU7}UJJZ>t(=Qe6HD@oLh|!-U@0IVBfliS zI3vG6!8zDeAv`lLCBM8F6gd#Tx}+9mmZhe+73JqDfJ4_R6N~NUZjLU7E{@K|K>IP;ah#PorV(FY|Bq@)590;WF@6Q1ya9C+4A%>(9_B4Eal zustflz`*#()5S5Q;?|y^z1bm-0`qUq{Vw=UPkxdTXO@S9;z{`g;g8HbFOyP}GgZyZ z!pxEq6(eqCC}#a@H>u)Sw01$OfB>grdApip(SyC!@89-pcHi;+UZWBR-y5UNyFbsq z|EDaVD)Y%U>+Sv!fXv5#fOL)(GxR=Vae0rL_Q2pI_n_b_2 z$f`v0EITkEkLl}f>F;OWYV()dywlUFw#)lv#^ zvGH>FrM2ePkIr9t`=_%_Tebhfj8$6$tnR*ia&mU`gq;jtq9&3}Tc4`M#$`F#U*%bu zwIoqXAW5%NRKeU!I#h0Tb@BS`zjl57oRqV=NHelLx$=|d-dp=N|J?ig0k6HZp*IsX@9TW5c|5R`Dfm(xD9F=zaI056c{jXJgU;A z)6BPy)lMoHMbT S^dwJ!%1}>NKbLh*2~7Ye5EQro literal 0 HcmV?d00001 diff --git a/assets/img/img-blank.gif b/assets/img/img-blank.gif new file mode 100644 index 0000000000000000000000000000000000000000..5891de46fae6f03140708d0ce459cca8ea66867f GIT binary patch literal 1512 zcmZ?wbhEHbJj8f{p@D(n|Ns9C3=E3@xg&f76kHNZ5`naheMLcHa&~HoLQ-maW}dCm z``!DM6f#q6mBLMZ4SWlnQ!_F>s)|yBtNcQetFn_VQ=?Nk^)#sNw%$$BS=C4WT$g}QL2Keo`G(%fti7VnW3Jcv5C34 zxsHO7fuVuEfswwUk*=Y+m9dePfq?=PC;@FNN=dT{a&d#&1?1T(Wt5Z@Sn2DRmzV36 z8|&p4rRy77T3Uk4Ff!5ws?aU2%qvN((9J7WhMC}!TAW;zSx}OhpQivaF)=B>w8T~k z=u(Imatq+b<`wIKy`z_$pQ~SySfFpHX8`gNOrftYexq1Q>+Y3%q-lDj9p!goJEnm@@7}(7{p#h5=g*!#dHm?%gZuaH-no72=8fyuu3ou(>Eea+=gyuved^?i(;JWy=vu(<;#{XS-fcBg8B32&Y3-H=8Wmn zrcRkWY2t+bzTTehuFj73w$_&BrpAW)y4srRs>+J;veJ^`qQZjwyxg4Ztjvt`wA7U3 zq{M{yxY(HJsK|)$u+Wg;puhlsKVKhjFHaA5H&+*DCr1Z+J6juTD@zM=GgA{|BVdNo z)78<|($r8_Q&mw`QdE$ala-N{l9Uh^6BQ8_5)|O)$zj)4;Tiu)Q?fK2$_Q+$}v(9C&PHlU~ef*Qp^>4k;f1UgO zkDrID{m7z^9X?vq&n)}Q+3U6Z%BrtjXS257S@)frulx9uO+S15R$qU!?Kf}#>E~Z| z{p~yd`um@K|M?{}EIcAIDmrGY*m2^}+Ny@baM6)Y5$&iw9fpgK^)8jMuKL4awB*D@74KO#okmMfP1T9sRl{k#?95D) z>|1*}jhCOBYg7H}52wkB3kzMkrEI%QR$f}_Gux_`%XHP1l_9I6_I8=BzP2`Ichz4m zvo$w1rktK-+ikY?*4CWcyK1@3*WKA!^7_`^Zu9l`_SXFV^_SaX!-In@+|qVE78@TO w?UA;wP(&2zR1s+my1To(ML-2?KnVo}!A?p-S%|3g zoLAnx{(H`-YpuPP`&{S4dOnP!AG!3te%Jl{o>y&MEd@pEz)gXhzHa*Uvw8DoA|fJU zVqyvk3c8I!;|=}q!@$6R!C+WeSlHOuwrtt5b?a76PEITq%gxQr$HyliARsI(EG8zl zefxGvNl7UwDH$0VSy@>*IXQWGc|}DaCLP(dGe&2 zo7<^Vr`+A$Jv=--Jw3g=yu7`=eSCa;eSQ7>{7#=fedf%WvuDqqJ9p0C-#=hu0s{ks zgM&jtLPA4B!@|PC!^0yYA|fLrqoSgsqoZSDVq#-s^qprEj@u&Ai0xVX5aq@=X8w5+VG zyu7@kqN1|0vZ|`8y1Kfywzj^$zM-L^v9YnKsp;ayioeRacV_2nK zUUXk5=}N$=M|0>lmiD9wnp7X@X)L>&Az|B_tJ_rGm!se@{i3I-;(o#I5X!B3&6NWs zIw`^yz0Fk*D-28Y^7JlN57(GAxxDPXSo8S2RY&yJJ(p^qHaR`4wzzw#?)hac?VINW zeOx&YLzY$HwKUSB{i2Di6Zi5J zsX0h7z2SrBFb{cqQ26&0kEqzs-j|p(oz@4FKlY1W^r=Y#mrSvf} z;DLs=dOutLjrOd7fKN)?U++v=x2@;T`YJ0u{>Y)-JbF!5e?Fmbo%Ffhi_w!`%sN8p z*aCK$KIMKocVA_4ZyBfV$8)0=`*}1>2B~JO6x+|0t=Onxff=;gdNq>uINa$XxM_ywVp8nX=+544*RFG)cFL{YdkeO5mJ~ngmXR zr#OeW_wo21qXv_A`BG2O{TWQ{GHN2k<$?mm#FyOP?K!#l)Szg`tqa@Y0yilQqF>8Y z3mNceL`_v}eY#s9CzVXLvyiy)Q+G)WH_fSOuhQrqmlDIsh4w9Zv^vzadM7dk;u1)1 z4b(TS6YFK}d%CH&%#Vy%2Yr!Nh6t0eTl%;{(5AaqtPg2c%9>A-(07(hkbS(vb88{n zQMs_xe3;5Q(7mQ*aU#c2CaH937?p5QjkQ zSsiOX-r?ZHp#Sx^lkVStJ0rgRHT|Cr2?+@`H8o%}05cB{4=*n-KR-XfvyhMwAhd{x zi0H-uREuv60Jg-&0Bl2YOK%L|H-I-JH^4UFwYs`GB(%1+HiWdEo*v*d82ya_zy<@D z4QAiIeF(WBydl3K!V!uCkRLpF5MepM`H>?>AkHDn5s(9x+iuJciH_hLvK$}efZ_xQ z2mA&T6cmI{aeRaWegk*|a6@b(%>EwOfY}h+fZX2?U^&46w1dH?J3u?&dR<-J`Sa&5 zT)5EO+>8(%!8t%V1UbMrpf-RtMD?9JcL1t;dU|?$djYNQ-Ma^X4W|G10q}DIsf0$SwlT=({uVz#>TBvh2!0}_nyU-zjE;$F%`dK=`E>b zl=Haw{DpHucQTn;imTefc!C!*d`DQ@<9PZcZS34#hFGDh1VX~ z)yoEF+r7+2JesT`vQG+~evCn7UciJzD++6J?jhaPQEU`M-O6x!h)rlnVCQv>!^v9b zf{Rj~L_Op+G=8=)rgZR2>iFI`tIPeVia~FvvZTEh@1Ik?jit?&`8fAl<$9#=LyjZM zn2u0ft#sF3$wltH8A?HD9`EbuUItV^Z58i6gL_N&1rmyR!xd&$1u-b==q2qk9*gDs zqJ`@iHQ)U7XGyHrS9$t;g7$n26!zAS$EfiLw@0PcKC%9Kk2Bg7)4_3nzivdePMB46 zDaM~WJdd76B&Kw5av6h4`21`}>ADOz8C?T22~mrO%wYAU!3Ue`Obuj;i!ROG5&2E2 zDfYtbL9RJ;x9Hj4nmUCWGE!O%e&bZLx888yec4Ve|9-9mtu6Yo6C;l>nex{$8N_E& zQc`kqauA{ceraiGL6Qd1nURr^iHQlMW)PWSScXgnkr^M$0Ll13MwkrA3_cM!gJccx zj32HQ6cmtr4Z<}5H3-w1nwlU=6Mz~(8uA&!`TIzqHAvGiO8+oNLk`0<4FfgE)JUvG!Zn05LiA zWG@n{L8h*$sX^Ea0yTnPn5IFJ2J8jt8G;vNWyoHTk@4A!;1?1Y()V}t{$B(}IQ%md zBjFlC7-nkliNtD9~5LUZ7w>TBGC33z-?UR0D9@I@{(%L5zcOK)IKVRb%dvSef zC(UO|=|`;3S8J%Qa5n~=I%Y!saeMP@RBq3DdW*}Kxu|J3&V=rj*YlAn(kea*Qw4KV z)F;-q#9n**q4y=*`ud7I@2VQ@s7H>r&acri6tdjO<+Kk6qKhwDonjLg+!C=_&e1%u zZ*?>-l%;smGWhWl3uXB6txvZ3kcWqi2Irm-C`yupBRIwMzmHq|(a zB~#ZNSLL7{2bmg94`P$39}DSicnp~HY00|a1zVlZSIgF>MwDJf}aXaJ1? zih;M-wlUCNaB*=#AVYxxI1EBDz%LvGzXSwE@C(_iq@?t{-T+<$a2RH0Kx2qv7?>f4 z@e?x0#xNd(U<@NM;x-5%3Gx0F1`r$H$Kc;}#e;& zk<>cbJ*&Nx=?)n8;NHQr3%^yFXL6b+rF@i|h;a6pX%`L3s6Uz^)jhuUe4e=FR_MW3 zCvsZG&j&bfIUl=lK5Z<`Xg%rS=_NY~cieSvttEvar_?O@0=cElGQ-1sLI*=E8ars;ckm)m|5oaAg7$KFy6pOyS{gJDRSxgamEWM+0t-MTG# z!6{|GxIv!0F4iLp%h6V@9{wsx^B&7gQEXlNBzFcxU)KD>sc~yu4y&R5!r@I2EuSDq z2(9eb1WU9OuXPyxt8i;|7S|TTh;96s*Ir!wV{d}_m_2Qx$rUR(Vu;S6v9V-94s3BG zQ}Q(NB)STmagU00Y~6_F1z*PP;5U4sqDv`LoG3w7aWrMv>5&}~Pg_JuY??*unD35W zx96$4(-r2)w9HW@St{+B6KM{?QMPV6^MYKdqU;k#azvHP1maWIKA9&UFnBWNm~9kU z67p~^Ya}vGj-slBPkf20j7yx&Ihi52L@>@OP%A!NhRpjp&tCt+*D4RsQkI0C#%&rb zr49=Yag1(QA90E16J5H${c^bA@QGUgB)jv4&R@Fgx%@Y271a{8*GBMlZWdFlyUImU zPM$VL$|}`OVL@S~LGIFK`!Kgt>$<;4=^hK7m=-;P7 z2n*ECeGA478k;x&%ToM87y}Fg{(?jd01QGgU@+CjfOHH7@E8PSkdDCstqj1-%*>20 zmqAztUDG2;-mS-ybpJ#Bg9PCh*SC zVL;;yj0M7DsGA{=5z!2yF&Lnmft&yXq%%+yV1RdqNtwVq!?27f3M3{2n~ZQ5iV6bs zf;jwrB8Gkf-#GuSnqR?Oj96xT#SC&WuoS>DLr4SB3|$3G#2^lXEc`PDBY*x&U`!g^ z-6Op@lG9%;DtbX%56!gmWbh(Gbyky#YV!OM${9;hA?30OYKCdc7L`L6N6wDiJ;r)r z$Bn?1cY7$G)!BDwo~vn|xuN2DO3(W1{X?-=?pZalk!kmDQIfvvky9yHEW| zq1GfidDY_3_(E zqThT_xns1AlXt}Jv&wZG`Obi@C7kHH0uP&Y2H>^{c9;NgIP8UVndnuzS4!U zrHxaEv(_)3zLn%FFyY1$&>^2YW^*v!2mO|BB7De;HL?=$Y*-m=)RRyrocc_AzI+ z;&he00#1gwDv`!O&mn#fLw07Fad2Q&`SE%(s=R`*c42Gp`Voqm8eC{&RYE~g^n^=a z;xaGFL0GFI%>O~_!Sd@;RceQDi>GGdRR!7YGOVqp?=sffQ1-KUk{MNUx&>FMaX7Tk zcQ(n#Z=q7|Tl`3zC#>@^V*7=gBVCLtq0jkHsta2*8a>I7MEniLY@{Ur0x{LENX3X_ zM&dEd#t4^@V9d(O%FfP?to1-D2HsduP!Jenf=CR4F@7pWf-xc`z`76LNZ@b$U?j#* z#fYN-PzI?O-y0)&7_R#eHGy~ud`k?~1Yj|OW3cf9cH)<8{JwX^KZNq%NyP+C7*H6l z`w%+;$%|kYZ2W+rfV)0mh7myl$cs1%WSa*~1wMiyd`gMfA|S84M~k}l0irY zm<9cN`ZLEaX>uC0iUlSrFj*_5ER)!bRB0W=;M&ij!nMpBfHk}v_O>9G6v5R5m%3=*e$8&0xn!Zp32jAD5e#uiKjwP18jM>AF zN~+{JezCQ7L_EvL@RMd6RcO-P>r>&kC~wyEqBSvJuiyO*Ul)H{=FyS=kGTx=F+ek< zGcXq*H3KvQi43{S!NCFR7SL88bqfM(47rS$VnAeAz`&Oj5Xbl(3;<=wWf+t3H+&Gv zh%yElnIISAZ|{Bymyv)B${0U1$oNeRz-4HMVF!aCBLf^GMBd29gaH|(V=#Y^juBt{ zvnB?hGbm#q0U0tHwlWZp{Cz;i=QRRr*t_@{sew>N3 z46`td!+^zLfGGx{80KOSjRBp(CJziKV?a!UKE|Kw3>c9A2A3Ul(JJoik=9KWw>T}= zSC>DZ2PKR9{z0cdbqL(!R7=o{Bde`GU^S4a6g-0A!x+9R4<^F!q14f;BN{}e3&SjE z3)MTD&R`Cg3c88ii6oxk6wE&*>+k0+W6r_I*>Q9EwyfLj?T=$^h(mo#qZDr5QwnDd zbsBK8-XFfX%&$oeUC0~Z%EoVS^dVVC=vst${5`=mYbuhDy@ItbBrQAQCAU~$UhcAI z3FG5fx~HObLiuu5w)fPObd5G~?9P>U6E7{-UC24}y^M~J-91ljjM?h*Sv=~YKV1PI zsvT$g*yrhrW$D^>O(TrNrZy5av&l^dt@MU%L#|Dbmv@N_iEI zwMU^M1-%xzqPE^P9Euc7PtA@HOZF_ZluX8G87&M?8d(lZDhx*N3g>;JqDWR{#EY}C z<<&_FYAn^JpZIF0&1SAprWyFan@{^3eM^~E=!Hc-EzK$Ua!pMOp9u}&^^%EfdV5rb zrhC7xQJ%M6sAGOE)9s3U|MjQuRDx;EC)JI%EgNP>%Z0|}#7T9gha_=_js>LgdzNHm zZ5wi^peR!3tt9`fDO5%Da+0^2MAMhHCXm$r0B_}~RS)56`d!2#s)r6yOvh!;wr!F- zPkCi`okJrfkvi1*tYb^_BUpT)-)XPuqnG6-C7ga6ilhtbSKyZDF z@qjmm>KGUbd>(^-1?2JX^7z}Y_)!@tS0MHnzZr*=;|SQiQH=Yhk>N%UzjpyOGO!gO zDua*=5;Bm+0K*^{gYE=K!app&!R{Nh60iXWN^n1$4Q261A3$di7!88z1ys#o*@s9C zKx@#o07W@~XJ{+F$MAnwjziM&9~%m!O@V0Se~aVazd?bFXk@@?Fo;Y>c7M=ifT)c0 z$yP5E)!t}?2@($9|BSuj$WDf(P>e;5l9X_7C9!ahk(I-! zLuc>@CpjHI#aYr7x-HDNm`X6>(X{(V5_z#j$2dr(G}vy&7MqN1=3~BeQ~Zq9Gems`h9(cXTGx9JYE+xuZeKoZ3~NE_$7hNIXQcO=+hthS>D58>aep>m$XA zX9DRj67ARRW{!H$jCbYlY*ss&GOOY_MjB$H^6>M@Vxp>7{?b}O^Yl%M&`kZcHI_ov zMApX)^r=F=Z+1UudPbPAx2Zfq zBb@0%^s>AeTyZVjnOuB6yjgrfe03FT0+{@*5rl82@x^R)FVC#j? z{Do|-x|Q1Q+nyN}N4sdWs~E^-(}(!zDOKgAA2oL_XEy4c(oAq&7Sha&H%~GvH{DMy zS7kiZs}fUZkoqF?f_Uef!i)T4w^RZqdLLL{-!&9nc}sY~;sVWwXpu$|-G?GgWW%bW z&7?c^>eOzZ^{XS&xYtsr`t(Sv81sGqnw!lNHboyUP5N)S-S#-xre1Yh>WUbBvwzI% zOH2JTe}H7X-rL>(#d;6KV_+`ubu!|T0ia>!0$>_3%7E7dUISF(fY*SlKG=iEeaopiQ%~?Vm~AWrkDkV!Ncu>3Qt61I3Q1 z^KTm*1@h9`_;S6joJlZM{la;%OIG!sUYk=hT`A6CovT8Kbota(+thZ|+O^kBAEh7S z4hs-}**f$2#OxZmn96&}ncRoDdsbA5Ic=nBKfTib`qAf&J%u)){T$sPobo4n3HAf<_Hd zFB*lcQ&c5lsxwQ~jC};B9*91PD~Fo>wdA%H_f5e~r#Q?>}~7BSh!Bc{7gB_Xt+h&i9Iz zAjJMvc^ZakkfdRl-l$~!tCImzH5fo|(8+-3BtUV1R>t>{8c-S(HTxD!7qk zfH%3h%&f_V#*xB+qKfZYZLiDTOsuLwa3xcvTx3eq#ajEc38vaEZ2AKsCLbXKbhK3G z&|uBbpyd_T5RSdV;{A`~q0A}1;O@68 zZQqe%Fd1=yHQnYYE~fdkoGRPf#PV>VaJQC@>r6vh!c|}Qpp%oAKhoG-kbNp`f0cRS zh_KtlOULzK)Y^6q@50--B9CB&oo&xmZ(}chVZGp8I(MuWcTi-98QOgW z=v#S{AaVwcSAk+ZfvG_>N|mqtgo6rM!kEk>;{*7E+|p#R+fZ**2AeTkqqc7IEanwa zJY^k&>M3M7BbesK6Gzdr$fc)E(O#k!yxPH~tGa62mq^tU_Cn{Db@$jw9Lgm5teSyt zX&`SHPkcIc6l1^6{7#AqRoxMkv5BJ;Z)_Tt&)Fe|tVhsZtNpC*JGHat_7i2C5$3gw zVrpe}%0xTx?oE&2=hYG0x^~F2M0{PnQsdNay(+bfm03m=Ih3b)wN%2R6C<~zHI!CS zT*w?aoK&l%B%qmmkG+OSRpK;#?&WPVE}Ge2Tppaqkcx<^O4yJD*LP8NiaO-W)$DH0 zeEO{BBAQgPs`OW_@aWiY*A^#ge!IT< zhc`*bWf2kqR@s1|(Py;+tqhLqqw21ZYrIMlv+m1mZ6Pe`rCV z=)m_G@FoynX@JW>g0=?iFaHeFNDxQvOW=JVz%)qJz&^ukK>W)R5` zAfus%hQ$oz2oOl;zj8r>L~8KmZ>Q>sZlIwjs24OU`U;5DcThARdwc`j`tiR^6Mm3@ z-hFsiR_NZU;TqE$K_esFEckG?b}xDDd~kdGc-`S=rswKuehX^A6`hfOsQIp>%KI@*(qe(| zlw`@xwXbyzZ_x(^)-|Kpi&>2y9JSbg&DHn8Ql(5Mt@~C@*~)^C14TZ2ZCB1^i|2;K z`*ejR_8H-Ble`M-qPKfvlp+{O6GEfp`$lEuVk#wIwC{d5k!v66BDd0Fh>pCoa%7-k zO^-y=Bzw+yh0WCu9gjP*WF%=LWtX496_hohwlAH{IN_vtGrx{Z=%EVLedUWu z`DfTYv4yNjtd*(?{7;Qg=G%nPM;w&&7@Y6vo@R)NHg_2eigW2rI-`GDi6KTQT8Tl) zDO<_du{xgDrZm4!NzSGg8#cGEve|oKUsbF7e$(^Ys*;5pwzO)#ujtqoV}$7uK4ygO zQ`$q{Jjl#`;vzliEs;wM&Ua5}y80^*V8f%IKfvZ?pF!tMtL?YFLU)4dyqfqMrQeQy zRU$cdoviHcf1Rpr$bR1&{;E(7D$a0A2$&6<&7f2V`*eWWfYt!gph*XVG~h8j0z|G& zAef>0fCnc~Qo|q(#Wa$l@sCLeyfZW&a5D%?8z4gC&-WcV2x+9o0S~tcay5Rm{ykz7 z{)*)7@4vtVPSB8s{si28;~%I%X99!?NYnt#z={AELk$g*Ge9zd#DGYKH`)l5LA3ti zfW6@#55PGXP=f{oV>xn>0cV-K~adv{*T}?sl`vs!vi9H8o0I+p#ZPgxv>h<|xaOMQ5RsOmVE)qDnoNb$4W)kyVB=&uZd~r2@aGZqB+7s@^3;|4A6* z+I)yZ$$P8U%!}3!Rn#uowxhgd4$gN=6q4@Q`6TAU@)CBIy`l;DzE%Pt+ z5%KfuQ~XapwYchY+E}`@5V4laKOH+}iKV`Qo0Mk^SfhVz7AR$JidE(0&_U^!ikTUP zXi+>)4r3s?&8+;cOy+1f$@r!hXRy~7B8*y7br^kTs-8R#=WT0YVAL8G;L&em{romg zB|jceOX<_xFn5`;yeM}K zo{~5h-s0>e7rXssTP&iTwft|lIBVRywj@;P8t-CMS#H|N;Z?P(^GHns<{D*<#w{J` z8jUx*PuHk7e^^c|c)9c}F|wHQ*n_A$a-Na(J=`*;O;l?kT+O6!wNI!8OuCDywV~VU zh;Y7oVnMGNN~sDT`yX^wwXfTgm^IU8^#0;py2$w}#H2CX8Apuo3SY-NHTl2yhIo?t zTc{>N)`-8b`V1ibGv@)B4Nwi`G;G`vXb=3}9SG2f`+DT{BpHT_P1|@KKYW!t32X<2KM?@rHK7o z>ubzT4XF3ZKHFBY?__?I116(fTFqA+!(E!lf8@x!plk-Y(!|3!x1!rmyx9l+vh;>t zE{=1EN^q*?emt{~o_LG-tG+UiuU(YdbiCFXYPJ!~kw}wZ>(%?G9K-o`hdEI2Hx1~! z?AwBI*P6(x!}Xs^7ej}}Jdsqrsgxb%W5Lx@azO5tNy~trc%}-ehv&tG?Cv=88@nEo z&hC71V!h3ZTKMc%jvJ;2G4Oy@A6!htir{Raj5Lst95OJQ{Qb(`gNda zTEnp78du~Xo0jv4)gDqU`64}WR)Eb&s)BR{KS+ z^erbo^JK8!3Zu$o-|S19#daWy-%_j2&nRJg+o6HjQ@y%LMiS2`=<`n-bUGH$uTe~@ z2h%F{`b!KhP#6l#R9qH4Eb3K! z{d9c!HDgEXdTcI_^@YqS*5i5CUX3`{J6h$`_>8zx1}i85Vin4g465uczU60B^`|(0Jg#e}upr>D%F3j_>IU9W+!NpxFWPG+Zu% zR1N6+*ZUnHPyZKSMz)3!&xi>@)`!Rj5ilDn4oGf9Xdq%5q-TWI0Lf556Xa$B2Mv38 zFgn8?9=y*cIL-!H89ylh*H!4hcOWR6vU};%JEn$$-9gtzvUn*Bvbf#^29t^y77FSW zYmts((j`1`jq7K~C=DV@gw$VbVjLIgq|_U^*`ED5>tKT$)hiTc?@ZHnrjhBrZo~}F zJqqv5hEbKfK02sJ)^&he|CrTnx05pc%j8l=_})Bw)j%zm_^3Dc)GG;U(UX%oiH-Ts z&pva&)V{mfe94dJlgfi8M^g!EVfnt7ht8~|Q>+%ee=8ZoslDFlYcsL^ow$E<2{)5S}0(+S8cR7){f=_LKCc_kB^uE;uW}Vy!LgKE>J$ z^-qj!U$=B8`SbUh4V=blSlenbHC(pU@}l^}qa{J>M<1tUN}}bfYaGfGv{z}tE|tNe zf;)|VDUwga+;z$@{Vsq6|~+(Vg(e(Vc< zDjz=U8YU=G>Y;PPX;aN*qG%WHsl1eBw=RlvjW8%7+No4jdT8p&WL_r!oMT~>I2&jA z&DAF7Vujwvj@4l`?9YVDOKe=6bKOndXv?Cm&(n!!x<=C0yH5Ak6jf4Z%Eqt+A6PQs^XMc*X1mNtg32gO%}o6bc`yzFHoRVbyLb`|{C zMnNuW_-IK}aIJTVly~#_Lz~UV!>czA1b=@y<69M4?w2bKaHWE*3Sq?qx(!(L0H=e% zaDc!J?*s7*9dKa?Fbz8$0Lq|%2Yd!Z?f2bh$XQ@Dz#vf>e!)-6;QK~i{&v3o$AK9L z4}fOmEu$a04X8ALt03SqTnr+wXW*mxXHZ5SrNe*D=!aa!KOIEEFn}^rh=zrZzs}|V zE-?RnE(5&*b2UiR_{|Q;WneNu8yZQ-_=kcZ8zb=;Dh-&80iZ!PhE@XxV_-6Xh6WBA z-lzPh0vd79e`8Ph?Y%jww#i#f?Ud}vX#o9jBN^vzYOTtUTUXFi8lJ*>f& z-(3D$J3U+@NEEd~uHXH*#_CS+iuhOJc3aR3AMvls^CdyE05Vk{d=Rzd8M#g8&Pr|6SUv0N}YAi1YNYt2}8CiC#aL;fG6 zJYIA+A8PZZ7QK8|=p6BqD_hlX@81fY2vNU2sOdH#9D`e-y2guoHEa|-6(fH}_sXli z>#n%RJFj+MxYn1zVR`gg*9>lVD+`6v%hkkw9NTr=DN)gNPQLIhf$T*O9{ZEH%9!#} zxHk_=)3}moTM}!TC81v&${g@uKPr=ccB?r_h6I;+s#z3MUgU_z&7{l48mw)L+!~UX zbf?d5JAb69TqMfCoohZCX`O93F^gy5#X`5j2gAh!B1`(xT5Nh-JJc2zT9U?7$ zl~(?X42IGIre&xu0E0nb1|b=4{g6@})XIpxKteCUX&~4G0suqee$QG&IwO7p-!;Q* zj3i|Ib{#-6K9ylqhOQatWI*D-_;|+m!5CpM>@_3t80l(&Y>YHB{-ZO&KivaDrwrmT z7$}bM?FG0OM0$0=8iSSwLSN9O!+#qTE(ej9GoVVwZ#RG6t3%L>*b97VfuEBRdjX!8 z!(Rfz`W-+ovIj&iQb1P&@yN&(3VwA1A{jBrKm78ywer8;{M?s`^`|7|ve&0BQt7(N z5Hj>G^QeB#Jcr5N=%GC9(T_@}Wh*eA3BlgiD2flt)Z3oWTK>xap-&RGE6PjxA$gmV z$JCwJQ}X9uWt_cVv_{36XVrd&rerrYqxjJ~+lklCP`BEj4@eTeOcFF(aG+15Y*qOk zOLNab+>tEPo~NItQ{A*O{KXpC9i9oCTV1)#>eF-g>e-Cg3uhYK5;N4da#rPhbx(S| zPI`Kq)ED__tkL`R*lV`)v)gRf3y5DEt*CI0DL(7ZJv#c#>4R+ay1cT#2KxC2+t^(e zH*ViOzvwt%ehp=2bR5U3W90E!sM645QV~TT%Agkd+K)-C`EV$kT(flq?FTus$Zc&} z#cC6$d`DC<^^t}#;_RVTu_)be+Bk9xQ*1n`CJQ!!*y0IiBIQj~soes-&;$F&LRB|i zdxaEVN9xs&=O({fHHk|xQHo+$qRDqUnyO*$%n^sRYvoDOaqqIt#>w=QN9q+PmgVkl zo99aUl(gjFX(il4mFKbki6`;XIY$0SNxP-{S>nOymn!?Ov(Xf#tLgHhGS){0vh)1e zZK+clyGB{#O`|6St`wEn#D?zDe|EQ+DR{2ib#SxLozmgmdc|}h>mmJ#4P-Myb+pj~ zRTbA-Svz=AiW&8q1n$grH4euHiP~WU1A{R`awKYWCtF4;)7?U2@-RUf^Szt_kpmr9 zKPhcKFLG!0(H^Yv@f8l#u2^~<>^02sx$CRTh4m?TugV=fenETl=6}^QXn*PTHgd*| z{{N78uA%272m@dS@;1sLlh$r{{ERy zASD@Bf@I`q=FD)mWTFV{QNzTcq%(zQ; zEa)wczhbg2BHLxuf5Wg-V0~xC*^wIo9y!V+a!1-a9wyeR$k6Iv>EOcYteC#1*Qa z3W%n^^wuthp0I@(B^ zAhBRUZ1_vDCnIN8gEozYaC=rz;d+!#HeN*S3gZFTmZ%rW?);GxxvRH69tn4Ii88QSRSn`-a#-e_*u&+-Hd?eR zY?GjV0JZt3A-4Nt*dEJTKaLW08v5QcA^SD~2@PRc5(&4(MI%(w?9;vySED>is>-cl zn<8?o46=u*x!Z}fi|B*qI(f2Ru~Ifz1);S>udmIcIMm$q64CosKk8n%)8594Ni@7H zAb%rNWOn z4)7IrDnP9Q??wD?U;ovGqo;>eIQ&Z!Fa8ZX;EdD-#Y5pew{^48r?2dtJnVY-K5vmVCNWRn-nfy+#$dwK zW?kx9#y0pg*Su(=qmIsDQC`ryJ)rai=fb6fKB_j8XSeWv*|&J|(H&BTh!fvlTgGKl z`K)tnogc$RtH>vwyW;SnM|S=T8~axHpFXcsC)2?&Px=xzF?};elmK0{)g0Rw0vfuK0QP# zsIfGezjq%c-+18u>SFGF7G{oi2GYKaBL)d}U&{=nOBo{!1m7oHD3Q&lZkD_EpfECSO37uJ z3{8&4hQ6QZloFmy(W479qqxhw^u4U7RUUUr3TvtCFt#hn-$hDt>ZuoTbRAP4Izl+p zK_L39NzrcYGxf7X(b#>fb0Nnc-TBxp-s9lYht0MLQ)4ME9i0Xp=9PU))t*Ju2S>HQ zyZ6)CJ-)p8(W_W&-A4;3Q!F z1ww*A2P2n&U|$DUc7J*Xh=244dKLJ0f1q6fPfkD_{?i}~$c&`m@1M&cKr}%LhI9qB zH`ug*TRSBG0@&h5VEla@T-E^>jJ%iu@-Omw9K6tm^<)d&~miRF&ys zAG1{az?pJv?Q?=eH+H7x(${T+>j##bUPj~{SXtv|5S=sf$`9Zs{it`~?ni9~(Ij23 zBd+`x3-<=^+bN%~du|6R&FgyALd*&Mun22CvD6e!V`)$F=emaPFJVycuDvtn8)J3C zpzf!Q^6Y6?@WmwJ3dtE!{j9o}WD)VFV~M*|d#v=ul0S_YNbiVvu~*vZ6CJ0@?aZ-s zDaob#A{-+NTFH77Bt+-N_WLrT&hs8J@Ka9eF5hdID{wSNS=FdtW$db?36&qekfosq ze-=%FNYG7fADolAvtc;@(%o{tL($GBLMcg!qHwG8w{^v0rKYz>5AY2O=RV!RP@}z1 zW?HDSF`nq1%DtN~LP` zsH^>4Xp$RxHJl&3dXM~{B)|UQ47k06`59dKA+O7U)g2fJYPi6IZ43C)90W29$v|KL zAj7+C_=pB#j=zt`;IaEZfHQ$b{sTDU=j6X`DWIajFTDW?0jm>;et@AD+0sE30Ty*| zR|lB<{rs%x2L2qjEg-`Yje!Jdz;oEPfSDQ47`B&T(d|$B6yMJOYQH^U1O{CH!NFG) z-;)`sR{)U=26QXHAQ2iL)QGFV@5Ujz0_i6MTz@Mi5B|HBjF@8xYS?DOPsoTo1|j+X zD|!6i{)bU+qrG{1F4w=j;`?d(<=xBYU*8DK3YMT6J((CQ*j=m;n{?p`HeO7NYYU&d zrkWiE&7H|8QPH@(F8_X3^Y;>Qp`t!C!HPV`E`;(sl1T1--`vSwb>a&p_g3wFjn~52 z>P{(`nK>y0FJ3+)5*^SY-|o_vhL%mRZu9$)esy$S;z-B(Zrr5q$|KiK<@QCE)oS12 zEfEwCmHKkJ1#xe*Y3Av!>YSW7K&mGHC60HSmkIr#rEbTn$&>vv76%yuF7B1x>o4Fp zPZw+;l(|j!+68hZ|0xYe2LH*-N(}X6WMwiRPX8f?ar2t3?w+Ae1zRIoy>8>kJi*Vs zDpT(>8K|dL8OMzB&`WRjj0idJPoe6?*b8XQYm@~@YYOogVo{&=rO9eO?MqR<<;ImI z7na1UbYudf88g-C$4LDuHj2*xdvh^C-f4nFEd-bAoRV!zo5E*68SmUvEc97%B3zv` z>7B~t+074G#MapaGyR#Xr}Qj6rG+9iZtZp|a@t*eq$(zbwq(S}`bc$!Kl`l*x)nI; z5RtkXW|y7{=AxSsRTtK)_oLYjqNhYG(a#^yIb98YpE>1QeB4B^FsY=;*5DH*=h+<} zJ6f@UZnJdz5=HJ^>~9~;H+^~9Mg;taQOZKH=^AfcOeG4fdnCS2=Tr(*t%)$B5=rUF zxIzmD+^qf$XO6?5_NI*QdH?zT&rjf=pTIvqfq#Ai|NI30`3d~<6Zq#R@Xt@+Z~p}T E4=i&ATL1t6 literal 0 HcmV?d00001 diff --git a/assets/js/examples.js b/assets/js/examples.js new file mode 100644 index 0000000..5d3482c --- /dev/null +++ b/assets/js/examples.js @@ -0,0 +1,343 @@ +// some regular checking +var isIE = /ie/.test(document.documentElement.className), + isIE8 = /ie8/.test(document.documentElement.className), + isIE9 = /ie9/.test(document.documentElement.className); + + +/* TRANSFORMS EXAMPLES */ +var featurettes = document.querySelectorAll('.featurettes'), fl = featurettes.length; + +for ( var i=0; i0 && 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;j0 && 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
'+parseInt(css.width)+'px'; } +function onHeight() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'HEIGHT
'+parseInt(css.height)+'px'; } +function onLeft() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'LEFT
'+parseInt(css.left)+'px'; } +function onTop() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'TOP
'+parseInt(css.top)+'px'; } +function onPadding() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'PADDING
'+(parseInt(css.padding)+'px')||'auto'; } +function onMargin() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'MARGIN
'+parseInt(css.marginTop)+'px'; } +function onComplete() { box.innerHTML = 'BOX
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 = '' + chars.join('') + ''; +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 + 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, + // .getPropertyPriority + getPropertyPriority: function () { + throw new Error('NotSupportedError: DOM Exception 9'); + }, + // .getPropertyValue + getPropertyValue: function (property) { + return this[property.replace(/-\w/g, function (match) { + return match[1].toUpperCase(); + })]; + }, + // .item + item: function (index) { + return this[index]; + }, + // .removeProperty + removeProperty: function () { + throw new Error('NoModificationAllowedError: DOM Exception 7'); + }, + // .setProperty + setProperty: function () { + throw new Error('NoModificationAllowedError: DOM Exception 7'); + }, + // .getPropertyCSSValue + getPropertyCSSValue: function () { + throw new Error('NotSupportedError: DOM Exception 9'); + } + }; + + // .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; + }; + })(); +} \ No newline at end of file diff --git a/assets/js/perf.js b/assets/js/perf.js new file mode 100644 index 0000000..4c7723d --- /dev/null +++ b/assets/js/perf.js @@ -0,0 +1,178 @@ +//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'; + 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
'; + warning.innerHTML += !engine ? '- engine
' : ''; + warning.innerHTML += !property ? '- property
' : ''; + warning.innerHTML += !repeat ? '- repeat
' : ''; + warning.innerHTML += !count ? '- count
' : ''; + } + + container.appendChild(warning); + } +} \ No newline at end of file diff --git a/assets/js/prism.js b/assets/js/prism.js new file mode 100644 index 0000000..8d21c08 --- /dev/null +++ b/assets/js/prism.js @@ -0,0 +1,6 @@ +/* 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,"&").replace(/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+""},!_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://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://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(/&/,"&"))}),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:/()[\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:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; diff --git a/assets/js/scripts.js b/assets/js/scripts.js new file mode 100644 index 0000000..babe497 --- /dev/null +++ b/assets/js/scripts.js @@ -0,0 +1,14 @@ +// 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(); +} \ No newline at end of file diff --git a/assets/js/tween.min.js b/assets/js/tween.min.js new file mode 100644 index 0000000..299b67d --- /dev/null +++ b/assets/js/tween.min.js @@ -0,0 +1,2 @@ +// KUTE.js | dnp_theme | MIT License +!function(t,e){"function"==typeof define&&define.amd?define(["KUTE"],e):"object"==typeof exports?module.exports=e():t.KUTE=t.KUTE||e()}(this,function(){function t(){var t=document.createElement("div"),e=0,r=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=r.length,n=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(e;i>e;e++)if(n[e]in t.style)return r[e];t=null}for(var e,r=r||{},i=[],n=!1,s=t(),a=(a||("requestAnimationFrame"in window?!1:!0)),o=(o||("transform"in document.getElementsByTagName("div")[0].style?!1:!0)),u=(u||("border-radius"in document.getElementsByTagName("div")[0].style?!1:!0)),l=(l||"ontouchstart"in window||navigator.msMaxTouchPoints||!1),f=f||(l?"touchstart":"mousewheel"),p=document.body,h=document.getElementsByTagName("HTML")[0],c=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?p:h,d=/ie/.test(document.documentElement.className),v=/ie8/.test(document.documentElement.className),g=g||o?s+"Perspective":"perspective",_=_||o?s+"PerspectiveOrigin":"perspectiveOrigin",m=m||o?s+"Transform":"transform",E=E||u?s+"BorderRadius":"borderRadius",y=y||u?s+"BorderTopLeftRadius":"borderTopLeftRadius",b=b||u?s+"BorderTopRightRadius":"borderTopRightRadius",w=w||u?s+"BorderBottomLeftRadius":"borderBottomLeftRadius",O=O||u?s+"BorderBottomRightRadius":"borderBottomRightRadius",x=x||a?window[s+"RequestAnimationFrame"]:window.requestAnimationFrame,T=T||a?window[s+"CancelAnimationFrame"]:window.cancelAnimationFrame,C=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],I=["scrollTop","scroll"],S=["clip"],R=["opacity"],D=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],M=["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"],B=["fontSize","lineHeight","letterSpacing"],k=["backgroundPosition"],L=["rotateX","rotateY","translateZ"],A=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],F=C.concat(I,S,R,D,M,B,k,A),P=F.length,Y={},X={},Z={},z={},q={},Q={},W=W||{},N=0;P>N;N++){var H=F[N];-1!==C.indexOf(H)?W[H]="rgba(0,0,0,0)":-1!==D.indexOf(H)||-1!==M.indexOf(H)||-1!==B.indexOf(H)?W[H]=0:-1!==k.indexOf(H)?W[H]=[50,50]:"clip"===H?W[H]=[0,0,0,0]:"translate3d"===H?W[H]=[0,0,0]:"translate"===H?W[H]=[0,0]:"rotate"===H||/X|Y|Z/.test(H)?W[H]=0:("scale"===H||"opacity"===H)&&(W[H]=1)}r.getAll=function(){return i},r.removeAll=function(){i=[]},r.add=function(t){i.push(t)},r.remove=function(t){var e=i.indexOf(t);-1!==e&&i.splice(e,1)},r.t=function(t){e=x(r.t);for(var s=0,a=i.length;a>s;){if(!i[s])return!1;i[s].u(t)?s++:i.splice(s,1)}return n=!1,!0},r.s=function(){n===!1&&(T(e),n=!0,e=null)},r.to=function(t,e,i){void 0===i&&(i={});var n=n||"object"==typeof t?t:document.querySelector(t),s=s||i;s.rpr=!0,s.easing=s&&r.pe(s.easing)||r.Easing.linear;var a=e,o=r.prP(e,!0),u=new r.Tween(n,a,o,s);return u},r.fromTo=function(t,e,i,n){void 0===n&&(n={});var s=s||"object"==typeof t?t:document.querySelector(t),a=n;a.easing=a&&r.pe(a.easing)||r.Easing.linear;var o=r.prP(e,!1),u=r.prP(i,!0),l=new r.Tween(s,o,u,a);return l},r.Animate=function(t,e,i,n){return r.fromTo(t,e,i,n)},r.r=function(t,e){var i,n=t._el&&t._el.style,s=v?"filter":"opacity",a=void 0===t._el||null===t._el?c:t._el;for(i in t._vE){var o=t._vS[i],u=t._vE[i],l=o.value,f=u.value,p=l+(f-l)*e,h=u.unit,g=-1!==C.indexOf(i),_=-1!==B.indexOf(i)||-1!==M.indexOf(i),x=-1!==D.indexOf(i)&&!v,T=-1!==I.indexOf(i),A=-1!==k.indexOf(i),F=-1!==S.indexOf(i),P=-1!==R.indexOf(i),Y="transform"===i&&!v;if(x)"borderRadius"===i?n[E]=p+h:"borderTopLeftRadius"===i?n[y]=p+h:"borderTopRightRadius"===i?n[b]=p+h:"borderBottomLeftRadius"===i?n[w]=p+h:"borderBottomRightRadius"===i&&(n[O]=p+h);else if(Y){var X,Z,z="",q="perspective("+t._pp+"px) ";for(X in u){var Q=o[X],W=u[X];if(Z=-1!==L.indexOf(X)&&!d,"translate"===X){var N,H="",j={};for(N in W){var K=Q[N].value||0,U=W[N].value||0,$=W[N].unit||"px";j[N]=K===U?U+$:K+(U-K)*e+$}H=W.x?"translate("+j.x+","+j.y+")":"translate3d("+j.translateX+","+j.translateY+","+j.translateZ+")",z=""===z?H:H+" "+z}else if("rotate"===X){var G,J="",V={};for(G in W)if(Q[G]){var te=Q[G].value,ee=W[G].value,re=W[G].unit||"deg",ie=te+(ee-te)*e;V[G]="z"===G?"rotate("+ie+re+")":G+"("+ie+re+") "}J=W.z?V.z:(V.rotateX||"")+(V.rotateY||"")+(V.rotateZ||""),z=""===z?J:z+" "+J}else if("skew"===X){var ne="",se={};for(var ae in W)if(Q[ae]){var oe=Q[ae].value,ue=W[ae].value,le=W[ae].unit||"deg",fe=oe+(ue-oe)*e;se[ae]=ae+"("+fe+le+") "}ne=(se.skewX||"")+(se.skewY||""),z=""===z?ne:z+" "+ne}else if("scale"===X){var pe=Q.value,he=W.value,ce=pe+(he-pe)*e,de=X+"("+ce+")";z=""===z?de:z+" "+de}}n[m]=Z||void 0!==t._pp&&0!==t._pp?q+z:z}else if(g){var ve,ge={};for(ve in f)ge[ve]="a"!==ve?parseInt(l[ve]+(f[ve]-l[ve])*e)||0:l[ve]&&f[ve]?parseFloat(l[ve]+(f[ve]-l[ve])*e):null;n[i]=t._hex?r.rth(parseInt(ge.r),parseInt(ge.g),parseInt(ge.b)):!ge.a||v?"rgb("+ge.r+","+ge.g+","+ge.b+")":"rgba("+ge.r+","+ge.g+","+ge.b+","+ge.a+")"}else if(_)n[i]=p+h;else if(T)a.scrollTop=l+(f-l)*e;else if(A){var _e=o.x.v,me=u.x.v,Ee=o.y.v,ye=u.y.v,be=_e+(me-_e)*e,we="%",Oe=Ee+(ye-Ee)*e,xe="%";n[i]=be+we+" "+Oe+xe}else if(F){var Te=0,Ce=[];for(Te;4>Te;Te++){var Ie=o[Te].v,Se=u[Te].v,Re=u[Te].u||"px";Ce[Te]=Ie+(Se-Ie)*e+Re}n[i]="rect("+Ce+")"}else P&&(n[s]=v?"alpha(opacity="+parseInt(100*p)+")":p)}},r.perspective=function(t,e){void 0!==e._ppo&&(t.style[_]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[g]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[_]=e._pppo)},r.Tween=function(t,e,r,i){this._el=this._el||t,this._dr=this._dr||i&&i.duration||700,this._r=this._r||i&&i.repeat||0,this._vSR={},this._vS=e,this._vE=r,this._y=this._y||i&&i.yoyo||!1,this.playing=!1,this.reversed=!1,this._rD=this._rD||i&&i.repeatDelay||0,this._dl=this._dl||i&&i.delay||0,this._sT=null,this.paused=!1,this._pST=null,this._pp=this._pp||i.perspective,this._ppo=this._ppo||i.perspectiveOrigin,this._ppp=this._ppp||i.parentPerspective,this._pppo=this._pppo||i.parentPerspectiveOrigin,this._rpr=this._rpr||i.rpr||!1,this._hex=this._hex||i.keepHex||!1,this._e=this._e||i.easing,this._cT=this._cT||[],this._sC=this._sC||i&&i.start||null,this._sCF=!1,this._uC=i&&i.update||null,this._cC=i&&i.complete||null,this._pC=i&&i.pause||null,this._rC=i&&i.play||null,this._stC=i&&i.stop||null,this.repeat=this._r};var j=r.Tween.prototype;j.start=function(t){this.scrollIn();var i={};if(r.perspective(this._el,this),this._rpr){i=this.prS(),this._vS={},this._vS=r.prP(i,!1);for(H in this._vS)if("transform"===H&&H in this._vE)for(var n in this._vS[H]){n in this._vE[H]||(this._vE[H][n]={});for(var s in this._vS[H][n])if(void 0!==this._vS[H][n][s].value){s in this._vE[H][n]||(this._vE[H][n][s]={});for(var a in this._vS[H][n][s])a in this._vE[H][n][s]||(this._vE[H][n][s][a]=this._vS[H][n][s][a])}if("value"in this._vS[H][n]&&!("value"in this._vE[H][n]))for(var s in this._vS[H][n])s in this._vE[H][n]||(this._vE[H][n][s]=this._vS[H][n][s])}}for(H in this._vE)this._vSR[H]=this._vS[H];return r.add(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=t||window.performance.now(),this._sT+=this._dl,e||r.t(),this},j.u=function(t){if(t=t||window.performance.now(),t1?1:e,r.r(this,this._e(e)),this._uC&&this._uC.call(),1===e){if(this._r>0)return 1/0!==this._r&&this._r--,this._y&&(this.reversed=!this.reversed,this.reverse()),this._sT=this._y&&!this.reversed?t+this._rD:t,!0;this._cC&&this._cC.call(),this.scrollOut();var i=0,n=this._cT.length;for(i;n>i;i++)this._cT[i].start(this._sT+this._dr);return this.close(),!1}return!0},j.stop=function(){return!this.paused&&this.playing&&(r.remove(this),this.playing=!1,this.paused=!1,this.scrollOut(),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),this.close()),this},j.pause=function(){return!this.paused&&this.playing&&(r.remove(this),this.paused=!0,this._pST=window.performance.now(),null!==this._pC&&this._pC.call()),this},j.play=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=window.performance.now()-this._pST,r.add(this),e||r.t()),this},j.resume=function(){return this.play(),this},j.reverse=function(){if(this._y)for(var t in this._vE){var e=this._vSR[t];this._vSR[t]=this._vE[t],this._vE[t]=e,this._vS[t]=this._vSR[t]}return this},j.chain=function(){return this._cT=arguments,this},j.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},j.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},j.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},j.addListeners=function(){document.addEventListener(f,r.preventScroll,!1)},j.removeListeners=function(){document.removeEventListener(f,r.preventScroll,!1)},j.prS=function(){var t={},e=this._el,r=this._vS,i=this.gIS("transform"),n=["rotate","skew"],s=["X","Y","Z"];for(var a in r)if(-1!==A.indexOf(a)){var o="rotate"===a||"translate"===a||"scale"===a;if(/translate/.test(a)&&"translate"!==a)t.translate3d=i.translate3d||W[a];else if(o)t[a]=i[a]||W[a];else if(!o&&/rotate|skew/.test(a))for(var u=0;2>u;u++)for(var l=0;3>l;l++){var f=n[u]+s[l];-1!==A.indexOf(f)&&f in r&&(t[f]=i[f]||W[f])}}else if(-1===I.indexOf(a))if("opacity"===a&&v){var p=this.gCS("filter");t.opacity="number"==typeof p?p:W.opacity}else t[a]=this.gCS(a)||W[a];else t[a]=null===e||void 0===e?window.pageYOffset||c.scrollTop:e.scrollTop;for(var a in i)-1===A.indexOf(a)||a in r||(t[a]=i[a]||W[a]);return t},j.gIS=function(){if(this._el){var t=this._el,e=t.style.cssText,r={},i=e.replace(/\s/g,"").split(";"),n=0,s=i.length;for(n;s>n;n++)if(/transform/.test(i[n])){var a=i[n].split(":")[1].split(")"),o=0,u=a.length;for(o;u>o;o++){var l=a[o].split("(");""!==l[0]&&A.indexOf(l)&&(r[l[0]]=/translate3d/.test(l[0])?l[1].split(","):l[1])}}return r}},j.gCS=function(t){var e=this._el,r=window.getComputedStyle(e)||e.currentStyle,i=!v&&o&&/transform|Radius/.test(t)?"-"+s.toLowerCase()+"-"+t:t,n=o&&"transform"===t||o&&-1!==D.indexOf(t)?r[i]:r[t];if("transform"!==t&&i in r){if(n){if("filter"===i){var a=parseInt(n.split("=")[1].replace(")","")),u=parseFloat(a/100);return u}return n}return W[t]}},j.close=function(){var t=this;setTimeout(function(){var e=i.indexOf(t);e===i.length-1&&r.s(),t.repeat>0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.reverse(),t.reversed=!1),t.playing=!1},100)},r.prP=function(t,e){var i={},n=e===!0?X:Y,s=e===!0?z:Z,a=e===!0?Q:q;s={},n={};for(var o in t)if(-1!==A.indexOf(o)){if("translate"!==o&&/translate/.test(o)){var u=["X","Y","Z"],l=0;for(l;3>l;l++){var f=u[l];s["translate"+f]=/3d/.test(o)?r.pp("translate"+f,t[o][l]):"translate"+f in t?r.pp("translate"+f,t["translate"+f]):{value:0,unit:"px"}}n.translate=s}else if("rotate"!==o&&/rotate|skew/.test(o)){var p=/rotate/.test(o)?"rotate":"skew",h=["X","Y","Z"],c=0,d={},v={},a="rotate"===p?d:v;for(c;3>c;c++){var g=h[c];void 0!==t[p+g]&&"skewZ"!==o&&(a[p+g]=r.pp(p+g,t[p+g]))}n[p]=a}else("translate"===o||"rotate"===o||"scale"===o)&&(n[o]=r.pp(o,t[o]));i.transform=n}else-1===A.indexOf(o)&&(i[o]=r.pp(o,t[o]));return i},r.pp=function(t,e){if(-1!==A.indexOf(t)){var i,n=t.replace(/X|Y|Z/,"");if("translate3d"===t)return i=e.split(","),{translateX:{value:r.truD(i[0]).v,unit:r.truD(i[0]).u},translateY:{value:r.truD(i[1]).v,unit:r.truD(i[1]).u},translateZ:{value:r.truD(i[2]).v,unit:r.truD(i[2]).u}};if("translate"!==t&&"translate"===n)return{value:r.truD(e).v,unit:r.truD(e).u||"px"};if("rotate"!==t&&("skew"===n||"rotate"===n)&&"skewZ"!==t)return{value:r.truD(e).v,unit:r.truD(e,t).u||"deg"};if("translate"===t){i="string"==typeof e?e.split(","):e;var s={};return i instanceof Array?(s.x={value:r.truD(i[0]).v,unit:r.truD(i[0]).u},s.y={value:r.truD(i[1]).v,unit:r.truD(i[1]).u}):(s.x={value:r.truD(i).v,unit:r.truD(i).u},s.y={value:0,unit:"px"}),s}if("rotate"===t){var a={};return a.z={value:parseInt(e,10),unit:r.truD(e,t).u||"deg"},a}if("scale"===t)return{value:parseFloat(e,10)}}if(-1!==B.indexOf(t)||-1!==M.indexOf(t))return{value:r.truD(e).v,unit:r.truD(e).u};if(-1!==R.indexOf(t))return{value:parseFloat(e,10)};if(-1!==I.indexOf(t))return{value:parseFloat(e,10)};if(-1!==S.indexOf(t)){if(e instanceof Array)return[r.truD(e[0]),r.truD(e[1]),r.truD(e[2]),r.truD(e[3])];var o;return/rect/.test(e)?o=e.replace(/rect|\(|\)/g,"").split(/\s|\,/):/auto|none|initial/.test(e)&&(o=W[t]),[r.truD(o[0]),r.truD(o[1]),r.truD(o[2]),r.truD(o[3])]}if(-1!==C.indexOf(t))return{value:r.truC(e)};if(-1!==k.indexOf(t)){if(e instanceof Array)return{x:r.truD(e[0])||{v:50,u:"%"},y:r.truD(e[1])||{v:50,u:"%"}};var u=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g),l=r.truD(u[0]),f=r.truD(u[1]);return{x:l,y:f}}if(-1!==D.indexOf(t)){var p=r.truD(e);return{value:p.v,unit:p.u}}},r.truD=function(t,e){function r(){var r,i=0;for(i;s>i;i++)"string"==typeof t&&-1!==t.indexOf(n[i])&&(r=n[i]);return r=void 0!==r?r:e?"deg":"px"}var i=parseInt(t)||0,n=["px","%","deg","rad","em","rem","vh","vw"],s=n.length,a=r();return{v:i,u:a}},r.preventScroll=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},r.truC=function(t){var e,i;return/rgb|rgba/.test(t)?(e=t.replace(/[^\d,]/g,"").split(","),i=e[3]?e[3]:null,i?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(i)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}):/#/.test(t)?{r:r.htr(t).r,g:r.htr(t).g,b:r.htr(t).b}:/transparent|none|initial|inherit/.test(t)?{r:0,g:0,b:0,a:0}:void 0},r.rth=function(t,e,r){return"#"+((1<<24)+(t<<16)+(e<<8)+r).toString(16).slice(1)},r.htr=function(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,r,i){return e+e+r+r+i+i});var r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return r?{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)}:null},r.pe=function(t){if("function"==typeof t)return t;if("string"==typeof t){if(/easing|linear/.test(t))return r.Easing[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(","),i=0,n=e.length;for(i;n>i;i++)e[i]=parseFloat(e[i]);return r.Ease.bezier(e[0],e[1],e[2],e[3])}return/physics/.test(t)?r.Physics[t]():r.Ease[t]()}},r.Easing={},r.Easing.linear=function(t){return t};var K=Math.PI,U=2*Math.PI,$=Math.PI/2,G=.1,J=.4;return r.Easing.easingSinusoidalIn=function(t){return-Math.cos(t*$)+1},r.Easing.easingSinusoidalOut=function(t){return Math.sin(t*$)},r.Easing.easingSinusoidalInOut=function(t){return-.5*(Math.cos(K*t)-1)},r.Easing.easingQuadraticIn=function(t){return t*t},r.Easing.easingQuadraticOut=function(t){return t*(2-t)},r.Easing.easingQuadraticInOut=function(t){return.5>t?2*t*t:-1+(4-2*t)*t},r.Easing.easingCubicIn=function(t){return t*t*t},r.Easing.easingCubicOut=function(t){return--t*t*t+1},r.Easing.easingCubicInOut=function(t){return.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},r.Easing.easingQuarticIn=function(t){return t*t*t*t},r.Easing.easingQuarticOut=function(t){return 1- --t*t*t*t},r.Easing.easingQuarticInOut=function(t){return.5>t?8*t*t*t*t:1-8*--t*t*t*t},r.Easing.easingQuinticIn=function(t){return t*t*t*t*t},r.Easing.easingQuinticOut=function(t){return 1+--t*t*t*t*t},r.Easing.easingQuinticInOut=function(t){return.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t},r.Easing.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},r.Easing.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},r.Easing.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},r.Easing.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},r.Easing.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},r.Easing.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},r.Easing.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},r.Easing.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},r.Easing.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*t*t*((e+1)*t-e):.5*((t-=2)*t*((e+1)*t+e)+2)},r.Easing.easingElasticIn=function(t){var e;return 0===t?0:1===t?1:(!G||1>G?(G=1,e=J/4):e=J*Math.asin(1/G)/U,-(G*Math.pow(2,10*(t-=1))*Math.sin((t-e)*U/J)))},r.Easing.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!G||1>G?(G=1,e=J/4):e=J*Math.asin(1/G)/U,G*Math.pow(2,-10*t)*Math.sin((t-e)*U/J)+1)},r.Easing.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!G||1>G?(G=1,e=J/4):e=J*Math.asin(1/G)/U,(t*=2)<1?-.5*G*Math.pow(2,10*(t-=1))*Math.sin((t-e)*U/J):G*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*U/J)*.5+1)},r.Easing.easingBounceIn=function(t){return 1-r.Easing.easingBounceOut(1-t)},r.Easing.easingBounceOut=function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},r.Easing.easingBounceInOut=function(t){return.5>t?.5*r.Easing.easingBounceIn(2*t):.5*r.Easing.easingBounceOut(2*t-1)+.5},r}); \ No newline at end of file diff --git a/dist/kute.full.min.js b/dist/kute.full.min.js deleted file mode 100644 index e16eb93..0000000 --- a/dist/kute.full.min.js +++ /dev/null @@ -1,2 +0,0 @@ -// kute.full.min.js | by dnp_theme | License - MIT -var KUTE=KUTE||function(){var t=[];return{getAll:function(){return t},removeAll:function(){t=[]},add:function(n){t.push(n)},remove:function(n){var r=t.indexOf(n);-1!==r&&t.splice(r,1)},update:function(n){if(0===t.length)return!1;var r=0;for(n=void 0!==n?n:window.performance.now();rt)return!0;l===!1&&(null!==c&&c.call(n),l=!0);var e=(t-u)/i;e=e>1?1:e;var g=s(e);for(a in o){var h=r[a]||0,I=o[a];"string"==typeof I&&(I=h+parseFloat(I,10)),"number"==typeof I&&(n[a]=h+(I-h)*g)}return null!==p&&p.call(n,g),1==e?(null!==f&&f.call(n),!1):!0}},KUTE.Easing={Linear:{None:function(t){return t}},Quadratic:{In:function(t){return t*t},Out:function(t){return t*(2-t)},InOut:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)}},Cubic:{In:function(t){return t*t*t},Out:function(t){return--t*t*t+1},InOut:function(t){return(t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)}},Quartic:{In:function(t){return t*t*t*t},Out:function(t){return 1- --t*t*t*t},InOut:function(t){return(t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)}},Quintic:{In:function(t){return t*t*t*t*t},Out:function(t){return--t*t*t*t*t+1},InOut:function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}},Sinusoidal:{In:function(t){return 1-Math.cos(t*Math.PI/2)},Out:function(t){return Math.sin(t*Math.PI/2)},InOut:function(t){return.5*(1-Math.cos(Math.PI*t))}},Exponential:{In:function(t){return 0===t?0:Math.pow(1024,t-1)},Out:function(t){return 1===t?1:1-Math.pow(2,-10*t)},InOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(-Math.pow(2,-10*(t-1))+2)}},Circular:{In:function(t){return 1-Math.sqrt(1-t*t)},Out:function(t){return Math.sqrt(1- --t*t)},InOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}},Elastic:{In:function(t){var n,r=.1,o=.4;return 0===t?0:1===t?1:(!r||1>r?(r=1,n=o/4):n=o*Math.asin(1/r)/(2*Math.PI),-(r*Math.pow(2,10*(t-=1))*Math.sin(2*(t-n)*Math.PI/o)))},Out:function(t){var n,r=.1,o=.4;return 0===t?0:1===t?1:(!r||1>r?(r=1,n=o/4):n=o*Math.asin(1/r)/(2*Math.PI),r*Math.pow(2,-10*t)*Math.sin(2*(t-n)*Math.PI/o)+1)},InOut:function(t){var n,r=.1,o=.4;return 0===t?0:1===t?1:(!r||1>r?(r=1,n=o/4):n=o*Math.asin(1/r)/(2*Math.PI),(t*=2)<1?-.5*r*Math.pow(2,10*(t-=1))*Math.sin(2*(t-n)*Math.PI/o):r*Math.pow(2,-10*(t-=1))*Math.sin(2*(t-n)*Math.PI/o)*.5+1)}},Back:{In:function(t){var n=1.70158;return t*t*((n+1)*t-n)},Out:function(t){var n=1.70158;return--t*t*((n+1)*t+n)+1},InOut:function(t){var n=2.5949095;return(t*=2)<1?.5*t*t*((n+1)*t-n):.5*((t-=2)*t*((n+1)*t+n)+2)}},Bounce:{In:function(t){return 1-KUTE.Easing.Bounce.Out(1-t)},Out:function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},InOut:function(t){return.5>t?.5*KUTE.Easing.Bounce.In(2*t):.5*KUTE.Easing.Bounce.Out(2*t-1)+.5}}},document.addEventListener("mousewheel",preventScroll,!1),document.addEventListener("touchstart",preventScroll,!1);function preventScroll(t){var n=document.body.getAttribute("data-tweening");n&&"scroll"===n&&t.preventDefault()} diff --git a/dist/kute.jquery.js b/dist/kute.jquery.js deleted file mode 100644 index 3ecaee5..0000000 --- a/dist/kute.jquery.js +++ /dev/null @@ -1,10 +0,0 @@ -// KUTE jQuery Plugin for kute.js | by dnp_theme | License - MIT -// $('selector').Kute(options); - -(function($) { - $.fn.Kute = function( options ) { - return this.each(function(){ - new KUTE.Animate( this, options ); - }); - }; -})(jQuery); diff --git a/dist/kute.min.js b/dist/kute.min.js deleted file mode 100644 index 7226418..0000000 --- a/dist/kute.min.js +++ /dev/null @@ -1,2 +0,0 @@ -// kute.min.js | by dnp_theme | License - MIT -var KUTE=KUTE||function(){var t=[];return{getAll:function(){return t},removeAll:function(){t=[]},add:function(n){t.push(n)},remove:function(n){var i=t.indexOf(n);-1!==i&&t.splice(i,1)},update:function(n){if(0===t.length)return!1;var i=0;for(n=void 0!==n?n:window.performance.now();it)return!0;l===!1&&(null!==c&&c.call(n),l=!0);var o=(t-u)/r;o=o>1?1:o;var p=s(o);for(e in a){var E=i[e]||0,I=a[e];"string"==typeof I&&(I=E+parseFloat(I,10)),"number"==typeof I&&(n[e]=E+(I-E)*p)}return null!==f&&f.call(n,p),1==o?(null!==h&&h.call(n),!1):!0}},KUTE.Easing={Linear:{None:function(t){return t}},Quadratic:{In:function(t){return t*t},Out:function(t){return t*(2-t)},InOut:function(t){return(t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)}},Cubic:{In:function(t){return t*t*t},Out:function(t){return--t*t*t+1},InOut:function(t){return(t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)}},Quartic:{In:function(t){return t*t*t*t},Out:function(t){return 1- --t*t*t*t},InOut:function(t){return(t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)}},Quintic:{In:function(t){return t*t*t*t*t},Out:function(t){return--t*t*t*t*t+1},InOut:function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}},Sinusoidal:{In:function(t){return 1-Math.cos(t*Math.PI/2)},Out:function(t){return Math.sin(t*Math.PI/2)},InOut:function(t){return.5*(1-Math.cos(Math.PI*t))}},Exponential:{In:function(t){return 0===t?0:Math.pow(1024,t-1)},Out:function(t){return 1===t?1:1-Math.pow(2,-10*t)},InOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(-Math.pow(2,-10*(t-1))+2)}},Circular:{In:function(t){return 1-Math.sqrt(1-t*t)},Out:function(t){return Math.sqrt(1- --t*t)},InOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}},Elastic:{In:function(t){var n,i=.1,a=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=a/4):n=a*Math.asin(1/i)/(2*Math.PI),-(i*Math.pow(2,10*(t-=1))*Math.sin(2*(t-n)*Math.PI/a)))},Out:function(t){var n,i=.1,a=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=a/4):n=a*Math.asin(1/i)/(2*Math.PI),i*Math.pow(2,-10*t)*Math.sin(2*(t-n)*Math.PI/a)+1)},InOut:function(t){var n,i=.1,a=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=a/4):n=a*Math.asin(1/i)/(2*Math.PI),(t*=2)<1?-.5*i*Math.pow(2,10*(t-=1))*Math.sin(2*(t-n)*Math.PI/a):i*Math.pow(2,-10*(t-=1))*Math.sin(2*(t-n)*Math.PI/a)*.5+1)}},Back:{In:function(t){var n=1.70158;return t*t*((n+1)*t-n)},Out:function(t){var n=1.70158;return--t*t*((n+1)*t+n)+1},InOut:function(t){var n=2.5949095;return(t*=2)<1?.5*t*t*((n+1)*t-n):.5*((t-=2)*t*((n+1)*t+n)+2)}},Bounce:{In:function(t){return 1-KUTE.Easing.Bounce.Out(1-t)},Out:function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},InOut:function(t){return.5>t?.5*KUTE.Easing.Bounce.In(2*t):.5*KUTE.Easing.Bounce.Out(2*t-1)+.5}}},document.addEventListener("mousewheel",preventScroll,!1),document.addEventListener("touchstart",preventScroll,!1);function preventScroll(t){var n=document.body.getAttribute("data-tweening");n&&"scroll"===n&&t.preventDefault()} diff --git a/examples.html b/examples.html new file mode 100644 index 0000000..3a2c981 --- /dev/null +++ b/examples.html @@ -0,0 +1,470 @@ + + + + + + + + + + + + + + + + + KUTE.js Examples | Javascript Animation Engine + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+

KUTE.js

 + +
+
+ +
+

Quick Examples

+

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. Note: the examples are posted on codepen.

+ +

Basic Native Javascript Example

+

When developing with native Javascript, a very basic syntax goes like this:

+ +
+// this is the tween object, basically KUTE.method(element, from, to, options);
+var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});
+
+ +

Now the tween object is created, it's a good time for you to know that via Native Javascript we always animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements such as querySelectorAll() or getElementsByTagName(), you need to do a for () loop. Now let's apply the tween control methods:

+
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
+
+

The demo for the above example is here.

+ +

Basic jQuery Example

+

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:

+
// this is the tween object, basically $('selector').KUTE(method, from, to, options);
+var tween = $('selector').KUTE('fromTo', {top: 20}, {top: 100}, {yoyo: true});
+
+

We mentioned that the KUTE jQuery plugin is different, and here's why: the above code creates an Array of objects for each HTML 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:

+
$(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
+
+

The demo for the above example is here.

+ +

Transform Properties Examples

+

KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateX, rotateY, rotateZ properties. Additionally it allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.

+ +

Translations

+

In the next example the first box is moving to left 250px with translate property, the second box is moving to the right by 200px using translateX and the third box is moving to the bottom using translate3d. The last box also uses translate3d but requires a perspective value for the animation on the Z axis to be effective.

+
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});
+
+

And here is how it looks like:

+
+
2D
+
X
+
Y
+
Z
+ +
+ Start +
+
+ +

As you can see in your browsers console, for all animations translate3d is used, as explained in the features page. Also the first example that's using the 2D translate for both vertical and horizontal axis even if we only set X axis. You can download this example here.

+

Remember: stacking translate and translate3d together may not work and IE9 does not support perspective.

+ +

Rotations

+

Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support rotate3d.

+
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});
+
+

And here is how it looks like:

+
+
2D
+
X
+
Y
+
Z
+ +
+ Start +
+
+

The rotateX and rotateY 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 perspective 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 here.

+ +

Skews

+

KUTE.js supports skewX and skewY so let's animate the two. Since they are 2D transformations, IE9 supports skews.

+
var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
+var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});
+
+ +

And here is how it looks like:

+
+
X
+
Y
+ +
+ Start +
+
+

You can download this example here.

+ +

Mixed Transformations

+

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:

+ +
var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
+var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
+
+

If you check the test here, you will notice that only the skewY is going to work and no rotation. Now let's do this properly.

+ +
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
+);
+
+

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.

+ +
+
element perspective 400px
+
parent perspective 400px
+ +
+ Start +
+
+ +

This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example here.

+ +

Chained Transformations

+

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 .to() method because it has the ability to stack 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:

+
+
FROMTO
+
FROMTO
+
TO
+ +
+ Start +
+
+

What's this all about?

+
    +
  • the first box uses a regular .fromTo() 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
    • +
  • the second box is also using .fromTo() object, but using proper values for all tweens at all times, so we fixed that glitch
    • +
  • and the last box uses the .to() method, and does the chaining easier for most properties, especially for transform
    • +
+ +

When coding transformation chains I would highly recommend:

+
    +
  • keep the same order of the transform properties, best would be: translation, rotation, skew and scale; an example of the difference shown here for rotations and here for rotations and skew;
    • +
  • 2D and 3D translations would work best in if you provide a value at all times; eg. translate:[x,y] and translate3d:[x,y,z]; for instance using translate:150 or translateX:150 would mean that all other axis are 0;
    • +
  • on larger amount of elements animating chains, the .fromTo() 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 features page;
    • +
  • download this example here.
    • +
+ +

Border Radius

+

In the example below we are doing some animation on the border-radius 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 px, % and text properties' units such as em or rem.

+
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();
+
+ +

And here is how it looks like:

+ +
+
ALL
+
TL
+
TR
+
BL
+
BR
+ +
+ Start +
+
+ +

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 -moz-border-radius-topleft are not supported because they were depracated with later versions. Download this example here.

+ +

Box Model Properties

+

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 minWidth or maxHeight require a more complex context and we won't insist on them.

+
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%'});
+
+

We're gonna chain these tweens and start the animation. You can download this example here.

+
+
BOX MODEL
+ +
+ Start +
+
+ + +

TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.

+ +

Text Properties

+

OK here we're gonna do a cool example for text properties. Basically the below code would work:

+
var tween1 = KUTE.to('selector1',{fontSize:'200%'});
+var tween2 = KUTE.to('selector1',{line-height:24});
+var tween3 = KUTE.to('selector1',{letter-spacing:50});
+
+

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 fontSize and letterSpacing properties for each character while the button will animate fontSize and lineHeight properties. Watch this:

+ +
+

Howdy!

+ Button + +
+ Start +
+
+

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 here.

+ +

Color Properties

+

The next example is about animating color properties. As for example, check these lines for reference.

+
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();
+
+

Let's get some animation going. Download the example here.

+ +
+
Colors
+ +
+ Start +
+
+ +

A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.

+ +

Clip Property

+

This property allows you to animate the rectangular shape of an element that is set to position:absolute. In CSS this property works like this clip: rect(top,right,bottom,left) forming a rectangular shape that masks an element making parts of it invisible.

+
KUTE.to('selector',{clip:[0,150,100,0]}).start();
+

A quick example here could look like this:

+ +
+
+ +
+ Start +
+
+

Note that this would produce no effect for elements that have overflow:visible style rule. Download this example here.

+ +

Background Position

+

Another property we can animate with KUTE.js is backgroundPosition. Quick example:

+
KUTE.to('selector1',{backgroundPosition:[0,50]}).start();
+

A working example would look like this:

+ +
+
+ +
+ Start +
+
+

Download this example here.

+ +

Vertical Scrolling

+

Another property we can animate with KUTE.js is scrollTop. I works for both the window and any scrollable object. Quick example:

+
KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
+KUTE.to('window',{scroll:450}).start(); // for the window
+
+

A working example would work like this. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.

+ + +

Cross Browser Animation Example

+

Unlike the examples hosted on Codepen, 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, first check your HTML template to have the browser detection for IE8-IE9, then check to have the polyfills and also make sure you target your browsers, here's a complete reference. Now we are ready: + +

Collect Information And Cache It

+
// grab an HTML element to build a tween object for it 
+var element = document.getElementById("myElement");
+
+// check for IE legacy browsers
+var isIE8 = /ie8/.test(document.documentElement.className);
+var isIE9 = /ie9/.test(document.documentElement.className);
+
+// most browsers have specific checks, so make sure 
+// you include all you need for your target audience
+
+
+

Define Properties And Options Objects

+
// 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.5;
+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; 	
+
+ +

Build Tween Object And Tween Controls

+
// 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);
+
+

Live Demo

+
+
+ +
+
+ Pause + Start + Stop +
+
+

Let's explain this code a bit. KUTE.js comes gives you the internal variables myTween.playing and myTween.paused (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.

+
    +
  • the START button will use the .start() method and the animation starts;
    • +
  • the STOP button will use the .stop() method and stops the animation; after this the, animation can only be started again
    • +
  • the PAUSE button will use the .pause() method and pauses the animation; this also changes the button's text and functionality;
    • +
  • the RESUME button will use the .resume() method and resumes the animation; this reverses the button's initial state;
    • +
  • make sure you work with the conditions properly when you want to pause an animation you MUST check both !myTween.playing and myTween.paused conditions because you could end up with errors.
    • +
+ + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/features.html b/features.html new file mode 100644 index 0000000..3f62292 --- /dev/null +++ b/features.html @@ -0,0 +1,217 @@ + + + + + + + + + + + + + + + + + KUTE.js Features | Javascript Animation Engine + + + + + + + + + + + + + + + + +
+ +
+ +
+
+

KUTE.js

 + +
+
+ +
+

Delivering Killer Performance

+

KUTE.js was developed with best practices in mind for fastest code execution and memory efficiency, but performance varies from case to case, as well as for all the other Javascript based animation engines. As a quick note on how it works, 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.

+ +

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 video), code simplicity (lots of CSS for a custom animation) and more other.

+

To learn more about how performance can vary from case to case, check out this secion, it's very informative.

+
+ +
+

Break Free Of Browser Prefixes

+

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: transform, perspective, perspective-origin, border-radius and the requestAnimationFrame Javascript method.

+

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; less string concatenation = more performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.

+

This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.

+
+ +
+

Browser Compatibility

+

KUTE.js covers all modern browsers but also provides fallback options for legacy browsers. The prefix free feature mentioned above is one way to enable smooth Javascript based animations on older versions Gecko/Webkit/IE browsers for transform and border-radius. Generally, KUTE.js is built around most used properties, so I highly recommend checking the can I use website for a very detailed properties support list on many browsers and versions. For instance legacy browsers may support 2D transforms or 3D transforms so make sure you know what browsers support and how to target them before you get to work with a complete browser supported animation setup.

+

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 polyfills and an appropriate HTML template. 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 transition.

+

Speaking of polyfills, KUTE.js requires window.requestAnimationFrame() for the main thread, window.performance.now() for checking the current time, .indexOf() for array checks, window.getComputedStyle() for the .to() method and .addEventListener() 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 polyfill service some browser detection will not work because they fill the gap and your code won't work as expected. For instance this would check for IE8 browser var isIE = document.all && !document.addEventListener; but the polyfill covers .addEventListener() so you will never succeed. The provided ideal HTML template is the best solution for targeting Microsoft's legacy browsers.

+

As of Safari, we did some tests there too, KUTE.js does it really well.

+
+ +
+

Methods, Tools and Options

+

Building Tween Objects

+

KUTE.js allows you to create tween objects with the help of .to() and .fromTo() public methods, with distinctive functionalities.

+

KUTE.to('selector', toValues, options) method is super simple and straightforward and requires a polyfill for window.getComputedStyle() 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 transform properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at start() method API.

+

KUTE.fromTo('selector', fromValues, toValues, options) 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.

+ +

It doesn't stack transform 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.

+ +

Tween Control

+

Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: .start(), .stop(), .pause() and .resume(). These public methods work either when animation is running or is paused. You need to see the documentation to learn how these work.

+ +

Tween Options

+

Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or a perspective-origin, right?

+ +

Callback System

+

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.

+ +

Addons

+

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.

+ +

Check the documentation on these methods and the examples page for more.

+
+ +
+

Support For Plenty Of Properties

+

KUTE.js covers all animation needs such as most transform properties, scroll for window or a given element, colors, border-radius, 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 2D transforms or 3D transforms.

+

All common measurement units are supported: px and % for translations and box-model properties, or deg and rad for rotations and skews, while clip only supports px. Other properties such as opacity, scale or scroll are unitless, and background-position always uses % as measurement unit. As for the text properties you can use px, em, rem, vh and vw. Be sure to check what your browsers support in terms of measurement unit.

+ +

Opacity

+

In most cases, the best animation possible is the opacity, 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 filter: alpha(opacity=0) 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 RGBA colors. Eg. opacity:0.5 will make an element semitransparent.

+ +

2D Transform Properties

+
    +
  • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. Supported on IE9.
    • +
  • rotate is a property used to rotate an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. Supported on IE9.
    • +
  • skewX is a property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew an element by 25 degrees. Supported on IE9.
    • +
  • skewY is a property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew an element by 25 degrees. Supported on IE9.
    • +
  • scale is a property used to apply a size transformation. Eg. scale:2 will enlarge an element by a degree of 2. Supported on IE9.
    • +
  • matrix property is not supported.
    • +
+ +

3D Transform Properties

+
    +
  • translateX property is for horizontal movement. EG. translateX:150 to translate an element 150px to the right. Modern browsers only.
    • +
  • translateY property is for vertical movement. EG. translateY:-250 to translate an element 250px towards the top. Modern browsers only.
    • +
  • translateZ property is for movement on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px to it's back, making it smaller. Modern browsers only and requires a perspective tween option to be used; the smaller perspective value, the deeper translation.
    • +
  • translate3d property is for movement on all the axis in a given 3D field. EG. translate3d:[-150,200,150] 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 perspective tween option.
    • +
  • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Modern browsers only and requires perspective.
    • +
  • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and also requires perspective.
    • +
  • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and doesn't require perspective.
    • +
  • rotate3d and matrix3d properties are not supported.
    • +
+ +

Box Model Properties

+
    +
  • left, top, right and bottom are position based properties for movement on vertical and / or horizontal axis. These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires position:relative. These properties can be used as fallback for browsers with no support for translate properties such as IE8.
    • +
  • width, height, minWidth, minHeight, maxWidth, maxHeight 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 scale on IE8 again, as well as for other purposes.
    • +
  • padding, margin, paddingTop, paddingBottom, paddingLeft, paddingRight, marginTop, marginBottom, marginLeft and marginRight are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as margin: "20px 50px" or any other type are not supported.
    • +
  • borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are borderLeftWidth 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.
    • +
+

Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize event that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.

+ +

Border Radius

+
    +
  • borderRadius allows you to animate the border-radius on all corners for a given element.
    • +
  • borderTopLeftRadius allows you to animate the border-top-left-radius for a given element.
    • +
  • borderTopRightRadius allows you to animate the border-top-right-radius for a given element.
    • +
  • borderBottomLeftRadius allows you to animate the border-bottom-left-radiusfor a given element.
    • +
  • borderBottomRightRadius allows you to animate the border-bottom-right-radiusfor a given element.
    • +
+

For all radius properties above borderRadius:20 or borderTopLeftRadius:'25%' will do. In the first case px is the default measurement unit used, while in the second we require using % unit which is relative to the element's size.

+

Remember: shorthands for border-radius are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. -moz-border-radius-topleft) as they were deprecated with later versions.

+ +

Color Properties

+

KUTE.js currently supports values such as HEX, RGB and RGBA for all color properties, but IE8 does not support RGBA and always uses RGB when detected, otherwise will produce no effect. There is also a tween option keepHex:true to convert the color format. Eg. color: '#ff0000' or backgroundColor: 'rgb(202,150,20)' or borderColor: 'rgba(250,100,20,0.5)'

+
    +
  • color allows you to animate the color for a given text element.
    • +
  • backgroundColor allows you to animate the background-color for a given element.
    • +
  • borderColor allows you to animate the border-color on all sides for a given element.
    • +
  • borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow you to animate the color of the border on each side of a given element.
    • +
+

Remember: shorthands for border-color property as well as web color names (Eg. red, green, olive, etc.) are not supported.

+ +

Text Properties

+

These properties can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.

+
    +
  • fontSize allows you to animate the font-size for a given element.
    • +
  • lineHeight allows you to animate the line-height for a given element.
    • +
  • letterSpacing allows you to animate the letter-spacing for a given element.
    • +
+

Remember: these properties are also layout modifiers.

+ +

Scroll Animation

+

KUTE.js currently supports only vertical scroll for both the window and a given element that's scrollable. Both scroll: 150 or scrollTop: 150 notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles.

+ +

Other properties

+
    +
  • clip allows you to animate the clip property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]. See spec for details.
    • +
  • backgroundPosition allows you to animate the background-position for a given element that uses a background image. It only uses % as measurement unit. Eg. backgroundPosition:[50,20]
    • +
+ +

Did We Miss Any Important Property?

+

Make sure you go to the issues tracker and report the missing property ASAP.

+
+ +
+

Developer Friendly

+

You can develop with KUTE.js for free thanks to the MIT License terms. The terms in short allow you to use the script for free in both personal and commercial application as long as you give proper credits to the original author. Also a link back would be appreciated.

+

Also KUTE.js is super documented, all features and options are showcased with detailed examples so you can get your hands really dirty.

+ + +
+ + + + +
+ + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..1e931f4 --- /dev/null +++ b/index.html @@ -0,0 +1,189 @@ + + + + + + + + + + + + + + + + + KUTE.js | Javascript Animation Engine + + + + + + + + + + + + + + + + +
+ +
+ +
+
+

KUTE.js

 + +
+
+ + +
+
+
+
+

Welcome Developers!

+

KUTE.js is a Javascript animation engine with top performance, memory efficient & modular code. It delivers a whole bunch of tools to help you create great custom animations.

+

+ Download + Github + CDN + Replay +

+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+

At A Glance

+
+
+

Killer Performance

+

KUTE.js is crazy fast with it's outstanding performance, with super fast code execution, it's also memory efficient. I made a cool demo to showcase how KUTE.js really scales on performance.

+
+
+

Prefix Free

+

KUTE.js can detect if the user's browser requires prefix and uses it accordingly for requestAnimationFrame, transform and border-radius, hustle free for older Gecko/Webkit/IE browsers.

+
+
+
+
+

All Browsers Compatible

+

KUTE.js covers all modern browsers with fallback options for legacy browsers. When using polyfills and the provided demo HTML templates you can manage all kinds of fallback animations for legacy browsers.

+
+
+

Powerful Methods

+

KUTE.js allows you to create tweens and chainable tweens, gives you tween control methods (stop/pause/resume/restart) and comes with full spectrum tween options.

+
+
+
+
+

Packed With Tools

+

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.

+
+
+

Plenty Of Properties

+

KUTE.js covers all animation needs such as transform, scroll (window or other elements), colors (border, background and text), border-radius, almost the full box model and also text properties.

+
+
+
+
+

MIT License

+

You can develop with KUTE.js for free thanks to the MIT License terms.

+
+
+

Top Notch Documentation

+

All examples, code, tips & tricks are very well documented.

+
+
+
+
+ +
+

Getting Started

+
+
+ +

Examples

+

See KUTE.js in action with all it's functions, options and features.

+
+
+ +

Documentation

+

The API documentation is here for you to get you started.

+
+ +
+ +

Performance

+

Head over to the performance test page right away.

+
+
+ + + +
+ + + + +
+ + + + + + + + + + + + + diff --git a/kute.full.js b/kute.full.js deleted file mode 100644 index 8e10ab5..0000000 --- a/kute.full.js +++ /dev/null @@ -1,811 +0,0 @@ -// kute.full.js - The Light Tweening Engine | by dnp_theme -// http://themeforest.net/user/dnp_theme -// License - MIT - - -// KUTE MAIN OBJECT -var KUTE = KUTE || ( function () { - var _tweens = []; - return { - getAll: function () { - return _tweens; - }, - removeAll: function () { - _tweens = []; - }, - add: function ( tween ) { - _tweens.push( tween ); - }, - remove: function ( tween ) { - var i = _tweens.indexOf( tween ); - if ( i !== -1 ) { - _tweens.splice( i, 1 ); - } - }, - update: function ( time ) { - if ( _tweens.length === 0 ) return false; - var i = 0; - time = time !== undefined ? time : window.performance.now(); - while ( i < _tweens.length ) { - if ( _tweens[ i ].update( time ) ) { - i++; - } else { - _tweens.splice( i, 1 ); - } - } - return true; - } - }; -} )(); - -KUTE.Animate = function( object, options ) { - - //element to animate - var el = typeof object === 'object' ? object : document.querySelector(object); - - //get true scroll container and current scroll - var bd = document.body, - htm = document.getElementsByTagName('HTML')[0], - sct = /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? bd : htm, - crs = window.pageYOffset || sct.scrollTop; - - //determine if we're on IE or IE8 - var isIE = document.documentElement.classList.contains('ie'); - var isIE8 = document.documentElement.classList.contains('ie8'); - - //get element current style - var css = el.currentStyle || window.getComputedStyle(el); - - // default values - var ops = { - from : { - opacity : 1, // integer - width : '', // integer/px/% - height : '', // integer/px/% - color : '', //hex/rgb - backgroundColor : '', //hex/rgb - position : {top:'',right:'',bottom:'',left:''}, // integer/% - backgroundPosition: {x:'',y:''}, // integer/%/string[left,center,bottom,etc] - translate : {x:0, y:0, z:0}, // integer only - rotate : {x:0, y:0, z:0}, // integer only - scale : 1, // integer only - scroll : crs, // integer only - }, - to : { - opacity : '', - width : '', - height : '', - color : '', - backgroundColor : '', - position : {top:'',right:'',bottom:'',left:''}, - backgroundPosition: {x: '', y: ''}, - translate : {x:'', y:'', z:''}, - rotate : {x:'', y:'', z:''}, - scale : '', - scroll : '', - }, - easing : KUTE.Easing.Linear.None, //pe('linear') - delay : 0, - duration : 500, - start : null, // run function when tween starts - finish : null, // run function when tween finishes - special : null // run function while tween runing - }; - - //override the default values with option values - for (var x in options) { - if(typeof(options[x]) === 'object'){ - for (var y in options[x]){ - ops[x][y] = options[x][y]; - } - }else{ - ops[x] = options[x]; - } - } - - //create shorthand for all properties - var ofo = ops.from.opacity; - var ofw = ops.from.width; - var ofh = ops.from.height; - var ofc = ops.from.color; - var ofbc = ops.from.backgroundColor; - var oft = ops.from.position.top; - var ofr = ops.from.position.right; - var ofb = ops.from.position.bottom; - var ofl = ops.from.position.left; - var ofbx = ops.from.backgroundPosition.x; - var ofby = ops.from.backgroundPosition.y; - var oftx = ops.from.translate.x; - var ofty = ops.from.translate.y; - var oftz = ops.from.translate.z; - var ofrx = ops.from.rotate.x; - var ofry = ops.from.rotate.y; - var ofrz = ops.from.rotate.z; - var ofs = ops.from.scale; - var ofsc = ops.from.scroll; - - var oto = ops.to.opacity; - var otw = ops.to.width; - var oth = ops.to.height; - var otc = ops.to.color; - var otbc = ops.to.backgroundColor; - var ott = ops.to.position.top; - var otr = ops.to.position.right; - var otb = ops.to.position.bottom; - var otl = ops.to.position.left; - var otbx = ops.to.backgroundPosition.x; - var otby = ops.to.backgroundPosition.y; - var ottx = ops.to.translate.x; - var otty = ops.to.translate.y; - var ottz = ops.to.translate.z; - var otrx = ops.to.rotate.x; - var otry = ops.to.rotate.y; - var otrz = ops.to.rotate.z; - var ots = ops.to.scale; - var otsc = ops.to.scroll; - - //process easing - var pes = typeof ops.easing === 'string' ? pe(ops.easing) : ops.easing; - - //from/initial values - var icor = (cv(ofc) ? parseInt(pc(ofc)[0]) : '') || parseInt(pc(truC(css.color))[0]); - var icog = (cv(ofc) ? parseInt(pc(ofc)[1]) : '') || parseInt(pc(truC(css.color))[1]); - var icob = (cv(ofc) ? parseInt(pc(ofc)[2]) : '') || parseInt(pc(truC(css.color))[2]); - - var ibcr = (cv(ofbc) ? parseInt(pc(ofbc)[0]) : '') || parseInt(pc(truC(css.backgroundColor))[0]); - var ibcg = (cv(ofbc) ? parseInt(pc(ofbc)[1]) : '') || parseInt(pc(truC(css.backgroundColor))[1]); - var ibcb = (cv(ofbc) ? parseInt(pc(ofbc)[2]) : '') || parseInt(pc(truC(css.backgroundColor))[2]); - - var iwi = cv(ofw) ? truD(ofw)[0] : truD( css.width )[0]; - var ihe = cv(ofh) ? truD(ofh)[0] : truD( css.height )[0]; - - var ito = cv(oft) ? truD(oft)[0] : ''; - var iri = cv(ofr) ? truD(ofr)[0] : ''; - var ibo = cv(ofb) ? truD(ofb)[0] : ''; - var ile = cv(ofl) ? truD(ofl)[0] : ''; - - var ibx, iby, bx, by; - if ( cv( otbx ) || cv( otby ) ) { - ibx = cv( ofbx ) ? truX(ofbx) : bPos(el)[0]; - iby = cv( ofby ) ? truY(ofby) : bPos(el)[1]; - } else { - ibx = ''; - iby = ''; - } - - var tr3d,tx,ty,tz,itx,ity,itz; - if ( cv( ottx ) || cv( otty ) || cv( ottz ) ) { - itx = cv(oftx) ? truD(oftx)[0] : 0; - ity = cv(ofty) ? truD(ofty)[0] : 0; - itz = cv(oftz) ? truD(oftz)[0] : 0; - } else { - itx = ''; ity = ''; itz = ''; - } - - var irx = cv(ofrx) ? parseInt(ofrx) :''; //always deg - var iry = cv(ofry) ? parseInt(ofry) :''; - var irz = cv(ofrz) ? parseInt(ofrz) :''; - - var isa = parseFloat(ofs); // scale can be float - var iop = parseFloat(ofo); // opacity - var isc = parseInt(ofsc); // scroll - - - //target values - var cor = cv(otc) ? parseInt(pc(otc)[0]) : ''; - var cog = cv(otc) ? parseInt(pc(otc)[1]) : ''; - var cob = cv(otc) ? parseInt(pc(otc)[2]) : ''; - - var bcr = cv(otbc) ? parseInt(pc(otbc)[0]) : ''; - var bcg = cv(otbc) ? parseInt(pc(otbc)[1]) : ''; - var bcb = cv(otbc) ? parseInt(pc(otbc)[2]) : ''; - - var wi = cv( otw ) ? truD(otw)[0] : ''; - var he = cv( oth ) ? truD(oth)[0] : ''; - - var top = cv(ott) ? truD(ott)[0] : ''; - var ri = cv(otr) ? truD(otr)[0] : ''; - var bo = cv(otb) ? truD(otb)[0] : ''; - var le = cv(otl) ? truD(otl)[0] : ''; - - if ( cv( otbx ) || cv( otby ) ) { - bx = cv( otbx ) ? truX(otbx) : ibx; - by = cv( otby ) ? truY(otby) : iby; - } else { - bx = ''; - by = ''; - } - - if ( cv( ottx ) || cv( otty ) || cv( ottz ) ) { // translate 3d - tx = cv( ottx ) ? truD(ottx)[0] : 0; - ty = cv( otty ) ? truD(otty)[0] : 0; - tz = cv( ottz ) ? truD(ottz)[0] : 0; - } else { - tx = ''; ty = ''; tz = ''; - } - - var rx = cv( otrx ) ? parseInt(otrx) : ''; // rotate - var ry = cv( otry ) ? parseInt(otry) : ''; - var rz = cv( otrz ) ? parseInt(otrz) : ''; - - var sa = cv( ots ) ? parseFloat(ots) : ''; // scale values below 1 need to be reformated - var op = cv( oto ) ? parseFloat(oto) : ''; // opacity - var sc = cv( otsc ) ? parseInt(otsc) : ''; // scroll - - //check unit - var wiu = cv( wi ) ? truD(otw)[1] : ''; - var heu = cv( he ) ? truD(oth)[1] : ''; - - var tou = cv( ott ) ? truD(ott)[1] : ''; - var riu = cv( otr ) ? truD(otr)[1] : ''; - var bou = cv( otb ) ? truD(otb)[1] : ''; - var leu = cv( otl ) ? truD(otl)[1] : ''; - - var txu = cv( tx ) ? truD(ottx)[1] : ''; - var tyu = cv( ty ) ? truD(otty)[1] : ''; - var tzu = cv( tz ) ? truD(ottz)[1] : ''; - - animateTween(); - - var from = { w: iwi, h: ihe, t: ito, r: iri, b: ibo, l: ile, colr: icor, colg: icog, colb: icob, bgr: ibcr, bgg: ibcg, bgb: ibcb, bgX: ibx, bgY: iby, scale: isa, trX: itx, trY: ity, trZ: itz, roX: irx, roY: iry, roZ: irz, opacity: iop, scroll: isc }; - var target = { w: wi, h: he, t: top, r: ri, b: bo, l: le, colr: cor, colg: cog, colb: cob, bgr: bcr, bgg: bcg, bgb: bcb, bgX: bx, bgY: by, scale: sa, trX: tx, trY: ty, trZ: tz, roX: rx, roY: ry, roZ: rz, opacity: op, scroll: sc }; - - return new KUTE.Tween( from ) - .to( target, ops.duration ) - .delay( ops.delay ) - .easing( pes ) - .onStart( runStart ) - .onUpdate( - function () { - - //color and background-color - if ( cv(cor) ) { el.style.color = rth( parseInt(this.colr),parseInt(this.colg),parseInt(this.colb) ); } - if ( cv(bcr) ) { el.style.backgroundColor = rth( parseInt(this.bgr),parseInt(this.bgg),parseInt(this.bgb)); } - - //translate3d - if ( cv(tx) || cv(ty) || cv(tz) ) { - tr3d = 'translate3d(' + ((this.trX + txu) || 0) + ',' + ((this.trY + tyu) || 0) + ',' + ((this.trZ + tzu) || 0) + ')'; - } else { tr3d = ''; } - - var roxt = cv(rx) ? ' rotateX(' + this.roX + 'deg)' : ''; - var royt = cv(ry) ? ' rotateY(' + this.roY + 'deg)' : ''; - var rozt = cv(rz) ? ' rotateZ(' + this.roZ + 'deg)' : ''; - - //scale - var sca = cv(sa) ? ' scale(' + this.scale + ')' : ''; - //do a zoom for IE8 - if (isIE8 && cv(sa)) { - el.style.zoom = this.scale; - } - //sum all transform - var transform = sca + tr3d + roxt + royt + rozt; - var perspective = parseInt(css.perspective)||''; - if ( cv(transform) ) { tr(transform,perspective) } - - //dimensions - if ( cv(wi) ) { el.style.width = this.w + wiu; } - if ( cv(he) ) { el.style.height = this.h + heu; } - - //positioning - if ( cv(top) ) { el.style.top = this.t + tou; } - if ( cv(ri ) ) { el.style.right = this.r + riu; } - if ( cv(bo ) ) { el.style.bottom = this.b + bou; } - if ( cv(le ) ) { el.style.left = this.l + leu; } - - // scrolling - if ( cv(sc) ) { sct.scrollTop = this.scroll; } - - //background position - if ( cv(bx) || cv(by) ) { - var bXX = this.bgX; - var bYY = this.bgY; - el.style.backgroundPosition = bXX.toString()+'% '+bYY.toString()+'%'; - } - - //opacity - if ( cv(op) ) { el.style.opacity = (this.opacity).toFixed(2); } - //do a filter opacity for IE8 - if (isIE8 && cv(op)) { - el.style.filter = "alpha(opacity=" + parseInt(100 * this.opacity) + ")" - } - - //run special function onUpdate - if ( ops.special && typeof ops.special === "function") { ops.special(); } - } - ) - .onComplete( runFinished ) - .start(); - - function animateTween(time) { - requestAnimationFrame( animateTween ); - KUTE.update(time); - } - - //callback when tween is finished - function runFinished() { - if ( ops.finish && typeof ops.finish === "function") { - ops.finish(); - } - if ( cv(otsc) ) { - document.body.removeAttribute('data-tweening') - } - } - - //callback when tween just started - function runStart() { - if ( ops.start && typeof ops.start === "function") { - ops.start(); - } - //fix the scrolling being interrupted via mousewheel - if ( cv(otsc) ) { - if ( !document.body.getAttribute('data-tweening') && document.body.getAttribute('data-tweening') !== 'scroll' ) - document.body.setAttribute('data-tweening','scroll'); - } - } - - /* Process values utils - ----------------------------*/ - - //process easing 31 - function pe(e) { - if ( e === 'linear' ) return KUTE.Easing.Linear.None; - if ( e === 'quadraticIn' ) return KUTE.Easing.Quadratic.In; - if ( e === 'quadraticOut' ) return KUTE.Easing.Quadratic.Out; - if ( e === 'quadraticInOut' ) return KUTE.Easing.Quadratic.InOut; - if ( e === 'cubicIn' ) return KUTE.Easing.Cubic.In; - if ( e === 'cubicOut' ) return KUTE.Easing.Cubic.Out; - if ( e === 'cubicInOut' ) return KUTE.Easing.Cubic.InOut; - if ( e === 'quarticIn' ) return KUTE.Easing.Quartic.In; - if ( e === 'quarticOut' ) return KUTE.Easing.Quartic.Out; - if ( e === 'quarticInOut' ) return KUTE.Easing.Quartic.InOut; - if ( e === 'quinticIn' ) return KUTE.Easing.Quintic.In; - if ( e === 'quinticOut' ) return KUTE.Easing.Quintic.Out; - if ( e === 'quinticInOut' ) return KUTE.Easing.Quintic.InOut; - if ( e === 'sinusoidalIn' ) return KUTE.Easing.Sinusoidal.In; - if ( e === 'sinusoidalOut' ) return KUTE.Easing.Sinusoidal.Out; - if ( e === 'sinusoidalInOut' ) return KUTE.Easing.Sinusoidal.InOut; - if ( e === 'exponentialIn' ) return KUTE.Easing.Exponential.In; - if ( e === 'exponentialOut' ) return KUTE.Easing.Exponential.Out; - if ( e === 'exponentialInOut' ) return KUTE.Easing.Exponential.InOut; - if ( e === 'circularIn' ) return KUTE.Easing.Circular.In; - if ( e === 'circularOut' ) return KUTE.Easing.Circular.Out; - if ( e === 'circularInOut' ) return KUTE.Easing.Circular.InOut; - if ( e === 'elasticIn' ) return KUTE.Easing.Elastic.In; - if ( e === 'elasticOut' ) return KUTE.Easing.Elastic.Out; - if ( e === 'elasticInOut' ) return KUTE.Easing.Elastic.InOut; - if ( e === 'backIn' ) return KUTE.Easing.Back.In; - if ( e === 'backOut' ) return KUTE.Easing.Back.Out; - if ( e === 'backInOut' ) return KUTE.Easing.Back.InOut; - if ( e === 'bounceIn' ) return KUTE.Easing.Bounce.In; - if ( e === 'bounceOut' ) return KUTE.Easing.Bounce.Out; - if ( e === 'bounceInOut' ) return KUTE.Easing.Bounce.InOut; - //default - return KUTE.Easing.Exponential.InOut; - } - - // value checker - function cv(v) { - if ( v !== undefined && v !== '' && v !== 'NaN' ) return true; - } - - // get true w/h - function truD(d){ - var v,u; - if (/px/i.test(d)) { - u = 'px'; v = parseInt( d ); - } else if (/%/i.test(d)) { - u = '%'; v = parseInt( d ); - } else { - v = d; u = 'px'; - } - return [v,u]; - } - - // get background position true values - function truX(x) { - if ( x == 'left' ) { - return 0; - } else if ( x == 'center' ) { - return 50; - } else if ( x == 'right' ) { - return 100; - } else { - return parseInt( x ); - } - } - function truY(y) { - if ( y == 'top' ) { - return 0; - } else if ( y == 'center' ) { - return 50; - } else if ( y == 'bottom' ) { - return 100; - } else { - return parseInt( y ); - } - } - - // get current background position - function bPos(elem) { - var sty = css.backgroundPosition,x,y; - var pos = sty.split(" "); - x = truX(pos[0]); - if ( cv(pos[1]) ) { - y = truY(pos[1]); - } else { - y = 0; - } - return [ x, y ]; - } - - // convert transparent to rgba() - function truC(c) { - if ( c === 'transparent' ) { - return c.replace('transparent','rgba(0,0,0,0)'); - } else if ( cv(c) ) { - return c; - } - } - - // process color - function pc(c) { - if ( cv(c) && /#/i.test(c) ) { return [htr(c).r,htr(c).g,htr(c).b]; } else { return c.replace(/[^\d,]/g, '').split(','); } - } - - // transform rgb to hex or vice-versa - function rth(r, g, b) { - return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); - } - function htr(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; - } - - // process transform - function tr(p,pp) { - el.style.webkitTransform = p; - el.style.MozTransform = p; - el.style.msTransform = (cv(pp)?'perspective('+pp+'px) ':'') + p; - el.style.Transform = p; - } -}; - -KUTE.Tween = function ( object ) { - - var _object = object; - var _valuesStart = {}; - var _valuesEnd = {}; - var _valuesStartRepeat = {}; - var _duration = 700; - var _isPlaying = false; - var _delayTime = 0; - var _startTime = null; - var _easingFunction = KUTE.Easing.Linear.None; - var _onStartCallback = null; - var _onStartCallbackFired = false; - var _onUpdateCallback = null; - var _onCompleteCallback = null; - var _onStopCallback = null; - - // Set all starting values present on the target object - for ( var field in object ) { - _valuesStart[ field ] = parseFloat(object[field], 10); - } - - this.to = function ( properties, duration ) { - - if ( duration !== undefined ) { - _duration = duration; - } - - _valuesEnd = properties; - return this; - }; - - this.start = function ( time ) { - - KUTE.add( this ); - _isPlaying = true; - _onStartCallbackFired = false; - _startTime = time !== undefined ? time : window.performance.now(); - _startTime += _delayTime; - - for ( var property in _valuesEnd ) { - // check if an Array was provided as property value - if ( _valuesEnd[ property ] instanceof Array ) { - if ( _valuesEnd[ property ].length === 0 ) { - continue; - } - - // create a local copy of the Array with the start value at the front - _valuesEnd[ property ] = [ _object[ property ] ].concat( _valuesEnd[ property ] ); - } - - if( ( _valuesEnd[ property ] instanceof Array ) === false ) { - _valuesEnd[ property ] *= 1.0; // Ensures we're using numbers, not strings - } - - _valuesStart[ property ] = _object[ property ]; - - if( ( _valuesStart[ property ] instanceof Array ) === false ) { - _valuesStart[ property ] *= 1.0; // Ensures we're using numbers, not strings - } - } - return this; - }; - - this.stop = function () { - if ( !_isPlaying ) { - return this; - } - - KUTE.remove( this ); - _isPlaying = false; - - if ( _onStopCallback !== null ) { - _onStopCallback.call( _object ); - } - - return this; - - }; - - this.delay = function ( amount ) { - _delayTime = amount; - return this; - }; - - this.easing = function ( easing ) { - _easingFunction = easing; - return this; - }; - - this.onStart = function ( callback ) { - _onStartCallback = callback; - return this; - }; - - this.onUpdate = function ( callback ) { - _onUpdateCallback = callback; - return this; - }; - - this.onComplete = function ( callback ) { - _onCompleteCallback = callback; - return this; - }; - - this.onStop = function ( callback ) { - _onStopCallback = callback; - return this; - }; - - this.update = function ( time ) { - var property; - - if ( time < _startTime ) { - return true; - } - - if ( _onStartCallbackFired === false ) { - if ( _onStartCallback !== null ) { - _onStartCallback.call( _object ); - } - _onStartCallbackFired = true; - } - - var elapsed = ( time - _startTime ) / _duration; - elapsed = elapsed > 1 ? 1 : elapsed; - var value = _easingFunction( elapsed ); - - for ( property in _valuesEnd ) { - - var start = _valuesStart[ property ] || 0; - var end = _valuesEnd[ property ]; - - // Parses relative end values with start as base (e.g.: +10, -3) - if ( typeof(end) === "string" ) { - end = start + parseFloat(end, 10); - } - - // protect against non numeric properties. - if ( typeof(end) === "number" ) { - _object[ property ] = start + ( end - start ) * value; - } - } - - if ( _onUpdateCallback !== null ) { - _onUpdateCallback.call( _object, value ); - } - - if ( elapsed == 1 ) { - - if ( _onCompleteCallback !== null ) { - _onCompleteCallback.call( _object ); - } - return false; - } - return true; - }; -}; - -KUTE.Easing = { - Linear: { - None: function ( k ) { - return k; - } - }, - Quadratic: { - In: function ( k ) { - return k * k; - }, - - Out: function ( k ) { - return k * ( 2 - k ); - }, - - InOut: function ( k ) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k; - return - 0.5 * ( --k * ( k - 2 ) - 1 ); - } - }, - Cubic: { - In: function ( k ) { - return k * k * k; - }, - Out: function ( k ) { - return --k * k * k + 1; - }, - InOut: function ( k ) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k; - return 0.5 * ( ( k -= 2 ) * k * k + 2 ); - } - }, - Quartic: { - In: function ( k ) { - return k * k * k * k; - }, - Out: function ( k ) { - return 1 - ( --k * k * k * k ); - }, - InOut: function ( k ) { - if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k; - return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 ); - } - }, - Quintic: { - In: function ( k ) { - return k * k * k * k * k; - }, - - Out: function ( k ) { - return --k * k * k * k * k + 1; - }, - - InOut: function ( k ) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k; - return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 ); - } - }, - Sinusoidal: { - In: function ( k ) { - return 1 - Math.cos( k * Math.PI / 2 ); - }, - Out: function ( k ) { - return Math.sin( k * Math.PI / 2 ); - }, - InOut: function ( k ) { - return 0.5 * ( 1 - Math.cos( Math.PI * k ) ); - } - }, - - Exponential: { - In: function ( k ) { - return k === 0 ? 0 : Math.pow( 1024, k - 1 ); - }, - Out: function ( k ) { - return k === 1 ? 1 : 1 - Math.pow( 2, - 10 * k ); - }, - InOut: function ( k ) { - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 1024, k - 1 ); - return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 ); - } - }, - Circular: { - In: function ( k ) { - return 1 - Math.sqrt( 1 - k * k ); - }, - Out: function ( k ) { - return Math.sqrt( 1 - ( --k * k ) ); - }, - InOut: function ( k ) { - if ( ( k *= 2 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1); - return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1); - } - }, - Elastic: { - In: function ( k ) { - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) ); - }, - Out: function ( k ) { - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 ); - }, - InOut: function ( k ) { - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) ); - return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1; - } - }, - Back: { - In: function ( k ) { - var s = 1.70158; - return k * k * ( ( s + 1 ) * k - s ); - }, - Out: function ( k ) { - var s = 1.70158; - return --k * k * ( ( s + 1 ) * k + s ) + 1; - }, - InOut: function ( k ) { - var s = 1.70158 * 1.525; - if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) ); - return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 ); - } - }, - Bounce: { - In: function ( k ) { - return 1 - KUTE.Easing.Bounce.Out( 1 - k ); - }, - Out: function ( k ) { - if ( k < ( 1 / 2.75 ) ) { - return 7.5625 * k * k; - } else if ( k < ( 2 / 2.75 ) ) { - return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75; - } else if ( k < ( 2.5 / 2.75 ) ) { - return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375; - } else { - return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; - } - }, - InOut: function ( k ) { - if ( k < 0.5 ) return KUTE.Easing.Bounce.In( k * 2 ) * 0.5; - return KUTE.Easing.Bounce.Out( k * 2 - 1 ) * 0.5 + 0.5; - } - } -}; - - -// prevent mousewheel or touch events while tweening scroll -document.addEventListener('mousewheel', preventScroll, false); -document.addEventListener('touchstart', preventScroll, false); -function preventScroll(e){ - var data = document.body.getAttribute('data-tweening'); - if ( data && data === 'scroll' ) { - e.preventDefault(); - } -}; diff --git a/kute.js b/kute.js deleted file mode 100644 index 6ab5fe4..0000000 --- a/kute.js +++ /dev/null @@ -1,676 +0,0 @@ -// kute.js - The Light Tweening Engine | by dnp_theme -// http://themeforest.net/user/dnp_theme -// License - MIT - -// KUTE MAIN OBJECT -var KUTE = KUTE || ( function () { - var _tweens = []; - return { - getAll: function () { - return _tweens; - }, - removeAll: function () { - _tweens = []; - }, - add: function ( tween ) { - _tweens.push( tween ); - }, - remove: function ( tween ) { - var i = _tweens.indexOf( tween ); - if ( i !== -1 ) { - _tweens.splice( i, 1 ); - } - }, - update: function ( time ) { - if ( _tweens.length === 0 ) return false; - var i = 0; - time = time !== undefined ? time : window.performance.now(); - while ( i < _tweens.length ) { - if ( _tweens[ i ].update( time ) ) { - i++; - } else { - _tweens.splice( i, 1 ); - } - } - return true; - } - }; -} )(); - -KUTE.Animate = function( object, options ) { - - //element to animate - var el = typeof object === 'object' ? object : document.querySelector(object); - - //get true scroll container and current scroll - var bd = document.body, - htm = document.getElementsByTagName('HTML')[0], - sct = /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? bd : htm, - crs = window.pageYOffset || sct.scrollTop; - - //determine if we're on IE or IE8 - var isIE = document.documentElement.classList.contains('ie'); - var isIE8 = document.documentElement.classList.contains('ie8'); - - //get element current style - var css = el.currentStyle || window.getComputedStyle(el); - - // default values - var ops = { - from : { - opacity : 1, // integer - width : '', // integer/px/% - height : '', // integer/px/% - position : {top:'', left:''}, // integer/% - translate : {x:0, y:0, z:0}, // integer only - rotate : {x:0, y:0, z:0}, // integer only - scale : 1, // integer only - scroll : crs, // integer only - }, - to : { - opacity : '', - width : '', - height : '', - position : {top:'',left:''}, - translate : {x:'', y:'', z:''}, - rotate : {x:'', y:'', z:''}, - scale : '', - scroll : '', - }, - easing : KUTE.Easing.Linear.None, //pe('linear') - delay : 0, - duration : 500, - start : null, // run function when tween starts - finish : null, // run function when tween finishes - special : null // run function while tween runing - }; - - //override the default values with option values - for (var x in options) { - if(typeof(options[x]) === 'object'){ - for (var y in options[x]){ - ops[x][y] = options[x][y]; - } - }else{ - ops[x] = options[x]; - } - } - - //create shorthand for all properties - var ofo = ops.from.opacity; - var ofw = ops.from.width; - var ofh = ops.from.height; - var oft = ops.from.position.top; - var ofl = ops.from.position.left; - var oftx = ops.from.translate.x; - var ofty = ops.from.translate.y; - var oftz = ops.from.translate.z; - var ofrx = ops.from.rotate.x; - var ofry = ops.from.rotate.y; - var ofrz = ops.from.rotate.z; - var ofs = ops.from.scale; - var ofsc = ops.from.scroll; - - var oto = ops.to.opacity; - var otw = ops.to.width; - var oth = ops.to.height; - var ott = ops.to.position.top; - var otl = ops.to.position.left; - var ottx = ops.to.translate.x; - var otty = ops.to.translate.y; - var ottz = ops.to.translate.z; - var otrx = ops.to.rotate.x; - var otry = ops.to.rotate.y; - var otrz = ops.to.rotate.z; - var ots = ops.to.scale; - var otsc = ops.to.scroll; - - - //process easing - var pes = typeof ops.easing === 'string' ? pe(ops.easing) : ops.easing; - - //from/initial values - var iwi = cv(ofw) ? truD(ofw)[0] : truD( css.width )[0]; // width - var ihe = cv(ofh) ? truD(ofh)[0] : truD( css.height )[0]; // height - - var ito = cv(oft) ? truD(oft)[0] : ''; // move - var ile = cv(ofl) ? truD(ofl)[0] : ''; - - var tr3d,tx,ty,tz,itx,ity,itz; // translate - if ( cv( ottx ) || cv( otty ) || cv( ottz ) ) { - itx = cv(oftx) ? truD(oftx)[0] : 0; - ity = cv(ofty) ? truD(ofty)[0] : 0; - itz = cv(oftz) ? truD(oftz)[0] : 0; - } else { - itx = ''; ity = ''; itz = ''; - } - - var irx = cv(ofrx) ? parseInt(ofrx) :''; //always deg - var iry = cv(ofry) ? parseInt(ofry) :''; - var irz = cv(ofrz) ? parseInt(ofrz) :''; - - var isa = parseFloat(ofs); // scale can be float - var iop = parseFloat(ofo); // opacity - var isc = parseInt(ofsc); // scroll - - - //target values - var wi = cv( otw ) ? truD(otw)[0] : ''; // width - var he = cv( oth ) ? truD(oth)[0] : ''; // height - - var top = cv(ott) ? truD(ott)[0] : ''; // pos top - var le = cv(otl) ? truD(otl)[0] : ''; //pos left - - if ( cv( ottx ) || cv( otty ) || cv( ottz ) ) { // translate 3d - tx = cv( ottx ) ? truD(ottx)[0] : 0; - ty = cv( otty ) ? truD(otty)[0] : 0; - tz = cv( ottz ) ? truD(ottz)[0] : 0; - } else { - tx = ''; ty = ''; tz = ''; - } - - var rx = cv( otrx ) ? parseInt(otrx) : ''; // rotate - var ry = cv( otry ) ? parseInt(otry) : ''; - var rz = cv( otrz ) ? parseInt(otrz) : ''; - - var sa = cv( ots ) ? parseFloat(ots) : ''; // scale values below 1 need to be reformated - var op = cv( oto ) ? parseFloat(oto) : ''; // opacity - var sc = cv( otsc ) ? parseInt(otsc) : ''; // scroll - - //check measurement unit - var wiu = cv( wi ) ? truD(otw)[1] : ''; // width - var heu = cv( he ) ? truD(oth)[1] : ''; // height - - var tou = cv( ott ) ? truD(ott)[1] : ''; // pos top - var leu = cv( otl ) ? truD(otl)[1] : ''; // pos left - - var txu = cv( tx ) ? truD(ottx)[1] : ''; // translate - var tyu = cv( ty ) ? truD(otty)[1] : ''; - var tzu = cv( tz ) ? truD(ottz)[1] : ''; - - animateTween(); - - var from = { w: iwi, h: ihe, t: ito, l: ile, scale: isa, trX: itx, trY: ity, trZ: itz, roX: irx, roY: iry, roZ: irz, opacity: iop, scroll: isc }; - var target = { w: wi, h: he, t: top, l: le, scale: sa, trX: tx, trY: ty, trZ: tz, roX: rx, roY: ry, roZ: rz, opacity: op, scroll: sc }; - - return new KUTE.Tween( from ) - .to( target, ops.duration ) - .delay( ops.delay ) - .easing( pes ) - .onStart( runStart ) - .onUpdate( - function () { - - //translate3d - if ( cv(tx) || cv(ty) || cv(tz) ) { - tr3d = 'translate3d(' + ((this.trX + txu) || 0) + ',' + ( (this.trY + tyu) || 0) + ',' + ( (this.trZ + tzu) || 0) + ')'; - } else { tr3d = ''; } - - //rotate - var roxt = cv(rx) ? ' rotateX(' + this.roX + 'deg)' : ''; - var royt = cv(ry) ? ' rotateY(' + this.roY + 'deg)' : ''; - var rozt = cv(rz) ? ' rotateZ(' + this.roZ + 'deg)' : ''; - - //scale - var sca = cv(sa) ? ' scale(' + this.scale + ')' : ''; - - //do a zoom for IE8 - if (isIE8 && cv(sa)) { - el.style.zoom = this.scale; - } - - //sum all transform - var perspective = parseInt(css.perspective)||''; - var transform = sca + tr3d + roxt + royt + rozt; - if ( cv(transform) ) { tr(transform,perspective) } - - - //dimensions width / height - if ( cv(wi) ) { el.style.width = this.w + wiu; } - if ( cv(he) ) { el.style.height = this.h + heu; } - - //position - if ( cv(top) ) { el.style.top = this.t + tou; } - if ( cv(le ) ) { el.style.left = this.l + leu; } - - // scrolling - if ( cv(sc) ) { sct.scrollTop = this.scroll; } - - //opacity - if ( cv(op) ) { el.style.opacity = (this.opacity).toFixed(2); } - - //do a filter opacity for IE8 - if (isIE8 && cv(op)) { - el.style.filter = "alpha(opacity=" + parseInt(100 * this.opacity) + ")" - } - - //run special function onUpdate - if ( ops.special && typeof ops.special === "function") { ops.special(); } - } - ) - .onComplete( runFinished ) - .start(); - - function animateTween(time) { - requestAnimationFrame( animateTween ); - KUTE.update(time); - } - - //callback when tween is finished - function runFinished() { - if ( ops.finish && typeof ops.finish === "function") { - ops.finish(); - } - if ( cv(otsc) ) { - document.body.removeAttribute('data-tweening') - } - } - - //callback when tween just started - function runStart() { - if ( ops.start && typeof ops.start === "function") { - ops.start(); - } - //fix the scrolling being interrupted via mousewheel - if ( cv(otsc) ) { - if ( !document.body.getAttribute('data-tweening') && document.body.getAttribute('data-tweening') !== 'scroll' ) - document.body.setAttribute('data-tweening','scroll'); - } - } - - /* Process values utils - ----------------------------*/ - - //process easing 31 - function pe(e) { - if ( e === 'linear' ) return KUTE.Easing.Linear.None; - if ( e === 'quadraticIn' ) return KUTE.Easing.Quadratic.In; - if ( e === 'quadraticOut' ) return KUTE.Easing.Quadratic.Out; - if ( e === 'quadraticInOut' ) return KUTE.Easing.Quadratic.InOut; - if ( e === 'cubicIn' ) return KUTE.Easing.Cubic.In; - if ( e === 'cubicOut' ) return KUTE.Easing.Cubic.Out; - if ( e === 'cubicInOut' ) return KUTE.Easing.Cubic.InOut; - if ( e === 'quarticIn' ) return KUTE.Easing.Quartic.In; - if ( e === 'quarticOut' ) return KUTE.Easing.Quartic.Out; - if ( e === 'quarticInOut' ) return KUTE.Easing.Quartic.InOut; - if ( e === 'quinticIn' ) return KUTE.Easing.Quintic.In; - if ( e === 'quinticOut' ) return KUTE.Easing.Quintic.Out; - if ( e === 'quinticInOut' ) return KUTE.Easing.Quintic.InOut; - if ( e === 'sinusoidalIn' ) return KUTE.Easing.Sinusoidal.In; - if ( e === 'sinusoidalOut' ) return KUTE.Easing.Sinusoidal.Out; - if ( e === 'sinusoidalInOut' ) return KUTE.Easing.Sinusoidal.InOut; - if ( e === 'exponentialIn' ) return KUTE.Easing.Exponential.In; - if ( e === 'exponentialOut' ) return KUTE.Easing.Exponential.Out; - if ( e === 'exponentialInOut' ) return KUTE.Easing.Exponential.InOut; - if ( e === 'circularIn' ) return KUTE.Easing.Circular.In; - if ( e === 'circularOut' ) return KUTE.Easing.Circular.Out; - if ( e === 'circularInOut' ) return KUTE.Easing.Circular.InOut; - if ( e === 'elasticIn' ) return KUTE.Easing.Elastic.In; - if ( e === 'elasticOut' ) return KUTE.Easing.Elastic.Out; - if ( e === 'elasticInOut' ) return KUTE.Easing.Elastic.InOut; - if ( e === 'backIn' ) return KUTE.Easing.Back.In; - if ( e === 'backOut' ) return KUTE.Easing.Back.Out; - if ( e === 'backInOut' ) return KUTE.Easing.Back.InOut; - if ( e === 'bounceIn' ) return KUTE.Easing.Bounce.In; - if ( e === 'bounceOut' ) return KUTE.Easing.Bounce.Out; - if ( e === 'bounceInOut' ) return KUTE.Easing.Bounce.InOut; - //default - return KUTE.Easing.Exponential.InOut; - } - - // value checker - function cv(v) { - if ( v !== undefined && v !== '' && v !== 'NaN' ) return true; - } - - // get true w/h - function truD(d){ - var v,u; - if (/px/i.test(d)) { - u = 'px'; v = parseInt( d ); - } else if (/%/i.test(d)) { - u = '%'; v = parseInt( d ); - } else { - v = d; u = 'px'; - } - return [v,u]; - } - - // process transform - function tr(p,pp) { - el.style.webkitTransform = p; - el.style.MozTransform = p; - el.style.msTransform = (cv(pp)?'perspective('+pp+'px) ':'') + p; - el.style.Transform = p; - } -}; - -KUTE.Tween = function ( object ) { - - var _object = object; - var _valuesStart = {}; - var _valuesEnd = {}; - var _valuesStartRepeat = {}; - var _duration = 700; - var _isPlaying = false; - var _delayTime = 0; - var _startTime = null; - var _easingFunction = KUTE.Easing.Linear.None; - var _onStartCallback = null; - var _onStartCallbackFired = false; - var _onUpdateCallback = null; - var _onCompleteCallback = null; - var _onStopCallback = null; - - // Set all starting values present on the target object - for ( var field in object ) { - _valuesStart[ field ] = parseFloat(object[field], 10); - } - - this.to = function ( properties, duration ) { - - if ( duration !== undefined ) { - _duration = duration; - } - - _valuesEnd = properties; - return this; - }; - - this.start = function ( time ) { - - KUTE.add( this ); - _isPlaying = true; - _onStartCallbackFired = false; - _startTime = time !== undefined ? time : window.performance.now(); - _startTime += _delayTime; - - for ( var property in _valuesEnd ) { - // check if an Array was provided as property value - if ( _valuesEnd[ property ] instanceof Array ) { - if ( _valuesEnd[ property ].length === 0 ) { - continue; - } - - // create a local copy of the Array with the start value at the front - _valuesEnd[ property ] = [ _object[ property ] ].concat( _valuesEnd[ property ] ); - } - - if( ( _valuesEnd[ property ] instanceof Array ) === false ) { - _valuesEnd[ property ] *= 1.0; // Ensures we're using numbers, not strings - } - - _valuesStart[ property ] = _object[ property ]; - - if( ( _valuesStart[ property ] instanceof Array ) === false ) { - _valuesStart[ property ] *= 1.0; // Ensures we're using numbers, not strings - } - } - return this; - }; - - this.stop = function () { - if ( !_isPlaying ) { - return this; - } - - KUTE.remove( this ); - _isPlaying = false; - - if ( _onStopCallback !== null ) { - _onStopCallback.call( _object ); - } - - return this; - - }; - - this.delay = function ( amount ) { - _delayTime = amount; - return this; - }; - - this.easing = function ( easing ) { - _easingFunction = easing; - return this; - }; - - this.onStart = function ( callback ) { - _onStartCallback = callback; - return this; - }; - - this.onUpdate = function ( callback ) { - _onUpdateCallback = callback; - return this; - }; - - this.onComplete = function ( callback ) { - _onCompleteCallback = callback; - return this; - }; - - this.onStop = function ( callback ) { - _onStopCallback = callback; - return this; - }; - - this.update = function ( time ) { - var property; - - if ( time < _startTime ) { - return true; - } - - if ( _onStartCallbackFired === false ) { - if ( _onStartCallback !== null ) { - _onStartCallback.call( _object ); - } - _onStartCallbackFired = true; - } - - var elapsed = ( time - _startTime ) / _duration; - elapsed = elapsed > 1 ? 1 : elapsed; - var value = _easingFunction( elapsed ); - - for ( property in _valuesEnd ) { - - var start = _valuesStart[ property ] || 0; - var end = _valuesEnd[ property ]; - - // Parses relative end values with start as base (e.g.: +10, -3) - if ( typeof(end) === "string" ) { - end = start + parseFloat(end, 10); - } - - // protect against non numeric properties. - if ( typeof(end) === "number" ) { - _object[ property ] = start + ( end - start ) * value; - } - } - - if ( _onUpdateCallback !== null ) { - _onUpdateCallback.call( _object, value ); - } - - if ( elapsed == 1 ) { - - if ( _onCompleteCallback !== null ) { - _onCompleteCallback.call( _object ); - } - return false; - } - return true; - }; -}; - -KUTE.Easing = { - Linear: { - None: function ( k ) { - return k; - } - }, - Quadratic: { - In: function ( k ) { - return k * k; - }, - - Out: function ( k ) { - return k * ( 2 - k ); - }, - - InOut: function ( k ) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k; - return - 0.5 * ( --k * ( k - 2 ) - 1 ); - } - }, - Cubic: { - In: function ( k ) { - return k * k * k; - }, - Out: function ( k ) { - return --k * k * k + 1; - }, - InOut: function ( k ) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k; - return 0.5 * ( ( k -= 2 ) * k * k + 2 ); - } - }, - Quartic: { - In: function ( k ) { - return k * k * k * k; - }, - Out: function ( k ) { - return 1 - ( --k * k * k * k ); - }, - InOut: function ( k ) { - if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k; - return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 ); - } - }, - Quintic: { - In: function ( k ) { - return k * k * k * k * k; - }, - - Out: function ( k ) { - return --k * k * k * k * k + 1; - }, - - InOut: function ( k ) { - if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k; - return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 ); - } - }, - Sinusoidal: { - In: function ( k ) { - return 1 - Math.cos( k * Math.PI / 2 ); - }, - Out: function ( k ) { - return Math.sin( k * Math.PI / 2 ); - }, - InOut: function ( k ) { - return 0.5 * ( 1 - Math.cos( Math.PI * k ) ); - } - }, - - Exponential: { - In: function ( k ) { - return k === 0 ? 0 : Math.pow( 1024, k - 1 ); - }, - Out: function ( k ) { - return k === 1 ? 1 : 1 - Math.pow( 2, - 10 * k ); - }, - InOut: function ( k ) { - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 1024, k - 1 ); - return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 ); - } - }, - Circular: { - In: function ( k ) { - return 1 - Math.sqrt( 1 - k * k ); - }, - Out: function ( k ) { - return Math.sqrt( 1 - ( --k * k ) ); - }, - InOut: function ( k ) { - if ( ( k *= 2 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1); - return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1); - } - }, - Elastic: { - In: function ( k ) { - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) ); - }, - Out: function ( k ) { - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 ); - }, - InOut: function ( k ) { - var s, a = 0.1, p = 0.4; - if ( k === 0 ) return 0; - if ( k === 1 ) return 1; - if ( !a || a < 1 ) { a = 1; s = p / 4; } - else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI ); - if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) ); - return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1; - } - }, - Back: { - In: function ( k ) { - var s = 1.70158; - return k * k * ( ( s + 1 ) * k - s ); - }, - Out: function ( k ) { - var s = 1.70158; - return --k * k * ( ( s + 1 ) * k + s ) + 1; - }, - InOut: function ( k ) { - var s = 1.70158 * 1.525; - if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) ); - return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 ); - } - }, - Bounce: { - In: function ( k ) { - return 1 - KUTE.Easing.Bounce.Out( 1 - k ); - }, - Out: function ( k ) { - if ( k < ( 1 / 2.75 ) ) { - return 7.5625 * k * k; - } else if ( k < ( 2 / 2.75 ) ) { - return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75; - } else if ( k < ( 2.5 / 2.75 ) ) { - return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375; - } else { - return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; - } - }, - InOut: function ( k ) { - if ( k < 0.5 ) return KUTE.Easing.Bounce.In( k * 2 ) * 0.5; - return KUTE.Easing.Bounce.Out( k * 2 - 1 ) * 0.5 + 0.5; - } - } -}; - - -// prevent mousewheel or touch events while tweening scroll -document.addEventListener('mousewheel', preventScroll, false); -document.addEventListener('touchstart', preventScroll, false); -function preventScroll(e){ - var data = document.body.getAttribute('data-tweening'); - if ( data && data === 'scroll' ) { - e.preventDefault(); - } -}; diff --git a/performance.html b/performance.html new file mode 100644 index 0000000..af5cc39 --- /dev/null +++ b/performance.html @@ -0,0 +1,132 @@ + + + + + + + + + + + + + KUTE.js | Performance Testing Page + + + + + + + +
+

Back to KUTE.js

+

Engine

+ + + + + +

Property

+ + + + + + +

Repeat

+ + + + + + +

How many elements to animate:

+ + + + + + + + +
+ +
+ +
+ +

These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, here's how.

+

The hack refers to adding a blank transform translate3d(0px,0px,0px); for the elements to promote them into separate layers, as described here.

+

Do not try this test on lower end or mobile devices.

+ +
+
+ + + + + + + + + + + + + + diff --git a/src/kute-bezier.js b/src/kute-bezier.js new file mode 100644 index 0000000..44c23b9 --- /dev/null +++ b/src/kute-bezier.js @@ -0,0 +1,159 @@ +/* + * 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 +*/ + +KUTE.Ease = {}; + +KUTE.Ease.bezier = function(mX1, mY1, mX2, mY2) { + return _bz.pB(mX1, mY1, mX2, mY2); +}; + +var _bz = KUTE.Ease.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"], +KUTE.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); }; +KUTE.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); }; +KUTE.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); }; + +KUTE.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); }; +KUTE.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); }; +KUTE.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); }; + +KUTE.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); }; +KUTE.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); }; +KUTE.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); }; + +KUTE.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); }; +KUTE.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); }; +KUTE.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); }; + +KUTE.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); }; +KUTE.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); }; +KUTE.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); }; + +KUTE.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); }; +KUTE.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); }; +KUTE.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); }; + +KUTE.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); }; +KUTE.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); }; +KUTE.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); }; + +KUTE.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); }; +KUTE.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); }; +KUTE.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); }; + +KUTE.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); }; +KUTE.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); }; +KUTE.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); }; + +KUTE.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); }; +KUTE.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); }; +KUTE.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); }; \ No newline at end of file diff --git a/src/kute-jquery.js b/src/kute-jquery.js new file mode 100644 index 0000000..08b4ead --- /dev/null +++ b/src/kute-jquery.js @@ -0,0 +1,26 @@ +/* KUTE.js - The Light Tweening Engine + * package jQuery Plugin + * by dnp_theme + * Licensed under MIT-License + */ + +(function($) { + $.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause() + var tws = [], i, l = this.length; + + for (i=0;i 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 = _kp.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 +_kp.forceWithGravity = function(o) { + var ops = o || {}; + ops.initialForce = true; + return _kp.gravity(ops); +}; + + +// multi point bezier +_kp.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 = _kp.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; +}; + +_kp.physicsInOut = function(options) { + var friction; + options = options || {}; + friction = options.friction|| 500; + return _kp.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 } ] } ] }); +}; + +_kp.physicsIn = function(options) { + var friction; + options = options || {}; + friction = options.friction|| 500; + return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] }); +}; + +_kp.physicsOut = function(options) { + var friction; + options = options || {}; + friction = options.friction|| 500; + return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] }); +}; + +_kp.physicsBackOut = function(options) { + var friction; + options = options || {}; + friction = options.friction|| 500; + return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] }); +}; + +_kp.physicsBackIn = function(options) { + var friction; + options = options || {}; + friction = options.friction|| 500; + return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] }); +}; + +_kp.physicsBackInOut = function(options) { + var friction; + options = options || {}; + friction = options.friction|| 500; + return _kp.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}]}] }); +}; \ No newline at end of file diff --git a/kute-dev.js b/src/kute.js similarity index 85% rename from kute-dev.js rename to src/kute.js index 33a25c6..c9e5019 100644 --- a/kute-dev.js +++ b/src/kute.js @@ -1,864 +1,855 @@ -/* KUTE.js - The Light Tweening Engine - * by dnp_theme - * Licensed under MIT-License - */ - -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['KUTE'], factory); - } else if (typeof exports == 'object') { - // Node, not strict CommonJS - module.exports = factory(); - } else { - // Browser globals - root.KUTE = root.KUTE || factory(); - } -}(this, function () { - var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick, - _pf = getPrefix(), // prefix - _rafR = _rafR || ((!('requestAnimationFrame' in window)) ? true : false), // is prefix required for requestAnimationFrame - _pfT = _pfT || ((!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for transform - _pfB = _pfB || ((!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for border-radius - _tch = _tch || (('ontouchstart' in window || navigator.msMaxTouchPoints) || false), // support Touch? - _ev = _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), - - _isIE8 = /ie8/.test(document.documentElement.className), - - //assign preffix to DOM properties - _pfp = _pfp || _pfT ? _pf + 'Perspective' : 'perspective', - _pfo = _pfo || _pfT ? _pf + 'PerspectiveOrigin' : 'perspectiveOrigin', - _tr = _tr || _pfT ? _pf + 'Transform' : 'transform', - _br = _br || _pfB ? _pf + 'BorderRadius' : 'borderRadius', - _brtl = _brtl || _pfB ? _pf + 'BorderTopLeftRadius' : 'borderTopLeftRadius', - _brtr = _brtr || _pfB ? _pf + 'BorderTopRightRadius' : 'borderTopRightRadius', - _brbl = _brbl || _pfB ? _pf + 'BorderBottomLeftRadius' : 'borderBottomLeftRadius', - _brbr = _brbr || _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius', - _raf = _raf || _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'], - _caf = _caf || _rafR ? window[_pf + 'CancelAnimationFrame'] : 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; - } - } - - //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); - } - }; - - // internal ticker - K.t = function (t) { - _t = _raf(K.t); - var i = 0, l = _tws.length; - while ( i < l ) { - if (!_tws[i]) {return false;} - if (K.u(_tws[i],t)) { - i++; - } else { - _tws.splice(i, 1); - } - } - _stk = false; - return true; - }; - - // internal stopTick - K.s = function () { - if ( _stk === false ) { - _caf(_t); - _stk = true; - _t = null; - } - }; - - //main methods - K.to = function (el, to, o) { - if ( o === undefined ) { o = {}; } - var _el = _el || typeof el === 'object' ? el : document.querySelector(el), - _o = _o || o; - _o.rpr = true; - _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; - - var _vS = to, // we're gonna have to build this object at start - _vE = K.prP(to, true), - _tw = new K.Tween(_el, _vS, _vE, _o); - return _tw; - }; - - K.fromTo = function (el, f, to, o) { - if ( o === undefined ) { o = {}; } - var _el = _el || typeof el === 'object' ? el : document.querySelector(el); - var _o = o; - - _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; - - var _vS = K.prP(f, false), - _vE = K.prP(to, true), - _tw = new K.Tween(_el, _vS, _vE, _o); - return _tw; - }; - // fallback method for previous versions - K.Animate = function (el, f, to, o) { - return K.fromTo(el, f, to, o); - }; - - //main worker, doing update on tick - K.u = function(w,t) { - if (t < w._sT) { return true; } - - if (!w._sCF) { - if (w._sC) { w._sC.call(); } - w._sCF = true; - } - - var e = ( t - w._sT ) / w._dr; //elapsed - e = e > 1 ? 1 : e; - var _v = w._e(e); - - //render the CSS update - K.r(w,_v); - - if (w._uC) { w._uC.call(); } - - if (e === 1) { - if (w._r > 0) { - if ( w._r !== Infinity ) {w._r--; } - var p; - // reassign starting values, restart by making _sT = now - for (p in w._vSR) { - if (w._y) { - var tmp = w._vSR[p]; - w._vSR[p] = w._vE[p]; - w._vE[p] = tmp; - } - w._vS[p] = w._vSR[p]; - } - if (w._y) { w._rv = !w._rv; } - - //set the right time for delay - w._sT = (w._y && !w._rv) ? t + w._rD : t; - return true; - } else { - if (w._cC) { w._cC.call(); } - - //stop preventing scroll when scroll tween finished - w.scrollOut(); - var i = 0, ctl = w._cT.length; - for (i; i < ctl; i++) { - w._cT[i].start(); - } - - //stop ticking when finished - w.close(); - - return false; - } - } - return true; - }; - - // render for each property - K.r = function (w,v) { - var p, css = w._el && w._el.style, ets = (w._el === undefined || w._el === null) ? _sct : w._el, opp = _isIE8 ? 'filter':'opacity'; - for (p in w._vE) { - - var _start = w._vS[p], - _end = w._vE[p], - v1 = _start.value || 0, - v2 = _end.value || 0, - tv = v1 + (v2 - v1) * v, - u = _end.unit, - // checking array on every frame takes time so let's cache these - cls = _cls.indexOf(p) !== -1, - bm = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1, - rd = _rd.indexOf(p) !== -1 && !_isIE8, - sc = _sc.indexOf(p) !== -1, - bg = _bg.indexOf(p) !== -1, - clp = _clp.indexOf(p) !== -1, - op = _op.indexOf(p) !== -1, - tf = p === 'transform' && !_isIE8; - - //process styles by property / property type - if ( rd ) { - if (p === 'borderRadius') { - css[_br] = tv + u; - } else if (p === 'borderTopLeftRadius') { - css[_brtl] = tv + u; - } else if (p === 'borderTopRightRadius') { - css[_brtr] = tv + u; - } else if (p === 'borderBottomLeftRadius') { - css[_brbl] = tv + u; - } else if (p === 'borderBottomRightRadius') { - css[_brbr] = tv + u; - } - - } else if (tf) { - var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) '; //transform style & property - - for (tP in _end) { - var t1 = _start[tP], t2 = _end[tP]; - rps = _3d.indexOf(tP) !== -1; - - 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); - } - } - css[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS; - } else if ( cls ) { - var _c = {}, c; - - for (c in v2) { - if ( c !== 'a' ){ - _c[c] = parseInt(v1[c] + (v2[c] - v1[c]) * v); - } else { - _c[c] = (v1[c] && v2[c]) ? parseFloat(v1[c] + (v2[c] - v1[c]) * v) : null; - } - } - - if ( w._hex ) { - css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) ); - } else { - css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')'; - } - - } else if ( bm ) { - css[p] = tv ? tv+u : 'auto'; - } else if ( sc ) { - ets.scrollTop = v1 + ( v2 - v1 ) * v; - } else if ( bg ) { - var px1 = _start.x.v, px2 = _end.x.v, py1 = _start.y.v, py2 = _end.y.v, - px = px1 + ( px2 - px1 ) * v, pxu = '%', - py = py1 + ( py2 - py1 ) * v, pyu = '%'; - css[p] = px + pxu + ' ' + py + pyu; - } else if ( clp ) { - var h = 0, cl = []; - for (h;h<4;h++){ - var c1 = _start[h].v||0, c2 = _end[h].v||0, cu = _end[h].u || 'px'; - cl[h] = (c1 + ( c2 - c1 ) * v) + cu; - } - css[p] = 'rect('+cl+')'; - } else if ( op ) { - css[opp] = !_isIE8 ? tv : "alpha(opacity=" + parseInt(tv*100) + ")"; - - } - } - }; - - K.perspective = function (l,w) { - 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 - }; - - K.Tween = function (_el, _vS, _vE, _o) { - this._el = this._el || _el; // element animation is applied to - this._dr = this._dr || _o&&_o.duration || 700; //duration - this._r = this._r || _o&&_o.repeat || 0; // _repeat - this._vSR = {}; // internal valuesStartRepeat - this._vS = _vS; // valuesStart - this._vE = _vE; // valuesEnd - this._y = this._y || _o&&_o.yoyo || false; // _yoyo - this._P = false; // _isPlaying - this._rv = false; // _reversed - this._rD = this._rD || _o&&_o.repeatDelay || 0; // _repeatDelay - this._dl = this._dl || _o&&_o.delay || 0; //delay - this._sT = null; // startTime - this._ps = false; //_paused - this._pST = null; //_pauseStartTime - this._pp = this._pp || _o.perspective; // perspective - this._ppo = this._ppo || _o.perspectiveOrigin; // perspective origin - this._ppp = this._ppp || _o.parentPerspective; // parent perspective - this._pppo = this._pppo || _o.parentPerspectiveOrigin; // parent perspective origin - this._rpr = this._rpr || _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false - this._hex = this._hex || _o.keepHex || false; // option to keep hex for color tweens true/false - this._e = this._e || _o.easing; // _easing - this._cT = this._cT || []; //_chainedTweens - this._sC = 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 - }; - - var w = K.Tween.prototype; - - w.start = function (t) { - K.add(this); - this._P = true; - this._sCF = false; - this._sT = t || window.performance.now(); - this._sT += this._dl; - this.scrollIn(); - var f = {}; - - K.perspective(this._el,this); // apply the perspective - - if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method - f = this.prS(); - this._vS = {}; - this._vS = K.prP(f,false); - - for ( 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 spp in this._vS[p][sp] ) { // scale - if (!(spp in this._vE[p][sp])) { - this._vE[p][sp][spp] = this._vS[p][sp][spp]; // spp = unit | value - } - } - } - } - } - } - } - - for ( p in this._vE ) { - this._vSR[p] = this._vS[p]; - } - if (!_t) K.t(); - return this; - }; - - w.prS = function () { //prepare valuesStart for .to() method - 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 1 ? 1 : e; + + //render the CSS update + K.r(this,this._e(e)); + + if (this._uC) { this._uC.call(); } + + if (e === 1) { + if (this._r > 0) { + if ( this._r !== Infinity ) { this._r--; } + + if (this._y) { this.reversed = !this.reversed; this.reverse(); } // handle yoyo + + this._sT = (this._y && !this.reversed) ? t + this._rD : t; //set the right time for delay + return true; + } else { + + if (this._cC) { this._cC.call(); } + + //stop preventing scroll when scroll tween finished + this.scrollOut(); + var i = 0, ctl = this._cT.length; + for (i; i < ctl; i++) { + this._cT[i].start(this._sT + this._dr); + } + + //stop ticking when finished + this.close(); + return false; + } + } + return true; + }; + + 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 = 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.resume = function () { this.play(); 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]; + } + } + return this; + }; + + 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); + }; + + w.prS = function () { //prepare valuesStart for .to() method + 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 0) { self._r = self.repeat; } + if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; } + self.playing = false; + },100) + }; + + // 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 Date: Sun, 18 Oct 2015 09:42:40 +0300 Subject: [PATCH 022/187] --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1e931f4..175c3c2 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + @@ -182,7 +182,7 @@ - + From 26f03f6134dfe895a907574ece6b5ef762ec0f0e Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 18 Oct 2015 10:19:08 +0300 Subject: [PATCH 023/187] --- assets/js/minifill.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/assets/js/minifill.js b/assets/js/minifill.js index 2d18656..917965b 100644 --- a/assets/js/minifill.js +++ b/assets/js/minifill.js @@ -20,23 +20,6 @@ if(!Date.now){ Date.now = function now() { return new Date().getTime(); }; } } })(); - -// Object.keys -if (!Object.keys) { - Object.keys = function(obj) { - var keys = []; - - for (var i in obj) { - if (obj.hasOwnProperty(i)) { - keys.push(i); - } - } - - return keys; - }; -} - - // Array.prototype.indexOf if (!Array.prototype.indexOf) { Array.prototype.indexOf = function indexOf(searchElement) { From 7808f9760fd84a5928ba9b611ef910749b470717 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 18 Oct 2015 20:38:49 +0300 Subject: [PATCH 024/187] fixed tween.min.js file --- assets/js/tween.min.js | 4 ++-- performance.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/tween.min.js b/assets/js/tween.min.js index 299b67d..9c2a893 100644 --- a/assets/js/tween.min.js +++ b/assets/js/tween.min.js @@ -1,2 +1,2 @@ -// KUTE.js | dnp_theme | MIT License -!function(t,e){"function"==typeof define&&define.amd?define(["KUTE"],e):"object"==typeof exports?module.exports=e():t.KUTE=t.KUTE||e()}(this,function(){function t(){var t=document.createElement("div"),e=0,r=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=r.length,n=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(e;i>e;e++)if(n[e]in t.style)return r[e];t=null}for(var e,r=r||{},i=[],n=!1,s=t(),a=(a||("requestAnimationFrame"in window?!1:!0)),o=(o||("transform"in document.getElementsByTagName("div")[0].style?!1:!0)),u=(u||("border-radius"in document.getElementsByTagName("div")[0].style?!1:!0)),l=(l||"ontouchstart"in window||navigator.msMaxTouchPoints||!1),f=f||(l?"touchstart":"mousewheel"),p=document.body,h=document.getElementsByTagName("HTML")[0],c=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?p:h,d=/ie/.test(document.documentElement.className),v=/ie8/.test(document.documentElement.className),g=g||o?s+"Perspective":"perspective",_=_||o?s+"PerspectiveOrigin":"perspectiveOrigin",m=m||o?s+"Transform":"transform",E=E||u?s+"BorderRadius":"borderRadius",y=y||u?s+"BorderTopLeftRadius":"borderTopLeftRadius",b=b||u?s+"BorderTopRightRadius":"borderTopRightRadius",w=w||u?s+"BorderBottomLeftRadius":"borderBottomLeftRadius",O=O||u?s+"BorderBottomRightRadius":"borderBottomRightRadius",x=x||a?window[s+"RequestAnimationFrame"]:window.requestAnimationFrame,T=T||a?window[s+"CancelAnimationFrame"]:window.cancelAnimationFrame,C=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],I=["scrollTop","scroll"],S=["clip"],R=["opacity"],D=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],M=["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"],B=["fontSize","lineHeight","letterSpacing"],k=["backgroundPosition"],L=["rotateX","rotateY","translateZ"],A=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],F=C.concat(I,S,R,D,M,B,k,A),P=F.length,Y={},X={},Z={},z={},q={},Q={},W=W||{},N=0;P>N;N++){var H=F[N];-1!==C.indexOf(H)?W[H]="rgba(0,0,0,0)":-1!==D.indexOf(H)||-1!==M.indexOf(H)||-1!==B.indexOf(H)?W[H]=0:-1!==k.indexOf(H)?W[H]=[50,50]:"clip"===H?W[H]=[0,0,0,0]:"translate3d"===H?W[H]=[0,0,0]:"translate"===H?W[H]=[0,0]:"rotate"===H||/X|Y|Z/.test(H)?W[H]=0:("scale"===H||"opacity"===H)&&(W[H]=1)}r.getAll=function(){return i},r.removeAll=function(){i=[]},r.add=function(t){i.push(t)},r.remove=function(t){var e=i.indexOf(t);-1!==e&&i.splice(e,1)},r.t=function(t){e=x(r.t);for(var s=0,a=i.length;a>s;){if(!i[s])return!1;i[s].u(t)?s++:i.splice(s,1)}return n=!1,!0},r.s=function(){n===!1&&(T(e),n=!0,e=null)},r.to=function(t,e,i){void 0===i&&(i={});var n=n||"object"==typeof t?t:document.querySelector(t),s=s||i;s.rpr=!0,s.easing=s&&r.pe(s.easing)||r.Easing.linear;var a=e,o=r.prP(e,!0),u=new r.Tween(n,a,o,s);return u},r.fromTo=function(t,e,i,n){void 0===n&&(n={});var s=s||"object"==typeof t?t:document.querySelector(t),a=n;a.easing=a&&r.pe(a.easing)||r.Easing.linear;var o=r.prP(e,!1),u=r.prP(i,!0),l=new r.Tween(s,o,u,a);return l},r.Animate=function(t,e,i,n){return r.fromTo(t,e,i,n)},r.r=function(t,e){var i,n=t._el&&t._el.style,s=v?"filter":"opacity",a=void 0===t._el||null===t._el?c:t._el;for(i in t._vE){var o=t._vS[i],u=t._vE[i],l=o.value,f=u.value,p=l+(f-l)*e,h=u.unit,g=-1!==C.indexOf(i),_=-1!==B.indexOf(i)||-1!==M.indexOf(i),x=-1!==D.indexOf(i)&&!v,T=-1!==I.indexOf(i),A=-1!==k.indexOf(i),F=-1!==S.indexOf(i),P=-1!==R.indexOf(i),Y="transform"===i&&!v;if(x)"borderRadius"===i?n[E]=p+h:"borderTopLeftRadius"===i?n[y]=p+h:"borderTopRightRadius"===i?n[b]=p+h:"borderBottomLeftRadius"===i?n[w]=p+h:"borderBottomRightRadius"===i&&(n[O]=p+h);else if(Y){var X,Z,z="",q="perspective("+t._pp+"px) ";for(X in u){var Q=o[X],W=u[X];if(Z=-1!==L.indexOf(X)&&!d,"translate"===X){var N,H="",j={};for(N in W){var K=Q[N].value||0,U=W[N].value||0,$=W[N].unit||"px";j[N]=K===U?U+$:K+(U-K)*e+$}H=W.x?"translate("+j.x+","+j.y+")":"translate3d("+j.translateX+","+j.translateY+","+j.translateZ+")",z=""===z?H:H+" "+z}else if("rotate"===X){var G,J="",V={};for(G in W)if(Q[G]){var te=Q[G].value,ee=W[G].value,re=W[G].unit||"deg",ie=te+(ee-te)*e;V[G]="z"===G?"rotate("+ie+re+")":G+"("+ie+re+") "}J=W.z?V.z:(V.rotateX||"")+(V.rotateY||"")+(V.rotateZ||""),z=""===z?J:z+" "+J}else if("skew"===X){var ne="",se={};for(var ae in W)if(Q[ae]){var oe=Q[ae].value,ue=W[ae].value,le=W[ae].unit||"deg",fe=oe+(ue-oe)*e;se[ae]=ae+"("+fe+le+") "}ne=(se.skewX||"")+(se.skewY||""),z=""===z?ne:z+" "+ne}else if("scale"===X){var pe=Q.value,he=W.value,ce=pe+(he-pe)*e,de=X+"("+ce+")";z=""===z?de:z+" "+de}}n[m]=Z||void 0!==t._pp&&0!==t._pp?q+z:z}else if(g){var ve,ge={};for(ve in f)ge[ve]="a"!==ve?parseInt(l[ve]+(f[ve]-l[ve])*e)||0:l[ve]&&f[ve]?parseFloat(l[ve]+(f[ve]-l[ve])*e):null;n[i]=t._hex?r.rth(parseInt(ge.r),parseInt(ge.g),parseInt(ge.b)):!ge.a||v?"rgb("+ge.r+","+ge.g+","+ge.b+")":"rgba("+ge.r+","+ge.g+","+ge.b+","+ge.a+")"}else if(_)n[i]=p+h;else if(T)a.scrollTop=l+(f-l)*e;else if(A){var _e=o.x.v,me=u.x.v,Ee=o.y.v,ye=u.y.v,be=_e+(me-_e)*e,we="%",Oe=Ee+(ye-Ee)*e,xe="%";n[i]=be+we+" "+Oe+xe}else if(F){var Te=0,Ce=[];for(Te;4>Te;Te++){var Ie=o[Te].v,Se=u[Te].v,Re=u[Te].u||"px";Ce[Te]=Ie+(Se-Ie)*e+Re}n[i]="rect("+Ce+")"}else P&&(n[s]=v?"alpha(opacity="+parseInt(100*p)+")":p)}},r.perspective=function(t,e){void 0!==e._ppo&&(t.style[_]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[g]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[_]=e._pppo)},r.Tween=function(t,e,r,i){this._el=this._el||t,this._dr=this._dr||i&&i.duration||700,this._r=this._r||i&&i.repeat||0,this._vSR={},this._vS=e,this._vE=r,this._y=this._y||i&&i.yoyo||!1,this.playing=!1,this.reversed=!1,this._rD=this._rD||i&&i.repeatDelay||0,this._dl=this._dl||i&&i.delay||0,this._sT=null,this.paused=!1,this._pST=null,this._pp=this._pp||i.perspective,this._ppo=this._ppo||i.perspectiveOrigin,this._ppp=this._ppp||i.parentPerspective,this._pppo=this._pppo||i.parentPerspectiveOrigin,this._rpr=this._rpr||i.rpr||!1,this._hex=this._hex||i.keepHex||!1,this._e=this._e||i.easing,this._cT=this._cT||[],this._sC=this._sC||i&&i.start||null,this._sCF=!1,this._uC=i&&i.update||null,this._cC=i&&i.complete||null,this._pC=i&&i.pause||null,this._rC=i&&i.play||null,this._stC=i&&i.stop||null,this.repeat=this._r};var j=r.Tween.prototype;j.start=function(t){this.scrollIn();var i={};if(r.perspective(this._el,this),this._rpr){i=this.prS(),this._vS={},this._vS=r.prP(i,!1);for(H in this._vS)if("transform"===H&&H in this._vE)for(var n in this._vS[H]){n in this._vE[H]||(this._vE[H][n]={});for(var s in this._vS[H][n])if(void 0!==this._vS[H][n][s].value){s in this._vE[H][n]||(this._vE[H][n][s]={});for(var a in this._vS[H][n][s])a in this._vE[H][n][s]||(this._vE[H][n][s][a]=this._vS[H][n][s][a])}if("value"in this._vS[H][n]&&!("value"in this._vE[H][n]))for(var s in this._vS[H][n])s in this._vE[H][n]||(this._vE[H][n][s]=this._vS[H][n][s])}}for(H in this._vE)this._vSR[H]=this._vS[H];return r.add(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=t||window.performance.now(),this._sT+=this._dl,e||r.t(),this},j.u=function(t){if(t=t||window.performance.now(),t1?1:e,r.r(this,this._e(e)),this._uC&&this._uC.call(),1===e){if(this._r>0)return 1/0!==this._r&&this._r--,this._y&&(this.reversed=!this.reversed,this.reverse()),this._sT=this._y&&!this.reversed?t+this._rD:t,!0;this._cC&&this._cC.call(),this.scrollOut();var i=0,n=this._cT.length;for(i;n>i;i++)this._cT[i].start(this._sT+this._dr);return this.close(),!1}return!0},j.stop=function(){return!this.paused&&this.playing&&(r.remove(this),this.playing=!1,this.paused=!1,this.scrollOut(),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),this.close()),this},j.pause=function(){return!this.paused&&this.playing&&(r.remove(this),this.paused=!0,this._pST=window.performance.now(),null!==this._pC&&this._pC.call()),this},j.play=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=window.performance.now()-this._pST,r.add(this),e||r.t()),this},j.resume=function(){return this.play(),this},j.reverse=function(){if(this._y)for(var t in this._vE){var e=this._vSR[t];this._vSR[t]=this._vE[t],this._vE[t]=e,this._vS[t]=this._vSR[t]}return this},j.chain=function(){return this._cT=arguments,this},j.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},j.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},j.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},j.addListeners=function(){document.addEventListener(f,r.preventScroll,!1)},j.removeListeners=function(){document.removeEventListener(f,r.preventScroll,!1)},j.prS=function(){var t={},e=this._el,r=this._vS,i=this.gIS("transform"),n=["rotate","skew"],s=["X","Y","Z"];for(var a in r)if(-1!==A.indexOf(a)){var o="rotate"===a||"translate"===a||"scale"===a;if(/translate/.test(a)&&"translate"!==a)t.translate3d=i.translate3d||W[a];else if(o)t[a]=i[a]||W[a];else if(!o&&/rotate|skew/.test(a))for(var u=0;2>u;u++)for(var l=0;3>l;l++){var f=n[u]+s[l];-1!==A.indexOf(f)&&f in r&&(t[f]=i[f]||W[f])}}else if(-1===I.indexOf(a))if("opacity"===a&&v){var p=this.gCS("filter");t.opacity="number"==typeof p?p:W.opacity}else t[a]=this.gCS(a)||W[a];else t[a]=null===e||void 0===e?window.pageYOffset||c.scrollTop:e.scrollTop;for(var a in i)-1===A.indexOf(a)||a in r||(t[a]=i[a]||W[a]);return t},j.gIS=function(){if(this._el){var t=this._el,e=t.style.cssText,r={},i=e.replace(/\s/g,"").split(";"),n=0,s=i.length;for(n;s>n;n++)if(/transform/.test(i[n])){var a=i[n].split(":")[1].split(")"),o=0,u=a.length;for(o;u>o;o++){var l=a[o].split("(");""!==l[0]&&A.indexOf(l)&&(r[l[0]]=/translate3d/.test(l[0])?l[1].split(","):l[1])}}return r}},j.gCS=function(t){var e=this._el,r=window.getComputedStyle(e)||e.currentStyle,i=!v&&o&&/transform|Radius/.test(t)?"-"+s.toLowerCase()+"-"+t:t,n=o&&"transform"===t||o&&-1!==D.indexOf(t)?r[i]:r[t];if("transform"!==t&&i in r){if(n){if("filter"===i){var a=parseInt(n.split("=")[1].replace(")","")),u=parseFloat(a/100);return u}return n}return W[t]}},j.close=function(){var t=this;setTimeout(function(){var e=i.indexOf(t);e===i.length-1&&r.s(),t.repeat>0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.reverse(),t.reversed=!1),t.playing=!1},100)},r.prP=function(t,e){var i={},n=e===!0?X:Y,s=e===!0?z:Z,a=e===!0?Q:q;s={},n={};for(var o in t)if(-1!==A.indexOf(o)){if("translate"!==o&&/translate/.test(o)){var u=["X","Y","Z"],l=0;for(l;3>l;l++){var f=u[l];s["translate"+f]=/3d/.test(o)?r.pp("translate"+f,t[o][l]):"translate"+f in t?r.pp("translate"+f,t["translate"+f]):{value:0,unit:"px"}}n.translate=s}else if("rotate"!==o&&/rotate|skew/.test(o)){var p=/rotate/.test(o)?"rotate":"skew",h=["X","Y","Z"],c=0,d={},v={},a="rotate"===p?d:v;for(c;3>c;c++){var g=h[c];void 0!==t[p+g]&&"skewZ"!==o&&(a[p+g]=r.pp(p+g,t[p+g]))}n[p]=a}else("translate"===o||"rotate"===o||"scale"===o)&&(n[o]=r.pp(o,t[o]));i.transform=n}else-1===A.indexOf(o)&&(i[o]=r.pp(o,t[o]));return i},r.pp=function(t,e){if(-1!==A.indexOf(t)){var i,n=t.replace(/X|Y|Z/,"");if("translate3d"===t)return i=e.split(","),{translateX:{value:r.truD(i[0]).v,unit:r.truD(i[0]).u},translateY:{value:r.truD(i[1]).v,unit:r.truD(i[1]).u},translateZ:{value:r.truD(i[2]).v,unit:r.truD(i[2]).u}};if("translate"!==t&&"translate"===n)return{value:r.truD(e).v,unit:r.truD(e).u||"px"};if("rotate"!==t&&("skew"===n||"rotate"===n)&&"skewZ"!==t)return{value:r.truD(e).v,unit:r.truD(e,t).u||"deg"};if("translate"===t){i="string"==typeof e?e.split(","):e;var s={};return i instanceof Array?(s.x={value:r.truD(i[0]).v,unit:r.truD(i[0]).u},s.y={value:r.truD(i[1]).v,unit:r.truD(i[1]).u}):(s.x={value:r.truD(i).v,unit:r.truD(i).u},s.y={value:0,unit:"px"}),s}if("rotate"===t){var a={};return a.z={value:parseInt(e,10),unit:r.truD(e,t).u||"deg"},a}if("scale"===t)return{value:parseFloat(e,10)}}if(-1!==B.indexOf(t)||-1!==M.indexOf(t))return{value:r.truD(e).v,unit:r.truD(e).u};if(-1!==R.indexOf(t))return{value:parseFloat(e,10)};if(-1!==I.indexOf(t))return{value:parseFloat(e,10)};if(-1!==S.indexOf(t)){if(e instanceof Array)return[r.truD(e[0]),r.truD(e[1]),r.truD(e[2]),r.truD(e[3])];var o;return/rect/.test(e)?o=e.replace(/rect|\(|\)/g,"").split(/\s|\,/):/auto|none|initial/.test(e)&&(o=W[t]),[r.truD(o[0]),r.truD(o[1]),r.truD(o[2]),r.truD(o[3])]}if(-1!==C.indexOf(t))return{value:r.truC(e)};if(-1!==k.indexOf(t)){if(e instanceof Array)return{x:r.truD(e[0])||{v:50,u:"%"},y:r.truD(e[1])||{v:50,u:"%"}};var u=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g),l=r.truD(u[0]),f=r.truD(u[1]);return{x:l,y:f}}if(-1!==D.indexOf(t)){var p=r.truD(e);return{value:p.v,unit:p.u}}},r.truD=function(t,e){function r(){var r,i=0;for(i;s>i;i++)"string"==typeof t&&-1!==t.indexOf(n[i])&&(r=n[i]);return r=void 0!==r?r:e?"deg":"px"}var i=parseInt(t)||0,n=["px","%","deg","rad","em","rem","vh","vw"],s=n.length,a=r();return{v:i,u:a}},r.preventScroll=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},r.truC=function(t){var e,i;return/rgb|rgba/.test(t)?(e=t.replace(/[^\d,]/g,"").split(","),i=e[3]?e[3]:null,i?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(i)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}):/#/.test(t)?{r:r.htr(t).r,g:r.htr(t).g,b:r.htr(t).b}:/transparent|none|initial|inherit/.test(t)?{r:0,g:0,b:0,a:0}:void 0},r.rth=function(t,e,r){return"#"+((1<<24)+(t<<16)+(e<<8)+r).toString(16).slice(1)},r.htr=function(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,r,i){return e+e+r+r+i+i});var r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return r?{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)}:null},r.pe=function(t){if("function"==typeof t)return t;if("string"==typeof t){if(/easing|linear/.test(t))return r.Easing[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(","),i=0,n=e.length;for(i;n>i;i++)e[i]=parseFloat(e[i]);return r.Ease.bezier(e[0],e[1],e[2],e[3])}return/physics/.test(t)?r.Physics[t]():r.Ease[t]()}},r.Easing={},r.Easing.linear=function(t){return t};var K=Math.PI,U=2*Math.PI,$=Math.PI/2,G=.1,J=.4;return r.Easing.easingSinusoidalIn=function(t){return-Math.cos(t*$)+1},r.Easing.easingSinusoidalOut=function(t){return Math.sin(t*$)},r.Easing.easingSinusoidalInOut=function(t){return-.5*(Math.cos(K*t)-1)},r.Easing.easingQuadraticIn=function(t){return t*t},r.Easing.easingQuadraticOut=function(t){return t*(2-t)},r.Easing.easingQuadraticInOut=function(t){return.5>t?2*t*t:-1+(4-2*t)*t},r.Easing.easingCubicIn=function(t){return t*t*t},r.Easing.easingCubicOut=function(t){return--t*t*t+1},r.Easing.easingCubicInOut=function(t){return.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},r.Easing.easingQuarticIn=function(t){return t*t*t*t},r.Easing.easingQuarticOut=function(t){return 1- --t*t*t*t},r.Easing.easingQuarticInOut=function(t){return.5>t?8*t*t*t*t:1-8*--t*t*t*t},r.Easing.easingQuinticIn=function(t){return t*t*t*t*t},r.Easing.easingQuinticOut=function(t){return 1+--t*t*t*t*t},r.Easing.easingQuinticInOut=function(t){return.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t},r.Easing.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},r.Easing.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},r.Easing.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},r.Easing.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},r.Easing.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},r.Easing.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},r.Easing.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},r.Easing.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},r.Easing.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*t*t*((e+1)*t-e):.5*((t-=2)*t*((e+1)*t+e)+2)},r.Easing.easingElasticIn=function(t){var e;return 0===t?0:1===t?1:(!G||1>G?(G=1,e=J/4):e=J*Math.asin(1/G)/U,-(G*Math.pow(2,10*(t-=1))*Math.sin((t-e)*U/J)))},r.Easing.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!G||1>G?(G=1,e=J/4):e=J*Math.asin(1/G)/U,G*Math.pow(2,-10*t)*Math.sin((t-e)*U/J)+1)},r.Easing.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!G||1>G?(G=1,e=J/4):e=J*Math.asin(1/G)/U,(t*=2)<1?-.5*G*Math.pow(2,10*(t-=1))*Math.sin((t-e)*U/J):G*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*U/J)*.5+1)},r.Easing.easingBounceIn=function(t){return 1-r.Easing.easingBounceOut(1-t)},r.Easing.easingBounceOut=function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},r.Easing.easingBounceInOut=function(t){return.5>t?.5*r.Easing.easingBounceIn(2*t):.5*r.Easing.easingBounceOut(2*t-1)+.5},r}); \ No newline at end of file +// tween.js MIT License +!function(){if("performance"in window==!1&&(window.performance={}),Date.now=Date.now||function(){return(new Date).getTime()},"now"in window.performance==!1){var n=window.performance.timing&&window.performance.timing.navigationStart?window.performance.timing.navigationStart:Date.now();window.performance.now=function(){return Date.now()-n}}}();var TWEEN=TWEEN||function(){var n=[];return{getAll:function(){return n},removeAll:function(){n=[]},add:function(t){n.push(t)},remove:function(t){var r=n.indexOf(t);-1!==r&&n.splice(r,1)},update:function(t){if(0===n.length)return!1;var r=0;for(t=void 0!==t?t:window.performance.now();rn;n++)E[n].stop()},this.delay=function(n){return s=n,this},this.repeat=function(n){return e=n,this},this.yoyo=function(n){return a=n,this},this.easing=function(n){return l=n,this},this.interpolation=function(n){return p=n,this},this.chain=function(){return E=arguments,this},this.onStart=function(n){return w=n,this},this.onUpdate=function(n){return M=n,this},this.onComplete=function(n){return v=n,this},this.onStop=function(n){return d=n,this},this.update=function(n){var f,d,m;if(h>n)return!0;I===!1&&(null!==w&&w.call(t),I=!0),d=(n-h)/u,d=d>1?1:d,m=l(d);for(f in i){var g=r[f]||0,T=i[f];T instanceof Array?t[f]=p(T,m):("string"==typeof T&&(T=g+parseFloat(T,10)),"number"==typeof T&&(t[f]=g+(T-g)*m))}if(null!==M&&M.call(t,m),1===d){if(e>0){isFinite(e)&&e--;for(f in o){if("string"==typeof i[f]&&(o[f]=o[f]+parseFloat(i[f],10)),a){var O=o[f];o[f]=i[f],i[f]=O}r[f]=o[f]}return a&&(c=!c),h=n+s,!0}null!==v&&v.call(t);for(var N=0,W=E.length;W>N;N++)E[N].start(h+u);return!1}return!0}},TWEEN.Easing={Linear:{None:function(n){return n}},Quadratic:{In:function(n){return n*n},Out:function(n){return n*(2-n)},InOut:function(n){return(n*=2)<1?.5*n*n:-.5*(--n*(n-2)-1)}},Cubic:{In:function(n){return n*n*n},Out:function(n){return--n*n*n+1},InOut:function(n){return(n*=2)<1?.5*n*n*n:.5*((n-=2)*n*n+2)}},Quartic:{In:function(n){return n*n*n*n},Out:function(n){return 1- --n*n*n*n},InOut:function(n){return(n*=2)<1?.5*n*n*n*n:-.5*((n-=2)*n*n*n-2)}},Quintic:{In:function(n){return n*n*n*n*n},Out:function(n){return--n*n*n*n*n+1},InOut:function(n){return(n*=2)<1?.5*n*n*n*n*n:.5*((n-=2)*n*n*n*n+2)}},Sinusoidal:{In:function(n){return 1-Math.cos(n*Math.PI/2)},Out:function(n){return Math.sin(n*Math.PI/2)},InOut:function(n){return.5*(1-Math.cos(Math.PI*n))}},Exponential:{In:function(n){return 0===n?0:Math.pow(1024,n-1)},Out:function(n){return 1===n?1:1-Math.pow(2,-10*n)},InOut:function(n){return 0===n?0:1===n?1:(n*=2)<1?.5*Math.pow(1024,n-1):.5*(-Math.pow(2,-10*(n-1))+2)}},Circular:{In:function(n){return 1-Math.sqrt(1-n*n)},Out:function(n){return Math.sqrt(1- --n*n)},InOut:function(n){return(n*=2)<1?-.5*(Math.sqrt(1-n*n)-1):.5*(Math.sqrt(1-(n-=2)*n)+1)}},Elastic:{In:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),-(r*Math.pow(2,10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i)))},Out:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),r*Math.pow(2,-10*n)*Math.sin(2*(n-t)*Math.PI/i)+1)},InOut:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),(n*=2)<1?-.5*r*Math.pow(2,10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i):r*Math.pow(2,-10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i)*.5+1)}},Back:{In:function(n){var t=1.70158;return n*n*((t+1)*n-t)},Out:function(n){var t=1.70158;return--n*n*((t+1)*n+t)+1},InOut:function(n){var t=2.5949095;return(n*=2)<1?.5*n*n*((t+1)*n-t):.5*((n-=2)*n*((t+1)*n+t)+2)}},Bounce:{In:function(n){return 1-TWEEN.Easing.Bounce.Out(1-n)},Out:function(n){return 1/2.75>n?7.5625*n*n:2/2.75>n?7.5625*(n-=1.5/2.75)*n+.75:2.5/2.75>n?7.5625*(n-=2.25/2.75)*n+.9375:7.5625*(n-=2.625/2.75)*n+.984375},InOut:function(n){return.5>n?.5*TWEEN.Easing.Bounce.In(2*n):.5*TWEEN.Easing.Bounce.Out(2*n-1)+.5}}},TWEEN.Interpolation={Linear:function(n,t){var r=n.length-1,i=r*t,o=Math.floor(i),u=TWEEN.Interpolation.Utils.Linear;return 0>t?u(n[0],n[1],i):t>1?u(n[r],n[r-1],r-i):u(n[o],n[o+1>r?r:o+1],i-o)},Bezier:function(n,t){for(var r=0,i=n.length-1,o=Math.pow,u=TWEEN.Interpolation.Utils.Bernstein,e=0;i>=e;e++)r+=o(1-t,i-e)*o(t,e)*n[e]*u(i,e);return r},CatmullRom:function(n,t){var r=n.length-1,i=r*t,o=Math.floor(i),u=TWEEN.Interpolation.Utils.CatmullRom;return n[0]===n[r]?(0>t&&(o=Math.floor(i=r*(1+t))),u(n[(o-1+r)%r],n[o],n[(o+1)%r],n[(o+2)%r],i-o)):0>t?n[0]-(u(n[0],n[0],n[1],n[1],-i)-n[0]):t>1?n[r]-(u(n[r],n[r],n[r-1],n[r-1],i-r)-n[r]):u(n[o?o-1:0],n[o],n[o+1>r?r:o+1],n[o+2>r?r:o+2],i-o)},Utils:{Linear:function(n,t,r){return(t-n)*r+n},Bernstein:function(n,t){var r=TWEEN.Interpolation.Utils.Factorial;return r(n)/r(t)/r(n-t)},Factorial:function(){var n=[1];return function(t){var r=1;if(n[t])return n[t];for(var i=t;i>1;i--)r*=i;return n[t]=r,r}}(),CatmullRom:function(n,t,r,i,o){var u=.5*(r-n),e=.5*(i-t),a=o*o,f=o*a;return(2*t-2*r+u+e)*f+(-3*t+3*r-2*u-e)*a+u*o+t}}},function(n){"function"==typeof define&&define.amd?define([],function(){return TWEEN}):"object"==typeof exports?module.exports=TWEEN:n.TWEEN=TWEEN}(this); \ No newline at end of file diff --git a/performance.html b/performance.html index af5cc39..874d6a3 100644 --- a/performance.html +++ b/performance.html @@ -125,7 +125,7 @@ - + From 74f35db07ccab2efd01e7253e81d4290475f6ef6 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 26 Oct 2015 08:36:48 +0200 Subject: [PATCH 025/187] --- examples.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples.html b/examples.html index 3a2c981..4a5e09a 100644 --- a/examples.html +++ b/examples.html @@ -332,7 +332,7 @@ KUTE.to('window',{scroll:450}).start(); // for the window

Cross Browser Animation Example

-

Unlike the examples hosted on Codepen, 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, first check your HTML template to have the browser detection for IE8-IE9, then check to have the polyfills and also make sure you target your browsers, here's a complete reference. Now we are ready: +

Unlike the examples hosted on Codepen, 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, first check your HTML template to have the browser detection for IE8-IE9, then check to have the polyfills and also make sure you target your browsers, here's a complete reference. In some cases you may not have access to the HTML tag, here's a work around. Now we are ready:

Collect Information And Cache It

// grab an HTML element to build a tween object for it 
@@ -425,7 +425,7 @@ playPauseButton.addEventListener('click', function(e){
 				Stop
 			
 		
-		
Let's explain this code a bit. KUTE.js comes gives you the internal variables myTween.playing and myTween.paused (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.

+		
Let's explain this code a bit. KUTE.js gives you the internal variables myTween.playing and myTween.paused (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.

 		
    
 			
  • the START button will use the .start() method and the animation starts;
    • 
 			
  • the STOP button will use the .stop() method and stops the animation; after this the, animation can only be started again
    • 
@@ -467,4 +467,4 @@ playPauseButton.addEventListener('click', function(e){
  
  
 
-
+
\ No newline at end of file

From af586124917a3c6f8126becd657e9a101a5aaf43 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 26 Oct 2015 12:04:54 +0200
Subject: [PATCH 026/187]

---
 about.html            |    3 +-
 api.html              |   29 +-
 assets/js/examples.js |    9 +-
 examples.html         |   16 +-
 features.html         |    6 +-
 index.html            |    2 +-
 performance.html      |   17 +-
 src/kute.js           | 1710 ++++++++++++++++++++---------------------
 8 files changed, 891 insertions(+), 901 deletions(-)

diff --git a/about.html b/about.html
index 907e3f0..14260ed 100644
--- a/about.html
+++ b/about.html
@@ -24,8 +24,7 @@
 
 	
     
-	
-	
+
 
 
 
diff --git a/api.html b/api.html
index 08df62d..669f026 100644
--- a/api.html
+++ b/api.html
@@ -31,7 +31,7 @@
 	
 	
 	
@@ -77,30 +77,9 @@ $ bower install --save kute.js

Your awesome animation coding would follow after these script links.

-

Ideal HTML Template

-

You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers can actually do. A quick note here: IE8 doesn't support any transform property or RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more information.

-

Don't use Modernizr, the best thing we can actually do is use the Microsoft's synthax for it's own legacy browsers, so here's how a very basic HTML template for your websites would look like:

-
<!DOCTYPE html>
-	<!--[if lt IE 8]><html class="ie prehistory" 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">				
-		<!-- SEO meta here  -->					
-		<!-- add your CSS here  -->				
-		<!-- add polyfills  -->
-		<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script>
-	</head>					
-	<body>
-		<!-- site content here -->	
-		<!-- scripts go here -->				
-	</body>
-</html>
-
-

For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.

+

Targeting Legacy Browsers

+

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 transform property or RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more information.

+

Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and here is the full refference on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.

diff --git a/assets/js/examples.js b/assets/js/examples.js index 5d3482c..731ec99 100644 --- a/assets/js/examples.js +++ b/assets/js/examples.js @@ -1,7 +1,8 @@ // some regular checking -var isIE = /ie/.test(document.documentElement.className), - isIE8 = /ie8/.test(document.documentElement.className), - isIE9 = /ie9/.test(document.documentElement.className); +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 */ @@ -287,7 +288,7 @@ var element = document.getElementById("myElement"); var startValues = {}, endValues = {}, options = {}; // here we define properties that are commonly supported -startValues.opacity = 1; endValues.opacity = 0.5; +startValues.opacity = 1; endValues.opacity = 0.1; startValues.backgroundColor = '#ffd626'; endValues.backgroundColor = '#ec1e71'; // here we define the properties according to the target browsers diff --git a/examples.html b/examples.html index 4a5e09a..c9f4ba3 100644 --- a/examples.html +++ b/examples.html @@ -31,7 +31,7 @@ @@ -332,15 +332,17 @@ KUTE.to('window',{scroll:450}).start(); // for the window

Cross Browser Animation Example

-

Unlike the examples hosted on Codepen, 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, first check your HTML template to have the browser detection for IE8-IE9, then check to have the polyfills and also make sure you target your browsers, here's a complete reference. In some cases you may not have access to the HTML tag, here's a work around. Now we are ready: +

Unlike the examples hosted on Codepen, 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 complete reference. Now we are ready:

Collect Information And Cache It

// grab an HTML element to build a tween object for it 
 var element = document.getElementById("myElement");
 
 // check for IE legacy browsers
-var isIE8 = /ie8/.test(document.documentElement.className);
-var isIE9 = /ie9/.test(document.documentElement.className);
+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
@@ -354,7 +356,7 @@ var options = {};
 
 // here we define properties that are commonly supported
 startValues.opacity = 1;
-endValues.opacity = 0.5;
+endValues.opacity = 0.2;
 startValues.backgroundColor = '#CDDC39'; 
 endValues.backgroundColor = '#ec1e71';
 
@@ -383,7 +385,9 @@ if (isIE8) { // or any other browser that doesn"t support transforms
 
 // common tween options
 options.easing = "easingCubicOut";
-options.duration = 2500; 	
+options.duration = 2500;
+options.yoyo = true;
+options.repeat = 1;

Build Tween Object And Tween Controls

diff --git a/features.html b/features.html index 3f62292..a18b726 100644 --- a/features.html +++ b/features.html @@ -3,7 +3,7 @@ - + @@ -28,7 +28,7 @@ @@ -69,7 +69,7 @@

Browser Compatibility

KUTE.js covers all modern browsers but also provides fallback options for legacy browsers. The prefix free feature mentioned above is one way to enable smooth Javascript based animations on older versions Gecko/Webkit/IE browsers for transform and border-radius. Generally, KUTE.js is built around most used properties, so I highly recommend checking the can I use website for a very detailed properties support list on many browsers and versions. For instance legacy browsers may support 2D transforms or 3D transforms so make sure you know what browsers support and how to target them before you get to work with a complete browser supported animation setup.

-

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 polyfills and an appropriate HTML template. 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 transition.

+

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 polyfills 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 transition.

Speaking of polyfills, KUTE.js requires window.requestAnimationFrame() for the main thread, window.performance.now() for checking the current time, .indexOf() for array checks, window.getComputedStyle() for the .to() method and .addEventListener() 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 polyfill service some browser detection will not work because they fill the gap and your code won't work as expected. For instance this would check for IE8 browser var isIE = document.all && !document.addEventListener; but the polyfill covers .addEventListener() so you will never succeed. The provided ideal HTML template is the best solution for targeting Microsoft's legacy browsers.

As of Safari, we did some tests there too, KUTE.js does it really well.

diff --git a/index.html b/index.html index 175c3c2..451c67a 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ diff --git a/performance.html b/performance.html index 874d6a3..af3238a 100644 --- a/performance.html +++ b/performance.html @@ -108,11 +108,14 @@
- + + +

These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, here's how.

The hack refers to adding a blank transform translate3d(0px,0px,0px); for the elements to promote them into separate layers, as described here.

Do not try this test on lower end or mobile devices.

- + +
@@ -123,10 +126,14 @@ ================================================== --> + + + - - - + + + + diff --git a/src/kute.js b/src/kute.js index c9e5019..04a78fa 100644 --- a/src/kute.js +++ b/src/kute.js @@ -1,855 +1,855 @@ -/* KUTE.js - The Light Tweening Engine - * by dnp_theme - * Licensed under MIT-License - */ - -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - define(['KUTE'], factory); // AMD. Register as an anonymous module. - } else if (typeof exports == 'object') { - module.exports = factory(); // Node, not strict CommonJS - } else { - // Browser globals - root.KUTE = root.KUTE || factory(); - } -}(this, function () { - var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick, - _pf = getPrefix(), // prefix - _rafR = _rafR || ((!('requestAnimationFrame' in window)) ? true : false), // is prefix required for requestAnimationFrame - _pfT = _pfT || ((!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for transform - _pfB = _pfB || ((!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for border-radius - _tch = _tch || (('ontouchstart' in window || navigator.msMaxTouchPoints) || false), // support Touch? - _ev = _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 = /ie/.test(document.documentElement.className), - _isIE8 = /ie8/.test(document.documentElement.className), - - //assign preffix to DOM properties - _pfp = _pfp || _pfT ? _pf + 'Perspective' : 'perspective', - _pfo = _pfo || _pfT ? _pf + 'PerspectiveOrigin' : 'perspectiveOrigin', - _tr = _tr || _pfT ? _pf + 'Transform' : 'transform', - _br = _br || _pfB ? _pf + 'BorderRadius' : 'borderRadius', - _brtl = _brtl || _pfB ? _pf + 'BorderTopLeftRadius' : 'borderTopLeftRadius', - _brtr = _brtr || _pfB ? _pf + 'BorderTopRightRadius' : 'borderTopRightRadius', - _brbl = _brbl || _pfB ? _pf + 'BorderBottomLeftRadius' : 'borderBottomLeftRadius', - _brbr = _brbr || _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius', - _raf = _raf || _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'], - _caf = _caf || _rafR ? window[_pf + 'CancelAnimationFrame'] : 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; - } - } - - //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); - } - }; - - // internal ticker - K.t = function (t) { - _t = _raf(K.t); - var i = 0, l = _tws.length; - while ( i < l ) { - if (!_tws[i]) { return false; } - if (_tws[i].u(t)) { - i++; - } else { - _tws.splice(i, 1); - } - } - _stk = false; - return true; - }; - - // internal stopTick - K.s = function () { - if ( _stk === false ) { - _caf(_t); - _stk = true; - _t = null; - } - }; - - //main methods - K.to = function (el, to, o) { - if ( o === undefined ) { o = {}; } - var _el = _el || typeof el === 'object' ? el : document.querySelector(el), - _o = _o || o; - _o.rpr = true; - _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; - - var _vS = to, // we're gonna have to build this object at start - _vE = K.prP(to, true), - _tw = new K.Tween(_el, _vS, _vE, _o); - return _tw; - }; - - K.fromTo = function (el, f, to, o) { - if ( o === undefined ) { o = {}; } - var _el = _el || typeof el === 'object' ? el : document.querySelector(el); - var _o = o; - - _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; - - var _vS = K.prP(f, false), - _vE = K.prP(to, true), - _tw = new K.Tween(_el, _vS, _vE, _o); - return _tw; - }; - // fallback method for previous versions - K.Animate = function (el, f, to, o) { - return K.fromTo(el, f, to, o); - }; - - // render for each property - K.r = function (w,v) { - var p, css = w._el && w._el.style, opp = _isIE8 ? 'filter':'opacity', - ets = (w._el === undefined || w._el === null) ? _sct : w._el; - for (p in w._vE) { - - var _start = w._vS[p], - _end = w._vE[p], - v1 = _start.value, - v2 = _end.value, - tv = v1 + (v2 - v1) * v, - u = _end.unit, - // checking array on every frame takes time so let's cache these - cls = _cls.indexOf(p) !== -1, - bm = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1, - rd = _rd.indexOf(p) !== -1 && !_isIE8, - sc = _sc.indexOf(p) !== -1, - bg = _bg.indexOf(p) !== -1, - clp = _clp.indexOf(p) !== -1, - op = _op.indexOf(p) !== -1, - tf = p === 'transform' && !_isIE8; - - //process styles by property / property type - if ( rd ) { - if (p === 'borderRadius') { - css[_br] = tv + u; - } else if (p === 'borderTopLeftRadius') { - css[_brtl] = tv + u; - } else if (p === 'borderTopRightRadius') { - css[_brtr] = tv + u; - } else if (p === 'borderBottomLeftRadius') { - css[_brbl] = tv + u; - } else if (p === 'borderBottomRightRadius') { - css[_brbr] = tv + u; - } - - } else if (tf) { - var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) '; //transform style & property - - for (tP in _end) { - var t1 = _start[tP], t2 = _end[tP]; - 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); - } - } - css[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS; - } else if ( cls ) { - var _c = {}, c; - - for (c in v2) { - if ( c !== 'a' ){ - _c[c] = parseInt(v1[c] + (v2[c] - v1[c]) * v)||0; - } else { - _c[c] = (v1[c] && v2[c]) ? parseFloat(v1[c] + (v2[c] - v1[c]) * v) : null; - } - } - - if ( w._hex ) { - css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) ); - } else { - css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')'; - } - } else if ( bm ) { - css[p] = tv+u; - } else if ( sc ) { - ets.scrollTop = v1 + ( v2 - v1 ) * v; - } else if ( bg ) { - var px1 = _start.x.v, px2 = _end.x.v, py1 = _start.y.v, py2 = _end.y.v, - px = (px1 + ( px2 - px1 ) * v), pxu = '%', - py = (py1 + ( py2 - py1 ) * v), pyu = '%'; - css[p] = px + pxu + ' ' + py + pyu; - } else if ( clp ) { - var h = 0, cl = []; - for (h;h<4;h++){ - var c1 = _start[h].v, c2 = _end[h].v, cu = _end[h].u || 'px'; - cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu; - } - css[p] = 'rect('+cl+')'; - } else if ( op ) { - css[opp] = !_isIE8 ? tv : "alpha(opacity=" + parseInt(tv*100) + ")"; - } - } - }; - - K.perspective = function (l,w) { - 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 - }; - - K.Tween = function (_el, _vS, _vE, _o) { - this._el = this._el || _el; // element animation is applied to - this._dr = this._dr || _o&&_o.duration || 700; //duration - this._r = this._r || _o&&_o.repeat || 0; // _repeat - this._vSR = {}; // internal valuesStartRepeat - this._vS = _vS; // valuesStart - this._vE = _vE; // valuesEnd - this._y = this._y || _o&&_o.yoyo || false; // _yoyo - this.playing = false; // _isPlaying - this.reversed = false; // _reversed - this._rD = this._rD || _o&&_o.repeatDelay || 0; // _repeatDelay - this._dl = this._dl || _o&&_o.delay || 0; //delay - this._sT = null; // startTime - this.paused = false; //_paused - this._pST = null; //_pauseStartTime - this._pp = this._pp || _o.perspective; // perspective - this._ppo = this._ppo || _o.perspectiveOrigin; // perspective origin - this._ppp = this._ppp || _o.parentPerspective; // parent perspective - this._pppo = this._pppo || _o.parentPerspectiveOrigin; // parent perspective origin - this._rpr = this._rpr || _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false - this._hex = this._hex || _o.keepHex || false; // option to keep hex for color tweens true/false - this._e = this._e || _o.easing; // _easing - this._cT = this._cT || []; //_chainedTweens - this._sC = 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 - }; - - var w = K.Tween.prototype; - - w.start = function (t) { - this.scrollIn(); - var f = {}; - - K.perspective(this._el,this); // apply the perspective - - if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method - f = this.prS(); - this._vS = {}; - this._vS = K.prP(f,false); - - for ( 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 spp in this._vS[p][sp] ) { // scale - if (!(spp in this._vE[p][sp])) { - this._vE[p][sp][spp] = this._vS[p][sp][spp]; // spp = unit | value - } - } - } - } - } - } - } - - for ( p in this._vE ) { - this._vSR[p] = this._vS[p]; - } - - // now it's a good time to start - K.add(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; - }; - - //main worker, doing update on tick - w.u = function(t) { - t = t || window.performance.now(); - if (t < this._sT && this.playing && !this.paused) { return true; } - - if (!this._sCF) { - if (this._sC) { this._sC.call(); } - this._sCF = true; - } - - var e = ( t - this._sT ) / this._dr; //elapsed - e = e > 1 ? 1 : e; - - //render the CSS update - K.r(this,this._e(e)); - - if (this._uC) { this._uC.call(); } - - if (e === 1) { - if (this._r > 0) { - if ( this._r !== Infinity ) { this._r--; } - - if (this._y) { this.reversed = !this.reversed; this.reverse(); } // handle yoyo - - this._sT = (this._y && !this.reversed) ? t + this._rD : t; //set the right time for delay - return true; - } else { - - if (this._cC) { this._cC.call(); } - - //stop preventing scroll when scroll tween finished - this.scrollOut(); - var i = 0, ctl = this._cT.length; - for (i; i < ctl; i++) { - this._cT[i].start(this._sT + this._dr); - } - - //stop ticking when finished - this.close(); - return false; - } - } - return true; - }; - - 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 = 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.resume = function () { this.play(); 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]; - } - } - return this; - }; - - 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); - }; - - w.prS = function () { //prepare valuesStart for .to() method - 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 0) { self._r = self.repeat; } - if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; } - self.playing = false; - },100) - }; - - // 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 1 ? 1 : e; + + //render the CSS update + K.r(this,this._e(e)); + + if (this._uC) { this._uC.call(); } + + if (e === 1) { + if (this._r > 0) { + if ( this._r !== Infinity ) { this._r--; } + + if (this._y) { this.reversed = !this.reversed; this.reverse(); } // handle yoyo + + this._sT = (this._y && !this.reversed) ? t + this._rD : t; //set the right time for delay + return true; + } else { + + if (this._cC) { this._cC.call(); } + + //stop preventing scroll when scroll tween finished + this.scrollOut(); + var i = 0, ctl = this._cT.length; + for (i; i < ctl; i++) { + this._cT[i].start(this._sT + this._dr); + } + + //stop ticking when finished + this.close(); + return false; + } + } + return true; + }; + + 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 = 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.resume = function () { this.play(); 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]; + } + } + return this; + }; + + 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); + }; + + w.prS = function () { //prepare valuesStart for .to() method + 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 0) { self._r = self.repeat; } + if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; } + self.playing = false; + },100) + }; + + // 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 Date: Mon, 26 Oct 2015 13:04:58 +0200 Subject: [PATCH 027/187] --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 451c67a..7bace66 100644 --- a/index.html +++ b/index.html @@ -104,7 +104,7 @@

All Browsers Compatible

-

KUTE.js covers all modern browsers with fallback options for legacy browsers. When using polyfills and the provided demo HTML templates you can manage all kinds of fallback animations for legacy browsers.

+

KUTE.js covers all modern browsers with fallback options for legacy browsers. When using polyfills and the right browser detection you can manage all kinds of fallback animations for legacy browsers.

Powerful Methods

From 6943b0c7e8a36a86e97790664125b7c4439c520c Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 30 Dec 2015 01:51:22 +0200 Subject: [PATCH 028/187] Update api.html --- api.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/api.html b/api.html index 669f026..a8ce17e 100644 --- a/api.html +++ b/api.html @@ -68,12 +68,12 @@ $ bower install --save kute.js

Websites

In your website add the following code, the best would be to put it at the end of your body tag:

-
<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> <!-- core KUTE.js -->
+
<script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute.min.js"></script> <!-- core KUTE.js -->

Also you can include the tools that you need for your project:

-
<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
-<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
+
<script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
 

 		
Your awesome animation coding would follow after these script links.
		
 		
@@ -334,7 +334,7 @@ easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]}
 
 	
 
-
+
 
  
  

From 9fa0b5a3288f10fe0cc58e6aa931d7494ccdab8e Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 18 Feb 2016 20:44:34 +0200
Subject: [PATCH 029/187] Create kute.js

---
 src/tmp/kute.js | 808 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 808 insertions(+)
 create mode 100644 src/tmp/kute.js

diff --git a/src/tmp/kute.js b/src/tmp/kute.js
new file mode 100644
index 0000000..076793c
--- /dev/null
+++ b/src/tmp/kute.js
@@ -0,0 +1,808 @@
+/* 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 || {};
+  K.getPrefix = function() { //returns browser prefix
+    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;
+  }
+  
+  // prefix handling
+  var _pf = K.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
+    _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch?
+    _ev = _tch ? 'touchstart' : 'mousewheel', //event to prevent on scroll
+    //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',
+    _raf = _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'],
+    _caf = _rafR ? (window[_pf + 'CancelAnimationFrame'] || window[_pf + 'CancelRequestAnimationFrame']) : window['cancelAnimationFrame'],
+
+    //true scroll container
+    _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
+
+    //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
+    _op  = ['opacity'], // opacity
+    _bm  = ['top', 'left', 'width', 'height'], // dimensions / box model
+    _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, _op, _bm, _tf), al = _all.length,
+    _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 ( _bm.indexOf(p) !== -1 ) {
+      _d[p] = 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)[0]; o = o || {}; o.rpr = true;  // we're gonna have to build _vS object at start   
+    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, to)[0], _vE = K.prP(f, to)[1]; 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.TweensTO(_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); 
+  };
+
+  // the tweens array and tick ID
+  K._tws = []; K._t = null; 
+  
+  // render functions
+  K.dom = {};
+  K._u = function(w,t) {
+    t = t || window.performance.now();
+    if (t < w._sT && w.playing && !w.paused) { return true; }
+
+    var p, e = Math.min(( t - w._sT ) / w._dr,1);
+    
+    //render the CSS update
+    for (p in w._vE){
+      K.dom[p](w,p,w._e(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;
+  };
+  
+  // internal ticker
+  K._tk = function (t) {
+    var i = 0, tl; 
+    K._t = _raf(K._tk);
+    while ( i < (tl = K._tws.length) ) {
+      if ( K._u(K._tws[i],t) ) {
+        i++;
+      } else {
+        K._tws.splice(i, 1);
+      }
+    }
+  };
+  
+  // 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 K._tws; };
+  K.removeAll = function () {  K._tws = []; };
+  K.add = function (tw) {  K._tws.push(tw); };
+  K.remove = function (tw) {
+    var i = K._tws.indexOf(tw);
+    if (i !== -1) {
+      K._tws.splice(i, 1);
+    }
+  };  
+  K.s = function () { _caf(K._t);  K._t = null; }; 
+  
+  // register functions for the render object K.dom(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 = _bm.indexOf(p) !== -1,
+        sc = _sc.indexOf(p) !== -1,
+        op = _op.indexOf(p) !== -1,
+        tf = p === 'transform';
+        
+      //process styles by property / property type
+      if ( bm && (!(p in K.dom)) ) {
+        K.dom[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 (tf && (!(p in K.dom)) ) {
+
+        K.dom[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.dom)) ) {
+        K.dom[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( _c.r, _c.g, _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.dom)) ) {
+        K.dom[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 ( op && (!(p in K.dom)) ) {
+        if (_isIE8) {
+          K.dom[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.dom[p] = function(w,p,v) {
+            w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
+          };
+        }
+      }
+    }
+  };
+    
+  // process properties for _vE and _vS or one of them
+  K.prP = function (e, s) {
+    var i, pl = arguments.length, _st = [], kp = K.pp; 
+    
+    for (i=0; i 0) { self._r = self.repeat; }
+      if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; }
+      self.playing = false;
+    },64)
+  };
+
+  // the multi elements Tween constructs
+  K.TweensTO = 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.TweensTO.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.chain = function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; }
+  ws.play = ws.resume = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; }
+
+  return K;
+}));

From a6534763af0d6ec414b434b4a9770925e09edb7f Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 18 Feb 2016 20:46:32 +0200
Subject: [PATCH 030/187] Create kute-svg.js

---
 src/tmp/kute-svg.js | 859 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 859 insertions(+)
 create mode 100644 src/tmp/kute-svg.js

diff --git a/src/tmp/kute-svg.js b/src/tmp/kute-svg.js
new file mode 100644
index 0000000..0f35cd7
--- /dev/null
+++ b/src/tmp/kute-svg.js
@@ -0,0 +1,859 @@
+(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.svg = window.KUTE.svg || factory(KUTE);
+  } else {
+    throw new Error("SVG Plugin require KUTE.js.");
+  }
+}( function (KUTE) {
+  'use strict';
+  var K = window.KUTE, S = S || {}, 
+      p2s=/,?([a-z]),?/gi,
+      _unl = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // unitless SVG props;
+      _cls = ['fill', 'stroke', 'stopColor']; // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
+
+  // get path
+  S.getPath = function(e){
+    var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null;
+    if ( el && /path|glyph/.test(el.tagName) ) {
+      p.e = el;
+      p.o = el.getAttribute('d');
+
+    } else if (!el && /m|z|c|l|v|q|[0-9]|\,/gi.test(e)) { // maybe it's a string path already
+      el = document.querySelector('[d="'+e+'"]');
+      var newp = document.createElement('path'); 
+      newp.setAttribute('d',e);
+      p.e = el || newp;
+      p.o = e;
+    }
+    return p;
+  }
+
+  
+  // process path now
+  S.pathCross = function(w){
+    var o1 = w._vS.path.o, o2 = w._vE.path.o,
+      p1 = pathMulti(o1), p2 = pathMulti(o2), t, b1, b2;
+
+    w._vS.path.d = {}; w._vE.path.d = {};  
+    if ( typeof p1 === 'object' || typeof p2 === 'object' ) {
+      if (typeof p1 === 'object' && typeof p2 === 'string') {
+
+        t = clone(p2);  p2 = {}; b2 = curvePathBBox(path2curve(t));
+        for (var i in p1) {
+          // if (i*1 === 0) {
+            p2[i] = t;           
+          // } else {
+          //   p2[i] = (i*1) % 2 ? 'M'+b2.cx+' '+b2.cy+ +'l0 0' : 'M'+b2.x+' '+b2.y +'l0 0';
+          // }
+        }
+
+      } else if (typeof p1 === 'string' && typeof p2 === 'object') {
+        t = clone(p1); p1 = {}; b1 = curvePathBBox(path2curve(t));
+        for (var i in p2) {
+          // if (i*1 === 0) {
+            p1[i] = t; // perhaps in the future do something about the corresponding shape
+          // } else {
+          //   p1[i] = (i*1) % 2 ? 'M'+b1.cx+' '+b1.cy+ +'l0 0' : 'M'+b1.x+' '+b1.y +'l0 0';
+          // } 
+        }
+
+      } else if (typeof p1 === 'object' && typeof p2 === 'object') {
+        var pl1 = oKeys(p1).length, pl2 = oKeys(p2).length, s1, s2;
+        
+        if (pl1 > pl2) {
+          for (var i in p1){
+            if (!(i in p2)) {
+              s2 = getBSBox(p2,i);
+              b2 = curvePathBBox(path2curve(p2[s2]));
+              // p2[i] = p2[s2]; // or get the biggest/smalles shape
+              p2[i] = (i*1) % 2 ? 'M'+b2.cx+' '+b2.cy+ +'l0 0' : 'M'+b2.x+' '+b2.y +'l0 0';
+            }
+          }
+
+        } else if (pl1 2) {
+      for (var i = 0; i< a.length; i++) { trm(a[i].replace(/\n/,'')); if ( !/[0-9a-z]/gi.test(a[i]) ) { a.splice(i,1) } }
+      path = {};
+      for (var i=0, l=a.length; i .5) {
+      var before,
+          after,
+          beforeLength,
+          afterLength,
+          beforeDistance,
+          afterDistance;
+      if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
+        best = before, bestLength = beforeLength, bestDistance = beforeDistance;
+      } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
+        best = after, bestLength = afterLength, bestDistance = afterDistance;
+      } else {
+        precision *= .5;
+      }
+    }
+    best = [best.x, best.y];
+    best.distance = Math.sqrt(bestDistance);
+    return best;
+    function distance2(p) {
+      var dx = p.x - point[0],
+          dy = p.y - point[1];
+      return dx * dx + dy * dy;
+    }
+  }
+  
+  // K.dom[p] = function(w,p,v) { // for SVG unitless related CSS props
+  //   w._el.style[p] = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
+  // };
+
+  
+
+  /*
+  * Paths
+  */
+
+  var spaces = "\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029";
+  var pathCommand = new RegExp("([a-z])[" + spaces + ",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?[" + spaces + "]*,?[" + spaces + "]*)+)", "ig");
+  var pathValues = new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[" + spaces + "]*,?[" + spaces + "]*", "ig");
+
+  
+  // Parses given path string into an array of arrays of path segments
+  function parsePathString(pathString) {
+    if (!pathString) {
+      return null;
+    }
+
+    if( pathString instanceof Array ) {
+      return pathString;
+    } else {
+      var paramCounts = {a: 7, c: 6, o: 2, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, u: 3, z: 0},
+          data = [];
+
+      String(pathString).replace(pathCommand, function(a, b, c) {
+        var params = [],
+            name = b.toLowerCase();
+        c.replace(pathValues, function (a, b) {
+          b && params.push(+b);
+        });
+        if (name == "m" && params.length > 2) {
+          data.push([b].concat(params.splice(0, 2)));
+          name = "l";
+          b = b == "m" ? "l" : "L";
+        }
+        if (name == "o" && params.length == 1) {
+          data.push([b, params[0]]);
+        }
+        if (name == "r") {
+          data.push([b].concat(params));
+        } else while (params.length >= paramCounts[name]) {
+          data.push([b].concat(params.splice(0, paramCounts[name])));
+          if (!paramCounts[name]) {
+            break;
+          }
+        }
+      });
+
+      return data;
+    }
+  };
+
+
+  // http://schepers.cc/getting-to-the-point
+  function catmullRom2bezier(crp, z) {
+    var d = [];
+    for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
+      var p = [
+                {x: +crp[i - 2], y: +crp[i - 1]},
+                {x: +crp[i],     y: +crp[i + 1]},
+                {x: +crp[i + 2], y: +crp[i + 3]},
+                {x: +crp[i + 4], y: +crp[i + 5]}
+              ];
+      if (z) {
+        if (!i) {
+          p[0] = {x: +crp[iLen - 2], y: +crp[iLen - 1]};
+        } else if (iLen - 4 == i) {
+          p[3] = {x: +crp[0], y: +crp[1]};
+        } else if (iLen - 2 == i) {
+          p[2] = {x: +crp[0], y: +crp[1]};
+          p[3] = {x: +crp[2], y: +crp[3]};
+        }
+      } else {
+        if (iLen - 4 == i) {
+          p[3] = p[2];
+        } else if (!i) {
+          p[0] = {x: +crp[i], y: +crp[i + 1]};
+        }
+      }
+      d.push(["C",
+            (-p[0].x + 6 * p[1].x + p[2].x) / 6,
+            (-p[0].y + 6 * p[1].y + p[2].y) / 6,
+            (p[1].x + 6 * p[2].x - p[3].x) / 6,
+            (p[1].y + 6*p[2].y - p[3].y) / 6,
+            p[2].x,
+            p[2].y
+      ]);
+    }
+
+    return d;
+
+  };
+
+  function ellipsePath(x, y, rx, ry, a) {
+    if (a == null && ry == null) {
+      ry = rx;
+    }
+    x = +x;
+    y = +y;
+    rx = +rx;
+    ry = +ry;
+    if (a != null) {
+      var rad = Math.PI / 180,
+          x1 = x + rx * Math.cos(-ry * rad),
+          x2 = x + rx * Math.cos(-a * rad),
+          y1 = y + rx * Math.sin(-ry * rad),
+          y2 = y + rx * Math.sin(-a * rad),
+          res = [["M", x1, y1], ["A", rx, rx, 0, +(a - ry > 180), 0, x2, y2]];
+    } else {
+      res = [
+          ["M", x, y],
+          ["m", 0, -ry],
+          ["a", rx, ry, 0, 1, 1, 0, 2 * ry],
+          ["a", rx, ry, 0, 1, 1, 0, -2 * ry],
+          ["z"]
+      ];
+    }
+    return res;
+  };
+
+  function pathToAbsolute(pathArray) {
+    pathArray = parsePathString(pathArray);
+
+    if (!pathArray || !pathArray.length) {
+      return [["M", 0, 0]];
+    }
+    var res = [],
+        x = 0,
+        y = 0,
+        mx = 0,
+        my = 0,
+        start = 0,
+        pa0;
+    if (pathArray[0][0] == "M") {
+      x = +pathArray[0][1];
+      y = +pathArray[0][2];
+      mx = x;
+      my = y;
+      start++;
+      res[0] = ["M", x, y];
+    }
+    var crz = pathArray.length == 3 &&
+        pathArray[0][0] == "M" &&
+        pathArray[1][0].toUpperCase() == "R" &&
+        pathArray[2][0].toUpperCase() == "Z";
+    for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) {
+      res.push(r = []);
+      pa = pathArray[i];
+      pa0 = pa[0];
+      if (pa0 != pa0.toUpperCase()) {
+        r[0] = pa0.toUpperCase();
+        switch (r[0]) {
+          case "A":
+            r[1] = pa[1];
+            r[2] = pa[2];
+            r[3] = pa[3];
+            r[4] = pa[4];
+            r[5] = pa[5];
+            r[6] = +pa[6] + x;
+            r[7] = +pa[7] + y;
+            break;
+          case "V":
+            r[1] = +pa[1] + y;
+            break;
+          case "H":
+            r[1] = +pa[1] + x;
+            break;
+          case "R":
+            var dots = [x, y].concat(pa.slice(1));
+            for (var j = 2, jj = dots.length; j < jj; j++) {
+              dots[j] = +dots[j] + x;
+              dots[++j] = +dots[j] + y;
+            }
+            res.pop();
+            res = res.concat(catmullRom2bezier(dots, crz));
+            break;
+          case "O":
+            res.pop();
+            dots = ellipsePath(x, y, pa[1], pa[2]);
+            dots.push(dots[0]);
+            res = res.concat(dots);
+            break;
+          case "U":
+            res.pop();
+            res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3]));
+            r = ["U"].concat(res[res.length - 1].slice(-2));
+            break;
+          case "M":
+            mx = +pa[1] + x;
+            my = +pa[2] + y;
+          default:
+            for (j = 1, jj = pa.length; j < jj; j++) {
+              r[j] = +pa[j] + ((j % 2) ? x : y);
+            }
+        }
+      } else if (pa0 == "R") {
+        dots = [x, y].concat(pa.slice(1));
+        res.pop();
+        res = res.concat(catmullRom2bezier(dots, crz));
+        r = ["R"].concat(pa.slice(-2));
+      } else if (pa0 == "O") {
+        res.pop();
+        dots = ellipsePath(x, y, pa[1], pa[2]);
+        dots.push(dots[0]);
+        res = res.concat(dots);
+      } else if (pa0 == "U") {
+        res.pop();
+        res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3]));
+        r = ["U"].concat(res[res.length - 1].slice(-2));
+      } else {
+        for (var k = 0, kk = pa.length; k < kk; k++) {
+          r[k] = pa[k];
+        }
+      }
+      pa0 = pa0.toUpperCase();
+      if (pa0 != "O") {
+        switch (r[0]) {
+          case "Z":
+            x = +mx;
+            y = +my;
+            break;
+          case "H":
+            x = r[1];
+            break;
+          case "V":
+            y = r[1];
+            break;
+          case "M":
+            mx = r[r.length - 2];
+            my = r[r.length - 1];
+          default:
+            x = r[r.length - 2];
+            y = r[r.length - 1];
+        }
+      }
+    }
+
+    return res;
+  };
+
+
+  function l2c(x1, y1, x2, y2) {
+    return [x1, y1, x2, y2, x2, y2];
+  };
+  function q2c(x1, y1, ax, ay, x2, y2) {
+    var _13 = 1 / 3,
+        _23 = 2 / 3;
+    return [
+            _13 * x1 + _23 * ax,
+            _13 * y1 + _23 * ay,
+            _13 * x2 + _23 * ax,
+            _13 * y2 + _23 * ay,
+            x2,
+            y2
+        ];
+  };
+  function a2c(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
+    // for more information of where this math came from visit:
+    // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
+    var _120 = Math.PI * 120 / 180,
+        rad = Math.PI / 180 * (+angle || 0),
+        res = [],
+        xy,
+        rotate = function (x, y, rad) {
+            var X = x * Math.cos(rad) - y * Math.sin(rad),
+                Y = x * Math.sin(rad) + y * Math.cos(rad);
+            return {x: X, y: Y};
+        };
+    if (!recursive) {
+      xy = rotate(x1, y1, -rad);
+      x1 = xy.x;
+      y1 = xy.y;
+      xy = rotate(x2, y2, -rad);
+      x2 = xy.x;
+      y2 = xy.y;
+      var cos = Math.cos(Math.PI / 180 * angle),
+          sin = Math.sin(Math.PI / 180 * angle),
+          x = (x1 - x2) / 2,
+          y = (y1 - y2) / 2;
+      var h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
+      if (h > 1) {
+        h = Math.sqrt(h);
+        rx = h * rx;
+        ry = h * ry;
+      }
+      var rx2 = rx * rx,
+          ry2 = ry * ry,
+          k = (large_arc_flag == sweep_flag ? -1 : 1) *
+              Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x))),
+          cx = k * rx * y / ry + (x1 + x2) / 2,
+          cy = k * -ry * x / rx + (y1 + y2) / 2,
+          f1 = Math.asin(((y1 - cy) / ry).toFixed(9)),
+          f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
+
+      f1 = x1 < cx ? Math.PI - f1 : f1;
+      f2 = x2 < cx ? Math.PI - f2 : f2;
+      f1 < 0 && (f1 = Math.PI * 2 + f1);
+      f2 < 0 && (f2 = Math.PI * 2 + f2);
+      if (sweep_flag && f1 > f2) {
+        f1 = f1 - Math.PI * 2;
+      }
+      if (!sweep_flag && f2 > f1) {
+        f2 = f2 - Math.PI * 2;
+      }
+    } else {
+      f1 = recursive[0];
+      f2 = recursive[1];
+      cx = recursive[2];
+      cy = recursive[3];
+    }
+    var df = f2 - f1;
+    if (Math.abs(df) > _120) {
+      var f2old = f2,
+          x2old = x2,
+          y2old = y2;
+      f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
+      x2 = cx + rx * Math.cos(f2);
+      y2 = cy + ry * Math.sin(f2);
+      res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
+    }
+    df = f2 - f1;
+    var c1 = Math.cos(f1),
+        s1 = Math.sin(f1),
+        c2 = Math.cos(f2),
+        s2 = Math.sin(f2),
+        t = Math.tan(df / 4),
+        hx = 4 / 3 * rx * t,
+        hy = 4 / 3 * ry * t,
+        m1 = [x1, y1],
+        m2 = [x1 + hx * s1, y1 - hy * c1],
+        m3 = [x2 + hx * s2, y2 - hy * c2],
+        m4 = [x2, y2];
+    m2[0] = 2 * m1[0] - m2[0];
+    m2[1] = 2 * m1[1] - m2[1];
+    if (recursive) {
+      return [m2, m3, m4].concat(res);
+    } else {
+      res = [m2, m3, m4].concat(res).join().split(",");
+      var newres = [];
+      for (var i = 0, ii = res.length; i < ii; i++) {
+        newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x;
+      }
+      return newres;
+    }
+  };
+
+  function clone(obj) {
+    var copy;
+
+    // Handle Array
+    if (obj instanceof Array) {
+      copy = [];
+      for (var i = 0, len = obj.length; i < len; i++) {
+        copy[i] = clone(obj[i]);
+      }
+      return copy;
+    }
+
+    // Handle Object
+    if (obj instanceof Object) {
+      copy = {};
+      for (var attr in obj) {
+        if (obj.hasOwnProperty(attr)) {
+          copy[attr] = clone(obj[attr]);
+        }
+      }
+      return copy;
+    }
+
+    return obj;
+  }
+
+  function path2curve(path, path2) {
+    var p = pathToAbsolute(path),
+        p2 = path2 && pathToAbsolute(path2),
+        attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
+        attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
+        processPath = function (path, d, pcom) {
+          var nx, ny;
+          if (!path) {
+            return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
+          }
+          !(path[0] in {T: 1, Q: 1}) && (d.qx = d.qy = null);
+          switch (path[0]) {
+            case "M":
+              d.X = path[1];
+              d.Y = path[2];
+              break;
+            case "A":
+              path = ["C"].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1))));
+              break;
+            case "S":
+              if (pcom == "C" || pcom == "S") { // In "S" case we have to take into account, if the previous command is C/S.
+                nx = d.x * 2 - d.bx;          // And reflect the previous
+                ny = d.y * 2 - d.by;          // command's control point relative to the current point.
+              }
+              else {                            // or some else or nothing
+                nx = d.x;
+                ny = d.y;
+              }
+              path = ["C", nx, ny].concat(path.slice(1));
+              break;
+            case "T":
+              if (pcom == "Q" || pcom == "T") { // In "T" case we have to take into account, if the previous command is Q/T.
+                d.qx = d.x * 2 - d.qx;        // And make a reflection similar
+                d.qy = d.y * 2 - d.qy;        // to case "S".
+              }
+              else {                            // or something else or nothing
+                d.qx = d.x;
+                d.qy = d.y;
+              }
+              path = ["C"].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
+              break;
+            case "Q":
+              d.qx = path[1];
+              d.qy = path[2];
+              path = ["C"].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
+              break;
+            case "L":
+              path = ["C"].concat(l2c(d.x, d.y, path[1], path[2]));
+              break;
+            case "H":
+              path = ["C"].concat(l2c(d.x, d.y, path[1], d.y));
+              break;
+            case "V":
+              path = ["C"].concat(l2c(d.x, d.y, d.x, path[1]));
+              break;
+            case "Z":
+              path = ["C"].concat(l2c(d.x, d.y, d.X, d.Y));
+              break;
+          }
+          return path;
+        },
+        fixArc = function (pp, i) {
+          if (pp[i].length > 7) {
+            pp[i].shift();
+            var pi = pp[i];
+            while (pi.length) {
+              pcoms1[i] = "A"; // if created multiple C:s, their original seg is saved
+              p2 && (pcoms2[i] = "A"); // the same as above
+              pp.splice(i++, 0, ["C"].concat(pi.splice(0, 6)));
+            }
+            pp.splice(i, 1);
+            ii = Math.max(p.length, p2 && p2.length || 0);
+          }
+        },
+        fixM = function (path1, path2, a1, a2, i) {
+          if (path1 && path2 && path1[i][0] == "M" && path2[i][0] != "M") {
+            path2.splice(i, 0, ["M", a2.x, a2.y]);
+            a1.bx = 0;
+            a1.by = 0;
+            a1.x = path1[i][1];
+            a1.y = path1[i][2];
+            ii = Math.max(p.length, p2 && p2.length || 0);
+          }
+        },
+        pcoms1 = [], // path commands of original path p
+        pcoms2 = [], // path commands of original path p2
+        pfirst = "", // temporary holder for original path command
+        pcom = ""; // holder for previous path command of original path
+    for (var i = 0, ii = Math.max(p.length, p2 && p2.length || 0); i < ii; i++) {
+      p[i] && (pfirst = p[i][0]); // save current path command
+
+      if (pfirst != "C") { // C is not saved yet, because it may be result of conversion
+        pcoms1[i] = pfirst; // Save current path command
+        i && ( pcom = pcoms1[i - 1]); // Get previous path command pcom
+      }
+      p[i] = processPath(p[i], attrs, pcom); // Previous path command is inputted to processPath
+
+      if (pcoms1[i] != "A" && pfirst == "C") pcoms1[i] = "C"; // A is the only command
+      // which may produce multiple C:s
+      // so we have to make sure that C is also C in original path
+
+      fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
+
+      if (p2) { // the same procedures is done to p2
+        p2[i] && (pfirst = p2[i][0]);
+        if (pfirst != "C") {
+          pcoms2[i] = pfirst;
+          i && (pcom = pcoms2[i - 1]);
+        }
+        p2[i] = processPath(p2[i], attrs2, pcom);
+
+        if (pcoms2[i] != "A" && pfirst == "C") {
+          pcoms2[i] = "C";
+        }
+
+        fixArc(p2, i);
+      }
+      fixM(p, p2, attrs, attrs2, i);
+      fixM(p2, p, attrs2, attrs, i);
+      var seg = p[i],
+          seg2 = p2 && p2[i],
+          seglen = seg.length,
+          seg2len = p2 && seg2.length;
+      attrs.x = seg[seglen - 2];
+      attrs.y = seg[seglen - 1];
+      attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
+      attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
+      attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
+      attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
+      attrs2.x = p2 && seg2[seg2len - 2];
+      attrs2.y = p2 && seg2[seg2len - 1];
+    }
+
+    return p2 ? [p, p2] : p;
+  };
+
+  function box(x, y, width, height) {
+    if (x == null) {
+      x = y = width = height = 0;
+    }
+    if (y == null) {
+      y = x.y;
+      width = x.width;
+      height = x.height;
+      x = x.x;
+    }
+    return {
+      x: x,
+      y: y,
+      w: width,
+      h: height,
+      cx: x + width / 2,
+      cy: y + height / 2
+    };
+  };
+
+  // Returns bounding box of cubic bezier curve.
+  // Source: http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
+  // Original version: NISHIO Hirokazu
+  // Modifications: https://github.com/timo22345
+  function curveDim(x0, y0, x1, y1, x2, y2, x3, y3) {
+    var tvalues = [],
+        bounds = [[], []],
+        a, b, c, t, t1, t2, b2ac, sqrtb2ac;
+    for (var i = 0; i < 2; ++i) {
+      if (i == 0) {
+        b = 6 * x0 - 12 * x1 + 6 * x2;
+        a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;
+        c = 3 * x1 - 3 * x0;
+      } else {
+        b = 6 * y0 - 12 * y1 + 6 * y2;
+        a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;
+        c = 3 * y1 - 3 * y0;
+      }
+      if (Math.abs(a) < 1e-12) {
+        if (Math.abs(b) < 1e-12) {
+          continue;
+        }
+        t = -c / b;
+        if (0 < t && t < 1) {
+          tvalues.push(t);
+        }
+        continue;
+      }
+      b2ac = b * b - 4 * c * a;
+      sqrtb2ac = Math.sqrt(b2ac);
+      if (b2ac < 0) {
+        continue;
+      }
+      t1 = (-b + sqrtb2ac) / (2 * a);
+      if (0 < t1 && t1 < 1) {
+        tvalues.push(t1);
+      }
+      t2 = (-b - sqrtb2ac) / (2 * a);
+      if (0 < t2 && t2 < 1) {
+        tvalues.push(t2);
+      }
+    }
+
+    var j = tvalues.length,
+        jlen = j,
+        mt;
+    while (j--) {
+      t = tvalues[j];
+      mt = 1 - t;
+      bounds[0][j] = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3);
+      bounds[1][j] = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3);
+    }
+
+    bounds[0][jlen] = x0;
+    bounds[1][jlen] = y0;
+    bounds[0][jlen + 1] = x3;
+    bounds[1][jlen + 1] = y3;
+    bounds[0].length = bounds[1].length = jlen + 2;
+
+    return {
+      min: {x: Math.min.apply(0, bounds[0]), y: Math.min.apply(0, bounds[1])},
+      max: {x: Math.max.apply(0, bounds[0]), y: Math.max.apply(0, bounds[1])}
+    };
+  };
+
+  function curvePathBBox(path) {
+    var x = 0,
+        y = 0,
+        X = [],
+        Y = [],
+        p;
+    for (var i = 0, ii = path.length; i < ii; i++) {
+      p = path[i];
+      if (p[0] == "M") {
+        x = p[1];
+        y = p[2];
+        X.push(x);
+        Y.push(y);
+      } else {
+        var dim = curveDim(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
+        X = X.concat(dim.min.x, dim.max.x);
+        Y = Y.concat(dim.min.y, dim.max.y);
+        x = p[5];
+        y = p[6];
+      }
+    }
+    var xmin = Math.min.apply(0, X),
+        ymin = Math.min.apply(0, Y),
+        xmax = Math.max.apply(0, X),
+        ymax = Math.max.apply(0, Y),
+        bb = box(xmin, ymin, xmax - xmin, ymax - ymin);
+
+    return bb;
+  };
+
+
+
+  S.path2string = function(path) {
+    return path.join(',').replace(p2s, "$1");
+  };
+
+  return S;
+}));

From 6b9b095118cdbf2338d3a0bc9cbb0cb1246a69ec Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 18 Feb 2016 21:30:40 +0200
Subject: [PATCH 031/187] Update kute.js

---
 src/tmp/kute.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tmp/kute.js b/src/tmp/kute.js
index 076793c..fdb2d25 100644
--- a/src/tmp/kute.js
+++ b/src/tmp/kute.js
@@ -705,7 +705,7 @@
                 f[p][p1] = K.gCA(el,p1);
               }
             } else if (p==='path') {
-              f[p] = K.gp(el);
+              f[p] = K.svg.getPath(el);
             } else {
               f[p] = this.gCS(p) || _d[p];
             }

From ddb8212e4c0e04d25bd609b3126b9717f8aeb2f3 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 18 Feb 2016 21:33:15 +0200
Subject: [PATCH 032/187] Update kute.js

---
 src/tmp/kute.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tmp/kute.js b/src/tmp/kute.js
index fdb2d25..31f4b02 100644
--- a/src/tmp/kute.js
+++ b/src/tmp/kute.js
@@ -705,7 +705,7 @@
                 f[p][p1] = K.gCA(el,p1);
               }
             } else if (p==='path') {
-              f[p] = K.svg.getPath(el);
+              f[p] = el.getAttribute('d');
             } else {
               f[p] = this.gCS(p) || _d[p];
             }

From 71929b7fc7f4d7c772d13938d9ae04166519113c Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 16 Mar 2016 15:44:23 +0200
Subject: [PATCH 033/187] The 1.5 first commit, still testing, changelog in the
 comments

---
 about.html            |   53 +-
 api.html              |  249 +++---
 assets/css/kute.css   |   95 ++-
 assets/js/attr.js     |   30 +
 assets/js/css.js      |  164 ++++
 assets/js/examples.js |  313 ++++----
 assets/js/extend.js   |   27 +
 assets/js/kute-bs.js  |  116 +++
 assets/js/minifill.js |  195 +++--
 assets/js/perf.js     |   94 +--
 assets/js/scripts.js  |   46 +-
 assets/js/svg.js      |  108 +++
 attr.html             |  165 ++++
 css.html              |  225 ++++++
 easing.html           |  211 ++++++
 examples.html         |  336 +++++----
 extend.html           |  339 +++++++++
 features.html         |  170 ++---
 index.html            |   51 +-
 performance.html      |   60 +-
 properties.html       |  224 ++++++
 src/kute-attr.js      |   75 ++
 src/kute-bezier.js    |  263 ++++---
 src/kute-css.js       |  176 +++++
 src/kute-jquery.js    |   75 +-
 src/kute-physics.js   |  518 +++++++------
 src/kute-svg.js       |  292 ++++++++
 src/kute.js           | 1664 ++++++++++++++++++++---------------------
 start.html            |  145 ++++
 svg.html              |  370 +++++++++
 30 files changed, 4798 insertions(+), 2051 deletions(-)
 create mode 100644 assets/js/attr.js
 create mode 100644 assets/js/css.js
 create mode 100644 assets/js/extend.js
 create mode 100644 assets/js/kute-bs.js
 create mode 100644 assets/js/svg.js
 create mode 100644 attr.html
 create mode 100644 css.html
 create mode 100644 easing.html
 create mode 100644 extend.html
 create mode 100644 properties.html
 create mode 100644 src/kute-attr.js
 create mode 100644 src/kute-css.js
 create mode 100644 src/kute-svg.js
 create mode 100644 start.html
 create mode 100644 svg.html

diff --git a/about.html b/about.html
index 14260ed..0a49d52 100644
--- a/about.html
+++ b/about.html
@@ -9,7 +9,7 @@
     
     
     
-    
+    
     
     
      
@@ -24,7 +24,9 @@
 
 	
     
-
+    
+    
+    
 
 
 
@@ -36,9 +38,30 @@
       

 		
KUTE.js

 		
       

@@ -47,7 +70,7 @@
 	

 		
 		
Did you know?

-		
Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween 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 GSAP, Dynamics, Velocity, Shifty, our own KUTE.js here and many others.

+		
Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween 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 GSAP, Dynamics, Velocity, Shifty, our own KUTE.js here and many others. When used as a verb, it actually reffers to the interpolation of the values.

 		
Tween Object is a Javascript Object 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 tween actually refers to the tween object.

 		
polyfill 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 natively". Basically a polyfill covers what legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. More details.

 		
requestAnimationFrame is a Javascript method developed to enable hardware acceleration animations for the web today. In Javascript, the window.requestAnimationFrame(callback); method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a polyfil to cover the legacy browsers chaos.

@@ -68,12 +91,14 @@
 		
A Word On Performance

 		
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.

 		
+		
Function Nesting

+		
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 click, scroll or resize, 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 resize.
 
+        
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: if (window.clientWidth > 760) { myTween.start() }. 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.

+        
 		
Translate and Position

 		
While the code execution is the fastest for the layout modifiers or what we call box-model, say the position based properties set such as left or top, 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 translate 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 translate is part of transform CSS3 property that has to stack in a single line many more properties such as rotate, skew and scale. An article by Paul Irish explains more about differences in performance between position and translation.

-	 
-		
I would stress on this a bit: even faster performance for translation can be achieved by using an improved version of the tiny tween.js, as it only tweens the values and allows you to concatenate strings as you please. On large amounts of elements translating on vertical or horizontal axis, tween.js would be the best of them all, but well, we'll see about that in the performance testing page. 

 		
-		
To put it short left executes faster but requires repaint on every frame while translateX or translate3d execute slower but require no repaint on each animation frame. The winner is left, when it comes to code execution, but if we also count the elements' size, the larger size the more favor the translation so the overall winner is translate. With other words 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.

+		
To put it short left executes faster but requires repaint on every frame while translateX or translate3d execute slower but require no repaint on each animation frame. The winner is left, 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 overall winner is translate. 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.

 		
 		
Translate, TranslateX and Translate3D

 		
While running a 2D translate:150 animation could score similar performance as translateX:150, interestingly, translate3d:[150,0,0] is slightly faster than the other translations. Some performance tests confirm that translate3d is the prefered property for hardware acceleration. For this reason, translate3d is the winner and KUTE.js always uses it even if you only use translateX or translateY for instance.
 
@@ -94,7 +119,7 @@
 		
KUTE.js comes with 3 packs of easing functions: the popular easing functions by Robert Penner, dynamics physics easing functions by Michael Villar and bezier-easing 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 winner.

 		
The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the cubic-bezier based functions have a 0.0000001 error margin, while the Exponential 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.

 		
-		
Garbage Collection And Repeat

+		
Garbage Collection

 		
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.
		
 		
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 page.

 	
@@ -114,8 +139,8 @@
 		
Remember: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.
			
 		
 		
KUTE.js Project

-		
KUTE.js continues what was started with jQueryTween 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.

-		
It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, GSAP, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, a true inspiration for the entire developers' community, not to mention the huge contribution and knowledge sharing.

+		
KUTE.js continues what was started with jQueryTween (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.

+		
It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, GSAP, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, and a very tough competitor.

 		
In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & 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.

 		
Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.

 		
@@ -131,7 +156,7 @@
      
 
@@ -142,6 +167,8 @@
 
 	
+ 
+ 
 
 
 
diff --git a/api.html b/api.html
index a8ce17e..71384e6 100644
--- a/api.html
+++ b/api.html
@@ -9,7 +9,7 @@
     
     
     
-    
+    
     
     
      
@@ -28,6 +28,9 @@
 	
 		
 
+    
+    
+
- -

Also you can include the tools that you need for your project:

-
<script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
-
-

Your awesome animation coding would follow after these script links.

- -

Targeting Legacy Browsers

-

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 transform property or RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more information.

-

Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and here is the full refference on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.

-
-

Main Methods

-

These methods allow you to create tween objects; here a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration or repeat. The methods have different uses and performance scores while making it easy to work with.

-

.to() 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 next two because it has to compute the default/current value on tween .start() and thus delays the animation for a cuple of miliseconds, but 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 .start() method for the solution for sync/delay issue.

+

Public Methods

+

These methods allow you to create tween objects and collections of tween objects; 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.

+ +

Single Tween Object

+

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.

+

.to() 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 .fromTo() method as it has to compute the default/current value on tween .start() 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 .start() method for the solution for sync/delay issue.

Considering a given div element is already transparent, a super quick example would be:

KUTE.to(div,{opacity:1}).start()
-

.fromTo() method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest methods but unlike the .to() method, it does not stack transform properties on chained tweens. Also, another advantage is the fact that you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the features page. So here's a quick example:

+ +

.fromTo() 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 .to() 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 features page. Here's a quick example:

KUTE.fromTo(div,{opacity:1},{opacity:0}).start()
-

.Animate() method is only a fallback for the older KUTE.js versions and works as the .fromTo() method. It will be deprecated with later versions.

+ +

Tween Object Collections

+

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.

+

.allTo() method allows you to create an array of tween objects for a collection of elements. This method is using the above .to() method and inherits it's functionality. Considering a given collection myDivs elements, a nice example would be:

+
// 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} );
+
+ +

.allFromTo() method is also a method to animate a collection of elements and it uses the .fromTo() method. Quick example:

+
KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()
+ +

As you can see the above code, these methods have a specific tween option called offset 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 .chain() method. In order to chain another tween to one of the myDivsTweens objects, we would need to access it from the array, but let's leave that for later.

@@ -101,21 +118,25 @@ $ bower install --save kute.js

This tween object is now ready to work with the methods.

Starting Animations

-

.start() 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.

+

.start() 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 .allTo() and .allFromTo() methods.

//cached object defined above
 tween.start();
 
-//non-cached object are created on the fly and garbage collected after animation has finised
+// 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
+// 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();
-

As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue). 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 eliminates any syncronization issue that may occur, even if you are using the .to() method. This applies to our performance test page as well, and the trick is super duper simple:

+

As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue). 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 eliminates any syncronization issue that may occur on animations start, even if you are using the .to() method. The trick is super duper simple:

// step 1 - create an empty array and grab the elements to animate
-var tweens = [], myElements = document.querySelector('.myManyElements');
+var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
 
 // step 2 - define tween objects for each element
 for (var i = 0; i < numberOfElements; i++) {
@@ -139,26 +160,27 @@ for (var i = 0; i < numberOfElements; i++) {
 }
-

If you care to see the actual working code, check it in the perf.js file.

+

In other cases the new methods .allTo() and .allFromTo() can be more useful.

Stopping Animation

-

.stop() method stops animation for a given tween object 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 click action:

-
stopButton.addEventListener('click', function(){
-	tween.stop();
+		
.stop() method stops animation for a given tween object or an array of tween objects (built with .to()/.fromTo() 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 click action:

+
// for a tween object
+stopButton.addEventListener('click', function(){
+	myTween.stop(); // myMultiTweens.stop();
 }, false);
 

 		
 		
Pausing Animation

-		
.pause() method freezez the animation at any given time for a given tween object, and unlike the .stop() method, this one allows resuming the animation on a later use of the next method .play().

+		
.pause() method freezez the animation at any given time for a given tween object or collection, and unlike the .stop() method, this one allows resuming the animation on a later use of the next method .play().

 
pauseButton.addEventListener('click', function(){
-	tween.pause();
+	tween.pause(); // or myMultiTweens.pause();
 }, false);
 

 		
 		
Resuming Paused Animation

-		
.play() or .resume() methods allows you to resume an animation for a given tween object only if it was paused or else will produce no effect.
		
+		
.play() or .resume() 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.
		
 
playButton.addEventListener('click', function(){
-	tween.play(); // or tween.resume();
+	tween.play(); // or tween.resume(); || or myMultiTweens.resume();
 }, false);
 

 		
@@ -172,21 +194,39 @@ tween.chain(tween2);
 //the new tween chains the first one creating a loop
 tween2.chain(tween);
-

It's also possible to chain multiple tweens, just as shown in the below example, but the one that finishes last (has longest delay and duration together) should be used last in the .chain() method arguments list. Why? Because when a tween is finished it triggers cancelAnimationFrame() and KUTE.js will stop "ticking" causing all other chained tweens to stop prematurelly.

+ +

It's also possible to chain multiple tweens, just as shown in the below example.

//chain multiple tweens
 tween.chain(tween1,tween2);
- +

Another thing we talked before is the ability to chain to one of the tween object within the array built with .allTo() or .allFromTo() methods.

+
// chain to a tween from collection
+var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1}, {opacity: 0});
+
+// 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);
+
+

Also we can chain the tweens created with .allTo() and .allFromTo() methods like this:

+
// chain a collection of tweens to another tween
+var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1}, {opacity: 0});
+
+// the array is right here tweensCollection2.tweens
+// we can pass it in the chain of another tween
+tween2.chain(tweensCollection2.tweens);
+
-

Tween Options

+

Tween Options

Common Options

These options affect all types of tweens, no matter the properties used or context.

duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.

repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.

-

delay: 500 option allows you to schedule the tween animation after a certain number of miliseconds. The default value is 0.

+

delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.

+

offset: 200 option is only for .allTo() and .allFromTo() 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 0.

repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.

yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value 1. The default value is false.

easing: 'easingCubicInOut' 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 linear.

@@ -197,6 +237,16 @@ tween.chain(tween1,tween2);

perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.

parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.

parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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.

+

transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.

+ +

SVG Options

+

These options only affect animation of the path tween property, or what you know as SVG morphing.

+ +

showMorphInfo: true when true the script will log valuable information about the morph in order to help you maximize both performance and visuals of the morph.

+

morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption.

+

morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".

+

reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.

+

reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.

Callback Options

These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.

@@ -219,92 +269,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();

keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.

-
-

Easing Functions

-

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.

-

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, here's an excellent resource some developers recommend. I would also recommend this one too.

- -

Core Functions

-

Modern browsers that support transition can also make use of some generic easing functions via the CSS3 transition-timing-function:ease-out property, but in Javascript animation, we need some special functions. The popular Robert Penner's easing functions 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 circular or exponential, and also the type of progression in and/or out.

- -

To use them, simply set a tween option like so easing: KUTE.Easing.easingSinusoidalInOut or simply easing: 'easingSinusoidalInOut'.

-

linear 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.

- -

curve 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):

-
    -
  • Sinusoidal - multiplier of 1 (super light object, like a feather)
    • -
  • Quadratic - multiplier of 2
    • -
  • Cubic - multiplier of 3
    • -
  • Quartic - multiplier of 4
    • -
  • Quintic - multiplier of 5
    • -
  • Circular - multiplier of 6
    • -
  • Exponential - multiplier of 10 (super heavy object, like a truck)
    • -
- -

The In / Out explained:

-
    -
  • In - 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: easingSinusoidalIn, easingQuadraticIn,easingCubicIn, easingQuarticIn, easingQuinticIn, easingCircularIn and easingExponentialIn.
    • -
  • Out - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: easingSinusoidalOut, easingQuadraticOut, easingCubicOut, easingQuarticOut, easingQuinticOut, easingCircularOut and easingExponentialOut.
    • -
  • InOut - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: easingSinusoidalInOut, easingQuadraticInOut, easingCubicInOut, easingQuarticInOut, easingQuinticInOut, easingCircularInOut and easingExponentialInOut.
    • -
- -

back easing functions describe more complex animations (I would call them reverse gravity easings). They also come with in and/or out types of progression.

-
    -
  • easingBackIn 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.
    • -
  • easingBackOut would be best described as the previous function, but viewed in reverse mode.
    • -
  • easingBackInOut is a combination of the other two.
    • -
- -

elasticity easing functions describe the kind of animation where the object is elastic. With in and/or out as well.

-
    -
  • easingElasticOut would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.
    • -
  • easingElasticIn would be best described as the above function but viewed in reverse mode.
    • -
  • easingElasticInOut is simply a combination of the other two.
    • -
- -

gravity based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With in and/or out as well.

-
    -
  • easingBounceOut looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.
    • -
  • easingBounceIn looks like the previous viewed in reverse mode
    • -
  • easingBounceInOut is a combination of the other two.
    • -
- -

Cubic Bezier Functions

-

While modern browsers support CSS3 transition with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5), in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the features page, we are using a modified version of the cubic-bezier by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.

-

You can use them either with easing: KUTE.Ease.bezier(mX1, mY1, mX2, mY2) or easing: 'bezier(mX1, mY1, mX2, mY2)', where mX1, mY1, mX2, mY2 are Float values from 0 to 1. You can find the right values you need right here.

-

There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:

-
    -
  • Equivalents of the browser's generic timing functions: easeIn, easeOut and easeInOut
    • -
  • Sinusoidal timing functions: easeInSine, easeOutSine and easeInOutSine
    • -
  • Quadratic timing functions: easeInQuad, easeOutQuad and easeInOutQuad
    • -
  • Cubic timing functions: easeInCubic, easeOutCubic and easeInOutCubic
    • -
  • Quartic timing functions: easeInQuart, easeInQuart and easeInOutQuart
    • -
  • Quintic timing functions: easeInQuint, easeOutQuint and easeInOutQuint
    • -
  • Exponential timing functions: easeInExpo, easeOutExpo and easeInOutExpo
    • -
  • Back timing functions: easeInBack, easeOutBack and easeInOutBack
    • -
  • Special slow motion timing functions look like this: slowMo, slowMo1 and slowMo2
    • -
- -

Physics Based Functions

-

KUTE.js also packs the dynamics physics 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.

-

You can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly bezier based functions. Ok now, let's get to it:

- -
    -
  • spring function is basically an elastic type of easing that allows you to set frequency:1-1000, friction:1-1000, anticipationSize:0-1000 (a kind of delay in miliseconds) and anticipationStrength:0-1000 (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: KUTE.Physics.spring({friction:100,frequency:600}).
    • -
  • bounce function is also an elastic easing function, but it works different than Robert Penner's version that's basically a gravity based function. This one here will always come back to the starting values. This function allows you to set frequency:0-1000 and friction:0-1000. Usage: easing: KUTE.Physics.bounce({friction:100,frequency:600}).
    • -
  • gravity function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: elasticity:1-1000 and bounciness:0-1000. Usage: easing: KUTE.Physics.gravity({elasticity:100,bounciness:600}).
    • -
  • forceWithGravity function acts just like gravity except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000 and bounciness:0-1000. Usage: easing: KUTE.Physics.forceWithGravity({elasticity:100,bounciness:600}).
    • -
  • bezier easing function is a bit more complicated as it allows you to set multiple points of bezier curves. Usage: easing: KUTE.Physics.bezier({points:POINTS_ARRAY_COMES HERE}), 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 easeIn looks like: -
    // 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}]}] })
-
    -
    • -
-

The presets can be used both as a string easing:'physicsIn' or easing:KUTE.Physics.physicsIn(friction:200). The list is:

-
    -
  • curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
    • -
  • back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.
    • -
+
-

Quick Examples

-

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. Note: the examples are posted on codepen.

+

Core Engine

+

KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript or with jQuery, but before we head over to the more advanced examples, let's have a quick look at these two basic examples here. Note: the examples are posted on codepen.

Basic Native Javascript Example

When developing with native Javascript, a very basic syntax goes like this:

@@ -65,13 +88,15 @@ var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true}); -

Now the tween object is created, it's a good time for you to know that via Native Javascript we always animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements such as querySelectorAll() or getElementsByTagName(), you need to do a for () loop. Now let's apply the tween control methods:

+

Now the tween object is created, it's a good time for you to know that via Native Javascript we always animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements such as querySelectorAll() or getElementsByTagName(), you need to do a for () loop, or make use of the two new methods: .allTo() or .allFromTo(). Now let's apply the tween control methods:

+ 
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
+

The demo for the above example is here.

Basic jQuery Example

@@ -88,10 +113,10 @@ $(tween).KUTE('chain',myTween2); // when tween animation finished, you can trigg

The demo for the above example is here.

-

Transform Properties Examples

+

Transform Properties Examples

KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateX, rotateY, rotateZ properties. Additionally it allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.

-

Translations

+

Translations

In the next example the first box is moving to left 250px with translate property, the second box is moving to the right by 200px using translateX and the third box is moving to the bottom using translate3d. The last box also uses translate3d but requires a perspective value for the animation on the Z axis to be effective.

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});
@@ -99,58 +124,59 @@ 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});

And here is how it looks like:

-
-
2D
-
X
-
Y
-
Z
+
+
2D
+
X
+
Y
+
Z
- Start + Start

As you can see in your browsers console, for all animations translate3d is used, as explained in the features page. Also the first example that's using the 2D translate for both vertical and horizontal axis even if we only set X axis. You can download this example here.

Remember: stacking translate and translate3d together may not work and IE9 does not support perspective.

-

Rotations

+

Rotations

Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support rotate3d.

+ 
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});
-
+ +

And here is how it looks like:

-
-
2D
-
X
-
Y
-
Z
- +
+
2D
+
X
+
Y
+
Z
- Start + Start

The rotateX and rotateY 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 perspective 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 here.

-

Skews

+

Skews

KUTE.js supports skewX and skewY so let's animate the two. Since they are 2D transformations, IE9 supports skews.

var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
 var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});
-
+

And here is how it looks like:

-
-
X
-
Y
+
+
X
+
Y
- Start + Start

You can download this example here.

-

Mixed Transformations

+

Mixed Transformations

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:

var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
@@ -173,19 +199,19 @@ var tween2 = KUTE.fromTo(

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.

-
-
element perspective 400px
-
parent perspective 400px
+
+
element perspective 400px
+
parent perspective 400px
- Start + Start

This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example here.

-

Chained Transformations

-

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 .to() method because it has the ability to stack 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:

+

Chained Transformations

+

KUTE.js has the ability to stack transform properties as they come in chained tweens 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 .to() method because it has the ability to stack 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:

FROMTO
FROMTO
@@ -208,40 +234,14 @@ var tween2 = KUTE.fromTo(
  • 2D and 3D translations would work best in if you provide a value at all times; eg. translate:[x,y] and translate3d:[x,y,z]; for instance using translate:150 or translateX:150 would mean that all other axis are 0;
  • on larger amount of elements animating chains, the .fromTo() 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 features page;
  • download this example here.
    • - - -

    Border Radius

    -

    In the example below we are doing some animation on the border-radius 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 px, % and text properties' units such as em or rem.

    -
    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();
-
    - -

    And here is how it looks like:

    - -
    -
    ALL
    -
    TL
    -
    TR
    -
    BL
    -
    BR
    - -
    - Start -
    -
    - -

    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 -moz-border-radius-topleft are not supported because they were depracated with later versions. Download this example here.

    + -

    Box Model Properties

    -

    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 minWidth or maxHeight require a more complex context and we won't insist on them.

    +

    Box Model Properties

    +

    KUTE.js core engine supports most used box model properties, and almost all the box model properties via the CSS Plugin, so the next example will only animate width, height, top and left.

    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%'});

    We're gonna chain these tweens and start the animation. You can download this example here.

    @@ -255,38 +255,16 @@ var tween5 = KUTE.to('selector1',{padding:'5%'});

    TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.

    -

    Text Properties

    -

    OK here we're gonna do a cool example for text properties. Basically the below code would work:

    -
    var tween1 = KUTE.to('selector1',{fontSize:'200%'});
-var tween2 = KUTE.to('selector1',{line-height:24});
-var tween3 = KUTE.to('selector1',{letter-spacing:50});
-
    -

    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 fontSize and letterSpacing properties for each character while the button will animate fontSize and lineHeight properties. Watch this:

    - -
    -

    Howdy!

    - Button - -
    - Start -
    -
    -

    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 here.

    - -

    Color Properties

    -

    The next example is about animating color properties. As for example, check these lines for reference.

    -
    KUTE.to('selector1',{color:'#069'}).start();
+		
    Color Properties
    
+		
    The next example is about animating color properties. As for example, check these lines for reference. Additional color properties such as borderColor or borderLeftColor are supported via the CSS Plugin.
    
+
    KUTE.to('selector1',{color:'rgb(0,66,99)'}).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();
+KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only
 
    
 		
    Let's get some animation going. Download the example here.
    		
 		
 		
    
-			
    Colors
    
+			
    Colors
    
 				
 			
    
 				Start	
@@ -294,36 +272,8 @@ KUTE.to('selector1',{borderLeftColor:'#069'}).start();
 		
    
 
 		
    A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.
    	
-
-		
    Clip Property
    
-		
    This property allows you to animate the rectangular shape of an element that is set to position:absolute. In CSS this property works like this clip: rect(top,right,bottom,left) forming a rectangular shape that masks an element making parts of it invisible.
    
-
    KUTE.to('selector',{clip:[0,150,100,0]}).start();
    
-		
    A quick example here could look like this:
    
 		
-		
    
-			
    
-				
-			
    
-				Start	
-			
    
-		
    
-		
    Note that this would produce no effect for elements that have overflow:visible style rule. Download this example here.
    	
-
-		
    Background Position
    
-		
    Another property we can animate with KUTE.js is backgroundPosition. Quick example:
    
-
    KUTE.to('selector1',{backgroundPosition:[0,50]}).start();
    
-		
    A working example would look like this:
    
-		
-		
    
-			
    
-				
-			
    
-				Start	
-			
    
-		
    		
-		
    Download this example here.
    
-		
-		
    Vertical Scrolling
    
+		
    Vertical Scrolling
    
 		
    Another property we can animate with KUTE.js is scrollTop. I works for both the window and any scrollable object. Quick example:
    
 
    KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
 KUTE.to('window',{scroll:450}).start(); // for the window
@@ -331,10 +281,10 @@ KUTE.to('window',{scroll:450}).start(); // for the window
 		
    A working example would work like this. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.
    
 		
 		
-		
    Cross Browser Animation Example
    
+		
    Cross Browser Animation Example
    
 		
    Unlike the examples hosted on Codepen, 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 complete reference.  Now we are ready:
 		
-		
    Collect Information And Cache It
    
+		
    Collect Information And Cache It
    
 
    // grab an HTML element to build a tween object for it 
 var element = document.getElementById("myElement");
 
@@ -348,7 +298,7 @@ var isIE9 = isIE === 9;
 // you include all you need for your target audience
 
 
    
-		
    Define Properties And Options Objects
    
+		
    Define Properties And Options Objects
    
 
    // create values and options objects
 var startValues = {};
 var endValues = {};
@@ -390,7 +340,7 @@ options.yoyo = true;
 options.repeat = 1;
 
    
 
-		
    Build Tween Object And Tween Controls
    
+		
    Build Tween Object And Tween Controls
    
 
    // the cached object
 var myTween = KUTE.fromTo(element, startValues, endValues, options);
 
@@ -418,7 +368,7 @@ playPauseButton.addEventListener('click', function(e){
 	}  
 }, false);
 
    
-		
    Live Demo
    
+		
    Live Demo
    
 		
    
 			
    
 				
@@ -437,20 +387,137 @@ playPauseButton.addEventListener('click', function(e){
 			
  • the RESUME button will use the .resume() method and resumes the animation; this reverses the button's initial state;
    • 
 			
  • make sure you work with the conditions properly when you want to pause an animation you MUST check both !myTween.playing and myTween.paused conditions because you could end up with errors.
    • 			
 		
-		
+        
+		
    Tween Object Collections
    
+		
    With KUTE.js 1.5.0 new tween object constructor methods were introduced, and 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.
    
+
    // 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 }
+);
+
    
+		
    And should looks like this:
    
+		
    
+			
    K
    
+			
    U
    
+			
    T
    
+			
    E
    
+				
+			
    
+				Start	
+			
    
+		
    
+		
    As you can see, we also used the new tween options offset and transformOrigin and they make it so much more easy.
    
 				
+		
+        
+        
    Easing Functions
    
+        
    We've talked about KUTE.js featuring many easing functions, so let's go ahead and create some examples. The first box below will animate with linear easing function and the second will use another function you choose. The example also features some predefined easing functions from the additional plugins: cubic bezier easing and physics based easing functions.
    
+		
    
+			
    Linear
    
+			
    
+				
+			
    
+                
    
+				    Select
+                    
      
+                        
    • Core Functions
      • 
+                        
    • easingSinusoidalIn
      • 
+                        
    • easingSinusoidalOut
      • 
+                        
    • easingSinusoidalInOut
      • 
+                        
    • easingQuadraticIn
      • 
+                        
    • easingQuadraticOut
      • 
+                        
    • easingQuadraticInOut
      • 
+                        
    • easingCubicIn
      • 
+                        
    • easingCubicOut
      • 
+                        
    • easingCubicInOut
      • 
+                        
    • easingQuarticIn
      • 
+                        
    • easingQuarticOut
      • 
+                        
    • easingQuarticInOut
      • 
+                        
    • easingQuinticIn
      • 
+                        
    • easingQuinticOut
      • 
+                        
    • easingQuinticInOut
      • 
+                        
    • easingCircularIn
      • 
+                        
    • easingCircularOut
      • 
+                        
    • easingCircularInOut
      • 
+                        
    • easingExponentialIn
      • 
+                        
    • easingExponentialOut
      • 
+                        
    • easingExponentialInOut
      • 
+                        
    • easingBackIn
      • 
+                        
    • easingBackOut
      • 
+                        
    • easingBackInOut
      • 
+                        
    • easingElasticIn
      •                
+                        
    • easingElasticOut
      •                
+                        
    • easingElasticInOut
      •   
+                        
    • Bezier Functions
      • 
+                        
    • bezier(0.15, 0.7, 0.2, 0.9)
      • 
+                        
    • bezier(0.25, 0.5, 0.6, 0.7)
      • 
+                        
    • bezier(0.35, 0.2, 0.9, 0.2)
      • 
+                        
    • easeIn
      • 
+                        
    • easeOut
      • 
+                        
    • easeInOut
      • 
+                        
    • easeInSine
      • 
+                        
    • easeOutSine
      • 
+                        
    • easeInOutSine
      • 
+                        
    • easeInQuad
      • 
+                        
    • easeOutQuad
      • 
+                        
    • easeInOutQuad
      • 
+                        
    • easeInCubic
      • 
+                        
    • easeOutCubic
      • 
+                        
    • easeInOutCubic
      • 
+                        
    • easeInQuart
      • 
+                        
    • easeOutQuart
      • 
+                        
    • easeInOutQuart
      • 
+                        
    • easeInQuint
      • 
+                        
    • easeOutQuint
      • 
+                        
    • easeInOutQuint
      • 
+                        
    • easeInExpo
      • 
+                        
    • easeOutExpo
      • 
+                        
    • easeInOutExpo
      • 
+                        
    • easeInCirc
      • 
+                        
    • easeOutCirc
      • 
+                        
    • easeInOutCirc
      • 
+                        
    • easeInBack
      • 
+                        
    • easeOutBack
      • 
+                        
    • easeInOutBack
      • 
+                        
    • slowMo
      • 
+                        
    • slowMo1
      • 
+                        
    • slowMo2
      • 
+                        
    • Physics Functions
      •   
+                        
    • physicsIn
      •  
+                        
    • physicsOut
      •   
+                        
    • physicsInOut
      •   
+                        
    • physicsBackIn
      •   
+                        
    • physicsBackOut
      •   
+                        
    • physicsBackInOut
      •   
+                        
    • spring
      •   
+                        
    • bounce
      •   
+                        
    • gravity
      •   
+                        
    • forceWithGravity
      •   
+                        
    • bezier
      •   
+                        
    • multiPointBezier
      •   
+                    
    
+                
    
+				Start	
+			
    
+		
    
+        
    As you can see, the cubic-bezier easing functions can be used with both presets and as well as strings such as bezier(0.15, 0.7, 0.2, 0.9). The physics based easing functions have their own presets, but the last 6 are all the examples shown in the API documentation, so make sure to check.
       	
 	
    
 
       
      
 
@@ -466,8 +533,9 @@ playPauseButton.addEventListener('click', function(e){
 
 
 
- 
-
+ 
+ 
+ 
  
  
 
diff --git a/extend.html b/extend.html
new file mode 100644
index 0000000..1458934
--- /dev/null
+++ b/extend.html
@@ -0,0 +1,339 @@
+
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    Extending KUTE.js | Javascript Animation Engine
+	
+    
+    
+	
+    
+    
+
+	
+    
+		
+	
+		
+
+    
+    
+    
+	
+	
+	
+
+
+
+  
    
+  
+  
    
+ 
+	
    
+      
    
+		
    KUTE.js
    
+		
+      
    
+    
    
+
+	
    		
+		
+		
    Extend Guide
    
+		
    KUTE.js is a very flexible animation engine that allows you to extend beyond measure. In this tutorial we'll dig into what's best to do to extend/customize the functionality of KUTE.js core, plugins and features.
    
+
+		
    Basic Plugin Template
    
+		
    The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:
    
+
    /* KUTE.js - The Light Tweening Engine
+ * package - pluginName
+ * desc - what your plugin does
+ * by yourNickname aka YOUR NAME
+ * 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("pluginName require KUTE.js.");
+  }
+}( function (KUTE) {
+    // your code goes here
+    
+    // in this function body
+    
+    // the plugin returns this
+    return this;
+}));
+
    
+        
    As suggested in the above template, your function body could be written with one or more of the examples below.
    
+        
+		
    Extend Tween Control
    
+		
    In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check KUTE.Tween function to get the internal references notation:
    
+
    //add a reference to KUTE object
+var K = window.KUTE;
+
+// let's add a timescale method
+K.Tween.prototype.timescale = function(factor){
+    this._dr *= factor; // this._dr is the internal tween duration
+    return this;
+}
+
+// or let's add a reverse method
+K.Tween.prototype.reverse = function(){
+    for (var p in this._vE) {
+        var tmp = this._vSR[p];         // we cache this object first
+        this._vSR[p] = this._vE[p];     // this._vSR is the internal valuesStartRepeat object
+        this._vE[p] = tmp;              // this._vE is the internal valuesEnd object
+        this._vS[p] = this._vSR[p];     // this._vSR is the internal valuesStart object
+    }
+    return this;
+}
+
+// go back in time
+K.Tween.prototype.seek = function (time) {
+    this._sT -= time;  // this._sT is the startTime
+    return this;
+};
+
+// how about a restart method
+K.Tween.prototype.restart = function(){
+    if (this.playing) {
+        this.stop();
+        this.start();
+    }
+    return this;
+}
+
    
+        
    For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very secific need.
    
+        
+		
    Support For Additional CSS Properties
    
+		
    KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and you'll master it real quick, it's very easy.
     
+        
    We need basically 3 functions:
    
+        
      
+            
    • KUTE.prS['propertyName'] a prepareStart function to get the current value of the property required for the .to() method;
      • 
+            
    • KUTE.pp['propertyName'] a processProperty function to process the user value / current value to have it ready to tween;
      • 
+            
    • KUTE.dom['propertyName'] a domUpdate function that will update the property value into the DOM;
      • 
+            
    • optional a function that will work as an utility for your value processing.
      • 
+        
    
+        
    So let's add support for boxShadow! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template and let's break it down to pieces:
    
+
    // add a reference to KUTE object
+var K = window.KUTE;
+
+// filter unsupported browsers
+if (!('boxShadow' in document.body.style)) {return;}
+
+// 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
+
    
+        
    Now we have access to the KUTE object, prototypes and it's utility functions, let's write a prepareStart function that will read the current boxShadow value:
    
+
    // 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'); // where K.gCS() is an accurate getComputedStyle() core method
+    return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
+}
+
+// note that in some cases the window.getComputedStyle(element,null) can be more accurate
+// we are using a hybrid function that's trying to get proper colors and other stuff that
+// some legacy browsers lack in this matter
+
+// also to read the current value of an attribute, replace first line of the above function body with this
+// var attrValue = element.getAttribute(property);
+// and return the value or a default value, mostly rgb(0,0,0) for colors or 0 for other types  
+
       
+
+        
    Next we'll need to write a processProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the K.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
    
+        
+
    // the processProperty for boxShadow 
+// registers the K.dom['boxShadow'] function 
+// returns an array of 6 values in the following format
+// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
+K.pp['boxShadow'] = function(property,value,element){
+  // the DOM update function for boxShadow registers here
+  // we only enqueue it if the boxShadow property is used to tween
+  if ( !('boxShadow' in K.dom) ) {
+    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 + ') ';          
+      
+      // last 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 = false;
+    // 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;
+}
+
    
+
+        
    Notice we've used an utility function that fixes the Array values and makes sure the structure is right.
    
+
    // utility function to process values accordingly
+// numbers must be floats/integers and color must be rgb object
+K.processBoxShadowArray = function(shadow){
+  var newShadow, i;
+  // properly process the shadow based on amount of values
+  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 numbers are ready to tween
+  for (i=0;i<4;i++){
+    newShadow[i] = parseFloat(newShadow[i]);  
+  }
+  // make sure color is an rgb object
+  newShadow[4] = K.truC(newShadow[4]); // where K.truC() is a core method to return the true color in rgb object format
+  return newShadow;
+}
+
    
+
+		
    And now, we are ready to tween both .to() and .fromTo() methods:
    
+
    // tween to a string value
+var myBSTween1 = KUTE.to('selector', {boxShadow: '15px 25px #069'}).start();
+
+// or a fromTo with string and array, hex and rgb
+var myBSTween2 = KUTE.fromTo('selector', {boxShadow: [15, 25, 0, '#069']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
+
+// maybe you want to animate an inset boxShadow?
+var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
+
    
+        
    You are now ready to demo!
    
+		
    
+			
    
+				
+			
    
+				Start	
+			
    
+		
    
+		
    This plugin should be compatible with IE9+ and anything that supports boxShadow CSS property. As you can see it can handle pretty much anything you throw at it, but it requires at least 3 values: h-shadow, v-shadow, and color because Safari doesn't work without a color. Also this plugin won't be able to handle multiple instances of boxShadow for same element, because the lack of support on legacy browsers, also the color cannot be RGBA, but hey, it supports both outline and inset shadows and you can fork it anyway to your liking.
     
+        
    If you liked this tutorial, feel free to write your own, a great idea would be for textShadow, it's very similar to the above example plugin.
    
+        
+		
    Utility Methods
    
+         
      
+            
    • KUTE.selector(selector,multi) is the selector utility that uses getElementById or querySelector when multi argument is null or false, BUT when true, querySelectorAll is used and returns a HTMLCollection object.
      • 
+            
    • KUTE.property(propertyName) is the autoPrefix function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function returns undefinedPropertyName and that would be an easy way to detect support for that property on most legacy browsers: 
      if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }
      • 
+            
    • KUTE.getPrefix() returns a vendor preffix even if the browser supports a specific preffixed property or not.
      • 
+            
    • KUTE.gCS(element,property) a hybrid getComputedStyle function to get the current value of the property required for the .to() method; it actually checks in element.style, element.currentStyle and window.getComputedStyle(element,null) to make sure it won't miss the property value;
      • 
+            
    • KUTE.gIS() a getInlineStyle function to read the current inline style, very useful for transform, because decomposing a computed matrix would require a ton lot more code;
      • 
+            
    • KUTE.truD(value) a function that accepts String and Number and returns a {v: 150, u: 'px'} object for any box model or a single numeric value based property and make it ready to tween.
      • 
+            
    • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color, the IE9+ browsers will be able to return the rgb object we need.
      • 
+            
    • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
      • 
+            
    • KUTE.rth(rgb) a function that accepts RGBa formatted colors and returns a #006699 color string;
      • 
+        
           
+
+		
+		
+	
    
+	  
+      
+     
+
+ 
    
+ 
+
+
+
+	
+
+
+	
+
+
+
+ 
+ 
+ 
+ 
+
+
diff --git a/features.html b/features.html
index a18b726..647a968 100644
--- a/features.html
+++ b/features.html
@@ -9,7 +9,7 @@
     
     
     
-    
+    
     
     
      
@@ -25,6 +25,9 @@
 	
     
 
+    
+    
+    
 	
 	
 
- 
+ 
  
 
 
diff --git a/index.html b/index.html
index 7bace66..ddee711 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,10 @@
 
 	
     
-	
+
+    
+    
+    	
 	
 		
 
 
- 
- 
+ 
+ 
  
+ 
 
 
diff --git a/performance.html b/performance.html
index af3238a..5c83fe1 100644
--- a/performance.html
+++ b/performance.html
@@ -5,39 +5,38 @@
     
     
     
-    
+    
     
     
      
 
     KUTE.js | Performance Testing Page
     	
-		
-
+        .text-danger {font-weight: bold}
+    
+    
+    
 
 
 
@@ -90,18 +89,11 @@
               
  • 800
    • 
               
  • 900
    • 
               
  • 1000
    • 
+              
             
         
           
-        
-        
           
         
    
           
@@ -112,11 +104,11 @@
 
 
 
    These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, here's how.
    
-
    The hack refers to adding a blank transform translate3d(0px,0px,0px); for the elements to promote them into separate layers, as described here.
    
 
    Do not try this test on lower end or mobile devices.
    
          
 
 
    
+
 
    
 
 	
@@ -128,9 +120,9 @@
 
 
 
-
+
 
-
+
 
 
 
diff --git a/properties.html b/properties.html
new file mode 100644
index 0000000..595829c
--- /dev/null
+++ b/properties.html
@@ -0,0 +1,224 @@
+
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    KUTE.js Supported Properties | Javascript Animation Engine
+	
+    
+    
+	
+    
+    
+	
+	
+    
+    
+    
+    
+	
+	
+
+
+
+
+  
    
+  
+  
    
+ 
+	
    
+      
    
+		
    KUTE.js
    
+		
+      
    
+    
    
+	
+	
    
+		
    Supported Properties
    
+		
    KUTE.js covers all animation needs by itself for transform properties, scroll for window or a given element, colors. Note: not all browsers support 2D transforms or 3D transforms. With the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like border-radius, clip, backgroundPosition and more box model properties.
     
+        
    Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular coding, KUTE.js makes it easy to add support for additional properties, so check out the guide on how to extend.
    
+		
    All common measurement units are supported: px and % for translations and box-model properties, or deg and rad for rotations and skews, while clip only supports px. Other properties such as opacity, scale or scroll are unitless, and background-position always uses % as measurement unit. As for the text properties you can use px, em, rem, vh and vw. Be sure to check what your browsers support in terms of measurement unit.
    
+				
+		
    Opacity
    
+		
    In most cases, the best animation possible is the opacity, 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 filter: alpha(opacity=0). Also, opacity can be used for instance on legacy browsers that don't support RGBA colors. Eg. opacity:0.5 will make an element semitransparent.
    
+		
+		
    2D Transform Properties
    
+		
    The core engine supports all 2D transform properties except matrix.
    
+		
      
+			
    • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. Supported on IE9.
      • 
+			
    • rotate is a property used to rotate an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. Supported on IE9.
      • 
+			
    • skewX is a property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew an element by 25 degrees. Supported on IE9.
      • 
+			
    • skewY is a property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew an element by 25 degrees. Supported on IE9.
      • 
+			
    • scale is a property used to apply a size transformation. Eg. scale:2 will enlarge an element by a degree of 2. Supported on IE9.
      • 
+			
    • matrix property is not supported.
      • 
+		
    		
+		
+		
    3D Transform Properties
    
+		
    The core engine supports all 3D transform properties except matrix3d and rotate3d.
    
+        
      
+			
    • translateX property is for horizontal movement. EG. translateX:150 to translate an element 150px to the right. Modern browsers only.
      • 
+			
    • translateY property is for vertical movement. EG. translateY:-250 to translate an element 250px towards the top. Modern browsers only.
      • 
+			
    • translateZ property is for movement on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px to it's back, making it smaller. Modern browsers only and requires a perspective tween option to be used; the smaller perspective value, the deeper translation.
      • 
+			
    • translate3d property is for movement on all the axis in a given 3D field. EG. translate3d:[-150,200,150] 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 perspective tween option.
      • 
+			
    • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Modern browsers only and requires perspective.
      • 
+			
    • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and also requires perspective.
      • 
+			
    • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and doesn't require perspective.
      • 
+			
    • rotate3d and matrix3d properties are not supported.
      • 
+		
    
+
+		
    Box Model Properties
    
+		
    The core engine supports width, height, left and top while the CSS Plugin adds support for all other box-model properties.
    
+		
      
+			
    • left, top, right and bottom are position based properties for movement on vertical and / or horizontal axis. These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires position:relative. These properties can be used as fallback for browsers with no support for translate properties such as IE8.
      • 
+			
    • width, height, minWidth, minHeight, maxWidth, maxHeight 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 scale on IE8 again, as well as for other purposes.
      • 
+			
    • padding, margin, paddingTop, paddingBottom, paddingLeft, paddingRight, marginTop, marginBottom, marginLeft and marginRight are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as margin: "20px 50px" or any other type are not supported.
      • 
+			
    • borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are borderLeftWidth 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.
      • 
+			
    • outlineWidth property allows you to animate the outline-width of an element.
      • 
+		
    		
+		
    Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize event that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.
    
+
+		
    Border Radius
    
+		
    The CSS Plugin covers all the radius properties while making sure to use the proper vendor prefix if a slightly older browser version is detected.
    
+		
      
+			
    • borderRadius allows you to animate the border-radius on all corners for a given element.
      • 
+			
    • borderTopLeftRadius allows you to animate the border-top-left-radius for a given element.
      • 
+			
    • borderTopRightRadius allows you to animate the border-top-right-radius for a given element.
      • 
+			
    • borderBottomLeftRadius allows you to animate the border-bottom-left-radiusfor a given element.
      • 
+			
    • borderBottomRightRadius allows you to animate the border-bottom-right-radiusfor a given element.
      • 
+		
    			
+		
    For all radius properties above borderRadius:20 or borderTopLeftRadius:'25%' will do. In the first case px is the default measurement unit used, while in the second we require using % unit which is relative to the element's size.
    
+		
    Remember: shorthands for border-radius are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. -moz-border-radius-topleft) as they were deprecated with later versions.
    
+
+		
    Color Properties
    
+		
    The core engine only supports color and backgroundColor, but the CSS Plugin covers all the others. KUTE.js currently supports values such as HEX, RGB and RGBA for all color properties, but IE8 does not support RGBA and always uses RGB when detected, otherwise will produce no effect. There is also a tween option keepHex:true to convert the color format. Eg. color: '#ff0000' or backgroundColor: 'rgb(202,150,20)' or borderColor: 'rgba(250,100,20,0.5)'. The IE9+ browsers should also work with web safe colors, eg. color: 'red'. 
    	
+		
      
+			
    • color allows you to animate the color for a given text element.
      • 
+			
    • backgroundColor allows you to animate the background-color for a given element.
      • 
+			
    • outlineColor allows you to animate the outline-color for a given element.
      • 
+			
    • borderColor allows you to animate the border-color on all sides for a given element.
      • 
+			
    • borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow you to animate the color of the border on each side of a given element.
      • 
+		
    			
+		
    Remember: shorthands for borderColor property are not supported.
    
+
+		
    SVG Properties
    
+		
    The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability.
    
+
+		
    Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset.
+		
    The SVG Plugin also manages animation for most useful CSS properties that are specific to SVG elements, since SMIL animations tend to go extinct, this plugin can get quite useful.
    
+        
      
+			
    • strokeWidth allows you to animate the stroke-width for a given SVG element.
      • 
+			
    • strokeOpacity allows you to animate the stroke-opacity for a given SVG element.
      • 
+			
    • fillOpacity allows you to animate the fill-opacity for a given SVG element.
      • 
+			
    • stopOpacity allows you to animate the stop-opacity for a given gradient SVG element.
      • 
+			
    • fill allows you to animate the fill color property for a given SVG element.
      • 
+			
    • stroke allows you to animate the stroke color for a given SVG element.
      • 
+			
    • stopColor allows you to animate the stop-color for a given gradient SVG element.
      • 
+		
    
+        
+		
    Presentation Attributes
    
+		
    The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.
    
+		
    The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.
    
+        
+		
    Text Properties
    
+		
    The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.
    
+		
      
+			
    • fontSize allows you to animate the font-size for a given element.
      • 
+			
    • lineHeight allows you to animate the line-height for a given element.
      • 
+			
    • letterSpacing allows you to animate the letter-spacing for a given element.
      • 
+			
    • wordSpacing allows you to animate the word-spacing for a given element.
      • 
+		
    
+		
    Remember: these properties are also layout modifiers.
    
+
+		
    Scroll Animation
    
+		
    KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than offsetHeight). Both scroll: 150 or scrollTop: 150 notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks.
    		
+
+		
    Other properties
    
+		
      
+			
    • clip allows you to animate the clip property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]. See spec for details.
      • 
+			
    • backgroundPosition allows you to animate the background-position for a given element that uses a background image. It only uses % as measurement unit. Eg. backgroundPosition:[50,20]
      • 
+		
    
+		
+		
    Legend
    
+		
      
+			
    • core - the property/properties are supported by core animation engine.
      •     
+			
    • plugin - the property/properties are supported by plugins.
      •     
+			
    • unsupported - the property/properties are NOT supported by core and/or plugins.
      •     
+        
    
+        			
+		
    Did We Miss Any Important Property?
    			
+		
    Make sure you go to the issues tracker and report the missing property ASAP.
    			
+	
    
+
+	
    
+		
+				
+	
    
+	  
+      
+     
+
+ 
    
+ 
+
+
+
+	
+
+
+
+ 
+ 
+
+
diff --git a/src/kute-attr.js b/src/kute-attr.js
new file mode 100644
index 0000000..323f2f6
--- /dev/null
+++ b/src/kute-attr.js
@@ -0,0 +1,75 @@
+/* KUTE.js - The Light Tweening Engine
+ * package - Attributes Plugin
+ * desc - enables animation for any numeric presentation attribute
+ * 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") {
+    // 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(KUTE);
+  } else {
+    throw new Error("Attributes Plugin require KUTE.js.");
+  }
+}( function (KUTE) {
+  'use strict';
+  var K = window.KUTE;
+  
+  // get current attribute value
+  K.gCA = function(e,a){
+    return e.getAttribute(a);
+  }
+  
+  K.prS['attr'] = function(el,p,v){
+    var f = {};
+    for (var a in v){
+      f[a.replace(/_+[a-z]+/,'')] = K.gCA(el,a.replace(/_+[a-z]+/,''));
+    }
+    return f;
+  };
+  
+  // register the render attributes object
+  if (!('attr' in K.dom)) {
+    K.dom.attr = function(w,p,v){
+      for ( var o in w._vE[p] ){
+        K.dom.attr.prototype[o](w,o,v);
+      }
+    }; 
+  }
+  
+  var ra = K.dom.attr.prototype;
+  
+  // process attributes object K.pp.attr(t[x]) 
+  // and also register their render functions
+  K.pp['attr'] = function(a,o){
+    var ats = {}, p;
+    for ( p in o ) {
+      if ( /%|px/.test(o[p]) ) {
+        var u = K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
+        if (!(p+s in ra)) {
+          ra[p+s] = function(w,p,v){
+            w._el.setAttribute(p.replace(s,''), (w._vS.attr[p].v + (w._vE.attr[p].v - w._vS.attr[p].v) * v) + w._vE.attr[p].u);
+          }
+        }
+        ats[p+s] = K.truD(o[p]);       
+      } else {
+        if (!(p in ra)) {
+          ra[p] = function(w,p,v){
+            w._el.setAttribute(p, w._vS.attr[p] + (w._vE.attr[p]- w._vS.attr[p]) * v);
+          }
+        }
+        ats[p] = o[p] * 1;     
+      }
+    }
+    return ats;
+  }
+
+}));
\ No newline at end of file
diff --git a/src/kute-bezier.js b/src/kute-bezier.js
index 44c23b9..f402215 100644
--- a/src/kute-bezier.js
+++ b/src/kute-bezier.js
@@ -6,71 +6,107 @@
  * Licensed under MIT-License
 */
 
-KUTE.Ease = {};
+// /* 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 || {};
 
-KUTE.Ease.bezier = function(mX1, mY1, mX2, mY2) {
+  E.Bezier = function(mX1, mY1, mX2, mY2) {
     return _bz.pB(mX1, mY1, mX2, mY2);
-};
-	
-var _bz = KUTE.Ease.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
+  var _bz = E.Bezier.prototype;
 
-_bz.ksts = 11; // k Spline Table Size
-_bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
+  // 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.f32as = 'Float32Array' in window; // float32ArraySupported
-_bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
+  _bz.ksts = 11; // k Spline Table Size
+  _bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
 
-_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.f32as = 'Float32Array' in window; // float32ArraySupported
+  _bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
 
-_bz.r = {};
-_bz.pB = function (mX1, mY1, mX2, mY2) {
-this._p = false; var self = this;
+  _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 = function(aX){	
-      if (!self._p) _bz.pc(mX1, mX2, mY1, mY2); 
-      if (mX1 === mY1 && mX2 === mY2) return aX;
+  _bz.r = {};
+  _bz.pB = function (mX1, mY1, mX2, mY2) {
+    this._p = false; var self = this;
 
-      if (aX === 0) return 0;
-      if (aX === 1) return 1; 
-      return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);		
-};
-return _bz.r;
-};
+    _bz.r = function(aX){
+          if (!self._p) _bz.pc(mX1, mX2, mY1, mY2);
+          if (mX1 === mY1 && mX2 === mY2) return aX;
 
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-_bz.cB = function(aT, aA1, aA2) { // calc Bezier
+          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
+  // 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
+  _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;
-        }
+      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;
+  _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;
@@ -78,82 +114,85 @@ var i = 0, j = _bz.ni;
         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.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;
+  _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;
+      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;
+      // 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);
-    }
-};
+      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"],	
-KUTE.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
-KUTE.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
-KUTE.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
-			
-KUTE.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
-KUTE.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
-KUTE.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
+  _bz.pc = function(mX1, mX2, mY1, mY2) {
+    this._p = true;
+    if (mX1 != mY1 || mX2 != mY2)
+        _bz.csv(mX1, mX2);
+  };
 
-KUTE.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
-KUTE.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };			
-KUTE.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
+  // 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); };
 
-KUTE.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
-KUTE.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };			
-KUTE.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
+  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); };
 
-KUTE.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
-KUTE.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
-KUTE.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };	
+  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); };
 
-KUTE.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
-KUTE.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
-KUTE.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
-						
-KUTE.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); }; 
-KUTE.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
-KUTE.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
+  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); };
 
-KUTE.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
-KUTE.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
-KUTE.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
+  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); };
 
-KUTE.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
-KUTE.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
-KUTE.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
+  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); };
 
-KUTE.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
-KUTE.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
-KUTE.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };  
\ No newline at end of file
+  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;
+}));
diff --git a/src/kute-css.js b/src/kute-css.js
new file mode 100644
index 0000000..793d46f
--- /dev/null
+++ b/src/kute-css.js
@@ -0,0 +1,176 @@
+/* KUTE.js - The Light Tweening Engine
+ * package CSS Plugin
+ * 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") {
+    factory(KUTE);
+  } else {
+    throw new Error("CSS Plugin require KUTE.js.")
+  }
+})(function(KUTE){
+  var K = window.KUTE, p,
+    _br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'),
+    _brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'), // all radius props prefixed
+    _cls = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
+    _rd  = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
+    _bm  = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
+    'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight', 
+    'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'], // dimensions / box model
+    _tp  = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties
+    _clp = ['clip'], _bg  = ['backgroundPosition'], // clip | background position
+     
+    _mg = _rd.concat(_bm,_tp), // a merge of all properties with px|%|em|rem|etc unit
+    _all = _cls.concat(_clp, _rd, _bm, _tp, _bg), al = _all.length,
+    _d = _d || {}; //all properties default values  
+ 
+  //populate default values object
+  for ( var i=0; i< al; i++ ){
+    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 ( _mg.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];  
+    }
+  }
+  
+  // create prepare/render functions for additional colors properties
+  for (var i = 0, l = _cls.length; i 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;
+      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;
       }
-    }
-    if (!curve) {
-      v = initialForce ? 0 : 1;
-    } else {
-      v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
-    }
-    return v;
+      At = A(frictionT,aS,aSt,fc);
+      angle = fq * (t - aS) * a + b;
+      return 1 - (At * Math.cos(angle));
+    };
+
+    return _kps.run;
   };
 
-  return _kpg.fn;
-};
-
-var _kpg = _kp.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
-_kp.forceWithGravity = function(o) {
-  var ops = o || {};
-  ops.initialForce = true;
-  return _kp.gravity(ops);
-};
+  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);
+  };
 
 
-// multi point bezier
-_kp.bezier = function(options) {
-  options = options || {};
-  var points = options.points,
-      returnsToSelf = false, Bs = [];
+  // 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;
@@ -207,96 +225,98 @@ _kp.bezier = function(options) {
       }
     };
     return _kpb.run;
-};
-
-var _kpb = _kp.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
+  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.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;
+  _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 !== null) {
-      break;
-    }
-  }
-  if (!B) {
+    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;
     }
+    xT = 0.0001; // xTolerance
+    lower = 0; upper = 1;
     percent = (upper + lower) / 2;
-    x = B(percent).x;
-    i++;
-  }
-  return B(percent).y;
-};
-  
-_kp.physicsInOut = function(options) {
-  var friction;
-  options = options || {};
-  friction = options.friction|| 500;
-  return _kp.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 } ] } ] });
-};
+    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;
+  };
 
-_kp.physicsIn = function(options) {
-  var friction;
-  options = options || {};
-  friction = options.friction|| 500;
-  return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
-};
+  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 } ] } ] });
+  };
 
-_kp.physicsOut = function(options) {
-  var friction;
-  options = options || {};
-  friction = options.friction|| 500;
-  return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, 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 } ] } ] });
+  };
 
-_kp.physicsBackOut = function(options) {
-  var friction;
-  options = options || {};
-  friction = options.friction|| 500;
-  return _kp.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.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 } ] }]  });
+  };
 
-_kp.physicsBackIn = function(options) {
-  var friction;
-  options = options || {};
-  friction = options.friction|| 500;
-  return _kp.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.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}]}]  });
+  };
 
-_kp.physicsBackInOut = function(options) {
-  var friction;
-  options = options || {};
-  friction = options.friction|| 500;
-  return _kp.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}]}]  });
-};
\ No newline at end of file
+  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;
+});
diff --git a/src/kute-svg.js b/src/kute-svg.js
new file mode 100644
index 0000000..fd9be6e
--- /dev/null
+++ b/src/kute-svg.js
@@ -0,0 +1,292 @@
+/* KUTE.js - The Light Tweening Engine
+ * package - SVG Plugin
+ * desc - draw strokes, morph paths and SVG color props
+ * 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") {
+    // 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.svg = window.KUTE.svg || factory(KUTE);
+  } else {
+    throw new Error("SVG Plugin require KUTE.js.");
+  }
+}( function (KUTE) {
+  'use strict';
+  
+  var K = window.KUTE, S = S || {}, p,
+    _svg = document.getElementsByTagName('path')[0],
+    _ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg',
+    _nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
+    _cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
+    trm = function(s){ if (!String.prototype.trim) { return s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } else { return s.trim(); }};
+  
+  if (_svg && !_svg.ownerSVGElement) {return;} // if SVG API is not supported, return
+    
+  // SVG MORPH
+  // get path d attribute or create a path with string value
+  S.getPath = function(e){
+    var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null;
+    if ( el && /path|glyph/.test(el.tagName) ) {
+      p.e = S.forcePath(el);
+      p.o = el.getAttribute('d');
+
+    } else if (!el && /[a-z][^a-z]*/ig.test(e)) { // maybe it's a string path already
+      var np = S.createPath(trm(e));
+      p.e = np;
+      p.o = e;
+    }
+    return p;
+  }
+  
+  S.pathCross = function(w){
+    // path tween options
+    this._mpr = w.morphPrecision || 25;  
+    this._midx = w.morphIndex; 
+    this._smi = w.showMorphInfo;
+    this._rv1 = w.reverseFirstPath;
+    this._rv2 = w.reverseSecondPath;
+    
+    var p1 = S.getOnePath(w._vS.path.o), p2 = S.getOnePath(w._vE.path.o), arr;
+    
+    arr = S._pathCross(p1,p2);
+
+    w._vS.path.d = arr[0];
+    w._vE.path.d = arr[1];
+  }
+
+  S._pathCross = function(s,e){
+    s = S.createPath(s); e = S.createPath(e);    
+    var arr = S.getSegments(s,e,this._mpr), s1 = arr[0], e1 = arr[1], arL = e1.length, idx;
+    
+    // reverse arrays
+    if (this._rv1) { s1.reverse(); }
+    if (this._rv2) { e1.reverse(); }
+
+    // determine index for best/minimum distance between points
+    if (this._smi) { idx = S.getBestIndex(s1,e1); }
+    
+    // shift second array to for smallest tween distance
+    if (this._midx) {
+      var e11 = e1.splice(this._midx,arL-this._midx);
+      e1 = e11.concat(e1);
+    }
+
+    // the console.log helper utility
+    if (this._smi) {
+      console.log( 'KUTE.js Path Morph Log\nThe morph used ' + arL + ' points to draw both paths based on '+this._mpr+' morphPrecision value.\n' 
+        + (this._midx ? 'You\'ve configured the morphIndex to ' + this._midx + ' while the recommended is ' + idx+ '.\n' : 'You may also consider a morphIndex for the second path. Currently the best index seems to be ' + idx + '.\n')
+        + (
+            !this._rv1 && !this._rv2 ? 'If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.' :
+            'You\'ve chosen that the first path to have ' + ( this._rv1  ? 'REVERSED draw direction, ' : 'UNCHANGED draw direction, ') + 'while second path is to be ' + (this._rv2 ? 'REVERSED.\n' : 'UNCHANGED.\n')
+          )
+      );
+    }
+    
+    s = e = null;
+    return [s1,e1]
+  }
+
+  S.getSegments = function(s,e,r){
+    var s1 = [], e1 = [], le1 = s.getTotalLength(), le2 = e.getTotalLength(), ml = Math.max(le1,le2),
+      d = r, ar = ml / r, j = 0, sl = ar*r; // sl = sample length
+
+    // populate the points arrays based on morphPrecision as sample size
+    while ( (j += r) < sl ) {
+      s1.push( [s.getPointAtLength(j).x, s.getPointAtLength(j).y]);
+      e1.push( [e.getPointAtLength(j).x, e.getPointAtLength(j).y]);
+    }
+    return [s1,e1];
+  }    
+  
+  S.getBestIndex = function(s,e){
+    var s1 = S.clone(s), e1 = S.clone(e), d = [], i, r = [], l = s1.length, t, ax, ay;
+    for (i=0; i 2) {
+       return trm(a[0]) + 'z';
+    } else { return trm(p); }
+  }
+
+  S.createPath = function (p){
+    var c = document.createElementNS(_ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p; 
+    c.setAttribute('d',d); return c;
+  }
+  
+  S.forcePath = function(p){
+    if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future 
+      var c = S.createPath(p); p.parentNode.appendChild(c); return c;
+    } 
+    return p;
+  }
+  
+  S.clone = function(obj) {
+    var copy;
+
+    // Handle Array
+    if (obj instanceof Array) {
+      copy = [];
+      for (var i = 0, len = obj.length; i < len; i++) {
+        copy[i] = S.clone(obj[i]);
+      }
+      return copy;
+    }
+
+    // Handle Object
+    if (obj instanceof Object) {
+      copy = {};
+      for (var attr in obj) {
+        if (obj.hasOwnProperty(attr)) {
+          copy[attr] = S.clone(obj[attr]);
+        }
+      }
+      return copy;
+    }
+
+    return obj;
+  }  
+  
+  // register the render SVG path object  
+  // process path object and also register the render function
+  K.pp['path'] = function(a,o,l) {
+    if (!('path' in K.dom)) {
+      K.dom['path'] = function(w,p,v){    
+        var curve =[], i, l;
+
+        for(i=0,l=w._vE.path.d.length;i 1 ? 1 : e;
-		
-		//render the CSS update
-		K.r(this,this._e(e));
-		
-		if (this._uC) { this._uC.call(); }
-
-		if (e === 1) {	
-			if (this._r > 0) {
-				if ( this._r !== Infinity ) { this._r--; }			
-				
-				if (this._y) { this.reversed = !this.reversed; this.reverse(); } // handle yoyo
-					
-				this._sT = (this._y && !this.reversed) ? t + this._rD : t; //set the right time for delay
-				return true;				
-			} else {
-				
-				if (this._cC) { this._cC.call(); }
-				
-				//stop preventing scroll when scroll tween finished 
-				this.scrollOut();
-				var i = 0, ctl = this._cT.length;
-				for (i; i < ctl; i++) {
-					this._cT[i].start(this._sT + this._dr);
-				}
-				
-				//stop ticking when finished
-				this.close();					
-				return false;
-			}
-		}
-		return true;
-	};
-				
-	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 = 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.resume = function () { this.play(); 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];		
-			}
-		}
-		return this;		
-	};
-	
-	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);
-	};
-	
-	w.prS = function () { //prepare valuesStart for .to() method
-		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 0) { self._r = self.repeat; }
-			if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; }
-			self.playing = false;
-		},100)
-	};
-				
-	// 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 0) {
+        if ( w._r < 9999 ) { w._r--; }      
+        
+        if (w._y) { w.reversed = !w.reversed; w.rvs(); } // 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;
+  };
+  
+  // internal ticker
+  K._tk = function (t) {
+    var i = 0, tl; 
+    _t = _raf(K._tk);
+    while ( i < (tl = _tws.length) ) {
+      if ( K._u(_tws[i],t) ) {
+        i++;
+      } else {
+        _tws.splice(i, 1);
+      }
+    }
+  };
+  
+  // 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; }; 
+  
+  // register functions for the render object K.dom(w, p, w._e(e));
+  K._queue = function (w) {
+    for ( var p in w._vE ) {
+      var cls = _cls.indexOf(p) !== -1, 
+        bm = _bm.indexOf(p) !== -1,
+        sc = _sc.indexOf(p) !== -1,
+        op = _op.indexOf(p) !== -1,
+        tf = p === 'transform';
+      if ( bm && (!(p in K.dom)) ) {
+        K.dom[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 (tf && (!(p in K.dom)) ) {
+
+        K.dom[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.dom)) ) {
+        K.dom[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( _c.r, _c.g, _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.dom)) ) {
+        K.dom[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 ( op && (!(p in K.dom)) ) {
+        if (_isIE8) {
+          K.dom[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.dom[p] = function(w,p,v) {
+            w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
+          };
+        }
+      }
+    }
+  };
+    
+  // process properties for _vE and _vS or one of them
+  K.prP = function (e, s, l) {
+    var i, pl = arguments.length, _st = []; pl = pl > 2 ? 2 : pl;
+
+    for (i=0; i 0) { self._r = self.repeat; }
+      if (self._y && self.reversed===true) { self.rvs(); self.reversed = false; }
+      self.playing = false;
+    },64)
+  };
+
+  // the multi elements Tween constructs
+  K.TweensTO = 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.TweensTO.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.chain = function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; }
+  ws.play = ws.resume = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; }
+
+  return K;
+}));
\ No newline at end of file
diff --git a/start.html b/start.html
new file mode 100644
index 0000000..1f274a5
--- /dev/null
+++ b/start.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    Getting Started with KUTE.js | Javascript Animation Engine
+	
+    
+    
+	
+    
+    
+
+	
+    
+		
+	
+		
+
+    
+    
+    
+	
+	
+	
+
+
+
+  
    
+  
+  
    
+ 
+	
    
+      
    
+		
    KUTE.js
    
+		
+      
    
+    
    
+
+	
    		
+		
+		
    Getting Started
    
+		
    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 detail. KUTE.js can be found on CDN and also npm and Bower repositories with all it's features and tools.
    
+
+		
    Bower and NPM
    
+		
    You can install KUTE.js package by using either Bower or NPM.
    
+
    $ npm install --save kute.js
+# Or
+$ bower install --save kute.js
+
    
+
+		
    Websites
    
+		
    In your website add the following code, the best would be to put it at the end of your body tag:
    
+
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute.min.js"></script> <!-- core KUTE.js -->
    
+
+		
    Also you can include the tools that you need for your project:
    
+
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+
    
+		
    Your awesome animation coding would follow after these script links.
    		
+		
+		
    Targeting Legacy Browsers
    
+		
    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 transform property or RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more information.
     
+		
    Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and here is the full refference on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.
    
+
+
+		
+		
+	
    
+	  
+      
+     
+
+ 
    
+ 
+
+
+
+	
+
+
+	
+
+
+
+ 
+ 
+
+
diff --git a/svg.html b/svg.html
new file mode 100644
index 0000000..eb3fba0
--- /dev/null
+++ b/svg.html
@@ -0,0 +1,370 @@
+
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    KUTE.js SVG Plugin | Javascript Animation Engine
+	
+    
+    
+	
+    
+    
+
+	
+    
+		
+	
+	
+    
+    
+    	
+	
+	
+
+
+
+  
    
+  
+  
    
+ 
+	
    
+      
    
+		
    KUTE.js
    
+		
+      
    
+    
    
+
+	
    
+		
    SVG Plugin
    
+		
    The SVG Plugin for KUTE.js extends the core engine and enables animation for various CSS properties specific to SVG elements as well as morphing path shapes. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.
    
+        
    Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG.
    
+		
    Shape Morphing
    
+        
    One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). The plugin is packed with specific tween options to help you improve the morph animation:
    
+        
      
+            
    • showMorphInfo: true when true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for serious performance reasons.
      • 
+            
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 25 but the D3.js example uses 4.
      • 
+            
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is not set.
      • 
+            
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape. By default this option is false.
      • 
+            
    • reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape. By default this option is also false.
      • 
+        
    
+        
    Basic Example
    
+		
    In the first morph example we are going to go through some basic steps on how to setup and how to improve the morph animation. Our demo is a morph from a rectangle into a star, so first let's create an SVG element with two paths, first is going to be visible, filled with color, while second is going to be hidden. The first path is the start shape and the second is the end shape, you guessed it, and we can also add some ID to the paths so we can easily target them with our code.
    
+
    <svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+    <path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
+    <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
+</svg>
+
    
+        
    Now we can apply both .to() and fromTo() methods:
    
+
    // the fromTo() method
+var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
+
+// OR
+
+// the to() method will take the path's d attribute value and use it as start value
+var tween = KUTE.to('#rectangle', { path: '#star' }).start(); 
+
+// OR
+
+// simply pass in a valid path string without the need to have two paths in your SVG
+var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start(); 
+
    		
+
+		
    For all the above tween objects the animation should look like this:
    
+
+		
    
+            
+                
+                
+                        
+			
    
+				Start	
+			
    
+		
    
+		
+		
    As you can see, the animation could need some fine tunning. Let's open the console, and this time we'll pass in the showMorphInfo: true tween option that will help us find the best possible morph as performance and visual. Have a look:
    			
+
+
    // let's check the morph info again
+var tween = KUTE.to('#rectangle', { path: '#star' }, {showMorphInfo: true}).start();
+
+// The console log should show you this
+/* ------------------------------------
+KUTE.js Path Morph Log
+The morph used 92 points to draw both paths based on 25 morphPrecision value.
+You may also consider a morphIndex for the second path. Currently the best index seems to be 79.
+If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.
+*/
+
    
+
+		
    Next, we're going to set the morphIndex: 79 and we will get an improved morph.
    			
+		
    
+            
+                
+                
+                        
+	
+			
    
+				Start	
+			
    
+		
    
+		
    Much better! You can play with morphIndex value, maybe you can get an even better or more interesting morph.
    
+        
+        
    Multi Path Example
    
+        
    In other cases, you may want to morph multiple paths at the same time. Let's have a look at the following paths:
    			
+
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+    <path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096	c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z 
+        M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z 
+        M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z
+        M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
+     <path d="M0.175 256l-0.175-156.037 192-26.072v182.109z
+        M224 69.241l255.936-37.241v224h-255.936z
+        M479.999 288l-0.063 224-255.936-36.008v-187.992z
+        M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>   
+</svg>
+
    
+       	
    As you can see, both these paths have additional subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.
    
+
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+    <path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
+    <path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
+    <path id="w13" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
+    <path id="w14" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
+    
+    <path id="w21" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
+    <path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
+    <path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
+    <path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/> 
+</svg>
+
    
+        
    After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: w11 to w24, w13 to w21, w14 to w22 and w12 to w23.
    
+        
    Now we can write the tween objects and get to working:
    
+
    var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
+var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
+var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
+var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
+
    
+
+        
    As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a few minutes of tweaking the options, here's what we should see:
    
+       
+		
    
+            
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                        
+	
+			
    
+				Start	
+			
    
+		
           
+        
    This final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the svg.js for a full code review.
    
+        
+        
    Complex Example
    
+        
    The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths. In that case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example. So without further talking, let's get into it:
    
+       
+		
    
+            
+                
+                
+                
+                
+                     
+                
+                
+                
+                
+            
+	
+			
    
+				Start	
+			
    
+		
    
+        
    While there are other tools such as SVGMorpheus to enable this kind of multi-path morph, they lack in options to improve the visual and performance. The demos look acceptable in most cases, but the SVGs were manually prepared/optimized which makes it pretty much unusable on a broader horizon. Again, the SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a better solution.
    
+        
+        
    Recommendations
    
+        
      
+           
    • The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.
      • 
+           
    • When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.
      • 
+           
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost any value, including the default value.
      • 
+           
    • Faster animation speed could be a great trick to hide any polygonal "artefacts".
      • 
+           
    • Always use the showMorphInfo:true tween option to check how the values required for the morph change with every new option value, but never forget to disable it after you have optimized the morph to your liking, this option enables a function that detects the best index for points rotation that is very expensive and delays the animation for quite some time.
      • 
+        
    
+        
+		
    Drawing Stroke
    
+		
    Next, we're going to animate the stroke of a <path> element, as this type of animation only works with this kind of SVG elements because it's the only one that supports the .getTotalLength() method. Here some code examples:
    
+
    // draw the stroke from 0-10% to 90-100%
+var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
+    
+// draw the stroke from zero to full path length
+var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
+    
+// draw the stroke from full length to 50%
+var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
+
    
+		
    We're gonna chain these tweens and start the animation real quick.
    		
+		
    
+            
+                            
+            
+	
+			
    
+				Start	
+			
    
+		
    
+		
    Remember: the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% as start value for your tweens when stroke-dasharray and stroke-dashoffset are not set.
    				
+
+		
    CSS Properties
    
+		
    As you probably noticed in the above examples we've animated the background color for some of the shapes, that is fill, one of the properties supported by the SVG Plugin, so let's create some tweens real quick:
    
+
    // fill HEX/RGBa
+var tween1 = KUTE.to('selector', {fill: '#069'});
+    
+// fillOpacity Number 0-1
+var tween2 = KUTE.to('selector',{fillOpacity: 0.2});
+
+// stroke HEX/RGBa
+var tween3 = KUTE.to('selector',{stroke: 'rgba(00,66,99,0.8)'});
+    
+// strokeOpacity Number 0-1
+var tween4 = KUTE.to('selector',{strokeOpacity: 0.6});
+    
+// strokeWidth Number
+var tween5 = KUTE.to('selector',{strokeWidth: 10});
+
           
+        
    A quick demo with the above:
    
+		
    
+            
+                            
+            
+	
+			
    
+				Start	
+			
    
+		
    
+        
+        
    Now let's have a look at gradients, here we can animate the stopColor defined within the SVG's <linearGradient> element.
     
+
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%" style="stop-color: #ffd626; stop-opacity:1"></stop>
+    <!-- our tween object targets the element below -->
+    <stop id="myStopColor" offset="100%" style="stop-color: #FF5722; stop-opacity:1"></stop> 
+</linearGradient>
+
    
+
    // stopColor HEX/RGBa
+var tween6 = KUTE.to('#myStopColor',{stopColor: 'rgb(00,66,99)'});
+
    
+
+        
    Same as above, for stopOpacity we also target the right element defined within the SVG's <linearGradient> element.
    
+
    <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%" style="stop-color: #2196F3; stop-opacity:1"></stop>
+    <!-- our tween object targets the element below -->
+    <stop id="myStopOpacity" offset="100%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
+</linearGradient>
+
    
+
    // stopOpacity Number 0-1
+var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
+
    
+        
+		
    
+            
+                
+                    
+                    
+                    
+                    
+                
+                            
+            
+            
+                
+                    
+                    
+                    
+                    
+                   
+                            
+            
+			
    
+				Start	
+			
    
+		
    
+        
    The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.
    
+	
    
+
+      
+     
+
+ 
    
+ 
+
+
+
+	
+
+
+
+
+
+ 
+ 
+ 
+ 
+
+
\ No newline at end of file

From ba36c3bf310bc766caacf084075e7dd87884a494 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 16 Mar 2016 16:28:07 +0200
Subject: [PATCH 034/187]

---
 svg.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/svg.html b/svg.html
index eb3fba0..b94beb2 100644
--- a/svg.html
+++ b/svg.html
@@ -238,6 +238,7 @@ var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
            
  • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost any value, including the default value.
    • 
            
  • Faster animation speed could be a great trick to hide any polygonal "artefacts".
    • 
            
  • Always use the showMorphInfo:true tween option to check how the values required for the morph change with every new option value, but never forget to disable it after you have optimized the morph to your liking, this option enables a function that detects the best index for points rotation that is very expensive and delays the animation for quite some time.
    • 
+           
  • The SVG morph performance is the same for both .to() and .fromTo() methods because the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the morph will always start later.
    • 
         
         
 		
    Drawing Stroke
    

From ccd18a2855d96cb55f692b79e8dd5d1258d525d9 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 17 Mar 2016 09:00:32 +0200
Subject: [PATCH 035/187] typo

---
 extend.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extend.html b/extend.html
index 1458934..d73d024 100644
--- a/extend.html
+++ b/extend.html
@@ -224,7 +224,7 @@ K.pp['boxShadow'] = function(property,value,element){
 
   // processProperty for boxShadow, builds basic structure with ready to tween values
   if (typeof value === 'string'){
-    var color, inset = false;
+    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;
@@ -298,7 +298,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
  • KUTE.truD(value) a function that accepts String and Number and returns a {v: 150, u: 'px'} object for any box model or a single numeric value based property and make it ready to tween.
    • 
             
  • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color, the IE9+ browsers will be able to return the rgb object we need.
    • 
             
  • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
    • 
-            
  • KUTE.rth(rgb) a function that accepts RGBa formatted colors and returns a #006699 color string;
    • 
+            
  • KUTE.rth(rgb) a function that accepts RGBa formatted colors and returns a #006699 color string.
    • 
                
 
 		       
 
 		
             
@@ -58,6 +59,7 @@
                 
@@ -88,8 +90,8 @@
 		
 		
    Basically, this is it!
    
 		
-		
    A Word On Performance
    
-		
    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.
    
+		
    A Note On Performance
    
+		
    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. We'll dig into each case, by property type or anything that can be considered a factor of influence.
    
 		
 		
    Function Nesting
    
 		
    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 click, scroll or resize, 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 resize.
     
@@ -107,7 +109,7 @@
 		
    Box Model
    
 		
    We compared position with transition above, but now we are going to talk about other issues related to resizers: width, height, margin, padding and borderWidth 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 all browsers, especially when you animate these resize properties. When this toxic combination occurs animating a large amount of elements to animate could crash any browser, no exception, and I think any developer should know about this.
    
 		
    The resize event triggered by these resizer properties can cause some severe issues with legacy browsers 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.
     
-		
    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.
    
+		
    A workaound for 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 elements themselves. 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.
    
 		
 		
    RGB and HEX
    
 		
    When animating any color property such as (text) color or background-color, KUTE.js always uses/converts to RGB/RGBA, but there is a keepHex:true 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 RGB the winner.
    
@@ -123,6 +125,10 @@
 		
    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.
    		
 		
    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 page.
    
 	
+		
    Property Value Complexity
    
+		
    Just like the high amount of simultaneous animations influence performance, the property value complexity is also an important factor. If we were to compare all the supported properties in terms of complexity, the list would go like this (from most expensive to least): path morphing, regular transform, matrix3d (not yet supported), box-shadow / text-shadow,  colors, box model*, unitless props (scroll, opacity).
    
+        
    The * wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.
    
+        
 		
    OSs, Desktops and Mobiles
    
 		
    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).
     
 		
    The results show Windows 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!
    
@@ -141,7 +147,7 @@
 		
    KUTE.js Project
    
 		
    KUTE.js continues what was started with jQueryTween (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.
    
 		
    It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, GSAP, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, and a very tough competitor.
    
-		
    In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & 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.
    
+		
    In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, Text Plugin, 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.
    
 		
    Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.
    
 		
 		
             			
@@ -69,6 +70,7 @@
                 
@@ -219,56 +221,6 @@ tween2.chain(tweensCollection2.tweens);
 
    
 	
    
 
-	
    
-		
    Tween Options
    
-		
    Common Options
    
-		
    These options affect all types of tweens, no matter the properties used or context.
    
-		
    duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.
    
-		
    repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
    
-		
    delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.
    
-		
    offset: 200 option is only for .allTo() and .allFromTo() 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 0.
    
-		
    repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.
    		
-		
    yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value 1. The default value is false.
    
-		
    easing: 'easingCubicInOut' 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 linear.
    
-
-		
    Transform Options
    
-		
    These options only affect animation involving any property from CSS3 transform specs and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.
    
-		
    perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element that is subject to transform animation. No default value.
    
-		
    perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.
    
-		
    parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.
    
-		
    parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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.
    
-		
    transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.
    
-
-		
    SVG Options
    
-		
    These options only affect animation of the path tween property, or what you know as SVG morphing.
     
-        
-		
    showMorphInfo: true when true the script will log valuable information about the morph in order to help you maximize both performance and visuals of the morph.
    
-		
    morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption.
    
-		
    morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".
    
-		
    reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.
    
-		
    reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.
    
-
-		
    Callback Options
    
-		
    These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.
    
-		
    start: function option allows you to set a function to run once tween animation starts.
    
-		
    update: function option allows you to set a function to run on every frame.
    
-		
    pause: function option allows you to set a function to run when animation is paused.
    
-		
    resume: function option allows you to set a function to run when animation is resumed.
    
-		
    stop: function option allows you to set a function to run when animation is stopped.
    
-		
    complete: function option allows you to set a function to run when animation is finished.
    
-		
    A quick example would look like this:
    
-
    //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();
-
    		
-		
    Other
    
-		
    keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.
    
-	
    
-
 	
    		
 
 		
             
@@ -68,6 +69,7 @@
                 
diff --git a/css.html b/css.html
index 44cd036..c0b5a45 100644
--- a/css.html
+++ b/css.html
@@ -60,6 +60,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             
@@ -68,6 +69,7 @@
                 
diff --git a/easing.html b/easing.html
index 6d72c3f..312ec81 100644
--- a/easing.html
+++ b/easing.html
@@ -14,7 +14,7 @@
     
      
 
-    KUTE.js Developer API | Javascript Animation Engine
+    KUTE.js Easing Functions | Javascript Animation Engine
 	
     
     
@@ -61,6 +61,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             			
@@ -69,6 +70,7 @@
                 
diff --git a/examples.html b/examples.html
index c21fd37..6b64764 100644
--- a/examples.html
+++ b/examples.html
@@ -14,7 +14,7 @@
     
      
 
-    KUTE.js Examples | Javascript Animation Engine
+    KUTE.js Core Engine Examples | Javascript Animation Engine
 	
     
     
@@ -59,6 +59,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             
@@ -67,6 +68,7 @@
                 
diff --git a/extend.html b/extend.html
index 1547b15..5c2b3a5 100644
--- a/extend.html
+++ b/extend.html
@@ -61,6 +61,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             			
@@ -69,6 +70,7 @@
                 
@@ -86,9 +88,10 @@
 		
    Basic Plugin Template
    
 		
    The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:
    
 
    /* KUTE.js - The Light Tweening Engine
+ * by dnp_theme
  * package - pluginName
  * desc - what your plugin does
- * by yourNickname aka YOUR NAME
+ * pluginName by yourNickname aka YOUR NAME
  * Licensed under MIT-License
  */
 
diff --git a/features.html b/features.html
index 647a968..a214d9e 100644
--- a/features.html
+++ b/features.html
@@ -58,6 +58,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             
@@ -66,6 +67,7 @@
                 
@@ -123,13 +125,13 @@
 		
    Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: .start(), .stop(), .pause() and .resume(). These public methods work either when animation is not running, running or is paused. You need to see the documentation to learn how these work.
     
 		
 		
    Tween Options
    
-		
    Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or a perspective-origin, right?
    
+		
    Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or a perspective-origin, right? Well, make sure to check that out.
    
 		
 		
    Callback System
    
 		
    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.
    
 
 		
    Addons
    
-		
    KUTE.js sports some fine tuned addons: jQuery Plugin, cubic bezier easing functions and also physics based easing functions. It also features an attributes plugin as well as a SVG plugin for various awesome stuff, but I'm open for more features in the future.
    
+		
    KUTE.js sports some fine tuned addons: jQuery Plugin, SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic bezier easing functions and also physics based easing functions. It also features an extensive guide on how to extend, but I'm open for more features in the future.
    
 		
 		
    Check the documentation on these methods and the examples page for more.
    
 	
    
diff --git a/index.html b/index.html
index ddee711..314739e 100644
--- a/index.html
+++ b/index.html
@@ -58,6 +58,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             
@@ -66,6 +67,7 @@
                 
@@ -79,10 +81,10 @@
 	
    	
 		
    
 			
    
-				
    
-					
    Welcome Developers!
    
-					
    KUTE.js is a Javascript animation engine with top performance, memory efficient & modular code. It delivers a whole bunch of tools to help you create great custom animations.
     
-					
    	
+				
    
+					
    
+					
     
+					
    	
 						Download
 						Github
 						CDN
@@ -122,7 +124,7 @@
 				
    
 				
    
 					
    Prefix Free
    
-					
    KUTE.js can detect if the user's browser requires prefix and uses it accordingly for requestAnimationFrame, transform and border-radius, hustle free for older Gecko/Webkit/IE browsers.
    
+					
    KUTE.js can detect if the user's browser requires prefix and uses it accordingly for transform and border-radius, and even use the utilities yourself, so hustle free for older Gecko/Webkit/IE browsers.
    
 				
    
 			
    
 			
    
@@ -132,17 +134,17 @@
 				
    
 				
    
 					
    Powerful Methods
    
-					
    KUTE.js allows you to create tweens and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum tween options.
    
+					
    KUTE.js allows you to create tweens and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum tween options.
    
 				
    
 			
    
 			
    
 				
    
 					
    Packed With Tools
    
-					
    KUTE.js comes with tools to help you configure awesome animations: SVG Plugin, jQuery plugin, cubic-bezier and physics easing functions, color convertors, and you can even extend it yourself.
    
+					
    KUTE.js comes with tools to help you configure awesome animations: CSS / SVG / ATTR Plugins, jQuery plugin, easing functions, color convertors, and you can even extend it yourself.
    
 				
    
 				
    
 					
    Plenty Of Properties
    
-					
    KUTE.js covers all animation needs such as SVG morph and other specific CSS properties, then transform, scroll, border-radius, and almost the full box model and also text properties.
    
+					
    KUTE.js covers all animation needs such as SVG morph and other specific CSS properties, then transform, scroll, border-radius, and almost the full box model and also text properties.
    
 				
    
 			
    
 			
    	
@@ -169,7 +171,7 @@
 			
    
 				
 				
    Documentation
    
-				
    The API documentation is here for you to get you started.
    
+				
    The API documentation is here for you to get you started.
    
 			
    
 
 			
    
@@ -208,6 +210,7 @@
 
  
  
+ 
  
  
 
diff --git a/options.html b/options.html
new file mode 100644
index 0000000..65310af
--- /dev/null
+++ b/options.html
@@ -0,0 +1,179 @@
+
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    KUTE.js Tween Options | Javascript Animation Engine
+	
+    
+    
+	
+    
+    
+
+	
+    
+		
+	
+		
+
+    
+    
+    
+	
+	
+	
+
+
+
+  
    
+  
+  
    
+ 
+	
    
+      
    
+		
    KUTE.js
    
+		
+      
    
+    
    
+
+	
    
+		
    Tween Options
    
+		
    Common Options
    
+        
    These options affect all types of tweens, no matter the properties used or context.
    
+        
      
+            
    • duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.
      • 
+            
    • repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
      • 
+            
    • delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.
      • 
+            
    • offset: 200 option is only for .allTo() and .allFromTo() 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 0.
      • 
+            
    • repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.
      • 		
+            
    • yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value 1. The default value is false.
      • 
+            
    • easing: 'easingCubicInOut' 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 linear.
      • 
+        
    
+
+		
    Transform Options
    
+		
    These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.
    
+        
      
+            
    • perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
      • 
+            
    • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.
      • 
+            
    • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.
      • 
+            
    • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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.
      • 
+            
    • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.
      • 
+        
    
+
+		
    SVG Plugin Options
    
+		
    The following options only affect animation of the path tween property, to customize the SVG morph animation. See SVG Plugin page.
    
+        
      
+            
    • showMorphInfo: true when true the script will log information about the morph in order to help you maximize/customize the morph.
      • 
+            
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.
      • 
+            
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".
      • 
+            
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.
      • 
+            
    • reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.
      • 
+        
    
+
+		
    Text Plugin Options
    
+		
    The only option for the plugin is the textChars option for the text property and allows you to set the characters set for the scrambling character during the animation. See Text Plugin page for more instructions and demo.
    
+        
+		
    Callback Options
    
+        
    These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.
    
+        
      
+            
    • start: function option allows you to set a function to run once tween animation starts.
      • 
+            
    • update: function option allows you to set a function to run on every frame.
      • 
+            
    • pause: function option allows you to set a function to run when animation is paused.
      • 
+            
    • resume: function option allows you to set a function to run when animation is resumed.
      • 
+            
    • stop: function option allows you to set a function to run when animation is stopped.
      • 
+            
    • complete: function option allows you to set a function to run when animation is finished.
      • 
+        
    
+        
+		
    A quick example would look like this:
    
+
    //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();
+
    		
+		
    Other
    
+		
    keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.
    
+	
    
+
+	
    		
+
+		
+		
+	
    
+	  
+      
+     
+
+ 
    
+ 
+
+
+
+	
+
+
+	
+
+
+
+ 
+ 
+
+
diff --git a/properties.html b/properties.html
index 595829c..e0b557e 100644
--- a/properties.html
+++ b/properties.html
@@ -57,6 +57,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             
@@ -65,6 +66,7 @@
                 
@@ -160,7 +162,7 @@
 		
    The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.
    
 		
    The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.
    
         
-		
    Text Properties
    
+		
    Typography Properties
    
 		
    The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.
    
 		
      
 			
    • fontSize allows you to animate the font-size for a given element.
      • 
@@ -173,7 +175,14 @@
 		
      Scroll Animation
      
 		
      KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than offsetHeight). Both scroll: 150 or scrollTop: 150 notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks.
      		
 
-		
      Other properties
      
+		
      String Properties
      
+		
        
+			
      • number allows you to tween a number either from 0 or from a current value and updates the innerHTML for a given target. Eg. number:1500
        • 
+			
      • text allows you to write a string one character at a time followed by a scrambling character. Eg. text: 'A demo with <b>substring</b>'. 
        • 
+		
      
+        
      See Text Plugin for details.
      
+
+		
      Other Properties
      
 		
        
 			
      • clip allows you to animate the clip property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]. See spec for details.
        • 
 			
      • backgroundPosition allows you to animate the background-position for a given element that uses a background image. It only uses % as measurement unit. Eg. backgroundPosition:[50,20]
        • 
diff --git a/src/kute-css.js b/src/kute-css.js
index 793d46f..12d6261 100644
--- a/src/kute-css.js
+++ b/src/kute-css.js
@@ -17,8 +17,8 @@
   }
 })(function(KUTE){
   var K = window.KUTE, p,
-    _br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'),
-    _brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'), // all radius props prefixed
+    _br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'), // all radius props prefixed
+    _brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'),
     _cls = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
     _rd  = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
     _bm  = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
@@ -45,7 +45,7 @@
     }
   }
   
-  // create prepare/render functions for additional colors properties
+  // create prepare/process/render functions for additional colors properties
   for (var i = 0, l = _cls.length; i,./?\=-").split(""), // symbols
+    _n = String("0123456789").split(""), // numeric
+    _a = _s.concat(_S,_n), // alpha numeric
+    _all = _a.concat(_sb), // all caracters
+    _r = Math.random, _f = Math.floor, _m = Math.min;
+
+  K.prS['text'] = K.prS['number'] = function(l,p,v){
+    return l.innerHTML;
+  }
+    
+  K.pp['text'] = function(p,v,l) {
+    if ( !( 'text' in K.dom ) ) {
+      K.dom['text'] = function(w,p,v) {
+        var tp = tp || w.textChars === 'alpha' ? _s // textChars is alpha
+            : w.textChars === 'upper' ? _S  // textChars is numeric
+            : w.textChars === 'numeric' ? _n  // textChars is numeric
+            : w.textChars === 'alphanumeric' ? _a // textChars is alphanumeric
+            : w.textChars === 'symbols' ? _sb // textChars is symbols
+            : w.textChars ? w.textChars.split('') // textChars is a custom text
+            : _s, l = tp.length, s = w._vE[p], 
+            t = tp[_f((_r() * l))], tx = '', f = s.substring(0); 
+
+        tx = f.substring(0,_f(_m(v * f.length, f.length)));
+        w._el.innerHTML = v < 1 ? tx+t : tx;
+      }
+    }
+    return v;
+  }
+    
+  K.pp['number'] = function(p,v,l) {
+    if ( !( 'number' in K.dom ) ) {
+      K.dom['number'] = function(w,p,v) {
+        w._el.innerHTML = parseInt(w._vS[p] + (w._vE[p] - w._vS[p]) * v);
+      }
+    }
+    return parseInt(v) || 0;
+  }
+
+  return this;
+}));
\ No newline at end of file
diff --git a/start.html b/start.html
index 1f274a5..ab0e7a7 100644
--- a/start.html
+++ b/start.html
@@ -61,6 +61,7 @@
                     
      • Core Engine
        • 
                     
      • CSS Plugin 
        • 
                     
      • SVG Plugin 
        • 
+                    
      • Text Plugin 
        • 
                     
      • Attributes Plugin 
        • 
                 
      
             			
@@ -69,6 +70,7 @@
                 
diff --git a/svg.html b/svg.html
index b94beb2..6f76842 100644
--- a/svg.html
+++ b/svg.html
@@ -59,6 +59,7 @@
                     
    • Core Engine
      • 
                     
    • CSS Plugin 
      • 
                     
    • SVG Plugin 
      • 
+                    
    • Text Plugin 
      • 
                     
    • Attributes Plugin 
      • 
                 
    
             
@@ -67,6 +68,7 @@
                 
diff --git a/text.html b/text.html
new file mode 100644
index 0000000..2e686ee
--- /dev/null
+++ b/text.html
@@ -0,0 +1,170 @@
+
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    KUTE.js Text Plugin | Javascript Animation Engine
+	
+    
+    
+	
+    
+    
+
+	
+    
+		
+	
+	
+
+    
+    
+	
+	
+	
+    
+
+
+
+  
    
+  
+  
    
+ 
+	
    
+      
    
+		
    KUTE.js
    
+		
+      
    
+    
    
+
+	
    
+		
    Text Plugin
    
+		
    The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by character with a very cool effect.
    
+
+
    // basic synthax for number increments
+var myNumberTween = KUTE.to('selector', {number: 1500}); // this assumes it will start from current number or from 0
+
+// OR text writing character by character
+var myTextTween = KUTE.to('selector', {text: 'A text string with other <span>substring</span> should do.'});
+
    
+
+        
    The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is advised. With other words, try to limit the number of simultaneus text animations.
    
+        
+		
    Number Incrementing/Decreasing
    
+		
    In the first example, let's animate a number, approximatelly as written above:
         
+		
    
+            
    Total number of lines: 0
    
+	
+			
    
+				Start	
+			
    
+		
    
+		
    The button action will toggle the valuesEnd value for the number property, because tweening a number to itself would produce no effect.
         
+                
+		
    Writing Text
    
+		
    This feature come with a additional tween option called textChars for the scrambling text character:
     
+        
      
+            
    • alpha use lowercase alphabetical characters, the default value
      • 
+            
    • upper use UPPERCASE alphabetical characters
      • 
+            
    • numeric use numerical characters
      • 
+            
    • symbols use symbols such as #, $, %, etc.
      • 
+            
    • all use all alpha numeric and symbols.
      • 
+            
    • YOUR CUSTOM STRING use your own custom characters; eg: 'KUTE.JS IS #AWESOME'.
      • 
+        
    
+		
    
+            
    Click the Start button on the right.
    
+	
+			
    
+				Start	
+			
    
+		
    
+        
    Keep in mind that the yoyo feature will NOT un-write / delete character by character the string, but will write the previous text instead.
    
+		
+        
    Combining Both
    
+		
    
+            
    
+			    
    
+                    
    0
    
+	            
    
+			    
    
+                    
    Clicks so far?
    
+	            
    
+			
    
+			
    
+				Start
+		    
    
+		
    
+        
    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!
    
+        
+
+	
    
+
+      
+     
+
+ 
    
+ 
+
+
+
+	
+
+
+
+
+
+ 
+ 
+ 
+ 
+
+
\ No newline at end of file

From c1e1d06a9f6478ca6259f0d00e2f0f480bd2b8f6 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 18 Mar 2016 19:18:55 +0200
Subject: [PATCH 038/187]

---
 start.html | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/start.html b/start.html
index ab0e7a7..8159b2c 100644
--- a/start.html
+++ b/start.html
@@ -92,6 +92,32 @@
 $ bower install --save kute.js
    +

    Require and CommonJS

    +
    // CommonJS style
+var kute = require("kute.js"); //grab the core
+require("kute.js/kute-svg"); // Add SVG Plugin
+require("kute.js/kute-css"); // Add CSS Plugin
+require("kute.js/kute-attr"); // Add Attributes Plugin
+require("kute.js/kute-text"); // Add Text Plugin
+require("kute.js/kute-bezier"); // Add Bezier Easing
+require("kute.js/kute-physics"); // Add Physics Easing
+
    + +
    // AMD style
+define([
+    "kute.js",
+    "kute.js/kute-jquery.js", // optional for jQuery apps
+    "kute.js/kute-svg.js", // optional for SVG morph, draw and other SVG related CSS
+    "kute.js/kute-css.js", // optional for additional CSS properties
+    "kute.js/kute-attr.js", // optional for animating presentation attributes
+    "kute.js/kute-text.js" // optional for string write and number incrementing animations
+    "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){
+    // ...
+});
+
    +

    Websites

    In your website add the following code, the best would be to put it at the end of your body tag:

    <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute.min.js"></script> <!-- core KUTE.js -->
    @@ -102,6 +128,7 @@ $ bower install --save kute.js <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-physics.min.js"></script> <!-- Physics Easing Functions --> <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-css.min.js"></script> <!-- CSS Plugin --> <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-svg.min.js"></script> <!-- SVG Plugin --> +<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-text.min.js"></script> <!-- Text Plugin --> <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->

    Your awesome animation coding would follow after these script links.

    From b7b82afb6ca1e2c7fc3213a3072d6672dd46c51b Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 19 Mar 2016 10:08:34 +0200 Subject: [PATCH 039/187] minor IE8 demo fix --- assets/css/kute.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/kute.css b/assets/css/kute.css index 676cc0f..f268748 100644 --- a/assets/css/kute.css +++ b/assets/css/kute.css @@ -272,6 +272,7 @@ hr { /* buttons */ .btns .btn {opacity: 0; float: left; line-height: 1; margin: 0 3px 3px 0} +.ie8 .btns .btn {filter: alpha(opacity=0);} .btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; } .bg-gray { color:#fff; background-color: #555; fill: #555 } .btn.active { background-color: #2196F3 } From d972e26f597e17ee1f012aff94cd67eeeb1f3932 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 14:27:27 +0200 Subject: [PATCH 040/187] Final version 1.5 commit. --- assets/js/svg.js | 46 ++- css.html | 2 +- extend.html | 8 + properties.html | 12 +- src/kute-svg.js | 186 +++++++--- src/kute.js | 234 ++++++------ src/tmp/kute-svg.js | 859 -------------------------------------------- src/tmp/kute.js | 808 ----------------------------------------- svg.html | 158 +++++--- 9 files changed, 393 insertions(+), 1920 deletions(-) delete mode 100644 src/tmp/kute-svg.js delete mode 100644 src/tmp/kute.js diff --git a/assets/js/svg.js b/assets/js/svg.js index 1d12629..16982c4 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -9,7 +9,7 @@ morphBtn.addEventListener('click', function(){ }, false); var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, { - showMorphInfo: true, morphIndex: 79, + showMorphInfo: true, morphIndex: 73, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut' }); @@ -18,6 +18,37 @@ morphBtn1.addEventListener('click', function(){ !morphTween1.playing && morphTween1.start(); }, false); +// polygon morph +var morphTween21 = KUTE.fromTo('#triangle', {path: '#triangle', fill: '#673AB7'}, { path: '#square', fill: '#2196F3' }, { + duration: 1500, easing: 'easingCubicOut', +}); +var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', fill: '#2196F3'}, { path: '#star2', fill: 'deeppink' }, { + morphIndex: 9, + delay: 500, duration: 1500, easing: 'easingCubicOut' +}); +var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', fill: 'deeppink'}, { path: '#triangle', fill: '#673AB7' }, { + delay: 500, duration: 1500, easing: 'easingCubicOut' +}); + +morphTween21.chain(morphTween22); +morphTween22.chain(morphTween23); +morphTween23.chain(morphTween21); + +var morphBtn2 = document.getElementById('morphBtn2'); +morphBtn2.addEventListener('click', function(){ + if ( !morphTween21.playing && !morphTween22.playing && !morphTween23.playing ) { + morphTween21.start(); morphTween21._dl = 500; + morphBtn2.innerHTML = 'Stop'; + morphBtn2.className = 'btn btn-pink'; + } else { + morphTween21.playing && morphTween21.stop(); morphTween21._dl = 0; + morphTween22.playing && morphTween22.stop(); + morphTween23.playing && morphTween23.stop(); + morphBtn2.innerHTML = 'Start'; + morphBtn2.className = 'btn btn-green'; + } +}, false); + // simple multi morph var multiMorphBtn = document.getElementById('multiMorphBtn'); @@ -36,10 +67,10 @@ multiMorphBtn.addEventListener('click', function(){ // complex multi morph var compliMorphBtn = document.getElementById('compliMorphBtn'); -var compliMorph1 = KUTE.to('#rectangle-container', { path: '#circle-container', fill: "#FF5722" }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var compliMorph2 = KUTE.to('#symbol-left', { path: '#eye-left', fill: "#fff" }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var compliMorph3 = KUTE.to('#symbol-left-clone', { path: '#mouth', fill: "#fff" }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var compliMorph4 = KUTE.to('#symbol-right', { path: '#eye-right', fill: "#fff" }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', fill: "#2196F3"}, { path: '#circle-container', fill: "#FF5722" }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left', fill: "#fff"}, { path: '#eye-left', fill: "#fff" }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone', fill: "#fff"}, { path: '#mouth', fill: "#fff" }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right', fill: "#CDDC39"}, { path: '#eye-right', fill: "#fff" }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); compliMorphBtn.addEventListener('click', function(){ !compliMorph1.playing && compliMorph1.start(); @@ -56,11 +87,6 @@ var draw2 = KUTE.fromTo('#drawSVG',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration var draw3 = KUTE.fromTo('#drawSVG',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); var draw4 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); var draw5 = KUTE.fromTo('#drawSVG',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); -// var draw1 = KUTE.to('#drawSVG', {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); -// var draw2 = KUTE.to('#drawSVG', {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); -// var draw3 = KUTE.to('#drawSVG', {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); -// var draw4 = KUTE.to('#drawSVG', {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); -// var draw5 = KUTE.to('#drawSVG', {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5); diff --git a/css.html b/css.html index c0b5a45..6d4aa87 100644 --- a/css.html +++ b/css.html @@ -152,7 +152,7 @@ var tween3 = KUTE.to('selector1',{wordSpacing:50}); 
    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',{borderBottomColor:'red'}).start(); // IE9+ browsers
 KUTE.to('selector1',{borderLeftColor:'#069'}).start();
 KUTE.to('selector1',{outlineColor:'#069'}).start();
    diff --git a/extend.html b/extend.html index 5c2b3a5..111a18e 100644 --- a/extend.html +++ b/extend.html @@ -153,6 +153,14 @@ K.Tween.prototype.restart = function(){ } return this; } + +// methods to queue callbacks with ease +K.Tween.prototype.onUpdate = function(){ + this._uC = arguments; + return this; +} +// _sC = startCallback | _cC = completeCallback | _stC = stopCallback +// _pC = pauseCallback | _rC = resumeCallback

    For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very secific need.

    diff --git a/properties.html b/properties.html index e0b557e..75c9ba6 100644 --- a/properties.html +++ b/properties.html @@ -92,8 +92,8 @@
  • rotate is a property used to rotate an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. Supported on IE9.
  • skewX is a property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew an element by 25 degrees. Supported on IE9.
  • skewY is a property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew an element by 25 degrees. Supported on IE9.
    • -
  • scale is a property used to apply a size transformation. Eg. scale:2 will enlarge an element by a degree of 2. Supported on IE9.
    • -
  • matrix property is not supported.
    • +
  • scale is a property used to apply a single value size transformation. Eg. scale:2 will enlarge an element by a degree of 2. Supported on IE9.
    • +
  • matrix, double axis skew and double axis scale properties are not supported.

    • 3D Transform Properties

    @@ -106,7 +106,7 @@
  • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Modern browsers only and requires perspective.
  • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and also requires perspective.
  • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and doesn't require perspective.
    • -
  • rotate3d and matrix3d properties are not supported.
    • +
  • matrix3d, rotate3d, and scale3d properties are not supported.

    • Box Model Properties

    @@ -196,7 +196,7 @@

    Did We Miss Any Important Property?

    -

    Make sure you go to the issues tracker and report the missing property ASAP.

    +

    Make sure you go to the issues tracker and report the missing property ASAP, or you can check the extend guide and learn how to develop a plugin to support a new property yourself.

    @@ -210,12 +210,12 @@
    -
    diff --git a/src/kute-svg.js b/src/kute-svg.js index fd9be6e..fa9eab8 100644 --- a/src/kute-svg.js +++ b/src/kute-svg.js @@ -23,31 +23,31 @@ 'use strict'; var K = window.KUTE, S = S || {}, p, - _svg = document.getElementsByTagName('path')[0], + _svg = K.selector('path') || K.selector('svg'), _ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg', _nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props _cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0) - trm = function(s){ if (!String.prototype.trim) { return s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } else { return s.trim(); }}; + pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi; if (_svg && !_svg.ownerSVGElement) {return;} // if SVG API is not supported, return // SVG MORPH - // get path d attribute or create a path with string value - S.getPath = function(e){ + // get path d attribute or create a path from string value + S.gPt = function(e){ var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null; if ( el && /path|glyph/.test(el.tagName) ) { - p.e = S.forcePath(el); + p.e = S.fPt(el); p.o = el.getAttribute('d'); } else if (!el && /[a-z][^a-z]*/ig.test(e)) { // maybe it's a string path already - var np = S.createPath(trm(e)); + var np = S.cP(e.trim()); p.e = np; p.o = e; } return p; } - S.pathCross = function(w){ + S.pCr = function(w){ // pathCross // path tween options this._mpr = w.morphPrecision || 25; this._midx = w.morphIndex; @@ -55,24 +55,45 @@ this._rv1 = w.reverseFirstPath; this._rv2 = w.reverseSecondPath; - var p1 = S.getOnePath(w._vS.path.o), p2 = S.getOnePath(w._vE.path.o), arr; + var p1 = S.gOp(w._vS.path.o), p2 = S.gOp(w._vE.path.o), arr; + this._isp = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // both shapes are polygons - arr = S._pathCross(p1,p2); + arr = S._pCr(p1,p2,w._el.parentNode); w._vS.path.d = arr[0]; w._vE.path.d = arr[1]; } - S._pathCross = function(s,e){ - s = S.createPath(s); e = S.createPath(e); - var arr = S.getSegments(s,e,this._mpr), s1 = arr[0], e1 = arr[1], arL = e1.length, idx; + S._pCr = function(s,e,svg){ // _pathCross + var s1, e1, arr, idx, arL, sm, lg, smp, lgp, nsm = [], sml, cl = [], len, tl, cs; + this._sp = false; + if (!this._isp) { + s = S.cP(s); e = S.cP(e); + arr = S.gSegs(s,e,this._mpr); + s1 = arr[0]; e1 = arr[1]; arL = e1.length; + } else { + s = S.pTA(s); e = S.pTA(e); + arL = Math.max(s.length,e.length); + if ( arL === e.length) { sm = s; lg = e; } else { sm = e; lg = s; } + sml = sm.length; + + smp = S.cP('M'+sm.join('L')+'z'); len = smp.getTotalLength() / arL; + for (var i=0; i 2) { - return trm(a[0]) + 'z'; - } else { return trm(p); } + return a[0].trim() + 'z'; + } else { return p.trim(); } } - S.createPath = function (p){ + S.cP = function (p){ // createPath var c = document.createElementNS(_ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p; c.setAttribute('d',d); return c; } - S.forcePath = function(p){ + S.fPt = function(p){ // forcePath for glyph elements if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future - var c = S.createPath(p); p.parentNode.appendChild(c); return c; + var c = S.cP(p); p.parentNode.appendChild(c); return c; } return p; } - S.clone = function(obj) { + S.clone = function(a) { var copy; - - // Handle Array - if (obj instanceof Array) { + if (a instanceof Array) { copy = []; - for (var i = 0, len = obj.length; i < len; i++) { - copy[i] = S.clone(obj[i]); + for (var i = 0, len = a.length; i < len; i++) { + copy[i] = S.clone(a[i]); } return copy; } - - // Handle Object - if (obj instanceof Object) { - copy = {}; - for (var attr in obj) { - if (obj.hasOwnProperty(attr)) { - copy[attr] = S.clone(obj[attr]); + return a; + } + + S.pTA = function(p) { // simple pathToAbsolute for polygons + var np = p.match(pathReg), wp = [], l = np.length, s, c, r, x = 0, y = 0; + for (var i = 0; i pl2) { - for (var i in p1){ - if (!(i in p2)) { - s2 = getBSBox(p2,i); - b2 = curvePathBBox(path2curve(p2[s2])); - // p2[i] = p2[s2]; // or get the biggest/smalles shape - p2[i] = (i*1) % 2 ? 'M'+b2.cx+' '+b2.cy+ +'l0 0' : 'M'+b2.x+' '+b2.y +'l0 0'; - } - } - - } else if (pl1 2) { - for (var i = 0; i< a.length; i++) { trm(a[i].replace(/\n/,'')); if ( !/[0-9a-z]/gi.test(a[i]) ) { a.splice(i,1) } } - path = {}; - for (var i=0, l=a.length; i .5) { - var before, - after, - beforeLength, - afterLength, - beforeDistance, - afterDistance; - if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) { - best = before, bestLength = beforeLength, bestDistance = beforeDistance; - } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) { - best = after, bestLength = afterLength, bestDistance = afterDistance; - } else { - precision *= .5; - } - } - best = [best.x, best.y]; - best.distance = Math.sqrt(bestDistance); - return best; - function distance2(p) { - var dx = p.x - point[0], - dy = p.y - point[1]; - return dx * dx + dy * dy; - } - } - - // K.dom[p] = function(w,p,v) { // for SVG unitless related CSS props - // w._el.style[p] = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v; - // }; - - - - /* - * Paths - */ - - var spaces = "\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029"; - var pathCommand = new RegExp("([a-z])[" + spaces + ",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?[" + spaces + "]*,?[" + spaces + "]*)+)", "ig"); - var pathValues = new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[" + spaces + "]*,?[" + spaces + "]*", "ig"); - - - // Parses given path string into an array of arrays of path segments - function parsePathString(pathString) { - if (!pathString) { - return null; - } - - if( pathString instanceof Array ) { - return pathString; - } else { - var paramCounts = {a: 7, c: 6, o: 2, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, u: 3, z: 0}, - data = []; - - String(pathString).replace(pathCommand, function(a, b, c) { - var params = [], - name = b.toLowerCase(); - c.replace(pathValues, function (a, b) { - b && params.push(+b); - }); - if (name == "m" && params.length > 2) { - data.push([b].concat(params.splice(0, 2))); - name = "l"; - b = b == "m" ? "l" : "L"; - } - if (name == "o" && params.length == 1) { - data.push([b, params[0]]); - } - if (name == "r") { - data.push([b].concat(params)); - } else while (params.length >= paramCounts[name]) { - data.push([b].concat(params.splice(0, paramCounts[name]))); - if (!paramCounts[name]) { - break; - } - } - }); - - return data; - } - }; - - - // http://schepers.cc/getting-to-the-point - function catmullRom2bezier(crp, z) { - var d = []; - for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) { - var p = [ - {x: +crp[i - 2], y: +crp[i - 1]}, - {x: +crp[i], y: +crp[i + 1]}, - {x: +crp[i + 2], y: +crp[i + 3]}, - {x: +crp[i + 4], y: +crp[i + 5]} - ]; - if (z) { - if (!i) { - p[0] = {x: +crp[iLen - 2], y: +crp[iLen - 1]}; - } else if (iLen - 4 == i) { - p[3] = {x: +crp[0], y: +crp[1]}; - } else if (iLen - 2 == i) { - p[2] = {x: +crp[0], y: +crp[1]}; - p[3] = {x: +crp[2], y: +crp[3]}; - } - } else { - if (iLen - 4 == i) { - p[3] = p[2]; - } else if (!i) { - p[0] = {x: +crp[i], y: +crp[i + 1]}; - } - } - d.push(["C", - (-p[0].x + 6 * p[1].x + p[2].x) / 6, - (-p[0].y + 6 * p[1].y + p[2].y) / 6, - (p[1].x + 6 * p[2].x - p[3].x) / 6, - (p[1].y + 6*p[2].y - p[3].y) / 6, - p[2].x, - p[2].y - ]); - } - - return d; - - }; - - function ellipsePath(x, y, rx, ry, a) { - if (a == null && ry == null) { - ry = rx; - } - x = +x; - y = +y; - rx = +rx; - ry = +ry; - if (a != null) { - var rad = Math.PI / 180, - x1 = x + rx * Math.cos(-ry * rad), - x2 = x + rx * Math.cos(-a * rad), - y1 = y + rx * Math.sin(-ry * rad), - y2 = y + rx * Math.sin(-a * rad), - res = [["M", x1, y1], ["A", rx, rx, 0, +(a - ry > 180), 0, x2, y2]]; - } else { - res = [ - ["M", x, y], - ["m", 0, -ry], - ["a", rx, ry, 0, 1, 1, 0, 2 * ry], - ["a", rx, ry, 0, 1, 1, 0, -2 * ry], - ["z"] - ]; - } - return res; - }; - - function pathToAbsolute(pathArray) { - pathArray = parsePathString(pathArray); - - if (!pathArray || !pathArray.length) { - return [["M", 0, 0]]; - } - var res = [], - x = 0, - y = 0, - mx = 0, - my = 0, - start = 0, - pa0; - if (pathArray[0][0] == "M") { - x = +pathArray[0][1]; - y = +pathArray[0][2]; - mx = x; - my = y; - start++; - res[0] = ["M", x, y]; - } - var crz = pathArray.length == 3 && - pathArray[0][0] == "M" && - pathArray[1][0].toUpperCase() == "R" && - pathArray[2][0].toUpperCase() == "Z"; - for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) { - res.push(r = []); - pa = pathArray[i]; - pa0 = pa[0]; - if (pa0 != pa0.toUpperCase()) { - r[0] = pa0.toUpperCase(); - switch (r[0]) { - case "A": - r[1] = pa[1]; - r[2] = pa[2]; - r[3] = pa[3]; - r[4] = pa[4]; - r[5] = pa[5]; - r[6] = +pa[6] + x; - r[7] = +pa[7] + y; - break; - case "V": - r[1] = +pa[1] + y; - break; - case "H": - r[1] = +pa[1] + x; - break; - case "R": - var dots = [x, y].concat(pa.slice(1)); - for (var j = 2, jj = dots.length; j < jj; j++) { - dots[j] = +dots[j] + x; - dots[++j] = +dots[j] + y; - } - res.pop(); - res = res.concat(catmullRom2bezier(dots, crz)); - break; - case "O": - res.pop(); - dots = ellipsePath(x, y, pa[1], pa[2]); - dots.push(dots[0]); - res = res.concat(dots); - break; - case "U": - res.pop(); - res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3])); - r = ["U"].concat(res[res.length - 1].slice(-2)); - break; - case "M": - mx = +pa[1] + x; - my = +pa[2] + y; - default: - for (j = 1, jj = pa.length; j < jj; j++) { - r[j] = +pa[j] + ((j % 2) ? x : y); - } - } - } else if (pa0 == "R") { - dots = [x, y].concat(pa.slice(1)); - res.pop(); - res = res.concat(catmullRom2bezier(dots, crz)); - r = ["R"].concat(pa.slice(-2)); - } else if (pa0 == "O") { - res.pop(); - dots = ellipsePath(x, y, pa[1], pa[2]); - dots.push(dots[0]); - res = res.concat(dots); - } else if (pa0 == "U") { - res.pop(); - res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3])); - r = ["U"].concat(res[res.length - 1].slice(-2)); - } else { - for (var k = 0, kk = pa.length; k < kk; k++) { - r[k] = pa[k]; - } - } - pa0 = pa0.toUpperCase(); - if (pa0 != "O") { - switch (r[0]) { - case "Z": - x = +mx; - y = +my; - break; - case "H": - x = r[1]; - break; - case "V": - y = r[1]; - break; - case "M": - mx = r[r.length - 2]; - my = r[r.length - 1]; - default: - x = r[r.length - 2]; - y = r[r.length - 1]; - } - } - } - - return res; - }; - - - function l2c(x1, y1, x2, y2) { - return [x1, y1, x2, y2, x2, y2]; - }; - function q2c(x1, y1, ax, ay, x2, y2) { - var _13 = 1 / 3, - _23 = 2 / 3; - return [ - _13 * x1 + _23 * ax, - _13 * y1 + _23 * ay, - _13 * x2 + _23 * ax, - _13 * y2 + _23 * ay, - x2, - y2 - ]; - }; - function a2c(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) { - // for more information of where this math came from visit: - // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes - var _120 = Math.PI * 120 / 180, - rad = Math.PI / 180 * (+angle || 0), - res = [], - xy, - rotate = function (x, y, rad) { - var X = x * Math.cos(rad) - y * Math.sin(rad), - Y = x * Math.sin(rad) + y * Math.cos(rad); - return {x: X, y: Y}; - }; - if (!recursive) { - xy = rotate(x1, y1, -rad); - x1 = xy.x; - y1 = xy.y; - xy = rotate(x2, y2, -rad); - x2 = xy.x; - y2 = xy.y; - var cos = Math.cos(Math.PI / 180 * angle), - sin = Math.sin(Math.PI / 180 * angle), - x = (x1 - x2) / 2, - y = (y1 - y2) / 2; - var h = (x * x) / (rx * rx) + (y * y) / (ry * ry); - if (h > 1) { - h = Math.sqrt(h); - rx = h * rx; - ry = h * ry; - } - var rx2 = rx * rx, - ry2 = ry * ry, - k = (large_arc_flag == sweep_flag ? -1 : 1) * - Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x))), - cx = k * rx * y / ry + (x1 + x2) / 2, - cy = k * -ry * x / rx + (y1 + y2) / 2, - f1 = Math.asin(((y1 - cy) / ry).toFixed(9)), - f2 = Math.asin(((y2 - cy) / ry).toFixed(9)); - - f1 = x1 < cx ? Math.PI - f1 : f1; - f2 = x2 < cx ? Math.PI - f2 : f2; - f1 < 0 && (f1 = Math.PI * 2 + f1); - f2 < 0 && (f2 = Math.PI * 2 + f2); - if (sweep_flag && f1 > f2) { - f1 = f1 - Math.PI * 2; - } - if (!sweep_flag && f2 > f1) { - f2 = f2 - Math.PI * 2; - } - } else { - f1 = recursive[0]; - f2 = recursive[1]; - cx = recursive[2]; - cy = recursive[3]; - } - var df = f2 - f1; - if (Math.abs(df) > _120) { - var f2old = f2, - x2old = x2, - y2old = y2; - f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1); - x2 = cx + rx * Math.cos(f2); - y2 = cy + ry * Math.sin(f2); - res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]); - } - df = f2 - f1; - var c1 = Math.cos(f1), - s1 = Math.sin(f1), - c2 = Math.cos(f2), - s2 = Math.sin(f2), - t = Math.tan(df / 4), - hx = 4 / 3 * rx * t, - hy = 4 / 3 * ry * t, - m1 = [x1, y1], - m2 = [x1 + hx * s1, y1 - hy * c1], - m3 = [x2 + hx * s2, y2 - hy * c2], - m4 = [x2, y2]; - m2[0] = 2 * m1[0] - m2[0]; - m2[1] = 2 * m1[1] - m2[1]; - if (recursive) { - return [m2, m3, m4].concat(res); - } else { - res = [m2, m3, m4].concat(res).join().split(","); - var newres = []; - for (var i = 0, ii = res.length; i < ii; i++) { - newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x; - } - return newres; - } - }; - - function clone(obj) { - var copy; - - // Handle Array - if (obj instanceof Array) { - copy = []; - for (var i = 0, len = obj.length; i < len; i++) { - copy[i] = clone(obj[i]); - } - return copy; - } - - // Handle Object - if (obj instanceof Object) { - copy = {}; - for (var attr in obj) { - if (obj.hasOwnProperty(attr)) { - copy[attr] = clone(obj[attr]); - } - } - return copy; - } - - return obj; - } - - function path2curve(path, path2) { - var p = pathToAbsolute(path), - p2 = path2 && pathToAbsolute(path2), - attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null}, - attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null}, - processPath = function (path, d, pcom) { - var nx, ny; - if (!path) { - return ["C", d.x, d.y, d.x, d.y, d.x, d.y]; - } - !(path[0] in {T: 1, Q: 1}) && (d.qx = d.qy = null); - switch (path[0]) { - case "M": - d.X = path[1]; - d.Y = path[2]; - break; - case "A": - path = ["C"].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1)))); - break; - case "S": - if (pcom == "C" || pcom == "S") { // In "S" case we have to take into account, if the previous command is C/S. - nx = d.x * 2 - d.bx; // And reflect the previous - ny = d.y * 2 - d.by; // command's control point relative to the current point. - } - else { // or some else or nothing - nx = d.x; - ny = d.y; - } - path = ["C", nx, ny].concat(path.slice(1)); - break; - case "T": - if (pcom == "Q" || pcom == "T") { // In "T" case we have to take into account, if the previous command is Q/T. - d.qx = d.x * 2 - d.qx; // And make a reflection similar - d.qy = d.y * 2 - d.qy; // to case "S". - } - else { // or something else or nothing - d.qx = d.x; - d.qy = d.y; - } - path = ["C"].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2])); - break; - case "Q": - d.qx = path[1]; - d.qy = path[2]; - path = ["C"].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4])); - break; - case "L": - path = ["C"].concat(l2c(d.x, d.y, path[1], path[2])); - break; - case "H": - path = ["C"].concat(l2c(d.x, d.y, path[1], d.y)); - break; - case "V": - path = ["C"].concat(l2c(d.x, d.y, d.x, path[1])); - break; - case "Z": - path = ["C"].concat(l2c(d.x, d.y, d.X, d.Y)); - break; - } - return path; - }, - fixArc = function (pp, i) { - if (pp[i].length > 7) { - pp[i].shift(); - var pi = pp[i]; - while (pi.length) { - pcoms1[i] = "A"; // if created multiple C:s, their original seg is saved - p2 && (pcoms2[i] = "A"); // the same as above - pp.splice(i++, 0, ["C"].concat(pi.splice(0, 6))); - } - pp.splice(i, 1); - ii = Math.max(p.length, p2 && p2.length || 0); - } - }, - fixM = function (path1, path2, a1, a2, i) { - if (path1 && path2 && path1[i][0] == "M" && path2[i][0] != "M") { - path2.splice(i, 0, ["M", a2.x, a2.y]); - a1.bx = 0; - a1.by = 0; - a1.x = path1[i][1]; - a1.y = path1[i][2]; - ii = Math.max(p.length, p2 && p2.length || 0); - } - }, - pcoms1 = [], // path commands of original path p - pcoms2 = [], // path commands of original path p2 - pfirst = "", // temporary holder for original path command - pcom = ""; // holder for previous path command of original path - for (var i = 0, ii = Math.max(p.length, p2 && p2.length || 0); i < ii; i++) { - p[i] && (pfirst = p[i][0]); // save current path command - - if (pfirst != "C") { // C is not saved yet, because it may be result of conversion - pcoms1[i] = pfirst; // Save current path command - i && ( pcom = pcoms1[i - 1]); // Get previous path command pcom - } - p[i] = processPath(p[i], attrs, pcom); // Previous path command is inputted to processPath - - if (pcoms1[i] != "A" && pfirst == "C") pcoms1[i] = "C"; // A is the only command - // which may produce multiple C:s - // so we have to make sure that C is also C in original path - - fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1 - - if (p2) { // the same procedures is done to p2 - p2[i] && (pfirst = p2[i][0]); - if (pfirst != "C") { - pcoms2[i] = pfirst; - i && (pcom = pcoms2[i - 1]); - } - p2[i] = processPath(p2[i], attrs2, pcom); - - if (pcoms2[i] != "A" && pfirst == "C") { - pcoms2[i] = "C"; - } - - fixArc(p2, i); - } - fixM(p, p2, attrs, attrs2, i); - fixM(p2, p, attrs2, attrs, i); - var seg = p[i], - seg2 = p2 && p2[i], - seglen = seg.length, - seg2len = p2 && seg2.length; - attrs.x = seg[seglen - 2]; - attrs.y = seg[seglen - 1]; - attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x; - attrs.by = parseFloat(seg[seglen - 3]) || attrs.y; - attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x); - attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y); - attrs2.x = p2 && seg2[seg2len - 2]; - attrs2.y = p2 && seg2[seg2len - 1]; - } - - return p2 ? [p, p2] : p; - }; - - function box(x, y, width, height) { - if (x == null) { - x = y = width = height = 0; - } - if (y == null) { - y = x.y; - width = x.width; - height = x.height; - x = x.x; - } - return { - x: x, - y: y, - w: width, - h: height, - cx: x + width / 2, - cy: y + height / 2 - }; - }; - - // Returns bounding box of cubic bezier curve. - // Source: http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html - // Original version: NISHIO Hirokazu - // Modifications: https://github.com/timo22345 - function curveDim(x0, y0, x1, y1, x2, y2, x3, y3) { - var tvalues = [], - bounds = [[], []], - a, b, c, t, t1, t2, b2ac, sqrtb2ac; - for (var i = 0; i < 2; ++i) { - if (i == 0) { - b = 6 * x0 - 12 * x1 + 6 * x2; - a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; - c = 3 * x1 - 3 * x0; - } else { - b = 6 * y0 - 12 * y1 + 6 * y2; - a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; - c = 3 * y1 - 3 * y0; - } - if (Math.abs(a) < 1e-12) { - if (Math.abs(b) < 1e-12) { - continue; - } - t = -c / b; - if (0 < t && t < 1) { - tvalues.push(t); - } - continue; - } - b2ac = b * b - 4 * c * a; - sqrtb2ac = Math.sqrt(b2ac); - if (b2ac < 0) { - continue; - } - t1 = (-b + sqrtb2ac) / (2 * a); - if (0 < t1 && t1 < 1) { - tvalues.push(t1); - } - t2 = (-b - sqrtb2ac) / (2 * a); - if (0 < t2 && t2 < 1) { - tvalues.push(t2); - } - } - - var j = tvalues.length, - jlen = j, - mt; - while (j--) { - t = tvalues[j]; - mt = 1 - t; - bounds[0][j] = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); - bounds[1][j] = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); - } - - bounds[0][jlen] = x0; - bounds[1][jlen] = y0; - bounds[0][jlen + 1] = x3; - bounds[1][jlen + 1] = y3; - bounds[0].length = bounds[1].length = jlen + 2; - - return { - min: {x: Math.min.apply(0, bounds[0]), y: Math.min.apply(0, bounds[1])}, - max: {x: Math.max.apply(0, bounds[0]), y: Math.max.apply(0, bounds[1])} - }; - }; - - function curvePathBBox(path) { - var x = 0, - y = 0, - X = [], - Y = [], - p; - for (var i = 0, ii = path.length; i < ii; i++) { - p = path[i]; - if (p[0] == "M") { - x = p[1]; - y = p[2]; - X.push(x); - Y.push(y); - } else { - var dim = curveDim(x, y, p[1], p[2], p[3], p[4], p[5], p[6]); - X = X.concat(dim.min.x, dim.max.x); - Y = Y.concat(dim.min.y, dim.max.y); - x = p[5]; - y = p[6]; - } - } - var xmin = Math.min.apply(0, X), - ymin = Math.min.apply(0, Y), - xmax = Math.max.apply(0, X), - ymax = Math.max.apply(0, Y), - bb = box(xmin, ymin, xmax - xmin, ymax - ymin); - - return bb; - }; - - - - S.path2string = function(path) { - return path.join(',').replace(p2s, "$1"); - }; - - return S; -})); diff --git a/src/tmp/kute.js b/src/tmp/kute.js deleted file mode 100644 index 31f4b02..0000000 --- a/src/tmp/kute.js +++ /dev/null @@ -1,808 +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 || {}; - K.getPrefix = function() { //returns browser prefix - 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; - } - - // prefix handling - var _pf = K.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 - _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch? - _ev = _tch ? 'touchstart' : 'mousewheel', //event to prevent on scroll - //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', - _raf = _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'], - _caf = _rafR ? (window[_pf + 'CancelAnimationFrame'] || window[_pf + 'CancelRequestAnimationFrame']) : window['cancelAnimationFrame'], - - //true scroll container - _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 - - //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 - _op = ['opacity'], // opacity - _bm = ['top', 'left', 'width', 'height'], // dimensions / box model - _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, _op, _bm, _tf), al = _all.length, - _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 ( _bm.indexOf(p) !== -1 ) { - _d[p] = 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)[0]; o = o || {}; o.rpr = true; // we're gonna have to build _vS object at start - 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, to)[0], _vE = K.prP(f, to)[1]; 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.TweensTO(_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); - }; - - // the tweens array and tick ID - K._tws = []; K._t = null; - - // render functions - K.dom = {}; - K._u = function(w,t) { - t = t || window.performance.now(); - if (t < w._sT && w.playing && !w.paused) { return true; } - - var p, e = Math.min(( t - w._sT ) / w._dr,1); - - //render the CSS update - for (p in w._vE){ - K.dom[p](w,p,w._e(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; - }; - - // internal ticker - K._tk = function (t) { - var i = 0, tl; - K._t = _raf(K._tk); - while ( i < (tl = K._tws.length) ) { - if ( K._u(K._tws[i],t) ) { - i++; - } else { - K._tws.splice(i, 1); - } - } - }; - - // 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 K._tws; }; - K.removeAll = function () { K._tws = []; }; - K.add = function (tw) { K._tws.push(tw); }; - K.remove = function (tw) { - var i = K._tws.indexOf(tw); - if (i !== -1) { - K._tws.splice(i, 1); - } - }; - K.s = function () { _caf(K._t); K._t = null; }; - - // register functions for the render object K.dom(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 = _bm.indexOf(p) !== -1, - sc = _sc.indexOf(p) !== -1, - op = _op.indexOf(p) !== -1, - tf = p === 'transform'; - - //process styles by property / property type - if ( bm && (!(p in K.dom)) ) { - K.dom[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 (tf && (!(p in K.dom)) ) { - - K.dom[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.dom)) ) { - K.dom[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( _c.r, _c.g, _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.dom)) ) { - K.dom[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 ( op && (!(p in K.dom)) ) { - if (_isIE8) { - K.dom[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.dom[p] = function(w,p,v) { - w._el.style.opacity = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v; - }; - } - } - } - }; - - // process properties for _vE and _vS or one of them - K.prP = function (e, s) { - var i, pl = arguments.length, _st = [], kp = K.pp; - - for (i=0; i 0) { self._r = self.repeat; } - if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; } - self.playing = false; - },64) - }; - - // the multi elements Tween constructs - K.TweensTO = 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.TweensTO.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.chain = function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; } - ws.play = ws.resume = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; } - - return K; -})); diff --git a/svg.html b/svg.html index 6f76842..0f7cfdb 100644 --- a/svg.html +++ b/svg.html @@ -81,11 +81,11 @@

    SVG Plugin

    The SVG Plugin for KUTE.js extends the core engine and enables animation for various CSS properties specific to SVG elements as well as morphing path shapes. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.

    -

    Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG.

    +

    Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG so make sure to fiter out your SVG tweens.

    Shape Morphing

    -

    One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). The plugin is packed with specific tween options to help you improve the morph animation:

    +

    One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:

      -
    • showMorphInfo: true when true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for serious performance reasons.
      • +
    • showMorphInfo: true when true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for serious performance reasons. This option will also show you the first point for both shapes so you can visualize
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 25 but the D3.js example uses 4.
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is not set.
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape. By default this option is false.
      • @@ -113,21 +113,21 @@ var tween = KUTE.to('#rectangle', { path: '#star' }).start(); var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start(); -

      For all the above tween objects the animation should look like this:

      +

      For all the above tween objects the animation should look like this:

      -
      - - - - -
      - Start -
      -
      - -

      As you can see, the animation could need some fine tunning. Let's open the console, and this time we'll pass in the showMorphInfo: true tween option that will help us find the best possible morph as performance and visual. Have a look:

      +
      + + + + +
      + Start +
      +
      + +

      As you can see, the animation could need some fine tunning. Let's open the console, and this time we'll pass in the showMorphInfo: true tween option that will help us find the best possible morph as performance and visual. Have a look:

      // let's check the morph info again
 var tween = KUTE.to('#rectangle', { path: '#star' }, {showMorphInfo: true}).start();
@@ -141,23 +141,54 @@ If the current animation is not satisfactory, consider reversing one of the path
 */
      -

      Next, we're going to set the morphIndex: 79 and we will get an improved morph.

      -
      - - - - - -
      - Start -
      -
      -

      Much better! You can play with morphIndex value, maybe you can get an even better or more interesting morph.

      +

      Next, we're going to set the morphIndex: 79 option and we will get an improved morph.

      +
      + + + + + +
      + Start +
      +
      +

      Much better! You can play with the morphIndex value, maybe you can get an even better or more interesting morph. Also notice the above shapes have some points indicating the start for each shape, making it even easier for you to improve the morph, a nice addition to the showMorphInfo option.

      + +

      Morphing Polygon Paths

      +

      When your paths are only lineto, vertical-lineto and horizontal-lineto based shapes (the d attribute consists of L, V and H path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The morphPrecision option will not apply since the paths are already polygons, still you will have access to all the other options.

      +
      // let's morph a triangle into a star
+var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
+
+// or same path into a square
+var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
+
      + +

      In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.

      +
      + + + + + + + + + + + + + +
      + Start +
      +
      +

      The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only L path command will make sure to prevent value processing and allow the animation to start as fast as possible.

      Multi Path Example

      -

      In other cases, you may want to morph multiple paths at the same time. Let's have a look at the following paths:

      +

      In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:

      <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
     <path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096	c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z 
         M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z 
@@ -169,7 +200,7 @@ If the current animation is not satisfactory, consider reversing one of the path
         M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>   
 </svg>
      -

      As you can see, both these paths have additional subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.

      +

      As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.

      <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
     <path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
     <path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
@@ -182,7 +213,7 @@ If the current animation is not satisfactory, consider reversing one of the path
     <path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/> 
 </svg>
      -

      After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: w11 to w24, w13 to w21, w14 to w22 and w12 to w23.

      +

      After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: #w11 to #w24, #w13 to #w21, #w14 to #w22 and #w12 to #w23.

      Now we can write the tween objects and get to working:

      var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
 var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
@@ -190,30 +221,38 @@ var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
 var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
      -

      As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a few minutes of tweaking the options, here's what we should see:

      +

      As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:

      -
      - - - - - - - - - - - - -
      - Start -
      -
      -

      This final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the svg.js for a full code review.

      +
      + + + + + + + + + + + + +
      + Start +
      +
      +

      Note that this final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the svg.js for a full code review.

      Complex Example

      -

      The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths. In that case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example. So without further talking, let's get into it:

      +

      The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.

      +

      An important aspect of multi path morph is syncronization: since the .to() method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using the .fromTo() method. So, let's get into it:

      +
      // complex multi morph, the paths should be self explanatory
+var morph1 = KUTE.fromTo('#start-container',  { path: '#start-container' },    { path: '#end-container' });
+var morph2 = KUTE.fromTo('#startpath1',       { path: '#startpath1' },         { path: '#endpath1' });
+var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' },   { path: '#endpath1' });
+var morph4 = KUTE.fromTo('#startpath2',       { path: '#startpath2' },         { path: '#endpath2' });
+
      +

      As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing.

      @@ -231,16 +270,17 @@ var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start(); Start
    -

    While there are other tools such as SVGMorpheus to enable this kind of multi-path morph, they lack in options to improve the visual and performance. The demos look acceptable in most cases, but the SVGs were manually prepared/optimized which makes it pretty much unusable on a broader horizon. Again, the SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a better solution.

    +

    While there are other tools such as SVGMorpheus to enable this kind of multi-path morph, they lack in options to improve the visual and performance. The demos look acceptable in most cases, but the SVGs were manually prepared/optimized which makes it pretty much unusable on a broader scope. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a better solution.

    Recommendations

    • The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.
    • When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost any value, including the default value.
      • +
    • Polygons with only lineto path commands are best for performance.
    • Faster animation speed could be a great trick to hide any polygonal "artefacts".
    • Always use the showMorphInfo:true tween option to check how the values required for the morph change with every new option value, but never forget to disable it after you have optimized the morph to your liking, this option enables a function that detects the best index for points rotation that is very expensive and delays the animation for quite some time.
      • -
    • The SVG morph performance is the same for both .to() and .fromTo() methods because the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the morph will always start later.
      • +
    • The SVG morph performance is the same for both .to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.

    Drawing Stroke

    @@ -342,7 +382,11 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2}); Start
    -

    The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.

    +

    The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.

    + +

    Future Plans

    +

    The future versions of the SVG Plugin might also feature improved cross browser transform animations, as currently the core engine only works and was tested with HTML elements of most types except SVG.

    +

    Since most of this plugin scripting works with path or glyph elements, I'm also considering a very light convertToPath feature, but there are some already out there.

    From 1423ab641e8e3de5b3027d2b69e8d8f45c142589 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 14:48:26 +0200 Subject: [PATCH 041/187] --- svg.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/svg.html b/svg.html index 0f7cfdb..bdfac28 100644 --- a/svg.html +++ b/svg.html @@ -85,7 +85,7 @@

    Shape Morphing

    One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:

      -
    • showMorphInfo: true when true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for serious performance reasons. This option will also show you the first point for both shapes so you can visualize
      • +
    • showMorphInfo: true when true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for serious performance reasons. This option will also show you the first point for both shapes so you can also visualize how the settings affect the morph.
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 25 but the D3.js example uses 4.
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is not set.
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape. By default this option is false.
      • From 45901d20ab258cab99a13315c927c09f014d5c4e Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 14:49:42 +0200 Subject: [PATCH 042/187] --- svg.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/svg.html b/svg.html index bdfac28..f8115a1 100644 --- a/svg.html +++ b/svg.html @@ -85,7 +85,7 @@

      Shape Morphing

      One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:

        -
      • showMorphInfo: true when true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for serious performance reasons. This option will also show you the first point for both shapes so you can also visualize how the settings affect the morph.
        • +
      • showMorphInfo: true when true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for performance reasons. This option will also show you the first point for both shapes so you can visualize how the settings affect the morph.
      • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 25 but the D3.js example uses 4.
      • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is not set.
      • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape. By default this option is false.
        • From ef57b574f2dc767b70d3c7351ce507713b58d035 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 25 Mar 2016 19:56:46 +0200 Subject: [PATCH 043/187] Minor issue with opacity, scale. --- src/kute-svg.js | 4 ++-- src/kute.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/kute-svg.js b/src/kute-svg.js index fa9eab8..d0f7b2d 100644 --- a/src/kute-svg.js +++ b/src/kute-svg.js @@ -345,10 +345,10 @@ K.pp[p] = function(p,v){ if (!(p in K.dom)) { K.dom[p] = function(w,p,v) { - w._el.style[p] = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v; + w._el.style[p] = w._vS[p] + (w._vE[p] - w._vS[p]) * v; } } - return K.pp.unl(p,v); + return parseFloat(v); } } K.prS[p] = function(el,p,v){ diff --git a/src/kute.js b/src/kute.js index e64b920..ac616af 100644 --- a/src/kute.js +++ b/src/kute.js @@ -307,7 +307,7 @@ r2d.z = { value: K.truD(v,p).v, unit: (K.truD(v,p).u||'deg') }; return r2d; } else if (p === 'scale') { - return { value: K.truD(v,p).v }; + return { value: parseFloat(v) }; // this must be parseFloat(v) } }; K.pp.unl = function(p,v){ // scroll | opacity | unitless @@ -329,7 +329,7 @@ } } } - return { value: K.truD(v).v }; + return { value: parseFloat(v) }; } K.pp.box = function(p,v){ if (!(p in K.dom)) { From 428b45f8e89b95ff3ad3f094bc81f24fc7ceca00 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 26 Mar 2016 21:27:48 +0200 Subject: [PATCH 044/187] Some SEO fixes. --- about.html | 4 ++-- api.html | 4 ++-- attr.html | 2 +- css.html | 4 ++-- easing.html | 2 +- examples.html | 4 ++-- extend.html | 4 ++-- features.html | 4 ++-- index.html | 2 +- options.html | 2 +- properties.html | 2 +- start.html | 2 +- svg.html | 8 ++++---- text.html | 2 +- 14 files changed, 23 insertions(+), 23 deletions(-) diff --git a/about.html b/about.html index 048028d..ccbeeed 100644 --- a/about.html +++ b/about.html @@ -9,8 +9,8 @@ - - + + diff --git a/api.html b/api.html index 3c7bf7a..d7b3e31 100644 --- a/api.html +++ b/api.html @@ -9,8 +9,8 @@ - - + + diff --git a/attr.html b/attr.html index 9caf331..5f2541e 100644 --- a/attr.html +++ b/attr.html @@ -10,7 +10,7 @@ - + diff --git a/css.html b/css.html index 6d4aa87..54c51ea 100644 --- a/css.html +++ b/css.html @@ -9,8 +9,8 @@ - - + + diff --git a/easing.html b/easing.html index 312ec81..e8317b0 100644 --- a/easing.html +++ b/easing.html @@ -10,7 +10,7 @@ - + diff --git a/examples.html b/examples.html index 6b64764..3f47b05 100644 --- a/examples.html +++ b/examples.html @@ -9,8 +9,8 @@ - - + + diff --git a/extend.html b/extend.html index 111a18e..16de230 100644 --- a/extend.html +++ b/extend.html @@ -9,8 +9,8 @@ - - + + diff --git a/features.html b/features.html index a214d9e..f0d99d1 100644 --- a/features.html +++ b/features.html @@ -9,8 +9,8 @@ - - + + diff --git a/index.html b/index.html index 314739e..db6160f 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + diff --git a/options.html b/options.html index 65310af..ad508e2 100644 --- a/options.html +++ b/options.html @@ -10,7 +10,7 @@ - + diff --git a/properties.html b/properties.html index 75c9ba6..c1e8aef 100644 --- a/properties.html +++ b/properties.html @@ -10,7 +10,7 @@ - + diff --git a/start.html b/start.html index 8159b2c..c6bcf80 100644 --- a/start.html +++ b/start.html @@ -10,7 +10,7 @@ - + diff --git a/svg.html b/svg.html index f8115a1..fd902cb 100644 --- a/svg.html +++ b/svg.html @@ -10,7 +10,7 @@ - + @@ -80,10 +80,10 @@

        SVG Plugin

        -

        The SVG Plugin for KUTE.js extends the core engine and enables animation for various CSS properties specific to SVG elements as well as morphing path shapes. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.

        +

        The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, as well as SVG morphing of path shapes. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.

        Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG so make sure to fiter out your SVG tweens.

        -

        Shape Morphing

        -

        One of the most important parts of the plugin is the shape morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:

        +

        SVG Morphing

        +

        One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:

        • showMorphInfo: true when true the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is false for performance reasons. This option will also show you the first point for both shapes so you can visualize how the settings affect the morph.
        • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 25 but the D3.js example uses 4.
          • diff --git a/text.html b/text.html index 2e686ee..d97ab04 100644 --- a/text.html +++ b/text.html @@ -10,7 +10,7 @@ - + From a666fda6e3cebca53dd03aed90583c3d552c5f0b Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 26 Mar 2016 21:32:52 +0200 Subject: [PATCH 045/187] --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index db6160f..8c30cf5 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@ - - + + From 2040b36e4430abaf401be5700f8ea7b0dd54ae3e Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 27 Mar 2016 16:20:24 +0300 Subject: [PATCH 046/187] Added a codepen example for SVG, plus more SEO improvements. --- index.html | 2 +- svg.html | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 8c30cf5..4e9305d 100644 --- a/index.html +++ b/index.html @@ -140,7 +140,7 @@

          Packed With Tools

          -

          KUTE.js comes with tools to help you configure awesome animations: CSS / SVG / ATTR Plugins, jQuery plugin, easing functions, color convertors, and you can even extend it yourself.

          +

          KUTE.js comes with a CSS Plugin, a SVG Plugin, an ATTR Plugin, a Text Plugin and a jQuery plugin, easing functions, color convertors, utility functions, and you can even extend it yourself.

          Plenty Of Properties

          diff --git a/svg.html b/svg.html index fd902cb..23080d6 100644 --- a/svg.html +++ b/svg.html @@ -116,12 +116,12 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864

          For all the above tween objects the animation should look like this:

          - - - - + + + +
          Start
          @@ -141,7 +141,7 @@ If the current animation is not satisfactory, consider reversing one of the path */ -

          Next, we're going to set the morphIndex: 79 option and we will get an improved morph.

          +

          Next, we're going to set the morphIndex: 79 option and we will get an improved morph. I also made a pen for you to play with.

          - + From b3b806279d75df9dfd5f7c29b2bf4c1e3d1bc4d8 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 16 Aug 2016 19:24:13 +0300 Subject: [PATCH 048/187] Documentation updates, now we have cdnjs repository. https://cdnjs.com/libraries/kute.js --- about.html | 2 +- api.html | 2 +- assets/js/examples.js | 2 +- attr.html | 7 +++++++ css.html | 14 ++++++++++---- examples.html | 30 ++++++++++++++++-------------- extend.html | 2 +- features.html | 4 ++-- index.html | 7 ++++--- options.html | 2 +- properties.html | 5 ++--- start.html | 31 +++++++++++++++++++++---------- svg.html | 7 +++++++ text.html | 7 ++++++- 14 files changed, 80 insertions(+), 42 deletions(-) diff --git a/about.html b/about.html index ccbeeed..aa3d09f 100644 --- a/about.html +++ b/about.html @@ -153,7 +153,7 @@
          diff --git a/api.html b/api.html index d7b3e31..702c42a 100644 --- a/api.html +++ b/api.html @@ -226,7 +226,7 @@ tween2.chain(tweensCollection2.tweens); diff --git a/assets/js/examples.js b/assets/js/examples.js index b7d93e1..cb17dc9 100644 --- a/assets/js/examples.js +++ b/assets/js/examples.js @@ -11,7 +11,7 @@ var translateExamples = document.getElementById('translate-examples'), trx = translateExamples.getElementsByTagName('div')[1], trry = translateExamples.getElementsByTagName('div')[2], trz = translateExamples.getElementsByTagName('div')[3], - tr2dTween = KUTE.to(tr2d, {translate:170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}), + tr2dTween = KUTE.to(tr2d, {translate:[170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}), trxTween = KUTE.to(trx, {translateX:-170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}), trryTween = KUTE.to(trry, {translate3d:[0,170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}), trzTween = KUTE.to(trz, {translate3d:[0,0,-100]}, {perspective:200, easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}); diff --git a/attr.html b/attr.html index 5f2541e..d17059d 100644 --- a/attr.html +++ b/attr.html @@ -139,6 +139,13 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'

          This plugin is quite handy and a great addition to the SVG Plugin.

          + +
          diff --git a/css.html b/css.html index 54c51ea..4d72802 100644 --- a/css.html +++ b/css.html @@ -195,17 +195,23 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();

          Download this example here.

          -
          - -
        diff --git a/examples.html b/examples.html index 3f47b05..46fa8a8 100644 --- a/examples.html +++ b/examples.html @@ -415,15 +415,10 @@ var myMultiTween2 = KUTE.allFromTo(

    As you can see, we also used the new tween options offset and transformOrigin and they make it so much more easy.

    - + -

    Easing Functions

    -

    We've talked about KUTE.js featuring many easing functions, so let's go ahead and create some examples. The first box below will animate with linear easing function and the second will use another function you choose. The example also features some predefined easing functions from the additional plugins: cubic bezier easing and physics based easing functions.

    +

    Easing Functions

    +

    We've talked about KUTE.js featuring many easing functions, so let's go ahead and create some examples. The first box below will animate with linear easing function and the second will use another function you choose. The example also features some predefined easing functions from the additional plugins: cubic bezier easing and physics based easing functions.

    Linear
    @@ -515,12 +510,19 @@ var myMultiTween2 = KUTE.allFromTo(

    As you can see, the cubic-bezier easing functions can be used with both presets and as well as strings such as bezier(0.15, 0.7, 0.2, 0.9). The physics based easing functions have their own presets, but the last 6 are all the examples shown in the API documentation, so make sure to check.

    - -
    diff --git a/extend.html b/extend.html index 16de230..8346014 100644 --- a/extend.html +++ b/extend.html @@ -315,7 +315,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']} diff --git a/features.html b/features.html index f0d99d1..065eb40 100644 --- a/features.html +++ b/features.html @@ -144,9 +144,9 @@ +
    diff --git a/index.html b/index.html index 4e9305d..bf046ea 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ - + KUTE.js | Javascript Animation Engine @@ -87,7 +87,8 @@

    Download Github - CDN + CDN 1 + CDN 2 Replay

    @@ -184,7 +185,7 @@ diff --git a/options.html b/options.html index ad508e2..35b17d6 100644 --- a/options.html +++ b/options.html @@ -146,7 +146,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start(); diff --git a/properties.html b/properties.html index c1e8aef..ccd64f0 100644 --- a/properties.html +++ b/properties.html @@ -200,13 +200,12 @@
    - +
    diff --git a/start.html b/start.html index c6bcf80..30f5f3d 100644 --- a/start.html +++ b/start.html @@ -120,16 +120,27 @@ define([

    Websites

    In your website add the following code, the best would be to put it at the end of your body tag:

    -
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute.min.js"></script> <!-- core KUTE.js -->
    +
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.1/kute.min.js"></script> <!-- core KUTE.js -->
    +

    An alternate CDN link here:

    +
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute.min.js"></script> <!-- core KUTE.js -->
    -

    Also you can include the tools that you need for your project:

    -
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+		
    The CDN repositories receive latest updates here and right here. You might also want to include the tools that you need for your project:
    
+
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.1/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.1/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.1/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.1/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.1/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.1/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.5.1/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+
    
+        
    Alternate CDN links:
    
+
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
 		
    Your awesome animation coding would follow after these script links.
    		
 		
@@ -141,7 +152,7 @@ define([
 		
 		
diff --git a/svg.html b/svg.html
index d67d328..35cdc50 100644
--- a/svg.html
+++ b/svg.html
@@ -389,6 +389,13 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
     
    Since most of this plugin scripting works with path or glyph elements, I'm also considering a very light convertToPath feature, but there are some already out there.
    
 	
 
+    
+
       
      
    
 		
    
diff --git a/text.html b/text.html
index d97ab04..62050d4 100644
--- a/text.html
+++ b/text.html
@@ -139,7 +139,12 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&
 		
    
         
    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!
    
         
-
+		
 	
 
       

From ed59e23b77d75a24a9e92004eeefe5350d72b686 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 17 Aug 2016 23:40:42 +0300
Subject: [PATCH 049/187] Some documentation updates and social sharing fixes.

---
 about.html          |   2 +-
 api.html            |  12 ++--
 assets/css/kute.css |  30 ++++++----
 assets/js/easing.js |  60 ++++++++++++++++++++
 assets/js/svg.js    |   6 +-
 attr.html           |   2 +-
 css.html            |   8 +--
 easing.html         | 135 +++++++++++++++++++++++++++++++++++++++++---
 examples.html       | 126 +++++++++++++----------------------------
 extend.html         |  12 ++--
 features.html       |   2 +-
 index.html          |  14 ++---
 options.html        |  12 ++--
 properties.html     |   2 +-
 start.html          |  12 ++--
 svg.html            |  30 +++++-----
 text.html           |  12 ++--
 17 files changed, 311 insertions(+), 166 deletions(-)
 create mode 100644 assets/js/easing.js

diff --git a/about.html b/about.html
index aa3d09f..ad47ce9 100644
--- a/about.html
+++ b/about.html
@@ -153,7 +153,7 @@
 		
 	
diff --git a/api.html b/api.html
index 702c42a..4d9d2c9 100644
--- a/api.html
+++ b/api.html
@@ -223,12 +223,12 @@ tween2.chain(tweensCollection2.tweens);
 
 	
    		
 
-		
+    
 		
 	
    
 	  
diff --git a/assets/css/kute.css b/assets/css/kute.css
index f268748..a9ced15 100644
--- a/assets/css/kute.css
+++ b/assets/css/kute.css
@@ -74,14 +74,22 @@ footer p {margin: 0 0 10px}
 .ie8 .btn.top-right { top:55px }
 
 /* featurettes */
-.featurettes {    
-background: #222;
-    padding: 60px 0;
-    width: 100%;
-    clear: both;
-    margin: 60px 0;
-    float: left;
+.featurettes { 
+	background: #eee;
+	padding: 60px 0;
+	width: 100%;
+	clear: both;
+	margin: 60px 0;
+	float: left;
+	color: #777;
 }
+/*.featurettes.dark {background: #222}*/
+.featurettes h1,
+.featurettes h2,
+.featurettes h3,
+.featurettes b,
+.featurettes strong {color: #222}
+.featurettes a {color: #2196F3}
 
 .content-wrap .featurettes { margin: 0 0 20px; padding: 20px 0 0 20px; display: inline-block; border-radius: 10px; position: relative }
 
@@ -276,12 +284,14 @@ hr {
 .btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; }
 .bg-gray { color:#fff; background-color: #555; fill: #555 }
 .btn.active { background-color: #2196F3 }
-.btn:hover, .btn:active, .btn:focus { color: #fff; text-decoration: none; background-color: #777}
+.featurettes .btn, .featurettes .btn:hover, .featurettes .btn:active, .featurettes .btn:focus,
+.btn:hover, .btn:active, .btn:focus { color: #fff; }
+.btn:hover, .btn:active, .btn:focus { text-decoration: none; background-color: #777}
 .btn-olive, .bg-olive {background-color: #9C27B0; color: #fff; fill: #9C27B0} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #673AB7 }
 .btn-indigo, .bg-indigo { background-color: #673AB7; color: #fff; fill: #673AB7} .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus { background-color: #ffd626; color:#000 }
 .btn-green, .bg-green { background-color: #4CAF50; color: #fff; fill: #4CAF50} .btn-green:hover, .btn-green:active, .btn-green:focus { background-color: #9C27B0 }
 .btn-red, .bg-red { background-color: #e91b1f; color: #fff; fill: #e91b1f} .btn-red:hover, .btn-red:active, .btn-red:focus { background-color: #4CAF50 }
-.btn-yellow, .bg-yellow { background-color: #ffd626; color:#000; fill: #ffd626} .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus { background-color: #4CAF50; color: #000 }
+.btn-yellow, .bg-yellow { background-color: #ffd626; color:#000 !important; fill: #ffd626} .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus { background-color: #4CAF50; color: #fff !important }
 .btn-blue, .bg-blue { background-color: #2196F3; color: #fff; fill: #2196F3} .btn-blue:hover, .btn-blue:active, .btn-blue:focus { background-color: #e91b1f }
 .btn-pink, .bg-pink { background-color: #E91E63; color: #fff; fill: #E91E63} .btn-pink:hover, .btn-pink:active, .btn-pink:focus { background-color: #2196F3 }
 .btn-orange, .bg-orange { background-color: #FF5722; color: #fff; fill: #FF5722} .btn-orange:hover, .btn-orange:active, .btn-orange:focus { background-color: #4CAF50 }
@@ -305,7 +315,7 @@ hr {
 
 .btn-group { position: relative; display: inline-block }
 .btn-group ul {
-    background: #555; max-height: 300px; width: 200px;
+    background: #555; max-height: 300px; width: 200px; color: #ccc;
     position: absolute; bottom: -9999em; left: 0; list-style: none; 
     overflow: auto; padding: 0; z-index: 5
 }
diff --git a/assets/js/easing.js b/assets/js/easing.js
new file mode 100644
index 0000000..370c12c
--- /dev/null
+++ b/assets/js/easing.js
@@ -0,0 +1,60 @@
+// 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;
+
+/* EASINGS EXAMPLES */
+var featurettes = document.querySelectorAll('.featurettes'), l=featurettes.length,
+    esProp1 = isIE && isIE < 9 ? { left:0 } : { translate: 0},
+    esProp2 = isIE && isIE < 9 ? { left:250 } : { translate: 250},
+    tweenEasingElements = [], easings = [], startEasingTween = [], easingSelectButton = [], tweenEasing1 = [], tweenEasing2 = [];
+
+// populate tween objects, triggers, elements
+for (var i=0; i
         
  • Share 
    • 
         
-        
+        
         
     
 
diff --git a/css.html b/css.html
index 4d72802..915032c 100644
--- a/css.html
+++ b/css.html
@@ -199,10 +199,10 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
 	
 
 	
 
 	
diff --git a/easing.html b/easing.html
index e8317b0..adace44 100644
--- a/easing.html
+++ b/easing.html
@@ -131,6 +131,48 @@
 			
  • easingBounceIn looks like the previous viewed in reverse mode
    • 
 			
  • easingBounceInOut is a combination of the other two.
    • 
 		
+
+		
    Core easing functions examples:
    
+		
    
+			
    Linear
    
+			
    
+				
+			
    
+					
    
+				    Select
+						
      
+							
    • easingSinusoidalIn
      • 
+							
    • easingSinusoidalOut
      • 
+							
    • easingSinusoidalInOut
      • 
+							
    • easingQuadraticIn
      • 
+							
    • easingQuadraticOut
      • 
+							
    • easingQuadraticInOut
      • 
+							
    • easingCubicIn
      • 
+							
    • easingCubicOut
      • 
+							
    • easingCubicInOut
      • 
+							
    • easingQuarticIn
      • 
+							
    • easingQuarticOut
      • 
+							
    • easingQuarticInOut
      • 
+							
    • easingQuinticIn
      • 
+							
    • easingQuinticOut
      • 
+							
    • easingQuinticInOut
      • 
+							
    • easingCircularIn
      • 
+							
    • easingCircularOut
      • 
+							
    • easingCircularInOut
      • 
+							
    • easingExponentialIn
      • 
+							
    • easingExponentialOut
      • 
+							
    • easingExponentialInOut
      • 
+							
    • easingBackIn
      • 
+							
    • easingBackOut
      • 
+							
    • easingBackInOut
      • 
+							
    • easingElasticIn
      •                
+							
    • easingElasticOut
      •                
+							
    • easingElasticInOut
      • 
+						
    
+				
    
+				Start	
+			
    
+		
    
 		
 		
    Cubic Bezier Functions
    
 		
    While modern browsers support CSS3 transition with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5), in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the features page, we are using a modified version of the cubic-bezier by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.
    
@@ -147,6 +189,54 @@
 			
  • Back timing functions: easeInBack, easeOutBack and easeInOutBack
    • 
 			
  • Special slow motion timing functions look like this: slowMo, slowMo1 and slowMo2
    • 
 		
+		
    Cubic-bezier easing functions examples:
    
+		
    
+			
    Linear
    
+			
    
+				
+			
    
+					
    
+				    Select
+						
      
+								
    • bezier(0.15, 0.7, 0.2, 0.9)
      • 
+								
    • bezier(0.25, 0.5, 0.6, 0.7)
      • 
+								
    • bezier(0.35, 0.2, 0.9, 0.2)
      • 
+								
    • easeIn
      • 
+								
    • easeOut
      • 
+								
    • easeInOut
      • 
+								
    • easeInSine
      • 
+								
    • easeOutSine
      • 
+								
    • easeInOutSine
      • 
+								
    • easeInQuad
      • 
+								
    • easeOutQuad
      • 
+								
    • easeInOutQuad
      • 
+								
    • easeInCubic
      • 
+								
    • easeOutCubic
      • 
+								
    • easeInOutCubic
      • 
+								
    • easeInQuart
      • 
+								
    • easeOutQuart
      • 
+								
    • easeInOutQuart
      • 
+								
    • easeInQuint
      • 
+								
    • easeOutQuint
      • 
+								
    • easeInOutQuint
      • 
+								
    • easeInExpo
      • 
+								
    • easeOutExpo
      • 
+								
    • easeInOutExpo
      • 
+								
    • easeInCirc
      • 
+								
    • easeOutCirc
      • 
+								
    • easeInOutCirc
      • 
+								
    • easeInBack
      • 
+								
    • easeOutBack
      • 
+								
    • easeInOutBack
      • 
+								
    • slowMo
      • 
+								
    • slowMo1
      • 
+								
    • slowMo2
      • 
+						
    
+				
    
+				Start	
+			
    
+		
    
+
 		
 		
    Physics Based Functions
    
 		
    KUTE.js also packs the dynamics physics 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.
    
@@ -172,17 +262,43 @@ easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]}
 			
  • curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
    • 
 			
  • back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.
    • 
 		
+		
    Physics easing functions examples:
    
+		
    
+			
    Linear
    
+			
    
+				
+			
    
+				
    
+					Select
+					
       
+						
    • physicsIn
      •  
+						
    • physicsOut
      •   
+						
    • physicsInOut
      •   
+						
    • physicsBackIn
      •   
+						
    • physicsBackOut
      •   
+						
    • physicsBackInOut
      •   
+						
    • spring
      •   
+						
    • bounce
      •   
+						
    • gravity
      •   
+						
    • forceWithGravity
      •   
+						
    • bezier
      •   
+						
    • multiPointBezier
      •   
+					
    
+				
    
+				Start	
+			
    
+		
    		
         
-    
+	
 
 	
    		
 
-		
+    
 		
 	
    
 	  
@@ -208,6 +324,9 @@ easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]}
 
 
  
- 
+ 
+ 
+ 
+ 
 
 
diff --git a/examples.html b/examples.html
index 46fa8a8..86ae4b3 100644
--- a/examples.html
+++ b/examples.html
@@ -418,104 +418,56 @@ var myMultiTween2 = KUTE.allFromTo(
 
         
 		
    Easing Functions
    
-		
    We've talked about KUTE.js featuring many easing functions, so let's go ahead and create some examples. The first box below will animate with linear easing function and the second will use another function you choose. The example also features some predefined easing functions from the additional plugins: cubic bezier easing and physics based easing functions.
    
+		
    We've talked about KUTE.js featuring many easing functions, so let's go ahead and create some examples. The first box below will animate with linear easing function and the second will use another function you choose. The example features the core easing functions from the Robert Penner's easing functions.
    
 		
    
 			
    Linear
    
 			
    
 				
 			
    
-                
    
+					
    
 				    Select
-                    
      
-                        
    • Core Functions
      • 
-                        
    • easingSinusoidalIn
      • 
-                        
    • easingSinusoidalOut
      • 
-                        
    • easingSinusoidalInOut
      • 
-                        
    • easingQuadraticIn
      • 
-                        
    • easingQuadraticOut
      • 
-                        
    • easingQuadraticInOut
      • 
-                        
    • easingCubicIn
      • 
-                        
    • easingCubicOut
      • 
-                        
    • easingCubicInOut
      • 
-                        
    • easingQuarticIn
      • 
-                        
    • easingQuarticOut
      • 
-                        
    • easingQuarticInOut
      • 
-                        
    • easingQuinticIn
      • 
-                        
    • easingQuinticOut
      • 
-                        
    • easingQuinticInOut
      • 
-                        
    • easingCircularIn
      • 
-                        
    • easingCircularOut
      • 
-                        
    • easingCircularInOut
      • 
-                        
    • easingExponentialIn
      • 
-                        
    • easingExponentialOut
      • 
-                        
    • easingExponentialInOut
      • 
-                        
    • easingBackIn
      • 
-                        
    • easingBackOut
      • 
-                        
    • easingBackInOut
      • 
-                        
    • easingElasticIn
      •                
-                        
    • easingElasticOut
      •                
-                        
    • easingElasticInOut
      •   
-                        
    • Bezier Functions
      • 
-                        
    • bezier(0.15, 0.7, 0.2, 0.9)
      • 
-                        
    • bezier(0.25, 0.5, 0.6, 0.7)
      • 
-                        
    • bezier(0.35, 0.2, 0.9, 0.2)
      • 
-                        
    • easeIn
      • 
-                        
    • easeOut
      • 
-                        
    • easeInOut
      • 
-                        
    • easeInSine
      • 
-                        
    • easeOutSine
      • 
-                        
    • easeInOutSine
      • 
-                        
    • easeInQuad
      • 
-                        
    • easeOutQuad
      • 
-                        
    • easeInOutQuad
      • 
-                        
    • easeInCubic
      • 
-                        
    • easeOutCubic
      • 
-                        
    • easeInOutCubic
      • 
-                        
    • easeInQuart
      • 
-                        
    • easeOutQuart
      • 
-                        
    • easeInOutQuart
      • 
-                        
    • easeInQuint
      • 
-                        
    • easeOutQuint
      • 
-                        
    • easeInOutQuint
      • 
-                        
    • easeInExpo
      • 
-                        
    • easeOutExpo
      • 
-                        
    • easeInOutExpo
      • 
-                        
    • easeInCirc
      • 
-                        
    • easeOutCirc
      • 
-                        
    • easeInOutCirc
      • 
-                        
    • easeInBack
      • 
-                        
    • easeOutBack
      • 
-                        
    • easeInOutBack
      • 
-                        
    • slowMo
      • 
-                        
    • slowMo1
      • 
-                        
    • slowMo2
      • 
-                        
    • Physics Functions
      •   
-                        
    • physicsIn
      •  
-                        
    • physicsOut
      •   
-                        
    • physicsInOut
      •   
-                        
    • physicsBackIn
      •   
-                        
    • physicsBackOut
      •   
-                        
    • physicsBackInOut
      •   
-                        
    • spring
      •   
-                        
    • bounce
      •   
-                        
    • gravity
      •   
-                        
    • forceWithGravity
      •   
-                        
    • bezier
      •   
-                        
    • multiPointBezier
      •   
-                    
    
-                
    
+						
      
+							
    • easingSinusoidalIn
      • 
+							
    • easingSinusoidalOut
      • 
+							
    • easingSinusoidalInOut
      • 
+							
    • easingQuadraticIn
      • 
+							
    • easingQuadraticOut
      • 
+							
    • easingQuadraticInOut
      • 
+							
    • easingCubicIn
      • 
+							
    • easingCubicOut
      • 
+							
    • easingCubicInOut
      • 
+							
    • easingQuarticIn
      • 
+							
    • easingQuarticOut
      • 
+							
    • easingQuarticInOut
      • 
+							
    • easingQuinticIn
      • 
+							
    • easingQuinticOut
      • 
+							
    • easingQuinticInOut
      • 
+							
    • easingCircularIn
      • 
+							
    • easingCircularOut
      • 
+							
    • easingCircularInOut
      • 
+							
    • easingExponentialIn
      • 
+							
    • easingExponentialOut
      • 
+							
    • easingExponentialInOut
      • 
+							
    • easingBackIn
      • 
+							
    • easingBackOut
      • 
+							
    • easingBackInOut
      • 
+							
    • easingElasticIn
      •                
+							
    • easingElasticOut
      •                
+							
    • easingElasticInOut
      • 
+						
    
+				
    
 				Start	
 			
    
 		
    
-        
    As you can see, the cubic-bezier easing functions can be used with both presets and as well as strings such as bezier(0.15, 0.7, 0.2, 0.9). The physics based easing functions have their own presets, but the last 6 are all the examples shown in the API documentation, so make sure to check.
       	
+		
    For more examples and info about the other easing functions, head over to the easing examples page.
       	
 	
 
-	
+    
 
 		
 		
    
diff --git a/extend.html b/extend.html
index 8346014..6d5b914 100644
--- a/extend.html
+++ b/extend.html
@@ -312,12 +312,12 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
  • KUTE.rth(r,g,b) a function that accepts numeric values for red, blue and green and returns a HEX format #006699 color string.
    • 
                
 
-		
+        
 		
 	
 	  
diff --git a/features.html b/features.html
index 065eb40..a3bc0f8 100644
--- a/features.html
+++ b/features.html
@@ -144,7 +144,7 @@
 			
 	
diff --git a/index.html b/index.html
index bf046ea..91c6a75 100644
--- a/index.html
+++ b/index.html
@@ -115,7 +115,7 @@
 		
 	
 
-	
    
+	
    
 		
    
 			
    At A Glance
    
 			
    
@@ -182,12 +182,12 @@
 			
    
 		
    
 
-		
+    
 
 	
    
 	  
diff --git a/options.html b/options.html
index 35b17d6..bcce692 100644
--- a/options.html
+++ b/options.html
@@ -143,12 +143,12 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
 
 	
    		
 
-		
+        
 		
 	
    
 	  
diff --git a/properties.html b/properties.html
index ccd64f0..6000c1e 100644
--- a/properties.html
+++ b/properties.html
@@ -203,7 +203,7 @@
 			
 	
    
diff --git a/start.html b/start.html
index 30f5f3d..d7695e7 100644
--- a/start.html
+++ b/start.html
@@ -149,12 +149,12 @@ define([
 		
    Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and here is the full refference on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.
    
 
 
-		
+        
 		
 	
 	  
diff --git a/svg.html b/svg.html
index 35cdc50..d7dc039 100644
--- a/svg.html
+++ b/svg.html
@@ -117,7 +117,7 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
 
         
    
           
-              
               
@@ -252,18 +252,22 @@ var morph2 = KUTE.fromTo('#startpath1',       { path: '#startpath1' },         {
 var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' },   { path: '#endpath1' });
 var morph4 = KUTE.fromTo('#startpath2',       { path: '#startpath2' },         { path: '#endpath2' });
    -

    As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing.

    +

    As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next example, we have used a mask where we included the subpaths of both start and end shape, just to get the same visual as the originals.

    - - - - - - - - - - + + + + + + + + + + + + + +
    @@ -392,7 +396,7 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2}); diff --git a/text.html b/text.html index 62050d4..5db3341 100644 --- a/text.html +++ b/text.html @@ -139,12 +139,12 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&

    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!

    - +
    From 1d153c363adbef8d1fc7e01dc272501899816daf Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 18 Aug 2016 22:28:15 +0300 Subject: [PATCH 050/187] Fixed Angular related issue with SVG Plugin. https://github.com/thednp/kute.js/issues/29 --- assets/js/perf.js | 319 +++++++++++++++++++++++----------------------- src/kute-svg.js | 2 +- 2 files changed, 163 insertions(+), 158 deletions(-) diff --git a/assets/js/perf.js b/assets/js/perf.js index 0107df0..9d02d7f 100644 --- a/assets/js/perf.js +++ b/assets/js/perf.js @@ -1,164 +1,169 @@ -//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) { - var update; - for (var i = 0; i < count; i++) { - var 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); +(function (){ + "use strict"; + //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']; - div.className = 'line'; - div.style.top = top + 'px'; - div.style.backgroundColor = background; - - if (property==='left') { - div.style.left = left + 'px'; - 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') { - tweens.push(KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn })); - } else if (engine==='gsap') { - if (property==="left"){ - TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn }); + 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) { + "use strict"; + var update; + for (var i = 0; i < count; i++) { + var 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'; + fromValues = engine==="tween" ? { left: left, div: div } : { left: left }; + toValues = { left: toLeft } } else { - TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn }); + 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 } + } } - } else if (engine==='tween') { - - if (property==="left"){ - update = updateLeft; - } else if (property==="translateX"){ - update = updateTranslate; - } + container.appendChild(div); + + // perf test + if (engine==='kute') { + tweens.push(KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn })); + } else if (engine==='gsap') { + if (property==="left"){ + TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn }); + } else { + TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn }); + } + } else if (engine==='tween') { + + + if (property==="left"){ + update = updateLeft; + } else if (property==="translateX"){ + update = updateTranslate; + } + + tweens.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true)); + } + } + if (engine==='tween') { + animate(); + function animate( time ) { + requestAnimationFrame( animate ); + TWEEN.update( time ); + } + } + } + + function complete(){ + document.getElementById('info').style.display = 'block'; + container.innerHTML = ''; + tweens = []; + } + + + function updateLeft(){ + this.div.style['left'] = this.left+'px'; + } + + function updateTranslate(){ + this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)'; + } + + //some button toggle + var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length; + + for (var i=0; i'; + b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id); + } + } + } + + + // the start button handle + document.getElementById('start').addEventListener('click', buildObjects, false); + + function buildObjects(){ + 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, + warning = document.createElement('DIV'); - tweens.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true)); - } - } - if (engine==='tween') { - animate(); - function animate( time ) { - requestAnimationFrame( animate ); - TWEEN.update( time ); - } - } -} - -function complete(){ - document.getElementById('info').style.display = 'block'; - container.innerHTML = ''; - tweens = []; -} - - -function updateLeft(){ - this.div.style['left'] = this.left+'px'; -} - -function updateTranslate(){ - this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)'; -} - -//some button toggle -var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length; - -for (var i=0; i'; - b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id); - } - } -} - - -// the start button handle -document.getElementById('start').addEventListener('click', buildObjects, false); - -function buildObjects(){ - 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, - warning = document.createElement('DIV'); - - warning.className = 'text-warning padding lead'; - container.innerHTML = ''; - if (count && engine && property && repeat) { - if (engine === 'gsap') { - document.getElementById('info').style.display = 'none'; - } - - createTest(count,property,engine,repeat); - // since our engines don't do sync, we make it our own here - if (engine==='tween'||engine==='kute') { - document.getElementById('info').style.display = 'none'; - start(); - } - } else { - - if (!count && !property && !repeat && !engine){ - warning.innerHTML = 'We are missing all the settings here.'; + warning.className = 'text-warning padding lead'; + container.innerHTML = ''; + if (count && engine && property && repeat) { + if (engine === 'gsap') { + document.getElementById('info').style.display = 'none'; + } + + createTest(count,property,engine,repeat); + // since our engines don't do sync, we make it our own here + if (engine==='tween'||engine==='kute') { + document.getElementById('info').style.display = 'none'; + start(); + } } else { - warning.innerHTML = 'Now missing
    '; - warning.innerHTML += !engine ? '- engine
    ' : ''; - warning.innerHTML += !property ? '- property
    ' : ''; - warning.innerHTML += !repeat ? '- repeat
    ' : ''; - warning.innerHTML += !count ? '- count
    ' : ''; - } - - container.appendChild(warning); - } -} -function start() { - var now = window.performance.now(), count = tweens.length; - for (var t =0; t' : ''; + warning.innerHTML += !property ? '- property
    ' : ''; + warning.innerHTML += !repeat ? '- repeat
    ' : ''; + warning.innerHTML += !count ? '- count
    ' : ''; + } + + container.appendChild(warning); + } + } + + function start() { + var now = window.performance.now(), count = tweens.length; + for (var t =0; t Date: Fri, 19 Aug 2016 01:12:53 +0300 Subject: [PATCH 051/187] --- index.html | 46 +++++++++++++++++++++++----------------------- src/kute-svg.js | 3 ++- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 91c6a75..fdbf0a3 100644 --- a/index.html +++ b/index.html @@ -47,31 +47,31 @@

    KUTE.js

     diff --git a/src/kute-svg.js b/src/kute-svg.js index a7d7ff1..5e6b4df 100644 --- a/src/kute-svg.js +++ b/src/kute-svg.js @@ -23,7 +23,8 @@ 'use strict'; var K = window.KUTE, S = S || {}, p, - _svg = document.querySelector('svg'), + _svg = document.querySelector('path') || document.querySelector('svg'), + // _svg = K.selector('path') || K.selector('svg'), _ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg', _nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props _cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0) From 3d8fadde3ec30704b78403ea49c223ea3e24fe37 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 19 Aug 2016 01:30:41 +0300 Subject: [PATCH 052/187] --- src/kute-svg.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/kute-svg.js b/src/kute-svg.js index 5e6b4df..c7ad6ae 100644 --- a/src/kute-svg.js +++ b/src/kute-svg.js @@ -24,7 +24,6 @@ var K = window.KUTE, S = S || {}, p, _svg = document.querySelector('path') || document.querySelector('svg'), - // _svg = K.selector('path') || K.selector('svg'), _ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg', _nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props _cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0) From f121972947e1524ae850cfb50e1a6f27a94ab2d3 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Aug 2016 15:58:30 +0300 Subject: [PATCH 053/187] SVG Plugin added `draw` (stroke animations) support for additional elements: ``, ``, ``, `` and ``. https://github.com/thednp/kute.js/issues/28 --- assets/js/svg.js | 28 +++++++++++++++++++- src/kute-svg.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++-- svg.html | 10 +++++--- 3 files changed, 98 insertions(+), 7 deletions(-) diff --git a/assets/js/svg.js b/assets/js/svg.js index ce661d7..181ac6c 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -88,10 +88,36 @@ var draw3 = KUTE.fromTo('#drawSVG',{draw:'90% 100%'}, {draw:'100% 100%'}, {durat var draw4 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); var draw5 = KUTE.fromTo('#drawSVG',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); +var draw11 = KUTE.fromTo('#drawSVG1',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); +var draw21 = KUTE.fromTo('#drawSVG1',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); +var draw31 = KUTE.fromTo('#drawSVG1',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); +var draw41 = KUTE.fromTo('#drawSVG1',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); +var draw51 = KUTE.fromTo('#drawSVG1',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); + +var draw12 = KUTE.fromTo('#drawSVG2',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); +var draw22 = KUTE.fromTo('#drawSVG2',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); +var draw32 = KUTE.fromTo('#drawSVG2',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); +var draw42 = KUTE.fromTo('#drawSVG2',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); +var draw52 = KUTE.fromTo('#drawSVG2',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); + +var draw13 = KUTE.fromTo('#drawSVG3',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); +var draw23 = KUTE.fromTo('#drawSVG3',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); +var draw33 = KUTE.fromTo('#drawSVG3',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); +var draw43 = KUTE.fromTo('#drawSVG3',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); +var draw53 = KUTE.fromTo('#drawSVG3',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); + draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5); +draw11.chain(draw21); draw21.chain(draw31); draw31.chain(draw41); draw41.chain(draw51); +draw12.chain(draw22); draw22.chain(draw32); draw32.chain(draw42); draw42.chain(draw52); +draw13.chain(draw23); draw23.chain(draw33); draw33.chain(draw43); draw43.chain(draw53); drawBtn.addEventListener('click', function(){ - !draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing && draw1.start(); + if ( !draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing ) { + draw1.start(); + draw11.start(); + draw12.start(); + draw13.start(); + } }, false); diff --git a/src/kute-svg.js b/src/kute-svg.js index c7ad6ae..b8a8484 100644 --- a/src/kute-svg.js +++ b/src/kute-svg.js @@ -258,7 +258,7 @@ // SVG DRAW S.gDr = function(e,v){ - var l = e.getTotalLength(), start, end, d, o; + var l = /path|glyph/.test(e.tagName) ? e.getTotalLength() : S.gL(e), start, end, d, o; if ( v instanceof Object ) { return v; } else if (typeof v === 'string') { @@ -352,9 +352,72 @@ } } K.prS[p] = function(el,p,v){ - return K.gCS(el,p) || 0; + return K.gCS(el,p) || 0; } } + + // SVG DRAW UTILITITES + S.gL = function(el){ // getLength - returns the result of any of the below functions + if (/rect/.test(el.tagName)) { + return S.gRL(el); + } else if (/circle/.test(el.tagName)) { + return S.gCL(el); + } else if (/polygon|polyline/.test(el.tagName)) { + return S.gPL(el); + } else if (/line/.test(el.tagName)) { + return S.gLL(el); + } + } + + S.gRL = function(el){ // getRectLength - return the length of a Rect + var w = el.getAttribute('width'); + var h = el.getAttribute('height'); + return (w*2)+(h*2); + } + + S.gPL = function(el){ // getPolygonLength - return the length of the Polygon / Polyline + var points = el.getAttribute('points').split(' '), len = 0; + if (points.length > 1) { + function coord(p) { + var c = p.split(','); + if (c.length != 2) { + return; // return undefined + } + if (isNaN(c[0]) || isNaN(c[1])) { + return; + } + return [parseFloat(c[0]), parseFloat(c[1])]; + } + + function dist(c1, c2) { + if (c1 != undefined && c2 != undefined) { + return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2)); + } + return 0; + } + + if (points.length > 2) { + for (var i=0; i

    Drawing Stroke

    -

    Next, we're going to animate the stroke of a <path> element, as this type of animation only works with this kind of SVG elements because it's the only one that supports the .getTotalLength() method. Here some code examples:

    +

    Next, we're going to animate the stroke of some elements. Starting with KUTE.js version 1.5.2, along <path> element, <circle>, <rect>, <line>, <polyline> and <polygon> elements are supported, as <path> uses the SVG standard .getTotalLength() method, while the others use some helper methods. Here some code examples:

    // draw the stroke from 0-10% to 90-100%
 var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
     
@@ -300,10 +300,12 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});

    We're gonna chain these tweens and start the animation real quick.

    - + - - + + + +
    Start
    From d184fe310c3cdb7c844b5e70fa0bc9d0e4e4b6a4 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Aug 2016 16:44:53 +0300 Subject: [PATCH 054/187] Small demo improvements. --- assets/js/svg.js | 40 +++++++++------------------------------- examples.html | 2 +- 2 files changed, 10 insertions(+), 32 deletions(-) diff --git a/assets/js/svg.js b/assets/js/svg.js index 181ac6c..e5d6065 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -82,42 +82,20 @@ compliMorphBtn.addEventListener('click', function(){ // draw example var drawBtn = document.getElementById('drawBtn'); -var draw1 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw2 = KUTE.fromTo('#drawSVG',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); -var draw3 = KUTE.fromTo('#drawSVG',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw4 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); -var draw5 = KUTE.fromTo('#drawSVG',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); +var drawExample = document.getElementById('draw-example'); +var drawEls = drawExample.querySelectorAll('*'); +console.log(drawEls); -var draw11 = KUTE.fromTo('#drawSVG1',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw21 = KUTE.fromTo('#drawSVG1',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); -var draw31 = KUTE.fromTo('#drawSVG1',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw41 = KUTE.fromTo('#drawSVG1',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); -var draw51 = KUTE.fromTo('#drawSVG1',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); - -var draw12 = KUTE.fromTo('#drawSVG2',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw22 = KUTE.fromTo('#drawSVG2',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); -var draw32 = KUTE.fromTo('#drawSVG2',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw42 = KUTE.fromTo('#drawSVG2',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); -var draw52 = KUTE.fromTo('#drawSVG2',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); - -var draw13 = KUTE.fromTo('#drawSVG3',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw23 = KUTE.fromTo('#drawSVG3',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); -var draw33 = KUTE.fromTo('#drawSVG3',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw43 = KUTE.fromTo('#drawSVG3',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); -var draw53 = KUTE.fromTo('#drawSVG3',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); +var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); +var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); +var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); +var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); +var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5); -draw11.chain(draw21); draw21.chain(draw31); draw31.chain(draw41); draw41.chain(draw51); -draw12.chain(draw22); draw22.chain(draw32); draw32.chain(draw42); draw42.chain(draw52); -draw13.chain(draw23); draw23.chain(draw33); draw33.chain(draw43); draw43.chain(draw53); drawBtn.addEventListener('click', function(){ - if ( !draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing ) { - draw1.start(); - draw11.start(); - draw12.start(); - draw13.start(); - } + !draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing && draw1.start(); }, false); diff --git a/examples.html b/examples.html index 86ae4b3..3b97e8f 100644 --- a/examples.html +++ b/examples.html @@ -116,7 +116,7 @@ $(tween).KUTE('chain',myTween2); // when tween animation finished, you can trigg

    The demo for the above example is here.

    Transform Properties Examples

    -

    KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateX, rotateY, rotateZ properties. Additionally it allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.

    +

    KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateY, rotateZ properties. Additionally it allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.

    Translations

    In the next example the first box is moving to left 250px with translate property, the second box is moving to the right by 200px using translateX and the third box is moving to the bottom using translate3d. The last box also uses translate3d but requires a perspective value for the animation on the Z axis to be effective.

    From dfa70cd629d94333018dbbec66dc5adf4980444f Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Aug 2016 16:46:16 +0300 Subject: [PATCH 055/187] --- assets/js/svg.js | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/js/svg.js b/assets/js/svg.js index e5d6065..07809d9 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -84,7 +84,6 @@ compliMorphBtn.addEventListener('click', function(){ var drawBtn = document.getElementById('drawBtn'); var drawExample = document.getElementById('draw-example'); var drawEls = drawExample.querySelectorAll('*'); -console.log(drawEls); var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); From 7d44719816bfcad4cd5714b14b595db224fcb49f Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 21 Aug 2016 00:11:42 +0300 Subject: [PATCH 056/187] Added support for stroking animation via `draw` for ``, some demo improvements. --- assets/js/svg.js | 10 +++++----- src/kute-svg.js | 16 +++++++++++----- svg.html | 11 ++++++----- 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/assets/js/svg.js b/assets/js/svg.js index 07809d9..8f1cc86 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -85,11 +85,11 @@ var drawBtn = document.getElementById('drawBtn'); var drawExample = document.getElementById('draw-example'); var drawEls = drawExample.querySelectorAll('*'); -var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"}); -var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"}); -var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"}); -var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"}); +var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn", offset: 250}); +var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut", offset: 250}); +var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn", offset: 250}); +var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut", offset: 250}); +var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut", offset: 250}); draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5); diff --git a/src/kute-svg.js b/src/kute-svg.js index b8a8484..4cf8b43 100644 --- a/src/kute-svg.js +++ b/src/kute-svg.js @@ -32,8 +32,7 @@ if (_svg && !_svg.ownerSVGElement) {return;} // if SVG API is not supported, return // SVG MORPH - // get path d attribute or create a path from string value - S.gPt = function(e){ + S.gPt = function(e){ // get path d attribute or create a path from string value var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null; if ( el && /path|glyph/.test(el.tagName) ) { p.e = S.fPt(el); @@ -205,7 +204,7 @@ return a; } - S.pTA = function(p) { // simple pathToAbsolute for polygons + S.pTA = function(p) { // simple pathToAbsolute for polygons | this is still a work in progress var np = p.match(pathReg), wp = [], l = np.length, s, c, r, x = 0, y = 0; for (var i = 0; i

    Drawing Stroke

    -

    Next, we're going to animate the stroke of some elements. Starting with KUTE.js version 1.5.2, along <path> element, <circle>, <rect>, <line>, <polyline> and <polygon> elements are supported, as <path> uses the SVG standard .getTotalLength() method, while the others use some helper methods. Here some code examples:

    +

    Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <path> shapes, <circle>, <ellipse>, <rect>, <line>, <polyline> and <polygon> shapes are also supported; the script uses the SVG standard .getTotalLength() method for <path> shapes, while the others use some helper methods. Here some code examples:

    // draw the stroke from 0-10% to 90-100%
 var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
     
@@ -301,10 +301,11 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
 		
    We're gonna chain these tweens and start the animation real quick.
    		
 		
    
             
-                            
-                            
-                            
-                            
+                            
+                            
+                            
+                            
+                            
             	
 			
    
 				Start	

From 5482d8383e1417d651bd53d558f4bdc6098dba47 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 22 Aug 2016 01:45:23 +0300
Subject: [PATCH 057/187] * Added SVG Transforms for SVG Plugin *
 Documentation/demo updates

---
 assets/js/svg.js |  50 +++++++++++++
 index.html       |   4 +-
 properties.html  |  34 ++++++---
 src/kute-svg.js  | 191 ++++++++++++++++++++++++++++++++---------------
 svg.html         | 101 +++++++++++++++++++++++--
 5 files changed, 299 insertions(+), 81 deletions(-)

diff --git a/assets/js/svg.js b/assets/js/svg.js
index 8f1cc86..8d0f59d 100644
--- a/assets/js/svg.js
+++ b/assets/js/svg.js
@@ -98,6 +98,56 @@ drawBtn.addEventListener('click', function(){
 }, false);
 
 
+// svgTransform examples
+var svgRotate = document.getElementById('svgRotate');
+var rotateBtn = document.getElementById('rotateBtn');
+var svgr1 = svgRotate.getElementsByTagName('path')[0];
+var svgr2 = svgRotate.getElementsByTagName('path')[1];
+
+var svgTween11 = KUTE.to(svgr1, {svgTransform: { rotate: [-360,0,0] } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+var svgTween12 = KUTE.to(svgr2, {svgTransform: { translate: 580 , rotate: 360 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+rotateBtn.addEventListener('click', function(){
+    !svgTween11.playing && svgTween11.start();
+    !svgTween12.playing && svgTween12.start();
+}, false);
+
+var svgTranslate = document.getElementById('svgTranslate');
+var translateBtn = document.getElementById('translateBtn');
+var svgt1 = svgTranslate.getElementsByTagName('path')[0];
+var svgt2 = svgTranslate.getElementsByTagName('path')[1];
+var svgTween21 = KUTE.to(svgt1, {svgTransform: { translate: 580 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+var svgTween22 = KUTE.to(svgt2, {svgTransform: { translate: 0 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+translateBtn.addEventListener('click', function(){
+    !svgTween21.playing && svgTween21.start();
+    !svgTween22.playing && svgTween22.start();
+}, false);
+
+var svgSkew = document.getElementById('svgSkew');
+var skewBtn = document.getElementById('skewBtn');
+var svgsk1 = svgSkew.getElementsByTagName('path')[0];
+var svgsk2 = svgSkew.getElementsByTagName('path')[1];
+var svgTween31 = KUTE.to(svgsk1, {svgTransform: { skewX: -15 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+skewBtn.addEventListener('click', function(){
+    !svgTween31.playing && svgTween31.start();
+    !svgTween32.playing && svgTween32.start();
+}, false);
+
+var svgScale = document.getElementById('svgScale');
+var scaleBtn = document.getElementById('scaleBtn');
+var svgs1 = svgScale.getElementsByTagName('path')[0];
+var svgs2 = svgScale.getElementsByTagName('path')[1];
+var svgTween41 = KUTE.to(svgs1, {svgTransform: { scale: 1.5 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+var svgTween42 = KUTE.to(svgs2, {svgTransform: { translate: 580, scale: 0.5 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+scaleBtn.addEventListener('click', function(){
+    !svgTween41.playing && svgTween41.start();
+    !svgTween42.playing && svgTween42.start();
+}, false);
+
 
 // fill HEX/RGBa
 var tween1 = KUTE.to('#fillSVG', {fill: '#069'}, {duration: 1500, yoyo:true, repeat: 1});
diff --git a/index.html b/index.html
index fdbf0a3..df97d46 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,8 @@
     
     
     
-    
-    
+    
+    
     
     
 
diff --git a/properties.html b/properties.html
index 6000c1e..cb632e9 100644
--- a/properties.html
+++ b/properties.html
@@ -88,27 +88,37 @@
 		
    2D Transform Properties
    
 		
    The core engine supports all 2D transform properties except matrix.
    
 		
      
-			
    • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. Supported on IE9.
      • 
-			
    • rotate is a property used to rotate an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. Supported on IE9.
      • 
-			
    • skewX is a property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew an element by 25 degrees. Supported on IE9.
      • 
-			
    • skewY is a property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew an element by 25 degrees. Supported on IE9.
      • 
-			
    • scale is a property used to apply a single value size transformation. Eg. scale:2 will enlarge an element by a degree of 2. Supported on IE9.
      • 
+			
    • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
      • 
+			
    • rotate property applies rotation to an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. IE9+
      • 
+			
    • skewX property applies a skew transformation on the X axis. Eg. skewX:25 will skew an element by 25 degrees. IE9+
      • 
+			
    • skewY property applies a skew transformation on the Y axis. Eg. skewY:25 will skew an element by 25 degrees. IE9+
      • 
+			
    • scale property applies a single value size transformation. Eg. scale:2 will enlarge an element by a degree of 2. IE9+
      • 
 			
    • matrix, double axis skew and double axis scale properties are not supported.
      • 
 		
    		
 		
 		
    3D Transform Properties
    
 		
    The core engine supports all 3D transform properties except matrix3d and rotate3d.
    
         
      
-			
    • translateX property is for horizontal movement. EG. translateX:150 to translate an element 150px to the right. Modern browsers only.
      • 
-			
    • translateY property is for vertical movement. EG. translateY:-250 to translate an element 250px towards the top. Modern browsers only.
      • 
-			
    • translateZ property is for movement on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px to it's back, making it smaller. Modern browsers only and requires a perspective tween option to be used; the smaller perspective value, the deeper translation.
      • 
-			
    • translate3d property is for movement on all the axis in a given 3D field. EG. translate3d:[-150,200,150] 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 perspective tween option.
      • 
-			
    • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Modern browsers only and requires perspective.
      • 
-			
    • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and also requires perspective.
      • 
-			
    • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and doesn't require perspective.
      • 
+			
    • translateX property is for horizontal translation. EG. translateX:150 to translate an element 150px to the right. IE10+
      • 
+			
    • translateY property is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top. IE10+
      • 
+			
    • translateZ property is for translation on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px to it's back, making it smaller. Requires a perspective tween option to be used; the smaller perspective value, the deeper translation. IE10+
      • 
+			
    • translate3d property is for movement on all the axis in a given 3D field. EG. translate3d:[-150,200,150] to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer, making it larger. Also requires using a perspective tween option. IE10+
      • 
+			
    • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Requires perspective. IE10+
      • 
+			
    • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Requires perspective. IE10+
      • 
+			
    • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. IE10+
      • 
 			
    • matrix3d, rotate3d, and scale3d properties are not supported.
      • 
 		
    
 
+		
    SVG Transform
    
+		
    The SVG Plugin features cross browser 2D transform animations via the svgTransform tween property and the transform presentation attribute, similar in functionality as the Attributes Plugin.
    
+        
      
+			
    • translate sub-property applies horizontal and / or vertical translation. EG. translate:150 to translate a shape 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
      • 
+			
    • rotate sub-property applies rotation to a shape on the Z axis. Eg. rotate:150 will rotate a shape clockwise by 150 degrees or rotate: [45,25,25] to rotate the shape by 45 degrees around the [25,25] coordinate of the parent <svg>. IE9+
      • 
+			
    • skewX sub-property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew a shape by 25 degrees. IE9+
      • 
+			
    • skewY sub-property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew a shape by 25 degrees. IE9+
      • 
+			
    • scale sub-property used to apply a single value size transformation. When using this sub-property, the translate will be automatically adjusted to make sure the animation looks as you would expect it from a regular HTML5 element. Eg. scale:0.5 will scale down a shape to half of it's initial size. IE9+
      • 
+		
    
+
 		
    Box Model Properties
    
 		
    The core engine supports width, height, left and top while the CSS Plugin adds support for all other box-model properties.
    
 		
      
diff --git a/src/kute-svg.js b/src/kute-svg.js
index 4cf8b43..81c9a02 100644
--- a/src/kute-svg.js
+++ b/src/kute-svg.js
@@ -204,7 +204,7 @@
     return a;
   }
   
-  S.pTA = function(p) { // simple pathToAbsolute for polygons | this is still a work in progress
+  S.pTA = function(p) { // simple pathToAbsolute for polygons | this is still BETA / a work in progress
     var np = p.match(pathReg), wp = [], l = np.length, s, c, r, x = 0, y = 0;
     for (var i = 0; i 1) {
-      function coord(p) {
+      var coord = function (p) {
         var c = p.split(',');
         if (c.length != 2) {
           return; // return undefined
@@ -387,14 +332,14 @@
           return;
         }
         return [parseFloat(c[0]), parseFloat(c[1])];
-      }
+      };
 
-      function dist(c1, c2) {
+      var dist = function (c1, c2) {
         if (c1 != undefined && c2 != undefined) {
           return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2));
         }
         return 0;
-      }
+      };
 
       if (points.length > 2) {
         for (var i=0; i
     
     
-    
+    
     
      
 
@@ -80,7 +80,7 @@
 
 	
      
 		
      SVG Plugin
      
-		
      The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, as well as SVG morphing of path shapes. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.
      
+		
      The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, SVG morphing of path shapes and SVG transforms. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.
      
         
      Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG so make sure to fiter out your SVG tweens.
      
 		
      SVG Morphing
      
         
      One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:
      
@@ -313,7 +313,97 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
 		
      
 		
      Remember: the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% as start value for your tweens when stroke-dasharray and stroke-dashoffset are not set.
      				
 
-		
      CSS Properties
      
+		
      SVG Transforms
      
+		
      Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser transforms for SVG, but I decided to code a separate set of methods for SVG only, to keep performance tight. A very simple roadmap was described here; in brief we needed to find a way to enable transforms for SVG in a reliable and cross-browser supported fashion. In that sense the plugin will allow you to animate SVG shapes via the transform presentation attribute and the svgTransform tween property. To make sure we don't mess up with the current methods, we changed the syntax a little bit:
      
+
      // using all possible values
+var tween1 = KUTE.to('selector', {svgTransform: { translate: [150,100], rotate: [45,0,0], skewX: 15, skewY: 20, scale: [1.2,1.3] }});
+// using shorthand notations
+var tween2 = KUTE.to('selector', {svgTransform: { translate: 120, rotate: 45, scale: 1.2 }});
+
      
+        
      As you can see we have some familiar notation as well as new notation. Let's break it down.
      
+
+        
      SVG Rotation
      
+        
      In our first example we'll have a look at rotations. For instance setting rotate: [45,0,0], the first value is the angle to which the shape will rotate to and the other two values are coordinates for the transform-origin. When rotate: 45 notation is used, the script will calculate the coordinates of the shape's central point, as if your transform-origin default value is 50% 50%, something you would expect from regular HTML elements. However keep in mind that the transform-origin coordinates are relative to the parent <svg> element. Let's have a look at a quick demo:
      
+		
      
+            
+                            
+                            
+            
+	
+			
      
+				Start	
+			
      
+		
      
+        
      The first tween uses the rotate: [-360,0,0] notation and the animation clearly shows the shape rotating around it's top left coordinate. The second tween uses the rotate: 360 notation and the animation shows the shape rotating around it's own central point.
      
+        
      When for CSS3 transforms we could have used values such as 50% 50% or center bottom as transform-origin and the entire processing was basically none, when it comes to SVG we need to make use of the SVG API functions to determine the proper value. But stay cool, here comes .getBBox() to the rescue! And here's how to:
      
+
      // get the bounding box
+var bb = element.getBBox(); // returns an object like {x:0, y:20, width:200, height: 200} for any type of shape
+    
+// determine the X point of transform-origin for 25%
+var transformOriginX = bb.x + (25 * bb.width / 100);
+
+// determine the Y point of transform-origin for 75%
+var transformOriginY = bb.y + (75 * bb.height / 100);
+
+// set your rotation tween with "25% 75%" transform-origin
+var rotationTween = KUTE.to(element, {svgTransform: {rotate: [45, transformOriginX, transformOriginY]}});
+
      
+
+        
      SVG Translation
      
+        
      In this example we'll have a look at translations, so when setting translate: [150,0], the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation. When translate: 150 notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:
      
+		
      
+            
+                            
+                            
+            
+	
+			
      
+				Start	
+			
      
+		
      
+        
      The first tween uses the translate: [580,0] notation and the second tween uses the translate: 0 notation. Keep in mind that the values are unitless and are relative to the viewBox attribute.
      
+        
+        
      SVG Skew
      
+        
      For skews for SVGs we have a very simple notation: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:
      
+		
      
+            
+                            
+                            
+            
+	
+			
      
+				Start	
+			
      
+		
      
+        
      The first tween skews the shape on X (horizontal) axis and the second tween skews the shape on Y (vertical) axis.
      
+        
+        
      SVG Scaling
      
+        
      Our last transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:
      
+		
      
+            
+                            
+                            
+            
+	
+			
      
+				Start	
+			
      
+		
      
+        
      The first tween scales the shape at scale: 1.5 and the second tween scales down the shape at scale: 0.5 value. If you inspect the elements, you will notice for both shapes translation is involved, and this is to keep transform-origin at an expected 50% 50% value, well, approximately.
      
+
+        
      Recommendations for SVG Transforms
      
+        
        
+            
      • To make sure animations don't go out of control, always use same order of transform properties: translate, rotate, skewX, skewY, scale.
        • 
+            
      • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
        • 
+            
      • By default browsers use overflow: hidden for <svg> so child elements are partially/completelly hidden while animating. You might want to set overflow: visible if that is the case or some browser specific tricks.
        • 
+            
      • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply don't work. You might want to check this tutorial.
        • 
+            
      • Unlike the CSS3 transform animation featured in the core engine, the svgTransform feature does not stack properties for chains of tween objects created with the .to() method, you will have to provide all properties that you need in all chained tweens.
        • 
+            
      • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
        • 
+            
      • Also the svgTransform feature does not support 3D transforms, because they are not supported in all browsers.
        • 
+            
      • Rotations will always use the valuesEnd value of the transform origin and cannot be animated, so that translations don't get messed up.
        • 
+        
      
+
+        
      CSS Properties Specific to SVGs
      
 		
      As you probably noticed in the above examples we've animated the background color for some of the shapes, that is fill, one of the properties supported by the SVG Plugin, so let's create some tweens real quick:
      
 
      // fill HEX/RGBa
 var tween1 = KUTE.to('selector', {fill: '#069'});
@@ -330,7 +420,7 @@ var tween4 = KUTE.to('selector',{strokeOpacity: 0.6});
 // strokeWidth Number
 var tween5 = KUTE.to('selector',{strokeWidth: 10});
 
             
-        
      A quick demo with the above:
      
+        
      A quick demo with the above:
      
 		
      
             
                 Attributes Plugin to enable even more advanced/complex animations for SVG elements.
      
     
     
      Future Plans
      
-    
      The future versions of the SVG Plugin might also feature improved cross browser transform animations, as currently the core engine only works and was tested with HTML elements of most types except SVG.
      
-    
      Since most of this plugin scripting works with path or glyph elements, I'm also considering a very light convertToPath feature, but there are some already out there.
      
+    
      Since SVG morph scripting works only with path or glyph elements, I'm also considering a very light convertToPath feature, but there are some already out there.

    We're gonna chain these tweens and start the animation. You can download this example here.

    -
    BOX
     MODEL 
    +
    BOX
     MODEL 
    Start @@ -159,7 +159,7 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();

    Let's get some animation going. Download the example here.

    -
    Colors
    +
    Colors
    Start diff --git a/extend.html b/extend.html index 6d5b914..5569e23 100644 --- a/extend.html +++ b/extend.html @@ -213,23 +213,29 @@ K.pp['boxShadow'] = function(property,value,element){ // the DOM update function for boxShadow registers here // we only enqueue it if the boxShadow property is used to tween if ( !('boxShadow' in K.dom) ) { - K.dom['boxShadow'] = function(w,p,v) { + K.dom['boxShadow'] = function(l,p,a,b,v) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress + // 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); + var numbers = [], px = 'px', // the unit is always px + inset = a[5] !== 'none' || w._vE[p][5] !== 'none' ? ' inset' : false; + + for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers + numbers.push( (a[i] + (b[i] - a[i]) * v ) + px); + // we can also write this like this now, starting 1.5.3 + // numbers.push( K.Interpolate.unit(a[i], b[i], px, v) ); } // now we handle the color - var color, _color = {}; + var colorValue, _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 + ') '; + colorValue = 'rgb(' + _color.r + ',' + _color.g + ',' + _color.b + ') '; + // for color interpolation, starting with v1.5.3 we can cut it short to this + // var colorValue = K.Interpolate.color(a[5],b[5],v); // last piece of the puzzle, the DOM update - w._el.style[_boxShadow] = inset ? color + numbers.join(' ') + inset : color + numbers.join(' '); + l.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' '); }; } @@ -305,12 +311,15 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
  • KUTE.property(propertyName) is the autoPrefix function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function returns undefinedPropertyName and that would be an easy way to detect support for that property on most legacy browsers: 
    if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }
  • KUTE.getPrefix() returns a vendor preffix even if the browser supports a specific preffixed property or not.
  • KUTE.gCS(element,property) a hybrid getComputedStyle function to get the current value of the property required for the .to() method; it actually checks in element.style, element.currentStyle and window.getComputedStyle(element,null) to make sure it won't miss the property value;
    • -
  • KUTE.gIS() a getInlineStyle function to read the current inline style, very useful for transform, because decomposing a computed matrix would require a ton lot more code;
    • -
  • KUTE.truD(value) a function that accepts String and Number and returns a {v: 150, u: 'px'} object for any box model or a single numeric value based property and make it ready to tween.
    • +
  • KUTE.truD(value) a function that accepts String and Number and returns a {v: 150, u: 'px'} object for any box model or a single numeric value based property and make it ready to tween. When a second parameter is set to true it will return an object with value and unit specific for rotation angles and skews.
  • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color, the IE9+ browsers will be able to return the rgb object we need.
  • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
  • KUTE.rth(r,g,b) a function that accepts numeric values for red, blue and green and returns a HEX format #006699 color string.
    • - +
  • KUTE.Interpolate.number is most essential interpolation tool when developing plugins for various properties not supported in the core.
    • +
  • KUTE.Interpolate.unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
    • +
  • KUTE.Interpolate.color is a very fast interpolation function for colors, as used in the above example.
    • +
  • KUTE.Interpolate.array and KUTE.Interpolate.coords are SVG Plugin only, but you can have a look anytime when you're out of ideas.
    • + +

    SVG Properties

    +

    The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability.

    + +

    Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset. +

    The SVG Plugin also manages animation for most useful CSS properties that are specific to SVG elements, since SMIL animations tend to go extinct, this plugin can get quite useful.

    +
      +
    • strokeWidth allows you to animate the stroke-width for a given SVG element.
      • +
    • strokeOpacity allows you to animate the stroke-opacity for a given SVG element.
      • +
    • fillOpacity allows you to animate the fill-opacity for a given SVG element.
      • +
    • stopOpacity allows you to animate the stop-opacity for a given gradient SVG element.
      • +
    • fill allows you to animate the fill color property for a given SVG element.
      • +
    • stroke allows you to animate the stroke color for a given SVG element.
      • +
    • stopColor allows you to animate the stop-color for a given gradient SVG element.
      • +
    +

    Box Model Properties

    The core engine supports width, height, left and top while the CSS Plugin adds support for all other box-model properties.

      @@ -152,21 +167,6 @@
    • borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow you to animate the color of the border on each side of a given element.

    Remember: shorthands for borderColor property are not supported.

    - -

    SVG Properties

    -

    The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability.

    - -

    Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset. -

    The SVG Plugin also manages animation for most useful CSS properties that are specific to SVG elements, since SMIL animations tend to go extinct, this plugin can get quite useful.

    -
      -
    • strokeWidth allows you to animate the stroke-width for a given SVG element.
      • -
    • strokeOpacity allows you to animate the stroke-opacity for a given SVG element.
      • -
    • fillOpacity allows you to animate the fill-opacity for a given SVG element.
      • -
    • stopOpacity allows you to animate the stop-opacity for a given gradient SVG element.
      • -
    • fill allows you to animate the fill color property for a given SVG element.
      • -
    • stroke allows you to animate the stroke color for a given SVG element.
      • -
    • stopColor allows you to animate the stop-color for a given gradient SVG element.
      • -

    Presentation Attributes

    The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.

    diff --git a/src/kute-attr.js b/src/kute-attr.js index 323f2f6..ed0bfb9 100644 --- a/src/kute-attr.js +++ b/src/kute-attr.js @@ -21,7 +21,8 @@ } }( function (KUTE) { 'use strict'; - var K = window.KUTE; + + var K = window.KUTE, DOM = K.dom, PP = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number; // get current attribute value K.gCA = function(e,a){ @@ -35,35 +36,35 @@ } return f; }; - // register the render attributes object - if (!('attr' in K.dom)) { - K.dom.attr = function(w,p,v){ - for ( var o in w._vE[p] ){ - K.dom.attr.prototype[o](w,o,v); + if (!('attr' in DOM)) { + DOM.attr = function(l,p,a,b,v) { + for ( var o in b ){ + DOM.attr.prototype[o](l,o,a[o],b[o],v); } }; } - var ra = K.dom.attr.prototype; - + var ra = DOM.attr.prototype; + // process attributes object K.pp.attr(t[x]) // and also register their render functions - K.pp['attr'] = function(a,o){ + PP['attr'] = function(a,o){ var ats = {}, p; for ( p in o ) { if ( /%|px/.test(o[p]) ) { var u = K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u; if (!(p+s in ra)) { - ra[p+s] = function(w,p,v){ - w._el.setAttribute(p.replace(s,''), (w._vS.attr[p].v + (w._vE.attr[p].v - w._vS.attr[p].v) * v) + w._vE.attr[p].u); + ra[p+s] = function(l,p,a,b,v) { + var _p = p.replace(s,''); + l.setAttribute(_p, unit(a.v,b.v,b.u,v) ); } } ats[p+s] = K.truD(o[p]); } else { if (!(p in ra)) { - ra[p] = function(w,p,v){ - w._el.setAttribute(p, w._vS.attr[p] + (w._vE.attr[p]- w._vS.attr[p]) * v); + ra[p] = function(l,o,a,b,v) { + l.setAttribute(o, number(a,b,v)); } } ats[p] = o[p] * 1; diff --git a/src/kute-bezier.js b/src/kute-bezier.js index f402215..0f631d7 100644 --- a/src/kute-bezier.js +++ b/src/kute-bezier.js @@ -5,26 +5,6 @@ * 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) { diff --git a/src/kute-css.js b/src/kute-css.js index 12d6261..8dc94db 100644 --- a/src/kute-css.js +++ b/src/kute-css.js @@ -16,7 +16,7 @@ throw new Error("CSS Plugin require KUTE.js.") } })(function(KUTE){ - var K = window.KUTE, p, + var K = window.KUTE, p, DOM = K.dom, PP = K.pp, _br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'), // all radius props prefixed _brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'), _cls = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0) @@ -28,7 +28,8 @@ _clp = ['clip'], _bg = ['backgroundPosition'], // clip | background position _mg = _rd.concat(_bm,_tp), // a merge of all properties with px|%|em|rem|etc unit - _all = _cls.concat(_clp, _rd, _bm, _tp, _bg), al = _all.length, + _all = _cls.concat(_clp, _rd, _bm, _tp, _bg), al = _all.length, + number = K.Interpolate.number, unit = K.Interpolate.unit, color = K.Interpolate.color, _d = _d || {}; //all properties default values //populate default values object @@ -48,26 +49,13 @@ // create prepare/process/render functions for additional colors properties for (var i = 0, l = _cls.length; i 2) { - return a[0].trim() + 'z'; - } else { return p.trim(); } + return p.split(/z/i).shift() + 'z'; } S.cP = function (p){ // createPath @@ -216,7 +223,7 @@ np[i] = np[i].replace(/(^|[^,])\s*-/g, '$1,-').replace(/(\s+\,|\s|\,)/g,',').replace(r,'').split(','); np[i][0] = parseFloat(np[i][0]); np[i][1] = parseFloat(np[i][1]); - if (i === 0) { x+=np[i][0]; y +=np[i][1]; } + if (i === 0) { x+=np[i][0]; y +=np[i][1]; } else { x = np[i-1][0]; y = np[i-1][1]; @@ -234,23 +241,16 @@ } return np; } - - // a shortHand pathCross - K.svq = function(w){ if ( w._vE.path ) S.pCr(w); } + + // a shortHand pathCross && SVG transform stack + K.svq = function(w){ if ( w._vE.path ) S.pCr(w); if ( w._vE.svgTransform ) S.sT(w); } // register the render SVG path object // process path object and also register the render function K.pp['path'] = function(a,o,l) { // K.pp['path']('path',value,element); - if (!('path' in K.dom)) { - K.dom['path'] = function(w,p,v){ - var points =[], i, l; - for(i=0,l=w._vE.path.d.length;i 1) { var coord = function (p) { @@ -373,30 +369,16 @@ var rx = el.getAttribute('rx'), ry = el.getAttribute('ry'), len = 2*rx, wid = 2*ry; return ((Math.sqrt(.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2; - } - + } // SVG CSS Color Properties for ( var i = 0, l = _cls.length; i< l; i++) { p = _cls[i]; - K.pp[p] = function(p,v){ - if (!(p in K.dom)) { - K.dom[p] = function(w,p,v){ - var _c = {}; - for (var c in w._vE[p]) { - if ( c !== 'a' ){ - _c[c] = parseInt(w._vS[p][c] + (w._vE[p][c] - w._vS[p][c]) * v )||0; - } else { - _c[c] = (w._vS[p][c] && w._vE[p][c]) ? parseFloat(w._vS[p][c] + (w._vE[p][c] - w._vS[p][c]) * v) : null; - } - } - - if ( w._hex ) { - w._el.style[p] = K.rth( _c.r, _c.g, _c.b ); - } else { - w._el.style[p] = !_c.a ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')'; - } - } + PP[p] = function(p,v){ + if (!(p in DOM)) { + DOM[p] = function(l,p,a,b,v,o) { + l.style[p] = color(a,b,v,o.keepHex); + }; } return K.truC(v); } @@ -404,23 +386,25 @@ return K.gCS(el,p) || 'rgba(0,0,0,0)'; } } + for ( var i = 0, l = _nm.length; i< l; i++) { // for numeric CSS props from any type of SVG shape p = _nm[i]; - if (p === 'strokeWidth'){ - K.pp[p] = function(p,v){ - if (!(p in K.dom)) { - K.dom[p] = function(w,p,v) { - w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v) + w._vS[p].unit; + if (p === 'strokeWidth'){ // stroke can be unitless or unit | http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg + PP[p] = function(p,v){ + if (!(p in DOM)) { + DOM[p] = function(l,p,a,b,v) { + var _u = _u || typeof b === 'number'; + l.style[p] = !_u ? unit(a.value,b.value,b.unit,v) : number(a,b,v); } } - return K.pp.box(p,v); + return /px|%|em|vh|vw/.test(v) ? PP.box(p,v) : parseFloat(v); } } else { - K.pp[p] = function(p,v){ - if (!(p in K.dom)) { - K.dom[p] = function(w,p,v) { - w._el.style[p] = w._vS[p] + (w._vE[p] - w._vS[p]) * v; + PP[p] = function(p,v){ + if (!(p in DOM)) { + DOM[p] = function(l,p,a,b,v) { + l.style[p] = number(a,b,v); } } return parseFloat(v); @@ -432,72 +416,115 @@ } // SVG Transform - K.pp['svgTransform'] = function(p,v,l){ + PP['svgTransform'] = function(p,v,l){ // register the render function - if (!('svgTransform' in K.dom)) { - K.dom['svgTransform'] = function(w,p,v) { + if (!('svgTransform' in DOM)) { + DOM['svgTransform'] = function(l,p,a,b,v){ var tr = '', i; - for (i in w._vE[p]){ + for (i in b){ tr += i + '('; // start string if ( i === 'translate'){ // translate - tr += (w._vS[p][i][1] === w._vE[p][i][1] && w._vE[p][i][1] === 0 ) - ? (w._vS[p][i][0] + (w._vE[p][i][0] - w._vS[p][i][0]) * v ) - : (w._vS[p][i][0] + (w._vE[p][i][0] - w._vS[p][i][0]) * v ) + ' ' + (w._vS[p][i][1] + (w._vE[p][i][1] - w._vS[p][i][1]) * v ); + tr += (a[i][1] === b[i][1] && b[i][1] === 0 ) + ? number(a[i][0],b[i][0],v) + : number(a[i][0],b[i][0],v) + ' ' + number(a[i][1],b[i][1],v); } else if ( i === 'rotate'){ // rotate - tr += w._vS[p][i][0] + (w._vE[p][i][0] - w._vS[p][i][0]) * v + ' '; - tr += !w.reversed ? w._vE[p][i][1] + ',' + w._vE[p][i][2] : w._vS[p][i][1] + ',' + w._vS[p][i][2]; // make sure to always use the right transform-origin + tr += number(a[i][0],b[i][0],v) + ' '; + tr += b[i][1] + ',' + b[i][2]; } else { // scale, skewX or skewY - tr += w._vS[p][i] + (w._vE[p][i] - w._vS[p][i]) * v; + tr += number(a[i],b[i],v); } tr += ') '; // end string } - w._el.setAttributeNS(null,'transform', tr.replace(/\)\s$/,')') ); + l.setAttribute('transform', tr.trim() ); } } - // return transform object - var tf = {}, bb = l.getBBox(), cx = bb.x + bb.width/2, cy = bb.y + bb.height/2, i, r, t; - for ( i in v ) { + // now prepare transform + var tf = {}, bb = l.getBBox(), cx = bb.x + bb.width/2, cy = bb.y + bb.height/2, r, cr, t, ct; + + for ( i in v ) { // populate the valuesStart and / or valuesEnd if (i === 'rotate'){ - r = v[i] instanceof Array ? v[i] + r = v[i] instanceof Array ? v[i] : /\s/.test(v[i]) ? [v[i].split(' ')[0]*1, v[i].split(' ')[1].split(',')[0]*1, v[i].split(' ')[1].split(',')[1]*1] - : [v[i],cx,cy]; + : [v[i]*1,cx,cy]; tf[i] = r; } else if (i === 'translate'){ - t = v[i] instanceof Array ? v[i] : /\s/.test(v[i]) ? v[i].split(' ') : [v[i],0]; - tf[i] = [t[0] * 1||0, t[1] * 1]; + t = v[i] instanceof Array ? v[i] : /\,|\s/.test(v[i]) ? v[i].split(/\,|\s/) : [v[i]*1,0]; + tf[i] = [t[0] * 1||0, t[1] * 1||0]; } else if (i === 'scale'){ tf[i] = v[i] * 1||1; - } else { + } else if (/skew/.test(i)) { tf[i] = v[i] * 1||0; } } + // try to adjust translation when scale is used, probably we should do the same when using skews, but I think it's a waste of time // http://www.petercollingridge.co.uk/interactive-svg-components/pan-and-zoom-control - // try to adjust translation when scale is used if ('scale' in tf) { - tf['translate'] = !( 'translate' in tf ) ? [0,0] : tf['translate']; - tf['translate'][0] += (1-tf['scale']) * bb.width/2; + !('translate' in tf) && ( tf['translate'] = [0,0] ); // if no translate is found in current value or next value, we default to 0 + tf['translate'][0] += (1-tf['scale']) * bb.width/2; tf['translate'][1] += (1-tf['scale']) * bb.height/2; - } + // adjust rotation transform origin and translation when skews are used, to make the animation look exactly the same as if we were't using svgTransform + // http://stackoverflow.com/questions/39191054/how-to-compensate-translate-when-skewx-and-skewy-are-used-on-svg/39192565#39192565 + if ('rotate' in tf) { + tf['rotate'][1] -= 'skewX' in tf ? Math.tan(tf['skewX']) * bb.height : 0; + tf['rotate'][2] -= 'skewY' in tf ? Math.tan(tf['skewY']) * bb.width : 0; + } + tf['translate'][0] += 'skewX' in tf ? Math.tan(tf['skewX']) * bb.height*2 : 0; + tf['translate'][1] += 'skewY' in tf ? Math.tan(tf['skewY']) * bb.width*2 : 0; + } // more variations here https://gist.github.com/thednp/0b93068e20adb84658b5840ead0a07f8 + return tf; } // KUTE.prepareStart K.prS[p](el,p,to[p]) // returns an obect with current transform attribute value K.prS['svgTransform'] = function(l,p,t) { - var tr = {}, cta = l.getAttributeNS(null,'transform'), - ct = cta && /\)/.test(cta) ? cta.split(')') : 'none', i, j, ctr ={}, pr; - if (ct instanceof Array) { - for (j=0; j,./?\=-").split(""), // symbols _n = String("0123456789").split(""), // numeric _a = _s.concat(_S,_n), // alpha numeric _all = _a.concat(_sb), // all caracters - _r = Math.random, _f = Math.floor, _m = Math.min; + random = Math.random, floor = Math.floor, min = Math.min; K.prS['text'] = K.prS['number'] = function(l,p,v){ return l.innerHTML; } - K.pp['text'] = function(p,v,l) { - if ( !( 'text' in K.dom ) ) { - K.dom['text'] = function(w,p,v) { - var tp = tp || w.textChars === 'alpha' ? _s // textChars is alpha - : w.textChars === 'upper' ? _S // textChars is numeric - : w.textChars === 'numeric' ? _n // textChars is numeric - : w.textChars === 'alphanumeric' ? _a // textChars is alphanumeric - : w.textChars === 'symbols' ? _sb // textChars is symbols - : w.textChars ? w.textChars.split('') // textChars is a custom text - : _s, l = tp.length, s = w._vE[p], - t = tp[_f((_r() * l))], tx = '', f = s.substring(0); + PP['text'] = function(p,v,l) { + if ( !( 'text' in DOM ) ) { + DOM['text'] = function(l,p,a,b,v,o) { + var tp = tp || o.textChars === 'alpha' ? _s // textChars is alpha + : o.textChars === 'upper' ? _S // textChars is numeric + : o.textChars === 'numeric' ? _n // textChars is numeric + : o.textChars === 'alphanumeric' ? _a // textChars is alphanumeric + : o.textChars === 'symbols' ? _sb // textChars is symbols + : o.textChars ? o.textChars.split('') // textChars is a custom text + : _s, ll = tp.length, + t = tp[floor((random() * ll))], ix = '', tx = '', fi = a.substring(0), f = b.substring(0); - tx = f.substring(0,_f(_m(v * f.length, f.length))); - w._el.innerHTML = v < 1 ? tx+t : tx; + // use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? + ix = a !== '' ? fi.substring(fi.length,floor(min(v * fi.length, fi.length))) : ''; // initial text, A value + tx = f.substring(0,floor(min(v * f.length, f.length))); // end text, B value + l.innerHTML = v < 1 ? tx + t + ix : b; } } return v; } - K.pp['number'] = function(p,v,l) { - if ( !( 'number' in K.dom ) ) { - K.dom['number'] = function(w,p,v) { - w._el.innerHTML = parseInt(w._vS[p] + (w._vE[p] - w._vS[p]) * v); + PP['number'] = function(p,v,l) { + if ( !( 'number' in DOM ) ) { + DOM['number'] = function(l,p,a,b,v) { + l.innerHTML = parseInt( number(a, b, v)); } } return parseInt(v) || 0; diff --git a/src/kute.js b/src/kute.js index c82329b..5ed87f7 100644 --- a/src/kute.js +++ b/src/kute.js @@ -13,37 +13,137 @@ } }( function () { "use strict"; - var K = K || {}, _tws = [], _t, _min = Math.min; + var K = K || {}, _tws = [], _t = null, - K.getPrefix = function() { //returns browser prefix - 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; - }; - - K.property = function(p){ // returns prefixed property | property - var r = (!(p in document.body.style)) ? true : false, f = K.getPrefix(); // is prefix required for property | prefix - return r ? f + (p.charAt(0).toUpperCase() + p.slice(1)) : p; - }; - - K.selector = function(el,multi){ // a selector utility - var nl; - if (multi){ - nl = el instanceof NodeList ? 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; - }; - - var _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch? + getPrefix = function() { //returns browser prefix + 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; + }, + property = function(p){ // returns prefixed property | property + var 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; + }, + selector = function(el,multi){ // a selector utility + var nl; + if (multi){ + nl = el instanceof NodeList ? 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; + }, + trueDimendion = 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 0) { - if ( w._r < 9999 ) { w._r--; } + if ( w._r < 9999 ) { w._r--; } // we have to make it stop somewhere, infinity is too damn much if (w._y) { w.reversed = !w.reversed; w.rvs(); } // handle yoyo @@ -130,8 +253,7 @@ if (w._cC) { w._cC.call(); } - //stop preventing scroll when scroll tween finished - w.scrollOut(); + w.scrollOut(); // unbind preventing scroll when scroll tween finished // start animating chained tweens var i = 0, ctl = w._cT.length; @@ -145,41 +267,25 @@ } } return true; - }; - - // internal ticker - K._tk = function (t) { - var i = 0, tl; - _t = _raf(K._tk); - while ( i < (tl = _tws.length) ) { - if ( K._u(_tws[i],t) ) { - i++; - } else { - _tws.splice(i, 1); - } - } - }; - - // aplies the transform origin and perspective - K.perspective = function (l,w) { + }, + + // applies the transform origin and perspective + 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; }; + getAll = function () { return _tws; }, + removeAll = function () { _tws = []; }, + add = function (tw) { _tws.push(tw); }, + remove = function (tw) { var i = _tws.indexOf(tw); if (i !== -1) { _tws.splice(i, 1); }}, + stop = function () { _t && _caf(_t); _t = null; }, // process properties for _vE and _vS or one of them - K.prP = function (e, s, l) { + preparePropertiesObject = function (e, s, l) { var i, pl = arguments.length, _st = []; pl = pl > 2 ? 2 : pl; for (i=0; i 0) { self._r = self.repeat; } - if (self._y && self.reversed===true) { self.rvs(); self.reversed = false; } - self.playing = false; - },64) - }; + + this.close = function () { + var self = this; + setTimeout(function(){ + var i = _tws.indexOf(self); + if (i === _tws.length-1) { stop(); } + if (self.repeat > 0) { self._r = self.repeat; } + if (self._y && self.reversed===true) { self.rvs(); self.reversed = false; } + self.playing = false; + },64) + } + }, // the multi elements Tween constructs - K.TweensTO = function (els, vE, o) { // .to + TweensTO = 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]) ); + this.tweens.push( to(els[i], vE, _o[i]) ); } - }; - K.TweensFT = function (els, vS, vE, o) { // .fromTo + }, + 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]) ); + this.tweens.push( fromTo(els[i], vS, vE, _o[i]) ); } }; - var ws = K.TweensTO.prototype = K.TweensFT.prototype; + + var ws = TweensTO.prototype = TweensFT.prototype; ws.start = function(t){ t = t || window.performance.now(); var i, tl = this.tweens.length; @@ -799,5 +733,53 @@ ws.chain = function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; } ws.play = ws.resume = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; } + var start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it + this.scrollIn(); + + perspective(this._el,this); // apply the perspective and transform origin + if ( this._rpr ) { this.stack(); } // on start we reprocess the valuesStart for TO() method + + for ( var e in this._vE ) { + this._vSR[e] = this._vS[e]; + } + + // now it's a good time to start + add(this); + this.playing = true; + this.paused = false; + this._sCF = false; + this._sT = t || window.performance.now(); + this._sT += this._dl; + + if (!this._sCF) { + if (this._sC) { this._sC.call(); } + this._sCF = true; + } + if (!_t) _tk(); + return this; + }, + play = function () { + if (this.paused && this.playing) { + this.paused = false; + if (this._rC !== null) { this._rC.call(); } + this._sT += window.performance.now() - this._pST; + add(this); + if (!_t) _tk(); // restart ticking if stopped + } + return this; + }; + Tween.prototype.start = start; + Tween.prototype.play = Tween.prototype.resume = play; + + K = { // export core methods to public for plugins + property: property, getPrefix: getPrefix, selector: selector, pe : pe, // utils + to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods + Interpolate: {number: number, unit: unit, color: color }, // interpolators ?? move array & coords to svg and leave color + dom: DOM, // DOM manipulation + pp: parseProperty, prS: prepareStart, // init + truD: trueDimendion, truC: trueColor, rth: rgbToHex, htr: hexToRGB, gCS: getComputedStyle, // property parsing + Easing: easing, + Tween: Tween, TweensTO: TweensTO, TweensFT: TweensFT // constructors + }; return K; })); \ No newline at end of file diff --git a/svg.html b/svg.html index b20396f..148f5ed 100644 --- a/svg.html +++ b/svg.html @@ -23,7 +23,7 @@ - + @@ -282,7 +282,7 @@ var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, {
  • When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.
  • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost any value, including the default value.
  • Polygons with only lineto path commands are best for performance.
    • -
  • Faster animation speed could be a great trick to hide any polygonal "artefacts".
    • +
  • Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.
  • Always use the showMorphInfo:true tween option to check how the values required for the morph change with every new option value, but never forget to disable it after you have optimized the morph to your liking, this option enables a function that detects the best index for points rotation that is very expensive and delays the animation for quite some time.
  • The SVG morph performance is the same for both .to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.
    • @@ -314,13 +314,21 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});

    Remember: the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% as start value for your tweens when stroke-dasharray and stroke-dashoffset are not set.

    SVG Transforms

    -

    Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser transforms for SVG, but I decided to code a separate set of methods for SVG only, to keep performance tight. A very simple roadmap was described here; in brief we needed to find a way to enable transforms for SVG in a reliable and cross-browser supported fashion. In that sense the plugin will allow you to animate SVG shapes via the transform presentation attribute and the svgTransform tween property. To make sure we don't mess up with the current methods, we changed the syntax a little bit:

    -
    // using all possible values
-var tween1 = KUTE.to('selector', {svgTransform: { translate: [150,100], rotate: [45,0,0], skewX: 15, skewY: 20, scale: [1.2,1.3] }});
-// using shorthand notations
-var tween2 = KUTE.to('selector', {svgTransform: { translate: 120, rotate: 45, scale: 1.2 }});
+		
    Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight. A very simple roadmap was described here; in brief we needed to find a way to enable transforms for SVG in a reliable and cross-browser supported fashion.
     
+        
    While you can still use regular CSS3 transforms for SVGs on browsers like Google Chrome and Firefox, to animate SVG shapes on all browsers, we use the transform presentation attribute and the svgTransform tween property with a special notation:
    
+
    // regular CSS3 transforms apply to SVG elements, but not working in IE and some older Opera versions
+var tween1 = KUTE.to('shape', { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }, {transformOrigin: "50% 50%"});
+
+// using the svgTransform property, working in all browsers
+// the Y translation as well as rotate transform-origin are provided
+var tween2 = KUTE.to('shape', {svgTransform: { translate: [120,100], rotate: [45,0,0], skewX: 15, skewY: 20, scale: 1.2 }}); 
+
+// OR using shorthand notations
+// we understand the Y translation is 0 and the rotation transform-origin is 50% 50%, 
+// the center of the shape and not the parent SVG's center
+var tween2 = KUTE.to('shape', {svgTransform: { translate: 120, rotate: 45, scale: 1.2 }}); 
 
    
-        
    As you can see we have some familiar notation as well as new notation. Let's break it down.
    
+        
    As you can see we have some familiar notation as well as new notation. One thing to know is that this feature may not support and wasn't tested for SVG specific chained/nested transformations. Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the transform attribute requires no degree or pixel as measurement units. Let's break it down.
    
 
         
    SVG Rotation
    
         
    In our first example we'll have a look at rotations. For instance setting rotate: [45,0,0], the first value is the angle to which the shape will rotate to and the other two values are coordinates for the transform-origin. When rotate: 45 notation is used, the script will calculate the coordinates of the shape's central point, as if your transform-origin default value is 50% 50%, something you would expect from regular HTML elements. However keep in mind that the transform-origin coordinates are relative to the parent <svg> element. Let's have a look at a quick demo:
    
@@ -334,19 +342,39 @@ var tween2 = KUTE.to('selector', {svgTransform: { translate: 120, rotate: 45, sc
 				Start
    -

    The first tween uses the rotate: [-360,0,0] notation and the animation clearly shows the shape rotating around it's top left coordinate. The second tween uses the rotate: 360 notation and the animation shows the shape rotating around it's own central point.

    -

    When for CSS3 transforms we could have used values such as 50% 50% or center bottom as transform-origin and the entire processing was basically none, when it comes to SVG we need to make use of the SVG API functions to determine the proper value. But stay cool, here comes .getBBox() to the rescue! And here's how to:

    -
    // get the bounding box
-var bb = element.getBBox(); // returns an object like {x:0, y:20, width:200, height: 200} for any type of shape
+        
    The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set transformOrigin option to 50% 50%, but this animation doesn't work in all browsers. The second tween uses the rotate: 360 notation and the animation shows the shape rotating around it's own central point, an animation that DO WORK in all SVG enabled browsers.
    
+        
    When for CSS3 transforms we could have used values such as center bottom as transform-origin (also not supported in all modern browsers), the entire processing was basically in/by the browser, however when it comes to SVG we need to make use of the SVG API functions to determine the proper value. But stay cool, here comes .getBBox() to the rescue! Here's how to rotate an element around it's 25% 75% coordinate:
    
+
+
    // rotate around element's "25% 75%"" coordinate as transform-origin
+// get the bounding box
+// returns an object like {x:0, y:20, width:200, height: 200} for any type of SVG shape
+// x is the distance from top, y is the distance from left, width and height are just that
+var bb = element.getBBox(); 
     
 // determine the X point of transform-origin for 25%
-var transformOriginX = bb.x + (25 * bb.width / 100);
+var shapeOriginX = bb.x + (25 * bb.width / 100);
 
 // determine the Y point of transform-origin for 75%
-var transformOriginY = bb.y + (75 * bb.height / 100);
+var shapeOriginY = bb.y + (75 * bb.height / 100);
 
-// set your rotation tween with "25% 75%" transform-origin
-var rotationTween = KUTE.to(element, {svgTransform: {rotate: [45, transformOriginX, transformOriginY]}});
+// set your rotation tween with "25% 75%" transform-origin 
+var rotationTween = KUTE.to(element, {svgTransform: {rotate: [45, shapeOriginX, shapeOriginY]}});
+
    
+
+        
    Or you can rotate an element around the parent's <svg> 50% 50% coordinate:
    
+
+
    // rotate around parent svg's "50% 50%" coordinate as transform-origin
+// get the bounding box
+var svgBB = element.ownerSVGElement.getBBox(); // returns same object but it's for the parent <svg> element
+    
+// determine the X point of transform-origin for 50%
+var svgOriginX = svgBB.x + (50 * svgBB.width / 100);
+
+// determine the Y point of transform-origin for 50%
+var svgOriginY = svgBB.y + (50 * svgBB.height / 100);
+
+// set your rotation tween with "50% 50%" transform-origin of the parent <svg> element
+var rotationTween = KUTE.to(element, {svgTransform: {rotate: [150, svgOriginX, svgOriginY]}});
 
    
 
         
    SVG Translation
    
@@ -361,7 +389,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: [45, transformOrigi
 				Start
    -

    The first tween uses the translate: [580,0] notation and the second tween uses the translate: 0 notation. Keep in mind that the values are unitless and are relative to the viewBox attribute.

    +

    The first tween uses the CSS3 translate: 580 notation and the second tween uses the translate: [0,0] as svgTransform value. For the second example the values are unitless and are relative to the viewBox attribute.

    SVG Skew

    For skews for SVGs we have a very simple notation: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:

    @@ -375,10 +403,11 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: [45, transformOrigi Start
    -

    The first tween skews the shape on X (horizontal) axis and the second tween skews the shape on Y (vertical) axis.

    +

    The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the svgTransform tween property. The example also showcases the fact that chain transformations for SVGs via transform attribute works just as for the CSS3 transformations and you really have to check the example code here to learn how to master this technique.

    +

    For this particular example we've set transformOrigin option to "0px 0px" for the first shape (the default value for SVGs' transform-origin on most browsers) because we cannot set anything similar for the skews of the transform attribute for the second shape. Generally skews are hard to handle for SVGs because they are independent of any transform-origin. We can only compensate with translation, a very complicated story.

    SVG Scaling

    -

    Our last transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:

    +

    Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:

    @@ -389,15 +418,29 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: [45, transformOrigi Start
    -

    The first tween scales the shape at scale: 1.5 and the second tween scales down the shape at scale: 0.5 value. If you inspect the elements, you will notice for both shapes translation is involved, and this is to keep transform-origin at an expected 50% 50% value, well, approximately.

    +

    The first tween scales the shape at scale: 1.5 via regular CSS3 transforms, and the second tween scales down the shape at scale: 0.5 value via svgTransform. If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected 50% 50% value. A similar case as with the skews.

    + +

    SVG Mixed Transforms

    +

    Our last transform example for SVGs is the mixed transformation. Similar with scale animation the plugin will try to adjust the rotation transform-origin to make it look as you would expect it from regular HTML elements. Let's combine 3 functions at the same time and see what happens:

    +
    + + + + + +
    + Start +
    +
    +

    Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. If you inspect the elements, you will notice the second shape's translation is different from what we've set in the tween object, and this is to keep transform-origin at an expected 50% 50% value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.

    Recommendations for SVG Transforms

      -
    • To make sure animations don't go out of control, always use same order of transform properties: translate, rotate, skewX, skewY, scale.
      • +
    • The SVG Plugin coming with KUTE.js version 1.5.3 is trying to make sure animations don't go out of control, but you need to always use same order of transform functions: translate, scale, rotate, skewX and skewY. All this to make sure the animation looks like we would expect from regular HTML elements transformations. Maybe future versions will feature .matrix() transformations to handle all possible transform function combinations, but I'm going to need help with implementation and testing.
    • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
      • -
    • By default browsers use overflow: hidden for <svg> so child elements are partially/completelly hidden while animating. You might want to set overflow: visible if that is the case or some browser specific tricks.
      • +
    • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible or some browser specific tricks if that is the case.
    • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply don't work. You might want to check this tutorial.
      • -
    • Unlike the CSS3 transform animation featured in the core engine, the svgTransform feature does not stack properties for chains of tween objects created with the .to() method, you will have to provide all properties that you need in all chained tweens.
      • +
    • Similar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the .to() method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow the properties that change and I highly recommend checking the example code for skews in the svg.js file.
    • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
    • Also the svgTransform feature does not support 3D transforms, because they are not supported in all browsers.
    • Rotations will always use the valuesEnd value of the transform origin and cannot be animated, so that translations don't get messed up.
      • @@ -417,8 +460,8 @@ var tween3 = KUTE.to('selector',{stroke: 'rgba(00,66,99,0.8)'}); // strokeOpacity Number 0-1 var tween4 = KUTE.to('selector',{strokeOpacity: 0.6}); -// strokeWidth Number -var tween5 = KUTE.to('selector',{strokeWidth: 10}); +// strokeWidth Number / String +var tween5 = KUTE.to('selector',{strokeWidth: '10px'});

      A quick demo with the above:

      @@ -431,7 +474,7 @@ var tween5 = KUTE.to('selector',{strokeWidth: 10}); Start
      - +

      Please note that strokeWidth is a very unique property that acts very different: when number is provided the rendered stroke will scale depending on viewBox and/or width and height, but if String is provided you can actually force the browser to scale the stroke as you like.

      Now let's have a look at gradients, here we can animate the stopColor defined within the SVG's <linearGradient> element.

      <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset="0%" style="stop-color: #ffd626; stop-opacity:1"></stop>

From e29d08f6bfcaae7cea3187f4aa57737e08c405cb Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 7 Sep 2016 19:09:41 +0300
Subject: [PATCH 060/187] Quick docs update

---
 extend.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/extend.html b/extend.html
index 5569e23..5756ded 100644
--- a/extend.html
+++ b/extend.html
@@ -217,7 +217,7 @@ K.pp['boxShadow'] = function(property,value,element){
 
       // let's start with the numbers | set unit | also determine inset
       var numbers = [], px = 'px', // the unit is always px
-        inset = a[5] !== 'none' || w._vE[p][5] !== 'none' ? ' inset' : false; 
+        inset = a[5] !== 'none' || b[5] !== 'none' ? ' inset' : false; 
 
       for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers 
         numbers.push( (a[i] + (b[i] - a[i]) * v ) + px);
@@ -227,12 +227,12 @@ K.pp['boxShadow'] = function(property,value,element){
 
       // now we handle the color
       var colorValue, _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;
+      for (var c in b[4]) {
+        _color[c] = parseInt(a[4][c] + (b[4][c] - a[4][c]) * v )||0;
       }
       colorValue = 'rgb(' + _color.r + ',' + _color.g + ',' + _color.b + ') ';
       // for color interpolation, starting with v1.5.3 we can cut it short to this
-      // var colorValue = K.Interpolate.color(a[5],b[5],v);
+      // var colorValue = K.Interpolate.color(a[4],b[4],v);
       
       // last piece of the puzzle, the DOM update
       l.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');

From fde91644b08693ed4db1c314e48822424b0bb55b Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 12 Sep 2016 17:09:09 +0300
Subject: [PATCH 061/187] `NodeList` isn't a good idea for the KUTE.selector
 utility, it's not workin in IE8.

Added a link in the documentation for a pathToAbslute utility for SVG morphing.
---
 assets/js/svg.js | 2 +-
 src/kute.js      | 2 +-
 svg.html         | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/assets/js/svg.js b/assets/js/svg.js
index 765f727..5ceaaf1 100644
--- a/assets/js/svg.js
+++ b/assets/js/svg.js
@@ -23,7 +23,7 @@ var morphTween21 = KUTE.fromTo('#triangle', {path: '#triangle', fill: '#673AB7'}
     duration: 1500, easing: 'easingCubicOut',
 }); 
 var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', fill: '#2196F3'}, { path: '#star2', fill: 'deeppink' }, {
-    morphIndex: 9, 
+    morphIndex: 9,
     delay: 500, duration: 1500, easing: 'easingCubicOut'
 }); 
 var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', fill: 'deeppink'}, { path: '#triangle', fill: '#673AB7' }, {
diff --git a/src/kute.js b/src/kute.js
index 5ed87f7..2f25b65 100644
--- a/src/kute.js
+++ b/src/kute.js
@@ -28,7 +28,7 @@
     selector = function(el,multi){ // a selector utility
       var nl;
       if (multi){
-        nl = el instanceof NodeList ? el : document.querySelectorAll(el);
+        nl = typeof el === 'object' ? el : document.querySelectorAll(el);
       } else {
         nl = typeof el === 'object' ? el 
            : /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el);       
diff --git a/svg.html b/svg.html
index 148f5ed..7d1f46e 100644
--- a/svg.html
+++ b/svg.html
@@ -158,6 +158,7 @@ If the current animation is not satisfactory, consider reversing one of the path
         
         
      Morphing Polygon Paths
      
         
      When your paths are only lineto, vertical-lineto and horizontal-lineto based shapes (the d attribute consists of L, V and H path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The morphPrecision option will not apply since the paths are already polygons, still you will have access to all the other options.
      
+        
      The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative v and h path commands. I highly recommend using my utility converter to prepare your paths in that case.
      
 
      // let's morph a triangle into a star
 var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
 
@@ -186,7 +187,8 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
           
         
         
      The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only L path command will make sure to prevent value processing and allow the animation to start as fast as possible.
      
-        
+
+
         
      Multi Path Example
      
         
      In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:
      			
 
      <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">

From 069a20430cd0557cee8fcfcb6e38cfb0406ed0cd Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 12 Sep 2016 17:47:42 +0300
Subject: [PATCH 062/187] Missing share icons in svg.html page

---
 svg.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/svg.html b/svg.html
index 7d1f46e..ba0ecdc 100644
--- a/svg.html
+++ b/svg.html
@@ -23,7 +23,7 @@
     
 
 	
-    
+    
 		
 	
 	
@@ -558,6 +558,7 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
 
 
  
+
  
  
  

From eaf8f73b0742b19e6354d8e5c0b04751ce24ee41 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sun, 18 Sep 2016 01:03:06 +0300
Subject: [PATCH 063/187] Replaced prototype with regular object for AttrPlugin
 I hope it's for better performance

---
 src/kute-attr.js | 41 +++++++++++++++++++----------------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/kute-attr.js b/src/kute-attr.js
index ed0bfb9..58ea268 100644
--- a/src/kute-attr.js
+++ b/src/kute-attr.js
@@ -22,52 +22,49 @@
 }( function (KUTE) {
   'use strict';
 
-  var K = window.KUTE, DOM = K.dom, PP = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number;
-  
-  // get current attribute value
-  K.gCA = function(e,a){
-    return e.getAttribute(a);
-  }
+  var K = window.KUTE, DOM = K.dom, PP = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number, atts,
+    gCA = function(e,a){ // get current attribute value
+      return e.getAttribute(a);
+    };
   
   K.prS['attr'] = function(el,p,v){
     var f = {};
     for (var a in v){
-      f[a.replace(/_+[a-z]+/,'')] = K.gCA(el,a.replace(/_+[a-z]+/,''));
+      f[a.replace(/_+[a-z]+/,'')] = gCA(el,a.replace(/_+[a-z]+/,''));
     }
     return f;
   };
-  // register the render attributes object
-  if (!('attr' in DOM)) {
-    DOM.attr = function(l,p,a,b,v) { 
-      for ( var o in b ){
-        DOM.attr.prototype[o](l,o,a[o],b[o],v);
-      }
-    }; 
-  }
   
-  var ra = DOM.attr.prototype;
-
   // process attributes object K.pp.attr(t[x]) 
   // and also register their render functions
   PP['attr'] = function(a,o){
+    if (!('attr' in DOM)) {
+      DOM.attr = function(l,p,a,b,v) { 
+        for ( var o in b ){
+          DOM.attributes[o](l,o,a[o],b[o],v);
+        }
+      }
+      atts = DOM.attributes = {}
+    }
+
     var ats = {}, p;
     for ( p in o ) {
       if ( /%|px/.test(o[p]) ) {
         var u = K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
-        if (!(p+s in ra)) {
-          ra[p+s] = function(l,p,a,b,v) {
+        if (!(p+s in atts)) {
+          atts[p+s] = function(l,p,a,b,v) {
             var _p = p.replace(s,'');
             l.setAttribute(_p, unit(a.v,b.v,b.u,v) );
           }
         }
         ats[p+s] = K.truD(o[p]);       
       } else {
-        if (!(p in ra)) {
-          ra[p] = function(l,o,a,b,v) {
+        if (!(p in atts)) {
+          atts[p] = function(l,o,a,b,v) {
             l.setAttribute(o, number(a,b,v));
           }
         }
-        ats[p] = o[p] * 1;     
+        ats[p] = parseFloat(o[p]);     
       }
     }
     return ats;

From 3c9683b0028b3cebc38f762434c93bdf540c1b8a Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sun, 18 Sep 2016 01:07:15 +0300
Subject: [PATCH 064/187] Decreased default morphPrecision from 25 to 15 for
 better visual.

---
 src/kute-svg.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute-svg.js b/src/kute-svg.js
index 7af6559..1e1e2e6 100644
--- a/src/kute-svg.js
+++ b/src/kute-svg.js
@@ -58,7 +58,7 @@
   
   S.pCr = function(w){ // pathCross
     // path tween options
-    this._mpr = w._ops.morphPrecision || 25;  
+    this._mpr = w._ops.morphPrecision || 15;  
     this._midx = w._ops.morphIndex; 
     this._smi = w._ops.showMorphInfo;
     this._rv1 = w._ops.reverseFirstPath;

From ab8ef18953e03312eb373aa4b53fc8e8b0635b87 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sun, 18 Sep 2016 01:16:02 +0300
Subject: [PATCH 065/187] Docs update

---
 assets/js/svg.js | 2 +-
 svg.html         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/js/svg.js b/assets/js/svg.js
index 5ceaaf1..efa32f5 100644
--- a/assets/js/svg.js
+++ b/assets/js/svg.js
@@ -9,7 +9,7 @@ morphBtn.addEventListener('click', function(){
 }, false);
 
 var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
-    showMorphInfo: true, morphIndex: 73,
+    showMorphInfo: true, morphIndex: 127,
     duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
 }); 
 
diff --git a/svg.html b/svg.html
index ba0ecdc..76fee21 100644
--- a/svg.html
+++ b/svg.html
@@ -135,13 +135,13 @@ var tween = KUTE.to('#rectangle', { path: '#star' }, {showMorphInfo: true}).star
 // The console log should show you this
 /* ------------------------------------
 KUTE.js Path Morph Log
-The morph used 92 points to draw both paths based on 25 morphPrecision value.
-You may also consider a morphIndex for the second path. Currently the best index seems to be 79.
+The morph used 153 points to draw both paths based on 15 morphPrecision value.
+You may also consider a morphIndex for the second path. Currently the best index seems to be 129.
 If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.
 */
 
      
 
-        
      Next, we're going to set the morphIndex: 79 option and we will get an improved morph. I also made a pen for you to play with.
      			
+        
      Next, we're going to set the morphIndex: 127 option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values around the recommended one. I also made a pen for you to play with.
      			
         
      
                 
                     SVG Plugin as we'll see in the following examples. As a quick refference, the basic synthax goes like this:
      
 
-
      // basic synthax for unitless properties
+
      // basic synthax for unitless attributes
 var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
 
 // OR for attributes that are ALWAYS suffixed / have a measurement unit
 var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
 
      
 
-        
      Currently the Attributes Plugin does not support color properties such as fill or stroke as well as properties with multiple values like stroke-dasharray, viewBox or transform for simplicity reasons. Still, you have access to just about any SVGElement/Element presentation attribute available.
      
-        
+        
      The Attributes Plugin does not support color attributes such as fill or stroke as well as attributes with multiple values like stroke-dasharray, viewBox or transform for simplicity reasons. To animate the stroke/fill or transform attribute, the SVG Plugin has some handy solutions for you. Despite the limitations of this plugin, you have access to just about any SVGElement/Element presentation attribute available.
      
+
+		
      Attributes Namespace
      
+		
      Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:
      
+
      // dashed attribute notation
+var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
+
+// non-dashed attribute notation
+var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
+
      
+        
      The strokeWidth example is very interesting because this attribute along with many others can work with px, % or with no unit/suffix.
      
+
 		
      Unitless Properties
      
 		
      In the first example, let's play with the attributes of a <circle> element: radius and center coordinates.
      
 
      // radius attribute
@@ -112,7 +122,7 @@ var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
 		
      
         
 		
      Suffixed Properties
      
-        
      Similar to the example on gradients with SVG Plugin, we can also animate the gradient positions, but make sure to always include the % suffix:
      
+        
      Similar to the example on gradients with SVG Plugin, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the % unit is found in the current value and used as unit for the DOM update:
      
 
      // gradient positions to middle
 var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
     
diff --git a/src/kute-svg.js b/src/kute-svg.js
index 4b36b4a..3b035c0 100644
--- a/src/kute-svg.js
+++ b/src/kute-svg.js
@@ -526,4 +526,6 @@
     return c;
   }
 
+  return S;
+
 }));
\ No newline at end of file

From d5724b01e4cb054775c74b6fa376dfe175955b27 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 20 Sep 2016 23:32:11 +0300
Subject: [PATCH 071/187] Minor fix/improvement with Attributes Plugin
 regarding current attribute value suffix.

---
 src/kute-attr.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute-attr.js b/src/kute-attr.js
index 642cfcc..b190812 100644
--- a/src/kute-attr.js
+++ b/src/kute-attr.js
@@ -53,7 +53,7 @@
     var ats = {}, p;
     for ( p in o ) {
       var prop = replaceUppercase(p), cv = getCurrentValue(l,prop.replace(/_+[a-z]+/,''));
-      if ( /%|[a-z]/.test(o[p]) || /%|[a-z]/.test(cv) ) {
+				if ( /(%|[a-z]+)$/.test(o[p]) || /(%|[a-z]+)$/.test(cv) ) {
         var u = K.truD(cv).u || K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
         if (!(p+s in atts)) {
           atts[p+s] = function(l,p,a,b,v) {

From f1b2399d056bd337a2fd3b80f144351b466ee5f1 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 22 Sep 2016 05:26:43 +0300
Subject: [PATCH 072/187] Code cleanup

---
 src/kute-attr.js   |   6 +-
 src/kute-bezier.js |   8 +-
 src/kute-css.js    |  39 +--
 src/kute-svg.js    | 684 ++++++++++++++++++++++-----------------------
 src/kute-text.js   |  18 +-
 src/kute.js        | 107 ++++---
 6 files changed, 420 insertions(+), 442 deletions(-)

diff --git a/src/kute-attr.js b/src/kute-attr.js
index b190812..adb1558 100644
--- a/src/kute-attr.js
+++ b/src/kute-attr.js
@@ -22,13 +22,13 @@
 }( function (KUTE) {
   'use strict';
 
-  var K = window.KUTE, DOM = K.dom, PP = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number, atts,
+  var K = window.KUTE, DOM = K.dom, prepareStart = K.prS, parseProperty = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number, atts,
     getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
     replaceUppercase = function(a) {
       return /[A-Z]/g.test(a) ? a.replace(a.match(/[A-Z]/g)[0],'-'+a.match(/[A-Z]/g)[0].toLowerCase()) : a;
     }; 
   
-  K.prS['attr'] = function(el,p,v){
+  prepareStart['attr'] = function(el,p,v){
     var f = {};
     for (var a in v){
       var _a = replaceUppercase(a).replace(/_+[a-z]+/,''),
@@ -40,7 +40,7 @@
   
   // process attributes object K.pp.attr(t[x]) 
   // and also register their render functions
-  PP['attr'] = function(a,o,l){
+  parseProperty['attr'] = function(a,o,l){
     if (!('attr' in DOM)) {
       DOM.attr = function(l,p,a,b,v) { 
         for ( var o in b ){
diff --git a/src/kute-bezier.js b/src/kute-bezier.js
index 0f631d7..deb3c2f 100644
--- a/src/kute-bezier.js
+++ b/src/kute-bezier.js
@@ -97,10 +97,10 @@
   };
 
   _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);
-      }
+    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
diff --git a/src/kute-css.js b/src/kute-css.js
index 8dc94db..c84edfd 100644
--- a/src/kute-css.js
+++ b/src/kute-css.js
@@ -16,7 +16,8 @@
     throw new Error("CSS Plugin require KUTE.js.")
   }
 })(function(KUTE){
-  var K = window.KUTE, p, DOM = K.dom, PP = K.pp,
+  'use strict';
+  var K = window.KUTE, p, DOM = K.dom, parseProperty = K.pp, prepareStart = K.prS, getComputedStyle = K.gCS,
     _br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'), // all radius props prefixed
     _brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'),
     _cls = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
@@ -49,39 +50,39 @@
   // create prepare/process/render functions for additional colors properties
   for (var i = 0, l = _cls.length; i 1) {
+        var coord = function (p) {
+          var c = p.split(',');
+          if (c.length != 2) { return; } // return undefined
+          if (isNaN(c[0]) || isNaN(c[1])) { return; }
+          return [parseFloat(c[0]), parseFloat(c[1])];
+        };
+
+        var dist = function (c1, c2) {
+          if (c1 != undefined && c2 != undefined) {
+            return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2));
+          }
+          return 0;
+        };
+
+        if (points.length > 2) {
+          for (var i=0; i 1) {
-      var coord = function (p) {
-        var c = p.split(',');
-        if (c.length != 2) {
-          return; // return undefined
-        }
-        if (isNaN(c[0]) || isNaN(c[1])) {
-          return;
-        }
-        return [parseFloat(c[0]), parseFloat(c[1])];
-      };
-
-      var dist = function (c1, c2) {
-        if (c1 != undefined && c2 != undefined) {
-          return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2));
-        }
-        return 0;
-      };
-
-      if (points.length > 2) {
-        for (var i=0; i,./?\=-").split(""), // symbols
     _n = String("0123456789").split(""), // numeric
     _a = _s.concat(_S,_n), // alpha numeric
     _all = _a.concat(_sb), // all caracters
     random = Math.random, floor = Math.floor, min = Math.min;
 
-  K.prS['text'] = K.prS['number'] = function(l,p,v){
+  prepareStart['text'] = prepareStart['number'] = function(l,p,v){
     return l.innerHTML;
   }
     
-  PP['text'] = function(p,v,l) {
+  parseProperty['text'] = function(p,v,l) {
     if ( !( 'text' in DOM ) ) {
       DOM['text'] = function(l,p,a,b,v,o) {
         var tp = tp || o.textChars === 'alpha' ? _s // textChars is alpha
-            : o.textChars === 'upper' ? _S  // textChars is numeric
+            : o.textChars === 'uparsePropertyer' ? _S  // textChars is numeric
             : o.textChars === 'numeric' ? _n  // textChars is numeric
             : o.textChars === 'alphanumeric' ? _a // textChars is alphanumeric
             : o.textChars === 'symbols' ? _sb // textChars is symbols
@@ -50,7 +52,7 @@
     return v;
   }
     
-  PP['number'] = function(p,v,l) {
+  parseProperty['number'] = function(p,v,l) {
     if ( !( 'number' in DOM ) ) {
       DOM['number'] = function(l,p,a,b,v) {
         l.innerHTML = parseInt( number(a, b, v));
diff --git a/src/kute.js b/src/kute.js
index 2f25b65..b8ae0a5 100644
--- a/src/kute.js
+++ b/src/kute.js
@@ -512,8 +512,43 @@
   };
   easing.easingBounceInOut = function(t) { if ( t < 0.5 ) return easing.easingBounceIn( t * 2 ) * 0.5; return easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
 
+  var start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
+    this.scrollIn();
+      
+    perspective(this._el,this); // apply the perspective and transform origin
+    if ( this._rpr ) { this.stack(); } // on start we reprocess the valuesStart for TO() method
+        
+    for ( var e in this._vE ) {
+      this._vSR[e] = this._vS[e];      
+    }
+
+    // now it's a good time to start
+    add(this);
+    this.playing = true;
+    this.paused = false;
+    this._sCF = false;
+    this._sT = t || window.performance.now();
+    this._sT += this._dl;
+    
+    if (!this._sCF) {
+      if (this._sC) { this._sC.call(); }
+      this._sCF = true;
+    }
+    if (!_t) _tk();
+    return this;
+  },
+  play = function () {
+    if (this.paused && this.playing) {
+      this.paused = false;
+      if (this._rC !== null) { this._rC.call(); }        
+      this._sT += window.performance.now() - this._pST;    
+      add(this);
+      if (!_t) _tk();  // restart ticking if stopped
+    }
+    return this;
+  },
   // single Tween object construct
-  var Tween = function (_el, _vS, _vE, _o) {
+  Tween = function (_el, _vS, _vE, _o) {
     this._el = _el; // element animation is applied to
     this._vSR = {}; // internal valuesStartRepeat
     this._vS = _vS; // valuesStart
@@ -546,6 +581,8 @@
     this._stC = _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
     this._ops = {};
+    this.start = Tween.prototype.start = start;
+    this.play = Tween.prototype.play = this.resume = Tween.prototype.resume = play;
 
     //also add plugins options or transform perspective
     for (var o in _o) { if (!(o in this) && !/delay|duration|repeat|origin|start|stop|update|complete|pause|play|yoyo|easing/i.test(o) ) { this._ops[o] = _o[o]; } }
@@ -717,61 +754,24 @@
       _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
       this.tweens.push( fromTo(els[i], vS, vE, _o[i]) );
     }
-  };
-
-  var ws = TweensTO.prototype = 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.chain = function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; }
-  ws.play = ws.resume = function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; }
-
-  var start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
-    this.scrollIn();
-      
-    perspective(this._el,this); // apply the perspective and transform origin
-    if ( this._rpr ) { this.stack(); } // on start we reprocess the valuesStart for TO() method
-        
-    for ( var e in this._vE ) {
-      this._vSR[e] = this._vS[e];      
-    }
-
-    // now it's a good time to start
-    add(this);
-    this.playing = true;
-    this.paused = false;
-    this._sCF = false;
-    this._sT = t || window.performance.now();
-    this._sT += this._dl;
-    
-    if (!this._sCF) {
-      if (this._sC) { this._sC.call(); }
-      this._sCF = true;
-    }
-    if (!_t) _tk();
-    return this;
   },
-  play = function () {
-    if (this.paused && this.playing) {
-      this.paused = false;
-      if (this._rC !== null) { this._rC.call(); }        
-      this._sT += window.performance.now() - this._pST;    
-      add(this);
-      if (!_t) _tk();  // restart ticking if stopped
-    }
-    return this;
+  ws = TweensTO.prototype = TweensFT.prototype = {
+    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;
+    },
+    stop : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].stop(); } return this; },
+    pause : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].pause(); } return this; },
+    chain : function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; },
+    play : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; },
+    resume :function() {return this.play()}
   };
-  Tween.prototype.start = start;
-  Tween.prototype.play = Tween.prototype.resume = play;
 
-  K = { // export core methods to public for plugins
+  return K = { // export core methods to public for plugins
     property: property, getPrefix: getPrefix, selector: selector, pe : pe, // utils
     to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
     Interpolate: {number: number, unit: unit, color: color }, // interpolators ?? move array & coords to svg and leave color
@@ -781,5 +781,4 @@
     Easing: easing,
     Tween: Tween, TweensTO: TweensTO, TweensFT: TweensFT // constructors
   };
-  return K;
 }));
\ No newline at end of file

From f05e454f3ec4c40a8f911ffb86de40534d99be95 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 22 Sep 2016 14:42:06 +0300
Subject: [PATCH 073/187] Type

---
 src/kute-text.js |  2 +-
 src/kute.js      | 27 ++++++++++++++-------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/kute-text.js b/src/kute-text.js
index b69b472..54743bf 100644
--- a/src/kute-text.js
+++ b/src/kute-text.js
@@ -35,7 +35,7 @@
     if ( !( 'text' in DOM ) ) {
       DOM['text'] = function(l,p,a,b,v,o) {
         var tp = tp || o.textChars === 'alpha' ? _s // textChars is alpha
-            : o.textChars === 'uparsePropertyer' ? _S  // textChars is numeric
+            : o.textChars === 'upper' ? _S  // textChars is numeric
             : o.textChars === 'numeric' ? _n  // textChars is numeric
             : o.textChars === 'alphanumeric' ? _a // textChars is alphanumeric
             : o.textChars === 'symbols' ? _sb // textChars is symbols
diff --git a/src/kute.js b/src/kute.js
index b8ae0a5..d4c1a79 100644
--- a/src/kute.js
+++ b/src/kute.js
@@ -36,7 +36,7 @@
       if (nl === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el); 
       return nl;   
     },
-    trueDimendion = function (d,p) { //true dimension returns { v = value, u = unit }
+    trueDimension = 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() {
@@ -340,7 +340,7 @@
           l.style[p] = unit(a.value,b.value,b.unit,v);
         }
       }
-      return { value: trueDimendion(v).v, unit: trueDimendion(v).u }; 
+      return { value: trueDimension(v).v, unit: trueDimension(v).u }; 
     },
     tf : function(p,v){ // transform prop / value
       if (!('transform' in DOM)) {
@@ -398,27 +398,27 @@
       if (p === 'translate3d') {
         var t3d = v.split(','); 
         return {
-          translateX : { value: trueDimendion(t3d[0]).v, unit: trueDimendion(t3d[0]).u },
-          translateY : { value: trueDimendion(t3d[1]).v, unit: trueDimendion(t3d[1]).u },
-          translateZ : { value: trueDimendion(t3d[2]).v, unit: trueDimendion(t3d[2]).u }
+          translateX : { value: trueDimension(t3d[0]).v, unit: trueDimension(t3d[0]).u },
+          translateY : { value: trueDimension(t3d[1]).v, unit: trueDimension(t3d[1]).u },
+          translateZ : { value: trueDimension(t3d[2]).v, unit: trueDimension(t3d[2]).u }
         };
       } else if (/^translate(?:[XYZ])$/.test(p)) {
-        return { value: trueDimendion(v).v, unit: (trueDimendion(v).u||'px') };
+        return { value: trueDimension(v).v, unit: (trueDimension(v).u||'px') };
       } else if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(p)) {
-        return { value: trueDimendion(v,true).v, unit: (trueDimendion(v,true).u||'deg') };
+        return { value: trueDimension(v,true).v, unit: (trueDimension(v,true).u||'deg') };
       } else if (p === 'translate') {
         var tv = typeof v === 'string' ? v.split(',') : v, t2d = {};
         if (tv instanceof Array) {
-          t2d.x = { value: trueDimendion(tv[0]).v, unit: trueDimendion(tv[0]).u },
-          t2d.y = { value: trueDimendion(tv[1]).v, unit: trueDimendion(tv[1]).u }
+          t2d.x = { value: trueDimension(tv[0]).v, unit: trueDimension(tv[0]).u },
+          t2d.y = { value: trueDimension(tv[1]).v, unit: trueDimension(tv[1]).u }
         } else {
-          t2d.x = { value: trueDimendion(tv).v, unit: trueDimendion(tv).u },
+          t2d.x = { value: trueDimension(tv).v, unit: trueDimension(tv).u },
           t2d.y = { value: 0, unit: 'px' }        
         }
         return t2d;
       } else if (p === 'rotate') {
         var r2d = {};
-        r2d.z = { value: trueDimendion(v,true).v, unit: (trueDimendion(v,true).u||'deg') };
+        r2d.z = { value: trueDimension(v,true).v, unit: (trueDimension(v,true).u||'deg') };
         return r2d;
       } else if (p === 'scale') {
         return { value: parseFloat(v) }; // this must be parseFloat(v)
@@ -777,8 +777,9 @@
     Interpolate: {number: number, unit: unit, color: color }, // interpolators ?? move array & coords to svg and leave color
     dom: DOM, // DOM manipulation
     pp: parseProperty, prS: prepareStart, // init
-    truD: trueDimendion, truC: trueColor, rth: rgbToHex, htr: hexToRGB, gCS: getComputedStyle, // property parsing
+    truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, gCS: getComputedStyle, // property parsing
     Easing: easing,
-    Tween: Tween, TweensTO: TweensTO, TweensFT: TweensFT // constructors
+    // Tween: Tween, TweensTO: TweensTO, TweensFT: TweensFT // constructors
+    tick : _t, tweens : _tws
   };
 }));
\ No newline at end of file

From 4b3108c871a354de109777d0f31e91047ce4517f Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 22 Sep 2016 14:46:03 +0300
Subject: [PATCH 074/187] Register additional interpolate functions into the
 object

---
 src/kute-svg.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/kute-svg.js b/src/kute-svg.js
index 0ffefb8..fbb5791 100644
--- a/src/kute-svg.js
+++ b/src/kute-svg.js
@@ -28,12 +28,12 @@
     pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
     // interpolate functions
     number = K.Interpolate.number, color = K.Interpolate.color,
-    array = function array(a,b,l,v) { // array1, array2, array2.length, progress
+    array = K.Interpolate.array = function array(a,b,l,v) { // array1, array2, array2.length, progress
       var na = [], i;
       for(i=0;i
Date: Thu, 22 Sep 2016 15:24:49 +0300
Subject: [PATCH 075/187] Experimenting with exporting stuff to KUTE object,
 suspecting a bug with Google Chrome

---
 src/kute.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/kute.js b/src/kute.js
index d4c1a79..d64dafb 100644
--- a/src/kute.js
+++ b/src/kute.js
@@ -122,7 +122,7 @@
         }
       }
     },
-    pe = function (es) { //process easing
+    processEasing = function (es) { //process easing
       if ( typeof es === 'function') {
         return es;
       } else if ( typeof es === 'string' ) {
@@ -570,7 +570,7 @@
     this._ppo = _o.perspectiveOrigin; // perspective origin  
     this._ppp = _o.parentPerspective; // parent perspective    
     this._pppo = _o.parentPerspectiveOrigin; // parent perspective origin    
-    this._e = _o && _o.easing && typeof pe(_o.easing) === 'function' ? pe(_o.easing) : easing.linear; // _easing function
+    this._e = _o && _o.easing && typeof processEasing(_o.easing) === 'function' ? processEasing(_o.easing) : easing.linear; // _easing function
     this._cT = []; //_chainedTweens
     this._sCF = false; //_on StartCallbackFIRED
     this._sC = _o.start || null; // _on StartCallback
@@ -772,14 +772,13 @@
   };
 
   return K = { // export core methods to public for plugins
-    property: property, getPrefix: getPrefix, selector: selector, pe : pe, // utils
+    property: property, getPrefix: getPrefix, selector: selector, pe : processEasing, // utils
     to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
     Interpolate: {number: number, unit: unit, color: color }, // interpolators ?? move array & coords to svg and leave color
     dom: DOM, // DOM manipulation
     pp: parseProperty, prS: prepareStart, // init
     truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, gCS: getComputedStyle, // property parsing
     Easing: easing,
-    // Tween: Tween, TweensTO: TweensTO, TweensFT: TweensFT // constructors
-    tick : _t, tweens : _tws
+    ticker: _tk, tick : _t, tweens: _tws, update: _u,  // experiment 
   };
 }));
\ No newline at end of file

From 4ff44da4f92d1cb17ac7706e8edc17349bba39d5 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 22 Sep 2016 15:30:31 +0300
Subject: [PATCH 076/187]

---
 about.html              |   2 +-
 api.html                |   2 +-
 attr.html               |   4 +-
 css.html                |   4 +-
 easing.html             |   6 +-
 examples.html           |   4 +-
 extend.html             |   2 +-
 features.html           |   2 +-
 index.html              |   6 +-
 options.html            |   2 +-
 performance.html        |   2 +-
 properties.html         |   2 +-
 src/kute-attr.js        |  78 ----
 src/kute-attr.min.js    |   1 +
 src/kute-bezier.js      | 178 ---------
 src/kute-bezier.min.js  |   1 +
 src/kute-css.js         | 163 ---------
 src/kute-css.min.js     |   1 +
 src/kute-jquery.js      |  49 ---
 src/kute-jquery.min.js  |   1 +
 src/kute-physics.js     | 322 -----------------
 src/kute-physics.min.js |   1 +
 src/kute-svg.js         | 507 --------------------------
 src/kute-svg.min.js     |   1 +
 src/kute-text.js        |  65 ----
 src/kute-text.min.js    |   1 +
 src/kute.js             | 784 ----------------------------------------
 src/kute.min.js         |   1 +
 start.html              |   2 +-
 svg.html                |   5 +-
 text.html               |   4 +-
 31 files changed, 31 insertions(+), 2172 deletions(-)
 delete mode 100644 src/kute-attr.js
 create mode 100644 src/kute-attr.min.js
 delete mode 100644 src/kute-bezier.js
 create mode 100644 src/kute-bezier.min.js
 delete mode 100644 src/kute-css.js
 create mode 100644 src/kute-css.min.js
 delete mode 100644 src/kute-jquery.js
 create mode 100644 src/kute-jquery.min.js
 delete mode 100644 src/kute-physics.js
 create mode 100644 src/kute-physics.min.js
 delete mode 100644 src/kute-svg.js
 create mode 100644 src/kute-svg.min.js
 delete mode 100644 src/kute-text.js
 create mode 100644 src/kute-text.min.js
 delete mode 100644 src/kute.js
 create mode 100644 src/kute.min.js

diff --git a/about.html b/about.html
index ad47ce9..b62bd85 100644
--- a/about.html
+++ b/about.html
@@ -173,7 +173,7 @@
 
 	
- 
+ 
  
 
 
diff --git a/api.html b/api.html
index 4d9d2c9..481e97b 100644
--- a/api.html
+++ b/api.html
@@ -253,7 +253,7 @@ tween2.chain(tweensCollection2.tweens);
 
 
 
- 
+ 
  
 
 
diff --git a/attr.html b/attr.html
index b2917e8..554cccc 100644
--- a/attr.html
+++ b/attr.html
@@ -176,8 +176,8 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
 
 
 
- 
- 
+ 
+ 
  
  
 
diff --git a/css.html b/css.html
index 7460857..71c0a7c 100644
--- a/css.html
+++ b/css.html
@@ -225,8 +225,8 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
 
 
 
- 
- 
+ 
+ 
  
  
 
diff --git a/easing.html b/easing.html
index adace44..c9c5cd3 100644
--- a/easing.html
+++ b/easing.html
@@ -323,9 +323,9 @@ easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]}
 
 
 
- 
- 
- 
+ 
+ 
+ 
  
  
 
diff --git a/examples.html b/examples.html
index 3b97e8f..1325894 100644
--- a/examples.html
+++ b/examples.html
@@ -489,9 +489,7 @@ var myMultiTween2 = KUTE.allFromTo(
 
 
 
- 
- 
- 
+ 
  
  
 
diff --git a/extend.html b/extend.html
index 5756ded..0e7a0af 100644
--- a/extend.html
+++ b/extend.html
@@ -351,7 +351,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
 
 
 
- 
+ 
  
  
  
diff --git a/features.html b/features.html
index a3bc0f8..6f82766 100644
--- a/features.html
+++ b/features.html
@@ -167,7 +167,7 @@
 
 
 
- 
+ 
  
 
 
diff --git a/index.html b/index.html
index df97d46..31c61e0 100644
--- a/index.html
+++ b/index.html
@@ -209,9 +209,9 @@
 	
 
 
- 
- 
- 
+ 
+ 
+ 
  
  
 
diff --git a/options.html b/options.html
index bcce692..450a44d 100644
--- a/options.html
+++ b/options.html
@@ -173,7 +173,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
 
 
 
- 
+ 
  
 
 
diff --git a/performance.html b/performance.html
index 5c83fe1..1657d9f 100644
--- a/performance.html
+++ b/performance.html
@@ -124,7 +124,7 @@
 
 
 
-
+
 
   
 
diff --git a/properties.html b/properties.html
index df87f8d..458c5b8 100644
--- a/properties.html
+++ b/properties.html
@@ -236,7 +236,7 @@
 
 
 
- 
+ 
  
 
 
diff --git a/src/kute-attr.js b/src/kute-attr.js
deleted file mode 100644
index adb1558..0000000
--- a/src/kute-attr.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * package - Attributes Plugin
- * desc - enables animation for any numeric presentation attribute
- * 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") {
-    // 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(KUTE);
-  } else {
-    throw new Error("Attributes Plugin require KUTE.js.");
-  }
-}( function (KUTE) {
-  'use strict';
-
-  var K = window.KUTE, DOM = K.dom, prepareStart = K.prS, parseProperty = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number, atts,
-    getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
-    replaceUppercase = function(a) {
-      return /[A-Z]/g.test(a) ? a.replace(a.match(/[A-Z]/g)[0],'-'+a.match(/[A-Z]/g)[0].toLowerCase()) : a;
-    }; 
-  
-  prepareStart['attr'] = function(el,p,v){
-    var f = {};
-    for (var a in v){
-      var _a = replaceUppercase(a).replace(/_+[a-z]+/,''),
-        _v = getCurrentValue(el,_a); // get the value for 'fill-opacity' not fillOpacity
-      f[_a] = _v || (/opacity/i.test(a) ? 1 : 0);
-    }
-    return f;
-  };
-  
-  // process attributes object K.pp.attr(t[x]) 
-  // and also register their render functions
-  parseProperty['attr'] = function(a,o,l){
-    if (!('attr' in DOM)) {
-      DOM.attr = function(l,p,a,b,v) { 
-        for ( var o in b ){
-          DOM.attributes[o](l,o,a[o],b[o],v);
-        }
-      }
-      atts = DOM.attributes = {}
-    }
-
-    var ats = {}, p;
-    for ( p in o ) {
-      var prop = replaceUppercase(p), cv = getCurrentValue(l,prop.replace(/_+[a-z]+/,''));
-				if ( /(%|[a-z]+)$/.test(o[p]) || /(%|[a-z]+)$/.test(cv) ) {
-        var u = K.truD(cv).u || K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
-        if (!(p+s in atts)) {
-          atts[p+s] = function(l,p,a,b,v) {
-            var _p = _p || replaceUppercase(p).replace(s,'');
-            l.setAttribute(_p, unit(a.v,b.v,b.u,v) );
-          }
-        }
-        ats[p+s] = K.truD(o[p]);       
-      } else {
-        if (!(p in atts)) {
-          atts[p] = function(l,o,a,b,v) {
-            var _o = _o || replaceUppercase(o);
-            l.setAttribute(_o, number(a,b,v));
-          }
-        }
-        ats[p] = parseFloat(o[p]);     
-      }
-    }
-    return ats;
-  }
-
-}));
\ No newline at end of file
diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
new file mode 100644
index 0000000..64884d7
--- /dev/null
+++ b/src/kute-attr.min.js
@@ -0,0 +1 @@
+!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window.KUTE,n=r.dom,i=r.prS,u=r.pp,a=r.Interpolate.unit,o=r.Interpolate.number,f=function(t,e){return t.getAttribute(e)},c=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};i.attr=function(t,e,r){var n={};for(var i in r){var u=c(i).replace(/_+[a-z]+/,""),a=f(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,i,u){"attr"in n||(n.attr=function(t,e,r,i,u){for(var a in i)n.attributes[a](t,a,r[a],i[a],u)},e=n.attributes={});var s,p={};for(s in i){var l=c(s),v=f(u,l.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(i[s])||/(%|[a-z]+)$/.test(v)){var d=r.truD(v).u||r.truD(i[s]).u,b=/%/.test(d)?"_percent":"_"+d;s+b in e||(e[s+b]=function(t,e,r,n,i){var u=u||c(e).replace(b,"");t.setAttribute(u,a(r.v,n.v,n.u,i))}),p[s+b]=r.truD(i[s])}else s in e||(e[s]=function(t,e,r,n,i){var u=u||c(e);t.setAttribute(u,o(r,n,i))}),p[s]=parseFloat(i[s])}return p}});
diff --git a/src/kute-bezier.js b/src/kute-bezier.js
deleted file mode 100644
index deb3c2f..0000000
--- a/src/kute-bezier.js
+++ /dev/null
@@ -1,178 +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
-*/
-  
-(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;
-}));
diff --git a/src/kute-bezier.min.js b/src/kute-bezier.min.js
new file mode 100644
index 0000000..c30dd69
--- /dev/null
+++ b/src/kute-bezier.min.js
@@ -0,0 +1 @@
+!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=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});
diff --git a/src/kute-css.js b/src/kute-css.js
deleted file mode 100644
index c84edfd..0000000
--- a/src/kute-css.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * package CSS Plugin
- * 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") {
-    factory(KUTE);
-  } else {
-    throw new Error("CSS Plugin require KUTE.js.")
-  }
-})(function(KUTE){
-  'use strict';
-  var K = window.KUTE, p, DOM = K.dom, parseProperty = K.pp, prepareStart = K.prS, getComputedStyle = K.gCS,
-    _br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'), // all radius props prefixed
-    _brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'),
-    _cls = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
-    _rd  = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
-    _bm  = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
-    'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight', 
-    'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'], // dimensions / box model
-    _tp  = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties
-    _clp = ['clip'], _bg  = ['backgroundPosition'], // clip | background position
-     
-    _mg = _rd.concat(_bm,_tp), // a merge of all properties with px|%|em|rem|etc unit
-    _all = _cls.concat(_clp, _rd, _bm, _tp, _bg), al = _all.length, 
-    number = K.Interpolate.number, unit = K.Interpolate.unit, color = K.Interpolate.color,
-    _d = _d || {}; //all properties default values  
- 
-  //populate default values object
-  for ( var i=0; i< al; i++ ){
-    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 ( _mg.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];  
-    }
-  }
-  
-  // create prepare/process/render functions for additional colors properties
-  for (var i = 0, l = _cls.length; i 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;
-});
diff --git a/src/kute-physics.min.js b/src/kute-physics.min.js
new file mode 100644
index 0000000..3a792c8
--- /dev/null
+++ b/src/kute-physics.min.js
@@ -0,0 +1 @@
+!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),n.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;y=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&&o<100;)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});
diff --git a/src/kute-svg.js b/src/kute-svg.js
deleted file mode 100644
index fbb5791..0000000
--- a/src/kute-svg.js
+++ /dev/null
@@ -1,507 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * package - SVG Plugin
- * desc - draw strokes, morph paths and SVG color props
- * 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") {
-    // 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.svg = window.KUTE.svg || factory(KUTE);
-  } else {
-    throw new Error("SVG Plugin require KUTE.js.");
-  }
-}( function (KUTE) {
-  'use strict';
-  var K = window.KUTE, p, DOM = K.dom, parseProperty = K.pp, prepareStart = K.prS, getComputedStyle = K.gCS,
-    _isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
-    _nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
-    _cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
-    pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
-    // interpolate functions
-    number = K.Interpolate.number, color = K.Interpolate.color,
-    array = K.Interpolate.array = function array(a,b,l,v) { // array1, array2, array2.length, progress
-      var na = [], i;
-      for(i=0;i 1) {
-        var coord = function (p) {
-          var c = p.split(',');
-          if (c.length != 2) { return; } // return undefined
-          if (isNaN(c[0]) || isNaN(c[1])) { return; }
-          return [parseFloat(c[0]), parseFloat(c[1])];
-        };
-
-        var dist = function (c1, c2) {
-          if (c1 != undefined && c2 != undefined) {
-            return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2));
-          }
-          return 0;
-        };
-
-        if (points.length > 2) {
-          for (var i=0; i1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a,./?\=-").split(""), // symbols
-    _n = String("0123456789").split(""), // numeric
-    _a = _s.concat(_S,_n), // alpha numeric
-    _all = _a.concat(_sb), // all caracters
-    random = Math.random, floor = Math.floor, min = Math.min;
-
-  prepareStart['text'] = prepareStart['number'] = function(l,p,v){
-    return l.innerHTML;
-  }
-    
-  parseProperty['text'] = function(p,v,l) {
-    if ( !( 'text' in DOM ) ) {
-      DOM['text'] = function(l,p,a,b,v,o) {
-        var tp = tp || o.textChars === 'alpha' ? _s // textChars is alpha
-            : o.textChars === 'upper' ? _S  // textChars is numeric
-            : o.textChars === 'numeric' ? _n  // textChars is numeric
-            : o.textChars === 'alphanumeric' ? _a // textChars is alphanumeric
-            : o.textChars === 'symbols' ? _sb // textChars is symbols
-            : o.textChars ? o.textChars.split('') // textChars is a custom text
-            : _s, ll = tp.length,
-            t = tp[floor((random() * ll))], ix = '', tx = '', fi = a.substring(0), f = b.substring(0); 
-
-        // use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ?
-        ix = a !== '' ? fi.substring(fi.length,floor(min(v * fi.length, fi.length))) : ''; // initial text, A value 
-        tx = f.substring(0,floor(min(v * f.length, f.length))); // end text, B value
-        l.innerHTML = v < 1 ? tx + t + ix : b;
-      }
-    }
-    return v;
-  }
-    
-  parseProperty['number'] = function(p,v,l) {
-    if ( !( 'number' in DOM ) ) {
-      DOM['number'] = function(l,p,a,b,v) {
-        l.innerHTML = parseInt( number(a, b, v));
-      }
-    }
-    return parseInt(v) || 0;
-  }
-
-  return this;
-}));
\ No newline at end of file
diff --git a/src/kute-text.min.js b/src/kute-text.min.js
new file mode 100644
index 0000000..84ebcb7
--- /dev/null
+++ b/src/kute-text.min.js
@@ -0,0 +1 @@
+!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){require("./kute.js");module.exports=t()}else{if("undefined"==typeof window.KUTE)throw new Error("Text-Plugin requires KUTE.js.");t()}}(function(t){"use strict";var e=window.KUTE,n=e.dom,r=e.prS,i=e.pp,u=e.Interpolate.number,s=String("abcdefghijklmnopqrstuvwxyz").split(""),o=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),a=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),p=s.concat(o,f),l=(p.concat(a),Math.random),h=Math.floor,c=Math.min;return r.text=r.number=function(t,e,n){return t.innerHTML},i.text=function(t,e,r){return"text"in n||(n.text=function(t,e,n,r,i,u){var g=g||"alpha"===u.textChars?s:"upper"===u.textChars?o:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?a:u.textChars?u.textChars.split(""):s,m=g.length,x=g[h(l()*m)],d="",b="",w=n.substring(0),C=r.substring(0);d=""!==n?w.substring(w.length,h(c(i*w.length,w.length))):"",b=C.substring(0,h(c(i*C.length,C.length))),t.innerHTML=i<1?b+x+d:r}),e},i.number=function(t,e,r){return"number"in n||(n.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this});
diff --git a/src/kute.js b/src/kute.js
deleted file mode 100644
index d64dafb..0000000
--- a/src/kute.js
+++ /dev/null
@@ -1,784 +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,
-  
-    getPrefix = function() { //returns browser prefix
-      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;
-    },
-    property = function(p){ // returns prefixed property | property
-      var 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;
-    },
-    selector = function(el,multi){ // a selector utility
-      var nl;
-      if (multi){
-        nl = 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;   
-    },
-    trueDimension = 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 0) {
-        if ( w._r < 9999 ) { w._r--; } // we have to make it stop somewhere, infinity is too damn much
-        
-        if (w._y) { w.reversed = !w.reversed; w.rvs(); } // 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(); }
-        
-        w.scrollOut(); // unbind preventing scroll when scroll tween finished 
-        
-        // 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;
-  },
- 
-  // applies the transform origin and perspective
-  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
-  getAll = function () { return _tws; },
-  removeAll = function () {  _tws = []; },
-  add = function (tw) {  _tws.push(tw); },
-  remove = function (tw) { var i = _tws.indexOf(tw); if (i !== -1) { _tws.splice(i, 1); }}, 
-  stop = function () { _t && _caf(_t);  _t = null; },
-    
-  // process properties for _vE and _vS or one of them
-  preparePropertiesObject = function (e, s, l) {
-    var i, pl = arguments.length, _st = []; pl = pl > 2 ? 2 : pl;
-
-    for (i=0; i 0) { self._r = self.repeat; }
-        if (self._y && self.reversed===true) { self.rvs(); self.reversed = false; }
-        self.playing = false;
-      },64)
-    }
-  },
-
-  // the multi elements Tween constructs
-  TweensTO = 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( to(els[i], vE, _o[i]) );
-    }
-  },
-  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( fromTo(els[i], vS, vE, _o[i]) );
-    }
-  },
-  ws = TweensTO.prototype = TweensFT.prototype = {
-    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;
-    },
-    stop : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].stop(); } return this; },
-    pause : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].pause(); } return this; },
-    chain : function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; },
-    play : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; },
-    resume :function() {return this.play()}
-  };
-
-  return K = { // export core methods to public for plugins
-    property: property, getPrefix: getPrefix, selector: selector, pe : processEasing, // utils
-    to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
-    Interpolate: {number: number, unit: unit, color: color }, // interpolators ?? move array & coords to svg and leave color
-    dom: DOM, // DOM manipulation
-    pp: parseProperty, prS: prepareStart, // init
-    truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, gCS: getComputedStyle, // property parsing
-    Easing: easing,
-    ticker: _tk, tick : _t, tweens: _tws, update: _u,  // experiment 
-  };
-}));
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
new file mode 100644
index 0000000..117989f
--- /dev/null
+++ b/src/kute.min.js
@@ -0,0 +1 @@
+!function(t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():window.KUTE=window.KUTE||t()}(function(){"use strict";for(var t=t||{},e=[],n=null,r=(function(){var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],r=n.length,i=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(e;e0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),t.scrollOut();var i=0,s=t._cT.length;for(i;i2?2:s,i=0;i0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ct=function(t,e,n){this.tweens=[];var r,i=t.length,s=[];for(r=0;r0?n.delay+(n.offset||0):n.delay,this.tweens.push(z(t[r],e,s[r]))},ft=function(t,e,n,r){this.tweens=[];var i,s=t.length,a=[];for(i=0;i0?r.delay+(r.offset||0):r.delay,this.tweens.push($(t[i],e,n,a[i]))};ct.prototype=ft.prototype={start:function(t){t=t||window.performance.now();var e,n=this.tweens.length;for(e=0;e  KUTE CDN -->
 
- 
+ 
  
 
 
diff --git a/svg.html b/svg.html
index 76fee21..12955a8 100644
--- a/svg.html
+++ b/svg.html
@@ -557,9 +557,8 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
 
 
 
- 
-
- 
+ 
+ 
  
  
 
diff --git a/text.html b/text.html
index 5db3341..5a4bf4f 100644
--- a/text.html
+++ b/text.html
@@ -167,8 +167,8 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&
 
 
 
- 
- 
+ 
+ 
  
  
 

From 1c2650a154ec1738ac718998417f8bed42b5a40b Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 22 Sep 2016 20:58:25 +0300
Subject: [PATCH 077/187] More experiments.

---
 assets/js/perf.js    | 297 +++++++++++++++++++++----------------------
 performance.html     |   1 +
 src/kute-attr.min.js |   2 +-
 src/kute-css.min.js  |   2 +-
 src/kute-svg.min.js  |   2 +-
 src/kute.min.js      |   2 +-
 6 files changed, 147 insertions(+), 159 deletions(-)

diff --git a/assets/js/perf.js b/assets/js/perf.js
index 9d02d7f..86b5f26 100644
--- a/assets/js/perf.js
+++ b/assets/js/perf.js
@@ -1,169 +1,156 @@
-(function (){
-	"use strict";
-	//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;
-	}
+// testing grounds
+"use strict";
 
-	// generate a random number within a given range
-	function random(min, max) {
-		return Math.random() * (max - min) + min;
-	}
+// 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';
+// vendor prefix handle 
+var transformProperty = KUTE.property('transform');
 
-	// the variables
-	var container = document.getElementById('container'),
-		easing = 'easingQuadraticInOut',
-		tweens = [];
+// the variables
+var container = document.getElementById('container'), tws = [];
 
-	function createTest(count, property, engine, repeat) {
-		"use strict";
-		var update;
-		for (var i = 0; i < count; i++) {
-			var 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';
-				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);
+function complete(){
+	document.getElementById('info').style.display = 'block';
+	container.innerHTML = '';
+	tws = [];
+}
+
+function updateLeft(){
+		this.div.style['left'] = this.left+'px';
+}					
+
+function updateTranslate(){
+		this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
+}
+
+function buildObjects(){
+	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,
+		warning = document.createElement('DIV');
 		
-			// perf test
-			if (engine==='kute') {
-				tweens.push(KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn }));
-			} else if (engine==='gsap') {
-				if (property==="left"){
-								TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });							
-				} else {
-								TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });							
+	warning.className = 'text-warning padding lead';
+	container.innerHTML = '';	
+	if (count && engine && property && repeat) {
+				if (engine === 'gsap') {
+						document.getElementById('info').style.display = 'none';
 				}
-			} else if (engine==='tween') {
-							
-				
-				if (property==="left"){
-					update = updateLeft;				
-				} else if (property==="translateX"){
-					update = updateTranslate;
-				}			
-				
-				tweens.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true));		
-			}
-		}
-		if (engine==='tween') {
-			animate();
-			function animate( time ) {
-				requestAnimationFrame( animate );
-				TWEEN.update( time );
-			}
-		}
-	}
+		
+		createTest(count,property,engine,repeat);
+				// since our engines don't do sync, we make it our own here
+				if (engine==='tween'||engine==='kute') {
+						document.getElementById('info').style.display = 'none';
+						start();	
+				}
+	} else {
 
-	function complete(){
-		document.getElementById('info').style.display = 'block';
-		container.innerHTML = '';
-		tweens = [];
-	}
-
-
-	function updateLeft(){
-			this.div.style['left'] = this.left+'px';
-	}					
-
-	function updateTranslate(){
-			this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
-	}	
-
-	//some button toggle 
-	var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length;
-
-	for (var i=0; i';
-				b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
-			}
-		}
-	}
-
-
-	// the start  button handle
-	document.getElementById('start').addEventListener('click', buildObjects, false);
-
-	function buildObjects(){
-		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,
-			warning = document.createElement('DIV');
-			
-		warning.className = 'text-warning padding lead';
-		container.innerHTML = '';	
-		if (count && engine && property && repeat) {
-					if (engine === 'gsap') {
-							document.getElementById('info').style.display = 'none';
-					}
-			
-			createTest(count,property,engine,repeat);
-					// since our engines don't do sync, we make it our own here
-					if (engine==='tween'||engine==='kute') {
-							document.getElementById('info').style.display = 'none';
-							start();	
-					}
+		if (!count && !property && !repeat && !engine){
+			warning.innerHTML = 'We are missing all the settings here.';
 		} else {
+			warning.innerHTML = 'Now missing
      ';
+			warning.innerHTML += !engine ? '- engine
      ' : ''; 
+			warning.innerHTML += !property ? '- property
      ' : '';
+			warning.innerHTML += !repeat ? '- repeat
      ' : ''; 
+			warning.innerHTML += !count ? '- count
      ' : ''; 
+		}
+		
+		container.appendChild(warning);
+	}
+}
 
-			if (!count && !property && !repeat && !engine){
-				warning.innerHTML = 'We are missing all the settings here.';
-			} else {
-				warning.innerHTML = 'Now missing
      ';
-				warning.innerHTML += !engine ? '- engine
      ' : ''; 
-				warning.innerHTML += !property ? '- property
      ' : '';
-				warning.innerHTML += !repeat ? '- repeat
      ' : ''; 
-				warning.innerHTML += !count ? '- count
      ' : ''; 
-			}
+function start() {
+		var now = window.performance.now(), count = tws.length;
+		for (var t =0; t';
+			b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
+		}
 	}
-}());	
\ No newline at end of file
+}
+
+
+
diff --git a/performance.html b/performance.html
index 1657d9f..e606a06 100644
--- a/performance.html
+++ b/performance.html
@@ -125,6 +125,7 @@
 
 
 
+
 
   
 
diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index 64884d7..f6f6a10 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1 +1 @@
-!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window.KUTE,n=r.dom,i=r.prS,u=r.pp,a=r.Interpolate.unit,o=r.Interpolate.number,f=function(t,e){return t.getAttribute(e)},c=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};i.attr=function(t,e,r){var n={};for(var i in r){var u=c(i).replace(/_+[a-z]+/,""),a=f(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,i,u){"attr"in n||(n.attr=function(t,e,r,i,u){for(var a in i)n.attributes[a](t,a,r[a],i[a],u)},e=n.attributes={});var s,p={};for(s in i){var l=c(s),v=f(u,l.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(i[s])||/(%|[a-z]+)$/.test(v)){var d=r.truD(v).u||r.truD(i[s]).u,b=/%/.test(d)?"_percent":"_"+d;s+b in e||(e[s+b]=function(t,e,r,n,i){var u=u||c(e).replace(b,"");t.setAttribute(u,a(r.v,n.v,n.u,i))}),p[s+b]=r.truD(i[s])}else s in e||(e[s]=function(t,e,r,n,i){var u=u||c(e);t.setAttribute(u,o(r,n,i))}),p[s]=parseFloat(i[s])}return p}});
+!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=n.dom,u=n.prS,a=n.pp,o=r.unit,f=r.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var v=s(a),d=c(u,v.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(d)){var l=n.truD(d).u||n.truD(r[a]).u,b=/%/.test(l)?"_percent":"_"+l;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}});
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index 51dc625..fefabd2 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1 +1 @@
-!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return t(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=t(r)}else{if("undefined"==typeof window.KUTE)throw new Error("CSS Plugin require KUTE.js.");t(r)}}(function(t){"use strict";for(var r,e=window.KUTE,o=e.dom,i=e.pp,n=e.prS,u=e.gCS,d=e.property("borderRadius"),a=e.property("borderTopLeftRadius"),l=e.property("borderTopRightRadius"),f=e.property("borderBottomLeftRadius"),p=e.property("borderBottomRightRadius"),c=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],g=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],b=["fontSize","lineHeight","letterSpacing","wordSpacing"],h=["clip"],v=["backgroundPosition"],m=g.concat(s,b),R=c.concat(h,g,s,b,v),y=R.length,x=(e.Interpolate.number,e.Interpolate.unit),T=e.Interpolate.color,D=D||{},B=0;B1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),t.scrollOut();var i=0,s=t._cT.length;for(i;i2?2:s,i=0;i0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ct=function(t,e,n){this.tweens=[];var r,i=t.length,s=[];for(r=0;r0?n.delay+(n.offset||0):n.delay,this.tweens.push(z(t[r],e,s[r]))},ft=function(t,e,n,r){this.tweens=[];var i,s=t.length,a=[];for(i=0;i0?r.delay+(r.offset||0):r.delay,this.tweens.push($(t[i],e,n,a[i]))};ct.prototype=ft.prototype={start:function(t){t=t||window.performance.now();var e,n=this.tweens.length;for(e=0;e0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?n+t._rD:n,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,r=0;r0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ft=function(t,n,e){this.tweens=[];var i,r=t.length,s=[];for(i=0;i0?e.delay+(e.offset||0):e.delay,this.tweens.push(z(t[i],n,s[i]))},ht=function(t,n,e,i){this.tweens=[];var r,s=t.length,a=[];for(r=0;r0?i.delay+(i.offset||0):i.delay,this.tweens.push($(t[r],n,e,a[r]))};ft.prototype=ht.prototype={start:function(t){t=t||r.now();var n,e=this.tweens.length;for(n=0;n
Date: Thu, 22 Sep 2016 21:11:57 +0300
Subject: [PATCH 078/187]

---
 src/kute-attr.min.js    | 3 ++-
 src/kute-bezier.min.js  | 3 ++-
 src/kute-css.min.js     | 3 ++-
 src/kute-jquery.min.js  | 3 ++-
 src/kute-physics.min.js | 3 ++-
 src/kute-svg.min.js     | 3 ++-
 src/kute-text.min.js    | 3 ++-
 src/kute.min.js         | 3 ++-
 8 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index f6f6a10..af3be65 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1 +1,2 @@
-!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=n.dom,u=n.prS,a=n.pp,o=r.unit,f=r.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var v=s(a),d=c(u,v.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(d)){var l=n.truD(d).u||n.truD(r[a]).u,b=/%/.test(l)?"_percent":"_"+l;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}});
+// KUTE.js by dnp_theme | kute-attr
+!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=n.dom,u=n.prS,a=n.pp,o=r.unit,f=r.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var v=s(a),d=c(u,v.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(d)){var l=n.truD(d).u||n.truD(r[a]).u,b=/%/.test(l)?"_percent":"_"+l;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}});
\ No newline at end of file
diff --git a/src/kute-bezier.min.js b/src/kute-bezier.min.js
index c30dd69..447d2f9 100644
--- a/src/kute-bezier.min.js
+++ b/src/kute-bezier.min.js
@@ -1 +1,2 @@
-!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=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});
+// KUTE.js by dnp_theme | kute-bezier
+!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=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});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index fefabd2..74d5ead 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1 +1,2 @@
-!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return t(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=t(r)}else{if("undefined"==typeof window.KUTE)throw new Error("CSS Plugin require KUTE.js.");t(r)}}(function(t){"use strict";for(var r,e=window,o=e.KUTE,i=o.dom,n=o.pp,u=o.prS,d=o.gCS,a=o.property("borderRadius"),f=o.property("borderTopLeftRadius"),l=o.property("borderTopRightRadius"),c=o.property("borderBottomLeftRadius"),p=o.property("borderBottomRightRadius"),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],b=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],v=["clip"],m=["backgroundPosition"],R=s.concat(b,h),y=g.concat(v,s,b,h,m),x=y.length,T=(e.number,e.unit),D=e.color,B=B||{},L=0;L.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;y=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&&o<100;)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.js by dnp_theme | kute-physics
+!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),n.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;y=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&&o<100;)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});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index f508be0..50ef52e 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1 +1,2 @@
-!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,s=n.dom,a=n.pp,i=n.prS,o=n.gCS,h=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),l=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],u=["fill","stroke","stopColor"],f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,p="http://www.w3.org/2000/svg",g=r.number,v=r.color,c=n.Interpolate.array=r.array=function(t,e,r,n){var s,a=[];for(s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a,./?=-").split(""),f=String("0123456789").split(""),p=s.concat(o,f),l=(p.concat(a),Math.random),h=Math.floor,c=Math.min;return r.text=r.number=function(t,e,n){return t.innerHTML},i.text=function(t,e,r){return"text"in n||(n.text=function(t,e,n,r,i,u){var g=g||"alpha"===u.textChars?s:"upper"===u.textChars?o:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?a:u.textChars?u.textChars.split(""):s,m=g.length,x=g[h(l()*m)],d="",b="",w=n.substring(0),C=r.substring(0);d=""!==n?w.substring(w.length,h(c(i*w.length,w.length))):"",b=C.substring(0,h(c(i*C.length,C.length))),t.innerHTML=i<1?b+x+d:r}),e},i.number=function(t,e,r){return"number"in n||(n.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this});
+// KUTE.js by dnp_theme | kute-text
+!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){require("./kute.js");module.exports=t()}else{if("undefined"==typeof window.KUTE)throw new Error("Text-Plugin requires KUTE.js.");t()}}(function(t){"use strict";var e=window.KUTE,n=e.dom,r=e.prS,i=e.pp,u=e.Interpolate.number,s=String("abcdefghijklmnopqrstuvwxyz").split(""),o=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),a=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),p=s.concat(o,f),l=(p.concat(a),Math.random),h=Math.floor,c=Math.min;return r.text=r.number=function(t,e,n){return t.innerHTML},i.text=function(t,e,r){return"text"in n||(n.text=function(t,e,n,r,i,u){var g=g||"alpha"===u.textChars?s:"upper"===u.textChars?o:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?a:u.textChars?u.textChars.split(""):s,m=g.length,x=g[h(l()*m)],d="",b="",w=n.substring(0),C=r.substring(0);d=""!==n?w.substring(w.length,h(c(i*w.length,w.length))):"",b=C.substring(0,h(c(i*C.length,C.length))),t.innerHTML=i<1?b+x+d:r}),e},i.number=function(t,e,r){return"number"in n||(n.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index 710aaba..da792ca 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1 +1,2 @@
-!function(t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():window.KUTE=window.KUTE||t()}(function(){"use strict";for(var t=window,n=t.KUTE={},e=t.tweens=[],i=t.tick=null,r=t.performance,s=(function(){var t=document.createElement("div"),n=0,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=e.length,r=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(n;n0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?n+t._rD:n,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,r=0;r0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ft=function(t,n,e){this.tweens=[];var i,r=t.length,s=[];for(i=0;i0?e.delay+(e.offset||0):e.delay,this.tweens.push(z(t[i],n,s[i]))},ht=function(t,n,e,i){this.tweens=[];var r,s=t.length,a=[];for(r=0;r0?i.delay+(i.offset||0):i.delay,this.tweens.push($(t[r],n,e,a[r]))};ft.prototype=ht.prototype={start:function(t){t=t||r.now();var n,e=this.tweens.length;for(n=0;n0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?n+t._rD:n,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,r=0;r0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ft=function(t,n,e){this.tweens=[];var i,r=t.length,s=[];for(i=0;i0?e.delay+(e.offset||0):e.delay,this.tweens.push(z(t[i],n,s[i]))},ht=function(t,n,e,i){this.tweens=[];var r,s=t.length,a=[];for(r=0;r0?i.delay+(i.offset||0):i.delay,this.tweens.push($(t[r],n,e,a[r]))};ft.prototype=ht.prototype={start:function(t){t=t||r.now();var n,e=this.tweens.length;for(n=0;n
Date: Fri, 23 Sep 2016 00:43:58 +0300
Subject: [PATCH 079/187]

---
 src/kute-attr.min.js    | 2 +-
 src/kute-bezier.min.js  | 2 +-
 src/kute-css.min.js     | 2 +-
 src/kute-jquery.min.js  | 2 +-
 src/kute-physics.min.js | 2 +-
 src/kute-svg.min.js     | 2 +-
 src/kute-text.min.js    | 2 +-
 src/kute.min.js         | 4 ++--
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index af3be65..b42154d 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
-// KUTE.js by dnp_theme | kute-attr
+// KUTE.js v1.5.7 | © dnp_theme | Attributes Plugin | MIT-License
 !function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=n.dom,u=n.prS,a=n.pp,o=r.unit,f=r.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var v=s(a),d=c(u,v.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(d)){var l=n.truD(d).u||n.truD(r[a]).u,b=/%/.test(l)?"_percent":"_"+l;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}});
\ No newline at end of file
diff --git a/src/kute-bezier.min.js b/src/kute-bezier.min.js
index 447d2f9..e34e0ea 100644
--- a/src/kute-bezier.min.js
+++ b/src/kute-bezier.min.js
@@ -1,2 +1,2 @@
-// KUTE.js by dnp_theme | kute-bezier
+// KUTE.js v1.5.7 | © dnp_theme | Bezier Plugin | 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=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});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index 74d5ead..d2200a2 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
-// KUTE.js by dnp_theme | kute-css
+// KUTE.js v1.5.7 | © dnp_theme | CSS Plugin | MIT-License
 !function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return t(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=t(r)}else{if("undefined"==typeof window.KUTE)throw new Error("CSS Plugin require KUTE.js.");t(r)}}(function(t){"use strict";for(var r,e=window,o=e.KUTE,i=o.dom,n=o.pp,u=o.prS,d=o.gCS,a=o.property("borderRadius"),f=o.property("borderTopLeftRadius"),l=o.property("borderTopRightRadius"),c=o.property("borderBottomLeftRadius"),p=o.property("borderBottomRightRadius"),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],b=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],v=["clip"],m=["backgroundPosition"],R=s.concat(b,h),y=g.concat(v,s,b,h,m),x=y.length,T=(e.number,e.unit),D=e.color,B=B||{},L=0;L.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;y=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&&o<100;)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});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index 50ef52e..3477c93 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
-// KUTE.js by dnp_theme | kute-svg
+// KUTE.js v1.5.7 | © dnp_theme | SVG Plugin | MIT-License
 !function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,s=n.dom,a=n.pp,i=n.prS,o=n.gCS,h=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),l=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],u=["fill","stroke","stopColor"],f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,p="http://www.w3.org/2000/svg",g=r.number,v=r.color,c=n.Interpolate.array=r.array=function(t,e,r,n){var s,a=[];for(s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a,./?=-").split(""),f=String("0123456789").split(""),p=s.concat(o,f),l=(p.concat(a),Math.random),h=Math.floor,c=Math.min;return r.text=r.number=function(t,e,n){return t.innerHTML},i.text=function(t,e,r){return"text"in n||(n.text=function(t,e,n,r,i,u){var g=g||"alpha"===u.textChars?s:"upper"===u.textChars?o:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?a:u.textChars?u.textChars.split(""):s,m=g.length,x=g[h(l()*m)],d="",b="",w=n.substring(0),C=r.substring(0);d=""!==n?w.substring(w.length,h(c(i*w.length,w.length))):"",b=C.substring(0,h(c(i*C.length,C.length))),t.innerHTML=i<1?b+x+d:r}),e},i.number=function(t,e,r){return"number"in n||(n.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index da792ca..e83dd49 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js by dnp_theme | kute
-!function(t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():window.KUTE=window.KUTE||t()}(function(){"use strict";for(var t=window,n=t.KUTE={},e=t.tweens=[],i=t.tick=null,r=t.performance,s=(function(){var t=document.createElement("div"),n=0,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=e.length,r=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(n;n0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?n+t._rD:n,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,r=0;r0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ft=function(t,n,e){this.tweens=[];var i,r=t.length,s=[];for(i=0;i0?e.delay+(e.offset||0):e.delay,this.tweens.push(z(t[i],n,s[i]))},ht=function(t,n,e,i){this.tweens=[];var r,s=t.length,a=[];for(r=0;r0?i.delay+(i.offset||0):i.delay,this.tweens.push($(t[r],n,e,a[r]))};ft.prototype=ht.prototype={start:function(t){t=t||r.now();var n,e=this.tweens.length;for(n=0;n0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?n+t._rD:n,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,r=0;r0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ut=function(t,n,e){this.tweens=[];var i,r=t.length,s=[];for(i=0;i0?e.delay+(e.offset||0):e.delay,this.tweens.push(lt(t[i],n,s[i]))},ot=function(t,n,e,i){this.tweens=[];var r,s=t.length,a=[];for(r=0;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],n,e,a[r]))},lt=(ut.prototype=ot.prototype={start:function(t){t=t||r.now();var n,e=this.tweens.length;for(n=0;n
Date: Sat, 24 Sep 2016 03:37:02 +0300
Subject: [PATCH 080/187] Changelog 1.5.7: * changed the jQuery plugin, it's
 lighter and plays well with tween control methods * changed the scope of
 ticker, tick, easing functions, interpolate functions, all to global, for
 better performance, some will only be available in the global and will be
 removed from KUTE object * added transform interpolate functions *
 documentation updates

---
 assets/js/easing.js     | 17 ++++++++---------
 assets/js/examples.js   | 16 ++++++++--------
 assets/js/kute-bs.js    |  2 +-
 assets/js/perf.js       |  2 +-
 easing.html             | 16 ++++++++--------
 examples.html           | 21 +++++++++++----------
 src/kute-attr.min.js    |  2 +-
 src/kute-bezier.min.js  |  2 +-
 src/kute-css.min.js     |  2 +-
 src/kute-jquery.min.js  |  2 +-
 src/kute-physics.min.js |  2 +-
 src/kute-svg.min.js     |  2 +-
 src/kute-text.min.js    |  2 +-
 src/kute.min.js         |  2 +-
 14 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/assets/js/easing.js b/assets/js/easing.js
index 25e4c8b..b7ee793 100644
--- a/assets/js/easing.js
+++ b/assets/js/easing.js
@@ -22,26 +22,25 @@ for (var i=0; iYou can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly bezier based functions. Ok now, let's get to it:
      
 	
 		
        
-			
      • spring function is basically an elastic type of easing that allows you to set frequency:1-1000, friction:1-1000, anticipationSize:0-1000 (a kind of delay in miliseconds) and anticipationStrength:0-1000 (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: KUTE.Physics.spring({friction:100,frequency:600}).
        • 
-			
      • bounce function is also an elastic easing function, but it works different than Robert Penner's version that's basically a gravity based function. This one here will always come back to the starting values. This function allows you to set frequency:0-1000 and friction:0-1000. Usage: easing: KUTE.Physics.bounce({friction:100,frequency:600}).
        • 
-			
      • gravity function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: elasticity:1-1000 and bounciness:0-1000. Usage: easing: KUTE.Physics.gravity({elasticity:100,bounciness:600}).
        • 
-			
      • forceWithGravity function acts just like gravity except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000 and bounciness:0-1000. Usage: easing: KUTE.Physics.forceWithGravity({elasticity:100,bounciness:600}).
        • 
-			
      • bezier easing function is a bit more complicated as it allows you to set multiple points of bezier curves.  Usage: easing: KUTE.Physics.bezier({points:POINTS_ARRAY_COMES HERE}), 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 easeIn looks like: 
+			
      • spring function is basically an elastic type of easing that allows you to set frequency:1-1000, friction:1-1000, anticipationSize:0-1000 (a kind of delay in miliseconds) and anticipationStrength:0-1000 (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: spring({friction:100,frequency:600}).
        • 
+			
      • bounce function is also an elastic easing function, but it works different than Robert Penner's version that's basically a gravity based function. This one here will always come back to the starting values. This function allows you to set frequency:0-1000 and friction:0-1000. Usage: easing: bounce({friction:100,frequency:600}).
        • 
+			
      • gravity function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: elasticity:1-1000 and bounciness:0-1000. Usage: easing: gravity({elasticity:100,bounciness:600}).
        • 
+			
      • forceWithGravity function acts just like gravity except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000 and bounciness:0-1000. Usage: easing: forceWithGravity({elasticity:100,bounciness:600}).
        • 
+			
      • bezier easing function is a bit more complicated as it allows you to set multiple points of bezier curves.  Usage: easing: BezierMultiPoint({points:POINTS_ARRAY_COMES HERE}), 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 easeIn looks like: 
 
        // sample bezier based easing
-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}]}] });
+easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
 
        
             In other cases, the bezier can handle multiple points as well, basically unlimited:
 
        // multi point bezier easing
-easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
+easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
 
                    
 			
        • 
 		
      
-		
      The presets can be used both as a string easing:'physicsIn' or easing:KUTE.Physics.physicsIn(friction:200). The list is:
      
+		
      The presets can be used both as a string easing:'physicsIn' or easing:physicsIn(friction:200). The list is:
      
 		
        
 			
      • curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
        • 
 			
      • back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.
        • 
diff --git a/examples.html b/examples.html
index 1325894..05231eb 100644
--- a/examples.html
+++ b/examples.html
@@ -97,23 +97,24 @@ 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
+tween.playing // checks if the tween is currenlty active so we prevent start() when not needed
+tween.paused // checks if the tween is currenlty active so we can prevent pausing or resume if needed
 
      
 
 		
      The demo for the above example is  here.
      
 		
 		
      Basic jQuery Example
      
-		
      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:
      
-
      // this is the tween object, basically $('selector').KUTE(method, from, to, options);
-var tween = $('selector').KUTE('fromTo', {top: 20}, {top: 100}, {yoyo: true});
+		
      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:
      
+
      // this is the tween object, basically $('selector').method(fromValues, toValue, options)
+var tween = $('selector').fromTo({top: 20}, {top: 100}, {delay: 500});
 
      
-		
      We mentioned that the KUTE jQuery plugin is different, and here's why: the above code creates an Array of objects for each HTML 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:
      
-
      $(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
+		
      We mentioned that the jQuery Plugin is different, and here's why: the above function call uses the allFromTo method to create an Array of objects for each HTML element of chosen selector, but if the selector only returns one element the call returns a single tween object built with fromTo method. For the array of objects we can now apply the exact same tween control methods, except these:
      
+
      tween.length // check if the tween is an array of objects
+tween.length && tween.tweens[0].playing && tween.tweens[tween.length-1].playing // now we know that one of the tweens is playing
+tween.length && tween.tweens[0].paused && tween.tweens[tween.length-1].paused // now we know that one of the tweens is paused
 
      
-		
      The demo for the above example is here.
      
+
+		
      The demo for the above example is here.
      
 		
 		
      Transform Properties Examples
      
 		
      KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateY, rotateZ properties. Additionally it allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.
      
diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index b42154d..53afba2 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.7 | © dnp_theme | Attributes Plugin | MIT-License
-!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=n.dom,u=n.prS,a=n.pp,o=r.unit,f=r.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var v=s(a),d=c(u,v.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(d)){var l=n.truD(d).u||n.truD(r[a]).u,b=/%/.test(l)?"_percent":"_"+l;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}});
\ No newline at end of file
+!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=r.dom,u=n.prS,a=n.pp,o=r.Interpolate.unit,f=r.Interpolate.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var l=s(a),v=c(u,l.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(v)){var d=n.truD(v).u||n.truD(r[a]).u,b=/%/.test(d)?"_percent":"_"+d;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}});
\ No newline at end of file
diff --git a/src/kute-bezier.min.js b/src/kute-bezier.min.js
index e34e0ea..c8da747 100644
--- a/src/kute-bezier.min.js
+++ b/src/kute-bezier.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.7 | © dnp_theme | Bezier Plugin | 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=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});
\ No newline at end of file
+!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=window,t=t||{};t.Bezier=e.Bezier=function(n,e,t,u){return r.pB(n,e,t,u)};var r=t.Bezier.prototype=e.Bezier.prototype;return r.ni=4,r.nms=.001,r.sp=1e-7,r.smi=10,r.ksts=11,r.ksss=1/(r.ksts-1),r.f32as="Float32Array"in e,r.msv=r.f32as?new Float32Array(r.ksts):new Array(r.ksts),r.A=function(n,e){return 1-3*e+3*n},r.B=function(n,e){return 3*e-6*n},r.C=function(n){return 3*n},r.pB=function(n,e,t,u){this._p=!1;var s=this;return function(i){return s._p||r.pc(n,t,e,u),n===e&&t===u?i:0===i?0:1===i?1:r.cB(r.gx(i,n,t),e,u)}},r.cB=function(n,e,t){return((r.A(e,t)*n+r.B(e,t))*n+r.C(e))*n},r.gS=function(n,e,t){return 3*r.A(e,t)*n*n+2*r.B(e,t)*n+r.C(e)},r.bS=function(n,e,t,u,s){var i,a,o=0,c=r.sp,f=r.smi;do a=e+(t-e)/2,i=r.cB(a,u,s)-n,i>0?t=a:e=a;while(Math.abs(i)>c&&++o=r.nms?r.nri(n,o,e,t):0===c?o:r.bS(n,u,f,e,t)},r.pc=function(n,e,t,u){this._p=!0,n==t&&e==u||r.csv(n,e)},e.Ease={},e.Ease.easeIn=function(){return r.pB(.42,0,1,1)},e.Ease.easeOut=function(){return r.pB(0,0,.58,1)},e.easeInOut=function(){return r.pB(.5,.16,.49,.86)},e.Ease.easeInSine=function(){return r.pB(.47,0,.745,.715)},e.Ease.easeOutSine=function(){return r.pB(.39,.575,.565,1)},e.Ease.easeInOutSine=function(){return r.pB(.445,.05,.55,.95)},e.Ease.easeInQuad=function(){return r.pB(.55,.085,.68,.53)},e.Ease.easeOutQuad=function(){return r.pB(.25,.46,.45,.94)},e.Ease.easeInOutQuad=function(){return r.pB(.455,.03,.515,.955)},e.Ease.easeInCubic=function(){return r.pB(.55,.055,.675,.19)},e.Ease.easeOutCubic=function(){return r.pB(.215,.61,.355,1)},e.Ease.easeInOutCubic=function(){return r.pB(.645,.045,.355,1)},e.Ease.easeInQuart=function(){return r.pB(.895,.03,.685,.22)},e.Ease.easeOutQuart=function(){return r.pB(.165,.84,.44,1)},e.Ease.easeInOutQuart=function(){return r.pB(.77,0,.175,1)},e.Ease.easeInQuint=function(){return r.pB(.755,.05,.855,.06)},e.Ease.easeOutQuint=function(){return r.pB(.23,1,.32,1)},e.Ease.easeInOutQuint=function(){return r.pB(.86,0,.07,1)},e.Ease.easeInExpo=function(){return r.pB(.95,.05,.795,.035)},e.Ease.easeOutExpo=function(){return r.pB(.19,1,.22,1)},e.Ease.easeInOutExpo=function(){return r.pB(1,0,0,1)},e.Ease.easeInCirc=function(){return r.pB(.6,.04,.98,.335)},e.Ease.easeOutCirc=function(){return r.pB(.075,.82,.165,1)},e.Ease.easeInOutCirc=function(){return r.pB(.785,.135,.15,.86)},e.Ease.easeInBack=function(){return r.pB(.6,-.28,.735,.045)},e.Ease.easeOutBack=function(){return r.pB(.175,.885,.32,1.275)},e.Ease.easeInOutBack=function(){return r.pB(.68,-.55,.265,1.55)},e.Ease.slowMo=function(){return r.pB(0,.5,1,.5)},e.Ease.slowMo1=function(){return r.pB(0,.7,1,.3)},e.Ease.slowMo2=function(){return r.pB(0,.9,1,.1)},t});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index d2200a2..d49b1b3 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.7 | © dnp_theme | CSS Plugin | MIT-License
-!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return t(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=t(r)}else{if("undefined"==typeof window.KUTE)throw new Error("CSS Plugin require KUTE.js.");t(r)}}(function(t){"use strict";for(var r,e=window,o=e.KUTE,i=o.dom,n=o.pp,u=o.prS,d=o.gCS,a=o.property("borderRadius"),f=o.property("borderTopLeftRadius"),l=o.property("borderTopRightRadius"),c=o.property("borderBottomLeftRadius"),p=o.property("borderBottomRightRadius"),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],b=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],v=["clip"],m=["backgroundPosition"],R=s.concat(b,h),y=g.concat(v,s,b,h,m),x=y.length,T=(e.number,e.unit),D=e.color,B=B||{},L=0;L1?this:this[0],r=this.length>1?"allFromTo":"fromTo";return n[r](o,e,t,i)},e.fn.to=function(e,t){var i=this.length>1?this:this[0],o=this.length>1?"allTo":"to";return n[o](i,e,t)},this});
\ No newline at end of file
diff --git a/src/kute-physics.min.js b/src/kute-physics.min.js
index b140f71..db4aa0d 100644
--- a/src/kute-physics.min.js
+++ b/src/kute-physics.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.7 | © dnp_theme | Physics Plugin | 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),n.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;y=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&&o<100;)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});
\ No newline at end of file
+!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(n){return t(n),n});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js");module.exports=t(n)}else{if("undefined"==typeof window.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js");window.KUTE.Physics=window.KUTE.Physics||t(n)}}(function(t){"use strict";var n=window,r=r||{};r.spring=n.spring=function(t){t=t||{};var n=Math.max(1,(t.frequency||300)/20),r=Math.pow(20,(t.friction||200)/100),e=t.anticipationStrength||0,o=(t.anticipationSize||0)/1e3;return function(t){var u,c,a,p,f,y,s,h;return y=t/(1-o)-o/(1-o),t.001;)c=r.b-r.a,r={a:r.b,b:r.b+c*n,H:r.H*n*n};return r.b}(),function(){var t,e,a,p;for(e=Math.sqrt(2/(o*c*c)),a={a:-e,b:e,H:1},u&&(a.a=0,a.b=2*a.b),r.push(a),t=c,p=[];a.b<1&&a.H>.001;)t=a.b-a.a,a={a:a.b,b:a.b+t*n,H:a.H*i},p.push(r.push(a));return p}(),function(n){var i,o,a;for(o=0,i=r[o];!(n>=i.a&&n<=i.b)&&(o+=1,i=r[o]););return a=i?e.getPointInCurve(i.a,i.b,i.H,n,t,c):u?0:1}};var e=r.gravity.prototype=n.gravity.prototype;e.getPointInCurve=function(t,n,r,i,e,o){var u,c;return o=n-t,c=2/o*i-1-2*t/o,u=c*c*r-r+1,e.initialForce&&(u=1-u),u},r.forceWithGravity=n.forceWithGravity=function(t){var n=t||{};return n.initialForce=!0,r.gravity(n)},r.bezier=n.BezierMultiPoint=function(t){t=t||{};var n=t.points,r=!1,i=[];return function(){var t,r;for(t in n){if(r=parseInt(t),r>=n.length-1)break;o.fn(n[r],n[r+1],i)}return i}(),function(t){return 0===t?0:1===t?1:o.yForX(t,i,r)}};var o=r.bezier.prototype=n.BezierMultiPoint.prototype;return o.fn=function(t,n,r){var i=function(r){return o.Bezier(r,t,t.cp[t.cp.length-1],n.cp[0],n)};return r.push(i)},o.Bezier=function(t,n,r,i,e){return{x:Math.pow(1-t,3)*n.x+3*Math.pow(1-t,2)*t*r.x+3*(1-t)*Math.pow(t,2)*i.x+Math.pow(t,3)*e.x,y:Math.pow(1-t,3)*n.y+3*Math.pow(1-t,2)*t*r.y+3*(1-t)*Math.pow(t,2)*i.y+Math.pow(t,3)*e.y}},o.yForX=function(t,n,r){var i,e,o,u,c,a,p,f,y=0,s=n.length;for(i=null,y;y=e(0).x&&t<=e(1).x&&(i=e),null===i);y++);if(!i)return r?0:1;for(f=1e-4,u=0,a=1,c=(a+u)/2,p=i(c).x,o=0;Math.abs(t-p)>f&&o<100;)t>p?u=c:a=c,c=(a+u)/2,p=i(c).x,o++;return i(c).y},n.Physics={physicsInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsBackOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+r/1e3,y:1.3}]}]})},physicsBackIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.28-r/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsBackInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.68-r/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+r/1e3,y:1.45}]}]})}},r});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index 3477c93..5c83940 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.7 | © dnp_theme | SVG Plugin | MIT-License
-!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,s=n.dom,a=n.pp,i=n.prS,o=n.gCS,h=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),l=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],u=["fill","stroke","stopColor"],f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,p="http://www.w3.org/2000/svg",g=r.number,v=r.color,c=n.Interpolate.array=r.array=function(t,e,r,n){var s,a=[];for(s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a,./?=-").split(""),f=String("0123456789").split(""),p=s.concat(o,f),l=(p.concat(a),Math.random),h=Math.floor,c=Math.min;return r.text=r.number=function(t,e,n){return t.innerHTML},i.text=function(t,e,r){return"text"in n||(n.text=function(t,e,n,r,i,u){var g=g||"alpha"===u.textChars?s:"upper"===u.textChars?o:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?a:u.textChars?u.textChars.split(""):s,m=g.length,x=g[h(l()*m)],d="",b="",w=n.substring(0),C=r.substring(0);d=""!==n?w.substring(w.length,h(c(i*w.length,w.length))):"",b=C.substring(0,h(c(i*C.length,C.length))),t.innerHTML=i<1?b+x+d:r}),e},i.number=function(t,e,r){return"number"in n||(n.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this});
\ No newline at end of file
+!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){require("./kute.js");module.exports=t()}else{if("undefined"==typeof window.KUTE)throw new Error("Text-Plugin requires KUTE.js.");t()}}(function(t){"use strict";var e=window,n=e.KUTE,r=e.dom,i=n.prS,u=n.pp,s=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),f=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),l=o.concat(a,p),h=(l.concat(f),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},u.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,u){var s=s||"alpha"===u.textChars?o:"upper"===u.textChars?a:"numeric"===u.textChars?p:"alphanumeric"===u.textChars?l:"symbols"===u.textChars?f:u.textChars?u.textChars.split(""):o,m=s.length,x=s[c(h()*m)],d="",b="",w=n.substring(0),C=r.substring(0);d=""!==n?w.substring(w.length,c(g(i*w.length,w.length))):"",b=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?b+x+d:r}),e},u.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(s(n,r,i))}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index e83dd49..727e7f8 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.7 | © dnp_theme | Core Engine | MIT-License
-!function(t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():window.KUTE=window.KUTE||t()}(function(){"use strict";for(var t=window,n=t.KUTE={},e=t.tweens=[],i=t.tick=null,r=t.performance,s=(function(){var t=document.createElement("div"),n=0,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=e.length,r=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(n;n0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?n+t._rD:n,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,r=0;r0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ut=function(t,n,e){this.tweens=[];var i,r=t.length,s=[];for(i=0;i0?e.delay+(e.offset||0):e.delay,this.tweens.push(lt(t[i],n,s[i]))},ot=function(t,n,e,i){this.tweens=[];var r,s=t.length,a=[];for(r=0;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],n,e,a[r]))},lt=(ut.prototype=ot.prototype={start:function(t){t=t||r.now();var n,e=this.tweens.length;for(n=0;n0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,i=0;i0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ut=function(t,e,n){this.tweens=[];var r,i=t.length,s=[];for(r=0;r0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,s[r]))},lt=function(t,e,n,r){this.tweens=[];for(var i=t.length,s=[],a=0;a0?r.delay+(r.offset||0):r.delay,this.tweens.push(ft(t[a],e,n,s[a]))},ct=(ut.prototype=lt.prototype={start:function(t){t=t||i.now();var e,n=this.tweens.length;for(e=0;e
Date: Sat, 24 Sep 2016 06:02:25 +0300
Subject: [PATCH 081/187] Attributes Plugin can also tween color attributes:
 fill, stroke, stopColor. Perhaps some things can be removed from SVG Plugin.

---
 assets/js/attr.js    |  9 ++++++++-
 attr.html            | 27 +++++++++++++++++++++++++--
 easing.html          |  6 +++---
 src/kute-attr.min.js |  2 +-
 src/kute-svg.min.js  |  2 +-
 src/kute.min.js      |  2 +-
 svg.html             |  2 +-
 7 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/assets/js/attr.js b/assets/js/attr.js
index e4a5ba0..c9be7bb 100644
--- a/assets/js/attr.js
+++ b/assets/js/attr.js
@@ -16,7 +16,7 @@ circleBtn.addEventListener('click', function(){
 });
 
 
-// coordinatea of gradient
+// coordinates of gradient
 var gradBtn = document.getElementById('gradBtn');
 var closingGradient = KUTE.to('#gradient',{attr: {x1:'49%', x2:'49%', y1:'49%', y2:'51%'}}, {easing: 'easingCubicInOut'});
 var rotatingGradient1 = KUTE.to('#gradient',{attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}}, {easing: 'easingCubicInOut'});
@@ -28,3 +28,10 @@ rotatingGradient2.chain(openingGradient);
 gradBtn.addEventListener('click', function(){
     !closingGradient.playing && !rotatingGradient1.playing && !rotatingGradient2.playing && !openingGradient.playing && closingGradient.start();
 });
+
+// fill color
+var fillBtn = document.getElementById('fillBtn');
+var fillAttribute = KUTE.to('#fill',{attr: {fill: 'red'}}, {duration: 1500, repeat: 1, yoyo: true });
+fillBtn.addEventListener('click', function(){
+    !fillAttribute.playing && fillAttribute.start();
+});
\ No newline at end of file
diff --git a/attr.html b/attr.html
index 554cccc..16fb900 100644
--- a/attr.html
+++ b/attr.html
@@ -101,8 +101,30 @@ var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
 var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
 
      
         
      The strokeWidth example is very interesting because this attribute along with many others can work with px, % or with no unit/suffix.
      
+        
+		
      Color Attributes
      
+        
      Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: fill, stroke and stopColor. If the elements are affected by their CSS counterparts, the effect is not visible, so always make sure you know what you're doing.
      
+
      // some fill rgb, rgba, hex
+var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
+    
+// some stopColor or 'stop-color'
+var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
+
      
+        
+		
      
+            
 
-		
      Unitless Properties
      
+                            
+            
+	
+			
      
+				Start	
+			
      
+		
      
+        
      If in this example the fill attribute value would reference a gradient, then rgba(0,0,0,0) is used.
      
+
+		
      Unitless Attributes
      
 		
      In the first example, let's play with the attributes of a <circle> element: radius and center coordinates.
      
 
      // radius attribute
 var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
@@ -121,7 +143,7 @@ var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
 			
 		
         
-		
      Suffixed Properties
      
+		
      Suffixed Attributes
      
         
      Similar to the example on gradients with SVG Plugin, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the % unit is found in the current value and used as unit for the DOM update:
      
 
      // gradient positions to middle
 var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
@@ -147,6 +169,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
 			
 		
         
      This plugin is quite handy and a great addition to the SVG Plugin.
      
+
    -

    The presets can be used both as a string easing:'physicsIn' or easing:physicsIn(friction:200). The list is:

    +

    The presets can be used both as a string easing:'physicsIn' or easing: Physics.physicsIn(friction:200). The list is:

    • curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
    • back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.
      • @@ -329,4 +329,4 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{" - + \ No newline at end of file diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js index 53afba2..878f23a 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.5.7 | © dnp_theme | Attributes Plugin | MIT-License -!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=r.dom,u=n.prS,a=n.pp,o=r.Interpolate.unit,f=r.Interpolate.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var l=s(a),v=c(u,l.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(v)){var d=n.truD(v).u||n.truD(r[a]).u,b=/%/.test(d)?"_percent":"_"+d;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}}); \ No newline at end of file +!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin requires KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=r.dom,o=n.prS,u=n.pp,a=r.Interpolate.unit,f=r.Interpolate.number,c=r.Interpolate.color,s=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],l=n.truC,d=n.truD,v=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};o.attr=function(t,e,r){var n={};for(var i in r){var o=v(i).replace(/_+[a-z]+/,""),u=s(t,o);n[o]=p.indexOf(v(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o,u={};for(o in r){var b=v(o),A=s(n,b.replace(/_+[a-z]+/,""));if(p.indexOf(b)===-1&&(/(%|[a-z]+)$/.test(r[o])||/(%|[a-z]+)$/.test(A))){var m=d(A).u||d(r[o]).u,w=/%/.test(m)?"_percent":"_"+m;o+w in e||(e[o+w]=function(t,e,r,n,i){var o=o||v(e).replace(w,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),u[o+w]=d(r[o])}else p.indexOf(b)>-1?(o in e||(e[o]=function(t,e,n,i,o){var u=u||v(e);t.setAttribute(u,c(n,i,o,r.keepHex))}),u[o]=l(r[o])):(o in e||(e[o]=function(t,e,r,n,i){var o=o||v(e);t.setAttribute(o,f(r,n,i))}),u[o]=parseFloat(r[o]))}return u}}); \ No newline at end of file diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index 5c83940..eb64322 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.5.7 | © dnp_theme | SVG Plugin | MIT-License -!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,s=r.dom,a=n.pp,i=n.prS,o=n.gCS,h=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),l=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],u=["fill","stroke","stopColor"],f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,p="http://www.w3.org/2000/svg",g=r.Interpolate.number,v=r.Interpolate.color,c=r.Interpolate.unit,d=r.Interpolate.array=function(t,e,r,n){var s,a=[];for(s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,i=0;i0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ut=function(t,e,n){this.tweens=[];var r,i=t.length,s=[];for(r=0;r0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,s[r]))},lt=function(t,e,n,r){this.tweens=[];for(var i=t.length,s=[],a=0;a0?r.delay+(r.offset||0):r.delay,this.tweens.push(ft(t[a],e,n,s[a]))},ct=(ut.prototype=lt.prototype={start:function(t){t=t||i.now();var e,n=this.tweens.length;for(e=0;e0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.rvs()),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),t.scrollOut();var s=0,a=t._cT.length;for(s;s2?2:s,i=0;i0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)}},ut=function(t,e,n){this.tweens=[];var r,i=t.length,s=[];for(r=0;r0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,s[r]))},lt=function(t,e,n,r){this.tweens=[];for(var i=t.length,s=[],a=0;a0?r.delay+(r.offset||0):r.delay,this.tweens.push(ft(t[a],e,n,s[a]))},ct=(ut.prototype=lt.prototype={start:function(t){t=t||i.now();var e,n=this.tweens.length;for(e=0;eRecommendations for SVG Transforms
        -
      • The SVG Plugin coming with KUTE.js version 1.5.3 is trying to make sure animations don't go out of control, but you need to always use same order of transform functions: translate, scale, rotate, skewX and skewY. All this to make sure the animation looks like we would expect from regular HTML elements transformations. Maybe future versions will feature .matrix() transformations to handle all possible transform function combinations, but I'm going to need help with implementation and testing.
        • +
      • The SVG Plugin coming with KUTE.js version 1.5.3 is trying to make sure animations don't go out of control, and always uses same order of transform functions: translate, scale, rotate, skewX and skewY. All this to make sure the animation looks like we would expect from regular HTML elements transformations. Maybe future versions will feature .matrix() transformations to handle all possible transform function combinations, but I'm going to need help with implementation and testing.
      • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
      • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible or some browser specific tricks if that is the case.
      • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply don't work. You might want to check this tutorial.
        • From 9bbcffb7b69d083b88aa721242e8edb199c82b79 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 24 Sep 2016 10:39:04 +0300 Subject: [PATCH 082/187] Quick fixes and some change: * Removed `dom` from KUTE object, * Re-added Tween to KUTE object (was deleted by mistake). * Updated demo and the kute-box-shadow sample plugin --- assets/js/kute-bs.js | 85 +++++++++++++------------- extend.html | 132 +++++++++++++++++++--------------------- src/kute-attr.min.js | 2 +- src/kute-bezier.min.js | 2 +- src/kute-css.min.js | 2 +- src/kute-jquery.min.js | 2 +- src/kute-physics.min.js | 2 +- src/kute-svg.min.js | 2 +- src/kute-text.min.js | 2 +- src/kute.min.js | 4 +- 10 files changed, 116 insertions(+), 119 deletions(-) diff --git a/assets/js/kute-bs.js b/assets/js/kute-bs.js index d591ec6..c57c7a6 100644 --- a/assets/js/kute-bs.js +++ b/assets/js/kute-bs.js @@ -25,18 +25,43 @@ // filter unsupported browsers if (!('boxShadow' in document.body.style)) {return;} // add a reference to KUTE object - var g = window, K = g.KUTE, unit = g.Interpolate.unit, colr = g.Interpolate.color; + var g = window, K = g.KUTE, getComputedStyle = K.gCS, + trueColor = K.truC, prepareStart = K.prS, parseProperty = K.pp, DOM = g.dom, + unit = g.Interpolate.unit, color = g.Interpolate.color, - // 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 + // 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; + _boxShadow = K.property('boxShadow'), // note we're using the KUTE.property() autopreffix utility + 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 + // utility function to process values accordingly + // numbers must be integers and color must be rgb object + 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] = trueColor(newShadow[4]); + return newShadow; + }; // 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); + prepareStart['boxShadow'] = function(element,property,value){ + var cssBoxShadow = getComputedStyle(element,_boxShadow); return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow; } @@ -44,12 +69,12 @@ // 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) ) { + parseProperty['boxShadow'] = function(property,value,element){ + if ( !('boxShadow' in 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(l,p,a,b,v) { + DOM['boxShadow'] = function(l,p,a,b,v) { // let's start with the numbers | set unit | also determine inset var numbers = [], px = 'px', // the unit is always px @@ -59,54 +84,30 @@ } // now we handle the color - var colorValue = colr(a[4],b[4],v); + var colorValue = color(a[4],b[4],v); // the final piece of the puzzle, the DOM update l.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' '); }; } - // processProperty for boxShadow, builds basic structure with ready to tween values + // parseProperty for boxShadow, builds basic structure with ready to tween values if (typeof value === 'string'){ - var color, inset = 'none'; + var currentColor, 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]); + currentColor = value.match(colRegEx); + value = value.replace(currentColor[0],'').split(' ').concat([currentColor[0].replace(/\s/g,'')],[inset]); - value = K.processBoxShadowArray(value); + value = processBoxShadowArray(value); } else if (value instanceof Array){ - value = K.processBoxShadowArray(value); + value = 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; })); \ No newline at end of file diff --git a/extend.html b/extend.html index 0e7a0af..0f1a80b 100644 --- a/extend.html +++ b/extend.html @@ -170,12 +170,15 @@ K.Tween.prototype.onUpdate = function(){
        • KUTE.prS['propertyName'] a prepareStart function to get the current value of the property required for the .to() method;
        • KUTE.pp['propertyName'] a processProperty function to process the user value / current value to have it ready to tween;
          • -
        • KUTE.dom['propertyName'] a domUpdate function that will update the property value into the DOM;
          • +
        • window.dom['propertyName'] a domUpdate function that will update the property value into the DOM;
        • optional a function that will work as an utility for your value processing.

        So let's add support for boxShadow! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template and let's break it down to pieces:

        -
        // add a reference to KUTE object
-var K = window.KUTE;
+
        // add a reference to global and KUTE object
+var g = window, K = g.KUTE, 
+    // add a reference to KUTE utilities
+    prepareStart = K.prS, DOM = g.dom, parseProperty = K.pp, trueColor = K.truC,
+    color = g.Interpolate.color, unit = g.Interpolate.unit, getComputedStyle = K.gCS;
 
 // filter unsupported browsers
 if (!('boxShadow' in document.body.style)) {return;}
@@ -189,8 +192,8 @@ var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}
         
        Now we have access to the KUTE object, prototypes and it's utility functions, let's write a prepareStart function that will read the current boxShadow value:
        
 
        // 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'); // where K.gCS() is an accurate getComputedStyle() core method
+prepareStart['boxShadow'] = function(element,property,value){
+    var cssBoxShadow = getComputedStyle(element,'boxShadow'); // where K.gCS()/getComputedStyle is an accurate getComputedStyle() core method
     return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
 }
 
@@ -201,67 +204,12 @@ K.prS['boxShadow'] = function(element,property,value){
 // also to read the current value of an attribute, replace first line of the above function body with this
 // var attrValue = element.getAttribute(property);
 // and return the value or a default value, mostly rgb(0,0,0) for colors or 0 for other types  
-
           
+
         
 
-        
        Next we'll need to write a processProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the K.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
        
-        
-
        // the processProperty for boxShadow 
-// registers the K.dom['boxShadow'] function 
-// returns an array of 6 values in the following format
-// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
-K.pp['boxShadow'] = function(property,value,element){
-  // the DOM update function for boxShadow registers here
-  // we only enqueue it if the boxShadow property is used to tween
-  if ( !('boxShadow' in K.dom) ) {
-    K.dom['boxShadow'] = function(l,p,a,b,v) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress 
-
-      // let's start with the numbers | set unit | also determine inset
-      var numbers = [], px = 'px', // the unit is always px
-        inset = a[5] !== 'none' || b[5] !== 'none' ? ' inset' : false; 
-
-      for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers 
-        numbers.push( (a[i] + (b[i] - a[i]) * v ) + px);
-        // we can also write this like this now, starting 1.5.3
-        // numbers.push( K.Interpolate.unit(a[i], b[i], px, v) );
-      }
-
-      // now we handle the color
-      var colorValue, _color = {}; 
-      for (var c in b[4]) {
-        _color[c] = parseInt(a[4][c] + (b[4][c] - a[4][c]) * v )||0;
-      }
-      colorValue = 'rgb(' + _color.r + ',' + _color.g + ',' + _color.b + ') ';
-      // for color interpolation, starting with v1.5.3 we can cut it short to this
-      // var colorValue = K.Interpolate.color(a[4],b[4],v);
-      
-      // last piece of the puzzle, the DOM update
-      l.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + 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;
-}
-
        
-
-        
        Notice we've used an utility function that fixes the Array values and makes sure the structure is right.
        
+        
        Now we need an utility function that makes sure the structure looks right for the DOM update function.
        
 
        // utility function to process values accordingly
 // numbers must be floats/integers and color must be rgb object
-K.processBoxShadowArray = function(shadow){
+var processBoxShadowArray = function(shadow){
   var newShadow, i;
   // properly process the shadow based on amount of values
   if (shadow.length === 3) { // [h-shadow, v-shadow, color]
@@ -279,8 +227,56 @@ K.processBoxShadowArray = function(shadow){
     newShadow[i] = parseFloat(newShadow[i]);  
   }
   // make sure color is an rgb object
-  newShadow[4] = K.truC(newShadow[4]); // where K.truC() is a core method to return the true color in rgb object format
+  newShadow[4] = trueColor(newShadow[4]); // where K.truC()/trueColor is a core method to return the true color in rgb object format
   return newShadow;
+};
+
          
+
+        
        Next we'll need to write a processProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the K.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
        
+        
+
        // the processProperty for boxShadow 
+// registers the window.dom['boxShadow'] function 
+// returns an array of 6 values in the following format
+// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
+parseProperty['boxShadow'] = function(property,value,element){
+  // the DOM update function for boxShadow registers here
+  // we only enqueue it if the boxShadow property is used to tween
+  if ( !('boxShadow' in DOM) ) {
+    DOM['boxShadow'] = function(l,p,a,b,v) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress 
+
+      // let's start with the numbers | set unit | also determine inset
+      var numbers = [], px = 'px', // the unit is always px
+        inset = a[5] !== 'none' || b[5] !== 'none' ? ' inset' : false; 
+
+      for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers 
+        numbers.push( unit(a[i], b[i], px, v) );
+      }
+
+      // now we handle the color
+      var colorValue = color(a[4],b[4],v);
+      
+      // last piece of the puzzle, the DOM update
+      l.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + 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]);
+    
+    // now we can use the above specific utitlity
+    value = processBoxShadowArray(value);
+  } else if (value instanceof Array){
+    value = processBoxShadowArray(value);
+  }
+  return value;
 }
 
        
 
@@ -315,10 +311,10 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
      • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color, the IE9+ browsers will be able to return the rgb object we need.
        • 
             
      • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
        • 
             
      • KUTE.rth(r,g,b) a function that accepts numeric values for red, blue and green and returns a HEX format #006699 color string.
        • 
-            
      • KUTE.Interpolate.number is most essential interpolation tool when developing plugins for various properties not supported in the core.
        • 
-            
      • KUTE.Interpolate.unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
        • 
-            
      • KUTE.Interpolate.color is a very fast interpolation function for colors, as used in the above example.
        • 
-            
      • KUTE.Interpolate.array and KUTE.Interpolate.coords are SVG Plugin only, but you can have a look anytime when you're out of ideas.
        • 
+            
      • Interpolate.number is most essential interpolation tool when developing plugins for various properties not supported in the core.
        • 
+            
      • Interpolate.unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
        • 
+            
      • Interpolate.color is a very fast interpolation function for colors, as used in the above example.
        • 
+            
      • Interpolate.array and Interpolate.coords are SVG Plugin only, but you can have a look anytime when you're out of ideas.
        •
      -

      CSS Properties Specific to SVGs

      -

      As you probably noticed in the above examples we've animated the background color for some of the shapes, that is fill, one of the properties supported by the SVG Plugin, so let's create some tweens real quick:

      -
      // fill HEX/RGBa
-var tween1 = KUTE.to('selector', {fill: '#069'});
-    
-// fillOpacity Number 0-1
-var tween2 = KUTE.to('selector',{fillOpacity: 0.2});
 
-// stroke HEX/RGBa
-var tween3 = KUTE.to('selector',{stroke: 'rgba(00,66,99,0.8)'});
-    
-// strokeOpacity Number 0-1
-var tween4 = KUTE.to('selector',{strokeOpacity: 0.6});
-    
-// strokeWidth Number / String
-var tween5 = KUTE.to('selector',{strokeWidth: '10px'});
-
      -

      A quick demo with the above:

      -
      - - - - -
      - Start -
      -
      -

      Please note that strokeWidth is a very interesting property that acts very different: when number is provided the rendered stroke will scale depending on viewBox and/or width and height, but if String is provided you can actually force the browser to scale the stroke as you like.

      -

      Now let's have a look at gradients, here we can animate the stopColor defined within the SVG's <linearGradient> element.

      -
      <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
-    <stop offset="0%" style="stop-color: #ffd626; stop-opacity:1"></stop>
-    <!-- our tween object targets the element below -->
-    <stop id="myStopColor" offset="100%" style="stop-color: #FF5722; stop-opacity:1"></stop> 
-</linearGradient>
-
      -
      // stopColor HEX/RGBa
-var tween6 = KUTE.to('#myStopColor',{stopColor: 'rgb(00,66,99)'});
-
      - -

      Same as above, for stopOpacity we also target the right element defined within the SVG's <linearGradient> element.

      -
      <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
-    <stop offset="0%" style="stop-color: #2196F3; stop-opacity:1"></stop>
-    <!-- our tween object targets the element below -->
-    <stop id="myStopOpacity" offset="100%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
-</linearGradient>
-
      -
      // stopOpacity Number 0-1
-var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
-
      - -
      - - - - - - - - - - - - - - - - - - -
      - Start -
      -

      The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.

      Future Plans

      @@ -545,6 +470,7 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2}); + From 5b61b7a1fe8e509a73b70eaff11ea50b5c327e16 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Nov 2016 22:57:33 +0200 Subject: [PATCH 101/187] Changes: * fixed minor issue with `borderRadius` on legacy browsers * removed CSS properties from SVG plugin (forgot in previous commit) * simplified core box model properties and CSS transform tween objects to always use `px` or `deg` as unit, with converted values * implemented the `crossCheck` function for SVG transforms (for stacking transform chains) and the SVG morph * simplified the `coords` interpolation used for SVG morph * general code cleanup * simplified the `processEasing` since the additional easing plugins have been removed, the old version can be found in the js file for easing examples page * doc updates --- api.html | 2 +- assets/js/easing.js | 18 ++++++++++++++++++ assets/js/examples.js | 6 +----- attr.html | 2 +- css.html | 2 +- easing.html | 2 +- examples.html | 2 +- extend.html | 13 +++++++------ features.html | 2 +- index.html | 2 +- options.html | 2 +- performance.html | 2 +- properties.html | 20 +++++--------------- src/kute-attr.min.js | 4 ++-- src/kute-css.min.js | 4 ++-- src/kute-jquery.min.js | 2 +- src/kute-svg.min.js | 4 ++-- src/kute-text.min.js | 2 +- src/kute.min.js | 4 ++-- start.html | 2 +- svg.html | 2 +- text.html | 2 +- 22 files changed, 53 insertions(+), 48 deletions(-) diff --git a/api.html b/api.html index 896f2ca..5007ddf 100644 --- a/api.html +++ b/api.html @@ -251,7 +251,7 @@ tween2.chain(tweensCollection2.tweens); - + diff --git a/assets/js/easing.js b/assets/js/easing.js index 8d62772..c428f51 100644 --- a/assets/js/easing.js +++ b/assets/js/easing.js @@ -19,6 +19,24 @@ for (var i=0; i - + diff --git a/css.html b/css.html index 5548b3f..e155f9b 100644 --- a/css.html +++ b/css.html @@ -224,7 +224,7 @@ KUTE.to('selector1',{outlineColor:'#069'}).start(); - + diff --git a/easing.html b/easing.html index 4790517..74cb6ca 100644 --- a/easing.html +++ b/easing.html @@ -323,7 +323,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{" - + diff --git a/examples.html b/examples.html index 84a44ae..d3eb134 100644 --- a/examples.html +++ b/examples.html @@ -489,7 +489,7 @@ var myMultiTween2 = KUTE.allFromTo( - + diff --git a/extend.html b/extend.html index d7baea3..21ba974 100644 --- a/extend.html +++ b/extend.html @@ -119,7 +119,7 @@

      Extend Tween Control

      In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check Tween function to get the internal references notation:

      //add a reference to _tween function
-var Tween = window._Tween;
+var Tween = KUTE.Tween;
 
 // let's add a timescale method
 Tween.prototype.timescale = function(factor){
@@ -166,10 +166,11 @@ Tween.prototype.onUpdate = function(){
 		
      KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and you'll master it real quick, it's very easy.
       
         
      We need basically 3 functions:
      
         
        
-            
      • KUTE.prepareStart['propertyName'] a function to get the current value of the property required for the .to() method;
        • 
-            
      • KUTE.parseProperty['propertyName'] a function to process the user value / current value to have it ready to tween;
        • 
-            
      • window.dom['propertyName'] a domUpdate function that will update the property value into the DOM;
        • 
-            
      • optional a function that will work as an utility for your value processing.
        • 
+            
      • KUTE.prepareStart['propertyName'] required a function to get the current value of the property required for the .to() method;
        • 
+            
      • KUTE.parseProperty['propertyName'] required a function to process the user value / current value to have it ready to tween;
        • 
+            
      • KUTE.crossCheck['propertyName'] optional a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;
        • 
+            
      • window.dom['propertyName'] required a domUpdate function that will update the property value into the DOM;
        • 
+            
      • optional one or more functions that will work as an utility for your value processing.
        • 
         
      
         
      So let's add support for boxShadow! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template and let's break it down to pieces:
      
 
      // add a reference to global and KUTE object
@@ -343,7 +344,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
 
 	
 
-
+
 
  
  
diff --git a/features.html b/features.html
index eba6c67..0fde143 100644
--- a/features.html
+++ b/features.html
@@ -165,7 +165,7 @@
 ================================================== -->
 	
 
-
+
 
  
  
diff --git a/index.html b/index.html
index 8e8819c..ba7f80f 100644
--- a/index.html
+++ b/index.html
@@ -207,7 +207,7 @@
 
 	
-
+
 
  
  
diff --git a/options.html b/options.html
index f380f70..e0579ee 100644
--- a/options.html
+++ b/options.html
@@ -170,7 +170,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
 
 	
 
-
+
 
  
  
diff --git a/performance.html b/performance.html
index 3e7c721..25f1627 100644
--- a/performance.html
+++ b/performance.html
@@ -119,7 +119,7 @@
 
 	
-
+
 
 
 
diff --git a/properties.html b/properties.html
index 4f81335..d4e2960 100644
--- a/properties.html
+++ b/properties.html
@@ -86,7 +86,7 @@
 		
      In most cases, the best animation possible is the opacity, 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 filter: alpha(opacity=0). Also, opacity can be used for instance on legacy browsers that don't support RGBA colors. Eg. opacity:0.5 will make an element semitransparent.
      
 		
 		
      2D Transform Properties
      
-		
      The core engine supports all 2D transform properties except matrix.
      
+		
      The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles to degrees, to help improve memory efficiency.
      
 		
        
 			
      • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
        • 
 			
      • rotate property applies rotation to an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. IE9+
        • 
@@ -97,7 +97,7 @@
 		
      		
 		
 		
      3D Transform Properties
      
-		
      The core engine supports all 3D transform properties except matrix3d and rotate3d.
      
+		
      The core engine supports all 3D transform properties except matrix3d and rotate3d. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory usage.
      
         
        
 			
      • translateX property is for horizontal translation. EG. translateX:150 to translate an element 150px to the right. IE10+
        • 
 			
      • translateY property is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top. IE10+
        • 
@@ -123,17 +123,6 @@
 		
        The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability.
        
 
 		
        Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset.
-		
-		
 
 		
        Box Model Properties
        
 		
        The core engine supports width, height, left and top while the CSS Plugin adds support for all other box-model properties.
        
@@ -143,7 +132,8 @@
 			
      • padding, margin, paddingTop, paddingBottom, paddingLeft, paddingRight, marginTop, marginBottom, marginLeft and marginRight are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as margin: "20px 50px" or any other type are not supported.
        • 
 			
      • borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are borderLeftWidth 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.
        • 
 			
      • outlineWidth property allows you to animate the outline-width of an element.
        • 
-		
      		
+
    +

    As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the element.offsetWidth as a refference. The idea is the same as presented on the above supported transform properties.

    Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize event that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.

    Border Radius

    @@ -236,7 +226,7 @@ ================================================== --> - + diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js index 5e98bb3..a72b425 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.97 | © dnp_theme | Attributes Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prepareStart,u=n.parseProperty,a=r._unit,f=r._number,s=r._color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=b(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(b(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var v=b(u),y=c(n,v.replace(/_+[a-z]+/,""));if(l.indexOf(v)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(y))){var _=d(y).u||d(r[u]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){t.setAttribute(e.replace(g,""),a(r.v,n.v,n.u,i))}),o[v+g]=d(r[u])}else l.indexOf(v)>-1?(v in e||(e[v]=function(t,e,n,i,o){t.setAttribute(e,s(n,i,o,r.keepHex))}),o[v]=p(r[u])):(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,f(r,n,i))}),o[v]=parseFloat(r[u]))}return o}}); \ No newline at end of file +// KUTE.js v1.5.98 | © dnp_theme | Attributes Plugin | MIT-License +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prepareStart,u=n.parseProperty,a=r._unit,f=r._number,s=r._color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=b(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(b(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var v=b(u),y=c(n,v.replace(/_+[a-z]+/,""));if(l.indexOf(v)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(y))){var _=d(y).u||d(r[u]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var o=o||e.replace(g,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),o[v+g]=d(r[u])}else l.indexOf(v)>-1?(v in e||(e[v]=function(t,e,n,i,o){t.setAttribute(e,s(n,i,o,r.keepHex))}),o[v]=p(r[u])):(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,f(r,n,i))}),o[v]=parseFloat(r[u]))}return o}}); \ No newline at end of file diff --git a/src/kute-css.min.js b/src/kute-css.min.js index 290ae4f..bfab035 100644 --- a/src/kute-css.min.js +++ b/src/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.97 | © dnp_theme | CSS Plugin | MIT-License -!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=s.concat(h),y=p.concat(s,h),x=l.concat(b,p,s,h,m),R=x.length,C=C||{},T=0;T1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index b2ad32a..038e009 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.97 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");t.KUTE.svg=e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=e.dom,a=r.parseProperty,s=r.prepareStart,i=r.getCurrentStyle,o=r.truC,l=r.truD,u=!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1),h=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],f=["fill","stroke","stopColor"],p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",v=e._number,c=e._unit,d=e._color,m=e._coords=function(t,e,r,n){for(var a=[],s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},s.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?p:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,m=u.length,b=u[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/src/kute.min.js b/src/kute.min.js index 3bb9047..ddc4c77 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.97 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n={},i=t._tweens=[],r=null,s=(function(){for(var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"],e=0,r=n.length;e0)return t.options.repeat<9999?t.options.repeat--:t.options.repeat=0,t.options.yoyo&&(t.reversed=!t.reversed,J.call(t)),t._startTime=t.options.yoyo&&!t.reversed?n+t.options.repeatDelay:n,!0;t.options.complete&&t.options.complete.call(),tt.call(t);for(var s=0,a=t.options.chain.length;s0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(J.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||y()},48)},tt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(_,c,!1),document.removeEventListener(w,c,!1),document.body.removeAttribute("data-tweening"))},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(_,c,!1),document.addEventListener(w,c,!1),document.body.setAttribute("data-tweening","scroll"))},nt=function(e){if("function"==typeof e)return e;if("string"==typeof e){if(/easing|linear/.test(e))return at[e];if(/bezier/.test(e)){var n=e.replace(/bezier|\s|\(|\)/g,"").split(",");return t.Bezier(1*n[0],1*n[1],1*n[2],1*n[3])}return/physics/.test(e)?t.Physics[e].apply(this):t.Ease[e].apply(this)}},it=function(){var e={},n=h(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(X.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||F[s];else if(a)e[s]=n[s]||F[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];X.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||F[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&S){var c=v(this._el,"filter");e.opacity="number"==typeof c?c:F.opacity}else A.indexOf(s)!==-1?e[s]=v(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=null===this._el||void 0===this._el?t.pageYOffset||x.scrollTop:this._el.scrollTop;for(var s in n)X.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||F[s]);if(this._vS={},this._vS=K(e,this._el),O in this._vE)for(var p in this._vS[O]){p in this._vE[O]||(this._vE[O][p]={});for(var f in this._vS[O][p])if(void 0!==this._vS[O][p][f].value){f in this._vE[O][p]||(this._vE[O][p][f]={});for(var d in this._vS[O][p][f])d in this._vE[O][p][f]||(this._vE[O][p][f][d]=this._vS[O][p][f][d])}if("value"in this._vS[O][p]&&!("value"in this._vE[O][p]))for(var g in this._vS[O][p])g in this._vE[O][p]||(this._vE[O][p][g]=this._vS[O][p][g])}},rt={},st={},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=t._start=function(t){et.call(this),W(this._el,this.options),this.options.rpr&&it.apply(this),n.svg&&n.svq(this);for(var i in this._vE)i in st&&st[i],this._vSR[i]=this._vS[i];return d(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&H(),this},ut=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,d(this),!r&&H()),this},lt=t._Tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?x:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this._vSR={},this._vS=r.rpr?n:K(n,t),this._vE=K(i,t),this.options={};for(var s in r)this.options[s]=r[s];this.options.chain=[],this.options.easing=r.easing&&"function"==typeof nt(r.easing)?nt(r.easing):at.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.rpr=r.rpr||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ot,this.play=ut,this.resume=ut,this.pause=function(){return!this.paused&&this.playing&&(g(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(g(this),this.playing=!1,this.paused=!1,tt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),V.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ft(t[r],e,i[r]))},pt=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(ht(t[s],e,n,r[s]))},ft=(ct.prototype=pt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this._vSR={},this._vS=r.rpr?n:G(n,t),this._vE=G(i,t),this.options={};for(var s in r)this.options[s]=r[s];this.options.rpr=r.rpr||!1;for(var a in this._vE)a in st&&!this.options.rpr&&st[a].call(this);if(void 0!==this.options.perspective&&E in this._vE){var o="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=o}this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n - + diff --git a/svg.html b/svg.html index d0179b4..e6ae4a1 100644 --- a/svg.html +++ b/svg.html @@ -468,7 +468,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: [150, svgOriginX, s - + diff --git a/text.html b/text.html index 962a344..e5c7d06 100644 --- a/text.html +++ b/text.html @@ -166,7 +166,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span& - + From 90dee25c425328100935ee3cd0b73d9d8f4ff456 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 25 Nov 2016 22:54:27 +0200 Subject: [PATCH 102/187] Changes: * Fixed some bug with Attr plugin * preparing code for a bundle build script * documentation updates --- assets/js/attr.js | 7 ++++--- attr.html | 2 +- properties.html | 4 +++- src/kute-attr.min.js | 4 ++-- src/kute-css.min.js | 2 +- src/kute-jquery.min.js | 2 +- src/kute-svg.min.js | 4 ++-- src/kute-text.min.js | 2 +- src/kute.min.js | 4 ++-- start.html | 24 ++++++++++++------------ 10 files changed, 29 insertions(+), 26 deletions(-) diff --git a/assets/js/attr.js b/assets/js/attr.js index c9be7bb..b3fec5a 100644 --- a/assets/js/attr.js +++ b/assets/js/attr.js @@ -1,10 +1,11 @@ // radius attribute -var radiusTween = KUTE.to('#circle', {attr: {r: 75} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'}); +// var radiusTween = KUTE.to('#circle', {attr: {r: '75px'} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'}); +var radiusTween = KUTE.to('#circle', {attr: {r: '75%'} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'}); // coordinates of the circle center -var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40}}, { duration: 300, easing: 'easingCubicOut'}); +var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40,fillOpacity:0.3}}, { duration: 300, easing: 'easingCubicOut'}); var coordinatesTween2 = KUTE.to('#circle', {attr: {cx:110,cy:40}}, { duration: 400, easing: 'linear'}); -var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75}}, { easing: 'easingCubicOut'}); +var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75,fillOpacity:1}}, { easing: 'easingCubicOut'}); coordinatesTween1.chain(coordinatesTween2); coordinatesTween2.chain(coordinatesTween3); diff --git a/attr.html b/attr.html index 38c6f51..e6b2acb 100644 --- a/attr.html +++ b/attr.html @@ -135,7 +135,7 @@ var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});

    A quick demo with the above:

    - +
    diff --git a/properties.html b/properties.html index d4e2960..27ce89a 100644 --- a/properties.html +++ b/properties.html @@ -162,7 +162,9 @@

    Presentation Attributes

    The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.

    The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.

    -

    Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file. More details to come.

    +

    Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.

    +

    The plugin handles attribute namespaces properly which means you can use both Javascript notation (like stopColor) and HTML markup notation (like 'stop-color'), see the below example.

    +

    EG: KUTE.to('selector', {attr:{stroke:'blue'}}) to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'rgb(135,16,122)'}}) to animate the stop color of some SVG gradient.

    Typography Properties

    The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.

    diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js index a72b425..b493eb2 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.98 | © dnp_theme | Attributes Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prepareStart,u=n.parseProperty,a=r._unit,f=r._number,s=r._color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=b(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(b(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var v=b(u),y=c(n,v.replace(/_+[a-z]+/,""));if(l.indexOf(v)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(y))){var _=d(y).u||d(r[u]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var o=o||e.replace(g,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),o[v+g]=d(r[u])}else l.indexOf(v)>-1?(v in e||(e[v]=function(t,e,n,i,o){t.setAttribute(e,s(n,i,o,r.keepHex))}),o[v]=p(r[u])):(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,f(r,n,i))}),o[v]=parseFloat(r[u]))}return o}}); \ No newline at end of file +// KUTE.js v1.5.98a | © dnp_theme | Attributes Plugin | MIT-License +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit),l=r._number,c=r._color,p=function(t,e){return t.getAttribute(e)},d=["fill","stroke","stop-color"],b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e,r){var n={};for(var i in r){var u=b(i).replace(/_+[a-z]+/,""),o=p(t,u);n[u]=d.indexOf(u)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(i)?1:0)}return n},o.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var u={};for(var o in r){var v=b(o),y=p(n,v.replace(/_+[a-z]+/,""));if(d.indexOf(v)===-1)if(null!==y&&/(%|[a-z]+)$/.test(y)){var _=f(y).u||f(r[o]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var u=u||e.replace(g,"");t.setAttribute(u,s(r.v,n.v,n.u,i))}),u[v+g]=f(r[o])}else/(%|[a-z]+)$/.test(r[o])&&null!==y&&(null===y||/(%|[a-z]+)$/.test(y))||(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,l(r,n,i))}),u[v]=parseFloat(r[o]));else v in e||(e[v]=function(t,e,n,i,u){t.setAttribute(e,c(n,i,u,r.keepHex))}),u[v]=a(r[o])}return u},this}); \ No newline at end of file diff --git a/src/kute-css.min.js b/src/kute-css.min.js index bfab035..15f0b34 100644 --- a/src/kute-css.min.js +++ b/src/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.98 | © dnp_theme | CSS Plugin | MIT-License +// KUTE.js v1.5.98a | © dnp_theme | CSS Plugin | MIT-License !function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=s.concat(h),y=p.concat(s,h),x=l.concat(b,p,s,h,m),R=x.length,C=C||{},T=0;T1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index 038e009..a3e5488 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.98 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=e.dom,s=r.parseProperty,a=r.prepareStart,o=r.getCurrentStyle,h=(r.truC,r.truD,r.crossCheck),l=!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1),u=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,f="http://www.w3.org/2000/svg",g=e._number,p=(e._unit,e._color,e._coords=function(t,e,r,n){for(var i=[],s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},s.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?p:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,m=u.length,b=u[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/src/kute.min.js b/src/kute.min.js index ddc4c77..b3e2ed4 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.98 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n={},i=t._tweens=[],r=null,s=(function(){for(var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"],e=0,r=n.length;e0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this._vSR={},this._vS=r.rpr?n:G(n,t),this._vE=G(i,t),this.options={};for(var s in r)this.options[s]=r[s];this.options.rpr=r.rpr||!1;for(var a in this._vE)a in st&&!this.options.rpr&&st[a].call(this);if(void 0!==this.options.perspective&&E in this._vE){var o="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=o}this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this._vSR={},this._vE=G(i,t),this._vS=r.rpr?n:G(n,t);for(var s in this._vE)s in st&&!r.rpr&&st[s].call(this);this.options={};for(var a in r)this.options[a]=r[a];if(this.options.rpr=r.rpr||!1,void 0!==this.options.perspective&&E in this._vE){var o="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=o}this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;nWebsites

    In your website add the following code, the best would be to put it at the end of your body tag:

    -
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> <!-- core KUTE.js -->
    +
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> <!-- core KUTE.js -->

    An alternate CDN link here:

    -
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute.min.js"></script> <!-- core KUTE.js -->
    +
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute.min.js"></script> <!-- core KUTE.js -->

    The CDN repositories receive latest updates here and right here. You might also want to include the tools that you need for your project:

    -
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
         
    Alternate CDN links:
    
-
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
 		
    Your awesome animation coding would follow after these script links.
    		
 		

From 6ff8e274d103545fbf3664b40ee390407f6a2754 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 17:47:17 +0200
Subject: [PATCH 103/187] Documentation updates and performance test page
 reworked with safety features.

---
 about.html             |  4 +--
 api.html               |  4 +--
 assets/js/kute-bs.js   | 33 ++++++++++----------
 assets/js/perf.js      | 69 ++++++++++++++++++++++++++++++++++--------
 extend.html            | 54 +++++++++++++++++----------------
 performance.html       |  8 ++---
 properties.html        |  4 +--
 src/kute-attr.min.js   |  2 +-
 src/kute-css.min.js    |  2 +-
 src/kute-jquery.min.js |  2 +-
 src/kute-svg.min.js    |  2 +-
 src/kute-text.min.js   |  2 +-
 src/kute.min.js        |  4 +--
 13 files changed, 117 insertions(+), 73 deletions(-)

diff --git a/about.html b/about.html
index b62bd85..05ce291 100644
--- a/about.html
+++ b/about.html
@@ -72,7 +72,7 @@
 	
    
 		
 		
    Did you know?
    
-		
    Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween 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 GSAP, Dynamics, Velocity, Shifty, our own KUTE.js here and many others. When used as a verb, it actually reffers to the interpolation of the values.
    
+		
    Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween 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 vertical sync, etc). The term was introduced to the world of web development by early Javascrpt libraries and later used in dedicated animation libraries such as GSAP, Dynamics, Velocity, Shifty, our own KUTE.js here and many others. When used as a verb, it actually reffers to the interpolation of the values.
    
 		
    Tween Object is a Javascript Object 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 tween actually refers to the tween object.
    
 		
    polyfill 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 natively". Basically a polyfill covers what legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. More details.
    
 		
    requestAnimationFrame is a Javascript method developed to enable hardware acceleration animations for the web today. In Javascript, the window.requestAnimationFrame(callback); method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a polyfil to cover the legacy browsers chaos.
    
@@ -107,7 +107,7 @@
 		
    Similarly, if you animate the 2D translate this always goes translate(x,y) even if you use translate:150 (only for the X axis) or translate:[150,0] (both X and Y axis), for better performance as well. And by the way, this works great on IE9 and other legacy browsers.
    
 		
 		
    Box Model
    
-		
    We compared position with transition above, but now we are going to talk about other issues related to resizers: width, height, margin, padding and borderWidth 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 all browsers, especially when you animate these resize properties. When this toxic combination occurs animating a large amount of elements to animate could crash any browser, no exception, and I think any developer should know about this.
    
+		
    We compared position with transition above, but now we are going to talk about other issues related to resizers: width, height, margin, padding and borderWidth 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 all browsers, especially when you animate these resize properties. When this toxic combination occurs animating a large amount of elements could crash any browser, no exception, and I think any developer should know about this.
    
 		
    The resize event triggered by these resizer properties can cause some severe issues with legacy browsers 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.
     
 		
    A workaound for 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 elements themselves. 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.
    
 		
diff --git a/api.html b/api.html
index 5007ddf..b9c5cb2 100644
--- a/api.html
+++ b/api.html
@@ -86,12 +86,12 @@
 		
    These methods allow you to create tween objects and collections of tween objects; 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.
    
         
 		
    Single Tween Object
    
-		
    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.
    
+		
    As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, 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.
    
         
    .to() 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 .fromTo() method as it has to compute the default/current value on tween .start() 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 .start() method for the solution for sync/delay issue.
    
 		
    Considering a given div element is already transparent, a super quick example would be:
    
 
    KUTE.to(div,{opacity:1}).start()
    
-		
+		
    As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.
    
         
    .fromTo() 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 .to() 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 features page. Here's a quick example:
     
 
    KUTE.fromTo(div,{opacity:1},{opacity:0}).start()
    
 
diff --git a/assets/js/kute-bs.js b/assets/js/kute-bs.js
index 0360c50..dd39add 100644
--- a/assets/js/kute-bs.js
+++ b/assets/js/kute-bs.js
@@ -21,18 +21,19 @@
 }(this, function (KUTE) {
   'use strict';
   
-  // filter unsupported browsers
-  if (!('boxShadow' in document.body.style)) {return;}
   // add a reference to KUTE object
-  var g = typeof global !== 'undefined' ? global : window, K = KUTE, getComputedStyle = K.getCurrentStyle,
-    trueColor = K.truC, prepareStart = K.prepareStart, parseProperty = K.parseProperty, DOM = g.dom,
-    unit = g._unit, color = g._color,
+  var g = typeof global !== 'undefined' ? global : window, K = KUTE, 
+    // add a reference to KUTE utilities
+    prepareStart = K.prepareStart, parseProperty = K.parseProperty,
+    property = K.property, getCurrentStyle = K.getCurrentStyle, trueColor = K.truC,
+    DOM = g.dom, unit = g._unit, color = g._color, // interpolation functions
 
     // 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;
-    _boxShadow = K.property('boxShadow'), // note we're using the KUTE.property() autopreffix utility
+    _boxShadow = property('boxShadow'), // note we're using the KUTE.property() autopreffix utility
     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
+    
     // utility function to process values accordingly
     // numbers must be integers and color must be rgb object
     processBoxShadowArray = function(shadow){
@@ -60,11 +61,11 @@
   // for the .to() method, you need to prepareStart the boxShadow property
   // which means you need to read the current computed value
   prepareStart['boxShadow'] = function(element,property,value){
-    var cssBoxShadow = getComputedStyle(element,_boxShadow);
+    var cssBoxShadow = getCurrentStyle(element,_boxShadow);
     return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
   }
 
-  // the processProperty for boxShadow 
+  // the parseProperty 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]
@@ -73,33 +74,33 @@
       
       // the DOM update function for boxShadow registers here
       // we only enqueue it if the boxShadow property is used to tween
-      DOM['boxShadow'] = function(l,p,a,b,v) {
+      DOM['boxShadow'] = function(element,property,startValue,endValue,progress) {
 
         // let's start with the numbers | set unit | also determine inset
         var numbers = [], px = 'px', // the unit is always px
-          inset = a[5] !== 'none' || b[5] !== 'none' ? ' inset' : false; 
+          inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false; 
         for (var i=0; i<4; i++){
-          numbers.push( unit( a[i], b[i], px, v ) );
+          numbers.push( unit( startValue[i], endValue[i], px, progress ) );
         }
 
         // now we handle the color
-        var colorValue = color(a[4],b[4],v);          
+        var colorValue = color(startValue[4], endValue[4], progress);          
         
         // the final piece of the puzzle, the DOM update
-        l.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
+        element.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
       };
     }
     
     // parseProperty for boxShadow, builds basic structure with ready to tween values
     if (typeof value === 'string'){
-      var currentColor, inset = 'none';
+      var shadowColor, 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"
-      currentColor = value.match(colRegEx); 
-      value = value.replace(currentColor[0],'').split(' ').concat([currentColor[0].replace(/\s/g,'')],[inset]);
+      shadowColor = value.match(colRegEx); 
+      value = value.replace(shadowColor[0],'').split(' ').concat([shadowColor[0].replace(/\s/g,'')],[inset]);
       
       value = processBoxShadowArray(value);
     } else if (value instanceof Array){
diff --git a/assets/js/perf.js b/assets/js/perf.js
index 70902d4..021b634 100644
--- a/assets/js/perf.js
+++ b/assets/js/perf.js
@@ -1,16 +1,59 @@
 // testing grounds
 "use strict";
 
+var mobileType = '', check,
+	isMobile = {
+		Windows: function() {
+			check = /IEMobile/i.test(navigator.userAgent);
+			mobileType += check ? 'Windows Phones.' : '';
+			return check;
+		},
+		Android: function() {
+			check = /Android/i.test(navigator.userAgent)
+			mobileType += check ? 'Android Phones.' : '';
+			return check;
+		},
+		BlackBerry: function() {
+			check = /BlackBerry/i.test(navigator.userAgent);
+			mobileType += check ? 'BlackBerry.' : '';
+			return check;
+		},
+		iOS: function() {
+			check = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+			mobileType += check ? 'Apple iPhone, iPad or iPod.' : '';
+			return check;
+		},
+		any: function() {
+			return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
+		}
+	};
+
+// protect older / low end devices
+if (document.body.offsetWidth < 1200 || isMobile.any()) {
+	var explain = '';
+		explain +=	mobileType !== '' ? 'For safety reasons, this page does not work with ' + mobileType : '';
+		explain +=	document.body.offsetWidth < 1200 ? 'For safety reasons this page does not work on your machine because it might be very old. In other cases the browser window size is not enough for the animation to work properly, so if that\'s the case, maximize the window, refresh and proceed with the tests.' : '';
+	var warning = '
    ';
+		warning +='
    Warning!
    ';
+		warning +='
    This web page is only for high-end desktop computers.
    ';
+		warning +='
    We do not take any responsibility and we are not liable for any damage caused through use of this website, be it indirect, special, incidental or consequential damages to your devices.
    ';
+		warning +='
    '+explain+'
    ';
+		warning +='
    ';
+	document.body.innerHTML = warning;
+	throw new Error('This page is only for high-end desktop computers. ' + explain); 
+}
+
 // generate a random number within a given range
 function random(min, max) {
 	return Math.random() * (max - min) + min;
 }
 
-// vendor prefix handle 
-var transformProperty = KUTE.property('transform');
-
 // the variables
-var container = document.getElementById('container'), tws = [];
+var container = document.getElementById('container');
+
+// vendor prefix handle 
+var transformProperty = KUTE.property('transform'), tws = [];
+
 
 function complete(){
 	document.getElementById('info').style.display = 'block';
@@ -38,16 +81,16 @@ function buildObjects(){
 	warning.className = 'text-warning padding lead';
 	container.innerHTML = '';	
 	if (count && engine && property && repeat) {
-				if (engine === 'gsap') {
-						document.getElementById('info').style.display = 'none';
-				}
+		if (engine === 'gsap') {
+				document.getElementById('info').style.display = 'none';
+		}
 		
 		createTest(count,property,engine,repeat);
-				// since our engines don't do sync, we make it our own here
-				if (engine==='tween'||engine==='kute') {
-						document.getElementById('info').style.display = 'none';
-						start();	
-				}
+		// since our engines don't do sync, we make it our own here
+		if (engine==='tween'||engine==='kute') {
+				document.getElementById('info').style.display = 'none';
+				start();	
+		}
 	} else {
 
 		if (!count && !property && !repeat && !engine){
@@ -146,7 +189,7 @@ for (var i=0; i';
-			b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
+			b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id, link.id);
 		}
 	}
 }
diff --git a/extend.html b/extend.html
index 21ba974..f50ab74 100644
--- a/extend.html
+++ b/extend.html
@@ -160,7 +160,7 @@ Tween.prototype.onUpdate = function(){
 }
 
 
    
-        
    For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very secific need.
    
+        
    For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very specific need.
    
         
 		
    Support For Additional CSS Properties
    
 		
    KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and you'll master it real quick, it's very easy.
     
@@ -168,48 +168,50 @@ Tween.prototype.onUpdate = function(){
         
      
             
    • KUTE.prepareStart['propertyName'] required a function to get the current value of the property required for the .to() method;
      • 
             
    • KUTE.parseProperty['propertyName'] required a function to process the user value / current value to have it ready to tween;
      • 
-            
    • KUTE.crossCheck['propertyName'] optional a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;
      • 
             
    • window.dom['propertyName'] required a domUpdate function that will update the property value into the DOM;
      • 
-            
    • optional one or more functions that will work as an utility for your value processing.
      • 
+            
    • KUTE.crossCheck['propertyName'] optional a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;
      • 
+            
    • also optional additional functions that will help with value processing.
      • 
         
    
         
    So let's add support for boxShadow! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template and let's break it down to pieces:
    
 
    // add a reference to global and KUTE object
 var g = typeof global !== 'undefined' ? global : window, K = KUTE, 
     // add a reference to KUTE utilities
-    prepareStart = K.prepareStart, DOM = g.dom, parseProperty = K.parseProperty, trueColor = K.truC,
-    color = g._color, unit = g._unit, getComputedStyle = K.getCurrentStyle;
-
-// filter unsupported browsers
-if (!('boxShadow' in document.body.style)) {return;}
+    prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle, 
+    property = K.property, parseProperty = K.parseProperty, trueColor = K.truC,
+    DOM = g.dom, color = g._color, unit = g._unit; // interpolation functions
 
 // 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 _boxShadow = 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 browsers that don't support the property, use a filter
+// if (!(_boxShadow in document.body.style)) {return;}
 
    
         
    Now we have access to the KUTE object, prototypes and it's utility functions, let's write a prepareStart function that will read the current boxShadow value:
    
 
    // for the .to() method, you need to prepareStart the boxShadow property
 // which means you need to read the current computed value
+// if the current computed value is not acceptable, use a default value
 prepareStart['boxShadow'] = function(element,property,value){
-    var cssBoxShadow = getComputedStyle(element,'boxShadow'); // where K.getCurrentStyle() is an accurate getComputedStyle() core method
-    return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
+    var cssBoxShadow = getCurrentStyle(element,'boxShadow'); // where getCurrentStyle() is an accurate method to read the current property value
+    return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow; // if the current value is not valid, use a default one
 }
 
-// note that in some cases the window.getComputedStyle(element,null) can be more accurate
-// we are using a hybrid function that's trying to get proper colors and other stuff that
-// some legacy browsers lack in this matter
+// note that in some cases the window.getComputedStyle(element,null) can be faster or more appropriate
+// we are using a hybrid function that's trying to get proper colors and other stuff
+// some legacy browsers lack in matters of accuracy so the KUTE.js core methods would suffice
 
 // also to read the current value of an attribute, replace first line of the above function body with this
 // var attrValue = element.getAttribute(property);
-// and return the value or a default value, mostly rgb(0,0,0) for colors or 0 for other types  
+// and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types  
 
     
 
         
    Now we need an utility function that makes sure the structure looks right for the DOM update function.
    
 
    // utility function to process values accordingly
 // numbers must be floats/integers and color must be rgb object
 var processBoxShadowArray = function(shadow){
-  var newShadow, i;
+  var newShadow;
   // properly process the shadow based on amount of values
   if (shadow.length === 3) { // [h-shadow, v-shadow, color]
     newShadow = [shadow[0], shadow[1], 0, 0, shadow[2], 'none'];
@@ -222,7 +224,7 @@ var processBoxShadowArray = function(shadow){
   } 
 
   // make sure the numbers are ready to tween
-  for (i=0;i<4;i++){
+  for (var i=0; i<4; i++){
     newShadow[i] = parseFloat(newShadow[i]);  
   }
   // make sure color is an rgb object
@@ -233,7 +235,7 @@ var processBoxShadowArray = function(shadow){
 
         
    Next we'll need to write a processProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the window.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
    
         
-
    // the processProperty for boxShadow 
+
    // the parseProperty for boxShadow 
 // registers the window.dom['boxShadow'] function 
 // returns an array of 6 values in the following format
 // [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
@@ -241,34 +243,34 @@ parseProperty['boxShadow'] = function(property,value,element){
   // the DOM update function for boxShadow registers here
   // we only enqueue it if the boxShadow property is used to tween
   if ( !('boxShadow' in DOM) ) {
-    DOM['boxShadow'] = function(l,p,a,b,v) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress 
+    DOM['boxShadow'] = function(element,property,startValue,endValue,progress) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress 
 
       // let's start with the numbers | set unit | also determine inset
       var numbers = [], px = 'px', // the unit is always px
-        inset = a[5] !== 'none' || b[5] !== 'none' ? ' inset' : false; 
+        inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false; 
 
       for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers 
-        numbers.push( unit(a[i], b[i], px, v) );
+        numbers.push( unit(startValue[i], endValue[i], px, progress) );
       }
 
       // now we handle the color
-      var colorValue = color(a[4],b[4],v);
+      var colorValue = color(startValue[4],endValue[4],progress);
       
       // last piece of the puzzle, the DOM update
-      l.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
+      element.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
     };
   }
 
   // processProperty for boxShadow, builds basic structure with ready to tween values
   if (typeof value === 'string'){
-    var color, inset = 'none';
+    var shadowColor, 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]);
+    shadowColor = value.match(colRegEx); 
+    value = value.replace(shadowColor[0],'').split(' ').concat([shadowColor[0].replace(/\s/g,'')],[inset]);
     
     // now we can use the above specific utitlity
     value = processBoxShadowArray(value);
diff --git a/performance.html b/performance.html
index 25f1627..54d8391 100644
--- a/performance.html
+++ b/performance.html
@@ -89,13 +89,12 @@
               
  • 700
    • 
               
  • 800
    • 
               
  • 900
    • 
-              
  • 1000
    • 
-              
  • 1500
    • 
-              
  • 2000
    • 
+              
  • 1000
    • 
+              
  • 1500
    • 
+              
  • 2000
    • 
             
         
           
-          
         
    
           
         
    
@@ -106,7 +105,6 @@
 
 
    These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, here's how.
    
 
    Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.
    
-
    Do not try this test on lower end or mobile devices.
    
          
 
 
    
diff --git a/properties.html b/properties.html
index 27ce89a..e04a9a8 100644
--- a/properties.html
+++ b/properties.html
@@ -164,7 +164,7 @@
 		
    The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.
    
 		
    Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.
     
 		
    The plugin handles attribute namespaces properly which means you can use both Javascript notation (like stopColor) and HTML markup notation (like 'stop-color'), see the below example.
    
-		
    EG: KUTE.to('selector', {attr:{stroke:'blue'}}) to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'rgb(135,16,122)'}}) to animate the stop color of some SVG gradient.
    
+		
    EG: KUTE.to('selector', {attr:{stroke:'blue'}}) to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'red'}}) to animate the stop color of some SVG gradient.
    
         
 		
    Typography Properties
    
 		
    The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.
    
@@ -174,7 +174,7 @@
 			
  • letterSpacing allows you to animate the letter-spacing for a given element.
    • 
 			
  • wordSpacing allows you to animate the word-spacing for a given element.
    • 
 		
-		
    Remember: these properties are also layout modifiers.
    
+		
    Remember: these properties are layout modifiers.
    
 
 		
    Scroll Animation
    
 		
    KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than offsetHeight). Both scroll: 150 or scrollTop: 150 notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks.
    		
diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index b493eb2..d6478fe 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.5.98a | © dnp_theme | Attributes Plugin | MIT-License
+// KUTE.js v1.5.99 | © dnp_theme | Attributes Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit),l=r._number,c=r._color,p=function(t,e){return t.getAttribute(e)},d=["fill","stroke","stop-color"],b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e,r){var n={};for(var i in r){var u=b(i).replace(/_+[a-z]+/,""),o=p(t,u);n[u]=d.indexOf(u)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(i)?1:0)}return n},o.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var u={};for(var o in r){var v=b(o),y=p(n,v.replace(/_+[a-z]+/,""));if(d.indexOf(v)===-1)if(null!==y&&/(%|[a-z]+)$/.test(y)){var _=f(y).u||f(r[o]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var u=u||e.replace(g,"");t.setAttribute(u,s(r.v,n.v,n.u,i))}),u[v+g]=f(r[o])}else/(%|[a-z]+)$/.test(r[o])&&null!==y&&(null===y||/(%|[a-z]+)$/.test(y))||(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,l(r,n,i))}),u[v]=parseFloat(r[o]));else v in e||(e[v]=function(t,e,n,i,u){t.setAttribute(e,c(n,i,u,r.keepHex))}),u[v]=a(r[o])}return u},this});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index 15f0b34..929f73e 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.5.98a | © dnp_theme | CSS Plugin | MIT-License
+// KUTE.js v1.5.99 | © dnp_theme | CSS Plugin | MIT-License
 !function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=s.concat(h),y=p.concat(s,h),x=l.concat(b,p,s,h,m),R=x.length,C=C||{},T=0;T1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index a3e5488..2655740 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.5.98a | © dnp_theme | SVG Plugin | MIT-License
+// KUTE.js v1.5.99 | © dnp_theme | SVG Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=e.dom,s=r.parseProperty,a=r.prepareStart,o=r.getCurrentStyle,h=(r.truC,r.truD,r.crossCheck),l=e._number,u=(e._unit,e._color,!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1)),f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",p=e._coords=function(t,e,r,n){for(var i=[],s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},s.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?p:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,m=u.length,b=u[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index b3e2ed4..0f18df6 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.5.98a | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n={},i=t._tweens=[],r=null,s=(function(){for(var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"],e=0,r=n.length;e0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this._vSR={},this._vE=G(i,t),this._vS=r.rpr?n:G(n,t);for(var s in this._vE)s in st&&!r.rpr&&st[s].call(this);this.options={};for(var a in r)this.options[a]=r[a];if(this.options.rpr=r.rpr||!1,void 0!==this.options.perspective&&E in this._vE){var o="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=o}this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=t._tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this._vSR={},this._vE=G(i,t),this._vS=r.rpr?n:G(n,t);for(var s in this._vE)s in st&&!r.rpr&&st[s].call(this);this.options={};for(var a in r)this.options[a]=r[a];if(this.options.rpr=r.rpr||!1,void 0!==this.options.perspective&&E in this._vE){var o="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=o}this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n
Date: Sat, 26 Nov 2016 18:00:23 +0200
Subject: [PATCH 104/187]

---
 assets/js/perf.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/assets/js/perf.js b/assets/js/perf.js
index 021b634..3a9bd99 100644
--- a/assets/js/perf.js
+++ b/assets/js/perf.js
@@ -1,27 +1,27 @@
 // testing grounds
 "use strict";
 
-var mobileType = '', check,
+var mobileType = '',
 	isMobile = {
 		Windows: function() {
-			check = /IEMobile/i.test(navigator.userAgent);
-			mobileType += check ? 'Windows Phones.' : '';
-			return check;
+			var checkW = /IEMobile/i.test(navigator.userAgent);
+			mobileType += checkW ? 'Windows Phones.' : '';
+			return checkW;
 		},
 		Android: function() {
-			check = /Android/i.test(navigator.userAgent)
-			mobileType += check ? 'Android Phones.' : '';
-			return check;
+			var checkA = /Android/i.test(navigator.userAgent)
+			mobileType += checkA ? 'Android Phones.' : '';
+			return checkA;
 		},
 		BlackBerry: function() {
-			check = /BlackBerry/i.test(navigator.userAgent);
-			mobileType += check ? 'BlackBerry.' : '';
-			return check;
+			var checkB = /BlackBerry/i.test(navigator.userAgent);
+			mobileType += checkB ? 'BlackBerry.' : '';
+			return checkB;
 		},
 		iOS: function() {
-			check = /iPhone|iPad|iPod/i.test(navigator.userAgent);
-			mobileType += check ? 'Apple iPhone, iPad or iPod.' : '';
-			return check;
+			checkI = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+			mobileType += checkI ? 'Apple iPhone, iPad or iPod.' : '';
+			return checkI;
 		},
 		any: function() {
 			return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
@@ -32,7 +32,7 @@ var mobileType = '', check,
 if (document.body.offsetWidth < 1200 || isMobile.any()) {
 	var explain = '';
 		explain +=	mobileType !== '' ? 'For safety reasons, this page does not work with ' + mobileType : '';
-		explain +=	document.body.offsetWidth < 1200 ? 'For safety reasons this page does not work on your machine because it might be very old. In other cases the browser window size is not enough for the animation to work properly, so if that\'s the case, maximize the window, refresh and proceed with the tests.' : '';
+		explain +=	document.body.offsetWidth < 1200 && mobileType === '' ? 'For safety reasons this page does not work on your machine because it might be very old. In other cases the browser window size is not enough for the animation to work properly, so if that\'s the case, maximize the window, refresh and proceed with the tests.' : '';
 	var warning = '
    ';
 		warning +='
    Warning!
    ';
 		warning +='
    This web page is only for high-end desktop computers.
    ';

From 93ab1779a8551c8b3377595af645ce72c763fd7b Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 18:15:00 +0200
Subject: [PATCH 105/187]

---
 src/kute-svg.min.js | 2 +-
 src/kute.min.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index 2655740..ae50506 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.99 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=e.dom,s=r.parseProperty,a=r.prepareStart,o=r.getCurrentStyle,h=(r.truC,r.truD,r.crossCheck),l=e._number,u=(e._unit,e._color,!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1)),f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",p=e._coords=function(t,e,r,n){for(var i=[],s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=t._tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this._vSR={},this._vE=G(i,t),this._vS=r.rpr?n:G(n,t);for(var s in this._vE)s in st&&!r.rpr&&st[s].call(this);this.options={};for(var a in r)this.options[a]=r[a];if(this.options.rpr=r.rpr||!1,void 0!==this.options.perspective&&E in this._vE){var o="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=o}this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=t._tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in r)this.options[s]=r[s];if(this.options.rpr=r.rpr||!1,void 0!==this.options.perspective&&E in this._vE){var a="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=a}this._vSR={},this._vE=G(i,t),this._vS=r.rpr?n:G(n,t);for(var o in this._vE)o in st&&!r.rpr&&st[o].call(this);this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n
Date: Sat, 26 Nov 2016 18:22:38 +0200
Subject: [PATCH 106/187]

---
 assets/js/perf.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/js/perf.js b/assets/js/perf.js
index 3a9bd99..c3a706b 100644
--- a/assets/js/perf.js
+++ b/assets/js/perf.js
@@ -8,6 +8,11 @@ var mobileType = '',
 			mobileType += checkW ? 'Windows Phones.' : '';
 			return checkW;
 		},
+		// Chrome: function() {
+		// 	var checkC = /Chrome/i.test(navigator.userAgent)
+		// 	mobileType += checkC ? 'Chrome browser.' : '';
+		// 	return checkC;
+		// },
 		Android: function() {
 			var checkA = /Android/i.test(navigator.userAgent)
 			mobileType += checkA ? 'Android Phones.' : '';
@@ -19,12 +24,12 @@ var mobileType = '',
 			return checkB;
 		},
 		iOS: function() {
-			checkI = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+			var checkI = /iPhone|iPad|iPod/i.test(navigator.userAgent);
 			mobileType += checkI ? 'Apple iPhone, iPad or iPod.' : '';
 			return checkI;
 		},
 		any: function() {
-			return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
+			return (/*isMobile.Chrome() ||*/ isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 		}
 	};
 

From 8d70c4a6c7acace25679bdccf218019b9f761a9b Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 18:24:30 +0200
Subject: [PATCH 107/187]

---
 assets/js/perf.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/assets/js/perf.js b/assets/js/perf.js
index c3a706b..51e88de 100644
--- a/assets/js/perf.js
+++ b/assets/js/perf.js
@@ -8,13 +8,8 @@ var mobileType = '',
 			mobileType += checkW ? 'Windows Phones.' : '';
 			return checkW;
 		},
-		// Chrome: function() {
-		// 	var checkC = /Chrome/i.test(navigator.userAgent)
-		// 	mobileType += checkC ? 'Chrome browser.' : '';
-		// 	return checkC;
-		// },
 		Android: function() {
-			var checkA = /Android/i.test(navigator.userAgent)
+			var checkA = /Android/i.test(navigator.userAgent);
 			mobileType += checkA ? 'Android Phones.' : '';
 			return checkA;
 		},
@@ -29,7 +24,7 @@ var mobileType = '',
 			return checkI;
 		},
 		any: function() {
-			return (/*isMobile.Chrome() ||*/ isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
+			return ( isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 		}
 	};
 

From 6db0e4b92de2b80680dfc9fd877288449ea99692 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 18:31:59 +0200
Subject: [PATCH 108/187]

---
 src/kute.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute.min.js b/src/kute.min.js
index e3d4e80..0467aba 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.99 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n={},i=t._tweens=[],r=null,s=(function(){for(var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"],e=0,r=n.length;e0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=t._tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in r)this.options[s]=r[s];if(this.options.rpr=r.rpr||!1,void 0!==this.options.perspective&&E in this._vE){var a="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=a}this._vSR={},this._vE=G(i,t),this._vS=r.rpr?n:G(n,t);for(var o in this._vE)o in st&&!r.rpr&&st[o].call(this);this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=t._tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in r)this.options[s]=r[s];if(this.options.rpr=r.rpr||!1,this._vSR={},this._vE=G(i,t),this._vS=r.rpr?n:G(n,t),void 0!==this.options.perspective&&E in this._vE){var a="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=a}for(var o in this._vE)o in st&&!r.rpr&&st[o].call(this);this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n
Date: Sat, 26 Nov 2016 18:56:23 +0200
Subject: [PATCH 109/187]

---
 assets/js/perf.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/assets/js/perf.js b/assets/js/perf.js
index 51e88de..8bd55e3 100644
--- a/assets/js/perf.js
+++ b/assets/js/perf.js
@@ -8,6 +8,11 @@ var mobileType = '',
 			mobileType += checkW ? 'Windows Phones.' : '';
 			return checkW;
 		},
+		Chrome: function() {
+			var checkC = /Chrome/i.test(navigator.userAgent);
+			// mobileType += checkC ? 'Android Phones.' : '';
+			return checkC;
+		},
 		Android: function() {
 			var checkA = /Android/i.test(navigator.userAgent);
 			mobileType += checkA ? 'Android Phones.' : '';
@@ -26,13 +31,14 @@ var mobileType = '',
 		any: function() {
 			return ( isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 		}
-	};
+	},
+	checkMOBS = isMobile.any();
 
 // protect older / low end devices
-if (document.body.offsetWidth < 1200 || isMobile.any()) {
+if (document.body.offsetWidth < 1200 || checkMOBS) {
 	var explain = '';
-		explain +=	mobileType !== '' ? 'For safety reasons, this page does not work with ' + mobileType : '';
-		explain +=	document.body.offsetWidth < 1200 && mobileType === '' ? 'For safety reasons this page does not work on your machine because it might be very old. In other cases the browser window size is not enough for the animation to work properly, so if that\'s the case, maximize the window, refresh and proceed with the tests.' : '';
+		explain += checkMOBS && mobileType !== '' ? ('For safety reasons, this page does not work with ' + mobileType) : '';
+		explain += !checkMOBS && document.body.offsetWidth < 1200 && mobileType === '' ? 'For safety reasons this page does not work on your machine because it might be very old. In other cases the browser window size is not enough for the animation to work properly, so if that\'s the case, maximize the window, refresh and proceed with the tests.' : '';
 	var warning = '
    ';
 		warning +='
    Warning!
    ';
 		warning +='
    This web page is only for high-end desktop computers.
    ';
@@ -40,6 +46,7 @@ if (document.body.offsetWidth < 1200 || isMobile.any()) {
 		warning +='
    '+explain+'
    ';
 		warning +='
    ';
 	document.body.innerHTML = warning;
+	isMobile.Android() && alert(isMobile.Android());
 	throw new Error('This page is only for high-end desktop computers. ' + explain); 
 }
 

From f07f783731551361d4c6c384084d09527866bcaf Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 19:00:32 +0200
Subject: [PATCH 110/187]

---
 assets/js/perf.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/js/perf.js b/assets/js/perf.js
index 8bd55e3..8a24f30 100644
--- a/assets/js/perf.js
+++ b/assets/js/perf.js
@@ -46,7 +46,6 @@ if (document.body.offsetWidth < 1200 || checkMOBS) {
 		warning +='
    '+explain+'
    ';
 		warning +='
    ';
 	document.body.innerHTML = warning;
-	isMobile.Android() && alert(isMobile.Android());
 	throw new Error('This page is only for high-end desktop computers. ' + explain); 
 }
 

From 1cf5f87f82eb0a31a854e7dd4c642e5851945916 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 28 Nov 2016 03:07:16 +0200
Subject: [PATCH 111/187] Testing new build.

---
 assets/js/perf.js    | 11 +++--------
 src/kute-attr.min.js |  2 +-
 src/kute-css.min.js  |  2 +-
 src/kute-svg.min.js  |  2 +-
 src/kute-text.min.js |  2 +-
 src/kute.min.js      |  2 +-
 6 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/assets/js/perf.js b/assets/js/perf.js
index 8a24f30..f0c056b 100644
--- a/assets/js/perf.js
+++ b/assets/js/perf.js
@@ -8,11 +8,6 @@ var mobileType = '',
 			mobileType += checkW ? 'Windows Phones.' : '';
 			return checkW;
 		},
-		Chrome: function() {
-			var checkC = /Chrome/i.test(navigator.userAgent);
-			// mobileType += checkC ? 'Android Phones.' : '';
-			return checkC;
-		},
 		Android: function() {
 			var checkA = /Android/i.test(navigator.userAgent);
 			mobileType += checkA ? 'Android Phones.' : '';
@@ -34,7 +29,7 @@ var mobileType = '',
 	},
 	checkMOBS = isMobile.any();
 
-// protect older / low end devices
+// protect phones, older / low end devices
 if (document.body.offsetWidth < 1200 || checkMOBS) {
 	var explain = '';
 		explain += checkMOBS && mobileType !== '' ? ('For safety reasons, this page does not work with ' + mobileType) : '';
@@ -68,11 +63,11 @@ function complete(){
 }
 
 function updateLeft(){
-		this.div.style['left'] = this.left+'px';
+		this.div.style['left'] = parseInt(this.left)+'px';
 }					
 
 function updateTranslate(){
-		this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
+		this.div.style[transformProperty] = 'translate3d('+ Math.round(this.x * 100) / 100 + 'px,0px,0px)';
 }
 
 function buildObjects(){
diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index d6478fe..efdd765 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.99 | © dnp_theme | Attributes Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit),l=r._number,c=r._color,p=function(t,e){return t.getAttribute(e)},d=["fill","stroke","stop-color"],b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e,r){var n={};for(var i in r){var u=b(i).replace(/_+[a-z]+/,""),o=p(t,u);n[u]=d.indexOf(u)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(i)?1:0)}return n},o.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var u={};for(var o in r){var v=b(o),y=p(n,v.replace(/_+[a-z]+/,""));if(d.indexOf(v)===-1)if(null!==y&&/(%|[a-z]+)$/.test(y)){var _=f(y).u||f(r[o]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var u=u||e.replace(g,"");t.setAttribute(u,s(r.v,n.v,n.u,i))}),u[v+g]=f(r[o])}else/(%|[a-z]+)$/.test(r[o])&&null!==y&&(null===y||/(%|[a-z]+)$/.test(y))||(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,l(r,n,i))}),u[v]=parseFloat(r[o]));else v in e||(e[v]=function(t,e,n,i,u){t.setAttribute(e,c(n,i,u,r.keepHex))}),u[v]=a(r[o])}return u},this});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit,r._number),l=r._color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e,r){var n={};for(var i in r){var o=v(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=p.indexOf(o)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var b=v(u),d=c(n,b.replace(/_+[a-z]+/,""));if(p.indexOf(b)===-1)if(null!==d&&/(%|[a-z]+)$/.test(d)){var h=f(d).u||f(r[u]).u,y=/%/.test(h)?"_percent":"_"+h;b+y in e||(/%/.test(h)?e[b+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,Math.floor(100*s(r.v,n.v,i))/100+n.u)}:e[b+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,Math.floor(s(r.v,n.v,i))+n.u)}),o[b+y]=f(r[u])}else/(%|[a-z]+)$/.test(r[u])&&null!==d&&(null===d||/(%|[a-z]+)$/.test(d))||(b in e||(/opacity/i.test(u)?e[b]=function(t,e,r,n,i){t.setAttribute(e,Math.floor(100*s(r,n,i))/100)}:e[b]=function(t,e,r,n,i){t.setAttribute(e,Math.floor(10*s(r,n,i))/10)}),o[b]=parseFloat(r[u]));else b in e||(e[b]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),o[b]=a(r[u])}return o},this});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index 929f73e..ff05892 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.99 | © dnp_theme | CSS Plugin | MIT-License
-!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=s.concat(h),y=p.concat(s,h),x=l.concat(b,p,s,h,m),R=x.length,C=C||{},T=0;T1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},s.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?p:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,m=u.length,b=u[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=e.dom,i=n.prepareStart,u=n.parseProperty,s=e._number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},u.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,u){var s=s||"alpha"===u.textChars?o:"upper"===u.textChars?a:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?l:u.textChars?u.textChars.split(""):o,m=s.length,b=s[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},u.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=c(s(n,r,i))}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index 0467aba..b0bbaec 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.5.99 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n={},i=t._tweens=[],r=null,s=(function(){for(var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],i=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"],e=0,r=n.length;e0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||m()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(w,p,!1),document.removeEventListener(b,p,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(w,p,!1),document.addEventListener(b,p,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},rt={},st={},at=function(){var e={},n=v(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(A.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||B[s];else if(a)e[s]=n[s]||B[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];A.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||B[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&k){var h=d(this._el,"filter");e.opacity="number"==typeof h?h:B.opacity}else F.indexOf(s)!==-1?e[s]=d(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===T?t.pageYOffset||T.scrollTop:this._el.scrollTop;for(var s in n)A.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||B[s]);if(this._vS={},this._vS=G(e,this._el),E in this._vE)for(var p in this._vS[E])if("perspective"!==p)if("object"==typeof this._vS[E][p])for(var f in this._vS[E][p])"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]={}),"number"==typeof this._vS[E][p][f]&&"undefined"==typeof this._vE[E][p][f]&&(this._vE[E][p][f]=this._vS[E][p][f]);else"number"==typeof this._vS[E][p]&&"undefined"==typeof this._vE[E][p]&&(this._vE[E][p]=this._vS[E][p])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=t._start=function(t){nt.call(this),this.options.rpr&&at.apply(this),K.apply(this);for(var n in this._vE)n in st&&this.options.rpr&&st[n].call(this),this._vSR[n]=this._vS[n];return g(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&N(),this},lt=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,g(this),!r&&N()),this},ht=t._tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?T:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in r)this.options[s]=r[s];if(this.options.rpr=r.rpr||!1,this._vSR={},this._vE=G(i,t),this._vS=r.rpr?n:G(n,t),void 0!==this.options.perspective&&E in this._vE){var a="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[E].perspective=a}for(var o in this._vE)o in st&&!r.rpr&&st[o].call(this);this.options.chain=[],this.options.easing=r.easing&&"function"==typeof it(r.easing)?it(r.easing):ot.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ut,this.play=lt,this.resume=lt,this.pause=function(){return!this.paused&&this.playing&&(y(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(y(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ct(t[r],e,i[r]))},ft=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(vt(t[s],e,n,r[s]))},ct=(pt.prototype=ft.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,G.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),V.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(G.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||x()},48)},V=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(k,w,!1),document.removeEventListener(Y,w,!1),document.body.removeAttribute("data-tweening"))},tt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(k,w,!1),document.addEventListener(Y,w,!1),document.body.setAttribute("data-tweening","scroll"))},et=function(t){return"function"==typeof t?t:"string"==typeof t?st[t]:void 0},nt={},it={},rt=function(){var e={},n=O(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(a.indexOf(s)!==-1){var u=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||f[s];else if(u)e[s]=n[s]||f[s];else if(!u&&/rotate|skew/.test(s))for(var h=0;h<2;h++)for(var p=0;p<3;p++){var c=i[h]+r[p];a.indexOf(c)!==-1&&c in this._vS&&(e[c]=n[c]||f[c])}}else if(o.indexOf(s)===-1)if("opacity"===s&&$){var v=I(this._el,"filter");e.opacity="number"==typeof v?v:f.opacity}else l.indexOf(s)!==-1?e[s]=I(this._el,s)||h[s]:e[s]=s in nt?nt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===B?t.pageYOffset||B.scrollTop:this._el.scrollTop;for(var s in n)a.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||f[s]);if(this._vS={},this._vS=U(e,this._el),C in this._vE)for(var d in this._vS[C])if("perspective"!==d)if("object"==typeof this._vS[C][d])for(var g in this._vS[C][d])"undefined"==typeof this._vE[C][d]&&(this._vE[C][d]={}),"number"==typeof this._vS[C][d][g]&&"undefined"==typeof this._vE[C][d][g]&&(this._vE[C][d][g]=this._vS[C][d][g]);else"number"==typeof this._vS[C][d]&&"undefined"==typeof this._vE[C][d]&&(this._vE[C][d]=this._vS[C][d])},st=t.Easing={};st.linear=function(t){return t},st.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},st.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},st.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},st.easingQuadraticIn=function(t){return t*t},st.easingQuadraticOut=function(t){return t*(2-t)},st.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},st.easingCubicIn=function(t){return t*t*t},st.easingCubicOut=function(t){return--t*t*t+1},st.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},st.easingQuarticIn=function(t){return t*t*t*t},st.easingQuarticOut=function(t){return 1- --t*t*t*t},st.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},st.easingQuinticIn=function(t){return t*t*t*t*t},st.easingQuinticOut=function(t){return 1+--t*t*t*t*t},st.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},st.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},st.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},st.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},st.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},st.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},st.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},st.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},st.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},st.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},st.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},st.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},st.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},st.easingBounceIn=function(t){return 1-st.easingBounceOut(1-t)},st.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},st.easingBounceInOut=function(t){return t<.5?.5*st.easingBounceIn(2*t):.5*st.easingBounceOut(2*t-1)+.5};var at=t._start=function(t){tt.call(this),this.options.rpr&&rt.apply(this),N.apply(this);for(var n in this._vE)n in it&&this.options.rpr&&it[n].call(this),this._vSR[n]=this._vS[n];return E(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&D(),this},ot=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,E(this),!i&&D()),this},ut=t._Tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?B:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in r)this.options[s]=r[s];if(this.options.rpr=r.rpr||!1,this._vSR={},this._vE=U(i,t),this._vS=r.rpr?n:U(n,t),void 0!==this.options.perspective&&C in this._vE){var a="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[C].perspective=a}for(var o in this._vE)o in it&&!r.rpr&&it[o].call(this);this.options.chain=[],this.options.easing=r.easing&&"function"==typeof et(r.easing)?et(r.easing):st.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=at,this.play=ot,this.resume=ot,this.pause=function(){return!this.paused&&this.playing&&(T(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(T(this),this.playing=!1,this.paused=!1,V.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),J.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ft(t[r],e,i[r]))},ht=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(pt(t[s],e,n,r[s]))},ft=(lt.prototype=ht.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n
Date: Wed, 30 Nov 2016 18:12:11 +0200
Subject: [PATCH 112/187] Changes: * Now all parseProperty functions and
 prepareStart functions are bound to `this`, the tween object * changed the
 Tween constructor for lighter size * rewritten alot of code for readability *
 Documentation updates

---
 about.html            |  7 +++--
 api.html              | 64 +++++++++++++++++++++----------------------
 assets/css/kute.css   | 16 +++++++----
 assets/js/css.js      | 52 +++++++++++------------------------
 assets/js/examples.js |  5 ++--
 assets/js/kute-bs.js  |  6 ++--
 assets/js/perf.js     | 13 ++++-----
 attr.html             |  2 +-
 css.html              |  8 ++----
 easing.html           |  2 +-
 examples.html         | 19 +++++++++----
 extend.html           | 36 ++++++++++++------------
 features.html         |  2 +-
 index.html            |  4 +--
 options.html          |  2 +-
 performance.html      |  4 +--
 properties.html       |  8 +++---
 src/kute-attr.min.js  |  2 +-
 src/kute-css.min.js   |  2 +-
 src/kute-svg.min.js   |  2 +-
 src/kute-text.min.js  |  2 +-
 src/kute.min.js       |  2 +-
 start.html            |  2 +-
 svg.html              |  2 +-
 text.html             |  2 +-
 25 files changed, 130 insertions(+), 136 deletions(-)

diff --git a/about.html b/about.html
index 05ce291..5f31d10 100644
--- a/about.html
+++ b/about.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
@@ -98,8 +98,9 @@
         
    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: if (window.clientWidth > 760) { myTween.start() }. 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.
    
         
 		
    Translate and Position
    
-		
    While the code execution is the fastest for the layout modifiers or what we call box-model, say the position based properties set such as left or top, 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 translate 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 translate is part of transform CSS3 property that has to stack in a single line many more properties such as rotate, skew and scale. An article by Paul Irish explains more about differences in performance between position and translation.
    
-		
+		
    While the code execution is the fastest for the layout modifiers or what we call box-model, say the position based properties set such as left or top, they may force the entire page layout to change if not absolutelly positioned and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side translate doesn't trigger a repaint but involves more complex operations such as more object traversing, string concatenation or check for certain conditions to be met. All of this is because translate is part of transform CSS3 property that has to stack in a single line many more properties such as rotate, skew and scale. An article by Paul Irish explains more about differences in performance between position and translation.
    
+		
    Also any transform property is sub-pixel enabled and requires one or more decimals for accurate and smooth animation, decreasing overall performance. That said and with the emerging high resolution displays, it's safe to speculate that at least translation could be optimized by rounding the values, while scale, rotation and skew requires three decimals.
    
+
 		
    To put it short left executes faster but requires repaint on every frame while translateX or translate3d execute slower but require no repaint on each animation frame. The winner is left, 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 overall winner is translate. 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.
    
 		
 		
    Translate, TranslateX and Translate3D
    
diff --git a/api.html b/api.html
index b9c5cb2..aa3915a 100644
--- a/api.html
+++ b/api.html
@@ -8,43 +8,43 @@
 
     
     
-    
+    
     
     
     
      
 
     KUTE.js Developer API | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
 	
     
-		
+
 	
-		
+	
 
     
     
-    
-	
 	
-	
+
 
 
 
   
    
-  
+
   
    
- 
+
 	
    
       
    
 		
    KUTE.js
    
@@ -53,7 +53,7 @@
                             
+                
             
 			
  • 
                 Examples 
@@ -64,7 +64,7 @@
                     
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
-            			
+            
 			
  • 
                 API 
                 
      
@@ -84,7 +84,7 @@
 	
      
 		
      Public Methods
      
 		
      These methods allow you to create tween objects and collections of tween objects; 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.
      
-        
+
 		
      Single Tween Object
      
 		
      As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, 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.
      
         
      .to() 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.
@@ -92,13 +92,13 @@
 		
      Considering a given div element is already transparent, a super quick example would be:
      
 
      KUTE.to(div,{opacity:1}).start()
      
 		
      As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.
      
-        
      .fromTo() 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 .to() 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 features page. Here's a quick example:
       
+        
      .fromTo() 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 .to() 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 features page. Here's a quick example:
      
 
      KUTE.fromTo(div,{opacity:1},{opacity:0}).start()
      
 
 		
      Tween Object Collections
      
-        
      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.
      	
+        
      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.
      
 		
      .allTo() method allows you to create an array of tween objects for a collection of elements. This method is using the above .to() method and inherits it's functionality. Considering a given collection myDivs elements, a nice example would be:
      
-
      // on the fly, grab the elements by className, 
+
      // 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();
 
@@ -107,7 +107,7 @@ var myDivs          = document.querySelectorAll('.my-div-class');
 var myDivsTweens    = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 500} );
 
      
 
-		
      .allFromTo() method is also a method to animate a collection of elements and it uses the .fromTo() method. Quick example:
       
+		
      .allFromTo() method is also a method to animate a collection of elements and it uses the .fromTo() method. Quick example:
      
 
      KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()
      
 
         
      As you can see the above code, these methods have a specific tween option called offset 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 .chain() method. In order to chain another tween to one of the myDivsTweens objects, we would need to access it from the array, but let's leave that for later.
      
@@ -118,7 +118,7 @@ var myDivsTweens    = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 5
 		
      These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:
      
 
      var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});
      
 		
      This tween object is now ready to work with the methods.
      
-		
+
 		
      Starting Animations
      
 		
      .start() 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 .allTo() and .allFromTo() methods.
      
 
      //cached object defined above
@@ -135,7 +135,7 @@ KUTE.allFromTo(divs,{opacity:1},{opacity:0}).start();
 KUTE.allTo(divs,{opacity:0}).start();
 
      
 
-		
      As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue). 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 eliminates any syncronization issue that may occur on animations start, even if you are using the .to() method. The trick is super duper simple:
       
+		
      As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue). 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 eliminates any syncronization issue that may occur on animations start, even if you are using the .to() method. The trick is super duper simple:
      
 
 
      // step 1 - create an empty array and grab the elements to animate
 var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
@@ -151,7 +151,7 @@ for (var i = 0; i < numberOfElements; i++) {
 // 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 
+// 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
@@ -161,9 +161,9 @@ for (var i = 0; i < numberOfElements; i++) {
 	tweens[i].start(now+lag);
 }
 
      
-		
+
 		
      In other cases the new methods .allTo() and .allFromTo() can be more useful.
      
-		
+
 		
      Stopping Animation
      
 		
      .stop() method stops animation for a given tween object or an array of tween objects (built with .to()/.fromTo() 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 click action:
      
 
      // for a tween object
@@ -171,21 +171,21 @@ stopButton.addEventListener('click', function(){
 	myTween.stop(); // myMultiTweens.stop();
 }, false);
 
      
-		
+
 		
      Pausing Animation
      
 		
      .pause() method freezez the animation at any given time for a given tween object or collection, and unlike the .stop() method, this one allows resuming the animation on a later use of the next method .play().
      
 
      pauseButton.addEventListener('click', function(){
 	tween.pause(); // or myMultiTweens.pause();
 }, false);
 
      
-		
+
 		
      Resuming Paused Animation
      
-		
      .play() or .resume() 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.
      		
+		
      .play() or .resume() 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.
      
 
      playButton.addEventListener('click', function(){
 	tween.play(); // or tween.resume(); || or myMultiTweens.resume();
 }, false);
 
      
-		
+
 		
      Chaining Tweens
      
 		
      .chain() method can be used to chain tweens together. When the animation finishes for a given tween, it triggers the animation start for another tween.
      
 
      var tween2 = KUTE.fromTo(div,{left:50},{left:0});
@@ -221,7 +221,7 @@ tween2.chain(tweensCollection2.tweens);
 
      
 	
      
 
-	
      		
+	
      
 
     
-		
+
 	
      
-	  
+
       
      
      
 		
      
@@ -241,15 +241,15 @@ tween2.chain(tweensCollection2.tweens);
     
      
 
  
      
- 
+
 
 
 
-	
+
 
 
-	
+
 
 
 
diff --git a/assets/css/kute.css b/assets/css/kute.css
index 8166ab9..e931b87 100644
--- a/assets/css/kute.css
+++ b/assets/css/kute.css
@@ -19,6 +19,10 @@ body > .fill {
 	position: fixed; top: 0; left:0; right: 0; bottom:0; 
 }
 
+/* the body and it's children can be irresponsive on scroll animations as well */
+body[data-tweening="scroll"],
+body[data-tweening="scroll"] * { pointer-events: none !important; }
+
 .fill { 
 	background-size: cover;
 	background-position: 50% 50%;
@@ -112,22 +116,24 @@ svg.example-box { width: auto; height: auto; }*/
 .example-buttons {position: absolute; top: 18px; right:0}
 
 /* text properties example */
+:not(.ie8) .btn.example-item {opacity: 0}
 h1.example-item {
     font-size: 50px;
     line-height:50px;
     color: #333;
+		opacity: 0;
 }
 
 h1.example-item span {
     line-height: inherit; 
-    opacity: 0; display: inline;
+    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}
+.ie8 h1.example-item,
+.ie8 .btn.example-item {filter: alpha(opacity=0); }
+.ie8 .btn.example-item {display: block; padding:0; text-align: center; }
+
 
 /* UTILITY STYLES
 -------------------------------------------------- */
diff --git a/assets/js/css.js b/assets/js/css.js
index fa92998..ec680a9 100644
--- a/assets/js/css.js
+++ b/assets/js/css.js
@@ -59,48 +59,28 @@ var textProperties = document.getElementById('textProperties'),
 	chars = heading.innerHTML.split('');
 
 // wrap the splits into spans and build an object with these spans 
-heading.innerHTML = '' + chars.join('') + '';
+heading.innerHTML = '' + chars.join('') + '';
 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}),
-    tps = [];
+var buttonTween = KUTE.fromTo(button, 
+		{width: 150, opacity:0, height: 70, lineHeight:70, fontSize: 40}, 
+		{width: 100, opacity:1, height: 35, lineHeight:35, fontSize: 20}),
+	headingTween = KUTE.fromTo(heading, {opacity:0}, {opacity:1}),
+	tps = KUTE.allFromTo(charsObject, 
+        { height: 50, fontSize:80, letterSpacing: 20}, 
+        { height: 35, fontSize:50, letterSpacing: 0}, 
+        { offset: 250, duration: 500, easing: 'easingCubicOut'});
 
-for (var i=0; i
     
     
-    
+    
     
     
     
diff --git a/css.html b/css.html
index e155f9b..e89d255 100644
--- a/css.html
+++ b/css.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
@@ -141,11 +141,9 @@ var tween3 = KUTE.to('selector1',{wordSpacing:50});
 			
      Howdy!
      
 			Button
 				
-			
      
-				Start	
-			
      
+			
      Start
      
 		
    • 
-		
    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 here.
    
+		
    TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check assets/css/css.css file for more. This example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example here.
    
 
 		
    Color Properties
    
 		
    The next example is about animating all border color properties, since the core engine already supports text color and backgroundColor properties. So check these lines for reference.
    
diff --git a/easing.html b/easing.html
index 74cb6ca..f5e16b5 100644
--- a/easing.html
+++ b/easing.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
diff --git a/examples.html b/examples.html
index d3eb134..967a9bc 100644
--- a/examples.html
+++ b/examples.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
@@ -280,6 +280,11 @@ KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only
 		
    Another property we can animate with KUTE.js is scrollTop. I works for both the window and any scrollable object. Quick example:
    
 
    KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
 KUTE.to('window',{scroll:450}).start(); // for the window
+
    
+		
    The scroll animation could however be influenced by mouse hover effects, usually creating some really nasty bottlenecks, but you can always add some CSS to your page to prevent that:
    
+
    /* prevent scroll bottlenecks */
+body[data-tweening="scroll"],
+body[data-tweening="scroll"] * { pointer-events: none !important; }
 
    
 		
    A working example would work like this. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.
    
 		
@@ -308,15 +313,18 @@ 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';
+startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';
 
 // 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;
+	// for IE we override color values
+	startValues.backgroundColor = '#CDDC39'; 
+	endValues.backgroundColor = '#ec1e71';
+	// IE8 also doesn't support RGBA, we set to animate the opacity of the element
+	startValues.opacity = 1;
+	endValues.opacity = 0.2;
 } else if (isIE9) { // or any other browser that only support 2d transforms
 	startValues.translate = 0; // 2d translate on X axis
 	endValues.translate = 250;
@@ -383,6 +391,7 @@ playPauseButton.addEventListener('click', function(e){
 			
    
 		
    
 		
    Let's explain this code a bit. KUTE.js gives you the internal variables myTween.playing and myTween.paused (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.
    
+		
    Also please know that opacity animation only works on Internet Explorer 8 if the target element uses float: left/right, display: block or display: inline-block.
    
 		
      
 			
    • the START button will use the .start() method and the animation starts;
      • 
 			
    • the STOP button will use the .stop() method and stops the animation; after this the, animation can only be started again
      • 
diff --git a/extend.html b/extend.html
index f50ab74..4647cb4 100644
--- a/extend.html
+++ b/extend.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
@@ -129,11 +129,11 @@ Tween.prototype.timescale = function(factor){
 
 // or let's add a reverse method
 Tween.prototype.reverse = function(){
-    for (var p in this._vE) {
-        var tmp = this._vSR[p];         // we cache this object first
-        this._vSR[p] = this._vE[p];     // this._vSR is the internal valuesStartRepeat object
-        this._vE[p] = tmp;              // this._vE is the internal valuesEnd object
-        this._vS[p] = this._vSR[p];     // this._vSR is the internal valuesStart object
+    for (var p in this.valuesEnd) {
+        var tmp = this.valuesRepeat[p]; // we cache this object first
+        this.valuesRepeat[p] = this.valuesEnd[p];
+        this.valuesEnd[p] = tmp;
+        this.valuesStart[p] = this.valuesRepeat[p];
     }
     return this;
 }
@@ -168,7 +168,7 @@ Tween.prototype.onUpdate = function(){
         
        
             
      • KUTE.prepareStart['propertyName'] required a function to get the current value of the property required for the .to() method;
        • 
             
      • KUTE.parseProperty['propertyName'] required a function to process the user value / current value to have it ready to tween;
        • 
-            
      • window.dom['propertyName'] required a domUpdate function that will update the property value into the DOM;
        • 
+            
      • KUTE.dom['propertyName'] required a domUpdate function that will update the property value into the DOM;
        • 
             
      • KUTE.crossCheck['propertyName'] optional a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;
        • 
             
      • also optional additional functions that will help with value processing.
        • 
         
      
@@ -178,7 +178,7 @@ var g = typeof global !== 'undefined' ? global : window, K = KUTE,
     // add a reference to KUTE utilities
     prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle, 
     property = K.property, parseProperty = K.parseProperty, trueColor = K.truC,
-    DOM = g.dom, color = g._color, unit = g._unit; // interpolation functions
+    DOM = K.dom, color = g.Interpolate.color, unit = g.Interpolate.unit; // interpolation functions
 
 // the preffixed boxShadow property, mostly for legacy browsers
 // maybe the browser is supporting the property with its vendor preffix
@@ -193,19 +193,21 @@ var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}
 
      // for the .to() method, you need to prepareStart the boxShadow property
 // which means you need to read the current computed value
 // if the current computed value is not acceptable, use a default value
-prepareStart['boxShadow'] = function(element,property,value){
-    var cssBoxShadow = getCurrentStyle(element,'boxShadow'); // where getCurrentStyle() is an accurate method to read the current property value
+prepareStart['boxShadow'] = function(property,value){
+    var cssBoxShadow = getCurrentStyle(this.element,'boxShadow'); // where getCurrentStyle() is an accurate method to read the current property value
     return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow; // if the current value is not valid, use a default one
 }
 
-// note that in some cases the window.getComputedStyle(element,null) can be faster or more appropriate
+// note that in some cases the window.getComputedStyle(this.element,null) can be faster or more appropriate
 // we are using a hybrid function that's trying to get proper colors and other stuff
 // some legacy browsers lack in matters of accuracy so the KUTE.js core methods would suffice
 
 // also to read the current value of an attribute, replace first line of the above function body with this
 // var attrValue = element.getAttribute(property);
 // and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types  
-
       
+
    
+
+        
    Since KUTE.js 1.6.0, the tween object is bound to all property parsing utilities, meaning that you have access to this that has the target element, options, start and end values and everything else. This is extremely useful if you want to optimize and/or extend particular properties values, the dom update functions, and even override the property name
    
 
         
    Now we need an utility function that makes sure the structure looks right for the DOM update function.
    
 
    // utility function to process values accordingly
@@ -233,7 +235,7 @@ var processBoxShadowArray = function(shadow){
 };
 
      
 
-        
    Next we'll need to write a processProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the window.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
    
+        
    Next we'll need to write a parseProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the KUTE.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
    
         
 
    // the parseProperty for boxShadow 
 // registers the window.dom['boxShadow'] function 
@@ -312,10 +314,10 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
  • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color, the IE9+ browsers will be able to return the rgb object we need.
    • 
             
  • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
    • 
             
  • KUTE.rth(r,g,b) a function that accepts numeric values for red, blue and green and returns a HEX format #006699 color string.
    • 
-            
  • window._number is most essential interpolation tool when developing plugins for various properties not supported in the core.
    • 
-            
  • window._unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
    • 
-            
  • window._color is a very fast interpolation function for colors, as used in the above example.
    • 
-            
  • window._coords is SVG Plugin only, but you can have a look anytime when you're out of ideas.
    • 
+            
  • Interpolate.number is most essential interpolation tool when developing plugins for various properties not supported in the core.
    • 
+            
  • Interpolate.unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
    • 
+            
  • Interpolate.color is a very fast interpolation function for colors, as used in the above example.
    • 
+            
  • Interpolate.coords is SVG Plugin only, but you can have a look anytime when you're out of ideas.
    •

    Prefix Free

    -

    KUTE.js can detect if the user's browser requires prefix and uses it accordingly for transform and border-radius, and allows you to work with the utilities yourself, hustle free with legacy browsers.

    +

    KUTE.js can detect if the user's browser requires prefix and uses it accordingly mostly for transform, and even allows you to use the utilities yourself in your apps or your own plugins.

    diff --git a/options.html b/options.html index e0579ee..c8e6c6d 100644 --- a/options.html +++ b/options.html @@ -8,7 +8,7 @@ - + diff --git a/performance.html b/performance.html index 54d8391..72985cb 100644 --- a/performance.html +++ b/performance.html @@ -4,7 +4,7 @@ - + @@ -29,7 +29,7 @@ position: absolute; } .box { height: 200px } - #info {position: absolute; top: 0; left: 0; width: 400px;} + #info {position: absolute; top: 0; left: 0; width: 350px;} .padding {padding: 20px} .btn-group { margin-bottom: 15px; } .btn {font-size: 13px; } diff --git a/properties.html b/properties.html index e04a9a8..1348088 100644 --- a/properties.html +++ b/properties.html @@ -8,7 +8,7 @@ - + @@ -137,7 +137,7 @@

    Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize event that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.

    Border Radius

    -

    The CSS Plugin covers all the radius properties while making sure to use the proper vendor prefix if a slightly older browser version is detected.

    +

    The CSS Plugin covers all the radius properties with the exception that shorthand notations are not implemented.

    • borderRadius allows you to animate the border-radius on all corners for a given element.
    • borderTopLeftRadius allows you to animate the border-top-left-radius for a given element.
      • @@ -161,8 +161,8 @@

      Presentation Attributes

      The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.

      -

      The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.

      Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.

      +

      The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.

      The plugin handles attribute namespaces properly which means you can use both Javascript notation (like stopColor) and HTML markup notation (like 'stop-color'), see the below example.

      EG: KUTE.to('selector', {attr:{stroke:'blue'}}) to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'red'}}) to animate the stop color of some SVG gradient.

      @@ -177,7 +177,7 @@

      Remember: these properties are layout modifiers.

      Scroll Animation

      -

      KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than offsetHeight). Both scroll: 150 or scrollTop: 150 notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks.

      +

      KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than offsetHeight). EG: scroll: 150 will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks, but we'll have a look at that later.

      String Properties

        diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js index efdd765..975affc 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.5.99 | © dnp_theme | Attributes Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit,r._number),l=r._color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e,r){var n={};for(var i in r){var o=v(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=p.indexOf(o)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var b=v(u),d=c(n,b.replace(/_+[a-z]+/,""));if(p.indexOf(b)===-1)if(null!==d&&/(%|[a-z]+)$/.test(d)){var h=f(d).u||f(r[u]).u,y=/%/.test(h)?"_percent":"_"+h;b+y in e||(/%/.test(h)?e[b+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,Math.floor(100*s(r.v,n.v,i))/100+n.u)}:e[b+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,Math.floor(s(r.v,n.v,i))+n.u)}),o[b+y]=f(r[u])}else/(%|[a-z]+)$/.test(r[u])&&null!==d&&(null===d||/(%|[a-z]+)$/.test(d))||(b in e||(/opacity/i.test(u)?e[b]=function(t,e,r,n,i){t.setAttribute(e,Math.floor(100*s(r,n,i))/100)}:e[b]=function(t,e,r,n,i){t.setAttribute(e,Math.floor(10*s(r,n,i))/10)}),o[b]=parseFloat(r[u]));else b in e||(e[b]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),o[b]=a(r[u])}return o},this}); \ No newline at end of file +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),o=c(this.element,i);r[i]=p.indexOf(i)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(n)?1:0)}return r},u.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var n={};for(var o in r){var u=v(o),b=/(%|[a-z]+)$/,d=c(this.element,u.replace(/_+[a-z]+/,""));if(p.indexOf(u)===-1)if(null!==d&&b.test(d)){var y=f(d).u||f(r[o]).u,A=/%/.test(y)?"_percent":"_"+y;u+A in e||(/%/.test(y)?e[u+A]=function(t,e,r,n,i){var o=o||e.replace(A,"");t.setAttribute(o,(100*s(r.v,n.v,i)>>0)/100+n.prefix)}:e[u+A]=function(t,e,r,n,i){var o=o||e.replace(A,"");t.setAttribute(o,(s(r.v,n.v,i)>>0)+n.prefix)}),n[u+A]=f(r[o])}else b.test(r[o])&&null!==d&&(null===d||b.test(d))||(u in e||(/opacity/i.test(o)?e[u]=function(t,e,r,n,i){t.setAttribute(e,(100*s(r,n,i)>>0)/100)}:e[u]=function(t,e,r,n,i){t.setAttribute(e,(10*s(r,n,i)>>0)/10)}),n[u]=parseFloat(r[o]));else u in e||(e[u]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),n[u]=a(r[o])}return n},this}); \ No newline at end of file diff --git a/src/kute-css.min.js b/src/kute-css.min.js index ff05892..a9bcc0e 100644 --- a/src/kute-css.min.js +++ b/src/kute-css.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.5.99 | © dnp_theme | CSS Plugin | MIT-License -!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),x=l.concat(b,s,p,h,m),R=x.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this}); \ No newline at end of file diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index 2abdb63..fb4841b 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.5.99 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=e.dom,s=r.parseProperty,a=r.prepareStart,o=r.getCurrentStyle,h=(r.truC,r.truD,r.crossCheck),l=e._number,f=(e._unit,e._color,!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1)),u=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,p="http://www.w3.org/2000/svg",g=e._coords=function(t,e,r,n){for(var i=[],s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s>0)}return s};if(!(u&&u<9)){var c=function(t,e,r){for(var n=[],s=[],a=t.getTotalLength(),i=e.getTotalLength(),o=Math.max(a,i),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0,i=h(r.s,n.s,s)>>0,o=h(r.e,n.e,s)>>0,l=0-i;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(o+l-.5>>0)+"px, "+a+"px"}),I(this.element,e)},a.draw=function(){return I(this.element)};var N=function(t){var e,r,n=t&&/\)/.test(t)?t.split(")"):"none",s={};if(n instanceof Array)for(e=0;e>0)/10:(10*h(r[0],n[0],s)>>0)/10+" "+(10*h(r[1],n[1],s)>>0)/10)+e},L=e.Interpolate.rotateSVG=function(t,e,r,n,s){return t+((10*h(r[0],n[0],s)>>0)/10+" "+n[1]+","+n[2])+e},j=e.Interpolate.scaleSVG=function(t,e,r,n,s){return t+(1e3*h(r,n,s)>>0)/1e3+e},q=e.Interpolate.skewSVG=function(t,e,r,n,s){return t+(10*h(r,n,s)>>0)/10+e};return s.svgTransform=function(t,e){"svgTransform"in n||(n.svgTransform=function(t,e,r,n,s){t.setAttribute("transform",("translate"in r?F("translate(",")",r.translate,n.translate,s):"")+("rotate"in r?L("rotate(",")",r.rotate,n.rotate,s):"")+("scale"in r?j("scale(",")",r.scale,n.scale,s):"")+("skewX"in r?q("skewX(",")",r.skewX,n.skewX,s):"")+("skewY"in r?q("skewY(",")",r.skewY,n.skewY,s):""))});var r,s,a={},o=this.element.getBBox(),l=o.x+o.width/2,h=o.y+o.height/2;for(i in e)"rotate"===i?(r=e[i]instanceof Array?e[i]:/\s/.test(e[i])?[1*e[i].split(" ")[0],1*e[i].split(" ")[1].split(",")[0],1*e[i].split(" ")[1].split(",")[1]]:[1*e[i],l,h],a[i]=r):"translate"===i?(s=e[i]instanceof Array?e[i]:/\,|\s/.test(e[i])?e[i].split(/\,|\s/):[1*e[i],0],a[i]=[1*s[0]||0,1*s[1]||0]):"scale"===i?a[i]=1*e[i]||1:/skew/.test(i)&&(a[i]=1*e[i]||0);return"scale"in a&&(!("translate"in a)&&(a.translate=[0,0]),a.translate[0]+=(1-a.scale)*o.width/2,a.translate[1]+=(1-a.scale)*o.height/2,"rotate"in a&&(a.rotate[1]-="skewX"in a?Math.tan(a.skewX)*o.height:0,a.rotate[2]-="skewY"in a?Math.tan(a.skewY)*o.width:0),a.translate[0]+="skewX"in a?Math.tan(a.skewX)*o.height*2:0,a.translate[1]+="skewY"in a?Math.tan(a.skewY)*o.width*2:0),a},a.svgTransform=function(t,e){var r,n={},s=N(this.element.getAttribute("transform"));for(r in e)n[r]=r in s?s[r]:"scale"===r?1:0;return n},l.svgTransform=function(){var t,e,r,n=this.element.getBBox(),s=N(this.element.getAttribute("transform")),a=n.x+n.width/2,i=n.y+n.height/2;for(r in s)"translate"===r?(e=s[r]instanceof Array?s[r]:/\,|\s/.test(s[r])?s[r].split(/\,|\s/):[1*s[r],0],this.valuesStart.svgTransform[r]=[1*e[0]||0,1*e[1]||0]):"scale"===r?this.valuesStart.svgTransform[r]=1*s[r]||1:"rotate"===r?(t=s[r]instanceof Array?s[r]:/\s/.test(s[r])?[1*s[r].split(" ")[0],1*s[r].split(" ")[1].split(",")[0],1*s[r].split(" ")[1].split(",")[1]]:[1*s[r],a,i],this.valuesStart.svgTransform[r]=t):/skew/.test(r)&&(this.valuesStart.svgTransform[r]=1*s[r]||0);for(var r in this.valuesStart.svgTransform)r in this.valuesEnd.svgTransform||(this.valuesEnd.svgTransform[r]=this.valuesStart.svgTransform[r]),r==="rotate"in this.valuesStart.svgTransform&&"rotate"in this.valuesEnd.svgTransform&&(this.valuesEnd.svgTransform.rotate[1]=this.valuesStart.svgTransform.rotate[1]=a,this.valuesEnd.svgTransform.rotate[2]=this.valuesStart.svgTransform.rotate[2]=i)},this}}); \ No newline at end of file diff --git a/src/kute-text.min.js b/src/kute-text.min.js index fdfa090..82bffe8 100644 --- a/src/kute-text.min.js +++ b/src/kute-text.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.5.99 | © dnp_theme | Text Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=e.dom,i=n.prepareStart,u=n.parseProperty,s=e._number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},u.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,u){var s=s||"alpha"===u.textChars?o:"upper"===u.textChars?a:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?l:u.textChars?u.textChars.split(""):o,m=s.length,b=s[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},u.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=c(s(n,r,i))}),parseInt(e)||0},this}); \ No newline at end of file +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/src/kute.min.js b/src/kute.min.js index b0bbaec..782a3ae 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.5.99 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=t._tweens=[],i=null,r=["color","backgroundColor"],s=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["scrollTop","scroll"],u=["opacity"],l=r.concat(o,u,s,a),h=l.length,f={},p=0;p0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,G.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),V.call(this);for(var r=0,s=this.options.chain.length;r0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(G.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||x()},48)},V=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(k,w,!1),document.removeEventListener(Y,w,!1),document.body.removeAttribute("data-tweening"))},tt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(k,w,!1),document.addEventListener(Y,w,!1),document.body.setAttribute("data-tweening","scroll"))},et=function(t){return"function"==typeof t?t:"string"==typeof t?st[t]:void 0},nt={},it={},rt=function(){var e={},n=O(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(a.indexOf(s)!==-1){var u=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||f[s];else if(u)e[s]=n[s]||f[s];else if(!u&&/rotate|skew/.test(s))for(var h=0;h<2;h++)for(var p=0;p<3;p++){var c=i[h]+r[p];a.indexOf(c)!==-1&&c in this._vS&&(e[c]=n[c]||f[c])}}else if(o.indexOf(s)===-1)if("opacity"===s&&$){var v=I(this._el,"filter");e.opacity="number"==typeof v?v:f.opacity}else l.indexOf(s)!==-1?e[s]=I(this._el,s)||h[s]:e[s]=s in nt?nt[s](this._el,s,this._vS[s]):0;else e[s]=this._el===B?t.pageYOffset||B.scrollTop:this._el.scrollTop;for(var s in n)a.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||f[s]);if(this._vS={},this._vS=U(e,this._el),C in this._vE)for(var d in this._vS[C])if("perspective"!==d)if("object"==typeof this._vS[C][d])for(var g in this._vS[C][d])"undefined"==typeof this._vE[C][d]&&(this._vE[C][d]={}),"number"==typeof this._vS[C][d][g]&&"undefined"==typeof this._vE[C][d][g]&&(this._vE[C][d][g]=this._vS[C][d][g]);else"number"==typeof this._vS[C][d]&&"undefined"==typeof this._vE[C][d]&&(this._vE[C][d]=this._vS[C][d])},st=t.Easing={};st.linear=function(t){return t},st.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},st.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},st.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},st.easingQuadraticIn=function(t){return t*t},st.easingQuadraticOut=function(t){return t*(2-t)},st.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},st.easingCubicIn=function(t){return t*t*t},st.easingCubicOut=function(t){return--t*t*t+1},st.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},st.easingQuarticIn=function(t){return t*t*t*t},st.easingQuarticOut=function(t){return 1- --t*t*t*t},st.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},st.easingQuinticIn=function(t){return t*t*t*t*t},st.easingQuinticOut=function(t){return 1+--t*t*t*t*t},st.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},st.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},st.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},st.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},st.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},st.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},st.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},st.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},st.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},st.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},st.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},st.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},st.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},st.easingBounceIn=function(t){return 1-st.easingBounceOut(1-t)},st.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},st.easingBounceInOut=function(t){return t<.5?.5*st.easingBounceIn(2*t):.5*st.easingBounceOut(2*t-1)+.5};var at=t._start=function(t){tt.call(this),this.options.rpr&&rt.apply(this),N.apply(this);for(var n in this._vE)n in it&&this.options.rpr&&it[n].call(this),this._vSR[n]=this._vS[n];return E(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&D(),this},ot=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,E(this),!i&&D()),this},ut=t._Tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?B:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in r)this.options[s]=r[s];if(this.options.rpr=r.rpr||!1,this._vSR={},this._vE=U(i,t),this._vS=r.rpr?n:U(n,t),void 0!==this.options.perspective&&C in this._vE){var a="perspective("+parseInt(this.options.perspective)+"px) ";this._vE[C].perspective=a}for(var o in this._vE)o in it&&!r.rpr&&it[o].call(this);this.options.chain=[],this.options.easing=r.easing&&"function"==typeof et(r.easing)?et(r.easing):st.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=at,this.play=ot,this.resume=ot,this.pause=function(){return!this.paused&&this.playing&&(T(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(T(this),this.playing=!1,this.paused=!1,V.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),J.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ft(t[r],e,i[r]))},ht=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(pt(t[s],e,n,r[s]))},ft=(lt.prototype=ht.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),R=$.translate=function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(10*(t[r]+(e[r]-t[r])*i)>>0)/10)+n;return s.x?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},W=$.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")":r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},z=$.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},H=$.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},D=function(t){for(var e=0;e0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*q(n,i,s)>>0)/10:q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+(n.translate?R(n.translate,i.translate,"px",s):"")+(n.rotate?W(n.rotate,i.rotate,"deg",s):"")+(n.skew?z(n.skew,i.skew,"deg",s):"")+(n.scale?H(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=Q(n,i,s,r.keepHex)}),y(e)}},J=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=G.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?G.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=G.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=G.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=G.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=G.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=G.colors.call(this,c,t[c]):c in G&&(n[c]=G[c].call(this,c,t[c]))},V=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},tt=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},et=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(Y,w,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(Y,w,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?rt[t]:void 0},st=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in U?U[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},J.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},rt=t.Easing={};rt.linear=function(t){return t},rt.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},rt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},rt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},rt.easingQuadraticIn=function(t){return t*t},rt.easingQuadraticOut=function(t){return t*(2-t)},rt.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},rt.easingCubicIn=function(t){return t*t*t},rt.easingCubicOut=function(t){return--t*t*t+1},rt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},rt.easingQuarticIn=function(t){return t*t*t*t},rt.easingQuarticOut=function(t){return 1- --t*t*t*t},rt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},rt.easingQuinticIn=function(t){return t*t*t*t*t},rt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},rt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},rt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},rt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},rt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},rt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},rt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},rt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},rt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},rt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},rt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},rt.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},rt.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},rt.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},rt.easingBounceIn=function(t){return 1-rt.easingBounceOut(1-t)},rt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},rt.easingBounceInOut=function(t){return t<.5?.5*rt.easingBounceIn(2*t):.5*rt.easingBounceOut(2*t-1)+.5};var at=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},J.call(this,n,"end"),i.rpr?this.valuesStart=e:J.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in K&&!i.rpr&&K[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof it(i.easing)?it(i.easing):rt.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ot=(at.prototype={start:function(t){nt.call(this),this.options.rpr&&st.apply(this),N.apply(this);for(var s in this.valuesEnd)s in K&&this.options.rpr&&K[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&D(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&D()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=(1e3*e.now()>>0)/1e3,this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(lt(t[s],e,i[s]))}),ut=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ht(t[r],e,n,s[r]))},lt=(ot.prototype=ut.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n - + diff --git a/svg.html b/svg.html index e6ae4a1..f406fda 100644 --- a/svg.html +++ b/svg.html @@ -8,7 +8,7 @@ - + diff --git a/text.html b/text.html index e5c7d06..d4b60eb 100644 --- a/text.html +++ b/text.html @@ -8,7 +8,7 @@ - + From a82263d4b4ab40bab4e813cc21f628b933f03c73 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 30 Nov 2016 18:18:53 +0200 Subject: [PATCH 113/187] Small typo with Attributes plugin --- src/kute-attr.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js index 975affc..a0e5e0a 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.5.99 | © dnp_theme | Attributes Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),o=c(this.element,i);r[i]=p.indexOf(i)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(n)?1:0)}return r},u.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var n={};for(var o in r){var u=v(o),b=/(%|[a-z]+)$/,d=c(this.element,u.replace(/_+[a-z]+/,""));if(p.indexOf(u)===-1)if(null!==d&&b.test(d)){var y=f(d).u||f(r[o]).u,A=/%/.test(y)?"_percent":"_"+y;u+A in e||(/%/.test(y)?e[u+A]=function(t,e,r,n,i){var o=o||e.replace(A,"");t.setAttribute(o,(100*s(r.v,n.v,i)>>0)/100+n.prefix)}:e[u+A]=function(t,e,r,n,i){var o=o||e.replace(A,"");t.setAttribute(o,(s(r.v,n.v,i)>>0)+n.prefix)}),n[u+A]=f(r[o])}else b.test(r[o])&&null!==d&&(null===d||b.test(d))||(u in e||(/opacity/i.test(o)?e[u]=function(t,e,r,n,i){t.setAttribute(e,(100*s(r,n,i)>>0)/100)}:e[u]=function(t,e,r,n,i){t.setAttribute(e,(10*s(r,n,i)>>0)/10)}),n[u]=parseFloat(r[o]));else u in e||(e[u]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),n[u]=a(r[o])}return n},this}); \ No newline at end of file +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this}); \ No newline at end of file From 05c15ee98c197f579485abec297cdc110d807983 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 30 Nov 2016 18:48:20 +0200 Subject: [PATCH 114/187] Issue with text plugin demo --- assets/js/text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/text.js b/assets/js/text.js index 5c1634c..a03804a 100644 --- a/assets/js/text.js +++ b/assets/js/text.js @@ -5,7 +5,7 @@ var numText = document.getElementById('numText'), numBtn.addEventListener('click', function(){ if (!numTween.playing) { - if (numText.innerHTML === '1550') { numTween._vE['number'] = 0; } else { numTween._vE['number'] = 1550; } + if (numText.innerHTML === '1550') { numTween.valuesEnd['number'] = 0; } else { numTween.valuesEnd['number'] = 1550; } numTween.start(); } }, false); From ead5728dcd269e000f20a98da45bd8920536f7b3 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 11 Dec 2016 03:48:37 +0200 Subject: [PATCH 115/187] Major change: * fixing SVG transforms for good https://github.com/thednp/kute.js/issues/33 * major changes to the tween objects https://github.com/thednp/kute.js/issues/39 * back to Infinity repeat https://github.com/thednp/kute.js/issues/43 * all round performance improvements --- about.html | 2 +- assets/js/perf.js | 2 +- assets/js/svg.js | 85 +++++++++++++++++++------------- options.html | 4 +- performance.html | 5 +- properties.html | 8 +-- src/kute-attr.min.js | 2 +- src/kute-css.min.js | 2 +- src/kute-jquery.min.js | 4 +- src/kute-svg.min.js | 4 +- src/kute-text.min.js | 2 +- src/kute.min.js | 4 +- svg.html | 109 +++++++++++++++++++++-------------------- 13 files changed, 127 insertions(+), 106 deletions(-) diff --git a/about.html b/about.html index 5f31d10..abe5ee5 100644 --- a/about.html +++ b/about.html @@ -147,7 +147,7 @@

        KUTE.js Project

        KUTE.js continues what was started with jQueryTween (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.

        -

        It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, GSAP, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, and a very tough competitor.

        +

        It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.

        In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, Text Plugin, 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.

        Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.

        diff --git a/assets/js/perf.js b/assets/js/perf.js index e431719..70b042b 100644 --- a/assets/js/perf.js +++ b/assets/js/perf.js @@ -52,7 +52,7 @@ function random(min, max) { // the variables var container = document.getElementById('container'); -// vendor prefix handle +// vendor prefix handle for Tween.js var transformProperty = KUTE.property('transform'), tws = []; diff --git a/assets/js/svg.js b/assets/js/svg.js index 43c2bca..878cdff 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -94,24 +94,52 @@ var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5); drawBtn.addEventListener('click', function(){ - !draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing && draw1.start(); + !draw1.tweens[0].playing && !draw1.tweens[1].playing && !draw1.tweens[2].playing && !draw1.tweens[3].playing && !draw1.tweens[4].playing + && !draw2.tweens[0].playing && !draw2.tweens[1].playing && !draw2.tweens[2].playing && !draw2.tweens[3].playing && !draw2.tweens[4].playing + && !draw3.tweens[0].playing && !draw3.tweens[1].playing && !draw3.tweens[2].playing && !draw3.tweens[3].playing && !draw3.tweens[4].playing + && !draw4.tweens[0].playing && !draw4.tweens[1].playing && !draw4.tweens[2].playing && !draw4.tweens[3].playing && !draw4.tweens[4].playing + && !draw5.tweens[0].playing && !draw5.tweens[1].playing && !draw5.tweens[2].playing && !draw5.tweens[3].playing && !draw5.tweens[4].playing + + && draw1.start(); }, false); -// // svgTransform examples +// svgTransform examples + +// rotation around shape center point var svgRotate = document.getElementById('svgRotate'); var rotateBtn = document.getElementById('rotateBtn'); var svgr1 = svgRotate.getElementsByTagName('path')[0]; var svgr2 = svgRotate.getElementsByTagName('path')[1]; -var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); -var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); +var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, { transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); +var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); rotateBtn.addEventListener('click', function(){ !svgTween11.playing && svgTween11.start(); !svgTween12.playing && svgTween12.start(); }, false); +// rotation around shape's parent center point +var svgRotate1 = document.getElementById('svgRotate1'); +var rotateBtn1 = document.getElementById('rotateBtn1'); +var svgr11 = svgRotate1.getElementsByTagName('path')[0]; +var svgr21 = svgRotate1.getElementsByTagName('path')[1]; +var bb = svgr21.getBBox(); +var translation = [580, 0]; +var svgBB = svgr21.ownerSVGElement.getBBox(); +var svgOriginX = (svgBB.width * 50 / 100) - translation[0]; +var svgOriginY = (svgBB.height * 50 / 100)- translation[1]; + +var svgTween111 = KUTE.to(svgr11, { rotate: 360 }, { transformOrigin: (svgBB.width * 50 / 100) + 'px 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); +var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); + +rotateBtn1.addEventListener('click', function(){ + !svgTween111.playing && svgTween111.start(); + !svgTween121.playing && svgTween121.start(); +}, false); + +// translate var svgTranslate = document.getElementById('svgTranslate'); var translateBtn = document.getElementById('translateBtn'); var svgt1 = svgTranslate.getElementsByTagName('path')[0]; @@ -124,29 +152,18 @@ translateBtn.addEventListener('click', function(){ !svgTween22.playing && svgTween22.start(); }, false); +// skews in chain var svgSkew = document.getElementById('svgSkew'); var skewBtn = document.getElementById('skewBtn'); var svgsk1 = svgSkew.getElementsByTagName('path')[0]; var svgsk2 = svgSkew.getElementsByTagName('path')[1]; -var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '0px 0px 0px', - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); -var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); -var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); +var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"}); +var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, {transformOrigin: '50% 50% 0px', duration: 2500, easing: "easingCubicInOut"}); +var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"}); -var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); -var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); -var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { - // yoyo: true, repeat: 1, - duration: 1500, easing: "easingCubicOut"}); +var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"}); +var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"}); +var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"}); svgTween31.chain(svgTween311); svgTween311.chain(svgTween313); @@ -159,6 +176,7 @@ skewBtn.addEventListener('click', function(){ !svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start(); }, false); +// scale var svgScale = document.getElementById('svgScale'); var scaleBtn = document.getElementById('scaleBtn'); var svgs1 = svgScale.getElementsByTagName('path')[0]; @@ -167,36 +185,33 @@ var svgTween41 = KUTE.to(svgs1, { scale: 1.5 }, {transformOrigin: '50% 50%', yoy var svgTween42 = KUTE.to(svgs2, {svgTransform: { translate: 580, scale: 0.5, -} }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); +} }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); scaleBtn.addEventListener('click', function(){ !svgTween41.playing && svgTween41.start(); !svgTween42.playing && svgTween42.start(); }, false); +// mixed transforms var svgMixed = document.getElementById('svgMixed'); var mixedBtn = document.getElementById('mixedBtn'); var svgm1 = svgMixed.getElementsByTagName('path')[0]; var svgm2 = svgMixed.getElementsByTagName('path')[1]; -var svgTween51 = KUTE.to(svgm1, { // a regular transform without svg plugin -// svgTransform: { +var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge translate: 250, - rotate: 360, - skewX: -25, - // skewY: 25, scale: 1.5, -// } + rotate: 320, + skewX: -15 }, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); var svgTween52 = KUTE.to(svgm2, { svgTransform: { - translate: 580+250, + translate: 830, scale: 1.5, - rotate: 360, - skewX: -25, - // skewY: 25, - } -}, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); + rotate: 320, + skewX: -15 +} +}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); mixedBtn.addEventListener('click', function(){ !svgTween51.playing && svgTween51.start(); diff --git a/options.html b/options.html index c8e6c6d..b42d5ad 100644 --- a/options.html +++ b/options.html @@ -98,10 +98,10 @@

        These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.

        • perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
          • -
        • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.
          • +
        • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML/SVG element. This option has no default value and only accepts valid CSS values according to it's specs.
        • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.
        • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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.
          • -
        • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.
          • +
        • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a svgTransform property, it can also accept array values: transformOrigin: [250,250].

        SVG Plugin Options

        diff --git a/performance.html b/performance.html index 72985cb..320a185 100644 --- a/performance.html +++ b/performance.html @@ -101,9 +101,9 @@
    - + -

    These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, here's how.

    +

    These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.

    Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.

    @@ -125,6 +125,7 @@ + diff --git a/properties.html b/properties.html index 1348088..ba61d2b 100644 --- a/properties.html +++ b/properties.html @@ -113,14 +113,16 @@

    The SVG Plugin features cross browser 2D transform animations via the svgTransform tween property and the transform presentation attribute, similar in functionality as the Attributes Plugin.

    • translate sub-property applies horizontal and / or vertical translation. EG. translate:150 to translate a shape 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
      • -
    • rotate sub-property applies rotation to a shape on the Z axis. Eg. rotate:150 will rotate a shape clockwise by 150 degrees or rotate: [45,25,25] to rotate the shape by 45 degrees around the [25,25] coordinate of the parent <svg>. IE9+
      • +
    • rotate sub-property applies rotation to a shape on the Z axis. Eg. rotate:150 will rotate a shape clockwise by 150 degrees around it's own center or around the transformOrigin: '450 450' set tween option coordinate of the parent element. IE9+
    • skewX sub-property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew a shape by 25 degrees. IE9+
    • skewY sub-property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew a shape by 25 degrees. IE9+
      • -
    • scale sub-property used to apply a single value size transformation. When using this sub-property, the translate will be automatically adjusted to make sure the animation looks as you would expect it from a regular HTML5 element. Eg. scale:0.5 will scale down a shape to half of it's initial size. IE9+
      • +
    • scale sub-property used to apply a single value size transformation. Eg. scale:0.5 will scale a shape to half of it's initial size. IE9+
      • +
    • matrix sub-property is not supported.
    +

    As a quick note, the translation is normalized and computed in a way to handle the transformOrigin tween option in all cases, not just for rotations, but also scaling or skews.

    SVG Properties

    -

    The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability.

    +

    The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability and the ability to optimize the visual and performance of the morph, all with the help of special tween options and utilities.

    Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset. diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js index a0e5e0a..7db3ad1 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Attributes Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | Attributes Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this}); \ No newline at end of file diff --git a/src/kute-css.min.js b/src/kute-css.min.js index a9bcc0e..ea372f6 100644 --- a/src/kute-css.min.js +++ b/src/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | CSS Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | CSS Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this}); \ No newline at end of file diff --git a/src/kute-jquery.min.js b/src/kute-jquery.min.js index a4695ad..6105e6e 100644 --- a/src/kute-jquery.min.js +++ b/src/kute-jquery.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | jQuery Plugin | MIT-License -!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;r.fn.KUTE=t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file +// KUTE.js v1.6.0 | © dnp_theme | jQuery Plugin | MIT-License +!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index fb4841b..eeb6868 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,s=r.parseProperty,a=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1)),p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,f="http://www.w3.org/2000/svg",g=e.Interpolate.coords=function(t,e,r,n){for(var s=[],a=0;a>0)}return s};if(!(u&&u<9)){var c=function(t,e,r){for(var n=[],s=[],a=t.getTotalLength(),i=e.getTotalLength(),o=Math.max(a,i),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},s=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0,i=h(r.s,n.s,s)>>0,o=h(r.e,n.e,s)>>0,l=0-i;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(o+l-.5>>0)+"px, "+a+"px"}),I(this.element,e)},a.draw=function(){return I(this.element)};var N=function(t){var e,r,n=t&&/\)/.test(t)?t.split(")"):"none",s={};if(n instanceof Array)for(e=0;e>0)/10:(10*h(r[0],n[0],s)>>0)/10+" "+(10*h(r[1],n[1],s)>>0)/10)+e},L=e.Interpolate.rotateSVG=function(t,e,r,n,s){return t+((10*h(r[0],n[0],s)>>0)/10+" "+n[1]+","+n[2])+e},j=e.Interpolate.scaleSVG=function(t,e,r,n,s){return t+(1e3*h(r,n,s)>>0)/1e3+e},q=e.Interpolate.skewSVG=function(t,e,r,n,s){return t+(10*h(r,n,s)>>0)/10+e};return s.svgTransform=function(t,e){"svgTransform"in n||(n.svgTransform=function(t,e,r,n,s){t.setAttribute("transform",("translate"in r?F("translate(",")",r.translate,n.translate,s):"")+("rotate"in r?L("rotate(",")",r.rotate,n.rotate,s):"")+("scale"in r?j("scale(",")",r.scale,n.scale,s):"")+("skewX"in r?q("skewX(",")",r.skewX,n.skewX,s):"")+("skewY"in r?q("skewY(",")",r.skewY,n.skewY,s):""))});var r,s,a={},o=this.element.getBBox(),l=o.x+o.width/2,h=o.y+o.height/2;for(i in e)"rotate"===i?(r=e[i]instanceof Array?e[i]:/\s/.test(e[i])?[1*e[i].split(" ")[0],1*e[i].split(" ")[1].split(",")[0],1*e[i].split(" ")[1].split(",")[1]]:[1*e[i],l,h],a[i]=r):"translate"===i?(s=e[i]instanceof Array?e[i]:/\,|\s/.test(e[i])?e[i].split(/\,|\s/):[1*e[i],0],a[i]=[1*s[0]||0,1*s[1]||0]):"scale"===i?a[i]=1*e[i]||1:/skew/.test(i)&&(a[i]=1*e[i]||0);return"scale"in a&&(!("translate"in a)&&(a.translate=[0,0]),a.translate[0]+=(1-a.scale)*o.width/2,a.translate[1]+=(1-a.scale)*o.height/2,"rotate"in a&&(a.rotate[1]-="skewX"in a?Math.tan(a.skewX)*o.height:0,a.rotate[2]-="skewY"in a?Math.tan(a.skewY)*o.width:0),a.translate[0]+="skewX"in a?Math.tan(a.skewX)*o.height*2:0,a.translate[1]+="skewY"in a?Math.tan(a.skewY)*o.width*2:0),a},a.svgTransform=function(t,e){var r,n={},s=N(this.element.getAttribute("transform"));for(r in e)n[r]=r in s?s[r]:"scale"===r?1:0;return n},l.svgTransform=function(){var t,e,r,n=this.element.getBBox(),s=N(this.element.getAttribute("transform")),a=n.x+n.width/2,i=n.y+n.height/2;for(r in s)"translate"===r?(e=s[r]instanceof Array?s[r]:/\,|\s/.test(s[r])?s[r].split(/\,|\s/):[1*s[r],0],this.valuesStart.svgTransform[r]=[1*e[0]||0,1*e[1]||0]):"scale"===r?this.valuesStart.svgTransform[r]=1*s[r]||1:"rotate"===r?(t=s[r]instanceof Array?s[r]:/\s/.test(s[r])?[1*s[r].split(" ")[0],1*s[r].split(" ")[1].split(",")[0],1*s[r].split(" ")[1].split(",")[1]]:[1*s[r],a,i],this.valuesStart.svgTransform[r]=t):/skew/.test(r)&&(this.valuesStart.svgTransform[r]=1*s[r]||0);for(var r in this.valuesStart.svgTransform)r in this.valuesEnd.svgTransform||(this.valuesEnd.svgTransform[r]=this.valuesStart.svgTransform[r]),r==="rotate"in this.valuesStart.svgTransform&&"rotate"in this.valuesEnd.svgTransform&&(this.valuesEnd.svgTransform.rotate[1]=this.valuesStart.svgTransform.rotate[1]=a,this.valuesEnd.svgTransform.rotate[2]=this.valuesStart.svgTransform.rotate[2]=i)},this}}); \ No newline at end of file +// KUTE.js v1.6.0 | © dnp_theme | SVG Plugin | MIT-License +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0,s=h(r.s,n.s,a)>>0,o=h(r.e,n.e,a)>>0,l=0-s;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(o+l-.5>>0)+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/10+(o?","+(10*o>>0)/10:"")+")":"")+(p?"rotate("+(10*p>>0)/10+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate(t.translate[0]||0,t.translate[1]||0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f],i=null;for(var n in t)n in e||(e[n]=t[n])},this}}); \ No newline at end of file diff --git a/src/kute-text.min.js b/src/kute-text.min.js index 82bffe8..6f02fed 100644 --- a/src/kute-text.min.js +++ b/src/kute-text.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Text Plugin | MIT-License +// KUTE.js v1.6.0 | © dnp_theme | Text Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/src/kute.min.js b/src/kute.min.js index 782a3ae..fba444d 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.99 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),R=$.translate=function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(10*(t[r]+(e[r]-t[r])*i)>>0)/10)+n;return s.x?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},W=$.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")":r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},z=$.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},H=$.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},D=function(t){for(var e=0;e0)return this.options.repeat<9999?this.options.repeat--:this.options.repeat=0,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),et.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*q(n,i,s)>>0)/10:q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+(n.translate?R(n.translate,i.translate,"px",s):"")+(n.rotate?W(n.rotate,i.rotate,"deg",s):"")+(n.skew?z(n.skew,i.skew,"deg",s):"")+(n.scale?H(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=Q(n,i,s,r.keepHex)}),y(e)}},J=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=G.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?G.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=G.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=G.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=G.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=G.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=G.colors.call(this,c,t[c]):c in G&&(n[c]=G[c].call(this,c,t[c]))},V=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},tt=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},et=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(Y,w,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(Y,w,!1),document.body.setAttribute("data-tweening","scroll"))},it=function(t){return"function"==typeof t?t:"string"==typeof t?rt[t]:void 0},st=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in U?U[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},J.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},rt=t.Easing={};rt.linear=function(t){return t},rt.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},rt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},rt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},rt.easingQuadraticIn=function(t){return t*t},rt.easingQuadraticOut=function(t){return t*(2-t)},rt.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},rt.easingCubicIn=function(t){return t*t*t},rt.easingCubicOut=function(t){return--t*t*t+1},rt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},rt.easingQuarticIn=function(t){return t*t*t*t},rt.easingQuarticOut=function(t){return 1- --t*t*t*t},rt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},rt.easingQuinticIn=function(t){return t*t*t*t*t},rt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},rt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},rt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},rt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},rt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},rt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},rt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},rt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},rt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},rt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},rt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},rt.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},rt.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},rt.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},rt.easingBounceIn=function(t){return 1-rt.easingBounceOut(1-t)},rt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},rt.easingBounceInOut=function(t){return t<.5?.5*rt.easingBounceIn(2*t):.5*rt.easingBounceOut(2*t-1)+.5};var at=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},J.call(this,n,"end"),i.rpr?this.valuesStart=e:J.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in K&&!i.rpr&&K[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof it(i.easing)?it(i.easing):rt.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ot=(at.prototype={start:function(t){nt.call(this),this.options.rpr&&st.apply(this),N.apply(this);for(var s in this.valuesEnd)s in K&&this.options.rpr&&K[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&D(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&D()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=(1e3*e.now()>>0)/1e3,this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,et.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(lt(t[s],e,i[s]))}),ut=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ht(t[r],e,n,s[r]))},lt=(ot.prototype=ut.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(10*(t[r]+(e[r]-t[r])*i)>>0)/10)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")":r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},j=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},D={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in D||(D[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?j(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in D?"opacity"===t&&(t in D||(B?D[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:D[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):D[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in D||(D[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),y(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=J.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?J.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=J.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(P,w,!1),document.body.removeAttribute("data-tweening"))},it=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(P,w,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),i.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!i.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n + --> - + + From 585de959071b96c9e1d859b64c315eacc1cf428a Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 11 Dec 2016 04:24:18 +0200 Subject: [PATCH 116/187] LOL --- svg.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/svg.html b/svg.html index dc20955..96db8e1 100644 --- a/svg.html +++ b/svg.html @@ -473,8 +473,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO - - + From d5d29d53d2896115cf3e53b86cdb8f1e9ed2c159 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 14 Dec 2016 14:41:50 +0200 Subject: [PATCH 117/187] Adjustments for the SVG Plugin: * `draw` property will work with 2 decimals for more precise animation * `svgTransform` will also work with decimals for translation and rotation * regular transform will need 2 decimals for translation and rotation --- options.html | 4 ++-- src/kute-attr.min.js | 2 +- src/kute-bezier.min.js | 2 -- src/kute-css.min.js | 2 +- src/kute-jquery.min.js | 2 +- src/kute-physics.min.js | 2 -- src/kute-svg.min.js | 4 ++-- src/kute-text.min.js | 2 +- src/kute.min.js | 4 ++-- 9 files changed, 10 insertions(+), 14 deletions(-) delete mode 100644 src/kute-bezier.min.js delete mode 100644 src/kute-physics.min.js diff --git a/options.html b/options.html index b42d5ad..922f2d8 100644 --- a/options.html +++ b/options.html @@ -98,10 +98,10 @@

    These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.

    • perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
      • -
    • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML/SVG element. This option has no default value and only accepts valid CSS values according to it's specs.
      • +
    • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML element. This option has no default value and only accepts valid CSS values according to it's specs.
    • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.
    • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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.
      • -
    • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a svgTransform property, it can also accept array values: transformOrigin: [250,250].
      • +
    • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a svgTransform property, it can also accept array values: transformOrigin: [250,250].

    SVG Plugin Options

    diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js index 7db3ad1..35e3800 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.6.0 | © dnp_theme | Attributes Plugin | MIT-License +// KUTE.js v1.6.1 | © dnp_theme | Attributes Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this}); \ No newline at end of file diff --git a/src/kute-bezier.min.js b/src/kute-bezier.min.js deleted file mode 100644 index b5a4b56..0000000 --- a/src/kute-bezier.min.js +++ /dev/null @@ -1,2 +0,0 @@ -// KUTE.js v1.5.95 | © dnp_theme | Bezier Plugin | MIT-License -!function(n,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof n.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js");n.Ease=e(n.KUTE)}}(this,function(n){"use strict";var e="undefined"!=typeof global?global:window,t={};t.Bezier=e.Bezier=function(n,e,t,u){return r.pB(n,e,t,u)};var r=t.Bezier.prototype=e.Bezier.prototype;return r.ni=4,r.nms=.001,r.sp=1e-7,r.smi=10,r.ksts=11,r.ksss=1/(r.ksts-1),r.f32as="Float32Array"in e,r.msv=r.f32as?new Float32Array(r.ksts):new Array(r.ksts),r.A=function(n,e){return 1-3*e+3*n},r.B=function(n,e){return 3*e-6*n},r.C=function(n){return 3*n},r.pB=function(n,e,t,u){this._p=!1;var s=this;return function(a){return s._p||r.pc(n,t,e,u),n===e&&t===u?a:0===a?0:1===a?1:r.cB(r.gx(a,n,t),e,u)}},r.cB=function(n,e,t){return((r.A(e,t)*n+r.B(e,t))*n+r.C(e))*n},r.gS=function(n,e,t){return 3*r.A(e,t)*n*n+2*r.B(e,t)*n+r.C(e)},r.bS=function(n,e,t,u,s){var a,i,o=0,c=r.sp,f=r.smi;do i=e+(t-e)/2,a=r.cB(i,u,s)-n,a>0?t=i:e=i;while(Math.abs(a)>c&&++o=r.nms?r.nri(n,o,e,t):0===c?o:r.bS(n,u,f,e,t)},r.pc=function(n,e,t,u){this._p=!0,n==t&&e==u||r.csv(n,e)},e.Ease={},e.Ease.easeIn=function(){return r.pB(.42,0,1,1)},e.Ease.easeOut=function(){return r.pB(0,0,.58,1)},e.Ease.easeInOut=function(){return r.pB(.5,.16,.49,.86)},e.Ease.easeInSine=function(){return r.pB(.47,0,.745,.715)},e.Ease.easeOutSine=function(){return r.pB(.39,.575,.565,1)},e.Ease.easeInOutSine=function(){return r.pB(.445,.05,.55,.95)},e.Ease.easeInQuad=function(){return r.pB(.55,.085,.68,.53)},e.Ease.easeOutQuad=function(){return r.pB(.25,.46,.45,.94)},e.Ease.easeInOutQuad=function(){return r.pB(.455,.03,.515,.955)},e.Ease.easeInCubic=function(){return r.pB(.55,.055,.675,.19)},e.Ease.easeOutCubic=function(){return r.pB(.215,.61,.355,1)},e.Ease.easeInOutCubic=function(){return r.pB(.645,.045,.355,1)},e.Ease.easeInQuart=function(){return r.pB(.895,.03,.685,.22)},e.Ease.easeOutQuart=function(){return r.pB(.165,.84,.44,1)},e.Ease.easeInOutQuart=function(){return r.pB(.77,0,.175,1)},e.Ease.easeInQuint=function(){return r.pB(.755,.05,.855,.06)},e.Ease.easeOutQuint=function(){return r.pB(.23,1,.32,1)},e.Ease.easeInOutQuint=function(){return r.pB(.86,0,.07,1)},e.Ease.easeInExpo=function(){return r.pB(.95,.05,.795,.035)},e.Ease.easeOutExpo=function(){return r.pB(.19,1,.22,1)},e.Ease.easeInOutExpo=function(){return r.pB(1,0,0,1)},e.Ease.easeInCirc=function(){return r.pB(.6,.04,.98,.335)},e.Ease.easeOutCirc=function(){return r.pB(.075,.82,.165,1)},e.Ease.easeInOutCirc=function(){return r.pB(.785,.135,.15,.86)},e.Ease.easeInBack=function(){return r.pB(.6,-.28,.735,.045)},e.Ease.easeOutBack=function(){return r.pB(.175,.885,.32,1.275)},e.Ease.easeInOutBack=function(){return r.pB(.68,-.55,.265,1.55)},e.Ease.slowMo=function(){return r.pB(0,.5,1,.5)},e.Ease.slowMo1=function(){return r.pB(0,.7,1,.3)},e.Ease.slowMo2=function(){return r.pB(0,.9,1,.1)},t}); \ No newline at end of file diff --git a/src/kute-css.min.js b/src/kute-css.min.js index ea372f6..ea86800 100644 --- a/src/kute-css.min.js +++ b/src/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.6.0 | © dnp_theme | CSS Plugin | MIT-License +// KUTE.js v1.6.1 | © dnp_theme | CSS Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this}); \ No newline at end of file diff --git a/src/kute-jquery.min.js b/src/kute-jquery.min.js index 6105e6e..88e6d71 100644 --- a/src/kute-jquery.min.js +++ b/src/kute-jquery.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.6.0 | © dnp_theme | jQuery Plugin | MIT-License +// KUTE.js v1.6.1 | © dnp_theme | jQuery Plugin | MIT-License !function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file diff --git a/src/kute-physics.min.js b/src/kute-physics.min.js deleted file mode 100644 index 26cdafe..0000000 --- a/src/kute-physics.min.js +++ /dev/null @@ -1,2 +0,0 @@ -// KUTE.js v1.5.95 | © dnp_theme | Physics Plugin | MIT-License -!function(t,n){if("function"==typeof define&&define.amd)define(["kute.js"],n);else if("object"==typeof module&&"function"==typeof require)module.exports=n(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js");t.Physics=n(t.KUTE)}}(this,function(t){"use strict";var n="undefined"!=typeof global?global:window,r={};r.spring=n.spring=function(t){t=t||{};var n=Math.max(1,(t.frequency||300)/20),r=Math.pow(20,(t.friction||200)/100),e=t.anticipationStrength||0,o=(t.anticipationSize||0)/1e3;return function(t){var u,a,c,p,f,y,s,h;return y=t/(1-o)-o/(1-o),t.001;)a=r.b-r.a,r={a:r.b,b:r.b+a*n,H:r.H*n*n};return r.b}(),function(){var t,e,c,p;for(e=Math.sqrt(2/(o*a*a)),c={a:-e,b:e,H:1},u&&(c.a=0,c.b=2*c.b),r.push(c),t=a,p=[];c.b<1&&c.H>.001;)t=c.b-c.a,c={a:c.b,b:c.b+t*n,H:c.H*i},p.push(r.push(c));return p}(),function(n){var i,o,c;for(o=0,i=r[o];!(n>=i.a&&n<=i.b)&&(o+=1,i=r[o]););return c=i?e.getPointInCurve(i.a,i.b,i.H,n,t,a):u?0:1}};var e=r.gravity.prototype=n.gravity.prototype;e.getPointInCurve=function(t,n,r,i,e,o){var u,a;return o=n-t,a=2/o*i-1-2*t/o,u=a*a*r-r+1,e.initialForce&&(u=1-u),u},r.forceWithGravity=n.forceWithGravity=function(t){var n=t||{};return n.initialForce=!0,r.gravity(n)},r.bezier=n.BezierMultiPoint=function(t){t=t||{};var n=t.points,r=!1,i=[];return function(){var t,r;for(t in n){if(r=parseInt(t),r>=n.length-1)break;o.fn(n[r],n[r+1],i)}return i}(),function(t){return 0===t?0:1===t?1:o.yForX(t,i,r)}};var o=r.bezier.prototype=n.BezierMultiPoint.prototype;return o.fn=function(t,n,r){var i=function(r){return o.Bezier(r,t,t.cp[t.cp.length-1],n.cp[0],n)};return r.push(i)},o.Bezier=function(t,n,r,i,e){return{x:Math.pow(1-t,3)*n.x+3*Math.pow(1-t,2)*t*r.x+3*(1-t)*Math.pow(t,2)*i.x+Math.pow(t,3)*e.x,y:Math.pow(1-t,3)*n.y+3*Math.pow(1-t,2)*t*r.y+3*(1-t)*Math.pow(t,2)*i.y+Math.pow(t,3)*e.y}},o.yForX=function(t,n,r){var i,e,o,u,a,c,p,f,y=0,s=n.length;for(i=null,y;y=e(0).x&&t<=e(1).x&&(i=e),null===i);y++);if(!i)return r?0:1;for(f=1e-4,u=0,c=1,a=(c+u)/2,p=i(a).x,o=0;Math.abs(t-p)>f&&o<100;)t>p?u=a:c=a,a=(c+u)/2,p=i(a).x,o++;return i(a).y},n.Physics={physicsInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsBackOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+r/1e3,y:1.3}]}]})},physicsBackIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.28-r/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsBackInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.68-r/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+r/1e3,y:1.45}]}]})}},r}); \ No newline at end of file diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index eeb6868..ca85384 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.6.0 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0,s=h(r.s,n.s,a)>>0,o=h(r.e,n.e,a)>>0,l=0-s;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(o+l-.5>>0)+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/10+(o?","+(10*o>>0)/10:"")+")":"")+(p?"rotate("+(10*p>>0)/10+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate(t.translate[0]||0,t.translate[1]||0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f],i=null;for(var n in t)n in e||(e[n]=t[n])},this}}); \ No newline at end of file +// KUTE.js v1.6.1 | © dnp_theme | SVG Plugin | MIT-License +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*h(r.s,n.s,a)>>0)/100,o=(100*h(r.e,n.e,a)>>0)/100,l=0-s,u=o+l;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/10+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a,i=this.element.ownerSVGElement,s=i.createSVGMatrix(),o="skewX"in t||"skewY"in t||"scale"in t||"rotate"in t;o&&s.translate(-t.origin[0],-t.origin[1]),"translate"in t&&s.translate(t.translate[0],t.translate[1]),s.rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1),o&&s.translate(+t.origin[0],+t.origin[1]),a=i.createSVGTransformFromMatrix(s),t.translate=[a.matrix.e,a.matrix.f],a=null;for(var n in t)n in e||(e[n]=t[n])},this}}); \ No newline at end of file diff --git a/src/kute-text.min.js b/src/kute-text.min.js index 6f02fed..f4c82ad 100644 --- a/src/kute-text.min.js +++ b/src/kute-text.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.6.0 | © dnp_theme | Text Plugin | MIT-License +// KUTE.js v1.6.1 | © dnp_theme | Text Plugin | MIT-License !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/src/kute.min.js b/src/kute.min.js index fba444d..093b383 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.6.0 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(10*(t[r]+(e[r]-t[r])*i)>>0)/10)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")":r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},j=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},D={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in D||(D[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?j(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in D?"opacity"===t&&(t in D||(B?D[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:D[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):D[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in D||(D[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),y(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=J.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?J.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=J.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(P,w,!1),document.body.removeAttribute("data-tweening"))},it=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(P,w,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),i.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!i.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},j=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},D={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in D||(D[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?j(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in D?"opacity"===t&&(t in D||(B?D[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:D[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):D[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in D||(D[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),y(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=J.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?J.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=J.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(P,w,!1),document.body.removeAttribute("data-tweening"))},it=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(P,w,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),i.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!i.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n Date: Wed, 14 Dec 2016 16:37:50 +0200 Subject: [PATCH 118/187] Trying to fix a small issue with SVG transforms when initial rotations/scale/skews aren't 0 (zero) --- src/kute-svg.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index ca85384..87fdec7 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.6.1 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*h(r.s,n.s,a)>>0)/100,o=(100*h(r.e,n.e,a)>>0)/100,l=0-s,u=o+l;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/10+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a,i=this.element.ownerSVGElement,s=i.createSVGMatrix(),o="skewX"in t||"skewY"in t||"scale"in t||"rotate"in t;o&&s.translate(-t.origin[0],-t.origin[1]),"translate"in t&&s.translate(t.translate[0],t.translate[1]),s.rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1),o&&s.translate(+t.origin[0],+t.origin[1]),a=i.createSVGTransformFromMatrix(s),t.translate=[a.matrix.e,a.matrix.f],a=null;for(var n in t)n in e||(e[n]=t[n])},this}}); \ No newline at end of file +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*h(r.s,n.s,a)>>0)/100,o=(100*h(r.e,n.e,a)>>0)/100,l=0-s,u=o+l;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/10+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f],i=null;for(var n in t)n in e||(e[n]=t[n])},this}}); \ No newline at end of file From 2f4810a0a1e1ead1f711dbffd25e006ae6410c42 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 16 Dec 2016 22:23:23 +0200 Subject: [PATCH 119/187] SVG transforms now work properly with `fromTo()` method, no need to do `crossCheck` for the method --- src/kute-svg.min.js | 2 +- src/kute.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index 87fdec7..b5b9dfd 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.6.1 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*h(r.s,n.s,a)>>0)/100,o=(100*h(r.e,n.e,a)>>0)/100,l=0-s,u=o+l;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/10+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f],i=null;for(var n in t)n in e||(e[n]=t[n])},this}}); \ No newline at end of file +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*h(r.s,n.s,a)>>0)/100,o=(100*h(r.e,n.e,a)>>0)/100,l=0-s,u=o+l;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}}); \ No newline at end of file diff --git a/src/kute.min.js b/src/kute.min.js index 093b383..3662b36 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.6.1 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},j=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},D={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in D||(D[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?j(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in D?"opacity"===t&&(t in D||(B?D[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:D[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):D[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in D||(D[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),y(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=J.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?J.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=J.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(P,w,!1),document.body.removeAttribute("data-tweening"))},it=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(P,w,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),i.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!i.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},j=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},D={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in D||(D[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?j(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in D?"opacity"===t&&(t in D||(B?D[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:D[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):D[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in D||(D[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),y(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=J.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?J.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=J.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(P,w,!1),document.body.removeAttribute("data-tweening"))},it=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(P,w,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),this.options.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!this.options.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n Date: Tue, 20 Dec 2016 22:06:23 +0200 Subject: [PATCH 120/187] Mostly doc updates --- examples.html | 4 ++-- src/kute.min.js | 2 +- svg.html | 9 ++++++++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/examples.html b/examples.html index 967a9bc..f711864 100644 --- a/examples.html +++ b/examples.html @@ -191,13 +191,13 @@ var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start(); '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 + {perspective:400, perspectiveOrigin: 'center top'} // transform 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 + {parentPerspective:400, parentPerspectiveOrigin: 'center top'} // transform options );

    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.

    diff --git a/src/kute.min.js b/src/kute.min.js index 3662b36..e6e71f4 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.6.1 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},j=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},D={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in D||(D[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?j(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in D?"opacity"===t&&(t in D||(B?D[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:D[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):D[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in D||(D[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),y(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=J.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?J.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=J.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,w,!1),document.removeEventListener(P,w,!1),document.body.removeAttribute("data-tweening"))},it=function(){("scroll"in this.valuesEnd||"scrollTop"in this.valuesEnd)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,w,!1),document.addEventListener(P,w,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var v in this.valuesStart[C])if("perspective"!==v)if("object"==typeof this.valuesStart[C][v])for(var d in this.valuesStart[C][v])"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]={}),"number"==typeof this.valuesStart[C][v][d]&&"undefined"==typeof this.valuesEnd[C][v][d]&&(this.valuesEnd[C][v][d]=this.valuesStart[C][v][d]);else"number"==typeof this.valuesStart[C][v]&&"undefined"==typeof this.valuesEnd[C][v]&&(this.valuesEnd[C][v]=this.valuesStart[C][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),this.options.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!this.options.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*q(t[s],e[s],n)>>0)/100:null;return i?w(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),R=$.translate=B?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},W=$.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},z=$.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},H=$.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},D=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*q(n,i,s)>>0)/10:q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(X in j||(j[X]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?R(n.translate,i.translate,"px",s):"")+("rotate"in n?W(n.rotate,i.rotate,"deg",s):"")+("skew"in n?z(n.skew,i.skew,"deg",s):"")+("scale"in n?H(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(_?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=Q(n,i,s,r.keepHex)}),y(e)}},J=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=G.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?G.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=G.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=G.transform.call(this,c,t[c]));n[X]=h}else r.indexOf(c)!==-1?n[c]=G.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=G.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=G.colors.call(this,c,t[c]):c in G&&(n[c]=G[c].call(this,c,t[c]))},V=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},tt=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||x()},48)},et=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},nt=function(){"scroll"in this.valuesEnd&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(k,et,!1),document.removeEventListener(S,et,!1),document.body.removeAttribute("data-tweening"))},it=function(){"scroll"in this.valuesEnd&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(k,et,!1),document.addEventListener(S,et,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=I(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&_){var f=O(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=O(this.element,r)||l[r]:e[r]=r in U?U[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===F?t.pageYOffset||F.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},J.call(this,e,"start"),X in this.valuesEnd)for(var v in this.valuesStart[X])if("perspective"!==v)if("object"==typeof this.valuesStart[X][v])for(var d in this.valuesStart[X][v])"undefined"==typeof this.valuesEnd[X][v]&&(this.valuesEnd[X][v]={}),"number"==typeof this.valuesStart[X][v][d]&&"undefined"==typeof this.valuesEnd[X][v][d]&&(this.valuesEnd[X][v][d]=this.valuesStart[X][v][d]);else"number"==typeof this.valuesStart[X][v]&&"undefined"==typeof this.valuesEnd[X][v]&&(this.valuesEnd[X][v]=this.valuesStart[X][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?F:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},J.call(this,n,"end"),this.options.rpr?this.valuesStart=e:J.call(this,e,"start"),void 0!==this.options.perspective&&X in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[X].perspective=r}for(var a in this.valuesEnd)a in K&&!this.options.rpr&&K[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),N.apply(this);for(var s in this.valuesEnd)s in K&&this.options.rpr&&K[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&D(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,E(this),!i&&D()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(M(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;nSimilar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the .to() method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow the properties that change and I highly recommend checking the example code for skews in the svg.js file.
  • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
  • Also the svgTransform feature does not support 3D transforms, because they are not supported in all browsers.
    • -
  • Rotations will always use the valuesEnd value of the transform origin and cannot be animated, so that translations don't get messed up.
    • +
  • This feature does not work with SVG specific chained transforms right away (do not confuse with tween chain), but luckily there is a workaround
    EG: transform="translate(150,150) rotate(45) translate(-150,-150)".
    In this case I would recommend using the values of the first translation as transform-origin for your tween, like so:
    +
    // a possible workaround for animating a SVG element that uses chained transform functions
+KUTE.fromTo(element, 
+    {svgTransform : { translate: 0, rotate: 45, skewX: 0 }}, // startValues we asume the current translation is zero on both X and Y axis
+    {svgTransform : { translate: 450, rotate: 180, skewX: 20 }}, // endValues we will translate to a 450 value horizontaly and skew the X axis by 20 degrees
+    {transformOrigin: [150,150]} // tween options use the transform-origin of the target SVG element
+).start();
+
    This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system.
    • From 709e78ac3b9d34d67dea6d1bc8007782dee85050 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 3 Jan 2017 00:48:28 +0200 Subject: [PATCH 121/187] Changes: * Included fix https://github.com/thednp/kute.js/pull/49 * Implemented https://github.com/thednp/kute.js/issues/47 * Documentation updates --- assets/js/svg.js | 28 ++++++++++++++++++++++ options.html | 33 ++++++++++++++++++++++---- src/kute-svg.min.js | 2 +- src/kute-text.min.js | 2 +- src/kute.min.js | 2 +- svg.html | 55 ++++++++++++++++++++++++++++++-------------- 6 files changed, 98 insertions(+), 24 deletions(-) diff --git a/assets/js/svg.js b/assets/js/svg.js index 878cdff..f9addc5 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -216,4 +216,32 @@ var svgTween52 = KUTE.to(svgm2, { mixedBtn.addEventListener('click', function(){ !svgTween51.playing && svgTween51.start(); !svgTween52.playing && svgTween52.start(); +}, false); + +// chained transforms +var svgChained = document.getElementById('svgChained'); +var chainedBtn = document.getElementById('chainedBtn'); +var svgc = svgChained.getElementsByTagName('path')[0]; + +var svgTween6 = KUTE.fromTo(svgc, + { // from + svgTransform: { + translate: 0, + scale: 0.5, + rotate: 45, + // skewX: 0 + }, + }, + { // to + svgTransform: { + translate: 450, + scale: 1.5, + rotate: 360, + // skewX: -45 + } + }, +{transformOrigin: [256,256], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"}); + +chainedBtn.addEventListener('click', function(){ + !svgTween6.playing && svgTween6.start(); }, false); \ No newline at end of file diff --git a/options.html b/options.html index 922f2d8..ab0862a 100644 --- a/options.html +++ b/options.html @@ -82,6 +82,8 @@

    Tween Options

    +

    Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can override these default values, as we'll see later on this page.

    +

    Common Options

    These options affect all types of tweens, no matter the properties used or context.

      @@ -99,9 +101,9 @@
      • perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
      • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML element. This option has no default value and only accepts valid CSS values according to it's specs.
        • -
      • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.
        • -
      • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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.
        • -
      • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a svgTransform property, it can also accept array values: transformOrigin: [250,250].
        • +
      • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation. No default value.
        • +
      • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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 and has no default value.
        • +
      • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a svgTransform property, it can also accept array values: transformOrigin: [250,250]. There is no default value but the SVG Plugin will always use 50% 50% for your transform tweens.

      SVG Plugin Options

      @@ -136,8 +138,31 @@ var callback = function(){ //create object and start animating already KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();       -

      Other

      +

      Other Options

      keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.

      + +

      Override Default Options' Values

      +

      Most options have a default value as you can see above, they are globally defined in the KUTE.defaultOptions object like so:

      +
      // the list of all tween options that can be overrided
+KUTE.defaultOptions = {
+    duration: 700,
+    delay: 0,
+    offset: 0, // allTo() or allFromTo() methods only
+    repeat: 0,
+    yoyo: false,
+    easing: 'linear',
+    keepHex: false,
+    morphPrecision: 15, // SVG Plugin only
+    textChars: 'alpha', // Text Plugin only
+};
+
      + +

      As some user suggested, he would need a way to override the default duration value, here's how to:

      + +
      // sets the new global duration tween option default value 
+KUTE.defaultOptions.duration = 1000;
+
      +

      Also make sure to define the new option global default values before you define your tween objects.

    diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index b5b9dfd..9028f51 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.6.1 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,s=r.prepareStart,o=r.getCurrentStyle,l=(r.truC,r.truD,r.crossCheck),h=e.Interpolate.number,u=(e.Interpolate.unit,e.Interpolate.color,null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1)),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*h(r.s,n.s,a)>>0)/100,o=(100*h(r.e,n.e,a)>>0)/100,l=0-s,u=o+l;t.style.strokeDashoffset=l+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},s.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},s.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},l.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}}); \ No newline at end of file +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},i.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},i.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}}); \ No newline at end of file diff --git a/src/kute-text.min.js b/src/kute-text.min.js index f4c82ad..8c450c1 100644 --- a/src/kute-text.min.js +++ b/src/kute-text.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.6.1 | © dnp_theme | Text Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this}); \ No newline at end of file +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/src/kute.min.js b/src/kute.min.js index e6e71f4..a2386c2 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ // KUTE.js v1.6.1 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*q(t[s],e[s],n)>>0)/100:null;return i?w(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),R=$.translate=B?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},W=$.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},z=$.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},H=$.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},D=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,V.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),nt.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*q(n,i,s)>>0)/10:q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(X in j||(j[X]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?R(n.translate,i.translate,"px",s):"")+("rotate"in n?W(n.rotate,i.rotate,"deg",s):"")+("skew"in n?z(n.skew,i.skew,"deg",s):"")+("scale"in n?H(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?g(p.v):p.v}if("rotate"===t){var f={},v=m(e,!0);return f.z="rad"===v.u?g(v.v):v.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(_?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=Q(n,i,s,r.keepHex)}),y(e)}},J=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var v=p[f];/3d/.test(c)?l["translate"+v]=G.transform.call(this,"translate"+v,t[c][f]):l["translate"+v]="translate"+v in t?G.transform.call(this,"translate"+v,t["translate"+v]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var d=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===d?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[d+w]&&"skewZ"!==c&&(m[d+w]=G.transform.call(this,d+w,t[d+w]))}h[d]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=G.transform.call(this,c,t[c]));n[X]=h}else r.indexOf(c)!==-1?n[c]=G.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=G.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=G.colors.call(this,c,t[c]):c in G&&(n[c]=G[c].call(this,c,t[c]))},V=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},tt=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(V.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||x()},48)},et=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},nt=function(){"scroll"in this.valuesEnd&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(k,et,!1),document.removeEventListener(S,et,!1),document.body.removeAttribute("data-tweening"))},it=function(){"scroll"in this.valuesEnd&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(k,et,!1),document.addEventListener(S,et,!1),document.body.setAttribute("data-tweening","scroll"))},st=function(t){return"function"==typeof t?t:"string"==typeof t?at[t]:void 0},rt=function(){var e={},n=I(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&_){var f=O(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=O(this.element,r)||l[r]:e[r]=r in U?U[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===F?t.pageYOffset||F.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},J.call(this,e,"start"),X in this.valuesEnd)for(var v in this.valuesStart[X])if("perspective"!==v)if("object"==typeof this.valuesStart[X][v])for(var d in this.valuesStart[X][v])"undefined"==typeof this.valuesEnd[X][v]&&(this.valuesEnd[X][v]={}),"number"==typeof this.valuesStart[X][v][d]&&"undefined"==typeof this.valuesEnd[X][v][d]&&(this.valuesEnd[X][v][d]=this.valuesStart[X][v][d]);else"number"==typeof this.valuesStart[X][v]&&"undefined"==typeof this.valuesEnd[X][v]&&(this.valuesEnd[X][v]=this.valuesStart[X][v])},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?F:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},J.call(this,n,"end"),this.options.rpr?this.valuesStart=e:J.call(this,e,"start"),void 0!==this.options.perspective&&X in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[X].perspective=r}for(var a in this.valuesEnd)a in K&&!this.options.rpr&&K[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof st(i.easing)?st(i.easing):at.linear,this.options.repeat=i.repeat||0,this.options.repeatDelay=i.repeatDelay||0,this.options.yoyo=i.yoyo||!1,this.options.duration=i.duration||700,this.options.delay=i.delay||0,this.repeat=this.options.repeat},ut=(ot.prototype={start:function(t){it.call(this),this.options.rpr&&rt.apply(this),N.apply(this);for(var s in this.valuesEnd)s in K&&this.options.rpr&&K[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&D(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,E(this),!i&&D()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(M(this),this.playing=!1,this.paused=!1,nt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),tt.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ht(t[s],e,i[s]))}),lt=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||0):i.delay,this.tweens.push(ct(t[r],e,n,s[r]))},ht=(ut.prototype=lt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},D=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),it.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=y(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?D(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=y(n[0]),s=y(n[1],t3d2=y(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=y(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=y(u[0]),c=u.length?y(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=y(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var f=y(e,!0);return"rad"===f.u?m(f.v):f.v}if("rotate"===t){var p={},d=y(e,!0);return p.z="rad"===d.u?m(d.v):d.v,p}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),w(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var f=["X","Y","Z"],p=0;p<3;p++){var d=f[p];/3d/.test(c)?l["translate"+d]=J.transform.call(this,"translate"+d,t[c][p]):l["translate"+d]="translate"+d in t?J.transform.call(this,"translate"+d,t["translate"+d]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var v=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===v?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[v+w]&&"skewZ"!==c&&(m[v+w]=J.transform.call(this,v+w,t[v+w]))}h[v]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},it=function(){"scroll"in this.valuesEnd&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,nt,!1),document.removeEventListener(P,nt,!1),document.body.removeAttribute("data-tweening"))},st=function(){"scroll"in this.valuesEnd&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,nt,!1),document.addEventListener(P,nt,!1),document.body.setAttribute("data-tweening","scroll"))},rt=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},at=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var f=i[l]+s[c];a.indexOf(f)!==-1&&f in this.valuesStart&&(e[f]=n[f]||h[f])}}else if("scroll"!==r)if("opacity"===r&&B){var p=E(this.element,"filter");e.opacity="number"==typeof p?p:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var d in this.valuesStart[C])if("perspective"!==d)if("object"==typeof this.valuesStart[C][d])for(var v in this.valuesStart[C][d])"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]={}),"number"==typeof this.valuesStart[C][d][v]&&"undefined"==typeof this.valuesEnd[C][d][v]&&(this.valuesEnd[C][d][v]=this.valuesStart[C][d][v]);else"number"==typeof this.valuesStart[C][d]&&"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]=this.valuesStart[C][d])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),this.options.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!this.options.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof rt(i.easing)?rt(i.easing):ot[p.easing],this.options.repeat=i.repeat||p.repeat,this.options.repeatDelay=i.repeatDelay||p.repeatDelay,this.options.yoyo=i.yoyo||p.yoyo,this.options.duration=i.duration||p.duration,this.options.delay=i.delay||p.delay,this.repeat=this.options.repeat},lt=(ut.prototype={start:function(t){st.call(this),this.options.rpr&&at.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,it.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||p.offset):n.delay,this.tweens.push(ct(t[s],e,i[s]))}),ht=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||p.offset):i.delay,this.tweens.push(ft(t[r],e,n,s[r]))},ct=(lt.prototype=ht.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n

    The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set transformOrigin option to 50% 50%, but this animation doesn't work in IE browsers, while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the rotate: 360 notation and the animation shows the shape rotating around it's own central point and without any option, an animation that DO WORK in all SVG enabled browsers.

    -

    When for CSS3 transforms we could have used values such as center bottom as transform-origin (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes to SVGs the plugin here will compute the transformOrigin tween setting value accordingly to use a shape's .getBBox() value to determine for instance the coordinates for 25% 75% position for instance or center top.

    +

    When for CSS3 transforms we could have used values such as center bottom as transform-origin (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes to SVGs the plugin here will compute the transformOrigin tween setting value accordingly to use a shape's .getBBox() value to determine for instance the coordinates for 25% 75% position or center top.

    In other cases you may want to rotate shapes around the center point of the parent <svg> or <g> element, and we use it's .getBBox() to determine the 50% 50% coordinate, so here's how to deal with it:

    // rotate around parent svg's "50% 50%" coordinate as transform-origin
 // get the bounding box of the parent element
-var svgBB = element.ownerSVGElement.getBBox(); // returns same object but it's for the parent <svg> element
+var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent <svg> element
 
 // we need to know the current translate position of the element [x,y]
 // in our case is:
@@ -365,7 +365,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
 				Start	
 			
 		
-        
    This is the only example we have adapted the transform-origin for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, so make sure to check svg.js file.
    
+        
    Note that this is the only SVG transform example in which we have adapted the transform-origin for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check svg.js file.
    
 
         
    SVG Translation
    
         
    In this example we'll have a look at translations, so when setting translate: [150,0], the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation. When translate: 150 notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:
    
@@ -379,7 +379,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
 				Start	
 			
 		
-        
    The first tween uses the CSS3 translate: 580 notation and the second tween uses the translate: [0,0] as svgTransform value. For the second example the values are unitless and are relative to the viewBox attribute.
    
+        
    The first tween uses the CSS3 translate: 580 notation for the end value, while the second tween uses the translate: [0,0] as svgTransform value. For the second example the values are unitless and are relative to the viewBox attribute.
    
         
         
    SVG Skew
    
         
    For skews for SVGs we have a very simple notation: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:
    
@@ -402,14 +402,14 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
                             
                             
             
-	
+
 			
    
 				Start	
 			
    
 		
         
    The first tween scales the shape at scale: 1.5 via regular CSS3 transforms, and the second tween scales down the shape at scale: 0.5 value via svgTransform. If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected 50% 50% value. A similar case as with the skews.
    
 
-        
    SVG Mixed Transforms
    
+        
    SVG Mixed Transform Functions
    
         
    Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation transform-origin to make it look as you would expect it from regular HTML elements. Let's combine 3 functions at the same time and see what happens:
    
 		
    
              
@@ -423,23 +423,44 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
 		
    
         
    Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. If you inspect the elements, you will notice the second shape's translation is different from what we've set in the tween object, and this is to keep transform-origin at an expected 50% 50% value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.
    
         
+        
    Chained SVG transforms
    
+        
    The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom transform-origin, it should look like this:
    
+
    <svg>
+    <circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20"></circle>
+</svg>
+
    
+    
    Well in this case I would recommend using the values of the first translation as transform-origin for your tween built with the .fromTo() method like so:
    
+
    // a possible workaround for animating a SVG element that uses chained transform functions
+KUTE.fromTo(element, 
+    {svgTransform : { translate: 0, rotate: 45, scale: 0.5 }}, // we asume the current translation is zero on both X & Y axis
+    {svgTransform : { translate: 450, rotate: 0, scale: 1.5 }}, // we will translate the X to a 450 value and scale to 1.5
+    {transformOrigin: [256,256]} // tween options use the transform-origin of the target SVG element
+).start();
+
    
+        
    Before you hit the Start button, make sure to check the transform attribute value.
    
+		
    
+             
+                            
+            
+	
+			
    
+				Start	
+			
    
+		
    
+        
    This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.
    
+
         
    Recommendations for SVG Transforms
    
         
      
-            
    • The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and always uses same order of transform functions: translate, rotate, skewX, skewY and  scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements. Keep in mind that the SVG transforms will use the center of a shape as transform origin by default.
      • 
+            
    • The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and always uses same order of transform functions: translate, rotate, skewX, skewY and  scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.
      • 
+            
    • Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.
      • 
             
    • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
      • 
             
    • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible or some browser specific tricks if that is the case.
      • 
             
    • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply don't work. You might want to check this tutorial.
      • 
-            
    • Similar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the .to() method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow the properties that change and I highly recommend checking the example code for skews in the svg.js file.
      • 
+            
    • Similar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the .to() method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all the properties and I highly recommend checking the example code for skews in the svg.js file.
      • 
             
    • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
      • 
-            
    • Also the svgTransform feature does not support 3D transforms, because they are not supported in all browsers.
      • 
-            
    • This feature does not work with SVG specific chained transforms right away (do not confuse with tween chain), but luckily there is a workaround
      EG: transform="translate(150,150) rotate(45) translate(-150,-150)".
      In this case I would recommend using the values of the first translation as transform-origin for your tween, like so:
      
-
      // a possible workaround for animating a SVG element that uses chained transform functions
-KUTE.fromTo(element, 
-    {svgTransform : { translate: 0, rotate: 45, skewX: 0 }}, // startValues we asume the current translation is zero on both X and Y axis
-    {svgTransform : { translate: 450, rotate: 180, skewX: 20 }}, // endValues we will translate to a 450 value horizontaly and skew the X axis by 20 degrees
-    {transformOrigin: [150,150]} // tween options use the transform-origin of the target SVG element
-).start();
-
      This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system.
      • 
+            
    • Also the svgTransform tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.
      • 
         
    
 
 

From b4147057781e767f7371f3bcdae66fa412cc22d8 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 14 Jan 2017 22:03:21 +0200
Subject: [PATCH 122/187] Fixed missing default value for `repeatDelay`.

---
 src/kute-attr.min.js   | 2 +-
 src/kute-css.min.js    | 2 +-
 src/kute-jquery.min.js | 2 +-
 src/kute-svg.min.js    | 2 +-
 src/kute-text.min.js   | 2 +-
 src/kute.min.js        | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index 35e3800..259ddcc 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.1 | © dnp_theme | Attributes Plugin | MIT-License
+// KUTE.js v1.6.2 | © dnp_theme | Attributes Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index ea86800..362e008 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.1 | © dnp_theme | CSS Plugin | MIT-License
+// KUTE.js v1.6.2 | © dnp_theme | CSS Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
\ No newline at end of file
diff --git a/src/kute-jquery.min.js b/src/kute-jquery.min.js
index 88e6d71..0cb6f53 100644
--- a/src/kute-jquery.min.js
+++ b/src/kute-jquery.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.1 | © dnp_theme | jQuery Plugin | MIT-License
+// KUTE.js v1.6.2 | © dnp_theme | jQuery Plugin | MIT-License
 !function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index 9028f51..d8ed414 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.1 | © dnp_theme | SVG Plugin | MIT-License
+// KUTE.js v1.6.2 | © dnp_theme | SVG Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},i.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},i.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
diff --git a/src/kute-text.min.js b/src/kute-text.min.js
index 8c450c1..339196c 100644
--- a/src/kute-text.min.js
+++ b/src/kute-text.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.1 | © dnp_theme | Text Plugin | MIT-License
+// KUTE.js v1.6.2 | © dnp_theme | Text Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index a2386c2..f22cc8a 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.1 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},D=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),it.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=y(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?D(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=y(n[0]),s=y(n[1],t3d2=y(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=y(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=y(u[0]),c=u.length?y(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=y(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var f=y(e,!0);return"rad"===f.u?m(f.v):f.v}if("rotate"===t){var p={},d=y(e,!0);return p.z="rad"===d.u?m(d.v):d.v,p}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),w(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var f=["X","Y","Z"],p=0;p<3;p++){var d=f[p];/3d/.test(c)?l["translate"+d]=J.transform.call(this,"translate"+d,t[c][p]):l["translate"+d]="translate"+d in t?J.transform.call(this,"translate"+d,t["translate"+d]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var v=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],m="rotate"===v?u:i,y=0;y<3;y++){var w=g[y];void 0!==t[v+w]&&"skewZ"!==c&&(m[v+w]=J.transform.call(this,v+w,t[v+w]))}h[v]=m}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},it=function(){"scroll"in this.valuesEnd&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,nt,!1),document.removeEventListener(P,nt,!1),document.body.removeAttribute("data-tweening"))},st=function(){"scroll"in this.valuesEnd&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,nt,!1),document.addEventListener(P,nt,!1),document.body.setAttribute("data-tweening","scroll"))},rt=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},at=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var f=i[l]+s[c];a.indexOf(f)!==-1&&f in this.valuesStart&&(e[f]=n[f]||h[f])}}else if("scroll"!==r)if("opacity"===r&&B){var p=E(this.element,"filter");e.opacity="number"==typeof p?p:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var d in this.valuesStart[C])if("perspective"!==d)if("object"==typeof this.valuesStart[C][d])for(var v in this.valuesStart[C][d])"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]={}),"number"==typeof this.valuesStart[C][d][v]&&"undefined"==typeof this.valuesEnd[C][d][v]&&(this.valuesEnd[C][d][v]=this.valuesStart[C][d][v]);else"number"==typeof this.valuesStart[C][d]&&"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]=this.valuesStart[C][d])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),this.options.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!this.options.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof rt(i.easing)?rt(i.easing):ot[p.easing],this.options.repeat=i.repeat||p.repeat,this.options.repeatDelay=i.repeatDelay||p.repeatDelay,this.options.yoyo=i.yoyo||p.yoyo,this.options.duration=i.duration||p.duration,this.options.delay=i.delay||p.delay,this.repeat=this.options.repeat},lt=(ut.prototype={start:function(t){st.call(this),this.options.rpr&&at.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,it.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||p.offset):n.delay,this.tweens.push(ct(t[s],e,i[s]))}),ht=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||p.offset):i.delay,this.tweens.push(ft(t[r],e,n,s[r]))},ct=(lt.prototype=ht.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},D=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),it.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?D(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?y(p.v):p.v}if("rotate"===t){var f={},d=m(e,!0);return f.z="rad"===d.u?y(d.v):d.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),w(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var d=p[f];/3d/.test(c)?l["translate"+d]=J.transform.call(this,"translate"+d,t[c][f]):l["translate"+d]="translate"+d in t?J.transform.call(this,"translate"+d,t["translate"+d]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var v=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],y="rotate"===v?u:i,m=0;m<3;m++){var w=g[m];void 0!==t[v+w]&&"skewZ"!==c&&(y[v+w]=J.transform.call(this,v+w,t[v+w]))}h[v]=y}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},it=function(){"scroll"in this.valuesEnd&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,nt,!1),document.removeEventListener(P,nt,!1),document.body.removeAttribute("data-tweening"))},st=function(){"scroll"in this.valuesEnd&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,nt,!1),document.addEventListener(P,nt,!1),document.body.setAttribute("data-tweening","scroll"))},rt=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},at=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var d in this.valuesStart[C])if("perspective"!==d)if("object"==typeof this.valuesStart[C][d])for(var v in this.valuesStart[C][d])"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]={}),"number"==typeof this.valuesStart[C][d][v]&&"undefined"==typeof this.valuesEnd[C][d][v]&&(this.valuesEnd[C][d][v]=this.valuesStart[C][d][v]);else"number"==typeof this.valuesStart[C][d]&&"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]=this.valuesStart[C][d])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),this.options.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!this.options.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof rt(i.easing)?rt(i.easing):ot[f.easing],this.options.repeat=i.repeat||f.repeat,this.options.repeatDelay=i.repeatDelay||f.repeatDelay,this.options.yoyo=i.yoyo||f.yoyo,this.options.duration=i.duration||f.duration,this.options.delay=i.delay||f.delay,this.repeat=this.options.repeat},lt=(ut.prototype={start:function(t){st.call(this),this.options.rpr&&at.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,it.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||f.offset):n.delay,this.tweens.push(ct(t[s],e,i[s]))}),ht=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||f.offset):i.delay,this.tweens.push(pt(t[r],e,n,s[r]))},ct=(lt.prototype=ht.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n
Date: Sat, 14 Jan 2017 23:07:41 +0200
Subject: [PATCH 123/187] Some minor documentation fixes.

---
 api.html     |  6 +++---
 options.html |  1 +
 start.html   | 26 +++++++++++++-------------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/api.html b/api.html
index aa3915a..8518d8c 100644
--- a/api.html
+++ b/api.html
@@ -187,7 +187,7 @@ stopButton.addEventListener('click', function(){

    Chaining Tweens

    -

    .chain() method can be used to chain tweens together. When the animation finishes for a given tween, it triggers the animation start for another tween.

    +

    .chain() method can be used to chain tweens together. When the animation finishes for a given tween, it calls for .start() for another tween(s).

    var tween2 = KUTE.fromTo(div,{left:50},{left:0});
 
 //the first tween chains the new tween
@@ -204,7 +204,7 @@ tween.chain(tween1,tween2);
 
         
    Another thing we talked before is the ability to chain to one of the tween object within the array built with .allTo() or .allFromTo() methods.
    
 
    // chain to a tween from collection
-var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1}, {opacity: 0});
+var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
 
 // considering the collection has 5 tweens,
 // the array is right here tweensCollection.tweens, so
@@ -213,7 +213,7 @@ tweensCollection.tweens[1].chain(tween2);
 
    
 		
    Also we can chain the tweens created with .allTo() and .allFromTo() methods like this:
    
 
    // chain a collection of tweens to another tween
-var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1}, {opacity: 0});
+var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
 
 // the array is right here tweensCollection2.tweens
 // we can pass it in the chain of another tween
diff --git a/options.html b/options.html
index ab0862a..fbd1886 100644
--- a/options.html
+++ b/options.html
@@ -149,6 +149,7 @@ KUTE.defaultOptions = {
     delay: 0,
     offset: 0, // allTo() or allFromTo() methods only
     repeat: 0,
+    repeatDelay: 0,
     yoyo: false,
     easing: 'linear',
     keepHex: false,
diff --git a/start.html b/start.html
index 76cbcee..3c507e0 100644
--- a/start.html
+++ b/start.html
@@ -116,23 +116,23 @@ define([
         
 		
    Websites
    
 		
    In your website add the following code, the best would be to put it at the end of your body tag:
    
-
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> <!-- core KUTE.js -->
    
+
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
         
    An alternate CDN link here:
    
-
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute.min.js"></script> <!-- core KUTE.js -->
    
+
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
 
 		
    The CDN repositories receive latest updates here and right here. You might also want to include the tools that you need for your project:
    
-
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
         
    Alternate CDN links:
    
-
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
 		
    Your awesome animation coding would follow after these script links.
    		
 		
@@ -169,7 +169,7 @@ define([
 
 	
 
-
+
 
  
  

From 449f5ed1e358c883ae477633e7da7be37572c772 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 23 Jan 2017 15:55:10 +0200
Subject: [PATCH 124/187] Minor documentation fixes:

* Documentation updates
* Fixed navigation on IE8
---
 about.html            |  366 +++++++++------
 api.html              |  534 +++++++++++----------
 assets/js/minifill.js |  714 ++++++++++++++--------------
 assets/js/scripts.js  |   45 +-
 attr.html             |  279 +++++------
 css.html              |  354 +++++++-------
 easing.html           |  611 ++++++++++++------------
 examples.html         | 1040 +++++++++++++++++++++--------------------
 extend.html           |  345 +++++++-------
 features.html         |  376 ++++++++-------
 index.html            |  449 +++++++++---------
 options.html          |  296 ++++++------
 performance.html      |  188 +++++---
 properties.html       |  452 ++++++++++--------
 start.html            |  220 ++++-----
 svg.html              |  731 ++++++++++++++++-------------
 text.html             |  285 +++++------
 17 files changed, 3871 insertions(+), 3414 deletions(-)

diff --git a/about.html b/about.html
index abe5ee5..2fe226f 100644
--- a/about.html
+++ b/about.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,170 +14,238 @@
     
     
     
-     
+    
+    
 
     About KUTE.js | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-    
+
     
-    
+    
+    
+
+    
+
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
    
+            
    
+        
    
+
+        
    
+
+            
    Did you know?
    
+            
    Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween 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 vertical sync, etc). The term was introduced to the world of web development by early Javascrpt
+                libraries and later used in dedicated animation libraries such as GSAP, Dynamics, Velocity,
+                Shifty, our own KUTE.js here and many others. When used as a verb, it actually reffers to the interpolation of the values.
    
+            
    Tween Object is a Javascript Object 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 tween actually refers to the tween object.
    
+            
    polyfill 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 natively". Basically a polyfill covers what
+                legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. More details.
    
+            
    requestAnimationFrame is a Javascript method developed to enable hardware acceleration animations for the
+                web today. In Javascript, the window.requestAnimationFrame(callback); method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a polyfil                to cover the legacy browsers chaos.
    
+            
    JANK 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
+                explain all about it, so you don't have to stay in the dark.
    
+            
    Methods are functions that create tween objects or control the animation for KUTE.js, so we will encounter mostly main methods and tween control methods. Once a main method is used, then
+                the control methods apply in a specific order.
    
+
+
+            
    How Does It Work?
    
+            
    Well, first things first: it's smart built. Let's briefly explain the phases:
    
+            
      
+                
    1. 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.
      2. 
+                
    2. 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 .to() 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.
      3. 
+                
    3. In the third phase KUTE.js is ready to start the animation, but the animation starts only after the .start() function, if used, has finished. When animation starts, KUTE.js will start ticking on the frequency decided
+                    by requestAnimationFrame or setInterval for legacy browsers, quickly updating the style for the properties and execute the update:function callback if any. Also while animating, KUTE.js will begin
+                    listening for your tween control input such as .pause() or .stop() or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.
      4. 
+                
    4. When tween animation is finished, the complete:function callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with cancelAnimationFrame to save power.
      5. 
+            
    
+            
    Basically, this is it!
    
+
+            
    A Note On Performance
    
+            
    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. We'll dig into each case, by property type or anything that can be considered a factor of influence.
    
+
+            
    Function Nesting
    
+            
    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 click, scroll or resize, 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 resize.
    
+            
    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: if (window.clientWidth > 760) { myTween.start() }. 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.
    
+
+            
    Translate and Position
    
+            
    While the code execution is the fastest for the layout modifiers or what we call box-model, say the position based properties set such as left or top, they may force
+                the entire page layout to change if not absolutelly positioned and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side translate doesn't trigger
+                a repaint but involves more complex operations such as more object traversing, string concatenation or check for certain conditions to be met. All of this is because translate is part of transform CSS3 property
+                that has to stack in a single line many more properties such as rotate, skew and scale. An article                by Paul Irish explains more about differences in performance between position and translation.
    
+            
    Also any transform property is sub-pixel enabled and requires one or more decimals for accurate and smooth animation, decreasing overall performance. That said and with the emerging high resolution displays, it's safe to speculate that at
+                least translation could be optimized by rounding the values, while scale, rotation and skew requires three decimals.
    
+
+            
    To put it short left executes faster but requires repaint on every frame while translateX or translate3d execute slower but require no repaint on each animation
+                frame. The winner is left, 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 overall winner is translate.
+                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.
    
+
+            
    Translate, TranslateX and Translate3D
    
+            
    While running a 2D translate:150 animation could score similar performance as translateX:150, interestingly, translate3d:[150,0,0] is slightly faster than the other translations. Some performance tests                confirm that translate3d is the prefered property for hardware acceleration. For this reason, translate3d is the winner and KUTE.js always uses it even if you only use translateX or
+                translateY for instance.
+                
    
+                    
    Similarly, if you animate the 2D translate this always goes translate(x,y) even if you use translate:150 (only for the X axis) or translate:[150,0] (both X and Y axis), for better
+                        performance as well. And by the way, this works great on IE9 and other legacy browsers.
    
+
+                    
    Box Model
    
+                    
    We compared position with transition above, but now we are going to talk about other issues related to resizers: width, height, margin,
+                        padding and borderWidth 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 all browsers, especially when you animate these resize properties. When this toxic combination occurs animating a large amount of elements could crash any browser,
+                        no exception, and I think any developer should know about this.
    
+                    
    The resize event triggered by these resizer properties can cause some severe issues with legacy browsers 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.
    
+                    
    A workaound for 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 elements themselves. 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.
    
+
+                    
    RGB and HEX
    
+                    
    When animating any color property such as (text) color or background-color, KUTE.js always uses/converts to RGB/RGBA, but there is a keepHex:true                        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 RGB the winner.
    
+
+                    
    TO and FROMTO
    
+                    
    The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are .to() and .fromTo(). While .to() is much more simple and convenient to use, very useful for
+                        tween chaining, it has to process the starting values on every .start() delaying the animation for a few miliseconds depending on the browser and hardware, making .fromTo() the winner. 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 .fromTo() properly.
    
+
+                    
    Easing Functions
    
+                    
    KUTE.js comes with 3 packs of easing functions: the popular easing functions by Robert Penner, dynamics physics easing
+                        functions by Michael Villar and bezier-easing 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 winner.
    
+                    
    The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the cubic-bezier based functions have a 0.0000001
+                        error margin, while the Exponential 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.
    
+
+                    
    Garbage Collection
    
+                    
    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.
    
+                    
    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 page.
    
+
+                    
    Property Value Complexity
    
+                    
    Just like the high amount of simultaneous animations influence performance, the property value complexity is also an important factor. If we were to compare all the supported properties in terms of complexity, the list would go like
+                        this (from most expensive to least): path morphing, regular transform, matrix3d (not yet supported), box-shadow / text-shadow, colors, box model*, unitless props (scroll, opacity).
    
+                    
    The * wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.
    
+
+                    
    OSs, Desktops and Mobiles
    
+                    
    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).
    
+                    
    The results show Windows 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!
    
+
+                    
    The browsers' performance goes like this (from best to poorest): Google Chrome, 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. Some argue that
+                        Safari outperforms Google Chrome due to the latest Webkit upgrade.
    
+
+                    
    Also know that legacy browsers don't support requestAnimationFrame and pollyfills usually replace it with setInterval, a clasic Javascript method that's
+                        significantly affecting performance, because it's one of the main causes for lots of JANK.
    
+
+                    
    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. 
    
+
+                    
    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 these guys                        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.
    
+
+                    
    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 Google I/O 2014 presentation.
+                        Now you understand how much performance really matters.
    
+                    
    Remember: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.
    
+
+                    
    KUTE.js Project
    
+                    
    KUTE.js continues what was started with jQueryTween (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.
    
+                    
    It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.
    
+                    
    In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, Text Plugin, 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.
    
+                    
    Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.
    
+
+                    
+        
    
+
+        
+        
+
     
-
-	
    
-		
-		
    Did you know?
    
-		
    Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween 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 vertical sync, etc). The term was introduced to the world of web development by early Javascrpt libraries and later used in dedicated animation libraries such as GSAP, Dynamics, Velocity, Shifty, our own KUTE.js here and many others. When used as a verb, it actually reffers to the interpolation of the values.
    
-		
    Tween Object is a Javascript Object 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 tween actually refers to the tween object.
    
-		
    polyfill 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 natively". Basically a polyfill covers what legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. More details.
    
-		
    requestAnimationFrame is a Javascript method developed to enable hardware acceleration animations for the web today. In Javascript, the window.requestAnimationFrame(callback); method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a polyfil to cover the legacy browsers chaos.
    
-		
    JANK 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 explain all about it, so you don't have to stay in the dark.
    
-		
    Methods are functions that create tween objects or control the animation for KUTE.js, so we will encounter mostly main methods and tween control methods. Once a main method is used, then the control methods apply in a specific order.
    
-
-		
-		
    How Does It Work?
    
-		
    Well, first things first: it's smart built. Let's briefly explain the phases:
    
-		
      
-			
    1. 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.
      2. 
-			
    2. 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 .to() 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.
      3. 
-			
    3. In the third phase KUTE.js is ready to start the animation, but the animation starts only after the .start() function, if used, has finished. When animation starts, KUTE.js will start ticking on the frequency decided by requestAnimationFrame or setInterval for legacy browsers, quickly updating the style for the properties and execute the update:function callback if any. Also while animating, KUTE.js will begin listening for your tween control input such as .pause() or .stop() or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.
      4. 
-			
    4. When tween animation is finished, the complete:function callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with cancelAnimationFrame to save power.
      5. 
-		
    
-		
    Basically, this is it!
    
-		
-		
    A Note On Performance
    
-		
    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. We'll dig into each case, by property type or anything that can be considered a factor of influence.
    
-		
-		
    Function Nesting
    
-		
    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 click, scroll or resize, 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 resize.
     
-        
    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: if (window.clientWidth > 760) { myTween.start() }. 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.
    
-        
-		
    Translate and Position
    
-		
    While the code execution is the fastest for the layout modifiers or what we call box-model, say the position based properties set such as left or top, they may force the entire page layout to change if not absolutelly positioned and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side translate doesn't trigger a repaint but involves more complex operations such as more object traversing, string concatenation or check for certain conditions to be met. All of this is because translate is part of transform CSS3 property that has to stack in a single line many more properties such as rotate, skew and scale. An article by Paul Irish explains more about differences in performance between position and translation.
    
-		
    Also any transform property is sub-pixel enabled and requires one or more decimals for accurate and smooth animation, decreasing overall performance. That said and with the emerging high resolution displays, it's safe to speculate that at least translation could be optimized by rounding the values, while scale, rotation and skew requires three decimals.
    
-
-		
    To put it short left executes faster but requires repaint on every frame while translateX or translate3d execute slower but require no repaint on each animation frame. The winner is left, 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 overall winner is translate. 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.
    
-		
-		
    Translate, TranslateX and Translate3D
    
-		
    While running a 2D translate:150 animation could score similar performance as translateX:150, interestingly, translate3d:[150,0,0] is slightly faster than the other translations. Some performance tests confirm that translate3d is the prefered property for hardware acceleration. For this reason, translate3d is the winner and KUTE.js always uses it even if you only use translateX or translateY for instance.
     
-		
    Similarly, if you animate the 2D translate this always goes translate(x,y) even if you use translate:150 (only for the X axis) or translate:[150,0] (both X and Y axis), for better performance as well. And by the way, this works great on IE9 and other legacy browsers.
    
-		
-		
    Box Model
    
-		
    We compared position with transition above, but now we are going to talk about other issues related to resizers: width, height, margin, padding and borderWidth 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 all browsers, especially when you animate these resize properties. When this toxic combination occurs animating a large amount of elements could crash any browser, no exception, and I think any developer should know about this.
    
-		
    The resize event triggered by these resizer properties can cause some severe issues with legacy browsers 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.
     
-		
    A workaound for 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 elements themselves. 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.
    
-		
-		
    RGB and HEX
    
-		
    When animating any color property such as (text) color or background-color, KUTE.js always uses/converts to RGB/RGBA, but there is a keepHex:true 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 RGB the winner.
    
-		
-		
    TO and FROMTO
    
-		
    The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are .to() and .fromTo(). While .to() is much more simple and convenient to use, very useful for tween chaining, it has to process the starting values on every .start() delaying the animation for a few miliseconds depending on the browser and hardware, making .fromTo() the winner. 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 .fromTo() properly.
    
-	
-		
    Easing Functions
    
-		
    KUTE.js comes with 3 packs of easing functions: the popular easing functions by Robert Penner, dynamics physics easing functions by Michael Villar and bezier-easing 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 winner.
    
-		
    The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the cubic-bezier based functions have a 0.0000001 error margin, while the Exponential 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.
    
-		
-		
    Garbage Collection
    
-		
    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.
    		
-		
    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 page.
    
-	
-		
    Property Value Complexity
    
-		
    Just like the high amount of simultaneous animations influence performance, the property value complexity is also an important factor. If we were to compare all the supported properties in terms of complexity, the list would go like this (from most expensive to least): path morphing, regular transform, matrix3d (not yet supported), box-shadow / text-shadow,  colors, box model*, unitless props (scroll, opacity).
    
-        
    The * wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.
    
-        
-		
    OSs, Desktops and Mobiles
    
-		
    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).
     
-		
    The results show Windows 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!
    
-		
-		
    The browsers' performance goes like this (from best to poorest): Google Chrome, 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. Some argue that Safari outperforms Google Chrome due to the latest Webkit upgrade.
    
-
-		
    Also know that legacy browsers don't support requestAnimationFrame and pollyfills usually replace it with setInterval, a clasic Javascript method that's significantly affecting performance, because it's one of the main causes for lots of JANK.
    
-		
-		
    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. 
    
-		
-		
    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 these guys 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.
     
-		
-		
    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 Google I/O 2014 presentation. Now you understand how much performance really matters.
    
-		
    Remember: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.
    			
-		
-		
    KUTE.js Project
    
-		
    KUTE.js continues what was started with jQueryTween (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.
    
-		
    It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.
    
-		
    In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, Text Plugin, 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.
    
-		
    Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.
    
-		
-		
-	
    
-	  
-      
-     
-
- 
- 
+    
 
 
-
-	
- 
- 
+    
+    
+    
+    
+    
 
 
+
 
diff --git a/api.html b/api.html
index 8518d8c..d930791 100644
--- a/api.html
+++ b/api.html
@@ -1,259 +1,275 @@
-
-
-
-
-
-  
-
-
-    
-    
-    
-    
-    
-    
-     
-
-    KUTE.js Developer API | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-	
-    
-
-	
-	
-
-    
-    
-
-	
-	
-
-
-
-
-  
    
-
-  
    
-
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
-
-
-	
    
-		
    Public Methods
    
-		
    These methods allow you to create tween objects and collections of tween objects; 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.
    
-
-		
    Single Tween Object
    
-		
    As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, 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.
    
-        
    .to() 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 .fromTo() method as it has to compute the default/current value on tween .start() 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 .start() method for the solution for sync/delay issue.
    
-		
    Considering a given div element is already transparent, a super quick example would be:
    
-
    KUTE.to(div,{opacity:1}).start()
    
-		
    As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.
    
-        
    .fromTo() 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 .to() 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 features page. Here's a quick example:
    
-
    KUTE.fromTo(div,{opacity:1},{opacity:0}).start()
    
-
-		
    Tween Object Collections
    
-        
    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.
    
-		
    .allTo() method allows you to create an array of tween objects for a collection of elements. This method is using the above .to() method and inherits it's functionality. Considering a given collection myDivs elements, a nice example would be:
    
-
    // 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} );
-
    
-
-		
    .allFromTo() method is also a method to animate a collection of elements and it uses the .fromTo() method. Quick example:
    
-
    KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()
    
-
-        
    As you can see the above code, these methods have a specific tween option called offset 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 .chain() method. In order to chain another tween to one of the myDivsTweens objects, we would need to access it from the array, but let's leave that for later.
    
-	
    
-
-	
    
-		
    Tween Control Methods
    
-		
    These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:
    
-
    var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});
    
-		
    This tween object is now ready to work with the methods.
    
-
-		
    Starting Animations
    
-		
    .start() 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 .allTo() and .allFromTo() methods.
    
-
    //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();
-
    
-
-		
    As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue). 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 eliminates any syncronization issue that may occur on animations start, even if you are using the .to() method. The trick is super duper simple:
    
-
-
    // 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);
-}
-
    
-
-		
    In other cases the new methods .allTo() and .allFromTo() can be more useful.
    
-
-		
    Stopping Animation
    
-		
    .stop() method stops animation for a given tween object or an array of tween objects (built with .to()/.fromTo() 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 click action:
    
-
    // for a tween object
-stopButton.addEventListener('click', function(){
-	myTween.stop(); // myMultiTweens.stop();
-}, false);
-
    
-
-		
    Pausing Animation
    
-		
    .pause() method freezez the animation at any given time for a given tween object or collection, and unlike the .stop() method, this one allows resuming the animation on a later use of the next method .play().
    
-
    pauseButton.addEventListener('click', function(){
-	tween.pause(); // or myMultiTweens.pause();
-}, false);
-
    
-
-		
    Resuming Paused Animation
    
-		
    .play() or .resume() 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.
    
-
    playButton.addEventListener('click', function(){
-	tween.play(); // or tween.resume(); || or myMultiTweens.resume();
-}, false);
-
    
-
-		
    Chaining Tweens
    
-		
    .chain() method can be used to chain tweens together. When the animation finishes for a given tween, it calls for .start() for another tween(s).
    
-
    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);
-
    
-
-		
    It's also possible to chain multiple tweens, just as shown in the below example.
    
-
    //chain multiple tweens
-tween.chain(tween1,tween2);
-
    
-
-        
    Another thing we talked before is the ability to chain to one of the tween object within the array built with .allTo() or .allFromTo() methods.
    
-
    // chain to a tween from collection
-var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
-
-// 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);
-
    
-		
    Also we can chain the tweens created with .allTo() and .allFromTo() methods like this:
    
-
    // chain a collection of tweens to another tween
-var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
-
-// the array is right here tweensCollection2.tweens
-// we can pass it in the chain of another tween
-tween2.chain(tweensCollection2.tweens);
-
    
-	
    
-
-	
    
-
-    
-
-	
    
-
-      
-     
-
- 
    
-
-
-
-
-
-
-
-
-
-
-
- 
- 
-
-
+
+
+
+
+
+
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Developer API | Javascript Animation Engine
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+    
+
+    
+
+
+
+
+    
    
+
+    
    
+
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+
+        
    
+            
    Public Methods
    
+            
    These methods allow you to create tween objects and collections of tween objects; 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.
    
+
+            
    Single Tween Object
    
+            
    As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, 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.
    
+            
    .to() 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 .fromTo() method as it has to compute the default/current value on tween .start() 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 .start() method for the solution for sync/delay issue.
    
+            
    Considering a given div element is already transparent, a super quick example would be:
    
+            
    KUTE.to(div,{opacity:1}).start()
    
+            
    As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.
    
+            
    .fromTo() 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 .to() 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 features page. Here's a quick example:
    
+            
    KUTE.fromTo(div,{opacity:1},{opacity:0}).start()
    
+
+            
    Tween Object Collections
    
+            
    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.
    
+            
    .allTo() method allows you to create an array of tween objects for a collection of elements. This method is using the above .to() method and inherits it's functionality. Considering a given collection myDivs                elements, a nice example would be:
    
+            
    // 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} );
+
    
+
+            
    .allFromTo() method is also a method to animate a collection of elements and it uses the .fromTo() method. Quick example:
    
+            
    KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()
    
+
+            
    As you can see the above code, these methods have a specific tween option called offset 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 .chain() method. In order to chain another tween to one of the myDivsTweens objects, we would need to access it from the array, but let's leave that for later.
    
+        
    
+
+        
    
+            
    Tween Control Methods
    
+            
    These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:
    
+            
    var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});
    
+            
    This tween object is now ready to work with the methods.
    
+
+            
    Starting Animations
    
+            
    .start() 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 .allTo() and .allFromTo() methods.
    
+            
    //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();
+
    
+
+            
    As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue). 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 eliminates any syncronization issue that may occur on animations start, even if you are using the .to() method. The trick is super duper simple:
    
+
+            
    // 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);
+}
+
    
+
+            
    In other cases the new methods .allTo() and .allFromTo() can be more useful.
    
+
+            
    Stopping Animation
    
+            
    .stop() method stops animation for a given tween object or an array of tween objects (built with .to()/.fromTo() 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 click action:
    
+            
    // for a tween object
+stopButton.addEventListener('click', function(){
+  myTween.stop(); // myMultiTweens.stop();
+}, false);
+
    
+
+            
    Pausing Animation
    
+            
    .pause() method freezez the animation at any given time for a given tween object or collection, and unlike the .stop() method, this one allows resuming the animation on a later use of the next method .play().
    
+            
    pauseButton.addEventListener('click', function(){
+  tween.pause(); // or myMultiTweens.pause();
+}, false);
+
    
+
+            
    Resuming Paused Animation
    
+            
    .play() or .resume() 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.
    
+            
    playButton.addEventListener('click', function(){
+  tween.play(); // or tween.resume(); || or myMultiTweens.resume();
+}, false);
+
    
+
+            
    Chaining Tweens
    
+            
    .chain() method can be used to chain tweens together. When the animation finishes for a given tween, it calls for .start() for another tween(s).
    
+            
    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);
+
    
+
+            
    It's also possible to chain multiple tweens, just as shown in the below example.
    
+            
    //chain multiple tweens
+tween.chain(tween1,tween2);
+
    
+
+            
    Another thing we talked before is the ability to chain to one of the tween object within the array built with .allTo() or .allFromTo() methods.
    
+            
    // chain to a tween from collection
+var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
+
+// 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);
+
    
+            
    Also we can chain the tweens created with .allTo() and .allFromTo() methods like this:
    
+            
    // chain a collection of tweens to another tween
+var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
+
+// the array is right here tweensCollection2.tweens
+// we can pass it in the chain of another tween
+tween2.chain(tweensCollection2.tweens);
+
    
+        
    
+
+        
    
+
+            
+
+        
    
+
+        
+        
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+
+    
+
+    
+    
+    
+    
+
+
+
diff --git a/assets/js/minifill.js b/assets/js/minifill.js
index 4300e4d..43d8d0e 100644
--- a/assets/js/minifill.js
+++ b/assets/js/minifill.js
@@ -1,348 +1,382 @@
-// Document
-// HTMLDocument is an extension of Document.  If the browser has HTMLDocument but not Document, the former will suffice as an alias for the latter.
-if (!this.Document){this.Document = this.HTMLDocument; }
-
-// Element
-if (!window.HTMLElement) { window.HTMLElement = window.Element; }
-
-// Window
-(function(global) {
-	if (global.constructor) {
-		global.Window = global.constructor;
-	} else {
-		(global.Window = global.constructor = new Function('return function Window() {}')()).prototype = this;
-	}
-}(this));
-
-// Date.now
-if(!Date.now){ Date.now = function now() { return new Date().getTime(); }; }
-
-// performance.now
+// minifill.js | MIT | dnp_theme
 (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;
-		}
-	}
-})();
+
+  // all repeated strings get a single reference
+  // document | window | element + corrections
+  var Doc = 'Document', doc = document, DOCUMENT = this[Doc] || this.HTMLDocument, // IE8
+    WIN = 'Window', win = window, WINDOW =  this.constructor || this[WIN] || Window, // old Safari
+    HTMLELEMENT = 'HTMLElement', documentElement = 'documentElement', ELEMENT = Element,
+
+    // classList related
+    className = 'className', add = 'add', classList = 'classList', remove = 'remove', contains = 'contains',
+    
+    // object | array related
+    prototype = 'prototype', indexOf = 'indexOf', length = 'length',
+
+    // performance
+    now = 'now', performance = 'performance',
+
+    // getComputedStyle
+    getComputedStyle = 'getComputedStyle', currentStyle = 'currentStyle', fontSize = 'fontSize',
+
+    // event related
+    EVENT = 'Event', CustomEvent = 'CustomEvent', IE8EVENTS = '_events', 
+    etype = 'type', target = 'target', currentTarget = 'currentTarget', relatedTarget = 'relatedTarget',
+    cancelable = 'cancelable', bubbles = 'bubbles', cancelBubble = 'cancelBubble', cancelImmediate = 'cancelImmediate', detail = 'detail',
+    addEventListener = 'addEventListener', removeEventListener = 'removeEventListener', dispatchEvent = 'dispatchEvent';
+
+    
+  // Element
+  if (!win[HTMLELEMENT]) { win[HTMLELEMENT] = win[ELEMENT]; }
+
+  // Array[prototype][indexOf]
+  if (!Array[prototype][indexOf]) {
+    Array[prototype][indexOf] = function(searchElement) {
+      if (this === undefined || this === null) {
+        throw new TypeError(this + ' is not an object');
+      }
+    
+      var arraylike = this instanceof String ? this.split('') : this,
+        lengthValue = Math.max(Math.min(arraylike[length], 9007199254740991), 0) || 0,
+        index = Number(arguments[1]) || 0;
+    
+      index = (index < 0 ? Math.max(lengthValue + index, 0) : index) - 1;
+    
+      while (++index < lengthValue) {
+        if (index in arraylike && arraylike[index] === searchElement) {
+          return index;
+        }
+      }
+    
+      return -1;
+    };
+  }
+
+  // Date[now]
+  if(!Date[now]){ Date[now] = function() { return new Date().getTime(); }; }
+
+  // performance[now]
+  (function(){
+    if (performance in win == false) {  win[performance] = {}; }
+    
+    if (now in win[performance] == false){  
+      var nowOffset = Date[now]();
+      
+      window[performance][now] = function(){
+        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 win)) {
+    function getComputedStylePixel(element, property, fontSizeValue) {
+      
+      // 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;
+  
+      fontSizeValue = !fontSizeValue ? fontSizeValue : /%|em/.test(suffix) && element.parentElement ? getComputedStylePixel(element.parentElement, 'fontSize', null) : 16;
+      rootSize = property == 'fontSize' ? fontSizeValue : /width/i.test(property) ? element.clientWidth : element.clientHeight;
+  
+      return suffix == '%' ? size / 100 * rootSize :
+        suffix == 'cm' ? size * 0.3937 * 96 :
+        suffix == 'em' ? size * fontSizeValue :
+        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(' ');
+    }
+  
+    // 
+    function CSSStyleDeclaration(element) {
+      var style = this,
+      currentStyleValue = element[currentStyle],
+      fontSizeValue = getComputedStylePixel(element, fontSize),
+      unCamelCase = function (match) {
+        return '-' + match.toLowerCase();
+      },
+      property;
+  
+      for (property in currentStyleValue) {
+        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 = currentStyleValue[property];
+        } else if (/margin.|padding.|border.+W/.test(property) && style[property] != 'auto') {
+          style[property] = Math.round(getComputedStylePixel(element, property, fontSizeValue)) + 'px';
+        } else if (/^outline/.test(property)) {
+          // errors on checking outline
+          try {
+            style[property] = currentStyleValue[property];
+          } catch (error) {
+            style.outlineColor = currentStyleValue.color;
+            style.outlineStyle = style.outlineStyle || 'none';
+            style.outlineWidth = style.outlineWidth || '0px';
+            style.outline = [style.outlineColor, style.outlineWidth, style.outlineStyle].join(' ');
+          }
+        } else {
+          style[property] = currentStyleValue[property];
+        }
+      }
+  
+      setShortStyleProperty(style, 'margin');
+      setShortStyleProperty(style, 'padding');
+      setShortStyleProperty(style, 'border');
+  
+      style[fontSize] = Math.round(fontSizeValue) + 'px';    
+    }
+    
+    CSSStyleDeclaration[prototype] = {
+      constructor: CSSStyleDeclaration,
+      // .getPropertyPriority
+      getPropertyPriority: function () {
+        throw new Error('DOM Exception 9');
+      },
+      // .getPropertyValue
+      getPropertyValue: function (property) {
+        return this[property.replace(/-\w/g, function (match) {
+          return match[1].toUpperCase();
+        })];
+      },
+      // .item
+      item: function (index) {
+        return this[index];
+      },
+      // .removeProperty
+      removeProperty: function () {
+        throw new Error('DOM Exception 7');
+      },
+      // .setProperty
+      setProperty: function () {
+        throw new Error('DOM Exception 7');
+      },
+      // .getPropertyCSSValue
+      getPropertyCSSValue: function () {
+        throw new Error('DOM Exception 9');
+      }
+    };    
+  
+    // .getComputedStyle
+    win[getComputedStyle] = function(element) {
+      return new CSSStyleDeclaration(element);
+    };
+  }  
 
-// 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(' ');
-		}
-	
-		// 
-		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,
-			// .getPropertyPriority
-			getPropertyPriority: function () {
-				throw new Error('NotSupportedError: DOM Exception 9');
-			},
-			// .getPropertyValue
-			getPropertyValue: function (property) {
-				return this[property.replace(/-\w/g, function (match) {
-					return match[1].toUpperCase();
-				})];
-			},
-			// .item
-			item: function (index) {
-				return this[index];
-			},
-			// .removeProperty
-			removeProperty: function () {
-				throw new Error('NoModificationAllowedError: DOM Exception 7');
-			},
-			// .setProperty
-			setProperty: function () {
-				throw new Error('NoModificationAllowedError: DOM Exception 7');
-			},
-			// .getPropertyCSSValue
-			getPropertyCSSValue: function () {
-				throw new Error('NotSupportedError: DOM Exception 9');
-			}
-		};		
-	
-		// .getComputedStyle
-		window.getComputedStyle = function getComputedStyle(element) {
-			return new CSSStyleDeclaration(element);
-		};
-	})();
-}
+  // Element.prototype.classList by thednp
+  if( !(classList in ELEMENT[prototype]) ) {
+    var ClassLIST = function(elem){
+      var classArr = elem[className].replace(/^\s+|\s+$/g,'').split(/\s+/) || [];
 
-// Event
-if (!window.Event||!Window.prototype.Event) {
-	(function (){
-		window.Event = Window.prototype.Event = Document.prototype.Event = Element.prototype.Event = function Event(type, eventInitDict) {
-			if (!type) { throw new Error('Not enough arguments'); }
-			var event, 
-				bubbles = eventInitDict && eventInitDict.bubbles !== undefined ? eventInitDict.bubbles : false,
-				cancelable = eventInitDict && eventInitDict.cancelable !== undefined ? eventInitDict.cancelable : false;
-			if ( 'createEvent' in document ) {
-				event = document.createEvent('Event');			
-				event.initEvent(type, bubbles, cancelable);
-			} else {
-				event = document.createEventObject();		
-				event.type = type;
-				event.bubbles = bubbles;
-				event.cancelable = cancelable;	
-			}
-			return event;
-		};
-	})();
-}
+          // methods
+          hasClass = this[contains] = function(classNAME){
+            return classArr[indexOf](classNAME) > -1;
+          },
+          addClass = this[add] = function(classNAME){
+            if (!hasClass(classNAME)) {
+              classArr.push(classNAME);
+              elem[className] = classArr.join(' ');
+            }
+          },
+          removeClass = this[remove] = function(classNAME){
+            if (hasClass(classNAME)) {
+              classArr.splice(classArr[indexOf](classNAME),1);
+              elem[className] = classArr.join(' '); 
+            }
+          },
+          toggleClass = this.toggle = function(classNAME){
+            if ( hasClass(classNAME) ) { removeClass(classNAME); } 
+            else { addClass(classNAME); } 
+          };
+    }
+    Object.defineProperty(ELEMENT[prototype], classList, { get: function () { return new ClassLIST(this); } });
+  }
 
-// CustomEvent
-if (!('CustomEvent' in window) || !('CustomEvent' in Window.prototype)) {
-	(function(){		
-		window.CustomEvent = Window.prototype.CustomEvent = Document.prototype.CustomEvent = Element.prototype.CustomEvent = function CustomEvent(type, eventInitDict) {
-			if (!type) {
-				throw Error('TypeError: Failed to construct "CustomEvent": An event name must be provided.');
-			}
-			var event = new Event(type, eventInitDict);
-			event.detail = eventInitDict && eventInitDict.detail || null;
-			return event;
-		};
-		
-	})()
-}
+  // Event
+  if (!win[EVENT]||!WINDOW[prototype][EVENT]) {
+    win[EVENT] = WINDOW[prototype][EVENT] = DOCUMENT[prototype][EVENT] = ELEMENT[prototype][EVENT] = function(type, eventInitDict) {
+      if (!type) { throw new Error('Not enough arguments'); }
+      var event, 
+        bubblesValue = eventInitDict && eventInitDict[bubbles] !== undefined ? eventInitDict[bubbles] : false,
+        cancelableValue = eventInitDict && eventInitDict[cancelable] !== undefined ? eventInitDict[cancelable] : false;
+      if ( 'createEvent' in doc ) {
+        event = doc.createEvent(EVENT);      
+        event.initEvent(type, bubblesValue, cancelableValue);
+      } else {
+        event = doc.createEventObject();
+        event[etype] = type;
+        event[bubbles] = bubblesValue;
+        event[cancelable] = cancelableValue;
+      }
+      return event;
+    };
+  }
 
-// addEventListener
-if (!window.addEventListener||!Window.prototype.addEventListener) {
-	(function (){
-		window.addEventListener = Window.prototype.addEventListener = Document.prototype.addEventListener = Element.prototype.addEventListener = function addEventListener() {
-			var	element = this,
-				type = arguments[0],
-				listener = arguments[1];
-	
-			if (!element._events) {	element._events = {}; }
-	
-			if (!element._events[type]) {
-				element._events[type] = function (event) {
-					var	list = element._events[event.type].list,
-						events = list.slice(),
-						index = -1,
-						length = events.length,
-						eventElement;
-	
-					event.preventDefault = function preventDefault() {
-						if (event.cancelable !== false) {
-							event.returnValue = false;
-						}
-					};
-	
-					event.stopPropagation = function stopPropagation() {
-						event.cancelBubble = true;
-					};
-	
-					event.stopImmediatePropagation = function stopImmediatePropagation() {
-						event.cancelBubble = true;
-						event.cancelImmediate = true;
-					};
-	
-					event.currentTarget = element;
-					event.relatedTarget = event.fromElement || null;
-					event.target = event.target || event.srcElement || element;
-					event.timeStamp = new Date().getTime();
-	
-					if (event.clientX) {
-						event.pageX = event.clientX + document.documentElement.scrollLeft;
-						event.pageY = event.clientY + document.documentElement.scrollTop;
-					}
-	
-					while (++index < length && !event.cancelImmediate) {
-						if (index in events) {
-							eventElement = events[index];
-	
-							if (list.indexOf(eventElement) !== -1 && typeof eventElement === 'function') {
-								eventElement.call(element, event);
-							}
-						}
-					}
-				};
-	
-				element._events[type].list = [];
-	
-				if (element.attachEvent) {
-					element.attachEvent('on' + type, element._events[type]);
-				}
-			}
-	
-			element._events[type].list.push(listener);
-		};
-	
-		window.removeEventListener = Window.prototype.removeEventListener = Document.prototype.removeEventListener = Element.prototype.removeEventListener = function removeEventListener() {
-			var	element = this,
-				type = arguments[0],
-				listener = arguments[1],
-				index;
-	
-			if (element._events && element._events[type] && element._events[type].list) {
-				index = element._events[type].list.indexOf(listener);
-	
-				if (index !== -1) {
-					element._events[type].list.splice(index, 1);
-	
-					if (!element._events[type].list.length) {
-						if (element.detachEvent) {
-							element.detachEvent('on' + type, element._events[type]);
-						}
-						delete element._events[type];
-					}
-				}
-			}
-		};
-	})();
-}
+  // CustomEvent
+  if (!(CustomEvent in win) || !(CustomEvent in WINDOW[prototype])) {
+    win[CustomEvent] = WINDOW[prototype][CustomEvent] = DOCUMENT[prototype][CustomEvent] = Element[prototype][CustomEvent] = function(type, eventInitDict) {
+      if (!type) {
+        throw Error('CustomEvent TypeError: An event name must be provided.');
+      }
+      var event = new Event(type, eventInitDict);
+      event[detail] = eventInitDict && eventInitDict[detail] || null;
+      return event;
+    };
+  }
 
-// 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(event) {
-			if (!arguments.length) {
-				throw new Error('Not enough arguments');
-			}
-	
-			if (!event || typeof event.type !== 'string') {
-				throw new Error('DOM Events Exception 0');
-			}
-	
-			var element = this, type = event.type;
-	
-			try {
-				if (!event.bubbles) {
-					event.cancelBubble = true;
-	
-					var cancelBubbleEvent = function (event) {
-						event.cancelBubble = true;
-	
-						(element || window).detachEvent('on' + type, cancelBubbleEvent);
-					};
-	
-					this.attachEvent('on' + type, cancelBubbleEvent);
-				}
-	
-				this.fireEvent('on' + type, event);
-			} catch (error) {
-				event.target = element;
-	
-				do {
-					event.currentTarget = element;
-	
-					if ('_events' in element && typeof element._events[type] === 'function') {
-						element._events[type].call(element, event);
-					}
-	
-					if (typeof element['on' + type] === 'function') {
-						element['on' + type].call(element, event);
-					}
-	
-					element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
-				} while (element && !event.cancelBubble);
-			}
-	
-			return true;
-		};
-	})();
-}
\ No newline at end of file
+  // addEventListener | removeEventListener
+  if (!win[addEventListener]||!WINDOW[prototype][addEventListener]) {
+    win[addEventListener] = WINDOW[prototype][addEventListener] = DOCUMENT[prototype][addEventListener] = ELEMENT[prototype][addEventListener] = function() {
+      var  element = this,
+        type = arguments[0],
+        listener = arguments[1];
+
+      if (!element[IE8EVENTS]) {  element[IE8EVENTS] = {}; }
+
+      if (!element[IE8EVENTS][type]) {
+        element[IE8EVENTS][type] = function (event) {
+          var  list = element[IE8EVENTS][event[etype]].list,
+            events = list.slice(),
+            index = -1,
+            lengthValue = events[length],
+            eventElement;
+
+          event.preventDefault = function() {
+            if (event[cancelable] !== false) {
+              event.returnValue = false;
+            }
+          };
+
+          event.stopPropagation = function() {
+            event[cancelBubble] = true;
+          };
+
+          event.stopImmediatePropagation = function() {
+            event[cancelBubble] = true;
+            event[cancelImmediate] = true;
+          };
+
+          event[currentTarget] = element;
+          event[relatedTarget] = event[relatedTarget] || event.fromElement || null;
+          event[target] = event[target] || event.srcElement || element;
+          event.timeStamp = new Date().getTime();
+
+          if (event.clientX) {
+            event.pageX = event.clientX + doc[documentElement].scrollLeft;
+            event.pageY = event.clientY + doc[documentElement].scrollTop;
+          }
+
+          while (++index < lengthValue && !event[cancelImmediate]) {
+            if (index in events) {
+              eventElement = events[index];
+
+              if (list[indexOf](eventElement) !== -1 && typeof eventElement === 'function') {
+                eventElement.call(element, event);
+              }
+            }
+          }
+        };
+
+        element[IE8EVENTS][type].list = [];
+
+        if (element.attachEvent) {
+          element.attachEvent('on' + type, element[IE8EVENTS][type]);
+        }
+      }
+
+      element[IE8EVENTS][type].list.push(listener);
+    };
+
+    win[removeEventListener] = WINDOW[prototype][removeEventListener] = DOCUMENT[prototype][removeEventListener] = ELEMENT[prototype][removeEventListener] = function() {
+      var element = this,
+        type = arguments[0],
+        listener = arguments[1],
+        index;
+
+      if (element[IE8EVENTS] && element[IE8EVENTS][type] && element[IE8EVENTS][type].list) {
+        index = element[IE8EVENTS][type].list[indexOf](listener);
+
+        if (index !== -1) {
+          element[IE8EVENTS][type].list.splice(index, 1);
+
+          if (!element[IE8EVENTS][type].list[length]) {
+            if (element.detachEvent) {
+              element.detachEvent('on' + type, element[IE8EVENTS][type]);
+            }
+            delete element[IE8EVENTS][type];
+          }
+        }
+      }
+    };
+  }
+
+  // Event dispatcher
+  if (!win[dispatchEvent]||!WINDOW[prototype][dispatchEvent]||!DOCUMENT[prototype][dispatchEvent]||!ELEMENT[prototype][dispatchEvent]) {
+    win[dispatchEvent] = WINDOW[prototype][dispatchEvent] = DOCUMENT[prototype][dispatchEvent] = ELEMENT[prototype][dispatchEvent] = function (event) {
+      if (!arguments[length]) {
+        throw new Error('Not enough arguments');
+      }
+
+      if (!event || typeof event[etype] !== 'string') {
+        throw new Error('DOM Events Exception 0');
+      }
+
+      var element = this, type = event[etype];
+
+      try {
+        if (!event[bubbles]) {
+          event[cancelBubble] = true;
+
+          var cancelBubbleEvent = function (event) {
+            event[cancelBubble] = true;
+
+            (element || win).detachEvent('on' + type, cancelBubbleEvent);
+          };
+
+          this.attachEvent('on' + type, cancelBubbleEvent);
+        }
+
+        this.fireEvent('on' + type, event);
+      } catch (error) {
+        event[target] = element;
+
+        do {
+          event[currentTarget] = element;
+
+          if (IE8EVENTS in element && typeof element[IE8EVENTS][type] === 'function') {
+            element[IE8EVENTS][type].call(element, event);
+          }
+
+          if (typeof element['on' + type] === 'function') {
+            element['on' + type].call(element, event);
+          }
+
+          element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
+        } while (element && !event[cancelBubble]);
+      }
+
+      return true;
+    };
+  }
+}());
\ No newline at end of file
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 292f0b3..7324e88 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -3,50 +3,37 @@ function getRandomInt(min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-// utility functions
-function addClass(el,c) { // where modern browsers fail, use classList	
-    if (el.classList) { el.classList.add(c); } else { el.className += ' '+c; el.offsetWidth; }
-}
-function removeClass(el,c) {
-    if (el.classList) { el.classList.remove(c); } else { el.className = el.className.replace(c,'').replace(/^\s+|\s+$/g,''); el.offsetWidth; }
-}
-
 //scroll top?
 var toTop = document.getElementById('toTop'),
     toTopTween = KUTE.to( 'window', { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500  } );
 
-toTop.addEventListener('click',topHandler,false);
-
 function topHandler(e){
 	e.preventDefault(); 
     toTopTween.start();
 }
+toTop.addEventListener('click',topHandler,false);
+
 
 // toggles utility
 var toggles = document.querySelectorAll('[data-function="toggle"]');
-for (var i = 0, l = toggles.length; i< l; i ++ ){
-    toggles[i].addEventListener('click', toggleClass, false);
-}
-
-function toggleClass(e){
-    e.preventDefault();
-    var pr = this.parentNode;
-    if (!/open/.test(pr.className)){
-        addClass(pr,'open');
-    } else {
-        removeClass(pr,'open');
-    }
-}
 
 function closeToggles(el){
-    var pr = el.parentNode;
-    if (/open/.test(pr.className)){
-        removeClass(pr,'open');
-    }
+    el.classList.remove('open');
+}
+
+function classToggles(el){
+    el.classList.toggle('open');
 }
 
 document.addEventListener('click', function(e){
-    for (var i = 0, l = toggles.length; i< l; i ++ ){
-        if (toggles[i]!==e.target) closeToggles(toggles[i]);
+    var target = e.target.parentNode.tagName === 'LI' ? e.target : e.target.parentNode, 
+        parent = target.parentNode;
+
+    for (var i = 0, l = toggles.length; i
 
 
-  
+
+
+
 
 
     
@@ -12,148 +14,155 @@
     
     
     
-     
+    
+    
 
     KUTE.js Attributes Plugin | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-		
-	
-	
+
+    
+    
 
     
-    
-	
-	
-	
+    
+    
+
+    
+
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
+    
    
 
-	
    
-		
    Attributes Plugin
    
-		
    The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations in combination with the SVG Plugin as we'll see in the following examples. As a quick refference, the basic synthax goes like this:
    
+    
    
 
-
    // basic synthax for unitless attributes
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+            
    Attributes Plugin
    
+            
    The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations
+                in combination with the SVG Plugin as we'll see in the following examples. As a quick refference, the basic synthax goes like this:
    
+
+            
    // basic synthax for unitless attributes
 var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
 
 // OR for attributes that are ALWAYS suffixed / have a measurement unit
 var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
 
    
 
-        
    The Attributes Plugin does support color attributes such as fill or stroke starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like stroke-dasharray, viewBox or transform for simplicity reasons. To animate the stroke/fill or transform attribute, the SVG Plugin has some handy solutions for you. Despite the limitations of this plugin, you have access to just about any SVGElement/Element presentation attribute available.
    
+            
    The Attributes Plugin does support color attributes such as fill or stroke starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like stroke-dasharray, viewBox                or transform for simplicity reasons. To animate the stroke/fill or transform attribute, the SVG Plugin has some handy solutions for you. Despite the limitations of this plugin, you have access to just
+                about any SVGElement/Element presentation attribute available.
    
 
-		
    Attributes Namespace
    
-		
    Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:
    
-
    // dashed attribute notation
+            
    Attributes Namespace
    
+            
    Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:
    
+            
    // dashed attribute notation
 var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
 
 // non-dashed attribute notation
 var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
 
    
-        
    The strokeWidth example is very interesting because this attribute along with many others can work with px, % or with no unit/suffix.
    
-        
-		
    Color Attributes
    
-        
    Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: fill, stroke and stopColor. If the elements are affected by their CSS counterparts, the effect is not visible, so always make sure you know what you're doing.
    
-
    // some fill rgb, rgba, hex
+            
    The strokeWidth example is very interesting because this attribute along with many others can work with px, % or with no unit/suffix.
    
+
+            
    Color Attributes
    
+            
    Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: fill, stroke and stopColor. If the elements are affected by their CSS counterparts, the effect is not visible,
+                so always make sure you know what you're doing.
    
+            
    // some fill rgb, rgba, hex
 var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
-    
+
 // some stopColor or 'stop-color'
 var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
 
    
-        
-		
    
-            
+
+            
    
+                
 
                             
+                    c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
             
-	
-			
    
-				Start	
-			
    
-		
    
-        
    If in this example the fill attribute value would reference a gradient, then rgba(0,0,0,0) is used.
    
 
-		
    Unitless Attributes
    
-		
    In the first example, let's play with the attributes of a <circle> element: radius and center coordinates.
    
-
    // radius attribute
+                
    
+                    Start
+                
    
+            
    
+            
    If in this example the fill attribute value would reference a gradient, then rgba(0,0,0,0) is used.
    
+
+            
    Unitless Attributes
    
+            
    In the first example, let's play with the attributes of a <circle> element: radius and center coordinates.
    
+            
    // radius attribute
 var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
-    
+
 // coordinates of the circle center
 var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
-
           
-        
    A quick demo with the above:
    
-		
    
-            
+
    
+            
    A quick demo with the above:
+                
    
+                    
    
+                        
                 
             
-	
-			
    
-				Start	
-			
    
-		
    
-        
-		
    Suffixed Attributes
    
-        
    Similar to the example on gradients with SVG Plugin, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the % unit is found in the current value and used as unit for the DOM update:
    
-
    // gradient positions to middle
+
+                        
    
+                            Start
+                        
    
+                    
    
+
+                    
    Suffixed Attributes
    
+                    
    Similar to the example on gradients with SVG Plugin, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the % unit
+                        is found in the current value and used as unit for the DOM update:
    
+                    
    // gradient positions to middle
 var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
-    
+
 // gradient positions rotated
 var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
 
    
-        
-		
    
-            
+
+                    
    
+                        
                 
                     
                         
@@ -161,47 +170,53 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
                     
                 
                             
+                    c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
             
-	
-			
    
-				Start	
-			
    
-		
    
-        
    This plugin is quite handy and a great addition to the SVG Plugin.
    
 
-	
    
+                        
    
+                            Start
+                        
    
+                    
    
+                    
    This plugin is quite handy and a great addition to the SVG Plugin.
    
 
-    
+        
    
 
-      
-     
+        
 
- 
    
- 
+        
+        
+
+    
+    
 
 
-
-	
+    
 
-
-
+    
+    
 
-
- 
- 
- 
- 
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
-
\ No newline at end of file
+
+
diff --git a/css.html b/css.html
index e89d255..85247cf 100644
--- a/css.html
+++ b/css.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,220 +14,232 @@
     
     
     
-     
+    
 
     KUTE.js CSS Plugin | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-		
-	
-	
+
+    
+    
 
     
-    
-    	
-	
-	
+    
+    
+
+    
+
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
+    
    
 
-	
    
-		
    CSS Plugin
    
-		
    The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the examples page. The focus is on box model properties like padding, margin or borderWidth, as well as other types of properties like borderRadius, borderColor, backgroundPosition, borderColor or clip.
    
-        
-        
-		
    Border Radius
    
-		
    In the example below we are doing some animation on the border-radius 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 px, % and text properties' units such as em or rem.
    
-
    KUTE.to('selector1',{borderRadius:'100%'}).start();
+    
    
+
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+            
    CSS Plugin
    
+            
    The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the examples page. The focus is on box model properties like padding, margin                or borderWidth, as well as other types of properties like borderRadius, borderColor, backgroundPosition, borderColor or clip.
    
+
+
+            
    Border Radius
    
+            
    In the example below we are doing some animation on the border-radius 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
+                px, % and text properties' units such as em or rem.
    
+            
    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();
-
    		
+
    
 
-		
    And here is how it looks like:
    
+            
    And here is how it looks like:
    
 
-		
    
-			
    ALL
    
-			
    TL
    
-			
    TR
    
-			
    BL
    
-			
    BR
    
-				
-			
    
-				Start	
-			
    
-		
    
-		
-		
    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 -moz-border-radius-topleft are not supported because they were depracated with later versions. Download this example here.
    			
-	
-		
    Box Model Properties
    
-		
    The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as outlineWidth, minWidth or maxHeight require a more complex context and we won't insist on them.
    
-
    var tween1 = KUTE.to('selector1',{marginTop:200});
+            
    
+                
    ALL
    
+                
    TL
    
+                
    TR
    
+                
    BL
    
+                
    BR
    
+
+                
    
+                    Start
+                
    
+            
    
+
+            
    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 -moz-border-radius-topleft are not supported because they were depracated
+                with later versions. Download this example here.
    
+
+            
    Box Model Properties
    
+            
    The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as outlineWidth, minWidth or maxHeight                require a more complex context and we won't insist on them.
    
+            
    var tween1 = KUTE.to('selector1',{marginTop:200});
 var tween2 = KUTE.to('selector1',{marginBottom:50});
 var tween3 = KUTE.to('selector1',{padding:30});
 var tween4 = KUTE.to('selector1',{margin:'5%'});
 
    
-		
    We're gonna chain these tweens and start the animation. You can download this example here.
    		
-		
    
-			
    BOX
     MODEL 
    
-				
-			
    
-				Start	
-			
    
-		
    		
-		
-		
-		
    TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.
    
-		
-		
    Text Properties
    
-		
    OK here we're gonna do a cool example for text properties. Basically the below code would work:
    
-
    var tween1 = KUTE.to('selector1',{fontSize:'200%'});
+            
    We're gonna chain these tweens and start the animation. You can download this example here.
    
+            
    
+                
    BOX
     MODEL 
    
+
+                
    
+                    Start
+                
    
+            
    
+
+
+            
    TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.
    
+
+            
    Text Properties
    
+            
    OK here we're gonna do a cool example for text properties. Basically the below code would work:
    
+            
    var tween1 = KUTE.to('selector1',{fontSize:'200%'});
 var tween2 = KUTE.to('selector1',{lineHeight:24});
 var tween3 = KUTE.to('selector1',{letterSpacing:50});
 var tween3 = KUTE.to('selector1',{wordSpacing:50});
 
    
-		
    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 fontSize and letterSpacing properties for each character while the button will animate fontSize and lineHeight properties. Watch this:
    		
-		
-		
    
-			
    Howdy!
    
-			Button
-				
-			
    Start
    
-		
    
-		
    TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check assets/css/css.css file for more. This example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example here.
    
+            
    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 fontSize and letterSpacing properties for each character while
+                the button will animate fontSize and lineHeight properties. Watch this:
    
 
-		
    Color Properties
    
-		
    The next example is about animating all border color properties, since the core engine already supports text color and backgroundColor properties. So check these lines for reference.
    
-
    KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
+            
    
+                
    Howdy!
    
+                Button
+
+                
    Start
    
+            
    
+            
    TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check assets/css/css.css file for more. This
+                example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example here.
    
+
+            
    Color Properties
    
+            
    The next example is about animating all border color properties, since the core engine already supports text color and backgroundColor properties. So check these lines for reference.
    
+            
    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:'red'}).start(); // IE9+ browsers
 KUTE.to('selector1',{borderLeftColor:'#069'}).start();
 KUTE.to('selector1',{outlineColor:'#069'}).start();
 
    
-		
    Let's get some animation going. Download the example here.
    		
-		
-		
    
-			
    Colors
    
-				
-			
    
-				Start	
-			
    
-		
    
+            
    Let's get some animation going. Download the example here.
    
 
-		
    A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.
    	
+            
    
+                
    Colors
    
 
-		
    Clip Property
    
-		
    This property allows you to animate the rectangular shape of an element that is set to position:absolute. In CSS this property works like this clip: rect(top,right,bottom,left) forming a rectangular shape that masks an element making parts of it invisible.
    
-
    KUTE.to('selector',{clip:[0,150,100,0]}).start();
    
-		
    A quick example here could look like this:
    
-		
-		
    
-			
    
-				
-			
    
-				Start	
-			
    
-		
    
-		
    Note that this would produce no effect for elements that have overflow:visible style rule. Download this example here.
    	
+                
    
+                    Start
+                
    
+            
    
 
-		
    Background Position
    
-		
    Another property we can animate with KUTE.js is backgroundPosition. Quick example:
    
-
    KUTE.to('selector1',{backgroundPosition:[0,50]}).start();
    
-		
    A working example would look like this:
    
-		
-		
    
-			
    
-				
-			
    
-				Start	
-			
    
-		
    		
-		
    Download this example here.
    
+            
    A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.
    
 
-	
    
+            
    Clip Property
    
+            
    This property allows you to animate the rectangular shape of an element that is set to position:absolute. In CSS this property works like this clip: rect(top,right,bottom,left) forming a rectangular shape that masks
+                an element making parts of it invisible.
    
+            
    KUTE.to('selector',{clip:[0,150,100,0]}).start();
    
+            
    A quick example here could look like this:
    
 
-	
+            
    
+                
    
 
-	
-	
+                
    
+                    Start
+                
    
+            
    
+            
    Note that this would produce no effect for elements that have overflow:visible style rule. Download this example here.
    
 
- 
    
- 
+            
    Background Position
    
+            
    Another property we can animate with KUTE.js is backgroundPosition. Quick example:
    
+            
    KUTE.to('selector1',{backgroundPosition:[0,50]}).start();
    
+            
    A working example would look like this:
    
+
+            
    
+                
    
+
+                
    
+                    Start
+                
    
+            
    
+            
    Download this example here.
    
+
+        
+
+        
+
+        
+        
+
+    
+    
 
 
-
-	
+    
 
-
-
+    
+    
 
-
- 
- 
- 
- 
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
-
\ No newline at end of file
+
+
diff --git a/easing.html b/easing.html
index f5e16b5..6125492 100644
--- a/easing.html
+++ b/easing.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,323 +14,352 @@
     
     
     
-     
+    
+    
 
     KUTE.js Easing Functions | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-		
-	
-		
+
+    
+    
 
     
-    
-    
-	
-	
-	
+    
+    
+
+    
+
+
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
    
-    
    
+            
    
+        
 
 
-	
    
+        
    
 
-		
    Easing Functions
    
-		
    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.
     
-		
    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, here's an excellent resource some developers recommend. I would also recommend this one too.
    
-		
-		
    Core Functions
    
-		
    Modern browsers that support transition can also make use of some generic easing functions via the CSS3 transition-timing-function:ease-out property, but in Javascript animation, we need some special functions. The popular Robert Penner's easing functions set 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 circular or exponential, and also the type of progression in and/or out.
    
-		
-		
    To use them, simply set a tween option like so easing: KUTE.Easing.easingSinusoidalInOut or simply easing: 'easingSinusoidalInOut'.
    
-		
    linear 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.
    
-		
-		
    curve based functions are the next set of easings we are going to talk 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):
    
-		
      
-			
    • Sinusoidal - multiplier of 1 (super light object, like a feather)
      • 
-			
    • Quadratic - multiplier of 2
      • 
-			
    • Cubic - multiplier of 3
      • 
-			
    • Quartic - multiplier of 4
      • 
-			
    • Quintic - multiplier of 5
      • 
-			
    • Circular - multiplier of 6
      • 
-			
    • Exponential - multiplier of 10 (super heavy object, like a truck)
      • 
-		
    
-		
-		
    The In / Out explained:
    
-		
      
-			
    • In - 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: easingSinusoidalIn, easingQuadraticIn,easingCubicIn, easingQuarticIn, easingQuinticIn, easingCircularIn and easingExponentialIn.
      • 
-			
    • Out - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: easingSinusoidalOut, easingQuadraticOut, easingCubicOut, easingQuarticOut, easingQuinticOut, easingCircularOut and easingExponentialOut.
      • 
-			
    • InOut - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: easingSinusoidalInOut, easingQuadraticInOut, easingCubicInOut, easingQuarticInOut, easingQuinticInOut, easingCircularInOut and easingExponentialInOut.
      • 
-		
    
-			 
-		
    back easing functions describe more complex animations (I would call them reverse gravity easings). They also come with in and/or out types of progression. 
    
-		
      		
-			
    • easingBackIn 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 ground with acceleration.
      • 
-			
    • easingBackOut would be best described as the previous function, but viewed in reverse mode.
      • 
-			
    • easingBackInOut is a combination of the other two.
      • 
-		
    
-		
-		
    elasticity easing functions describe the kind of animation where the object is elastic. With in and/or out as well. 
    
-		
      
-			
    • easingElasticOut would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.
      • 
-			
    • easingElasticIn would be best described as the above function but viewed in reverse mode.
      • 
-			
    • easingElasticInOut is simply a combination of the other two.
      • 
-		
    
-		
-		
    gravity based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With in and/or out as well.
    
-		
      
-			
    • easingBounceOut looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.
      • 
-			
    • easingBounceIn looks like the previous viewed in reverse mode
      • 
-			
    • easingBounceInOut is a combination of the other two.
      • 
-		
    
+            
    Easing Functions
    
+            
    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.
    
+            
    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, here's an excellent resource some developers recommend. I would also recommend
+                this one too.
    
 
-		
    Core easing functions examples:
    
-		
    
-			
    Linear
    
-			
    
-				
-			
    
-					
    
-				    Select
-						
      
-							
    • easingSinusoidalIn
      • 
-							
    • easingSinusoidalOut
      • 
-							
    • easingSinusoidalInOut
      • 
-							
    • easingQuadraticIn
      • 
-							
    • easingQuadraticOut
      • 
-							
    • easingQuadraticInOut
      • 
-							
    • easingCubicIn
      • 
-							
    • easingCubicOut
      • 
-							
    • easingCubicInOut
      • 
-							
    • easingQuarticIn
      • 
-							
    • easingQuarticOut
      • 
-							
    • easingQuarticInOut
      • 
-							
    • easingQuinticIn
      • 
-							
    • easingQuinticOut
      • 
-							
    • easingQuinticInOut
      • 
-							
    • easingCircularIn
      • 
-							
    • easingCircularOut
      • 
-							
    • easingCircularInOut
      • 
-							
    • easingExponentialIn
      • 
-							
    • easingExponentialOut
      • 
-							
    • easingExponentialInOut
      • 
-							
    • easingBackIn
      • 
-							
    • easingBackOut
      • 
-							
    • easingBackInOut
      • 
-							
    • easingElasticIn
      •                
-							
    • easingElasticOut
      •                
-							
    • easingElasticInOut
      • 
-						
    
-				
    
-				Start	
-			
    
-		
    
-		
-		
    Cubic Bezier Functions
    
-		
    While modern browsers support CSS3 transition with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5), in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the features page, we are using a modified version of the cubic-bezier by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.
    
-		
    You can use them either with easing: Bezier(mX1, mY1, mX2, mY2) or easing: 'bezier(mX1, mY1, mX2, mY2)', where mX1, mY1, mX2, mY2 are Float values from 0 to 1. You can find the right values you need right here.
    
-		
    NOTE: Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.
    
-		
    There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:
    
-		
      
-			
    • Equivalents of the browser's generic timing functions: easeIn, easeOut and easeInOut
      • 
-			
    • Sinusoidal timing functions: easeInSine, easeOutSine and easeInOutSine
      • 
-			
    • Quadratic timing functions: easeInQuad, easeOutQuad and easeInOutQuad
      • 
-			
    • Cubic timing functions: easeInCubic, easeOutCubic and easeInOutCubic
      • 
-			
    • Quartic timing functions: easeInQuart, easeInQuart and easeInOutQuart
      • 
-			
    • Quintic timing functions: easeInQuint, easeOutQuint and easeInOutQuint
      • 
-			
    • Exponential timing functions: easeInExpo, easeOutExpo and easeInOutExpo
      • 
-			
    • Back timing functions: easeInBack, easeOutBack and easeInOutBack
      • 
-			
    • Special slow motion timing functions look like this: slowMo, slowMo1 and slowMo2
      • 
-		
    
-		
    Cubic-bezier easing functions examples:
    
-		
    
-			
    Linear
    
-			
    
-				
-			
    
-					
    
-				    Select
-						
      
-								
    • bezier(0.15, 0.7, 0.2, 0.9)
      • 
-								
    • bezier(0.25, 0.5, 0.6, 0.7)
      • 
-								
    • bezier(0.35, 0.2, 0.9, 0.2)
      • 
-								
    • easeIn
      • 
-								
    • easeOut
      • 
-								
    • easeInOut
      • 
-								
    • easeInSine
      • 
-								
    • easeOutSine
      • 
-								
    • easeInOutSine
      • 
-								
    • easeInQuad
      • 
-								
    • easeOutQuad
      • 
-								
    • easeInOutQuad
      • 
-								
    • easeInCubic
      • 
-								
    • easeOutCubic
      • 
-								
    • easeInOutCubic
      • 
-								
    • easeInQuart
      • 
-								
    • easeOutQuart
      • 
-								
    • easeInOutQuart
      • 
-								
    • easeInQuint
      • 
-								
    • easeOutQuint
      • 
-								
    • easeInOutQuint
      • 
-								
    • easeInExpo
      • 
-								
    • easeOutExpo
      • 
-								
    • easeInOutExpo
      • 
-								
    • easeInCirc
      • 
-								
    • easeOutCirc
      • 
-								
    • easeInOutCirc
      • 
-								
    • easeInBack
      • 
-								
    • easeOutBack
      • 
-								
    • easeInOutBack
      • 
-								
    • slowMo
      • 
-								
    • slowMo1
      • 
-								
    • slowMo2
      • 
-						
    
-				
    
-				Start	
-			
    
-		
    
+            
    Core Functions
    
+            
    Modern browsers that support transition can also make use of some generic easing functions via the CSS3 transition-timing-function:ease-out property, but in Javascript animation, we need some special functions. The
+                popular Robert Penner's easing functions set 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 circular or exponential, and also the type of progression in                and/or out.
    
 
-		
-		
    Physics Based Functions
    
-		
    KUTE.js also packs the dynamics physics 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.
    
-		
    NOTE: Starting with KUTE.js v 1.6.0 the Physics Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.
    
-		
    You can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly bezier based functions. Ok now, let's get to it:
    
-	
-		
      
-			
    • spring function is basically an elastic type of easing that allows you to set frequency:1-1000, friction:1-1000, anticipationSize:0-1000 (a kind of delay in miliseconds) and anticipationStrength:0-1000 (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: spring({friction:100,frequency:600}).
      • 
-			
    • bounce function is also an elastic easing function, but it works different than Robert Penner's version that's basically a gravity based function. This one here will always come back to the starting values. This function allows you to set frequency:0-1000 and friction:0-1000. Usage: easing: bounce({friction:100,frequency:600}).
      • 
-			
    • gravity function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: elasticity:1-1000 and bounciness:0-1000. Usage: easing: gravity({elasticity:100,bounciness:600}).
      • 
-			
    • forceWithGravity function acts just like gravity except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000 and bounciness:0-1000. Usage: easing: forceWithGravity({elasticity:100,bounciness:600}).
      • 
-			
    • bezier easing function is a bit more complicated as it allows you to set multiple points of bezier curves.  Usage: easing: BezierMultiPoint({points:POINTS_ARRAY_COMES HERE}), 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 easeIn looks like: 
-
      // sample bezier based easing
+            
      To use them, simply set a tween option like so easing: KUTE.Easing.easingSinusoidalInOut or simply easing: 'easingSinusoidalInOut'.
      
+            
      linear 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.
      
+
+            
      curve based functions are the next set of easings we are going to talk 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):
      
+            
        
+                
      • Sinusoidal - multiplier of 1 (super light object, like a feather)
        • 
+                
      • Quadratic - multiplier of 2
        • 
+                
      • Cubic - multiplier of 3
        • 
+                
      • Quartic - multiplier of 4
        • 
+                
      • Quintic - multiplier of 5
        • 
+                
      • Circular - multiplier of 6
        • 
+                
      • Exponential - multiplier of 10 (super heavy object, like a truck)
        • 
+            
      
+
+            
      The In / Out explained:
      
+            
        
+                
      • In - 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: easingSinusoidalIn, easingQuadraticIn,easingCubicIn,
+                    easingQuarticIn, easingQuinticIn, easingCircularIn and easingExponentialIn.
        • 
+                
      • Out - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: easingSinusoidalOut, easingQuadraticOut, easingCubicOut,
+                    easingQuarticOut, easingQuinticOut, easingCircularOut and easingExponentialOut.
        • 
+                
      • InOut - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: easingSinusoidalInOut, easingQuadraticInOut,
+                    easingCubicInOut, easingQuarticInOut, easingQuinticInOut, easingCircularInOut and easingExponentialInOut.
        • 
+            
      
+
+            
      back easing functions describe more complex animations (I would call them reverse gravity easings). They also come with in and/or out types of progression. 
      
+            
        
+                
      • easingBackIn 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 ground with acceleration.
        • 
+                
      • easingBackOut would be best described as the previous function, but viewed in reverse mode.
        • 
+                
      • easingBackInOut is a combination of the other two.
        • 
+            
      
+
+            
      elasticity easing functions describe the kind of animation where the object is elastic. With in and/or out as well. 
      
+            
        
+                
      • easingElasticOut would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.
        • 
+                
      • easingElasticIn would be best described as the above function but viewed in reverse mode.
        • 
+                
      • easingElasticInOut is simply a combination of the other two.
        • 
+            
      
+
+            
      gravity based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With in and/or out as well.
      
+            
        
+                
      • easingBounceOut looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.
        • 
+                
      • easingBounceIn looks like the previous viewed in reverse mode
        • 
+                
      • easingBounceInOut is a combination of the other two.
        • 
+            
      
+
+            
      Core easing functions examples:
      
+            
      
+                
      Linear
      
+                
      
+
+                
      
+                    
      
+                        Select
+                        
        
+                            
      • easingSinusoidalIn
        • 
+                            
      • easingSinusoidalOut
        • 
+                            
      • easingSinusoidalInOut
        • 
+                            
      • easingQuadraticIn
        • 
+                            
      • easingQuadraticOut
        • 
+                            
      • easingQuadraticInOut
        • 
+                            
      • easingCubicIn
        • 
+                            
      • easingCubicOut
        • 
+                            
      • easingCubicInOut
        • 
+                            
      • easingQuarticIn
        • 
+                            
      • easingQuarticOut
        • 
+                            
      • easingQuarticInOut
        • 
+                            
      • easingQuinticIn
        • 
+                            
      • easingQuinticOut
        • 
+                            
      • easingQuinticInOut
        • 
+                            
      • easingCircularIn
        • 
+                            
      • easingCircularOut
        • 
+                            
      • easingCircularInOut
        • 
+                            
      • easingExponentialIn
        • 
+                            
      • easingExponentialOut
        • 
+                            
      • easingExponentialInOut
        • 
+                            
      • easingBackIn
        • 
+                            
      • easingBackOut
        • 
+                            
      • easingBackInOut
        • 
+                            
      • easingElasticIn
        • 
+                            
      • easingElasticOut
        • 
+                            
      • easingElasticInOut
        • 
+                        
      
+                    
      
+                    Start
+                
      
+            
      
+
+            
      Cubic Bezier Functions
      
+            
      While modern browsers support CSS3 transition with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5), in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned
+                in the features page, we are using a modified version of the cubic-bezier by Gaëtan Renaudeau. I believe this must be most accurate easing functions
+                set.
      
+            
      You can use them either with easing: Bezier(mX1, mY1, mX2, mY2) or easing: 'bezier(mX1, mY1, mX2, mY2)', where mX1, mY1, mX2, mY2 are Float values from 0 to 1. You can find the right values you need
+                right here.
      
+            
      NOTE: Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.
      
+            
      There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:
      
+            
        
+                
      • Equivalents of the browser's generic timing functions: easeIn, easeOut and easeInOut
        • 
+                
      • Sinusoidal timing functions: easeInSine, easeOutSine and easeInOutSine
        • 
+                
      • Quadratic timing functions: easeInQuad, easeOutQuad and easeInOutQuad
        • 
+                
      • Cubic timing functions: easeInCubic, easeOutCubic and easeInOutCubic
        • 
+                
      • Quartic timing functions: easeInQuart, easeInQuart and easeInOutQuart
        • 
+                
      • Quintic timing functions: easeInQuint, easeOutQuint and easeInOutQuint
        • 
+                
      • Exponential timing functions: easeInExpo, easeOutExpo and easeInOutExpo
        • 
+                
      • Back timing functions: easeInBack, easeOutBack and easeInOutBack
        • 
+                
      • Special slow motion timing functions look like this: slowMo, slowMo1 and slowMo2
        • 
+            
      
+            
      Cubic-bezier easing functions examples:
      
+            
      
+                
      Linear
      
+                
      
+
+                
      
+                    
      
+                        Select
+                        
        
+                            
      • bezier(0.15, 0.7, 0.2, 0.9)
        • 
+                            
      • bezier(0.25, 0.5, 0.6, 0.7)
        • 
+                            
      • bezier(0.35, 0.2, 0.9, 0.2)
        • 
+                            
      • easeIn
        • 
+                            
      • easeOut
        • 
+                            
      • easeInOut
        • 
+                            
      • easeInSine
        • 
+                            
      • easeOutSine
        • 
+                            
      • easeInOutSine
        • 
+                            
      • easeInQuad
        • 
+                            
      • easeOutQuad
        • 
+                            
      • easeInOutQuad
        • 
+                            
      • easeInCubic
        • 
+                            
      • easeOutCubic
        • 
+                            
      • easeInOutCubic
        • 
+                            
      • easeInQuart
        • 
+                            
      • easeOutQuart
        • 
+                            
      • easeInOutQuart
        • 
+                            
      • easeInQuint
        • 
+                            
      • easeOutQuint
        • 
+                            
      • easeInOutQuint
        • 
+                            
      • easeInExpo
        • 
+                            
      • easeOutExpo
        • 
+                            
      • easeInOutExpo
        • 
+                            
      • easeInCirc
        • 
+                            
      • easeOutCirc
        • 
+                            
      • easeInOutCirc
        • 
+                            
      • easeInBack
        • 
+                            
      • easeOutBack
        • 
+                            
      • easeInOutBack
        • 
+                            
      • slowMo
        • 
+                            
      • slowMo1
        • 
+                            
      • slowMo2
        • 
+                        
      
+                    
      
+                    Start
+                
      
+            
      
+
+
+            
      Physics Based Functions
      
+            
      KUTE.js also packs the dynamics physics 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.
      
+            
      NOTE: Starting with KUTE.js v 1.6.0 the Physics Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.
      
+            
      You can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly
+                bezier based functions. Ok now, let's get to it:
      
+
+            
        
+                
      • spring function is basically an elastic type of easing that allows you to set frequency:1-1000, friction:1-1000, anticipationSize:0-1000 (a kind of delay in miliseconds)
+                    and anticipationStrength:0-1000 (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: spring({friction:100,frequency:600}).
        • 
+                
      • bounce function is also an elastic easing function, but it works different than Robert Penner's version that's basically a gravity based function. This one here will always come back to the
+                    starting values. This function allows you to set frequency:0-1000 and friction:0-1000. Usage: easing: bounce({friction:100,frequency:600}).
        • 
+                
      • gravity function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: elasticity:1-1000 and bounciness:0-1000. Usage: easing: gravity({elasticity:100,bounciness:600}).
        • 
+                
      • forceWithGravity function acts just like gravity except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000 and bounciness:0-1000.
+                    Usage: easing: forceWithGravity({elasticity:100,bounciness:600}).
        • 
+                
      • bezier easing function is a bit more complicated as it allows you to set multiple points of bezier curves. Usage: easing: BezierMultiPoint({points:POINTS_ARRAY_COMES HERE}), 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 easeIn looks like:
+                    
        // sample bezier based easing
 easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
-
        
-            In other cases, the bezier can handle multiple points as well, basically unlimited:
-
        // multi point bezier easing
+
         In other cases, the bezier can handle multiple points as well, basically unlimited:
+                    
        // multi point bezier easing
 easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
-
                    
-			
        • 
-		
      
-		
      The presets can be used both as a string easing:'physicsIn' or easing: Physics.physicsIn(friction:200). The list is:
      
-		
        
-			
      • curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
        • 
-			
      • back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.
        • 
-		
      
-		
      Physics easing functions examples:
      
-		
      
-			
      Linear
      
-			
      
-				
-			
      
-				
      
-					Select
-					
         
-						
      • physicsIn
        •  
-						
      • physicsOut
        •   
-						
      • physicsInOut
        •   
-						
      • physicsBackIn
        •   
-						
      • physicsBackOut
        •   
-						
      • physicsBackInOut
        •   
-						
      • spring
        •   
-						
      • bounce
        •   
-						
      • gravity
        •   
-						
      • forceWithGravity
        •   
-						
      • bezier
        •   
-						
      • multiPointBezier
        •   
-					
      
-				
      
-				Start	
-			
      
-		
      		
-        
-	
    
+
    
+                
+            
+            
    The presets can be used both as a string easing:'physicsIn' or easing: Physics.physicsIn(friction:200). The list is:
    
+            
      
+                
    • curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
      • 
+                
    • back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.
      • 
+            
    
+            
    Physics easing functions examples:
    
+            
    
+                
    Linear
    
+                
    
 
-	
    		
+                
    
+                    
    
+                        Select
+                        
      
+                            
    • physicsIn
      • 
+                            
    • physicsOut
      • 
+                            
    • physicsInOut
      • 
+                            
    • physicsBackIn
      • 
+                            
    • physicsBackOut
      • 
+                            
    • physicsBackInOut
      • 
+                            
    • spring
      • 
+                            
    • bounce
      • 
+                            
    • gravity
      • 
+                            
    • forceWithGravity
      • 
+                            
    • bezier
      • 
+                            
    • multiPointBezier
      • 
+                        
    
+                    
    
+                    Start
+                
    
+            
    
 
-    
-		
-	
    
-	  
-      
-	
+        
 
- 
- 
+        
    
+
+            
+
+        
    
+
+        
+        
+
+    
+    
 
 
-
-	
+    
 
-
-	
+    
+    
 
-
+    
 
- 
- 
- 
- 
- 
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
-
\ No newline at end of file
+
+
diff --git a/examples.html b/examples.html
index f711864..b3ce590 100644
--- a/examples.html
+++ b/examples.html
@@ -1,506 +1,534 @@
-
-
-
-
-
-  
-
-
-    
-    
-    
-    
-    
-    
-     
-
-    KUTE.js Core Engine Examples | Javascript Animation Engine
-	
-    
-    
-	
-    
-    
-
-	
-    
-		
-	
-	
-
-    
-    
-    	
-	
-	
-
-
-
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
-
-	
    
-		
    Core Engine
    
-		
    KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript or with jQuery, but before we head over to the more advanced examples, let's have a quick look at these two basic examples here. Note: the examples are posted on codepen.
    
-		
-		
    Basic Native Javascript Example
    
-		
    When developing with native Javascript, a very basic syntax goes like this:
    
-
-
    -// this is the tween object, basically KUTE.method(element, from, to, options);
-var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});
-
    
-
-		
    Now the tween object is created, it's a good time for you to know that via Native Javascript we always animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements such as querySelectorAll() or getElementsByTagName(), you need to do a for () loop, or make use of the two new methods: .allTo() or .allFromTo(). Now let's apply the tween control methods:
    
-
-
    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
-tween.playing // checks if the tween is currenlty active so we prevent start() when not needed
-tween.paused // checks if the tween is currenlty active so we can prevent pausing or resume if needed
-
    
-
-		
    The demo for the above example is  here.
    
-		
-		
    Basic jQuery Example
    
-		
    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:
    
-
    // this is the tween object, basically $('selector').method(fromValues, toValue, options)
-var tween = $('selector').fromTo({top: 20}, {top: 100}, {delay: 500});
-
    
-		
    We mentioned that the jQuery Plugin is different, and here's why: the above function call uses the allFromTo method to create an Array of objects for each HTML element of chosen selector, but if the selector only returns one element the call returns a single tween object built with fromTo method. For the array of objects we can now apply the exact same tween control methods, except these:
    
-
    tween.length // check if the tween is an array of objects
-tween.length && tween.tweens[0].playing && tween.tweens[tween.length-1].playing // now we know that one of the tweens is playing
-tween.length && tween.tweens[0].paused && tween.tweens[tween.length-1].paused // now we know that one of the tweens is paused
-
    
-
-		
    The demo for the above example is here.
    
-		
-		
    Transform Properties Examples
    
-		
    KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateY, rotateZ properties. Additionally it allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.
    
-		
-		
    Translations
    
-		
    In the next example the first box is moving to left 250px with translate property, the second box is moving to the right by 200px using translateX and the third box is moving to the bottom using translate3d. The last box also uses translate3d but requires a perspective value for the animation on the Z axis to be effective.
    
-
    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});
-
    
-		
    And here is how it looks like:
    
-		
    
-			
    2D
    
-			
    X
    
-			
    Y
    
-			
    Z
    
-				
-			
    
-				Start	
-			
    
-		
    
-		
-		
    As you can see in your browsers console, for all animations translate3d is used, as explained in the features page. Also the first example that's using the 2D translate for both vertical and horizontal axis even if we only set X axis. You can download this example here.
    
-		
    Remember: stacking translate and translate3d together may not work and IE9 does not support perspective.
    
-		
-		
    Rotations
    
-		
    Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support rotate3d.
    
-
-
    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});
-
    
-
-		
    And here is how it looks like:
    
-		
    
-			
    2D
    
-			
    X
    
-			
    Y
    
-			
    Z
    
-			
    
-				Start	
-			
    
-		
    
-		
    The rotateX and rotateY 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 perspective 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 here.
    
-				
-		
    Skews
    
-		
    KUTE.js supports skewX and skewY so let's animate the two. Since they are 2D transformations, IE9 supports skews.
    
-
    var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
-var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});
-
    
-		
-		
    And here is how it looks like:
    
-		
    
-			
    X
    
-			
    Y
    
-				
-			
    
-				Start	
-			
    
-		
    
-		
    You can download this example here.
    
-				
-		
    Mixed Transformations
    
-		
    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:
    
-
-
    var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
-var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
-
    		
-		
    If you check the test here, you will notice that only the skewY is going to work and no rotation. Now let's do this properly.
    
-
-
    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'} // transform 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'} // transform options
-);
-
    
-		
    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.
    
-
-		
    
-			
    element perspective 400px
    
-			
    parent perspective 400px
    
-				
-			
    
-				Start	
-			
    
-		
    
-		
-		
    This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example here.
    
-		
-		
    Chained Transformations
    
-		
    KUTE.js has the ability to stack transform properties as they come in chained tweens 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 .to() method because it has the ability to stack 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:
    
-		
    
-			
    FROMTO
    
-			
    FROMTO
    
-			
    TO
    
-				
-			
    
-				Start	
-			
    
-		
    		
-		
    What's this all about?
    
-		
      		
-			
    • the first box uses a regular .fromTo() 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
      • 		
-			
    • the second box is also using .fromTo() object, but using proper values for all tweens at all times, so we fixed that glitch
      • 		
-			
    • and the last box uses the .to() method, and does the chaining easier for most properties, especially for transform
      • 		
-		
    		
-		
-		
    When coding transformation chains I would highly recommend:
    
-		
      
-			
    • keep the same order of the transform properties, best would be: translation, rotation, skew and scale; an example of the difference shown here for rotations and here for rotations and skew;
      • 
-			
    • 2D and 3D translations would work best in if you provide a value at all times; eg. translate:[x,y] and translate3d:[x,y,z]; for instance using translate:150 or translateX:150 would mean that all other axis are 0;
      • 
-			
    • on larger amount of elements animating chains, the .fromTo() 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 features page;
      • 
-			
    • download this example here.
      • 
-		
    	
-	
-		
    Box Model Properties
    
-		
    KUTE.js core engine supports most used box model properties, and almost all the box model properties via the CSS Plugin, so the next example will only animate width, height, top and left.
    
-
    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});
-
    
-		
    We're gonna chain these tweens and start the animation. You can download this example here.
    		
-		
    
-			
    BOX MODEL
    
-				
-			
    
-				Start	
-			
    
-		
    		
-		
-		
-		
    TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.
    
-		
-		
    Color Properties
    
-		
    The next example is about animating color properties. As for example, check these lines for reference. Additional color properties such as borderColor or borderLeftColor are supported via the CSS Plugin.
    
-
    KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
-KUTE.to('selector1',{backgroundColor:'#069'}).start();
-KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only
-
    
-		
    Let's get some animation going. Download the example here.
    		
-		
-		
    
-			
    Colors
    
-				
-			
    
-				Start	
-			
    
-		
    
-
-		
    A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.
    	
-		
-		
    Vertical Scrolling
    
-		
    Another property we can animate with KUTE.js is scrollTop. I works for both the window and any scrollable object. Quick example:
    
-
    KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
-KUTE.to('window',{scroll:450}).start(); // for the window
-
    
-		
    The scroll animation could however be influenced by mouse hover effects, usually creating some really nasty bottlenecks, but you can always add some CSS to your page to prevent that:
    
-
    /* prevent scroll bottlenecks */
-body[data-tweening="scroll"],
-body[data-tweening="scroll"] * { pointer-events: none !important; }
-
    
-		
    A working example would work like this. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.
    
-		
-		
-		
    Cross Browser Animation Example
    
-		
    Unlike the examples hosted on Codepen, 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 complete reference.  Now we are ready:
-		
-		
    Collect Information And Cache It
    
-
    // 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
-
-
    
-		
    Define Properties And Options Objects
    
-
    // create values and options objects
-var startValues = {};
-var endValues = {};
-var options = {};
-
-// here we define properties that are commonly supported
-startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';
-
-// 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;
-	// for IE we override color values
-	startValues.backgroundColor = '#CDDC39'; 
-	endValues.backgroundColor = '#ec1e71';
-	// IE8 also doesn't support RGBA, we set to animate the opacity of the element
-	startValues.opacity = 1;
-	endValues.opacity = 0.2;
-} 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;
-
    
-
-		
    Build Tween Object And Tween Controls
    
-
    // 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);
-
    
-		
    Live Demo
    
-		
    
-			
    
-				
-			
    
-			
    
-				Pause
-				Start
-				Stop
-			
    
-		
    
-		
    Let's explain this code a bit. KUTE.js gives you the internal variables myTween.playing and myTween.paused (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.
    
-		
    Also please know that opacity animation only works on Internet Explorer 8 if the target element uses float: left/right, display: block or display: inline-block.
    
-		
      
-			
    • the START button will use the .start() method and the animation starts;
      • 
-			
    • the STOP button will use the .stop() method and stops the animation; after this the, animation can only be started again
      • 
-			
    • the PAUSE button will use the .pause() method and pauses the animation; this also changes the button's text and functionality;
      • 
-			
    • the RESUME button will use the .resume() method and resumes the animation; this reverses the button's initial state;
      • 
-			
    • make sure you work with the conditions properly when you want to pause an animation you MUST check both !myTween.playing and myTween.paused conditions because you could end up with errors.
      • 			
-		
    
-        
-		
    Tween Object Collections
    
-		
    With KUTE.js 1.5.0 new tween object constructor methods were introduced, and 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.
    
-
    // 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 }
-);
-
    
-		
    And should looks like this:
    
-		
    
-			
    K
    
-			
    U
    
-			
    T
    
-			
    E
    
-				
-			
    
-				Start	
-			
    
-		
    
-		
    As you can see, we also used the new tween options offset and transformOrigin and they make it so much more easy.
    
-
-        
-		
    Easing Functions
    
-		
    KUTE.js core engine comes with Robert Penner's easing functions, but it can also work with any other easing functions, including custom functions. In the example below the first box animation uses the linear easing function and the second will use another function you choose.
    
-		
    
-			
    Linear
    
-			
    
-				
-			
    
-					
    
-				    Select
-						
      
-							
    • easingSinusoidalIn
      • 
-							
    • easingSinusoidalOut
      • 
-							
    • easingSinusoidalInOut
      • 
-							
    • easingQuadraticIn
      • 
-							
    • easingQuadraticOut
      • 
-							
    • easingQuadraticInOut
      • 
-							
    • easingCubicIn
      • 
-							
    • easingCubicOut
      • 
-							
    • easingCubicInOut
      • 
-							
    • easingQuarticIn
      • 
-							
    • easingQuarticOut
      • 
-							
    • easingQuarticInOut
      • 
-							
    • easingQuinticIn
      • 
-							
    • easingQuinticOut
      • 
-							
    • easingQuinticInOut
      • 
-							
    • easingCircularIn
      • 
-							
    • easingCircularOut
      • 
-							
    • easingCircularInOut
      • 
-							
    • easingExponentialIn
      • 
-							
    • easingExponentialOut
      • 
-							
    • easingExponentialInOut
      • 
-							
    • easingBackIn
      • 
-							
    • easingBackOut
      • 
-							
    • easingBackInOut
      • 
-							
    • easingElasticIn
      •                
-							
    • easingElasticOut
      •                
-							
    • easingElasticInOut
      • 
-						
    
-				
    
-				Start	
-			
    
-		
    
-		
    For more examples and info about the other easing functions, head over to the easing examples page.
       	
-	
    
-
-    
-
-		
-		
-
- 
    
- 
-
-
-
-	
-
-
-
-
-
- 
- 
- 
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Core Engine Examples | Javascript Animation Engine
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+    
+
+    
+
+
+
+    
    
+
+    
    
+
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+            
    Core Engine
    
+            
    KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript or with jQuery, but before we head over to the more advanced examples, let's have a quick look at these two
+                basic examples here. Note: the examples are posted on codepen.
    
+
+            
    Basic Native Javascript Example
    
+            
    When developing with native Javascript, a very basic syntax goes like this:
    
+
+            
    +// this is the tween object, basically KUTE.method(element, from, to, options);
+var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});
+
    
+
+            
    Now the tween object is created, it's a good time for you to know that via Native Javascript we always animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements
+                such as querySelectorAll() or getElementsByTagName(), you need to do a for () loop, or make use of the two new methods: .allTo() or .allFromTo(). Now let's apply the tween
+                control methods:
    
+
+            
    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
+tween.playing // checks if the tween is currenlty active so we prevent start() when not needed
+tween.paused // checks if the tween is currenlty active so we can prevent pausing or resume if needed
+
    
+
+            
    The demo for the above example is here.
    
+
+            
    Basic jQuery Example
    
+            
    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:
    
+            
    // this is the tween object, basically $('selector').method(fromValues, toValue, options)
+var tween = $('selector').fromTo({top: 20}, {top: 100}, {delay: 500});
+
    
+            
    We mentioned that the jQuery Plugin is different, and here's why: the above function call uses the allFromTo method to create an Array of objects for each HTML element of chosen selector, but if the selector
+                only returns one element the call returns a single tween object built with fromTo method. For the array of objects we can now apply the exact same tween control methods, except these:
    
+            
    tween.length // check if the tween is an array of objects
+tween.length && tween.tweens[0].playing && tween.tweens[tween.length-1].playing // now we know that one of the tweens is playing
+tween.length && tween.tweens[0].paused && tween.tweens[tween.length-1].paused // now we know that one of the tweens is paused
+
    
+
+            
    The demo for the above example is here.
    
+
+            
    Transform Properties Examples
    
+            
    KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY                and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateY, rotateZ properties. Additionally it
+                allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.
    
+
+            
    Translations
    
+            
    In the next example the first box is moving to left 250px with translate property, the second box is moving to the right by 200px using translateX and the third box is moving to the bottom using translate3d.
+                The last box also uses translate3d but requires a perspective value for the animation on the Z axis to be effective.
    
+            
    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});
+
    
+            
    And here is how it looks like:
    
+            
    
+                
    2D
    
+                
    X
    
+                
    Y
    
+                
    Z
    
+
+                
    
+                    Start
+                
    
+            
    
+
+            
    As you can see in your browsers console, for all animations translate3d is used, as explained in the features page. Also the first example that's using the 2D translate for both vertical
+                and horizontal axis even if we only set X axis. You can download this example here.
    
+            
    Remember: stacking translate and translate3d together may not work and IE9 does not support perspective.
    
+
+            
    Rotations
    
+            
    Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support rotate3d.
    
+
+            
    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});
+
    
+
+            
    And here is how it looks like:
    
+            
    
+                
    2D
    
+                
    X
    
+                
    Y
    
+                
    Z
    
+                
    
+                    Start
+                
    
+            
    
+            
    The rotateX and rotateY 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
+                perspective 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 here.
    
+
+            
    Skews
    
+            
    KUTE.js supports skewX and skewY so let's animate the two. Since they are 2D transformations, IE9 supports skews.
    
+            
    var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
+var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});
+
    
+
+            
    And here is how it looks like:
    
+            
    
+                
    X
    
+                
    Y
    
+
+                
    
+                    Start
+                
    
+            
    
+            
    You can download this example here.
    
+
+            
    Mixed Transformations
    
+            
    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:
    
+
+            
    var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
+var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
+
    
+            
    If you check the test here, you will notice that only the skewY is going to work and no rotation. Now let's do this properly.
    
+
+            
    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'} // transform 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'} // transform options
+);
+
    
+            
    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.
    
+
+            
    
+                
    element perspective 400px
    
+                
    parent perspective 400px
    
+
+                
    
+                    Start
+                
    
+            
    
+
+            
    This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example here.
    
+
+            
    Chained Transformations
    
+            
    KUTE.js has the ability to stack transform properties as they come in chained tweens 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 .to()                method because it has the ability to stack 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:
    
+            
    
+                
    FROMTO
    
+                
    FROMTO
    
+                
    TO
    
+
+                
    
+                    Start
+                
    
+            
    
+            
    What's this all about?
    
+            
      
+                
    • the first box uses a regular .fromTo() 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
      • 
+                
    • the second box is also using .fromTo() object, but using proper values for all tweens at all times, so we fixed that glitch
      • 
+                
    • and the last box uses the .to() method, and does the chaining easier for most properties, especially for transform
      • 
+            
    
+
+            
    When coding transformation chains I would highly recommend:
    
+            
      
+                
    • keep the same order of the transform properties, best would be: translation, rotation, skew and scale; an example of the difference shown here for rotations and
+                    here for rotations and skew;
      • 
+                
    • 2D and 3D translations would work best in if you provide a value at all times; eg. translate:[x,y] and translate3d:[x,y,z]; for instance using translate:150 or translateX:150 would mean
+                    that all other axis are 0;
      • 
+                
    • on larger amount of elements animating chains, the .fromTo() 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 features page;
      • 
+                
    • download this example here.
      • 
+            
    
+
+            
    Box Model Properties
    
+            
    KUTE.js core engine supports most used box model properties, and almost all the box model properties via the CSS Plugin, so the next example will only animate width, height, top                and left.
    
+            
    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});
+
    
+            
    We're gonna chain these tweens and start the animation. You can download this example here.
    
+            
    
+                
    BOX MODEL
    
+
+                
    
+                    Start
+                
    
+            
    
+
+
+            
    TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.
    
+
+            
    Color Properties
    
+            
    The next example is about animating color properties. As for example, check these lines for reference. Additional color properties such as borderColor or borderLeftColor are supported via the CSS Plugin.
    
+            
    KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
+KUTE.to('selector1',{backgroundColor:'#069'}).start();
+KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only
+
    
+            
    Let's get some animation going. Download the example here.
    
+
+            
    
+                
    Colors
    
+
+                
    
+                    Start
+                
    
+            
    
+
+            
    A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.
    
+
+            
    Vertical Scrolling
    
+            
    Another property we can animate with KUTE.js is scrollTop. I works for both the window and any scrollable object. Quick example:
    
+            
    KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
+KUTE.to('window',{scroll:450}).start(); // for the window
+
    
+            
    The scroll animation could however be influenced by mouse hover effects, usually creating some really nasty bottlenecks, but you can always add some CSS to your page to prevent that:
    
+            
    /* prevent scroll bottlenecks */
+body[data-tweening="scroll"],
+body[data-tweening="scroll"] * { pointer-events: none !important; }
+
    
+            
    A working example would work like this. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.
    
+
+
+            
    Cross Browser Animation Example
    
+            
    Unlike the examples hosted on Codepen, 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
+                complete reference. Now we are ready:
+                    
+                    
    Collect Information And Cache It
    
+                    
    // 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
+
+
    
+                    
    Define Properties And Options Objects
    
+                    
    // create values and options objects
+var startValues = {};
+var endValues = {};
+var options = {};
+
+// here we define properties that are commonly supported
+startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';
+
+// 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;
+  // for IE we override color values
+  startValues.backgroundColor = '#CDDC39';
+  endValues.backgroundColor = '#ec1e71';
+  // IE8 also doesn't support RGBA, we set to animate the opacity of the element
+  startValues.opacity = 1;
+  endValues.opacity = 0.2;
+} 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;
+
    
+
+                    
    Build Tween Object And Tween Controls
    
+                    
    // 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);
+
    
+                    
    Live Demo
    
+                    
    
+                        
    
+
+                        
    
+                        
    
+                            Pause
+                            Start
+                            Stop
+                        
    
+                    
    
+                    
    Let's explain this code a bit. KUTE.js gives you the internal variables myTween.playing and myTween.paused (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.
    
+                    
    Also please know that opacity animation only works on Internet Explorer 8 if the target element uses float: left/right, display: block or display: inline-block.
    
+                    
      
+                        
    • the START button will use the .start() method and the animation starts;
      • 
+                        
    • the STOP button will use the .stop() method and stops the animation; after this the, animation can only be started again
      • 
+                        
    • the PAUSE button will use the .pause() method and pauses the animation; this also changes the button's text and functionality;
      • 
+                        
    • the RESUME button will use the .resume() method and resumes the animation; this reverses the button's initial state;
      • 
+                        
    • make sure you work with the conditions properly when you want to pause an animation you MUST check both !myTween.playing and myTween.paused conditions because you could end up with errors.
      • 
+                    
    
+
+                    
    Tween Object Collections
    
+                    
    With KUTE.js 1.5.0 new tween object constructor methods were introduced, and 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.
    
+                    
    // 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 }
+);
+
    
+                    
    And should looks like this:
    
+                    
    
+                        
    K
    
+                        
    U
    
+                        
    T
    
+                        
    E
    
+
+                        
    
+                            Start
+                        
    
+                    
    
+                    
    As you can see, we also used the new tween options offset and transformOrigin and they make it so much more easy.
    
+
+
+                    
    Easing Functions
    
+                    
    KUTE.js core engine comes with Robert Penner's easing functions, but it can also work with any other easing functions, including custom functions. In the example below the first box animation uses the linear easing function
+                        and the second will use another function you choose.
    
+                    
    
+                        
    Linear
    
+                        
    
+
+                        
    
+                            
    
+                                Select
+                                
      
+                                    
    • easingSinusoidalIn
      • 
+                                    
    • easingSinusoidalOut
      • 
+                                    
    • easingSinusoidalInOut
      • 
+                                    
    • easingQuadraticIn
      • 
+                                    
    • easingQuadraticOut
      • 
+                                    
    • easingQuadraticInOut
      • 
+                                    
    • easingCubicIn
      • 
+                                    
    • easingCubicOut
      • 
+                                    
    • easingCubicInOut
      • 
+                                    
    • easingQuarticIn
      • 
+                                    
    • easingQuarticOut
      • 
+                                    
    • easingQuarticInOut
      • 
+                                    
    • easingQuinticIn
      • 
+                                    
    • easingQuinticOut
      • 
+                                    
    • easingQuinticInOut
      • 
+                                    
    • easingCircularIn
      • 
+                                    
    • easingCircularOut
      • 
+                                    
    • easingCircularInOut
      • 
+                                    
    • easingExponentialIn
      • 
+                                    
    • easingExponentialOut
      • 
+                                    
    • easingExponentialInOut
      • 
+                                    
    • easingBackIn
      • 
+                                    
    • easingBackOut
      • 
+                                    
    • easingBackInOut
      • 
+                                    
    • easingElasticIn
      • 
+                                    
    • easingElasticOut
      • 
+                                    
    • easingElasticInOut
      • 
+                                
    
+                            
    
+                            Start
+                        
    
+                    
    
+                    
    For more examples and info about the other easing functions, head over to the easing examples page.
    
+        
    
+
+        
+
+        
+        
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+
+
+
diff --git a/extend.html b/extend.html
index 4647cb4..e602209 100644
--- a/extend.html
+++ b/extend.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,82 +14,81 @@
     
     
     
-     
+    
 
     Extending KUTE.js | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-		
-	
-		
+
+    
+    
 
     
-    
-    
-	
-	
-	
+    
+    
+
+    
+
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
+    
    
 
-	
    		
-		
-		
    Extend Guide
    
-		
    KUTE.js is a very flexible animation engine that allows you to extend beyond measure. In this tutorial we'll dig into what's best to do to extend/customize the functionality of KUTE.js core, plugins and features.
    
+    
    
 
-		
    Basic Plugin Template
    
-		
    The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:
    
-
    /* KUTE.js - The Light Tweening Engine
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+
+            
    Extend Guide
    
+            
    KUTE.js is a very flexible animation engine that allows you to extend beyond measure. In this tutorial we'll dig into what's best to do to extend/customize the functionality of KUTE.js core, plugins and features.
    
+
+            
    Basic Plugin Template
    
+            
    The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:
    
+            
    /* KUTE.js - The Light Tweening Engine
  * by dnp_theme
  * package - pluginName
  * desc - what your plugin does
@@ -100,25 +101,25 @@
     define(['kute.js'], factory);
   } else if(typeof module == 'object' && typeof require == 'function') {
     module.exports = factory(require('kute.js'));
-  } else if ( typeof root.KUTE !== 'undefined' ) {	
+  } else if ( typeof root.KUTE !== 'undefined' ) {
     factory(root.KUTE);
   } else {
     throw new Error("pluginName require KUTE.js.");
   }
 }(this, function (KUTE) {
     // your code goes here
-    
+
     // in this function body
-    
+
     // the plugin returns this
     return this;
 }));
 
    
-        
    As suggested in the above template, your function body could be written with one or more of the examples below.
    
-        
-		
    Extend Tween Control
    
-		
    In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check Tween function to get the internal references notation:
    
-
    //add a reference to _tween function
+            
    As suggested in the above template, your function body could be written with one or more of the examples below.
    
+
+            
    Extend Tween Control
    
+            
    In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check Tween function to get the internal references notation:
    
+            
    //add a reference to _tween function
 var Tween = KUTE.Tween;
 
 // let's add a timescale method
@@ -155,28 +156,31 @@ Tween.prototype.restart = function(){
 
 // methods to queue callbacks with ease
 Tween.prototype.onUpdate = function(){
-    this.options.update = arguments; 
+    this.options.update = arguments;
     return this;
 }
 
 
    
-        
    For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very specific need.
    
-        
-		
    Support For Additional CSS Properties
    
-		
    KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and you'll master it real quick, it's very easy.
     
-        
    We need basically 3 functions:
    
-        
      
-            
    • KUTE.prepareStart['propertyName'] required a function to get the current value of the property required for the .to() method;
      • 
-            
    • KUTE.parseProperty['propertyName'] required a function to process the user value / current value to have it ready to tween;
      • 
-            
    • KUTE.dom['propertyName'] required a domUpdate function that will update the property value into the DOM;
      • 
-            
    • KUTE.crossCheck['propertyName'] optional a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;
      • 
-            
    • also optional additional functions that will help with value processing.
      • 
-        
    
-        
    So let's add support for boxShadow! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template and let's break it down to pieces:
    
-
    // add a reference to global and KUTE object
-var g = typeof global !== 'undefined' ? global : window, K = KUTE, 
+            
    For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very specific need.
    
+
+            
    Support For Additional CSS Properties
    
+            
    KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and
+                you'll master it real quick, it's very easy.
    
+            
    We need basically 3 functions:
    
+            
      
+                
    • KUTE.prepareStart['propertyName'] required a function to get the current value of the property required for the .to() method;
      • 
+                
    • KUTE.parseProperty['propertyName'] required a function to process the user value / current value to have it ready to tween;
      • 
+                
    • KUTE.dom['propertyName'] required a domUpdate function that will update the property value into the DOM;
      • 
+                
    • KUTE.crossCheck['propertyName'] optional a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms
+                    and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;
      • 
+                
    • also optional additional functions that will help with value processing.
      • 
+            
    
+            
    So let's add support for boxShadow! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template
+                and let's break it down to pieces:
    
+            
    // add a reference to global and KUTE object
+var g = typeof global !== 'undefined' ? global : window, K = KUTE,
     // add a reference to KUTE utilities
-    prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle, 
+    prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
     property = K.property, parseProperty = K.parseProperty, trueColor = K.truC,
     DOM = K.dom, color = g.Interpolate.color, unit = g.Interpolate.unit; // interpolation functions
 
@@ -189,8 +193,8 @@ var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}
 // for browsers that don't support the property, use a filter
 // if (!(_boxShadow in document.body.style)) {return;}
 
    
-        
    Now we have access to the KUTE object, prototypes and it's utility functions, let's write a prepareStart function that will read the current boxShadow value:
    
-
    // for the .to() method, you need to prepareStart the boxShadow property
+            
    Now we have access to the KUTE object, prototypes and it's utility functions, let's write a prepareStart function that will read the current boxShadow value:
    
+            
    // for the .to() method, you need to prepareStart the boxShadow property
 // which means you need to read the current computed value
 // if the current computed value is not acceptable, use a default value
 prepareStart['boxShadow'] = function(property,value){
@@ -204,13 +208,14 @@ prepareStart['boxShadow'] = function(property,value){
 
 // also to read the current value of an attribute, replace first line of the above function body with this
 // var attrValue = element.getAttribute(property);
-// and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types  
+// and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types
 
    
 
-        
    Since KUTE.js 1.6.0, the tween object is bound to all property parsing utilities, meaning that you have access to this that has the target element, options, start and end values and everything else. This is extremely useful if you want to optimize and/or extend particular properties values, the dom update functions, and even override the property name
    
+            
    Since KUTE.js 1.6.0, the tween object is bound to all property parsing utilities, meaning that you have access to this that has the target element, options, start and end values and everything else. This is extremely useful if
+                you want to optimize and/or extend particular properties values, the dom update functions, and even override the property name
    
 
-        
    Now we need an utility function that makes sure the structure looks right for the DOM update function.
    
-
    // utility function to process values accordingly
+            
    Now we need an utility function that makes sure the structure looks right for the DOM update function.
    
+            
    // utility function to process values accordingly
 // numbers must be floats/integers and color must be rgb object
 var processBoxShadowArray = function(shadow){
   var newShadow;
@@ -220,44 +225,45 @@ var processBoxShadowArray = function(shadow){
   } 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'];           
+    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; 
-  } 
+    newShadow = shadow;
+  }
 
   // make sure the numbers are ready to tween
   for (var i=0; i<4; i++){
-    newShadow[i] = parseFloat(newShadow[i]);  
+    newShadow[i] = parseFloat(newShadow[i]);
   }
   // make sure color is an rgb object
   newShadow[4] = trueColor(newShadow[4]); // where K.truC()/trueColor is a core method to return the true color in rgb object format
   return newShadow;
 };
-
      
+
    
 
-        
    Next we'll need to write a parseProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the KUTE.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
    
-        
-
    // the parseProperty for boxShadow 
-// registers the window.dom['boxShadow'] function 
+            
    Next we'll need to write a parseProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the KUTE.dom['boxShadow'] function into the
+                KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
    
+
+            
    // the parseProperty for boxShadow
+// registers the window.dom['boxShadow'] function
 // returns an array of 6 values in the following format
 // [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
 parseProperty['boxShadow'] = function(property,value,element){
   // the DOM update function for boxShadow registers here
   // we only enqueue it if the boxShadow property is used to tween
   if ( !('boxShadow' in DOM) ) {
-    DOM['boxShadow'] = function(element,property,startValue,endValue,progress) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress 
+    DOM['boxShadow'] = function(element,property,startValue,endValue,progress) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress
 
       // let's start with the numbers | set unit | also determine inset
       var numbers = [], px = 'px', // the unit is always px
-        inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false; 
+        inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false;
 
-      for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers 
+      for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers
         numbers.push( unit(startValue[i], endValue[i], px, progress) );
       }
 
       // now we handle the color
       var colorValue = color(startValue[4],endValue[4],progress);
-      
+
       // last piece of the puzzle, the DOM update
       element.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
     };
@@ -271,9 +277,9 @@ parseProperty['boxShadow'] = function(property,value,element){
     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"
-    shadowColor = value.match(colRegEx); 
+    shadowColor = value.match(colRegEx);
     value = value.replace(shadowColor[0],'').split(' ').concat([shadowColor[0].replace(/\s/g,'')],[inset]);
-    
+
     // now we can use the above specific utitlity
     value = processBoxShadowArray(value);
   } else if (value instanceof Array){
@@ -283,8 +289,8 @@ parseProperty['boxShadow'] = function(property,value,element){
 }
 
    
 
-		
    And now, we are ready to tween both .to() and .fromTo() methods:
    
-
    // tween to a string value
+            
    And now, we are ready to tween both .to() and .fromTo() methods:
    
+            
    // tween to a string value
 var myBSTween1 = KUTE.to('selector', {boxShadow: '15px 25px #069'}).start();
 
 // or a fromTo with string and array, hex and rgb
@@ -293,66 +299,79 @@ var myBSTween2 = KUTE.fromTo('selector', {boxShadow: [15, 25, 0, '#069']}, {boxS
 // maybe you want to animate an inset boxShadow?
 var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
 
    
-        
    You are now ready to demo!
    
-		
    
-			
    
-				
-			
    
-				Start	
-			
    
-		
    
-		
    This plugin should be compatible with IE9+ and anything that supports boxShadow CSS property. As you can see it can handle pretty much anything you throw at it, but it requires at least 3 values: h-shadow, v-shadow, and color because Safari doesn't work without a color. Also this plugin won't be able to handle multiple instances of boxShadow for same element, because the lack of support on legacy browsers, also the color cannot be RGBA, but hey, it supports both outline and inset shadows and you can fork it anyway to your liking.
     
-        
    If you liked this tutorial, feel free to write your own, a great idea would be for textShadow, it's very similar to the above example plugin.
    
-        
-		
    Utility Methods
    
-         
      
-            
    • KUTE.selector(selector,multi) is the selector utility that uses getElementById or querySelector when multi argument is null or false, BUT when true, querySelectorAll is used and returns a HTMLCollection object.
      • 
-            
    • KUTE.property(propertyName) is the autoPrefix function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function returns undefinedPropertyName and that would be an easy way to detect support for that property on most legacy browsers: 
      if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }
      • 
-            
    • KUTE.getPrefix() returns a vendor preffix even if the browser supports a specific preffixed property or not.
      • 
-            
    • KUTE.getCurrentStyle(element,property) a hybrid getComputedStyle function to get the current value of the property required for the .to() method; it actually checks in element.style, element.currentStyle and window.getComputedStyle(element,null) to make sure it won't miss the property value;
      • 
-            
    • KUTE.truD(value) a function that accepts String and Number and returns a {v: 150, u: 'px'} object for any box model or a single numeric value based property and make it ready to tween. When a second parameter is set to true it will return an object with value and unit specific for rotation angles and skews.
      • 
-            
    • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color, the IE9+ browsers will be able to return the rgb object we need.
      • 
-            
    • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
      • 
-            
    • KUTE.rth(r,g,b) a function that accepts numeric values for red, blue and green and returns a HEX format #006699 color string.
      • 
-            
    • Interpolate.number is most essential interpolation tool when developing plugins for various properties not supported in the core.
      • 
-            
    • Interpolate.unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
      • 
-            
    • Interpolate.color is a very fast interpolation function for colors, as used in the above example.
      • 
-            
    • Interpolate.coords is SVG Plugin only, but you can have a look anytime when you're out of ideas.
      • 
-        
    
+            
    You are now ready to demo!
    
+            
    
+                
    
 
-        
-		
-	
    
-	  
-      
-     
+                
    
+                    Start
+                
    
+            
    
+            
    This plugin should be compatible with IE9+ and anything that supports boxShadow CSS property. As you can see it can handle pretty much anything you throw at it, but it requires at least 3 values: h-shadow, v-shadow, and color
+                because Safari doesn't work without a color. Also this plugin won't be able to handle multiple instances of boxShadow for same element, because the lack of support on legacy browsers, also the color cannot be RGBA, but hey,
+                it supports both outline and inset shadows and you can fork it anyway to your liking.
    
+            
    If you liked this tutorial, feel free to write your own, a great idea would be for textShadow, it's very similar to the above example plugin.
    
 
- 
    
- 
+            
    Utility Methods
    
+            
      
+                
    • KUTE.selector(selector,multi) is the selector utility that uses getElementById or querySelector when multi argument is null or false, BUT
+                    when true, querySelectorAll is used and returns a HTMLCollection object.
      • 
+                
    • KUTE.property(propertyName) is the autoPrefix function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function
+                    returns undefinedPropertyName and that would be an easy way to detect support for that property on most legacy browsers: 
      if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }
      • 
+                
    • KUTE.getPrefix() returns a vendor preffix even if the browser supports a specific preffixed property or not.
      • 
+                
    • KUTE.getCurrentStyle(element,property) a hybrid getComputedStyle function to get the current value of the property required for the .to() method; it actually checks in element.style,
+                    element.currentStyle and window.getComputedStyle(element,null) to make sure it won't miss the property value;
      • 
+                
    • KUTE.truD(value) a function that accepts String and Number and returns a {v: 150, u: 'px'} object for any box model or a single numeric value based property and make it ready to tween. When a second
+                    parameter is set to true it will return an object with value and unit specific for rotation angles and skews.
      • 
+                
    • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color,
+                    the IE9+ browsers will be able to return the rgb object we need.
      • 
+                
    • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
      • 
+                
    • KUTE.rth(r,g,b) a function that accepts numeric values for red, blue and green and returns a HEX format #006699 color string.
      • 
+                
    • Interpolate.number is most essential interpolation tool when developing plugins for various properties not supported in the core.
      • 
+                
    • Interpolate.unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
      • 
+                
    • Interpolate.color is a very fast interpolation function for colors, as used in the above example.
      • 
+                
    • Interpolate.coords is SVG Plugin only, but you can have a look anytime when you're out of ideas.
      • 
+            
    
+
+            
+
+        
    
+
+        
+        
+
+    
    
+    
 
 
-
-	
+    
 
-
-	
+    
+    
 
-
+    
 
- 
- 
- 
- 
+    
+    
+    
+    
+    
+    
+    
+    
 
+
 
diff --git a/features.html b/features.html
index dc3e312..a856f55 100644
--- a/features.html
+++ b/features.html
@@ -1,173 +1,203 @@
-
-
-
-
-
-  
-
-
-    
-    
-    
-    
-    
-    
-     
-
-    KUTE.js Features | Javascript Animation Engine
-	
-    
-    
-	
-    
-    
-	
-	
-    
-
-    
-    
-    
-	
-	
-
-
-
-
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
-
-	
    
-		
    Features Overview
    
-		
    Badass Performance
    
-		
    KUTE.js was developed with best practices in mind for fastest code execution and memory efficiency, but performance varies from case to case, as well as for all the other Javascript based animation engines. As a quick note on how it works, 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.
    
-
-		
    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 video), code simplicity (lots of CSS for a custom animation) and more other.
    
-		
    To learn more about how performance can vary from case to case, check out this section, it's very informative.
    
-	
    
-
-	
    
-		
    Extensible Prototype
    
-		
    KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing functions, HTML presentation attributes or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy. 
    
-		
    For instance if you want to be able to animate the filter property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function to read current value and the last one for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other tools you can use for your own plugin's processing.
     
-		
    You may want to head over to the extend page for an indepth guide on how to write your own plugin/extension.
     
-	
    
-
-	
    
-		
    Auto Browser Prefix
    
-		
    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: transform, perspective, perspective-origin, border-radius and the requestAnimationFrame Javascript method.
    
-		
    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; less string concatenation = more performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.
     
-		
    This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.
    
-	
    
-
-	
    
-		
    Browser Compatibility
    
-		
    KUTE.js covers all modern browsers but also provides fallback options for legacy browsers. The prefix free feature mentioned above is one way to enable smooth Javascript based animations on older versions Gecko/Webkit/IE browsers for transform and border-radius. Generally, KUTE.js is built around most used properties, so I highly recommend checking the can I use website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support 2D transforms or 3D transforms so make sure you know what browsers support and how to target them before you get to work with a complete browser supported animation setup.
     
-		
    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 polyfills 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 transition.
    	
-		
    Speaking of polyfills, KUTE.js no longer requires window.requestAnimationFrame() for the main thread, but it does require the window.performance.now() for checking the current time, .indexOf() for array/string checks, window.getComputedStyle() for the .to() method and .addEventListener() for scroll animation. 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 polyfill service some browser detection will not work because they fill the gap and your code won't work as expected. For instance this would check for IE8 browser var isIE = document.all && !document.addEventListener; but the polyfill covers .addEventListener() so you will never succeed. This very demo is a great solution for targeting Microsoft's legacy browsers.
    
-		
    As of Safari, we did some tests there too, KUTE.js does it really well.
    
-	
    
-	
-	
    
-		
    Methods, Tools and Options
    
-		
    Building Tween Objects
    
-		
    KUTE.js allows you to create tween objects with the help of .to() and .fromTo() methods for a single element, with distinctive functionalities, and the other .allTo() and .allFromTo() that use the first two for collections of elements.
     
-		
-        
    KUTE.to('selector', toValues, options) method is super simple and straightforward and requires a polyfill for window.getComputedStyle() 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 transform properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at start() method API.
    
-		
-        
    KUTE.fromTo('selector', fromValues, toValues, options) 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.
     
-
-		
    It doesn't stack transform 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.
    
-        
-        
    KUTE.allTo('selector', toValues, options) and KUTE.allFromTo('selector', fromValues, toValues, options) inherit all functionality from the .to() and .fromTo() method respectively, but they apply to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the API documentation on all the methods.
    
-
-		
    Tween Control
    
-		
    Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: .start(), .stop(), .pause() and .resume(). These public methods work either when animation is not running, running or is paused. You need to see the documentation to learn how these work.
     
-		
-		
    Tween Options
    
-		
    Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or a perspective-origin, right? Well, make sure to check that out.
    
-		
-		
    Callback System
    
-		
    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.
    
-
-		
    Addons
    
-		
    KUTE.js sports some fine tuned addons: jQuery Plugin, SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic bezier easing functions and also physics based easing functions. It also features an extensive guide on how to extend, but I'm open for more features in the future.
    
-		
-		
    Check the documentation on these methods and the examples page for more.
    
-	
    
-
-	
    
-		
    Developer Friendly
    
-		
    You can develop with KUTE.js for free thanks to the MIT License terms. The terms in short allow you to use the script for free in both personal and commercial application as long as you give proper credits to the original author. Also a link back would be appreciated.
    
-		
    Also KUTE.js is super documented, all features and options are showcased with detailed examples so you can get your hands really dirty.
    
-		
-			
-	
    
-	  
-      
-     
-
- 
    
- 
-
-
-
-	
-
-
-
- 
- 
-
-
+
+
+
+
+
+
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Features | Javascript Animation Engine
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+    
+
+    
+
+
+
+
+    
    
+
+    
    
+
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+            
    Features Overview
    
+            
    Badass Performance
    
+            
    KUTE.js was developed with best practices in mind for fastest code execution and memory efficiency, but performance varies from case to case, as well as for all the other Javascript based animation engines.
+                As a quick note on how it works, 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.
    
+
+            
    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 video), code simplicity
+                (lots of CSS for a custom animation) and more other.
    
+            
    To learn more about how performance can vary from case to case, check out this section, it's very informative.
    
+        
    
+
+        
    
+            
    Extensible Prototype
    
+            
    KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing functions, HTML presentation attributes
+                or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy. 
    
+            
    For instance if you want to be able to animate the filter property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function to read current value and the last one
+                for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other tools you can use for your own plugin's processing.
    
+            
    You may want to head over to the extend page for an indepth guide on how to write your own plugin/extension.
    
+        
    
+
+        
    
+            
    Auto Browser Prefix
    
+            
    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: transform, perspective, perspective-origin, border-radius and the requestAnimationFrame Javascript method.
    
+            
    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; less string concatenation = more performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.
    
+            
    This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.
    
+        
    
+
+        
    
+            
    Browser Compatibility
    
+            
    KUTE.js covers all modern browsers but also provides fallback options for legacy browsers. The prefix free feature mentioned above is one way to enable smooth Javascript based animations on older versions
+                Gecko/Webkit/IE browsers for transform and border-radius. Generally, KUTE.js is built around most used properties, so I highly recommend checking the can I use                website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support 2D transforms or 3D transforms                so make sure you know what browsers support and how to target them before you get to work with a complete browser supported animation setup.
    
+            
    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 polyfills                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 transition.
    
+            
    Speaking of polyfills, KUTE.js no longer requires window.requestAnimationFrame() for the main thread, but it does require the window.performance.now() for checking the current time, .indexOf() for array/string
+                checks, window.getComputedStyle() for the .to() method and .addEventListener() for scroll animation. 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 polyfill service some browser detection will not work because they fill the
+                gap and your code won't work as expected. For instance this would check for IE8 browser var isIE = document.all && !document.addEventListener; but the polyfill covers .addEventListener() so you will never succeed.
+                This very demo is a great solution for targeting Microsoft's legacy browsers.
    
+            
    As of Safari, we did some tests there too, KUTE.js does it really well.
    
+        
    
+
+        
    
+            
    Methods, Tools and Options
    
+            
    Building Tween Objects
    
+            
    KUTE.js allows you to create tween objects with the help of .to() and .fromTo() methods for a single element, with distinctive functionalities, and the other .allTo() and .allFromTo() that
+                use the first two for collections of elements.
    
+
+            
    KUTE.to('selector', toValues, options) method is super simple and straightforward and requires a polyfill for window.getComputedStyle() 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 transform properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at start() method API.
    
+
+            
    KUTE.fromTo('selector', fromValues, toValues, options) 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.
    
+
+            
    It doesn't stack transform 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.
    
+
+            
    KUTE.allTo('selector', toValues, options) and KUTE.allFromTo('selector', fromValues, toValues, options) inherit all functionality from the .to() and .fromTo() method respectively, but they apply
+                to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the API documentation on all the methods.
    
+
+            
    Tween Control
    
+            
    Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: .start(), .stop(), .pause() and .resume().
+                These public methods work either when animation is not running, running or is paused. You need to see the documentation to learn how these work.
    
+
+            
    Tween Options
    
+            
    Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or a perspective-origin,
+                right? Well, make sure to check that out.
    
+
+            
    Callback System
    
+            
    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.
    
+
+            
    Addons
    
+            
    KUTE.js sports some fine tuned addons: jQuery Plugin, SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic bezier easing functions and also
+                physics based easing functions. It also features an extensive guide on how to extend, but I'm open for more features in the future.
    
+
+            
    Check the documentation on these methods and the examples page for more.
    
+        
    
+
+        
    
+            
    Developer Friendly
    
+            
    You can develop with KUTE.js for free thanks to the MIT License terms. The terms in short allow you to use the script
+                for free in both personal and commercial application as long as you give proper credits to the original author. Also a link back would be appreciated.
    
+            
    Also KUTE.js is super documented, all features and options are showcased with detailed examples so you can get your hands really dirty.
    
+
+            
+        
    
+
+        
+        
+
+    
    
+    
+
+
+
+    
+    
+
+    
+
+    
+    
+    
+    
+
+
+
diff --git a/index.html b/index.html
index e41ab32..32058a6 100644
--- a/index.html
+++ b/index.html
@@ -1,218 +1,231 @@
-
-
-
-
-
-  
-
-
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js | Javascript Animation Engine
-	
-    
-    
-	
-    
-    
-
-	
-    
-
-    
-    
-    	
-	
-	
-	
-
-
-
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
-	
-
-	
    	
-		
    
-			
    
-				
    
-					
    
-					
     
-					
    	
-						Download
-						Github
-						CDN 1
-						CDN 2
-						Replay
-					
    
-				
    		
-			
    		
-			
    		
-				
    
-					
    
-						
    
-						
    
-						
    
-					
-						
    
-						
    
-						
    	
-											
-						
    
-						
    
-						
    	
-
-					
    
-				
    
-
-			
    
-		
    
-	
    
-
-	
    
-		
    
-			
    At A Glance
    
-			
    
-				
    
-					
    Badass Performance
    
-					
    KUTE.js is crazy fast with it's outstanding performance and super fast code execution, it's also memory efficient. I made a cool demo to showcase how KUTE.js really scales on performance. 
    
-				
    
-				
    
-					
    Prefix Free
    
-					
    KUTE.js can detect if the user's browser requires prefix and uses it accordingly mostly for transform, and even allows you to use the utilities yourself in your apps or your own plugins.
    
-				
    
-			
    
-			
    
-				
    
-					
    All Browsers Compatible
    
-					
    KUTE.js covers all modern browsers with fallback options for legacy browsers. When using polyfills and the right browser detection you can manage all kinds of fallback animations for legacy browsers.
    
-				
    
-				
    
-					
    Powerful Methods
    
-					
    KUTE.js allows you to create tweens and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum tween options.
    
-				
    
-			
    
-			
    
-				
    
-					
    Packed With Tools
    
-					
    KUTE.js comes with a CSS Plugin, a SVG Plugin, an ATTR Plugin, a Text Plugin and a jQuery plugin, easing functions, color convertors, utility functions, and you can even extend it yourself.
    
-				
    
-				
    
-					
    Plenty Of Properties
    
-					
    KUTE.js covers all animation needs such as SVG morph & transform and other specific CSS properties, then CSS3 transform, scroll, border-radius, and almost the full box model or text properties.
    
-				
    
-			
    
-			
    	
-				
    
-					
    MIT License
    
-					
    You can develop with KUTE.js for free thanks to the MIT License terms.
    
-				
    
-				
    
-					
    Top Notch Documentation
    
-					
    All examples, code, tips & tricks are very well documented.
    
-				
    
-			
    		
-		
    
-	
    
-
-	
    
-		
    Getting Started
    
-		
    
-			
    
-				
-				
    Examples
    
-				
    See KUTE.js in action with all it's functions, options and features.
    
-			
    			
-			
    
-				
-				
    Documentation
    
-				
    The API documentation is here for you to get you started.
    
-			
    
-
-			
    
-				
-				
    Performance
    
-				
    Head over to the performance test page right away.
    
-			
    
-		
    
-
-    
-
-	
    
-	  
-      
-	
-
- 
    
- 
-
-
-
-
-	
-
-
- 
- 
- 
- 
- 
-
-
+
+
+
+
+
+
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js | Javascript Animation Engine
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+    
+
+    
+
+
+
+
+    
    
+
+    
    
+
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+
+        
    
+            
    
+                
    
+                    
    
+                        
    
+                        
    
+                        
    
+                            Download
+                            Github
+                            CDN 1
+                            CDN 2
+                            Replay
+                        
    
+                    
    
+                
    
+                
    
+                    
    
+                        
    
+                            
    
+                            
    
+                            
    
+
+                            
    
+                            
    
+                            
    
+
+                            
    
+                            
    
+                            
    
+
+                        
    
+                    
    
+
+                
    
+            
    
+        
    
+
+        
    
+            
    
+                
    At A Glance
    
+                
    
+                    
    
+                        
    Badass Performance
    
+                        
    KUTE.js is crazy fast with it's outstanding performance and super fast code execution, it's also memory efficient. I made a cool demo to showcase how KUTE.js
+                            really scales on performance. 
    
+                    
    
+                    
    
+                        
    Prefix Free
    
+                        
    KUTE.js can detect if the user's browser requires prefix and uses it accordingly mostly for transform, and even allows you to use the utilities yourself in your apps or your own plugins.
    
+                    
    
+                
    
+                
    
+                    
    
+                        
    All Browsers Compatible
    
+                        
    KUTE.js covers all modern browsers with fallback options for legacy browsers. When using polyfills and the right browser detection                            you can manage all kinds of fallback animations for legacy browsers.
    
+                    
    
+                    
    
+                        
    Powerful Methods
    
+                        
    KUTE.js allows you to create tweens and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum tween options.
    
+                    
    
+                
    
+                
    
+                    
    
+                        
    Packed With Tools
    
+                        
    KUTE.js comes with a CSS Plugin, a SVG Plugin,
+                            an ATTR Plugin, a Text Plugin and a jQuery plugin, easing functions,
+                            color convertors, utility functions, and you can even extend it yourself.
    
+                    
    
+                    
    
+                        
    Plenty Of Properties
    
+                        
    KUTE.js covers all animation needs such as SVG morph & transform and other specific CSS properties, then CSS3 transform, scroll, border-radius, and almost
+                            the full box model or text properties.
    
+                    
    
+                
    
+                
    
+                    
    
+                        
    MIT License
    
+                        
    You can develop with KUTE.js for free thanks to the MIT License terms.
    
+                    
    
+                    
    
+                        
    Top Notch Documentation
    
+                        
    All examples, code, tips & tricks are very well documented.
    
+                    
    
+                
    
+            
    
+        
    
+
+        
    
+            
    Getting Started
    
+            
    
+                
    
+                    
+                    
    Examples
    
+                    
    See KUTE.js in action with all it's functions, options and features.
    
+                
    
+                
    
+                    
+                    
    Documentation
    
+                    
    The API documentation is here for you to get you started.
    
+                
    
+
+                
    
+                    
+                    
    Performance
    
+                    
    Head over to the performance test page right away.
    
+                
    
+            
    
+
+            
+
+        
    
+
+        
+        
+
+    
    
+    
+
+
+
+
+    
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+
+
diff --git a/options.html b/options.html
index fbd1886..cc62462 100644
--- a/options.html
+++ b/options.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,138 +14,148 @@
     
     
     
-     
+    
+    
 
     KUTE.js Tween Options | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-		
-	
-		
+
+    
+    
 
     
-    
-    
-	
-	
-	
+    
+    
+
+    
+
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
    
-    
    
+            
    
+        
 
-	
    
-		
    Tween Options
    
-		
    Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can override these default values, as we'll see later on this page.
    
+        
    
+            
    Tween Options
    
+            
    Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can override these default values, as
+                we'll see later on this page.
    
 
-		
    Common Options
    
-        
    These options affect all types of tweens, no matter the properties used or context.
    
-        
      
-            
    • duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.
      • 
-            
    • repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
      • 
-            
    • delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.
      • 
-            
    • offset: 200 option is only for .allTo() and .allFromTo() 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 0.
      • 
-            
    • repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.
      • 		
-            
    • yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value 1. The default value is false.
      • 
-            
    • easing: 'easingCubicInOut' 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 linear.
      • 
-        
    
+            
    Common Options
    
+            
    These options affect all types of tweens, no matter the properties used or context.
    
+            
      
+                
    • duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.
      • 
+                
    • repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
      • 
+                
    • delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.
      • 
+                
    • offset: 200 option is only for .allTo() and .allFromTo() 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 0.
      • 
+                
    • repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.
      • 
+                
    • yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value
+                    1. The default value is false.
      • 
+                
    • easing: 'easingCubicInOut' 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 linear.
      • 
+            
    
 
-		
    Transform Options
    
-		
    These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.
    
-        
      
-            
    • perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
      • 
-            
    • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML element.  This option has no default value and only accepts valid CSS values according to it's specs.
      • 
-            
    • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation. No default value.
      • 
-            
    • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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 and has no default value.
      • 
-            
    • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a svgTransform property, it can also accept array values: transformOrigin: [250,250]. There is no default value but the SVG Plugin will always use 50% 50% for your transform tweens.
      • 
-        
    
+            
    Transform Options
    
+            
    These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options
+                are here to help, especially with full browser support and preffix free handling.
    
+            
      
+                
    • perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
      • 
+                
    • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML element. This option has no default value and only accepts valid CSS values according to it's specs.
      • 
+                
    • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation. No default value.
      • 
+                
    • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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 and has no default value.
      • 
+                
    • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with
+                    the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's
+                    default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a svgTransform property, it can also accept array values: transformOrigin: [250,250].
+                    There is no default value but the SVG Plugin will always use 50% 50% for your transform tweens.
      • 
+            
    
 
-		
    SVG Plugin Options
    
-		
    The following options only affect animation of the path tween property, to customize the SVG morph animation. See SVG Plugin page.
    
-        
      
-            
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.
      • 
-            
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".
      • 
-            
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.
      • 
-            
    • reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.
      • 
-        
    
+            
    SVG Plugin Options
    
+            
    The following options only affect animation of the path tween property, to customize the SVG morph animation. See SVG Plugin page.
    
+            
      
+                
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.
      • 
+                
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".
      • 
+                
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.
      • 
+                
    • reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.
      • 
+            
    
 
-		
    Text Plugin Options
    
-		
    The only option for the plugin is the textChars option for the text property and allows you to set the characters set for the scrambling character during the animation. See Text Plugin page for more instructions and demo.
    
-        
-		
    Callback Options
    
-        
    These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.
    
-        
      
-            
    • start: function option allows you to set a function to run once tween animation starts.
      • 
-            
    • update: function option allows you to set a function to run on every frame.
      • 
-            
    • pause: function option allows you to set a function to run when animation is paused.
      • 
-            
    • resume: function option allows you to set a function to run when animation is resumed.
      • 
-            
    • stop: function option allows you to set a function to run when animation is stopped.
      • 
-            
    • complete: function option allows you to set a function to run when animation is finished.
      • 
-        
    
-        
-		
    A quick example would look like this:
    
-
    //define a function
+            
    Text Plugin Options
    
+            
    The only option for the plugin is the textChars option for the text property and allows you to set the characters set for the scrambling character during the animation. See Text Plugin                page for more instructions and demo.
    
+
+            
    Callback Options
    
+            
    These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.
    
+            
      
+                
    • start: function option allows you to set a function to run once tween animation starts.
      • 
+                
    • update: function option allows you to set a function to run on every frame.
      • 
+                
    • pause: function option allows you to set a function to run when animation is paused.
      • 
+                
    • resume: function option allows you to set a function to run when animation is resumed.
      • 
+                
    • stop: function option allows you to set a function to run when animation is stopped.
      • 
+                
    • complete: function option allows you to set a function to run when animation is finished.
      • 
+            
    
+
+            
    A quick example would look like this:
    
+            
    //define a function
 var callback = function(){
-	//do some foo
+  //do some foo
 }
 
 //create object and start animating already
 KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
-
    		
-		
    Other Options
    
-		
    keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.
    
+
    
+            
    Other Options
    
+            
    keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers
+                may ignore this option for performance reasons.
    
 
-		
    Override Default Options' Values
    
-        
    Most options have a default value as you can see above, they are globally defined in the KUTE.defaultOptions object like so:
    
-
    // the list of all tween options that can be overrided
+            
    Override Default Options' Values
    
+            
    Most options have a default value as you can see above, they are globally defined in the KUTE.defaultOptions object like so:
    
+            
    // the list of all tween options that can be overrided
 KUTE.defaultOptions = {
     duration: 700,
     delay: 0,
@@ -158,47 +170,51 @@ KUTE.defaultOptions = {
 };
 
    
 
-    
    As some user suggested, he would need a way to override the default duration value, here's how to:
    
-    
-
    // sets the new global duration tween option default value 
+            
    As some user suggested, he would need a way to override the default duration value, here's how to:
    
+
+            
    // sets the new global duration tween option default value
 KUTE.defaultOptions.duration = 1000;
-
    		
-    
    Also make sure to define the new option global default values before you define your tween objects.
    
-	
    
+
    
+            
    Also make sure to define the new option global default values before you define your tween objects.
    
+        
 
-	
    		
+        
    
 
-        
-		
-	
    
-	  
-      
-     
+            
 
- 
    
- 
+        
+
+        
+        
+
+    
+    
 
 
-
-	
+    
 
-
-	
+    
+    
 
-
+    
 
- 
- 
+    
+    
+    
+    
 
+
 
diff --git a/performance.html b/performance.html
index 320a185..3eb0b42 100644
--- a/performance.html
+++ b/performance.html
@@ -8,125 +8,173 @@
     
     
     
-     
+    
+    
 
     KUTE.js | Performance Testing Page
-    	
+    
     
     
-    
+    
 
 
 
-  
-
    
-    
    Back to KUTE.js
    
-    
    Engine  
         
+
+    
    
+        
    Back to KUTE.js
    
+        
    Engine 
    
         
           
-          
         
-    
-    
    Property 
      
+
+        
    Property 
    
         
           
-          
         
-      
-      
-      
    Repeat   
     
+
+
+        
    Repeat 
    
         
           
-          
         
-      
-        
-      
    How many elements to animate:
     
+
+
+        
    How many elements to animate:
    
         
             
-            
+        
         
-          
+
         
    
-          
+
         
    
-          
+            
         
    
- 
-
-
-
    These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.
    
-
    Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.
    
-         
 
-
    
+        
+        
+        
    These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.
    
+        
    Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.
    
+        
 
-
    
+    
    
 
-	
+    
    
 
 
-
-	
-
+    
+    
 
-
-
+    
+    
 
-
-
-
-
-
-  
+    
+    
+    
+    
+    
+    
 
+
 
diff --git a/properties.html b/properties.html
index ba61d2b..3993401 100644
--- a/properties.html
+++ b/properties.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,227 +14,271 @@
     
     
     
-     
+    
+    
 
     KUTE.js Supported Properties | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
-	
-	
+
+    
     
-    
+
     
-    
-	
-	
+    
+    
+
+    
 
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
      
-			
    • Features 
-                            
-            
      • 
-			
    • 
-                Examples 
-                
        
-                    
      • Core Engine
        • 
-                    
      • CSS Plugin 
        • 
-                    
      • SVG Plugin 
        • 
-                    
      • Text Plugin 
        • 
-                    
      • Attributes Plugin 
        • 
+    
        
+
+    
        
+
+        
        
+            
        
+                
        KUTE.js
        
+                
-            
-			
      • 
-                API 
-                
        • 
+        
        
+
+        
        
+            
        Supported Properties
        
+            
        KUTE.js covers all animation needs by itself for transform properties, scroll for window or a given element, colors. Note: not all browsers support 2D transforms                or 3D transforms. With the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like border-radius,
+                clip, backgroundPosition and more box model properties.
        
+            
        Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular coding, KUTE.js makes it easy to add support for additional
+                properties, so check out the guide on how to extend.
        
+            
        All common measurement units are supported: px and % for translations and box-model properties, or deg and rad for rotations and skews, while clip only supports px.
+                Other properties such as opacity, scale or scroll are unitless, and background-position always uses % as measurement unit. As for the text properties you can use px,
+                em, rem, vh and vw. Be sure to check what your browsers support in terms of measurement unit.
        
+
+            
        Opacity
        
+            
        In most cases, the best animation possible is the opacity, 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 filter: alpha(opacity=0). Also, opacity can be used for instance on legacy browsers that don't support RGBA colors. Eg. opacity:0.5 will make an element semitransparent.
        
+
+            
        2D Transform Properties
        
+            
        The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles
+                to degrees, to help improve memory efficiency.
        
+            
          
+                
        • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to
+                    the left by 150px and to bottom by 200px. IE9+
          • 
+                
        • rotate property applies rotation to an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. IE9+
          • 
+                
        • skewX property applies a skew transformation on the X axis. Eg. skewX:25 will skew an element by 25 degrees. IE9+
          • 
+                
        • skewY property applies a skew transformation on the Y axis. Eg. skewY:25 will skew an element by 25 degrees. IE9+
          • 
+                
        • scale property applies a single value size transformation. Eg. scale:2 will enlarge an element by a degree of 2. IE9+
          • 
+                
        • matrix, double axis skew and double axis scale properties are not supported.
          • 
+            
        
+
+            
        3D Transform Properties
        
+            
        The core engine supports all 3D transform properties except matrix3d and rotate3d. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory
+                usage.
        
+            
          
+                
        • translateX property is for horizontal translation. EG. translateX:150 to translate an element 150px to the right. IE10+
          • 
+                
        • translateY property is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top. IE10+
          • 
+                
        • translateZ property is for translation on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px to it's back, making it smaller. Requires a perspective tween
+                    option to be used; the smaller perspective value, the deeper translation. IE10+
          • 
+                
        • translate3d property is for movement on all the axis in a given 3D field. EG. translate3d:[-150,200,150] to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer,
+                    making it larger. Also requires using a perspective tween option. IE10+
          • 
+                
        • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Requires perspective. IE10+
          • 
+                
        • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Requires perspective. IE10+
          • 
+                
        • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. IE10+
          • 
+                
        • matrix3d, rotate3d, and scale3d properties are not supported.
          • 
+            
        
+
+            
        SVG Transform
        
+            
        The SVG Plugin features cross browser 2D transform animations via the svgTransform tween property and the transform presentation attribute, similar in functionality as the Attributes
+                Plugin.
        
+            
          
+                
        • translate sub-property applies horizontal and / or vertical translation. EG. translate:150 to translate a shape 150px to the right or translate:[-150,200] to move the element to the
+                    left by 150px and to bottom by 200px. IE9+
          • 
+                
        • rotate sub-property applies rotation to a shape on the Z axis. Eg. rotate:150 will rotate a shape clockwise by 150 degrees around it's own center or around the transformOrigin: '450 450'                    set tween option coordinate of the parent element. IE9+
          • 
+                
        • skewX sub-property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew a shape by 25 degrees. IE9+
          • 
+                
        • skewY sub-property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew a shape by 25 degrees. IE9+
          • 
+                
        • scale sub-property used to apply a single value size transformation. Eg. scale:0.5 will scale a shape to half of it's initial size. IE9+
          • 
+                
        • matrix sub-property is not supported.
          • 
+            
        
+            
        As a quick note, the translation is normalized and computed in a way to handle the transformOrigin tween option in all cases, not just for rotations, but also scaling or skews.
        
+
+            
        SVG Properties
        
+            
        The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect
+                is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability and the ability to
+                optimize the visual and performance of the morph, all with the help of special tween options and utilities.
        
+
+            
        Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray                and strokeDashoffset.
+
+                
        Box Model Properties
        
+                
        The core engine supports width, height, left and top while the CSS Plugin adds support for all other box-model properties.
        
+                
          
+                    
        • left, top, right and bottom are position based properties for movement on vertical and / or horizontal axis.
+                        These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires position:relative. These properties can be used as fallback for browsers
+                        with no support for translate properties such as IE8.
          • 
+                    
        • width, height, minWidth, minHeight, maxWidth, maxHeight 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 scale on IE8 again, as well as for other purposes.
          • 
+                    
        • padding, margin, paddingTop, paddingBottom, paddingLeft, paddingRight,
+                        marginTop, marginBottom, marginLeft and marginRight are properties that allow you to animate the spacing of an element
+                        inside (via padding) and outside (via margin). Shorthand notations such as margin: "20px 50px" or any other type are not supported.
          • 
+                    
        • borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are borderLeftWidth 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.
          • 
+                    
        • outlineWidth property allows you to animate the outline-width of an element.
          • 
                 
        
-            
-			
      • About
        • 
-		
      
-      
    
+                
    As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the element.offsetWidth as a refference. The idea is
+                    the same as presented on the above supported transform properties.
    
+                
    Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize event
+                    that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.
    
+
+                
    Border Radius
    
+                
    The CSS Plugin covers all the radius properties with the exception that shorthand notations are not implemented.
    
+                
      
+                    
    • borderRadius allows you to animate the border-radius on all corners for a given element.
      • 
+                    
    • borderTopLeftRadius allows you to animate the border-top-left-radius for a given element.
      • 
+                    
    • borderTopRightRadius allows you to animate the border-top-right-radius for a given element.
      • 
+                    
    • borderBottomLeftRadius allows you to animate the border-bottom-left-radiusfor a given element.
      • 
+                    
    • borderBottomRightRadius allows you to animate the border-bottom-right-radiusfor a given element.
      • 
+                
    
+                
    For all radius properties above borderRadius:20 or borderTopLeftRadius:'25%' will do. In the first case px is the default measurement unit used, while in the second we require using %                    unit which is relative to the element's size.
    
+                
    Remember: shorthands for border-radius are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. -moz-border-radius-topleft) as they were deprecated with later
+                    versions.
    
+
+                
    Color Properties
    
+                
    The core engine only supports color and backgroundColor, but the CSS Plugin covers all the others. KUTE.js currently supports values such as HEX, RGB and RGBA                    for all color properties, but IE8 does not support RGBA and always uses RGB when detected, otherwise will produce no effect. There is also a tween option keepHex:true to convert the color format.
+                    Eg. color: '#ff0000' or backgroundColor: 'rgb(202,150,20)' or borderColor: 'rgba(250,100,20,0.5)'. The IE9+ browsers should also work with
+                    web safe colors, eg. color: 'red'. 
    
+                
      
+                    
    • color allows you to animate the color for a given text element.
      • 
+                    
    • backgroundColor allows you to animate the background-color for a given element.
      • 
+                    
    • outlineColor allows you to animate the outline-color for a given element.
      • 
+                    
    • borderColor allows you to animate the border-color on all sides for a given element.
      • 
+                    
    • borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow you to animate the color of the
+                        border on each side of a given element.
      • 
+                
    
+                
    Remember: shorthands for borderColor property are not supported.
    
+
+                
    Presentation Attributes
    
+                
    The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be
+                    also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the
+                    above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.
    
+                
    Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are
+                    removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.
+                    
    
+                        
    The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc).
+                            For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.
    
+                        
    The plugin handles attribute namespaces properly which means you can use both Javascript notation (like stopColor) and HTML markup notation (like 'stop-color'), see the below
+                            example.
    
+                        
    EG: KUTE.to('selector', {attr:{stroke:'blue'}}) to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'red'}}) to animate the stop color of some SVG gradient.
    
+
+                        
    Typography Properties
    
+                        
    The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that
+                            don't support transform at all. Yes, IE8 and other legacy browsers.
    
+                        
      
+                            
    • fontSize allows you to animate the font-size for a given element.
      • 
+                            
    • lineHeight allows you to animate the line-height for a given element.
      • 
+                            
    • letterSpacing allows you to animate the letter-spacing for a given element.
      • 
+                            
    • wordSpacing allows you to animate the word-spacing for a given element.
      • 
+                        
    
+                        
    Remember: these properties are layout modifiers.
    
+
+                        
    Scroll Animation
    
+                        
    KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than offsetHeight). EG: scroll: 150                            will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks, but we'll have a look at that
+                            later.
    
+
+                        
    String Properties
    
+                        
      
+                            
    • number allows you to tween a number either from 0 or from a current value and updates the innerHTML for a given target. Eg. number:1500
      • 
+                            
    • text allows you to write a string one character at a time followed by a scrambling character. Eg. text: 'A demo with <b>substring</b>'. 
      • 
+                        
    
+                        
    See Text Plugin for details.
    
+
+                        
    Other Properties
    
+                        
      
+                            
    • clip allows you to animate the clip property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]. See
+                                spec for details.
      • 
+                            
    • backgroundPosition allows you to animate the background-position for a given element that uses a background image. It only uses % as measurement unit. Eg. backgroundPosition:[50,20]
      • 
+                        
    
+
+                        
    Legend
    
+                        
      
+                            
    • core - the property/properties are supported by core animation engine.
      • 
+                            
    • plugin - the property/properties are supported by plugins.
      • 
+                            
    • unsupported - the property/properties are NOT supported by core and/or plugins.
      • 
+                        
    
+
+                        
    Did We Miss Any Important Property?
    
+                        
    Make sure you go to the issues tracker and report the missing property ASAP, or you can check the extend guide and learn how to develop
+                            a plugin to support a new property yourself.
    
+        
    
+
+        
    
+            
+        
    
+
+        
+        
+
     
    
-	
-	
    
-		
    Supported Properties
    
-		
    KUTE.js covers all animation needs by itself for transform properties, scroll for window or a given element, colors. Note: not all browsers support 2D transforms or 3D transforms. With the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like border-radius, clip, backgroundPosition and more box model properties.
     
-        
    Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular coding, KUTE.js makes it easy to add support for additional properties, so check out the guide on how to extend.
    
-		
    All common measurement units are supported: px and % for translations and box-model properties, or deg and rad for rotations and skews, while clip only supports px. Other properties such as opacity, scale or scroll are unitless, and background-position always uses % as measurement unit. As for the text properties you can use px, em, rem, vh and vw. Be sure to check what your browsers support in terms of measurement unit.
    
-				
-		
    Opacity
    
-		
    In most cases, the best animation possible is the opacity, 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 filter: alpha(opacity=0). Also, opacity can be used for instance on legacy browsers that don't support RGBA colors. Eg. opacity:0.5 will make an element semitransparent.
    
-		
-		
    2D Transform Properties
    
-		
    The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles to degrees, to help improve memory efficiency.
    
-		
      
-			
    • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
      • 
-			
    • rotate property applies rotation to an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. IE9+
      • 
-			
    • skewX property applies a skew transformation on the X axis. Eg. skewX:25 will skew an element by 25 degrees. IE9+
      • 
-			
    • skewY property applies a skew transformation on the Y axis. Eg. skewY:25 will skew an element by 25 degrees. IE9+
      • 
-			
    • scale property applies a single value size transformation. Eg. scale:2 will enlarge an element by a degree of 2. IE9+
      • 
-			
    • matrix, double axis skew and double axis scale properties are not supported.
      • 
-		
    		
-		
-		
    3D Transform Properties
    
-		
    The core engine supports all 3D transform properties except matrix3d and rotate3d. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory usage.
    
-        
      
-			
    • translateX property is for horizontal translation. EG. translateX:150 to translate an element 150px to the right. IE10+
      • 
-			
    • translateY property is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top. IE10+
      • 
-			
    • translateZ property is for translation on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px to it's back, making it smaller. Requires a perspective tween option to be used; the smaller perspective value, the deeper translation. IE10+
      • 
-			
    • translate3d property is for movement on all the axis in a given 3D field. EG. translate3d:[-150,200,150] to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer, making it larger. Also requires using a perspective tween option. IE10+
      • 
-			
    • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Requires perspective. IE10+
      • 
-			
    • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Requires perspective. IE10+
      • 
-			
    • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. IE10+
      • 
-			
    • matrix3d, rotate3d, and scale3d properties are not supported.
      • 
-		
    
-
-		
    SVG Transform
    
-		
    The SVG Plugin features cross browser 2D transform animations via the svgTransform tween property and the transform presentation attribute, similar in functionality as the Attributes Plugin.
    
-        
      
-			
    • translate sub-property applies horizontal and / or vertical translation. EG. translate:150 to translate a shape 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
      • 
-			
    • rotate sub-property applies rotation to a shape on the Z axis. Eg. rotate:150 will rotate a shape clockwise by 150 degrees around it's own center or around the transformOrigin: '450 450' set tween option coordinate of the parent element. IE9+
      • 
-			
    • skewX sub-property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew a shape by 25 degrees. IE9+
      • 
-			
    • skewY sub-property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew a shape by 25 degrees. IE9+
      • 
-			
    • scale sub-property used to apply a single value size transformation. Eg. scale:0.5 will scale a shape to half of it's initial size. IE9+
      • 
-			
    • matrix sub-property is not supported.
      • 
-		
    
-		
    As a quick note, the translation is normalized and computed in a way to handle the transformOrigin tween option in all cases, not just for rotations, but also scaling or skews.
    
-
-		
    SVG Properties
    
-		
    The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability and the ability to optimize the visual and performance of the morph, all with the help of special tween options and utilities.
    
-
-		
    Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset.
-
-		
    Box Model Properties
    
-		
    The core engine supports width, height, left and top while the CSS Plugin adds support for all other box-model properties.
    
-		
      
-			
    • left, top, right and bottom are position based properties for movement on vertical and / or horizontal axis. These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires position:relative. These properties can be used as fallback for browsers with no support for translate properties such as IE8.
      • 
-			
    • width, height, minWidth, minHeight, maxWidth, maxHeight 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 scale on IE8 again, as well as for other purposes.
      • 
-			
    • padding, margin, paddingTop, paddingBottom, paddingLeft, paddingRight, marginTop, marginBottom, marginLeft and marginRight are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as margin: "20px 50px" or any other type are not supported.
      • 
-			
    • borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are borderLeftWidth 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.
      • 
-			
    • outlineWidth property allows you to animate the outline-width of an element.
      • 
-		
    
-		
    As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the element.offsetWidth as a refference. The idea is the same as presented on the above supported transform properties.
    
-		
    Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize event that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.
    
-
-		
    Border Radius
    
-		
    The CSS Plugin covers all the radius properties with the exception that shorthand notations are not implemented.
    
-		
      
-			
    • borderRadius allows you to animate the border-radius on all corners for a given element.
      • 
-			
    • borderTopLeftRadius allows you to animate the border-top-left-radius for a given element.
      • 
-			
    • borderTopRightRadius allows you to animate the border-top-right-radius for a given element.
      • 
-			
    • borderBottomLeftRadius allows you to animate the border-bottom-left-radiusfor a given element.
      • 
-			
    • borderBottomRightRadius allows you to animate the border-bottom-right-radiusfor a given element.
      • 
-		
    			
-		
    For all radius properties above borderRadius:20 or borderTopLeftRadius:'25%' will do. In the first case px is the default measurement unit used, while in the second we require using % unit which is relative to the element's size.
    
-		
    Remember: shorthands for border-radius are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. -moz-border-radius-topleft) as they were deprecated with later versions.
    
-
-		
    Color Properties
    
-		
    The core engine only supports color and backgroundColor, but the CSS Plugin covers all the others. KUTE.js currently supports values such as HEX, RGB and RGBA for all color properties, but IE8 does not support RGBA and always uses RGB when detected, otherwise will produce no effect. There is also a tween option keepHex:true to convert the color format. Eg. color: '#ff0000' or backgroundColor: 'rgb(202,150,20)' or borderColor: 'rgba(250,100,20,0.5)'. The IE9+ browsers should also work with web safe colors, eg. color: 'red'. 
    	
-		
      
-			
    • color allows you to animate the color for a given text element.
      • 
-			
    • backgroundColor allows you to animate the background-color for a given element.
      • 
-			
    • outlineColor allows you to animate the outline-color for a given element.
      • 
-			
    • borderColor allows you to animate the border-color on all sides for a given element.
      • 
-			
    • borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow you to animate the color of the border on each side of a given element.
      • 
-		
    			
-		
    Remember: shorthands for borderColor property are not supported.
    
-        
-		
    Presentation Attributes
    
-		
    The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.
    
-		
    Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.
     
-		
    The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.
    
-		
    The plugin handles attribute namespaces properly which means you can use both Javascript notation (like stopColor) and HTML markup notation (like 'stop-color'), see the below example.
    
-		
    EG: KUTE.to('selector', {attr:{stroke:'blue'}}) to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'red'}}) to animate the stop color of some SVG gradient.
    
-        
-		
    Typography Properties
    
-		
    The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.
    
-		
      
-			
    • fontSize allows you to animate the font-size for a given element.
      • 
-			
    • lineHeight allows you to animate the line-height for a given element.
      • 
-			
    • letterSpacing allows you to animate the letter-spacing for a given element.
      • 
-			
    • wordSpacing allows you to animate the word-spacing for a given element.
      • 
-		
    
-		
    Remember: these properties are layout modifiers.
    
-
-		
    Scroll Animation
    
-		
    KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than offsetHeight). EG: scroll: 150 will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks, but we'll have a look at that later.
    
-
-		
    String Properties
    
-		
      
-			
    • number allows you to tween a number either from 0 or from a current value and updates the innerHTML for a given target. Eg. number:1500
      • 
-			
    • text allows you to write a string one character at a time followed by a scrambling character. Eg. text: 'A demo with <b>substring</b>'. 
      • 
-		
    
-        
    See Text Plugin for details.
    
-
-		
    Other Properties
    
-		
      
-			
    • clip allows you to animate the clip property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]. See spec for details.
      • 
-			
    • backgroundPosition allows you to animate the background-position for a given element that uses a background image. It only uses % as measurement unit. Eg. backgroundPosition:[50,20]
      • 
-		
    
-		
-		
    Legend
    
-		
      
-			
    • core - the property/properties are supported by core animation engine.
      •     
-			
    • plugin - the property/properties are supported by plugins.
      •     
-			
    • unsupported - the property/properties are NOT supported by core and/or plugins.
      •     
-        
    
-        			
-		
    Did We Miss Any Important Property?
    			
-		
    Make sure you go to the issues tracker and report the missing property ASAP, or you can check the extend guide and learn how to develop a plugin to support a new property yourself.
    			
-	
    
-
-	
    
-			
-	
    
-	  
-      
-   
-
- 
- 
+    
 
 
-
-	
+    
 
-
+    
 
- 
- 
+    
+    
+    
+    
 
+
 
diff --git a/start.html b/start.html
index 3c507e0..afa4321 100644
--- a/start.html
+++ b/start.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,88 +14,89 @@
     
     
     
-     
+    
+    
 
     Getting Started with KUTE.js | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-		
-	
-		
+
+    
+    
 
     
-    
-    
-	
-	
-	
+    
+    
+
+    
+
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
+    
    
 
-	
    		
-		
-		
    Getting Started
    
-		
    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 detail. KUTE.js can be found on CDN and also npm and Bower repositories with all it's features and tools.
    
+    
    
 
-		
    Bower and NPM
    
-		
    You can install KUTE.js package by using either Bower or NPM.
    
-
    $ npm install --save kute.js
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+
+            
    Getting Started
    
+            
    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 detail. KUTE.js can be found on CDN                and also npm and Bower repositories with all it's features and tools.
    
+
+            
    Bower and NPM
    
+            
    You can install KUTE.js package by using either Bower or NPM.
    
+            
    $ npm install --save kute.js
 # Or
 $ bower install --save kute.js
 
    
 
-		
    Require and CommonJS
    
-
    // CommonJS style
+            
    Require and CommonJS
    
+            
    // CommonJS style
 var kute = require("kute.js"); //grab the core
 require("kute.js/kute-svg"); // Add SVG Plugin
 require("kute.js/kute-css"); // Add CSS Plugin
@@ -101,7 +104,7 @@ require("kute.js/kute-attr"); // Add Attributes Plugin
 require("kute.js/kute-text"); // Add Text Plugin
 
    
 
-
    // AMD style
+            
    // AMD style
 define([
     "kute.js",
     "kute.js/kute-jquery.js", // optional for jQuery apps
@@ -113,65 +116,72 @@ define([
     // ...
 });
 
    
-        
-		
    Websites
    
-		
    In your website add the following code, the best would be to put it at the end of your body tag:
    
-
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
-        
    An alternate CDN link here:
    
-
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
 
-		
    The CDN repositories receive latest updates here and right here. You might also want to include the tools that you need for your project:
    
-
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+            
    Websites
    
+            
    In your website add the following code, the best would be to put it at the end of your body tag:
    
+            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
+            
    An alternate CDN link here:
    
+            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
+
+            
    The CDN repositories receive latest updates here and right here. You might also want to include the tools that
+                you need for your project:
    
+            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js"></script> <!-- CSS Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js"></script> <!-- SVG Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-text.min.js"></script> <!-- Text Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
-        
    Alternate CDN links:
    
-
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+            
    Alternate CDN links:
    
+            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-css.min.js"></script> <!-- CSS Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-svg.min.js"></script> <!-- SVG Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-text.min.js"></script> <!-- Text Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
-		
    Your awesome animation coding would follow after these script links.
    		
-		
-		
    Targeting Legacy Browsers
    
-		
    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 transform property or RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more information.
     
-		
    Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and here is the full refference on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.
    
+            
    Your awesome animation coding would follow after these script links.
    
+
+            
    Targeting Legacy Browsers
    
+            
    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 transform property or RGBA colors while IE9 can only
+                do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more
+                information.
    
+            
    Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and here is the full refference                on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.
    
 
 
-        
-		
-	
    
-	  
-      
-     
+            
 
- 
    
- 
+        
    
+
+        
+        
+
+    
    
+    
 
 
-
-	
+    
 
-
-	
+    
+    
 
-
+    
 
- 
- 
+    
+    
+    
+    
 
+
 
diff --git a/svg.html b/svg.html
index f6ce659..2ff8d92 100644
--- a/svg.html
+++ b/svg.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,238 +14,258 @@
     
     
     
-     
+    
+    
 
     KUTE.js SVG Plugin | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-		
-	
-	
-    
+
+    
+    
+
     
-    	
-	
-	
+    
+    
+
+    
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
+    
    
 
-	
    
-		
    SVG Plugin
    
-		
    The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, SVG morphing of path shapes and SVG transforms. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.
    
-        
    Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG so make sure to fiter out your SVG tweens.
    
-		
    SVG Morphing
    
-        
    One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z). On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:
    
-        
      
-            
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 15 but the D3.js example uses 4.
      • 
-            
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is not set.
      • 
-            
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape. By default this option is false.
      • 
-            
    • reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape. By default this option is also false.
      • 
-        
    
-        
    Basic Example
    
-		
    In the first morph example we are going to go through some basic steps on how to setup and how to improve the morph animation. Our demo is a morph from a rectangle into a star, so first let's create an SVG element with two paths, first is going to be visible, filled with color, while second is going to be hidden. The first path is the start shape and the second is the end shape, you guessed it, and we can also add some ID to the paths so we can easily target them with our code.
    
-
    <svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+    
    
+
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+            
    SVG Plugin
    
+            
    The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, SVG morphing of path shapes and SVG transforms. We'll dig into this in great detail as well as provide valuable tips on how to
+                configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.
    
+            
    Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG so make sure to fiter out your SVG
+                tweens.
    
+            
    SVG Morphing
    
+            
    One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z).
+                On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default /
+                given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect
+                of the morph:
    
+            
      
+                
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 15 but the
+                    D3.js example uses 4.
      • 
+                
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is
+                    not set.
      • 
+                
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape. By default this option is false.
      • 
+                
    • reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape. By default this option is also false.
      • 
+            
    
+            
    Basic Example
    
+            
    In the first morph example we are going to go through some basic steps on how to setup and how to improve the morph animation. Our demo is a morph from a rectangle into a star, so first let's create an SVG element with two paths, first is
+                going to be visible, filled with color, while second is going to be hidden. The first path is the start shape and the second is the end shape, you guessed it, and we can also add some ID to the paths so we can easily target them with our
+                code.
    
+            
    <svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
     <path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
     <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
 </svg>
 
    
-        
    Now we can apply both .to() and fromTo() methods:
    
-
    // the fromTo() method
+            
    Now we can apply both .to() and fromTo() methods:
    
+            
    // the fromTo() method
 var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
 
 // OR
 
 // the to() method will take the path's d attribute value and use it as start value
-var tween = KUTE.to('#rectangle', { path: '#star' }).start(); 
+var tween = KUTE.to('#rectangle', { path: '#star' }).start();
 
 // OR
 
 // simply pass in a valid path string without the need to have two paths in your SVG
-var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start(); 
-
    		
+var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
+
    
 
-        
    For all the above tween objects the animation should look like this:
    
+            
    For all the above tween objects the animation should look like this:
    
 
-        
    
-          
+            
    
+                
               
               
           
-          
    
-            Start	
-          
    
-        
    
-        
-        
    As you can see, the animation could need some fine tunning. Let's go ahead and play with the new utility, it's gonna make your SVG morph work a breeze.
    
+                
    
+                    Start
+                
    
+            
    
 
-        
    Well, we're going to set the morphIndex: 127 tween option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values around the recommended one. I also made a pen for you to play with.
    			
-        
    
-                
+            
    As you can see, the animation could need some fine tunning. Let's go ahead and play with the new utility, it's gonna make your SVG morph work a breeze.
    
+
+            
    Well, we're going to set the morphIndex: 127 tween option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values around the recommended one. I also
+                made a pen for you to play with.
    
+            
    
+                
                     
                     
-                            
-      
-          
    
-            Start	
-          
    
-        
    
-        
    Much better! You can play with the morphIndex value, maybe you can get a more interesting morph.
    
-        
-        
    Morphing Polygon Paths
    
-        
    When your paths are only lineto, vertical-lineto and horizontal-lineto based shapes (the d attribute consists of L, V and H path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The morphPrecision option will not apply since the paths are already polygons, still you will have access to all the other options.
    
-        
    The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative v and h path commands. I highly recommend using my utility converter to prepare your paths in that case.
    
-
    // let's morph a triangle into a star
+                
+
+                
    
+                    Start
+                
    
+            
    
+            
    Much better! You can play with the morphIndex value, maybe you can get a more interesting morph.
    
+
+            
    Morphing Polygon Paths
    
+            
    When your paths are only lineto, vertical-lineto and horizontal-lineto based shapes (the d attribute consists of L, V and H path commands), the SVG
+                Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The morphPrecision option will not apply since the paths are already polygons,
+                still you will have access to all the other options.
    
+            
    The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative v and h path commands. I highly recommend using my utility converter                to prepare your paths in that case.
    
+            
    // let's morph a triangle into a star
 var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
 
 // or same path into a square
 var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
 
    
 
-        
    In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.
    			
-        
    
+            
    In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of
+                points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.
    
+            
    
+
+                
 
-          
-            
             
-                
+
             
             
-            
+
             
 
             
           
-      
-          
    
-            Start	
-          
    
-        
    
-        
    The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only L path command will make sure to prevent value processing and allow the animation to start as fast as possible.
    
+
+                
    
+                    Start
+                
    
+            
    
+            
    The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only L path command will make sure to prevent value processing and allow the animation to start as
+                fast as possible.
    
 
 
-        
    Multi Path Example
    
-        
    In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:
    			
-
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
-    <path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096	c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z 
-        M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z 
+            
    Multi Path Example
    
+            
    In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:
    
+            
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+    <path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096  c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z
+        M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z
         M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z
         M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
      <path d="M0.175 256l-0.175-156.037 192-26.072v182.109z
         M224 69.241l255.936-37.241v224h-255.936z
         M479.999 288l-0.063 224-255.936-36.008v-187.992z
-        M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>   
+        M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
 </svg>
 
    
-       	
    As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.
    
-
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+            
    As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.
    
+            
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
     <path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
     <path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
     <path id="w13" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
     <path id="w14" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
-    
+
     <path id="w21" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
     <path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
     <path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
-    <path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/> 
+    <path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
 </svg>
 
    
-        
    After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: #w11 to #w24, #w13 to #w21, #w14 to #w22 and #w12 to #w23.
    
-        
    Now we can write the tween objects and get to working:
    
-
    var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
+            
    After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: #w11 to #w24, #w13                to #w21, #w14 to #w22 and #w12 to #w23.
    
+            
    Now we can write the tween objects and get to working:
    
+            
    var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
 var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
 var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
 var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
 
    
 
-        
    As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:
    
-       
-        
    
-                
+            
    As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:
    
+
+            
    
+                
                     
                     
                     
                     
-                    
+
                     
                     
                     
                     
-                            
-      
-          
    
-            Start	
-          
    
-        
           
-        
    Note that this final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the svg.js for a full code review.
    
-        
-        
    Complex Example
    
-        
    The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.
    
-        
    An important aspect of multi path morph is syncronization: since the .to() method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using the .fromTo() method. So, let's get into it:
    
-       
-
    // complex multi morph, the paths should be self explanatory
+                
+
+                
    
+                    Start
+                
    
+            
    
+            
    Note that this final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the svg.js                for a full code review.
    
+
+            
    Complex Example
    
+            
    The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case
+                you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you
+                should be just like in the previous example.
    
+            
    An important aspect of multi path morph is syncronization: since the .to() method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using
+                the .fromTo() method. So, let's get into it:
    
+
+            
    // complex multi morph, the paths should be self explanatory
 var morph1 = KUTE.fromTo('#start-container',  { path: '#start-container' },    { path: '#end-container' });
 var morph2 = KUTE.fromTo('#startpath1',       { path: '#startpath1' },         { path: '#endpath1' });
 var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' },   { path: '#endpath1' });
 var morph4 = KUTE.fromTo('#startpath2',       { path: '#startpath2' },         { path: '#endpath2' });
 
    
-        
    As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next example, we have used a mask where we included the subpaths of both start and end shape, just to get the same visual as the originals.
    
-		
    
-            
+            
    As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next example, we have used a mask                where we included the subpaths of both start and end shape, just to get the same visual as the originals.
    
+            
    
+                
                 
                     
                         
@@ -253,91 +275,109 @@ var morph4 = KUTE.fromTo('#startpath2',       { path: '#startpath2' },         {
                         
                         
                         
-                                 
+                    
                 
                 
                 
             
-	
-			
    
-				Start	
-			
    
-		
    
-        
    So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a lighter script, it might be a better solution for your applications.
    
-        
-        
    Recommendations
    
-        
      
-           
    • The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.
      • 
-           
    • When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.
      • 
-           
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost any value, including the default value.
      • 
-           
    • Polygons with only lineto path commands are best for performance.
      • 
-           
    • Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.
      • 
-           
    • Don't forget about the path morph utility, it's gonna make your work a lot easier.
      • 
-           
    • The SVG morph performance is the same for both .to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.
      • 
-        
    
-        
-		
    Drawing Stroke
    
-		
    Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <path> shapes, <circle>, <ellipse>, <rect>, <line>, <polyline> and <polygon> shapes are also supported; the script uses the SVG standard .getTotalLength() method for <path> shapes, while the others use some helper methods. Here some code examples:
    
-
    // draw the stroke from 0-10% to 90-100%
+
+                
    
+                    Start
+                
    
+            
    
+            
    So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a
+                lighter script, it might be a better solution for your applications.
    
+
+            
    Recommendations
    
+            
      
+                
    • The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.
      • 
+                
    • When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget
+                    about mobile devices.
      • 
+                
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost
+                    any value, including the default value.
      • 
+                
    • Polygons with only lineto path commands are best for performance.
      • 
+                
    • Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.
      • 
+                
    • Don't forget about the path morph utility, it's gonna make your work a lot easier.
      • 
+                
    • The SVG morph performance is the same for both .to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the
+                    processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() based morph will always start later. Of course this assumes the you cache
+                    the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.
      • 
+            
    
+
+            
    Drawing Stroke
    
+            
    Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <path> shapes, <circle>, <ellipse>, <rect>, <line>,
+                <polyline> and <polygon> shapes are also supported; the script uses the SVG standard .getTotalLength() method for <path> shapes, while the others use some helper methods. Here
+                some code examples:
    
+            
    // draw the stroke from 0-10% to 90-100%
 var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
-    
+
 // draw the stroke from zero to full path length
 var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
-    
+
 // draw the stroke from full length to 50%
 var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
 
    
-		
    We're gonna chain these tweens and start the animation real quick.
    		
-		
    
-            
-                            
-                            
-                            
-                            
-                            
-            	
-			
    
-				Start	
-			
    
-		
    
-		
    Remember: the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% as start value for your tweens when stroke-dasharray and stroke-dashoffset are not set.
    
-		
-        
    SVG Transforms
    
-		
    Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve most browser inconsistencies. A very simple roadmap was described here; in brief we needed to find a way to enable SVG transforms in a reliable and cross-browser supported fashion.
     
-        
    With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the transformOrigin just like for CSS3 transforms and secondly the unique way to normalize translation to work with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with the working draft.
    
-        
    While you can still use regular CSS3 transforms for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based transform-origin values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements.
     
-        
    KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the transform presentation attribute and the svgTransform tween property with a special notation:
    
+            
    We're gonna chain these tweens and start the animation real quick.
    
+            
    
+                
+                
+                
+                
+                
+                
+            
+                
    
+                    Start
+                
    
+            
    
+            
    Remember: the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% as start value for your tweens when stroke-dasharray                and stroke-dashoffset are not set.
    
 
-
    // using the svgTransform property works in all SVG enabled browsers
-var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }}); 
+            
    SVG Transforms
    
+            
    Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve most browser inconsistencies. A very simple
+                roadmap was described here; in brief we needed to find a way to enable SVG transforms in a reliable and cross-browser                supported fashion.
    
+            
    With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the transformOrigin just like for CSS3 transforms and secondly the unique way to normalize translation to work
+                with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with the working draft.
    
+            
    While you can still use regular CSS3 transforms for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based transform-origin values and ALL Internet
+                Explorer versions have no implementation for CSS3 transforms on SVG elements.
    
+            
    KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the transform presentation attribute and the svgTransform tween property with
+                a special notation:
    
+
+            
    // using the svgTransform property works in all SVG enabled browsers
+var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }});
 
 // regular CSS3 transforms apply to SVG elements but not all browsers fully/partially supported
 var tween1 = KUTE.to('shape', { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }, { transformOrigin: '50% 50%' });
 
    
 
-        
    As you can see we have some familiar notation, but an important notice here is that svgTransform tween property treat all SVG transform functions as if you are using the 50% 50% of the shape box at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.
    
-        
    Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the transform attribute accepts no measurement units such as degrees or pixels. For these reasons the transformOrigin tween option can also accept array values just in case you need coordinates relative to the parent <svg> element. Also values like top left values will work.
    
-        
    In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as svgTransform based animations (RIGHT). I highly encourage you to test all of them in all browsers, and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.
    
+            
    As you can see we have some familiar notation, but an important notice here is that svgTransform tween property treat all SVG transform functions as if you are using the 50% 50% of the shape box
+                at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.
    
+            
    Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the transform attribute accepts no measurement units such as degrees or pixels. For these reasons the transformOrigin                tween option can also accept array values just in case you need coordinates relative to the parent <svg> element. Also values like top left values will work.
    
+            
    In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as svgTransform based animations (RIGHT). I highly encourage you to test all of them in all browsers,
+                and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.
    
 
-        
    SVG Rotation
    
-        
    Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the svgTransform will only accept single value for the angle value rotate: 45, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a transformOrigin tween option to override the behavior.
    
-        
    The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. Let's have a look at a quick demo:
    
-		
    
-            
-                            
-                            
+            
    SVG Rotation
    
+            
    Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the svgTransform will only accept single value for the angle value rotate: 45,
+                the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a transformOrigin tween option to override the behavior.
    
+            
    The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. Let's have a look at a quick demo:
    
+            
    
+                
+                
+                
             
-	
-			
    
-				Start	
-			
    
-		
    
-        
    The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set transformOrigin option to 50% 50%, but this animation doesn't work in IE browsers, while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the rotate: 360 notation and the animation shows the shape rotating around it's own central point and without any option, an animation that DO WORK in all SVG enabled browsers.
    
-        
    When for CSS3 transforms we could have used values such as center bottom as transform-origin (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes to SVGs the plugin here will compute the transformOrigin tween setting value accordingly to use a shape's .getBBox() value to determine for instance the coordinates for 25% 75% position or center top.
    
 
-        
    In other cases you may want to rotate shapes around the center point of the parent <svg> or <g> element, and we use it's .getBBox() to determine the 50% 50% coordinate, so here's how to deal with it:
    
+                
    
+                    Start
+                
    
+            
    
+            
    The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set transformOrigin option to 50% 50%, but this animation doesn't work in IE browsers,
+                while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the rotate: 360 notation and the animation shows the shape rotating around it's own central point and without any option, an animation
+                that DO WORK in all SVG enabled browsers.
    
+            
    When for CSS3 transforms we could have used values such as center bottom as transform-origin (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes
+                to SVGs the plugin here will compute the transformOrigin tween setting value accordingly to use a shape's .getBBox() value to determine for instance the coordinates for 25% 75% position or center top.
    
 
-
    // rotate around parent svg's "50% 50%" coordinate as transform-origin
+            
    In other cases you may want to rotate shapes around the center point of the parent <svg> or <g> element, and we use it's .getBBox() to determine the 50% 50% coordinate, so here's how to deal
+                with it:
    
+
+            
    // rotate around parent svg's "50% 50%" coordinate as transform-origin
 // get the bounding box of the parent element
 var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent <svg> element
 
@@ -355,154 +395,175 @@ var svgOriginY = svgBB.height * 50 / 100 - translation[1];
 var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformOrigin: [svgOriginX, svgOriginY]} );
 
    
 
-		
    
-            
-                            
-                            
-            
-	
-			
    
-				Start	
-			
    
-		
    
-        
    Note that this is the only SVG transform example in which we have adapted the transform-origin for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check svg.js file.
    
-
-        
    SVG Translation
    
-        
    In this example we'll have a look at translations, so when setting translate: [150,0], the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation. When translate: 150 notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:
    
-		
    
-            
-                            
-                            
-            
-	
-			
    
-				Start	
-			
    
-		
    
-        
    The first tween uses the CSS3 translate: 580 notation for the end value, while the second tween uses the translate: [0,0] as svgTransform value. For the second example the values are unitless and are relative to the viewBox attribute.
    
-        
-        
    SVG Skew
    
-        
    For skews for SVGs we have a very simple notation: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:
    
-		
    
-            
-                            
-                            
-            
-	
-			
    
-				Start	
-			
    
-		
    
-        
    The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the svgTransform tween property. You will notice translation kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via transform attribute works just as for the CSS3 transformations.
    
-        
-        
    SVG Scaling
    
-        
    Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:
    
-		
    
-            
-                            
-                            
+            
    
+                
+                
+                
             
 
-			
    
-				Start	
-			
    
-		
    
-        
    The first tween scales the shape at scale: 1.5 via regular CSS3 transforms, and the second tween scales down the shape at scale: 0.5 value via svgTransform. If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected 50% 50% value. A similar case as with the skews.
    
+                
    
+                    Start
+                
    
+            
    
+            
    Note that this is the only SVG transform example in which we have adapted the transform-origin for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about
+                this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check svg.js file.
    
 
-        
    SVG Mixed Transform Functions
    
-        
    Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation transform-origin to make it look as you would expect it from regular HTML elements. Let's combine 3 functions at the same time and see what happens:
    
-		
    
-             
-                            
-                            
+            
    SVG Translation
    
+            
    In this example we'll have a look at translations, so when setting translate: [150,0], the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation.
+                When translate: 150 notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:
    
+            
    
+                
+                
+                
             
-	
-			
    
-				Start	
-			
    
-		
    
-        
    Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. If you inspect the elements, you will notice the second shape's translation is different from what we've set in the tween object, and this is to keep transform-origin at an expected 50% 50% value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.
    
-        
-        
    Chained SVG transforms
    
-        
    The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom transform-origin, it should look like this:
    
-
    <svg>
+
+                
    
+                    Start
+                
    
+            
    
+            
    The first tween uses the CSS3 translate: 580 notation for the end value, while the second tween uses the translate: [0,0] as svgTransform value. For the second example the values are
+                unitless and are relative to the viewBox attribute.
    
+
+            
    SVG Skew
    
+            
    For skews for SVGs we have a very simple notation: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:
    
+            
    
+                
+                
+                
+            
+
+                
    
+                    Start
+                
    
+            
    
+            
    The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the svgTransform tween property. You will notice translation
+                kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via transform attribute works just as for the CSS3 transformations.
    
+
+            
    SVG Scaling
    
+            
    Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if
+                SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:
    
+            
    
+                
+                
+                
+            
+
+                
    
+                    Start
+                
    
+            
    
+            
    The first tween scales the shape at scale: 1.5 via regular CSS3 transforms, and the second tween scales down the shape at scale: 0.5 value via svgTransform. If you inspect the elements,
+                you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected 50% 50% value. A similar case as with the skews.
    
+
+            
    SVG Mixed Transform Functions
    
+            
    Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation transform-origin to make it look as you would expect it from regular HTML elements. Let's
+                combine 3 functions at the same time and see what happens:
    
+            
    
+                
+                
+                
+            
+
+                
    
+                    Start
+                
    
+            
    
+            
    Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. If you inspect the elements, you will notice the second shape's translation is different from what we've set
+                in the tween object, and this is to keep transform-origin at an expected 50% 50% value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property
+                and SVG transform attribute have an identical animation.
    
+
+            
    Chained SVG transforms
    
+            
    The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom transform-origin, it should look like this:
    
+            
    <svg>
     <circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20"></circle>
 </svg>
 
    
-    
    Well in this case I would recommend using the values of the first translation as transform-origin for your tween built with the .fromTo() method like so:
    
-
    // a possible workaround for animating a SVG element that uses chained transform functions
-KUTE.fromTo(element, 
+            
    Well in this case I would recommend using the values of the first translation as transform-origin for your tween built with the .fromTo() method like so:
    
+            
    // a possible workaround for animating a SVG element that uses chained transform functions
+KUTE.fromTo(element,
     {svgTransform : { translate: 0, rotate: 45, scale: 0.5 }}, // we asume the current translation is zero on both X & Y axis
     {svgTransform : { translate: 450, rotate: 0, scale: 1.5 }}, // we will translate the X to a 450 value and scale to 1.5
     {transformOrigin: [256,256]} // tween options use the transform-origin of the target SVG element
 ).start();
 
    
-        
    Before you hit the Start button, make sure to check the transform attribute value.
    
-		
    
-             
-                Before you hit the Start button, make sure to check the transform attribute value.
    
+            
    
+                
+                            
+                      transform="translate(256,256) rotate(45) scale(0.5) translate(-256,-256)">
             
-	
-			
    
-				Start	
-			
    
-		
    
-        
    This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.
    
 
-        
    Recommendations for SVG Transforms
    
-        
      
-            
    • The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and always uses same order of transform functions: translate, rotate, skewX, skewY and  scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.
      • 
-            
    • Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.
      • 
-            
    • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
      • 
-            
    • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible or some browser specific tricks if that is the case.
      • 
-            
    • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply don't work. You might want to check this tutorial.
      • 
-            
    • Similar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the .to() method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all the properties and I highly recommend checking the example code for skews in the svg.js file.
      • 
-            
    • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
      • 
-            
    • Also the svgTransform tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.
      • 
+                
      
+                    Start
+                
      
+            
    
+            
    This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.
    
+
+            
    Recommendations for SVG Transforms
    
+            
      
+                
    • The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and always uses same order of transform functions: translate, rotate, skewX,
+                    skewY and scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.
      • 
+                
    • Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.
      • 
+                
    • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
      • 
+                
    • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible or some browser specific tricks if that
+                    is the case.
      • 
+                
    • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply
+                    don't work. You might want to check this tutorial.
      • 
+                
    • Similar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the .to() method, you will
+                    have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all the properties and I highly recommend checking the example code for
+                    skews in the svg.js file.
      • 
+                
    • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
      • 
+                
    • Also the svgTransform tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.
      • 
+            
    
+
+
+            
    SVG Plugin Tips
    
+            
      
+                
    • The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.
      • 
+                
    • Since SVG morph scripting works only with path or glyph elements, you might need a convertToPath feature, so check this out.
      • 
+            
    
+
+        
    
+
+        
 
+        
+        
 
-    
    SVG Plugin Tips
    
-    
      
-        
    • The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.
      •    
-        
    • Since SVG morph scripting works only with path or glyph elements, you might need a convertToPath feature, so check this out.
      • 
-    
    
-	
     
    
-
-    
-
-      
-     
-
- 
    
- 
+    
 
 
-
-	
+    
 
-
-
+    
+    
 
-
- 
- 
- 
- 
- 
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
-
\ No newline at end of file
+
+
diff --git a/text.html b/text.html
index d4b60eb..fb98d55 100644
--- a/text.html
+++ b/text.html
@@ -3,7 +3,9 @@
 
 
 
-  
+
+
+
 
 
     
@@ -12,164 +14,181 @@
     
     
     
-     
+    
+    
 
     KUTE.js Text Plugin | Javascript Animation Engine
-	
+
     
     
-	
+
     
     
 
-	
+    
     
-		
-	
-	
+
+    
+    
 
     
-    
-	
-	
-	
-    
+    
+    
+
+    
+    
 
 
 
-  
    
-  
-  
    
- 
-	
    
-      
    
-		
    KUTE.js
    
-		
-      
    
-    
    
+    
    
 
-	
    
-		
    Text Plugin
    
-		
    The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by character with a very cool effect.
    
+    
    
 
-
    // basic synthax for number increments
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+            
    Text Plugin
    
+            
    The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by character with a very cool effect.
    
+
+            
    // basic synthax for number increments
 var myNumberTween = KUTE.to('selector', {number: 1500}); // this assumes it will start from current number or from 0
 
 // OR text writing character by character
 var myTextTween = KUTE.to('selector', {text: 'A text string with other <span>substring</span> should do.'});
 
    
 
-        
    The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is advised. With other words, try to limit the number of simultaneus text animations.
    
-        
-		
    Number Incrementing/Decreasing
    
-		
    In the first example, let's animate a number, approximatelly as written above:
         
-		
    
-            
    Total number of lines: 0
    
-	
-			
    
-				Start	
-			
    
-		
    
-		
    The button action will toggle the valuesEnd value for the number property, because tweening a number to itself would produce no effect.
         
-                
-		
    Writing Text
    
-		
    This feature come with a additional tween option called textChars for the scrambling text character:
     
-        
      
-            
    • alpha use lowercase alphabetical characters, the default value
      • 
-            
    • upper use UPPERCASE alphabetical characters
      • 
-            
    • numeric use numerical characters
      • 
-            
    • symbols use symbols such as #, $, %, etc.
      • 
-            
    • all use all alpha numeric and symbols.
      • 
-            
    • YOUR CUSTOM STRING use your own custom characters; eg: 'KUTE.JS IS #AWESOME'.
      • 
-        
    
-		
    
-            
    Click the Start button on the right.
    
-	
-			
    
-				Start	
-			
    
-		
    
-        
    Keep in mind that the yoyo feature will NOT un-write / delete character by character the string, but will write the previous text instead.
    
-		
-        
    Combining Both
    
-		
    
-            
    
-			    
    
-                    
    0
    
-	            
    
-			    
    
-                    
    Clicks so far?
    
-	            
    
-			
    
-			
    
-				Start
-		    
    
-		
    
-        
    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!
    
-        
-        
-	
    
+            
    The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is advised. With other words, try to limit the
+                number of simultaneus text animations.
    
 
-      
-     
+            
    Number Incrementing/Decreasing
    
+            
    In the first example, let's animate a number, approximatelly as written above:
    
+            
    
+                
    Total number of lines: 0
    
 
- 
    
- 
+                
    
+                    Start
+                
    
+            
    
+            
    The button action will toggle the valuesEnd value for the number property, because tweening a number to itself would produce no effect.
    
+
+            
    Writing Text
    
+            
    This feature come with a additional tween option called textChars for the scrambling text character:
    
+            
      
+                
    • alpha use lowercase alphabetical characters, the default value
      • 
+                
    • upper use UPPERCASE alphabetical characters
      • 
+                
    • numeric use numerical characters
      • 
+                
    • symbols use symbols such as #, $, %, etc.
      • 
+                
    • all use all alpha numeric and symbols.
      • 
+                
    • YOUR CUSTOM STRING use your own custom characters; eg: 'KUTE.JS IS #AWESOME'.
      • 
+            
    
+            
    
+                
    Click the Start button on the right.
    
+
+                
    
+                    Start
+                
    
+            
    
+            
    Keep in mind that the yoyo feature will NOT un-write / delete character by character the string, but will write the previous text instead.
    
+
+            
    Combining Both
    
+            
    
+                
    
+                    
    
+                        
    0
    
+                    
    
+                    
    
+                        
    Clicks so far?
    
+                    
    
+                
    
+                
    
+                    Start
+                
    
+            
    
+            
    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!
    
+
+            
+        
    
+
+        
+        
+
+    
    
+    
 
 
-
-	
+    
 
-
-
+    
+    
 
-
- 
- 
- 
- 
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
-
\ No newline at end of file
+
+

From 024fdd232276edb439ef11577df6d99a988515a2 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 23 Jan 2017 18:54:59 +0200
Subject: [PATCH 125/187] Changes:

* Disabled SVG Plugin related scripts on IE8
* Some documentation fine tuning
---
 assets/js/svg.js | 481 ++++++++++++++++++++++++-----------------------
 features.html    | 100 +++++-----
 index.html       |  28 +--
 options.html     |  45 +++--
 properties.html  | 263 ++++++++++++++------------
 start.html       |  17 +-
 svg.html         | 254 ++++++++++++++-----------
 text.html        |  12 +-
 8 files changed, 638 insertions(+), 562 deletions(-)

diff --git a/assets/js/svg.js b/assets/js/svg.js
index f9addc5..e943a5a 100644
--- a/assets/js/svg.js
+++ b/assets/js/svg.js
@@ -1,247 +1,254 @@
-// basic morph
-var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
-    duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
-}); 
+(function(){
 
-var morphBtn = document.getElementById('morphBtn');
-morphBtn.addEventListener('click', function(){
-    !morphTween.playing && morphTween.start();
-}, false);
+    // invalidate for unsupported browsers
+    var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
+    if (isIE&&isIE<9) {return;} // return if SVG API is not supported
 
-var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
-    morphIndex: 127,
-    duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
-}); 
+    // basic morph
+    var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
+        duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
+    }); 
 
-var morphBtn1 = document.getElementById('morphBtn1');
-morphBtn1.addEventListener('click', function(){
-    !morphTween1.playing && morphTween1.start();
-}, false);
+    var morphBtn = document.getElementById('morphBtn');
+    morphBtn.addEventListener('click', function(){
+        !morphTween.playing && morphTween.start();
+    }, false);
 
-// polygon morph
-var morphTween21 = KUTE.fromTo('#triangle', {attr: { fill: '#673AB7'}, path: '#triangle' }, { attr: { fill: '#2196F3' }, path: '#square' }, {
-    duration: 1500, easing: 'easingCubicOut',
-}); 
-var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', attr:{ fill: '#2196F3'} }, { path: '#star2', attr:{ fill: 'deeppink' } }, {
-    morphIndex: 9,
-    delay: 500, duration: 1500, easing: 'easingCubicOut'
-}); 
-var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', attr:{ fill: 'deeppink'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, {
-    delay: 500, duration: 1500, easing: 'easingCubicOut'
-});
+    var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
+        morphIndex: 127,
+        duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
+    }); 
 
-morphTween21.chain(morphTween22);
-morphTween22.chain(morphTween23);
-morphTween23.chain(morphTween21);
+    var morphBtn1 = document.getElementById('morphBtn1');
+    morphBtn1.addEventListener('click', function(){
+        !morphTween1.playing && morphTween1.start();
+    }, false);
 
-var morphBtn2 = document.getElementById('morphBtn2');
-morphBtn2.addEventListener('click', function(){
-    if ( !morphTween21.playing && !morphTween22.playing && !morphTween23.playing ) {  
-      morphTween21.start(); morphTween21._dl = 500;
-      morphBtn2.innerHTML = 'Stop';
-      morphBtn2.className = 'btn btn-pink';
-    } else {
-      morphTween21.playing && morphTween21.stop(); morphTween21._dl = 0;
-      morphTween22.playing && morphTween22.stop();
-      morphTween23.playing && morphTween23.stop();
-      morphBtn2.innerHTML = 'Start'; 
-      morphBtn2.className = 'btn btn-green';
-    }
-}, false);
+    // polygon morph
+    var morphTween21 = KUTE.fromTo('#triangle', {attr: { fill: '#673AB7'}, path: '#triangle' }, { attr: { fill: '#2196F3' }, path: '#square' }, {
+        duration: 1500, easing: 'easingCubicOut',
+    }); 
+    var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', attr:{ fill: '#2196F3'} }, { path: '#star2', attr:{ fill: 'deeppink' } }, {
+        morphIndex: 9,
+        delay: 500, duration: 1500, easing: 'easingCubicOut'
+    }); 
+    var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', attr:{ fill: 'deeppink'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, {
+        delay: 500, duration: 1500, easing: 'easingCubicOut'
+    });
 
+    morphTween21.chain(morphTween22);
+    morphTween22.chain(morphTween23);
+    morphTween23.chain(morphTween21);
 
-// simple multi morph
-var multiMorphBtn = document.getElementById('multiMorphBtn');
-var multiMorph1 = KUTE.to('#w11', { path: '#w24', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
-var multiMorph2 = KUTE.to('#w13', { path: '#w21', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
-var multiMorph3 = KUTE.to('#w14', { path: '#w22', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
-var multiMorph4 = KUTE.to('#w12', { path: '#w23', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
-
-multiMorphBtn.addEventListener('click', function(){
-    !multiMorph1.playing && multiMorph1.start();
-    !multiMorph2.playing && multiMorph2.start();
-    !multiMorph3.playing && multiMorph3.start();
-    !multiMorph4.playing && multiMorph4.start();
-}, false);
-
-
-// complex multi morph
-var compliMorphBtn = document.getElementById('compliMorphBtn');
-var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', attr:{ fill: "#2196F3"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
-var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'},  { path: '#eye-left' }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
-var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'},  { path: '#mouth' }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
-var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'},  { path: '#eye-right' }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
-
-compliMorphBtn.addEventListener('click', function(){
-    !compliMorph1.playing && compliMorph1.start();
-    !compliMorph2.playing && compliMorph2.start();
-    !compliMorph3.playing && compliMorph3.start();
-    !compliMorph4.playing && compliMorph4.start();
-}, false);
-
-
-// draw example
-var drawBtn = document.getElementById('drawBtn');
-var drawExample = document.getElementById('draw-example');
-var drawEls = drawExample.querySelectorAll('*');
-
-var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn", offset: 250}); 
-var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut", offset: 250}); 
-var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn", offset: 250}); 
-var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut", offset: 250});
-var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut", offset: 250});
-
-draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);
-
-drawBtn.addEventListener('click', function(){
-       !draw1.tweens[0].playing && !draw1.tweens[1].playing && !draw1.tweens[2].playing && !draw1.tweens[3].playing && !draw1.tweens[4].playing
-    && !draw2.tweens[0].playing && !draw2.tweens[1].playing && !draw2.tweens[2].playing && !draw2.tweens[3].playing && !draw2.tweens[4].playing
-    && !draw3.tweens[0].playing && !draw3.tweens[1].playing && !draw3.tweens[2].playing && !draw3.tweens[3].playing && !draw3.tweens[4].playing
-    && !draw4.tweens[0].playing && !draw4.tweens[1].playing && !draw4.tweens[2].playing && !draw4.tweens[3].playing && !draw4.tweens[4].playing
-    && !draw5.tweens[0].playing && !draw5.tweens[1].playing && !draw5.tweens[2].playing && !draw5.tweens[3].playing && !draw5.tweens[4].playing
-    
-    && draw1.start();
-}, false);
-
-
-// svgTransform examples
-
-// rotation around shape center point
-var svgRotate = document.getElementById('svgRotate');
-var rotateBtn = document.getElementById('rotateBtn');
-var svgr1 = svgRotate.getElementsByTagName('path')[0];
-var svgr2 = svgRotate.getElementsByTagName('path')[1];
-
-var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, { transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-
-rotateBtn.addEventListener('click', function(){
-    !svgTween11.playing && svgTween11.start();
-    !svgTween12.playing && svgTween12.start();
-}, false);
-
-// rotation around shape's parent center point
-var svgRotate1 = document.getElementById('svgRotate1');
-var rotateBtn1 = document.getElementById('rotateBtn1');
-var svgr11 = svgRotate1.getElementsByTagName('path')[0];
-var svgr21 = svgRotate1.getElementsByTagName('path')[1];
-var bb = svgr21.getBBox(); 
-var translation = [580, 0];
-var svgBB = svgr21.ownerSVGElement.getBBox();
-var svgOriginX = (svgBB.width * 50 / 100) - translation[0];
-var svgOriginY = (svgBB.height * 50 / 100)- translation[1];
-
-var svgTween111 = KUTE.to(svgr11, { rotate: 360 }, { transformOrigin: (svgBB.width * 50 / 100) + 'px 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-
-rotateBtn1.addEventListener('click', function(){
-    !svgTween111.playing && svgTween111.start();
-    !svgTween121.playing && svgTween121.start();
-}, false);
-
-// translate
-var svgTranslate = document.getElementById('svgTranslate');
-var translateBtn = document.getElementById('translateBtn');
-var svgt1 = svgTranslate.getElementsByTagName('path')[0];
-var svgt2 = svgTranslate.getElementsByTagName('path')[1];
-var svgTween21 = KUTE.to(svgt1, { translate: 580 }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-var svgTween22 = KUTE.to(svgt2, {svgTransform: { translate: [0,0] } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-
-translateBtn.addEventListener('click', function(){
-    !svgTween21.playing && svgTween21.start();
-    !svgTween22.playing && svgTween22.start();
-}, false);
-
-// skews in chain
-var svgSkew = document.getElementById('svgSkew');
-var skewBtn = document.getElementById('skewBtn');
-var svgsk1 = svgSkew.getElementsByTagName('path')[0];
-var svgsk2 = svgSkew.getElementsByTagName('path')[1];
-var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
-var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, {transformOrigin: '50% 50% 0px', duration: 2500, easing: "easingCubicInOut"});
-var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
-
-var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
-var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"});
-var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
-
-svgTween31.chain(svgTween311);
-svgTween311.chain(svgTween313);
-
-svgTween32.chain(svgTween322);
-svgTween322.chain(svgTween323);
-
-skewBtn.addEventListener('click', function(){
-    !svgTween31.playing && !svgTween311.playing && !svgTween313.playing && svgTween31.start();
-    !svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start();
-}, false);
-
-// scale
-var svgScale = document.getElementById('svgScale');
-var scaleBtn = document.getElementById('scaleBtn');
-var svgs1 = svgScale.getElementsByTagName('path')[0];
-var svgs2 = svgScale.getElementsByTagName('path')[1];
-var svgTween41 = KUTE.to(svgs1, { scale: 1.5 }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-var svgTween42 = KUTE.to(svgs2, {svgTransform: { 
-    translate: 580,
-    scale: 0.5, 
-} }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-
-scaleBtn.addEventListener('click', function(){
-    !svgTween41.playing && svgTween41.start();
-    !svgTween42.playing && svgTween42.start();
-}, false);
-
-// mixed transforms
-var svgMixed = document.getElementById('svgMixed');
-var mixedBtn = document.getElementById('mixedBtn');
-var svgm1 = svgMixed.getElementsByTagName('path')[0];
-var svgm2 = svgMixed.getElementsByTagName('path')[1];
-var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge
-        translate: 250,
-        scale: 1.5,
-        rotate: 320,
-        skewX: -15
-}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-
-var svgTween52 = KUTE.to(svgm2, {
-    svgTransform: {
-        translate: 830,
-        scale: 1.5,
-        rotate: 320,
-        skewX: -15
-}
-}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
-
-mixedBtn.addEventListener('click', function(){
-    !svgTween51.playing && svgTween51.start();
-    !svgTween52.playing && svgTween52.start();
-}, false);
-
-// chained transforms
-var svgChained = document.getElementById('svgChained');
-var chainedBtn = document.getElementById('chainedBtn');
-var svgc = svgChained.getElementsByTagName('path')[0];
-
-var svgTween6 = KUTE.fromTo(svgc, 
-    { // from
-        svgTransform: {
-            translate: 0,
-            scale: 0.5,
-            rotate: 45,
-            // skewX: 0
-        },
-    },
-    { // to
-        svgTransform: {
-            translate: 450,
-            scale: 1.5,
-            rotate: 360,
-            // skewX: -45
+    var morphBtn2 = document.getElementById('morphBtn2');
+    morphBtn2.addEventListener('click', function(){
+        if ( !morphTween21.playing && !morphTween22.playing && !morphTween23.playing ) {  
+        morphTween21.start(); morphTween21._dl = 500;
+        morphBtn2.innerHTML = 'Stop';
+        morphBtn2.className = 'btn btn-pink';
+        } else {
+        morphTween21.playing && morphTween21.stop(); morphTween21._dl = 0;
+        morphTween22.playing && morphTween22.stop();
+        morphTween23.playing && morphTween23.stop();
+        morphBtn2.innerHTML = 'Start'; 
+        morphBtn2.className = 'btn btn-green';
         }
-    },
-{transformOrigin: [256,256], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+    }, false);
 
-chainedBtn.addEventListener('click', function(){
-    !svgTween6.playing && svgTween6.start();
-}, false);
\ No newline at end of file
+
+    // simple multi morph
+    var multiMorphBtn = document.getElementById('multiMorphBtn');
+    var multiMorph1 = KUTE.to('#w11', { path: '#w24', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
+    var multiMorph2 = KUTE.to('#w13', { path: '#w21', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
+    var multiMorph3 = KUTE.to('#w14', { path: '#w22', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
+    var multiMorph4 = KUTE.to('#w12', { path: '#w23', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
+
+    multiMorphBtn.addEventListener('click', function(){
+        !multiMorph1.playing && multiMorph1.start();
+        !multiMorph2.playing && multiMorph2.start();
+        !multiMorph3.playing && multiMorph3.start();
+        !multiMorph4.playing && multiMorph4.start();
+    }, false);
+
+
+    // complex multi morph
+    var compliMorphBtn = document.getElementById('compliMorphBtn');
+    var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', attr:{ fill: "#2196F3"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
+    var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'},  { path: '#eye-left' }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
+    var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'},  { path: '#mouth' }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
+    var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'},  { path: '#eye-right' }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
+
+    compliMorphBtn.addEventListener('click', function(){
+        !compliMorph1.playing && compliMorph1.start();
+        !compliMorph2.playing && compliMorph2.start();
+        !compliMorph3.playing && compliMorph3.start();
+        !compliMorph4.playing && compliMorph4.start();
+    }, false);
+
+
+    // draw example
+    var drawBtn = document.getElementById('drawBtn');
+    var drawExample = document.getElementById('draw-example');
+    var drawEls = drawExample.querySelectorAll('*');
+
+    var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn", offset: 250}); 
+    var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut", offset: 250}); 
+    var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn", offset: 250}); 
+    var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut", offset: 250});
+    var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut", offset: 250});
+
+    draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);
+
+    drawBtn.addEventListener('click', function(){
+        !draw1.tweens[0].playing && !draw1.tweens[1].playing && !draw1.tweens[2].playing && !draw1.tweens[3].playing && !draw1.tweens[4].playing
+        && !draw2.tweens[0].playing && !draw2.tweens[1].playing && !draw2.tweens[2].playing && !draw2.tweens[3].playing && !draw2.tweens[4].playing
+        && !draw3.tweens[0].playing && !draw3.tweens[1].playing && !draw3.tweens[2].playing && !draw3.tweens[3].playing && !draw3.tweens[4].playing
+        && !draw4.tweens[0].playing && !draw4.tweens[1].playing && !draw4.tweens[2].playing && !draw4.tweens[3].playing && !draw4.tweens[4].playing
+        && !draw5.tweens[0].playing && !draw5.tweens[1].playing && !draw5.tweens[2].playing && !draw5.tweens[3].playing && !draw5.tweens[4].playing
+        
+        && draw1.start();
+    }, false);
+
+
+    // svgTransform examples
+
+    // rotation around shape center point
+    var svgRotate = document.getElementById('svgRotate');
+    var rotateBtn = document.getElementById('rotateBtn');
+    var svgr1 = svgRotate.getElementsByTagName('path')[0];
+    var svgr2 = svgRotate.getElementsByTagName('path')[1];
+
+    var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, { transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+    var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+    rotateBtn.addEventListener('click', function(){
+        !svgTween11.playing && svgTween11.start();
+        !svgTween12.playing && svgTween12.start();
+    }, false);
+
+    // rotation around shape's parent center point
+    var svgRotate1 = document.getElementById('svgRotate1');
+    var rotateBtn1 = document.getElementById('rotateBtn1');
+    var svgr11 = svgRotate1.getElementsByTagName('path')[0];
+    var svgr21 = svgRotate1.getElementsByTagName('path')[1];
+    var bb = svgr21.getBBox(); 
+    var translation = [580, 0];
+    var svgBB = svgr21.ownerSVGElement.getBBox();
+    var svgOriginX = (svgBB.width * 50 / 100) - translation[0];
+    var svgOriginY = (svgBB.height * 50 / 100)- translation[1];
+
+    var svgTween111 = KUTE.to(svgr11, { rotate: 360 }, { transformOrigin: (svgBB.width * 50 / 100) + 'px 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+    var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+    rotateBtn1.addEventListener('click', function(){
+        !svgTween111.playing && svgTween111.start();
+        !svgTween121.playing && svgTween121.start();
+    }, false);
+
+    // translate
+    var svgTranslate = document.getElementById('svgTranslate');
+    var translateBtn = document.getElementById('translateBtn');
+    var svgt1 = svgTranslate.getElementsByTagName('path')[0];
+    var svgt2 = svgTranslate.getElementsByTagName('path')[1];
+    var svgTween21 = KUTE.to(svgt1, { translate: 580 }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+    var svgTween22 = KUTE.to(svgt2, {svgTransform: { translate: [0,0] } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+    translateBtn.addEventListener('click', function(){
+        !svgTween21.playing && svgTween21.start();
+        !svgTween22.playing && svgTween22.start();
+    }, false);
+
+    // skews in chain
+    var svgSkew = document.getElementById('svgSkew');
+    var skewBtn = document.getElementById('skewBtn');
+    var svgsk1 = svgSkew.getElementsByTagName('path')[0];
+    var svgsk2 = svgSkew.getElementsByTagName('path')[1];
+    var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
+    var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, {transformOrigin: '50% 50% 0px', duration: 2500, easing: "easingCubicInOut"});
+    var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
+
+    var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
+    var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"});
+    var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
+
+    svgTween31.chain(svgTween311);
+    svgTween311.chain(svgTween313);
+
+    svgTween32.chain(svgTween322);
+    svgTween322.chain(svgTween323);
+
+    skewBtn.addEventListener('click', function(){
+        !svgTween31.playing && !svgTween311.playing && !svgTween313.playing && svgTween31.start();
+        !svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start();
+    }, false);
+
+    // scale
+    var svgScale = document.getElementById('svgScale');
+    var scaleBtn = document.getElementById('scaleBtn');
+    var svgs1 = svgScale.getElementsByTagName('path')[0];
+    var svgs2 = svgScale.getElementsByTagName('path')[1];
+    var svgTween41 = KUTE.to(svgs1, { scale: 1.5 }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+    var svgTween42 = KUTE.to(svgs2, {svgTransform: { 
+        translate: 580,
+        scale: 0.5, 
+    } }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+    scaleBtn.addEventListener('click', function(){
+        !svgTween41.playing && svgTween41.start();
+        !svgTween42.playing && svgTween42.start();
+    }, false);
+
+    // mixed transforms
+    var svgMixed = document.getElementById('svgMixed');
+    var mixedBtn = document.getElementById('mixedBtn');
+    var svgm1 = svgMixed.getElementsByTagName('path')[0];
+    var svgm2 = svgMixed.getElementsByTagName('path')[1];
+    var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge
+            translate: 250,
+            scale: 1.5,
+            rotate: 320,
+            skewX: -15
+    }, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+    var svgTween52 = KUTE.to(svgm2, {
+        svgTransform: {
+            translate: 830,
+            scale: 1.5,
+            rotate: 320,
+            skewX: -15
+    }
+    }, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+    mixedBtn.addEventListener('click', function(){
+        !svgTween51.playing && svgTween51.start();
+        !svgTween52.playing && svgTween52.start();
+    }, false);
+
+    // chained transforms
+    var svgChained = document.getElementById('svgChained');
+    var chainedBtn = document.getElementById('chainedBtn');
+    var svgc = svgChained.getElementsByTagName('path')[0];
+
+    var svgTween6 = KUTE.fromTo(svgc, 
+        { // from
+            svgTransform: {
+                translate: 0,
+                scale: 0.5,
+                rotate: 45,
+                // skewX: 0
+            },
+        },
+        { // to
+            svgTransform: {
+                translate: 450,
+                scale: 1.5,
+                rotate: 360,
+                // skewX: -45
+            }
+        },
+    {transformOrigin: [256,256], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+
+    chainedBtn.addEventListener('click', function(){
+        !svgTween6.playing && svgTween6.start();
+    }, false);
+}())
\ No newline at end of file
diff --git a/features.html b/features.html
index a856f55..3d71af8 100644
--- a/features.html
+++ b/features.html
@@ -81,90 +81,102 @@
         
    
             
    Features Overview
    
             
    Badass Performance
    
-            
    KUTE.js was developed with best practices in mind for fastest code execution and memory efficiency, but performance varies from case to case, as well as for all the other Javascript based animation engines.
-                As a quick note on how it works, 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.
    
+            
    KUTE.js was developed with best practices in mind for fastest code execution and memory efficiency, but performance varies from case to case, as well as for all the 
+                other Javascript based animation engines. As a quick note on how it works, 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.
    
 
-            
    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 video), code simplicity
-                (lots of CSS for a custom animation) and more other.
    
+            
    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 
+                video), code simplicity (lots of CSS for a custom animation) 
+                and more other.
    
             
    To learn more about how performance can vary from case to case, check out this section, it's very informative.
    
         
    
 
         
    
             
    Extensible Prototype
    
-            
    KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing functions, HTML presentation attributes
-                or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy. 
    
-            
    For instance if you want to be able to animate the filter property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function to read current value and the last one
-                for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other tools you can use for your own plugin's processing.
    
+            
    KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing 
+                functions, HTML presentation attributes or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy. 
    
+            
    For instance if you want to be able to animate the filter property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function 
+                to read current value and the last one for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other 
+                tools you can use for your own plugin's processing.
    
             
    You may want to head over to the extend page for an indepth guide on how to write your own plugin/extension.
    
         
    
 
         
    
             
    Auto Browser Prefix
    
-            
    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: transform, perspective, perspective-origin, border-radius and the requestAnimationFrame Javascript method.
    
-            
    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; less string concatenation = more performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.
    
+            
    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: transform, perspective, perspective-origin, border-radius and the requestAnimationFrame 
+                Javascript method.
    
+            
    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; less string concatenation = more performance. This asumes you are NOT styling the above CSS3 properties 
+                using your stylesheets to avoid glitches with legacy browsers.
    
             
    This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.
    
         
    
 
         
    
             
    Browser Compatibility
    
-            
    KUTE.js covers all modern browsers but also provides fallback options for legacy browsers. The prefix free feature mentioned above is one way to enable smooth Javascript based animations on older versions
-                Gecko/Webkit/IE browsers for transform and border-radius. Generally, KUTE.js is built around most used properties, so I highly recommend checking the can I use                website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support 2D transforms or 3D transforms                so make sure you know what browsers support and how to target them before you get to work with a complete browser supported animation setup.
    
-            
    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 polyfills                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 transition.
    
-            
    Speaking of polyfills, KUTE.js no longer requires window.requestAnimationFrame() for the main thread, but it does require the window.performance.now() for checking the current time, .indexOf() for array/string
-                checks, window.getComputedStyle() for the .to() method and .addEventListener() for scroll animation. 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 polyfill service some browser detection will not work because they fill the
-                gap and your code won't work as expected. For instance this would check for IE8 browser var isIE = document.all && !document.addEventListener; but the polyfill covers .addEventListener() so you will never succeed.
-                This very demo is a great solution for targeting Microsoft's legacy browsers.
    
+            
    KUTE.js covers all modern browsers but also provides fallback options for legacy browsers. The prefix free feature mentioned above is one way to enable smooth Javascript 
+                based animations on older versions Gecko/Webkit/IE browsers for transform and border-radius. Generally, KUTE.js is built around most used properties, so I highly recommend checking 
+                the can I use website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support 
+                2D transforms or 3D transforms so make sure you know what browsers support and 
+                how to target them before you get to work with a complete browser supported animation setup.
    
+            
    I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 (compatibility mode OFF) and it really works with the help of 
+            polyfills 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 transition.
    
+            
    Speaking of polyfills, KUTE.js no longer requires window.requestAnimationFrame() for the main thread, but it does require the window.performance.now() for checking the current time, 
+                .indexOf() for array/string checks, window.getComputedStyle() for the .to() method and .addEventListener() for scroll animation. 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 
+                polyfill service some browser detection will not work because they fill the gap and your code won't work as expected. For instance this would 
+                check for IE8 browser var isIE = document.all && !document.addEventListener; but the polyfill covers .addEventListener() so you will never succeed. This very demo is a great solution 
+                for targeting Microsoft's legacy browsers.
    
             
    As of Safari, we did some tests there too, KUTE.js does it really well.
    
         
    
 
         
    
             
    Methods, Tools and Options
    
             
    Building Tween Objects
    
-            
    KUTE.js allows you to create tween objects with the help of .to() and .fromTo() methods for a single element, with distinctive functionalities, and the other .allTo() and .allFromTo() that
-                use the first two for collections of elements.
    
+            
    KUTE.js allows you to create tween objects with the help of .to() and .fromTo() methods for a single element, with distinctive functionalities, and the other .allTo() and 
+                .allFromTo() that use the first two for collections of elements.
    
 
-            
    KUTE.to('selector', toValues, options) method is super simple and straightforward and requires a polyfill for window.getComputedStyle() 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 transform properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at start() method API.
    
+            
    KUTE.to('selector', toValues, options) method is super simple and straightforward and requires a polyfill for window.getComputedStyle() 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 transform properties as they come in chained tweens. However fixing the 
+                sync issues is not that hard, see the example at start() method API.
    
 
-            
    KUTE.fromTo('selector', fromValues, toValues, options) 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.
    
+            
    KUTE.fromTo('selector', fromValues, toValues, options) 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.
    
 
-            
    It doesn't stack transform 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.
    
+            
    It doesn't stack transform 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.
    
 
-            
    KUTE.allTo('selector', toValues, options) and KUTE.allFromTo('selector', fromValues, toValues, options) inherit all functionality from the .to() and .fromTo() method respectively, but they apply
-                to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the API documentation on all the methods.
    
+            
    KUTE.allTo('selector', toValues, options) and KUTE.allFromTo('selector', fromValues, toValues, options) inherit all functionality from the .to() and .fromTo() 
+                method respectively, but they apply to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the 
+                API documentation on all the methods.
    
 
             
    Tween Control
    
-            
    Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: .start(), .stop(), .pause() and .resume().
-                These public methods work either when animation is not running, running or is paused. You need to see the documentation to learn how these work.
    
+            
    Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: .start(), .stop(), .pause() 
+                and .resume(). These public methods work either when animation is not running, running or is paused. You need to see the documentation to learn how these work.
    
 
             
    Tween Options
    
-            
    Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or a perspective-origin,
-                right? Well, make sure to check that out.
    
+            
    Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or 
+                a perspective-origin, right? Well, make sure to check that out.
    
 
             
    Callback System
    
-            
    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.
    
+            
    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.
    
 
             
    Addons
    
-            
    KUTE.js sports some fine tuned addons: jQuery Plugin, SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic bezier easing functions and also
-                physics based easing functions. It also features an extensive guide on how to extend, but I'm open for more features in the future.
    
+            
    KUTE.js sports some fine tuned addons: jQuery Plugin, SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic 
+                bezier easing functions and also physics based easing functions. It also features an extensive guide on how to extend, but I'm open for more features in the future.
    
 
             
    Check the documentation on these methods and the examples page for more.
    
         
    
 
         
    
             
    Developer Friendly
    
-            
    You can develop with KUTE.js for free thanks to the MIT License terms. The terms in short allow you to use the script
-                for free in both personal and commercial application as long as you give proper credits to the original author. Also a link back would be appreciated.
    
+            
    You can develop with KUTE.js for free thanks to the MIT License terms. The terms in short 
+                allow you to use the script for free in both personal and commercial application as long as you give proper credits to the original author. 
+                Also a link back would be appreciated.
    
             
    Also KUTE.js is super documented, all features and options are showcased with detailed examples so you can get your hands really dirty.
    
 
             
 
             
    Transform Options
    
-            
    These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options
-                are here to help, especially with full browser support and preffix free handling.
    
+            
    These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or 
+                perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.
    
             
      
                 
    • perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
      • 
-                
    • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML element. This option has no default value and only accepts valid CSS values according to it's specs.
      • 
+                
    • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML element. This option has no default value and only accepts valid CSS values according to 
+                    it's specs.
      • 
                 
    • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation. No default value.
      • 
-                
    • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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 and has no default value.
      • 
-                
    • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with
-                    the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's
-                    default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a svgTransform property, it can also accept array values: transformOrigin: [250,250].
-                    There is no default value but the SVG Plugin will always use 50% 50% for your transform tweens.
      • 
+                
    • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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 and has no default value.
      • 
+                
    • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to 
+                    SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always 
+                    think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a 
+                    svgTransform property, it can also accept array values: transformOrigin: [250,250]. There is no default value but the SVG Plugin will always use 
+                    50% 50% for your transform tweens.
      • 
             
    
 
             
    SVG Plugin Options
    
@@ -127,7 +131,8 @@
             
 
             
    Text Plugin Options
    
-            
    The only option for the plugin is the textChars option for the text property and allows you to set the characters set for the scrambling character during the animation. See Text Plugin                page for more instructions and demo.
    
+            
    The only option for the plugin is the textChars option for the text property and allows you to set the characters set for the scrambling character during the animation. 
+                See Text Plugin page for more instructions and demo.
    
 
             
    Callback Options
    
             
    These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.
    
@@ -150,8 +155,8 @@ var callback = function(){
 KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
 
    
             
    Other Options
    
-            
    keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers
-                may ignore this option for performance reasons.
    
+            
    keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on 
+                legacy browsers, however modern browsers may ignore this option for performance reasons.
    
 
             
    Override Default Options' Values
    
             
    Most options have a default value as you can see above, they are globally defined in the KUTE.defaultOptions object like so:
    
diff --git a/properties.html b/properties.html
index 3993401..d6ff81c 100644
--- a/properties.html
+++ b/properties.html
@@ -82,25 +82,30 @@
 
         
    
             
    Supported Properties
    
-            
    KUTE.js covers all animation needs by itself for transform properties, scroll for window or a given element, colors. Note: not all browsers support 2D transforms                or 3D transforms. With the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like border-radius,
-                clip, backgroundPosition and more box model properties.
    
-            
    Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular coding, KUTE.js makes it easy to add support for additional
-                properties, so check out the guide on how to extend.
    
-            
    All common measurement units are supported: px and % for translations and box-model properties, or deg and rad for rotations and skews, while clip only supports px.
-                Other properties such as opacity, scale or scroll are unitless, and background-position always uses % as measurement unit. As for the text properties you can use px,
-                em, rem, vh and vw. Be sure to check what your browsers support in terms of measurement unit.
    
+            
    KUTE.js covers all animation needs by itself for transform properties, scroll for window or a given element, colors. Note: not all browsers support 
+                2D transforms or 3D transforms. With 
+                the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like border-radius, clip, 
+                backgroundPosition and more box model properties.
    
+            
    Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular 
+                coding, KUTE.js makes it easy to add support for additional properties, so check out the guide on how to extend.
    
+            
    All common measurement units are supported: px and % for translations and box-model properties, or deg and rad for rotations and 
+                skews, while clip only supports px. Other properties such as opacity, scale or scroll are unitless, and 
+                background-position always uses % as measurement unit. As for the text properties you can use px, em, rem, 
+                vh and vw. Be sure to check what your browsers support in terms of measurement unit.
    
 
             
    Opacity
    
-            
    In most cases, the best animation possible is the opacity, 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 filter: alpha(opacity=0). Also, opacity can be used for instance on legacy browsers that don't support RGBA colors. Eg. opacity:0.5 will make an element semitransparent.
    
+            
    In most cases, the best animation possible is the opacity, 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 filter: alpha(opacity=0). Also, opacity can be used for instance on legacy browsers that don't support 
+                RGBA colors. Eg. opacity:0.5 will make an element semitransparent.
    
 
             
    2D Transform Properties
    
-            
    The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles
-                to degrees, to help improve memory efficiency.
    
+            
    The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage 
+                based translation to pixels and radians based angles to degrees, to help improve memory efficiency.
    
             
      
-                
    • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to
-                    the left by 150px and to bottom by 200px. IE9+
      • 
-                
    • rotate property applies rotation to an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. IE9+
      • 
+                
    • translate property can be used for horizontal and / or vertical movement. EG. translate:150 to translate an element 150px to the right or 
+                    translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
      • 
+                
    • rotate property applies rotation to an element on the Z axis or the plain document. Eg. rotate:250 will rotate an element clockwise by 250 degrees. 
+                    IE9+
      • 
                 
    • skewX property applies a skew transformation on the X axis. Eg. skewX:25 will skew an element by 25 degrees. IE9+
      • 
                 
    • skewY property applies a skew transformation on the Y axis. Eg. skewY:25 will skew an element by 25 degrees. IE9+
      • 
                 
    • scale property applies a single value size transformation. Eg. scale:2 will enlarge an element by a degree of 2. IE9+
      • 
@@ -108,28 +113,32 @@
             
    
 
             
    3D Transform Properties
    
-            
    The core engine supports all 3D transform properties except matrix3d and rotate3d. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory
-                usage.
    
+            
    The core engine supports all 3D transform properties except matrix3d and rotate3d. Just as the above, these properties' values are also converted to traditional pixels 
+                and degrees measurements to help improve memory usage.
    
             
      
                 
    • translateX property is for horizontal translation. EG. translateX:150 to translate an element 150px to the right. IE10+
      • 
                 
    • translateY property is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top. IE10+
      • 
-                
    • translateZ property is for translation on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px to it's back, making it smaller. Requires a perspective tween
-                    option to be used; the smaller perspective value, the deeper translation. IE10+
      • 
-                
    • translate3d property is for movement on all the axis in a given 3D field. EG. translate3d:[-150,200,150] to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer,
-                    making it larger. Also requires using a perspective tween option. IE10+
      • 
-                
    • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Requires perspective. IE10+
      • 
-                
    • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Requires perspective. IE10+
      • 
-                
    • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. IE10+
      • 
+                
    • translateZ property is for translation on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px to it's back, making it smaller. 
+                    Requires a perspective tween option to be used; the smaller perspective value, the deeper translation. IE10+
      • 
+                
    • translate3d property is for movement on all the axis in a given 3D field. EG. translate3d:[-150,200,150] to translate an element 150px to the left, 200px 
+                    to the bottom and 150px closer to the viewer, making it larger. Also requires using a perspective tween option. IE10+
      • 
+                
    • rotateX property rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Requires perspective. 
+                    IE10+
      • 
+                
    • rotateY property rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. 
+                    Requires perspective. IE10+
      • 
+                
    • rotateZ property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 
+                    150 degrees. IE10+
      • 
                 
    • matrix3d, rotate3d, and scale3d properties are not supported.
      • 
             
    
 
             
    SVG Transform
    
-            
    The SVG Plugin features cross browser 2D transform animations via the svgTransform tween property and the transform presentation attribute, similar in functionality as the Attributes
-                Plugin.
    
+            
    The SVG Plugin features cross browser 2D transform animations via the svgTransform tween property and the transform presentation attribute, 
+                similar in functionality as the Attributes Plugin.
    
             
      
-                
    • translate sub-property applies horizontal and / or vertical translation. EG. translate:150 to translate a shape 150px to the right or translate:[-150,200] to move the element to the
-                    left by 150px and to bottom by 200px. IE9+
      • 
-                
    • rotate sub-property applies rotation to a shape on the Z axis. Eg. rotate:150 will rotate a shape clockwise by 150 degrees around it's own center or around the transformOrigin: '450 450'                    set tween option coordinate of the parent element. IE9+
      • 
+                
    • translate sub-property applies horizontal and / or vertical translation. EG. translate:150 to translate a shape 150px to the right or 
+                    translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
      • 
+                
    • rotate sub-property applies rotation to a shape on the Z axis. Eg. rotate:150 will rotate a shape clockwise by 150 degrees around it's own center or around 
+                    the transformOrigin: '450 450' set tween option coordinate of the parent element. IE9+
      • 
                 
    • skewX sub-property used to apply a skew transformation on the X axis. Eg. skewX:25 will skew a shape by 25 degrees. IE9+
      • 
                 
    • skewY sub-property used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew a shape by 25 degrees. IE9+
      • 
                 
    • scale sub-property used to apply a single value size transformation. Eg. scale:0.5 will scale a shape to half of it's initial size. IE9+
      • 
@@ -138,113 +147,119 @@
             
      As a quick note, the translation is normalized and computed in a way to handle the transformOrigin tween option in all cases, not just for rotations, but also scaling or skews.
      
 
             
      SVG Properties
      
-            
      The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect
-                is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability and the ability to
-                optimize the visual and performance of the morph, all with the help of special tween options and utilities.
      
+            
      The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called 
+                path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to 
+                the D3.js examples for wider usability and the ability to optimize the visual and performance of the morph, all with the help of special 
+                tween options and utilities.
      
 
-            
      Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray                and strokeDashoffset.
+            
      Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the 
+                well known CSS properties: strokeDasharray and strokeDashoffset.
      
 
-                
      Box Model Properties
      
-                
      The core engine supports width, height, left and top while the CSS Plugin adds support for all other box-model properties.
      
-                
        
-                    
      • left, top, right and bottom are position based properties for movement on vertical and / or horizontal axis.
-                        These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires position:relative. These properties can be used as fallback for browsers
-                        with no support for translate properties such as IE8.
        • 
-                    
      • width, height, minWidth, minHeight, maxWidth, maxHeight 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 scale on IE8 again, as well as for other purposes.
        • 
-                    
      • padding, margin, paddingTop, paddingBottom, paddingLeft, paddingRight,
-                        marginTop, marginBottom, marginLeft and marginRight are properties that allow you to animate the spacing of an element
-                        inside (via padding) and outside (via margin). Shorthand notations such as margin: "20px 50px" or any other type are not supported.
        • 
-                    
      • borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are borderLeftWidth 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.
        • 
-                    
      • outlineWidth property allows you to animate the outline-width of an element.
        • 
-                
      
-                
      As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the element.offsetWidth as a refference. The idea is
-                    the same as presented on the above supported transform properties.
      
-                
      Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize event
-                    that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.
      
+            
      Box Model Properties
      
+            
      The core engine supports width, height, left and top while the CSS Plugin adds support for all other box-model properties.
      
+            
        
+                
      • left, top, right and bottom are position based properties for movement on 
+                    vertical and / or horizontal axis. These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires 
+                    position:relative. These properties can be used as fallback for browsers with no support for translate properties such as IE8.
        • 
+                
      • width, height, minWidth, minHeight, maxWidth, 
+                    maxHeight 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 
+                    scale on IE8 again, as well as for other purposes.
        • 
+                
      • padding, margin, paddingTop, paddingBottom, paddingLeft, 
+                    paddingRight, marginTop, marginBottom, marginLeft and 
+                    marginRight are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as 
+                    margin: "20px 50px" or any other type are not supported.
        • 
+                
      • borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are 
+                    borderLeftWidth 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.
        • 
+                
      • outlineWidth property allows you to animate the outline-width of an element.
        • 
+            
      
+            
      As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the element.offsetWidth 
+                as a refference. The idea is the same as presented on the above supported transform properties.
      
+            
      Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. 
+                They also trigger resize event that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.
      
 
-                
      Border Radius
      
-                
      The CSS Plugin covers all the radius properties with the exception that shorthand notations are not implemented.
      
-                
        
-                    
      • borderRadius allows you to animate the border-radius on all corners for a given element.
        • 
-                    
      • borderTopLeftRadius allows you to animate the border-top-left-radius for a given element.
        • 
-                    
      • borderTopRightRadius allows you to animate the border-top-right-radius for a given element.
        • 
-                    
      • borderBottomLeftRadius allows you to animate the border-bottom-left-radiusfor a given element.
        • 
-                    
      • borderBottomRightRadius allows you to animate the border-bottom-right-radiusfor a given element.
        • 
-                
      
-                
      For all radius properties above borderRadius:20 or borderTopLeftRadius:'25%' will do. In the first case px is the default measurement unit used, while in the second we require using %                    unit which is relative to the element's size.
      
-                
      Remember: shorthands for border-radius are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. -moz-border-radius-topleft) as they were deprecated with later
-                    versions.
      
+            
      Border Radius
      
+            
      The CSS Plugin covers all the radius properties with the exception that shorthand notations are not implemented.
      
+            
        
+                
      • borderRadius allows you to animate the border-radius on all corners for a given element.
        • 
+                
      • borderTopLeftRadius allows you to animate the border-top-left-radius for a given element.
        • 
+                
      • borderTopRightRadius allows you to animate the border-top-right-radius for a given element.
        • 
+                
      • borderBottomLeftRadius allows you to animate the border-bottom-left-radiusfor a given element.
        • 
+                
      • borderBottomRightRadius allows you to animate the border-bottom-right-radiusfor a given element.
        • 
+            
      
+            
      For all radius properties above borderRadius:20 or borderTopLeftRadius:'25%' will do. In the first case px is the default measurement unit used, while in the second we 
+                require using % unit which is relative to the element's size.
      
+            
      Remember: shorthands for border-radius are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. -moz-border-radius-topleft) 
+                as they were deprecated with later versions.
      
 
-                
      Color Properties
      
-                
      The core engine only supports color and backgroundColor, but the CSS Plugin covers all the others. KUTE.js currently supports values such as HEX, RGB and RGBA                    for all color properties, but IE8 does not support RGBA and always uses RGB when detected, otherwise will produce no effect. There is also a tween option keepHex:true to convert the color format.
-                    Eg. color: '#ff0000' or backgroundColor: 'rgb(202,150,20)' or borderColor: 'rgba(250,100,20,0.5)'. The IE9+ browsers should also work with
-                    web safe colors, eg. color: 'red'. 
      
-                
        
-                    
      • color allows you to animate the color for a given text element.
        • 
-                    
      • backgroundColor allows you to animate the background-color for a given element.
        • 
-                    
      • outlineColor allows you to animate the outline-color for a given element.
        • 
-                    
      • borderColor allows you to animate the border-color on all sides for a given element.
        • 
-                    
      • borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow you to animate the color of the
-                        border on each side of a given element.
        • 
-                
      
-                
      Remember: shorthands for borderColor property are not supported.
      
+            
      Color Properties
      
+            
      The core engine only supports color and backgroundColor, but the CSS Plugin covers all the others. KUTE.js currently supports values such as HEX, 
+                RGB and RGBA for all color properties, but IE8 does not support RGBA and always uses RGB when detected, otherwise will produce no effect. There is also a 
+                tween option keepHex:true to convert the color format. Eg. color: '#ff0000' or backgroundColor: 'rgb(202,150,20)' or borderColor: 'rgba(250,100,20,0.5)'. 
+                The IE9+ browsers should also work with web safe colors, eg. color: 'red'. 
      
+            
        
+                
      • color allows you to animate the color for a given text element.
        • 
+                
      • backgroundColor allows you to animate the background-color for a given element.
        • 
+                
      • outlineColor allows you to animate the outline-color for a given element.
        • 
+                
      • borderColor allows you to animate the border-color on all sides for a given element.
        • 
+                
      • borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow 
+                    you to animate the color of the border on each side of a given element.
        • 
+            
      
+            
      Remember: shorthands for borderColor property are not supported.
      
 
-                
      Presentation Attributes
      
-                
      The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be
-                    also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the
-                    above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.
      
-                
      Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are
-                    removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.
-                    
      
-                        
      The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc).
-                            For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.
      
-                        
      The plugin handles attribute namespaces properly which means you can use both Javascript notation (like stopColor) and HTML markup notation (like 'stop-color'), see the below
-                            example.
      
-                        
      EG: KUTE.to('selector', {attr:{stroke:'blue'}}) to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'red'}}) to animate the stop color of some SVG gradient.
      
+            
      Presentation Attributes
      
+            
      The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity,
+                 but the values can be also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. 
+                 This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.
      
+            
      Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or 
+                stop-color, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.
      
 
-                        
      Typography Properties
      
-                        
      The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that
-                            don't support transform at all. Yes, IE8 and other legacy browsers.
      
-                        
        
-                            
      • fontSize allows you to animate the font-size for a given element.
        • 
-                            
      • lineHeight allows you to animate the line-height for a given element.
        • 
-                            
      • letterSpacing allows you to animate the letter-spacing for a given element.
        • 
-                            
      • wordSpacing allows you to animate the word-spacing for a given element.
        • 
-                        
      
-                        
      Remember: these properties are layout modifiers.
      
+            
      The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a 
+                suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.
      
+            
      The plugin handles attribute namespaces properly which means you can use both Javascript notation (like stopColor) and HTML markup notation (like 'stop-color'),
+                 see the below example.
      
+            
      EG: KUTE.to('selector', {attr:{stroke:'blue'}}) to animate the stroke of an SVG element or KUTE.to('selector', {attr:{'stop-color':'red'}}) to animate the stop color of some SVG gradient.
      
 
-                        
      Scroll Animation
      
-                        
      KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than offsetHeight). EG: scroll: 150                            will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks, but we'll have a look at that
-                            later.
      
+            
      Typography Properties
      
+            
      The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale 
+                on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.
      
+            
        
+                
      • fontSize allows you to animate the font-size for a given element.
        • 
+                
      • lineHeight allows you to animate the line-height for a given element.
        • 
+                
      • letterSpacing allows you to animate the letter-spacing for a given element.
        • 
+                
      • wordSpacing allows you to animate the word-spacing for a given element.
        • 
+            
      
+            
      Remember: these properties are layout modifiers.
      
 
-                        
      String Properties
      
-                        
        
-                            
      • number allows you to tween a number either from 0 or from a current value and updates the innerHTML for a given target. Eg. number:1500
        • 
-                            
      • text allows you to write a string one character at a time followed by a scrambling character. Eg. text: 'A demo with <b>substring</b>'. 
        • 
-                        
      
-                        
      See Text Plugin for details.
      
+            
      Scroll Animation
      
+            
      KUTE.js core engine currently supports only vertical scroll for both the window and a given element that's scrollable (when scrollHeight is higher than 
+                offsetHeight). EG: scroll: 150 will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent 
+                animation bubbles as well as scroll bottlenecks, but we'll have a look at that later.
      
 
-                        
      Other Properties
      
-                        
        
-                            
      • clip allows you to animate the clip property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]. See
-                                spec for details.
        • 
-                            
      • backgroundPosition allows you to animate the background-position for a given element that uses a background image. It only uses % as measurement unit. Eg. backgroundPosition:[50,20]
        • 
-                        
      
+            
      String Properties
      
+            
        
+                
      • number allows you to tween a number either from 0 or from a current value and updates the innerHTML for a given target. Eg. number:1500
        • 
+                
      • text allows you to write a string one character at a time followed by a scrambling character. Eg. text: 'A demo with <b>substring</b>'. 
        • 
+            
      
+            
      See Text Plugin for details.
      
 
-                        
      Legend
      
-                        
        
-                            
      • core - the property/properties are supported by core animation engine.
        • 
-                            
      • plugin - the property/properties are supported by plugins.
        • 
-                            
      • unsupported - the property/properties are NOT supported by core and/or plugins.
        • 
-                        
      
+            
      Other Properties
      
+            
        
+                
      • clip allows you to animate the clip property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]. See
+                    spec for details.
        • 
+                
      • backgroundPosition allows you to animate the background-position for a given element that uses a background image. It only uses % as measurement unit. 
+                    Eg. backgroundPosition:[50,20]
        • 
+            
      
 
-                        
      Did We Miss Any Important Property?
      
-                        
      Make sure you go to the issues tracker and report the missing property ASAP, or you can check the extend guide and learn how to develop
-                            a plugin to support a new property yourself.
      
+            
      Legend
      
+            
        
+                
      • core - the property/properties are supported by core animation engine.
        • 
+                
      • plugin - the property/properties are supported by plugins.
        • 
+                
      • unsupported - the property/properties are NOT supported by core and/or plugins.
        • 
+            
      
+
+            
      Did We Miss Any Important Property?
      
+            
      Make sure you go to the issues tracker and report the missing property ASAP, or you can check the extend 
+                guide and learn how to develop a plugin to support a new property yourself.
      
         
    
 
         
    
diff --git a/start.html b/start.html
index afa4321..d2cb6ee 100644
--- a/start.html
+++ b/start.html
@@ -86,7 +86,8 @@
         
    
 
             
    Getting Started
    
-            
    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 detail. KUTE.js can be found on CDN                and also npm and Bower repositories with all it's features and tools.
    
+            
    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 detail. KUTE.js can be found on 
+                CDN and also npm and Bower repositories with all it's features and tools.
    
 
             
    Bower and NPM
    
             
    You can install KUTE.js package by using either Bower or NPM.
    
@@ -123,8 +124,8 @@ define([
             
    An alternate CDN link here:
    
             
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
 
-            
    The CDN repositories receive latest updates here and right here. You might also want to include the tools that
-                you need for your project:
    
+            
    The CDN repositories receive latest updates here and right here. 
+                You might also want to include the tools that you need for your project:
    
             
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js"></script> <!-- CSS Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js"></script> <!-- SVG Plugin -->
@@ -141,10 +142,12 @@ define([
             
    Your awesome animation coding would follow after these script links.
    
 
             
    Targeting Legacy Browsers
    
-            
    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 transform property or RGBA colors while IE9 can only
-                do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more
-                information.
    
-            
    Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and here is the full refference                on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.
    
+            
    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 transform property or 
+                RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 
+                3D transforms browser support list for more information.
    
+            
    Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and 
+                here is the full refference on that. For other legacy browsers there is a ton of ways 
+                to target them, quite efficiently I would say: there you go.
    
 
 
             
    
-            
    Note that this final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the svg.js                for a full code review.
    
+            
    Note that this final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to 
+                check the svg.js for a full code review.
    
 
             
    Complex Example
    
-            
    The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case
-                you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you
-                should be just like in the previous example.
    
-            
    An important aspect of multi path morph is syncronization: since the .to() method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using
-                the .fromTo() method. So, let's get into it:
    
+            
    The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant 
+                differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure 
+                the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.
    
+            
    An important aspect of multi path morph is syncronization: since the .to() method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, 
+                the problem can be easily solved as always using the .fromTo() method. So, let's get into it:
    
 
             
    // complex multi morph, the paths should be self explanatory
 var morph1 = KUTE.fromTo('#start-container',  { path: '#start-container' },    { path: '#end-container' });
@@ -263,7 +270,8 @@ var morph2 = KUTE.fromTo('#startpath1',       { path: '#startpath1' },         {
 var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' },   { path: '#endpath1' });
 var morph4 = KUTE.fromTo('#startpath2',       { path: '#startpath2' },         { path: '#endpath2' });
 
    
-            
    As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next example, we have used a mask                where we included the subpaths of both start and end shape, just to get the same visual as the originals.
    
+            
    As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next 
+                example, we have used a mask where we included the subpaths of both start and end shape, just to get the same visual as the originals.
    
             
    
                 
                 
@@ -285,28 +293,30 @@ var morph4 = KUTE.fromTo('#startpath2',       { path: '#startpath2' },         {
                     Start
                 
    
             
    
-            
    So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a
-                lighter script, it might be a better solution for your applications.
    
+            
    So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates 
+                for tween, it's super light, it's a lighter script, it might be a better solution for your applications.
    
 
             
    Recommendations
    
             
      
                 
    • The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.
      • 
-                
    • When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget
-                    about mobile devices.
      • 
-                
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost
-                    any value, including the default value.
      • 
+                
    • When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the 
+                    overal animation performance, don't forget about mobile devices.
      • 
+                
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays 
+                    you can get quite comfortable with almost any value, including the default value.
      • 
                 
    • Polygons with only lineto path commands are best for performance.
      • 
                 
    • Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.
      • 
                 
    • Don't forget about the path morph utility, it's gonna make your work a lot easier.
      • 
-                
    • The SVG morph performance is the same for both .to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the
-                    processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() based morph will always start later. Of course this assumes the you cache
-                    the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.
      • 
+                
    • The SVG morph performance is the same for both .to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared 
+                    already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() 
+                    based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will 
+                    be delayed.
      • 
             
    
 
             
    Drawing Stroke
    
-            
    Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <path> shapes, <circle>, <ellipse>, <rect>, <line>,
-                <polyline> and <polygon> shapes are also supported; the script uses the SVG standard .getTotalLength() method for <path> shapes, while the others use some helper methods. Here
-                some code examples:
    
+            
    Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <path> shapes, <circle>, <ellipse>, <rect>,
+                 <line>, <polyline> and <polygon> shapes are also supported; the script uses the SVG standard .getTotalLength() method for <path> 
+                 shapes, while the others use some helper methods. Here some code examples:
    
+
             
    // draw the stroke from 0-10% to 90-100%
 var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
 
@@ -316,6 +326,7 @@ var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
 // draw the stroke from full length to 50%
 var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
 
    
+
             
    We're gonna chain these tweens and start the animation real quick.
    
             
    
                 
@@ -329,17 +340,20 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
                     Start
                 
    
             
-            
    Remember: the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% as start value for your tweens when stroke-dasharray                and stroke-dashoffset are not set.
    
+            
    Remember: the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% as start value for your 
+                tweens when stroke-dasharray and stroke-dashoffset are not set.
    
 
             
    SVG Transforms
    
-            
    Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve most browser inconsistencies. A very simple
-                roadmap was described here; in brief we needed to find a way to enable SVG transforms in a reliable and cross-browser                supported fashion.
    
-            
    With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the transformOrigin just like for CSS3 transforms and secondly the unique way to normalize translation to work
-                with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with the working draft.
    
-            
    While you can still use regular CSS3 transforms for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based transform-origin values and ALL Internet
-                Explorer versions have no implementation for CSS3 transforms on SVG elements.
    
-            
    KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the transform presentation attribute and the svgTransform tween property with
-                a special notation:
    
+            
    Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve 
+                most browser inconsistencies. A very simple roadmap was described here; in brief we needed to find a way to enable SVG transforms 
+                in a reliable and cross-browser supported fashion.
    
+            
    With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the transformOrigin just like for CSS3 transforms and secondly the unique 
+                way to normalize translation to work with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with 
+                the working draft.
    
+            
    While you can still use regular CSS3 transforms for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based 
+                transform-origin values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements.
    
+            
    KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the transform presentation attribute and the 
+                svgTransform tween property with a special notation:
    
 
             
    // using the svgTransform property works in all SVG enabled browsers
 var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }});
@@ -348,36 +362,42 @@ var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45,
 var tween1 = KUTE.to('shape', { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }, { transformOrigin: '50% 50%' });
 
    
 
-            
    As you can see we have some familiar notation, but an important notice here is that svgTransform tween property treat all SVG transform functions as if you are using the 50% 50% of the shape box
-                at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.
    
-            
    Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the transform attribute accepts no measurement units such as degrees or pixels. For these reasons the transformOrigin                tween option can also accept array values just in case you need coordinates relative to the parent <svg> element. Also values like top left values will work.
    
-            
    In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as svgTransform based animations (RIGHT). I highly encourage you to test all of them in all browsers,
-                and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.
    
+            
    As you can see we have some familiar notation, but an important notice here is that svgTransform tween property treat all SVG transform functions as if you are using the 
+                50% 50% of the shape box at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.
    
+            
    Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the transform attribute accepts no measurement units such as degrees 
+                or pixels. For these reasons the transformOrigin tween option can also accept array values just in case you need coordinates relative to the parent <svg> element. Also values 
+                like top left values will work.
    
+            
    In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as svgTransform based animations (RIGHT). I highly encourage you 
+                to test all of them in all browsers, and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.
    
 
             
    SVG Rotation
    
-            
    Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the svgTransform will only accept single value for the angle value rotate: 45,
-                the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a transformOrigin tween option to override the behavior.
    
-            
    The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. Let's have a look at a quick demo:
    
+            
    Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the svgTransform will only accept single value 
+                for the angle value rotate: 45, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a transformOrigin 
+                tween option to override the behavior.
    
+            
    The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. 
+                Let's have a look at a quick demo:
    
+
             
    
                 
-                
-                
-            
+                    
+                    
+                
 
                 
    
                     Start
                 
    
             
    
-            
    The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set transformOrigin option to 50% 50%, but this animation doesn't work in IE browsers,
-                while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the rotate: 360 notation and the animation shows the shape rotating around it's own central point and without any option, an animation
-                that DO WORK in all SVG enabled browsers.
    
-            
    When for CSS3 transforms we could have used values such as center bottom as transform-origin (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes
-                to SVGs the plugin here will compute the transformOrigin tween setting value accordingly to use a shape's .getBBox() value to determine for instance the coordinates for 25% 75% position or center top.
    
+            
    The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set transformOrigin option to 50% 50%, but this 
+                animation doesn't work in IE browsers, while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the rotate: 360 notation and the animation shows the shape rotating 
+                around it's own central point and without any option, an animation that DO WORK in all SVG enabled browsers.
    
+            
    When for CSS3 transforms we could have used values such as center bottom as transform-origin (also not supported in all modern browsers for SVGs), the entire processing was basically in/by 
+                the browser, however when it comes to SVGs the plugin here will compute the transformOrigin tween setting value accordingly to use a shape's .getBBox() value to determine for instance 
+                the coordinates for 25% 75% position or center top.
    
 
-            
    In other cases you may want to rotate shapes around the center point of the parent <svg> or <g> element, and we use it's .getBBox() to determine the 50% 50% coordinate, so here's how to deal
-                with it:
    
+            
    In other cases you may want to rotate shapes around the center point of the parent <svg> or <g> element, and we use it's .getBBox() to determine the 50% 50% 
+                coordinate, so here's how to deal with it:
    
 
-            
    // rotate around parent svg's "50% 50%" coordinate as transform-origin
+
    // rotate around parent svg's "50% 50%" coordinate as transform-origin
 // get the bounding box of the parent element
 var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent <svg> element
 
@@ -397,32 +417,34 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
 
             
    
                 
-                
-                
-            
+                    
+                    
+                
 
                 
    
                     Start
                 
    
             
    
-            
    Note that this is the only SVG transform example in which we have adapted the transform-origin for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about
-                this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check svg.js file.
    
+            
    Note that this is the only SVG transform example in which we have adapted the transform-origin for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are 
+                interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check svg.js file.
    
 
             
    SVG Translation
    
-            
    In this example we'll have a look at translations, so when setting translate: [150,0], the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation.
-                When translate: 150 notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:
    
+            
    In this example we'll have a look at translations, so when setting translate: [150,0], the first value is X (horizontal) coordinate to which the shape will translate to and the second value is 
+                Y (vertical) coordinate for translation. When translate: 150 notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements 
+                transformation. Let's have a look at a quick demo:
    
+            
             
    
                 
-                
-                
-            
+                    
+                    
+                
 
                 
    
                     Start
                 
    
             
    
-            
    The first tween uses the CSS3 translate: 580 notation for the end value, while the second tween uses the translate: [0,0] as svgTransform value. For the second example the values are
-                unitless and are relative to the viewBox attribute.
    
+            
    The first tween uses the CSS3 translate: 580 notation for the end value, while the second tween uses the translate: [0,0] as svgTransform value. 
+                For the second example the values are unitless and are relative to the viewBox attribute.
    
 
             
    SVG Skew
    
             
    For skews for SVGs we have a very simple notation: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:
    
@@ -436,28 +458,30 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
                     Start
                 
             
-            
    The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the svgTransform tween property. You will notice translation
-                kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via transform attribute works just as for the CSS3 transformations.
    
+            
    The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the svgTransform tween 
+                property. You will notice translation kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via transform attribute works just 
+                as for the CSS3 transformations.
    
 
             
    SVG Scaling
    
-            
    Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if
-                SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:
    
+            
    Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, 
+                to keep it simple and even if SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to 
+                make the animation look as we would expect. A quick demo:
    
             
    
                 
-                
-                
-            
+                    
+                    
+                
 
                 
    
                     Start
                 
    
             
    
-            
    The first tween scales the shape at scale: 1.5 via regular CSS3 transforms, and the second tween scales down the shape at scale: 0.5 value via svgTransform. If you inspect the elements,
-                you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected 50% 50% value. A similar case as with the skews.
    
+            
    The first tween scales the shape at scale: 1.5 via regular CSS3 transforms, and the second tween scales down the shape at scale: 0.5 value via svgTransform. 
+                If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected 50% 50% value. A similar case as with the skews.
    
 
             
    SVG Mixed Transform Functions
    
-            
    Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation transform-origin to make it look as you would expect it from regular HTML elements. Let's
-                combine 3 functions at the same time and see what happens:
    
+            
    Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation transform-origin to make it look as you would expect it 
+                from regular HTML elements. Let's combine 3 functions at the same time and see what happens:
    
             
    
                 
                 
@@ -468,16 +492,19 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
                     Start
                 
    
             
-            
    Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. If you inspect the elements, you will notice the second shape's translation is different from what we've set
-                in the tween object, and this is to keep transform-origin at an expected 50% 50% value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property
-                and SVG transform attribute have an identical animation.
    
+            
    Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. If you inspect the elements, you will notice the second shape's translation is 
+                different from what we've set in the tween object, and this is to keep transform-origin at an expected 50% 50% value. This means that the plugin will also compensate rotation transform origin 
+                when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.
    
 
             
    Chained SVG transforms
    
-            
    The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom transform-origin, it should look like this:
    
-            
    <svg>
+            
    The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom transform-origin, 
+                it should look like this:
    
+
+
    <svg>
     <circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20"></circle>
 </svg>
 
    
+
             
    Well in this case I would recommend using the values of the first translation as transform-origin for your tween built with the .fromTo() method like so:
    
             
    // a possible workaround for animating a SVG element that uses chained transform functions
 KUTE.fromTo(element,
@@ -502,17 +529,17 @@ KUTE.fromTo(element,
 
             
    Recommendations for SVG Transforms
    
             
      
-                
    • The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and always uses same order of transform functions: translate, rotate, skewX,
-                    skewY and scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.
      • 
+                
    • The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and always uses same order of transform functions: translate, 
+                    rotate, skewX, skewY and scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.
      • 
                 
    • Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.
      • 
                 
    • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
      • 
-                
    • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible or some browser specific tricks if that
-                    is the case.
      • 
-                
    • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply
-                    don't work. You might want to check this tutorial.
      • 
-                
    • Similar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the .to() method, you will
-                    have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all the properties and I highly recommend checking the example code for
-                    skews in the svg.js file.
      • 
+                
    • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible 
+                    or some browser specific tricks if that is the case.
      • 
+                
    • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most 
+                    Internet Explorer versions simply don't work. You might want to check this tutorial.
      • 
+                
    • Similar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the 
+                    .to() method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all 
+                    the properties and I highly recommend checking the example code for skews in the svg.js file.
      • 
                 
    • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
      • 
                 
    • Also the svgTransform tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.
      • 
             
    
@@ -521,7 +548,8 @@ KUTE.fromTo(element,
             
    SVG Plugin Tips
    
             
      
                 
    • The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.
      • 
-                
    • Since SVG morph scripting works only with path or glyph elements, you might need a convertToPath feature, so check this out.
      • 
+                
    • Since SVG morph scripting works only with path or glyph elements, you might need a convertToPath feature, so 
+                    check this out.
      • 
             
    
 
         
diff --git a/text.html b/text.html
index fb98d55..ff26d51 100644
--- a/text.html
+++ b/text.html
@@ -94,17 +94,18 @@
 
         
    
             
    Text Plugin
    
-            
    The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by character with a very cool effect.
    
+            
    The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by 
+                character with a very cool effect.
    
 
-            
    // basic synthax for number increments
+
    // basic synthax for number increments
 var myNumberTween = KUTE.to('selector', {number: 1500}); // this assumes it will start from current number or from 0
 
 // OR text writing character by character
 var myTextTween = KUTE.to('selector', {text: 'A text string with other <span>substring</span> should do.'});
 
    
 
-            
    The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is advised. With other words, try to limit the
-                number of simultaneus text animations.
    
+            
    The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is 
+                advised. With other words, try to limit the number of simultaneus text animations.
    
 
             
    Number Incrementing/Decreasing
    
             
    In the first example, let's animate a number, approximatelly as written above:
    
@@ -150,7 +151,8 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&
                     Start
                 
    
             
-            
    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!
    
+            
    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js 
+                features can really spice up some content. Have fun!
    
 
             
+            
    Unlike the examples hosted on Codepen, 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 complete reference. Now we are ready:
    
+
                     
    Collect Information And Cache It
    
-                    
    // grab an HTML element to build a tween object for it
+
    // grab an HTML element to build a tween object for it
 var element = document.getElementById("myElement");
 
 // check for IE legacy browsers
diff --git a/extend.html b/extend.html
index e602209..0687b74 100644
--- a/extend.html
+++ b/extend.html
@@ -42,8 +42,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/features.html b/features.html
index 3d71af8..4662a66 100644
--- a/features.html
+++ b/features.html
@@ -39,8 +39,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/index.html b/index.html
index 94f4cf2..b09dda3 100644
--- a/index.html
+++ b/index.html
@@ -39,8 +39,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/options.html b/options.html
index 05c63f3..e358be0 100644
--- a/options.html
+++ b/options.html
@@ -44,8 +44,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/properties.html b/properties.html
index d6ff81c..f9133ce 100644
--- a/properties.html
+++ b/properties.html
@@ -41,8 +41,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index 259ddcc..239e336 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | Attributes Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this});
\ No newline at end of file
+// KUTE.js v1.6.3 | © dnp_theme | Attributes Plugin | MIT-License
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index 362e008..8ddc8d5 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | CSS Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
\ No newline at end of file
+// KUTE.js v1.6.3 | © dnp_theme | CSS Plugin | MIT-License
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
\ No newline at end of file
diff --git a/src/kute-jquery.min.js b/src/kute-jquery.min.js
index 0cb6f53..9ccc043 100644
--- a/src/kute-jquery.min.js
+++ b/src/kute-jquery.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | jQuery Plugin | MIT-License
+// KUTE.js v1.6.3 | © dnp_theme | jQuery Plugin | MIT-License
 !function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index d8ed414..6448d78 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},i.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},i.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
+// KUTE.js v1.6.3 | © dnp_theme | SVG Plugin | MIT-License
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},i.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},i.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
diff --git a/src/kute-text.min.js b/src/kute-text.min.js
index 339196c..6a2a285 100644
--- a/src/kute-text.min.js
+++ b/src/kute-text.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | Text Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
\ No newline at end of file
+// KUTE.js v1.6.3 | © dnp_theme | Text Plugin | MIT-License
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index f22cc8a..528b222 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),W=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},z=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},H=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},D=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),it.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?W(n.translate,i.translate,"px",s):"")+("rotate"in n?z(n.rotate,i.rotate,"deg",s):"")+("skew"in n?H(n.skew,i.skew,"deg",s):"")+("scale"in n?D(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?y(p.v):p.v}if("rotate"===t){var f={},d=m(e,!0);return f.z="rad"===d.u?y(d.v):d.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),w(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var d=p[f];/3d/.test(c)?l["translate"+d]=J.transform.call(this,"translate"+d,t[c][f]):l["translate"+d]="translate"+d in t?J.transform.call(this,"translate"+d,t["translate"+d]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var v=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],y="rotate"===v?u:i,m=0;m<3;m++){var w=g[m];void 0!==t[v+w]&&"skewZ"!==c&&(y[v+w]=J.transform.call(this,v+w,t[v+w]))}h[v]=y}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||T()},48)},nt=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},it=function(){"scroll"in this.valuesEnd&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(S,nt,!1),document.removeEventListener(P,nt,!1),document.body.removeAttribute("data-tweening"))},st=function(){"scroll"in this.valuesEnd&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(S,nt,!1),document.addEventListener(P,nt,!1),document.body.setAttribute("data-tweening","scroll"))},rt=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},at=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var d in this.valuesStart[C])if("perspective"!==d)if("object"==typeof this.valuesStart[C][d])for(var v in this.valuesStart[C][d])"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]={}),"number"==typeof this.valuesStart[C][d][v]&&"undefined"==typeof this.valuesEnd[C][d][v]&&(this.valuesEnd[C][d][v]=this.valuesStart[C][d][v]);else"number"==typeof this.valuesStart[C][d]&&"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]=this.valuesStart[C][d])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),this.options.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!this.options.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof rt(i.easing)?rt(i.easing):ot[f.easing],this.options.repeat=i.repeat||f.repeat,this.options.repeatDelay=i.repeatDelay||f.repeatDelay,this.options.yoyo=i.yoyo||f.yoyo,this.options.duration=i.duration||f.duration,this.options.delay=i.delay||f.delay,this.repeat=this.options.repeat},lt=(ut.prototype={start:function(t){st.call(this),this.options.rpr&&at.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,M(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(x(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(x(this),this.playing=!1,this.paused=!1,it.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||f.offset):n.delay,this.tweens.push(ct(t[s],e,i[s]))}),ht=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||f.offset):i.delay,this.tweens.push(pt(t[r],e,n,s[r]))},ct=(lt.prototype=ht.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),H=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},W=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},D=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},z=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),it.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?H(n.translate,i.translate,"px",s):"")+("rotate"in n?W(n.rotate,i.rotate,"deg",s):"")+("skew"in n?D(n.skew,i.skew,"deg",s):"")+("scale"in n?z(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?y(p.v):p.v}if("rotate"===t){var f={},d=m(e,!0);return f.z="rad"===d.u?y(d.v):d.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),w(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var d=p[f];/3d/.test(c)?l["translate"+d]=J.transform.call(this,"translate"+d,t[c][f]):l["translate"+d]="translate"+d in t?J.transform.call(this,"translate"+d,t["translate"+d]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var v=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],y="rotate"===v?u:i,m=0;m<3;m++){var w=g[m];void 0!==t[v+w]&&"skewZ"!==c&&(y[v+w]=J.transform.call(this,v+w,t[v+w]))}h[v]=y}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||k()},48)},nt=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},it=function(){"scroll"in this.valuesEnd&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(T,nt,!1),document.removeEventListener(P,nt,!1),document.body.removeAttribute("data-tweening"))},st=function(){"scroll"in this.valuesEnd&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(T,nt,!1),document.addEventListener(P,nt,!1),document.body.setAttribute("data-tweening","scroll"))},rt=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},at=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var d in this.valuesStart[C])if("perspective"!==d)if("object"==typeof this.valuesStart[C][d])for(var v in this.valuesStart[C][d])"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]={}),"number"==typeof this.valuesStart[C][d][v]&&"undefined"==typeof this.valuesEnd[C][d][v]&&(this.valuesEnd[C][d][v]=this.valuesStart[C][d][v]);else"number"==typeof this.valuesStart[C][d]&&"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]=this.valuesStart[C][d])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),this.options.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!this.options.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof rt(i.easing)?rt(i.easing):ot[f.easing],this.options.repeat=i.repeat||f.repeat,this.options.repeatDelay=i.repeatDelay||f.repeatDelay,this.options.yoyo=i.yoyo||f.yoyo,this.options.duration=i.duration||f.duration,this.options.delay=i.delay||f.delay,this.repeat=this.options.repeat},lt=(ut.prototype={start:function(t){st.call(this),this.options.rpr&&at.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,x(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(M(this),this.playing=!1,this.paused=!1,it.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||f.offset):n.delay,this.tweens.push(ct(t[s],e,i[s]))}),ht=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||f.offset):i.delay,this.tweens.push(pt(t[r],e,n,s[r]))},ct=(lt.prototype=ht.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n
 
 
-    
    
-
     
    
 
         
    
diff --git a/svg.html b/svg.html
index bb45eeb..071d5ba 100644
--- a/svg.html
+++ b/svg.html
@@ -43,8 +43,6 @@
 
 
 
-    
    
-
     
    
 
         
    
@@ -513,7 +511,7 @@ KUTE.fromTo(element,
     {transformOrigin: [256,256]} // tween options use the transform-origin of the target SVG element
 ).start();
 
    
-            
    Before you hit the Start button, make sure to check the transform attribute value.
    
+            
    Before you hit the Start button, make sure to check the transform attribute value. The below tween will reset the element's transform attribute to original value when the animation is complete.
    
             
    
                 
                 
 
 
-    
    
-
     
    
 
         
    

From af9e57b1f7992b37b5bdeefe263e3047cb8a0bd7 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 2 Feb 2017 01:23:21 +0200
Subject: [PATCH 127/187] Changes: * code cleanup, more readable code in
 plugins * documentation fixes, the easing selectors fixed

---
 about.html           | 2 +-
 api.html             | 2 +-
 assets/js/scripts.js | 6 +++---
 attr.html            | 2 +-
 css.html             | 7 ++++---
 easing.html          | 2 +-
 examples.html        | 2 +-
 extend.html          | 2 +-
 features.html        | 2 +-
 index.html           | 2 +-
 options.html         | 2 +-
 properties.html      | 2 +-
 src/kute-svg.min.js  | 2 +-
 src/kute.min.js      | 2 +-
 start.html           | 2 +-
 svg.html             | 2 +-
 text.html            | 2 +-
 17 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/about.html b/about.html
index 1c8b499..554354a 100644
--- a/about.html
+++ b/about.html
@@ -218,7 +218,7 @@
                     
         
    
diff --git a/api.html b/api.html
index 7e21c4f..cd34f96 100644
--- a/api.html
+++ b/api.html
@@ -236,7 +236,7 @@ tween2.chain(tweensCollection2.tweens);
             
 
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 7324e88..1a1544c 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -26,14 +26,14 @@ function classToggles(el){
 }
 
 document.addEventListener('click', function(e){
-    var target = e.target.parentNode.tagName === 'LI' ? e.target : e.target.parentNode, 
+    var target = e.target.parentNode.tagName === 'LI' || e.target.parentNode.classList.contains('btn-group') ? e.target : e.target.parentNode, 
         parent = target.parentNode;
-
     for (var i = 0, l = toggles.length; i
             
  • Share 
    • 
             
-            
+            
             
         
 
diff --git a/css.html b/css.html
index 099c7de..c7cbc15 100644
--- a/css.html
+++ b/css.html
@@ -172,9 +172,10 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
             
    A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.
    
 
             
    Clip Property
    
-            
    This property allows you to animate the rectangular shape of an element that is set to position:absolute. In CSS this property works like this clip: rect(top,right,bottom,left) forming a rectangular shape that masks
-                an element making parts of it invisible.
    
+            
    This property allows you to animate the rectangular shape of an element that is set to position:absolute. In CSS this property works like this clip: rect(top,right,bottom,left) forming a rectangular shape that masks an element making parts of it invisible. While the clip property have been deprecated, it can still be used to emulate a scale animation for legacy browsers in certain cases.
    
+
             
    KUTE.to('selector',{clip:[0,150,100,0]}).start();
    
+
             
    A quick example here could look like this:
    
 
             
    
@@ -205,7 +206,7 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
         
 
diff --git a/easing.html b/easing.html
index 21b1f3b..58bd465 100644
--- a/easing.html
+++ b/easing.html
@@ -321,7 +321,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
             
 
diff --git a/examples.html b/examples.html
index 7ddba16..0799cbf 100644
--- a/examples.html
+++ b/examples.html
@@ -493,7 +493,7 @@ var myMultiTween2 = KUTE.allFromTo(
         
 
diff --git a/extend.html b/extend.html
index 0687b74..564ebd5 100644
--- a/extend.html
+++ b/extend.html
@@ -334,7 +334,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
 
diff --git a/features.html b/features.html
index 4662a66..897874f 100644
--- a/features.html
+++ b/features.html
@@ -180,7 +180,7 @@
             
         
    
diff --git a/index.html b/index.html
index b09dda3..b7af5e3 100644
--- a/index.html
+++ b/index.html
@@ -193,7 +193,7 @@
             
 
diff --git a/options.html b/options.html
index e358be0..6a89ea9 100644
--- a/options.html
+++ b/options.html
@@ -186,7 +186,7 @@ KUTE.defaultOptions.duration = 1000;
             
 
diff --git a/properties.html b/properties.html
index f9133ce..0fba1d0 100644
--- a/properties.html
+++ b/properties.html
@@ -264,7 +264,7 @@
             
         
    
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index 6448d78..edbaddf 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},i.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},i.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)}return a}:function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},i.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},i.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index 528b222..804d85f 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e=t.performance,n=[],i=null,s=["color","backgroundColor"],r=["top","left","width","height"],a=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],o=["opacity"],u=s.concat(o,r,a),l=u.length,h={},c=0;c>0||0:t[s]&&e[s]?(100*Q(t[s],e[s],n)>>0)/100:null;return i?b(r.r,r.g,r.b):r.a?l+r.r+o+r.g+o+r.b+o+r.a+a:u+r.r+o+r.g+o+r.b+a}),H=q.translate=$?function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:t[r]+(e[r]-t[r])*i>>0)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"}:function(t,e,n,i){var s={};for(var r in e)s[r]=(t[r]===e[r]?e[r]:(100*(t[r]+(e[r]-t[r])*i)>>0)/100)+n;return s.x||s.y?"translate("+s.x+","+s.y+")":"translate3d("+s.translateX+","+s.translateY+","+s.translateZ+")"},W=q.rotate=function(t,e,n,i){var s={};for(var r in e)s[r]="z"===r?"rotate("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")":r+"("+(100*(t[r]+(e[r]-t[r])*i)>>0)/100+n+")";return s.z?s.z:(s.rotateX||"")+(s.rotateY||"")+(s.rotateZ||"")},D=q.skew=function(t,e,n,i){var s={};for(var r in e)s[r]=r+"("+(10*(t[r]+(e[r]-t[r])*i)>>0)/10+n+")";return(s.skewX||"")+(s.skewY||"")},z=q.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},j={},L=function(t){for(var e=0;e0)return isFinite(this.options.repeat)&&this.options.repeat--,this.options.yoyo&&(this.reversed=!this.reversed,tt.call(this)),this._startTime=this.options.yoyo&&!this.reversed?t+this.options.repeatDelay:t,!0;this.options.complete&&this.options.complete.call(),it.call(this);for(var r=0,a=this.options.chain.length;r.99||s<.01?(10*Q(n,i,s)>>0)/10:Q(n,i,s)>>0)+"px"});var n=m(e);return"%"===n.u?n.v*this.element.offsetWidth/100:n.v},transform:function(t,e){if(C in j||(j[C]=function(t,e,n,i,s,r){t.style[e]=(n.perspective||"")+("translate"in n?H(n.translate,i.translate,"px",s):"")+("rotate"in n?W(n.rotate,i.rotate,"deg",s):"")+("skew"in n?D(n.skew,i.skew,"deg",s):"")+("scale"in n?z(n.scale,i.scale,s):"")}),/translate/.test(t)){if("translate3d"===t){var n=e.split(","),i=m(n[0]),s=m(n[1],t3d2=m(n[2]));return{translateX:"%"===i.u?i.v*this.element.offsetWidth/100:i.v,translateY:"%"===s.u?s.v*this.element.offsetHeight/100:s.v,translateZ:"%"===t3d2.u?t3d2.v*(this.element.offsetHeight+this.element.offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var r=m(e),a=/X/.test(t)?this.element.offsetWidth/100:/Y/.test(t)?this.element.offsetHeight/100:(this.element.offsetWidth+this.element.offsetHeight)/200;return"%"===r.u?r.v*a:r.v}if("translate"===t){var o,u="string"==typeof e?e.split(","):e,l={},h=m(u[0]),c=u.length?m(u[1]):{v:0,u:"px"};return u instanceof Array?(l.x="%"===h.u?h.v*this.element.offsetWidth/100:h.v,l.y="%"===c.u?c.v*this.element.offsetHeight/100:c.v):(o=m(u),l.x="%"===o.u?o.v*this.element.offsetWidth/100:o.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var p=m(e,!0);return"rad"===p.u?y(p.v):p.v}if("rotate"===t){var f={},d=m(e,!0);return f.z="rad"===d.u?y(d.v):d.v,f}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in j?"opacity"===t&&(t in j||(B?j[t]=function(t,e,n,i,s){var r="alpha(opacity=",a=")";t.style.filter=r+(100*Q(n,i,s)>>0)+a}:j[t]=function(t,e,n,i,s){t.style.opacity=(100*Q(n,i,s)>>0)/100})):j[t]=function(t,e,n,i,s){t.scrollTop=Q(n,i,s)>>0},parseFloat(e)},colors:function(t,e){return t in j||(j[t]=function(t,e,n,i,s,r){t.style[e]=R(n,i,s,r.keepHex)}),w(e)}},V=function(t,e){var n=(this.element,"start"===e?this.valuesStart:this.valuesEnd),i={},u={},l={},h={};for(var c in t)if(a.indexOf(c)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(c)){for(var p=["X","Y","Z"],f=0;f<3;f++){var d=p[f];/3d/.test(c)?l["translate"+d]=J.transform.call(this,"translate"+d,t[c][f]):l["translate"+d]="translate"+d in t?J.transform.call(this,"translate"+d,t["translate"+d]):0}h.translate=l}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(c)){for(var v=/rotate/.test(c)?"rotate":"skew",g=["X","Y","Z"],y="rotate"===v?u:i,m=0;m<3;m++){var w=g[m];void 0!==t[v+w]&&"skewZ"!==c&&(y[v+w]=J.transform.call(this,v+w,t[v+w]))}h[v]=y}else/(rotate|translate|scale)$/.test(c)&&(h[c]=J.transform.call(this,c,t[c]));n[C]=h}else r.indexOf(c)!==-1?n[c]=J.boxModel.call(this,c,t[c]):o.indexOf(c)!==-1||"scroll"===c?n[c]=J.unitless.call(this,c,t[c]):s.indexOf(c)!==-1?n[c]=J.colors.call(this,c,t[c]):c in J&&(n[c]=J[c].call(this,c,t[c]))},tt=function(){if(this.options.yoyo)for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},et=function(){this.repeat>0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(tt.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||k()},48)},nt=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},it=function(){"scroll"in this.valuesEnd&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(T,nt,!1),document.removeEventListener(P,nt,!1),document.body.removeAttribute("data-tweening"))},st=function(){"scroll"in this.valuesEnd&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(T,nt,!1),document.addEventListener(P,nt,!1),document.body.setAttribute("data-tweening","scroll"))},rt=function(t){return"function"==typeof t?t:"string"==typeof t?ot[t]:void 0},at=function(){var e={},n=O(this.element,"transform"),i=["rotate","skew"],s=["X","Y","Z"];for(var r in this.valuesStart)if(a.indexOf(r)!==-1){var o=/(rotate|translate|scale)$/.test(r);if(/translate/.test(r)&&"translate"!==r)e.translate3d=n.translate3d||h[r];else if(o)e[r]=n[r]||h[r];else if(!o&&/rotate|skew/.test(r))for(var l=0;l<2;l++)for(var c=0;c<3;c++){var p=i[l]+s[c];a.indexOf(p)!==-1&&p in this.valuesStart&&(e[p]=n[p]||h[p])}}else if("scroll"!==r)if("opacity"===r&&B){var f=E(this.element,"filter");e.opacity="number"==typeof f?f:h.opacity}else u.indexOf(r)!==-1?e[r]=E(this.element,r)||l[r]:e[r]=r in K?K[r].call(this,r,this.valuesStart[r]):0;else e[r]=this.element===Z?t.pageYOffset||Z.scrollTop:this.element.scrollTop;for(var r in n)a.indexOf(r)===-1||r in this.valuesStart||(e[r]=n[r]||h[r]);if(this.valuesStart={},V.call(this,e,"start"),C in this.valuesEnd)for(var d in this.valuesStart[C])if("perspective"!==d)if("object"==typeof this.valuesStart[C][d])for(var v in this.valuesStart[C][d])"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]={}),"number"==typeof this.valuesStart[C][d][v]&&"undefined"==typeof this.valuesEnd[C][d][v]&&(this.valuesEnd[C][d][v]=this.valuesStart[C][d][v]);else"number"==typeof this.valuesStart[C][d]&&"undefined"==typeof this.valuesEnd[C][d]&&(this.valuesEnd[C][d]=this.valuesStart[C][d])},ot=t.Easing={};ot.linear=function(t){return t},ot.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},ot.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},ot.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},ot.easingQuadraticIn=function(t){return t*t},ot.easingQuadraticOut=function(t){return t*(2-t)},ot.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},ot.easingCubicIn=function(t){return t*t*t},ot.easingCubicOut=function(t){return--t*t*t+1},ot.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},ot.easingQuarticIn=function(t){return t*t*t*t},ot.easingQuarticOut=function(t){return 1- --t*t*t*t},ot.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},ot.easingQuinticIn=function(t){return t*t*t*t*t},ot.easingQuinticOut=function(t){return 1+--t*t*t*t*t},ot.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},ot.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},ot.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},ot.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},ot.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},ot.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},ot.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},ot.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},ot.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},ot.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},ot.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},ot.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},ot.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},ot.easingBounceIn=function(t){return 1-ot.easingBounceOut(1-t)},ot.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},ot.easingBounceInOut=function(t){return t<.5?.5*ot.easingBounceIn(2*t):.5*ot.easingBounceOut(2*t-1)+.5};var ut=function(t,e,n,i){this.element="scroll"in n&&(void 0===t||null===t)?Z:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this.options={};for(var s in i)this.options[s]=i[s];if(this.options.rpr=i.rpr||!1,this.valuesRepeat={},this.valuesEnd={},this.valuesStart={},V.call(this,n,"end"),this.options.rpr?this.valuesStart=e:V.call(this,e,"start"),void 0!==this.options.perspective&&C in this.valuesEnd){var r="perspective("+parseInt(this.options.perspective)+"px)";this.valuesEnd[C].perspective=r}for(var a in this.valuesEnd)a in G&&!this.options.rpr&&G[a].call(this);this.options.chain=[],this.options.easing=i.easing&&"function"==typeof rt(i.easing)?rt(i.easing):ot[f.easing],this.options.repeat=i.repeat||f.repeat,this.options.repeatDelay=i.repeatDelay||f.repeatDelay,this.options.yoyo=i.yoyo||f.yoyo,this.options.duration=i.duration||f.duration,this.options.delay=i.delay||f.delay,this.repeat=this.options.repeat},lt=(ut.prototype={start:function(t){st.call(this),this.options.rpr&&at.apply(this),U.apply(this);for(var s in this.valuesEnd)s in G&&this.options.rpr&&G[s].call(this),this.valuesRepeat[s]=this.valuesStart[s];return n.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!i&&L(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,x(this),!i&&L()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},stop:function(){return!this.paused&&this.playing&&(M(this),this.playing=!1,this.paused=!1,it.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),et.call(this)),this},chain:function(){return this.options.chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||f.offset):n.delay,this.tweens.push(ct(t[s],e,i[s]))}),ht=function(t,e,n,i){this.tweens=[];for(var s=[],r=0,a=t.length;r0?i.delay+(i.offset||f.offset):i.delay,this.tweens.push(pt(t[r],e,n,s[r]))},ct=(lt.prototype=ht.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n>0||0:t[i]&&e[i]?(100*pt(t[i],e[i],n)>>0)/100:null;return r?U(s.r,s.g,s.b):s.a?h+s.r+o+s.g+o+s.b+o+s.a+a:u+s.r+o+s.g+o+s.b+a}),dt=ft.translate=lt?function(t,e,n,r){var i={};for(var s in e)i[s]=(t[s]===e[s]?e[s]:t[s]+(e[s]-t[s])*r>>0)+n;return i.x||i.y?"translate("+i.x+","+i.y+")":"translate3d("+i.translateX+","+i.translateY+","+i.translateZ+")"}:function(t,e,n,r){var i={};for(var s in e)i[s]=(t[s]===e[s]?e[s]:(100*(t[s]+(e[s]-t[s])*r)>>0)/100)+n;return i.x||i.y?"translate("+i.x+","+i.y+")":"translate3d("+i.translateX+","+i.translateY+","+i.translateZ+")"},gt=ft.rotate=function(t,e,n,r){var i={};for(var s in e)i[s]="z"===s?"rotate("+(100*(t[s]+(e[s]-t[s])*r)>>0)/100+n+")":s+"("+(100*(t[s]+(e[s]-t[s])*r)>>0)/100+n+")";return i.z?i.z:(i.rotateX||"")+(i.rotateY||"")+(i.rotateZ||"")},mt=ft.skew=function(t,e,n,r){var i={};for(var s in e)i[s]=s+"("+(10*(t[s]+(e[s]-t[s])*r)>>0)/10+n+")";return(i.skewX||"")+(i.skewY||"")},wt=ft.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},yt={},It=function(t){for(var e=0;e0)return isFinite(this[f][M])&&this[f][M]--,this[f][k]&&(this.reversed=!this.reversed,Pt.call(this)),this._startTime=this[f][k]&&!this.reversed?t+this[f][O]:t,!0;this[f].complete&&this[f].complete.call(),Et.call(this);for(var s=0,o=this[f][T][a];s.99||i<.01?(10*pt(n,r,i)>>0)/10:pt(n,r,i)>>0)+"px"});var n=L(e);return"%"===n.u?n.v*this[m][c]/100:n.v},transform:function(t,e){if(at in yt||(yt[at]=function(t,e,n,r,i,s){t[Y][e]=(n.perspective||"")+("translate"in n?dt(n.translate,r.translate,"px",i):"")+("rotate"in n?gt(n.rotate,r.rotate,"deg",i):"")+("skew"in n?mt(n.skew,r.skew,"deg",i):"")+("scale"in n?wt(n.scale,r.scale,i):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),r=L(n[0]),i=L(n[1],t3d2=L(n[2]));return{translateX:"%"===r.u?r.v*this[m][c]/100:r.v,translateY:"%"===i.u?i.v*this[m][l]/100:i.v,translateZ:"%"===t3d2.u?t3d2.v*(this[m][l]+this[m][c])/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=L(e),u=/X/.test(t)?this[m][c]/100:/Y/.test(t)?this[m][l]/100:(this[m][c]+this[m][l])/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,f="string"==typeof e?e[o](","):e,p={},v=L(f[0]),d=f[a]?L(f[1]):{v:0,u:"px"};return f instanceof Array?(p.x="%"===v.u?v.v*this[m][c]/100:v.v,p.y="%"===d.u?d.v*this[m][l]/100:d.v):(h=L(f),p.x="%"===h.u?h.v*this[m][c]/100:h.v,p.y=0),p}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var g=L(e,!0);return"rad"===g.u?H(g.v):g.v}if("rotate"===t){var w={},y=L(e,!0);return w.z="rad"===y.u?H(y.v):y.v,w}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in yt?"opacity"===t&&(t in yt||(ct?yt[t]=function(t,e,n,r,i){var s="alpha(opacity=",a=")";t[Y].filter=s+(100*pt(n,r,i)>>0)+a}:yt[t]=function(t,e,n,r,i){t[Y].opacity=(100*pt(n,r,i)>>0)/100})):yt[t]=function(t,e,n,r,i){t.scrollTop=pt(n,r,i)>>0},parseFloat(e)},colors:function(t,e){return t in yt||(yt[t]=function(t,e,n,r,i,s){t[Y][e]=vt(n,r,i,s[P])}),N(e)}},Tt=function(t,e){var n="start"===e?this[p]:this[v],r={},i={},s={},a={};for(var o in t)if(_[u](o)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var h=["X","Y","Z"],c=0;c<3;c++){var l=h[c];/3d/.test(o)?s["translate"+l]=xt.transform.call(this,"translate"+l,t[o][c]):s["translate"+l]="translate"+l in t?xt.transform.call(this,"translate"+l,t["translate"+l]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var f=/rotate/.test(o)?"rotate":"skew",h=["X","Y","Z"],d="rotate"===f?i:r,g=0;g<3;g++){var m=h[g];void 0!==t[f+m]&&"skewZ"!==o&&(d[f+m]=xt.transform.call(this,f+m,t[f+m]))}a[f]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=xt.transform.call(this,o,t[o]));n[at]=a}else Z[u](o)!==-1?n[o]=xt.boxModel.call(this,o,t[o]):S[u](o)!==-1||"scroll"===o?n[o]=xt.unitless.call(this,o,t[o]):F[u](o)!==-1?n[o]=xt.colors.call(this,o,t[o]):o in xt&&(n[o]=xt[o].call(this,o,t[o]))},Pt=function(){if(this[f][k])for(var t in this[v]){var e=this[g][t];this[g][t]=this[v][t],this[v][t]=e,this[p][t]=this[g][t]}},Yt=function(){this[M]>0&&(this[f][M]=this[M]),this[f][k]&&this.reversed===!0&&(Pt.call(this),this.reversed=!1),this[w]=!1,setTimeout(function(){i[a]||tt()},48)},Xt=function(t){var e=r.getAttribute(X);e&&"scroll"===e&&t.preventDefault()},Et=function(){"scroll"in this[v]&&r.getAttribute(X)&&(document[A](nt,Xt,!1),document[A](rt,Xt,!1),r.removeAttribute(X))},Ct=function(){"scroll"in this[v]&&!r.getAttribute(X)&&(document[C](nt,Xt,!1),document[C](rt,Xt,!1),r.setAttribute(X,"scroll"))},At=function(t){return"function"==typeof t?t:"string"==typeof t?Zt[t]:void 0},Ft=function(){var t={},n=K(this[m]),r=["rotate","skew"],i=["X","Y","Z"];for(var s in this[p])if(_[u](s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||$[s];else if(a)t[s]=n[s]||$[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var c=r[o]+i[h];_[u](c)!==-1&&c in this[p]&&(t[c]=n[c]||$[c])}}else if("scroll"!==s)if("opacity"===s&&ct){var l=G(this[m],"filter");t.opacity="number"==typeof l?l:$.opacity}else B[u](s)!==-1?t[s]=G(this[m],s)||d[s]:t[s]=s in Ot?Ot[s].call(this,s,this[p][s]):0;else t[s]=this[m]===ut?e.pageYOffset||ut.scrollTop:this[m].scrollTop;for(var f in n)_[u](f)===-1||f in this[p]||(t[f]=n[f]||$[f]);if(this[p]={},Tt.call(this,t,"start"),at in this[v])for(var g in this[p][at])if("perspective"!==g)if("object"==typeof this[p][at][g])for(var w in this[p][at][g])"undefined"==typeof this[v][at][g]&&(this[v][at][g]={}),"number"==typeof this[p][at][g][w]&&"undefined"==typeof this[v][at][g][w]&&(this[v][at][g][w]=this[p][at][g][w]);else"number"==typeof this[p][at][g]&&"undefined"==typeof this[v][at][g]&&(this[v][at][g]=this[p][at][g])},Zt=e.Easing={};Zt.linear=function(t){return t},Zt.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},Zt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},Zt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},Zt.easingQuadraticIn=function(t){return t*t},Zt.easingQuadraticOut=function(t){return t*(2-t)},Zt.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},Zt.easingCubicIn=function(t){return t*t*t},Zt.easingCubicOut=function(t){return--t*t*t+1},Zt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},Zt.easingQuarticIn=function(t){return t*t*t*t},Zt.easingQuarticOut=function(t){return 1- --t*t*t*t},Zt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},Zt.easingQuinticIn=function(t){return t*t*t*t*t},Zt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},Zt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},Zt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},Zt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},Zt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},Zt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},Zt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},Zt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},Zt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},Zt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},Zt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},Zt.easingElasticIn=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)))},Zt.easingElasticOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/r)+1)},Zt.easingElasticInOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)*.5+1)},Zt.easingBounceIn=function(t){return 1-Zt.easingBounceOut(1-t)},Zt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},Zt.easingBounceInOut=function(t){return t<.5?.5*Zt.easingBounceIn(2*t):.5*Zt.easingBounceOut(2*t-1)+.5};var _t=function(t,e,n,r){this[m]="scroll"in n&&(void 0===t||null===t)?ut:t,this[w]=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[f]={};for(var i in r)this[f][i]=r[i];if(this[f].rpr=r.rpr||!1,this[g]={},this[v]={},this[p]={},Tt.call(this,n,"end"),this[f].rpr?this[p]=e:Tt.call(this,e,"start"),void 0!==this[f].perspective&&at in this[v]){var s="perspective("+parseInt(this[f].perspective)+"px)";this[v][at].perspective=s}for(var a in this[v])a in kt&&!this[f].rpr&&kt[a].call(this);this[f][T]=[],this[f][x]=At(r[x])||Zt[z[x]]||Zt.linear,this[f][M]=r[M]||z[M],this[f][O]=r[O]||z[O],this[f][k]=r[k]||z[k],this[f][y]=r[y]||z[y],this[f][I]=r[I]||z[I],this[M]=this[f][M]},St=(_t.prototype={start:function(t){Ct.call(this),this[f].rpr&&Ft.apply(this),Mt.apply(this);for(var e in this[v])e in kt&&this[f].rpr&&kt[e].call(this),this[g][e]=this[p][e];return i.push(this),this[w]=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[f][I],this._startFired||(this[f].start&&this[f].start.call(),this._startFired=!0),!s&&It(),this},play:function(){return this.paused&&this[w]&&(this.paused=!1,this[f].resume&&this[f].resume.call(),this._startTime+=n.now()-this._pauseTime,J(this),!s&&It()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this[w]&&(V(this),this.paused=!0,this._pauseTime=n.now(),this[f].pause&&this[f].pause.call()),this},stop:function(){return!this.paused&&this[w]&&(V(this),this[w]=!1,this.paused=!1,Et.call(this),this[f].stop&&this[f].stop.call(),this.stopChainedTweens(),Yt.call(this)),this},chain:function(){return this[f][T]=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[f][T][a];t0?n[I]+(n[b]||z[b]):n[I],this.tweens.push($t(t[i],e,r[i]))}),Bt=function(t,e,n,r){this.tweens=[];for(var i=[],s=0,o=t[a];s0?r[I]+(r[b]||z[b]):r[I],this.tweens.push(qt(t[s],e,n,i[s]))},$t=(St.prototype=Bt.prototype={start:function(t){t=t||n.now();for(var e=0,r=this.tweens[a];e
                 
  • Share 
    • 
                 
-                
+                
                 
             
 
diff --git a/svg.html b/svg.html
index 071d5ba..96c21bd 100644
--- a/svg.html
+++ b/svg.html
@@ -555,7 +555,7 @@ KUTE.fromTo(element,
         
 
diff --git a/text.html b/text.html
index 66519c4..3056902 100644
--- a/text.html
+++ b/text.html
@@ -155,7 +155,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&
             
         
    

From da327643c770b223064b57fff371fe91269099b5 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 29 May 2017 16:03:59 +0300
Subject: [PATCH 128/187] Improvement for
 https://github.com/thednp/kute.js/issues/63

---
 src/kute.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute.min.js b/src/kute.min.js
index 804d85f..8b18aaf 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t,e="undefined"!=typeof global?global:window,n=e.performance,r=document.body,i=[],s=null,a="length",o="split",u="indexOf",h="replace",c="offsetWidth",l="offsetHeight",f="options",p="valuesStart",v="valuesEnd",g="valuesRepeat",m="element",w="playing",y="duration",I="delay",b="offset",M="repeat",O="repeatDelay",k="yoyo",x="easing",T="chain",P="keepHex",Y="style",X="data-tweening",E="getElementsByTagName",C="addEventListener",A="removeEventListener",F=["color","backgroundColor"],Z=["top","left","width","height"],_=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],S=["opacity"],B=F.concat(S,Z,_),$={},q=0,Q=B[a];q>0||0:t[i]&&e[i]?(100*pt(t[i],e[i],n)>>0)/100:null;return r?U(s.r,s.g,s.b):s.a?h+s.r+o+s.g+o+s.b+o+s.a+a:u+s.r+o+s.g+o+s.b+a}),dt=ft.translate=lt?function(t,e,n,r){var i={};for(var s in e)i[s]=(t[s]===e[s]?e[s]:t[s]+(e[s]-t[s])*r>>0)+n;return i.x||i.y?"translate("+i.x+","+i.y+")":"translate3d("+i.translateX+","+i.translateY+","+i.translateZ+")"}:function(t,e,n,r){var i={};for(var s in e)i[s]=(t[s]===e[s]?e[s]:(100*(t[s]+(e[s]-t[s])*r)>>0)/100)+n;return i.x||i.y?"translate("+i.x+","+i.y+")":"translate3d("+i.translateX+","+i.translateY+","+i.translateZ+")"},gt=ft.rotate=function(t,e,n,r){var i={};for(var s in e)i[s]="z"===s?"rotate("+(100*(t[s]+(e[s]-t[s])*r)>>0)/100+n+")":s+"("+(100*(t[s]+(e[s]-t[s])*r)>>0)/100+n+")";return i.z?i.z:(i.rotateX||"")+(i.rotateY||"")+(i.rotateZ||"")},mt=ft.skew=function(t,e,n,r){var i={};for(var s in e)i[s]=s+"("+(10*(t[s]+(e[s]-t[s])*r)>>0)/10+n+")";return(i.skewX||"")+(i.skewY||"")},wt=ft.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},yt={},It=function(t){for(var e=0;e0)return isFinite(this[f][M])&&this[f][M]--,this[f][k]&&(this.reversed=!this.reversed,Pt.call(this)),this._startTime=this[f][k]&&!this.reversed?t+this[f][O]:t,!0;this[f].complete&&this[f].complete.call(),Et.call(this);for(var s=0,o=this[f][T][a];s.99||i<.01?(10*pt(n,r,i)>>0)/10:pt(n,r,i)>>0)+"px"});var n=L(e);return"%"===n.u?n.v*this[m][c]/100:n.v},transform:function(t,e){if(at in yt||(yt[at]=function(t,e,n,r,i,s){t[Y][e]=(n.perspective||"")+("translate"in n?dt(n.translate,r.translate,"px",i):"")+("rotate"in n?gt(n.rotate,r.rotate,"deg",i):"")+("skew"in n?mt(n.skew,r.skew,"deg",i):"")+("scale"in n?wt(n.scale,r.scale,i):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),r=L(n[0]),i=L(n[1],t3d2=L(n[2]));return{translateX:"%"===r.u?r.v*this[m][c]/100:r.v,translateY:"%"===i.u?i.v*this[m][l]/100:i.v,translateZ:"%"===t3d2.u?t3d2.v*(this[m][l]+this[m][c])/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=L(e),u=/X/.test(t)?this[m][c]/100:/Y/.test(t)?this[m][l]/100:(this[m][c]+this[m][l])/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,f="string"==typeof e?e[o](","):e,p={},v=L(f[0]),d=f[a]?L(f[1]):{v:0,u:"px"};return f instanceof Array?(p.x="%"===v.u?v.v*this[m][c]/100:v.v,p.y="%"===d.u?d.v*this[m][l]/100:d.v):(h=L(f),p.x="%"===h.u?h.v*this[m][c]/100:h.v,p.y=0),p}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var g=L(e,!0);return"rad"===g.u?H(g.v):g.v}if("rotate"===t){var w={},y=L(e,!0);return w.z="rad"===y.u?H(y.v):y.v,w}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in yt?"opacity"===t&&(t in yt||(ct?yt[t]=function(t,e,n,r,i){var s="alpha(opacity=",a=")";t[Y].filter=s+(100*pt(n,r,i)>>0)+a}:yt[t]=function(t,e,n,r,i){t[Y].opacity=(100*pt(n,r,i)>>0)/100})):yt[t]=function(t,e,n,r,i){t.scrollTop=pt(n,r,i)>>0},parseFloat(e)},colors:function(t,e){return t in yt||(yt[t]=function(t,e,n,r,i,s){t[Y][e]=vt(n,r,i,s[P])}),N(e)}},Tt=function(t,e){var n="start"===e?this[p]:this[v],r={},i={},s={},a={};for(var o in t)if(_[u](o)!==-1){if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var h=["X","Y","Z"],c=0;c<3;c++){var l=h[c];/3d/.test(o)?s["translate"+l]=xt.transform.call(this,"translate"+l,t[o][c]):s["translate"+l]="translate"+l in t?xt.transform.call(this,"translate"+l,t["translate"+l]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var f=/rotate/.test(o)?"rotate":"skew",h=["X","Y","Z"],d="rotate"===f?i:r,g=0;g<3;g++){var m=h[g];void 0!==t[f+m]&&"skewZ"!==o&&(d[f+m]=xt.transform.call(this,f+m,t[f+m]))}a[f]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=xt.transform.call(this,o,t[o]));n[at]=a}else Z[u](o)!==-1?n[o]=xt.boxModel.call(this,o,t[o]):S[u](o)!==-1||"scroll"===o?n[o]=xt.unitless.call(this,o,t[o]):F[u](o)!==-1?n[o]=xt.colors.call(this,o,t[o]):o in xt&&(n[o]=xt[o].call(this,o,t[o]))},Pt=function(){if(this[f][k])for(var t in this[v]){var e=this[g][t];this[g][t]=this[v][t],this[v][t]=e,this[p][t]=this[g][t]}},Yt=function(){this[M]>0&&(this[f][M]=this[M]),this[f][k]&&this.reversed===!0&&(Pt.call(this),this.reversed=!1),this[w]=!1,setTimeout(function(){i[a]||tt()},48)},Xt=function(t){var e=r.getAttribute(X);e&&"scroll"===e&&t.preventDefault()},Et=function(){"scroll"in this[v]&&r.getAttribute(X)&&(document[A](nt,Xt,!1),document[A](rt,Xt,!1),r.removeAttribute(X))},Ct=function(){"scroll"in this[v]&&!r.getAttribute(X)&&(document[C](nt,Xt,!1),document[C](rt,Xt,!1),r.setAttribute(X,"scroll"))},At=function(t){return"function"==typeof t?t:"string"==typeof t?Zt[t]:void 0},Ft=function(){var t={},n=K(this[m]),r=["rotate","skew"],i=["X","Y","Z"];for(var s in this[p])if(_[u](s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||$[s];else if(a)t[s]=n[s]||$[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var c=r[o]+i[h];_[u](c)!==-1&&c in this[p]&&(t[c]=n[c]||$[c])}}else if("scroll"!==s)if("opacity"===s&&ct){var l=G(this[m],"filter");t.opacity="number"==typeof l?l:$.opacity}else B[u](s)!==-1?t[s]=G(this[m],s)||d[s]:t[s]=s in Ot?Ot[s].call(this,s,this[p][s]):0;else t[s]=this[m]===ut?e.pageYOffset||ut.scrollTop:this[m].scrollTop;for(var f in n)_[u](f)===-1||f in this[p]||(t[f]=n[f]||$[f]);if(this[p]={},Tt.call(this,t,"start"),at in this[v])for(var g in this[p][at])if("perspective"!==g)if("object"==typeof this[p][at][g])for(var w in this[p][at][g])"undefined"==typeof this[v][at][g]&&(this[v][at][g]={}),"number"==typeof this[p][at][g][w]&&"undefined"==typeof this[v][at][g][w]&&(this[v][at][g][w]=this[p][at][g][w]);else"number"==typeof this[p][at][g]&&"undefined"==typeof this[v][at][g]&&(this[v][at][g]=this[p][at][g])},Zt=e.Easing={};Zt.linear=function(t){return t},Zt.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},Zt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},Zt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},Zt.easingQuadraticIn=function(t){return t*t},Zt.easingQuadraticOut=function(t){return t*(2-t)},Zt.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},Zt.easingCubicIn=function(t){return t*t*t},Zt.easingCubicOut=function(t){return--t*t*t+1},Zt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},Zt.easingQuarticIn=function(t){return t*t*t*t},Zt.easingQuarticOut=function(t){return 1- --t*t*t*t},Zt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},Zt.easingQuinticIn=function(t){return t*t*t*t*t},Zt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},Zt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},Zt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},Zt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},Zt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},Zt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},Zt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},Zt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},Zt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},Zt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},Zt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},Zt.easingElasticIn=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)))},Zt.easingElasticOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/r)+1)},Zt.easingElasticInOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)*.5+1)},Zt.easingBounceIn=function(t){return 1-Zt.easingBounceOut(1-t)},Zt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},Zt.easingBounceInOut=function(t){return t<.5?.5*Zt.easingBounceIn(2*t):.5*Zt.easingBounceOut(2*t-1)+.5};var _t=function(t,e,n,r){this[m]="scroll"in n&&(void 0===t||null===t)?ut:t,this[w]=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[f]={};for(var i in r)this[f][i]=r[i];if(this[f].rpr=r.rpr||!1,this[g]={},this[v]={},this[p]={},Tt.call(this,n,"end"),this[f].rpr?this[p]=e:Tt.call(this,e,"start"),void 0!==this[f].perspective&&at in this[v]){var s="perspective("+parseInt(this[f].perspective)+"px)";this[v][at].perspective=s}for(var a in this[v])a in kt&&!this[f].rpr&&kt[a].call(this);this[f][T]=[],this[f][x]=At(r[x])||Zt[z[x]]||Zt.linear,this[f][M]=r[M]||z[M],this[f][O]=r[O]||z[O],this[f][k]=r[k]||z[k],this[f][y]=r[y]||z[y],this[f][I]=r[I]||z[I],this[M]=this[f][M]},St=(_t.prototype={start:function(t){Ct.call(this),this[f].rpr&&Ft.apply(this),Mt.apply(this);for(var e in this[v])e in kt&&this[f].rpr&&kt[e].call(this),this[g][e]=this[p][e];return i.push(this),this[w]=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[f][I],this._startFired||(this[f].start&&this[f].start.call(),this._startFired=!0),!s&&It(),this},play:function(){return this.paused&&this[w]&&(this.paused=!1,this[f].resume&&this[f].resume.call(),this._startTime+=n.now()-this._pauseTime,J(this),!s&&It()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this[w]&&(V(this),this.paused=!0,this._pauseTime=n.now(),this[f].pause&&this[f].pause.call()),this},stop:function(){return!this.paused&&this[w]&&(V(this),this[w]=!1,this.paused=!1,Et.call(this),this[f].stop&&this[f].stop.call(),this.stopChainedTweens(),Yt.call(this)),this},chain:function(){return this[f][T]=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[f][T][a];t0?n[I]+(n[b]||z[b]):n[I],this.tweens.push($t(t[i],e,r[i]))}),Bt=function(t,e,n,r){this.tweens=[];for(var i=[],s=0,o=t[a];s0?r[I]+(r[b]||z[b]):r[I],this.tweens.push(qt(t[s],e,n,i[s]))},$t=(St.prototype=Bt.prototype={start:function(t){t=t||n.now();for(var e=0,r=this.tweens[a];e>0||0:t[i]&&e[i]?(100*pt(t[i],e[i],n)>>0)/100:null;return r?U(s.r,s.g,s.b):s.a?h+s.r+o+s.g+o+s.b+o+s.a+a:u+s.r+o+s.g+o+s.b+a}),dt=ft.translate=lt?function(t,e,n,r){var i={};for(var s in e)i[s]=(t[s]===e[s]?e[s]:t[s]+(e[s]-t[s])*r>>0)+n;return i.x||i.y?"translate("+i.x+","+i.y+")":"translate3d("+i.translateX+","+i.translateY+","+i.translateZ+")"}:function(t,e,n,r){var i={};for(var s in e)i[s]=(t[s]===e[s]?e[s]:(100*(t[s]+(e[s]-t[s])*r)>>0)/100)+n;return i.x||i.y?"translate("+i.x+","+i.y+")":"translate3d("+i.translateX+","+i.translateY+","+i.translateZ+")"},gt=ft.rotate=function(t,e,n,r){var i={};for(var s in e)i[s]="z"===s?"rotate("+(100*(t[s]+(e[s]-t[s])*r)>>0)/100+n+")":s+"("+(100*(t[s]+(e[s]-t[s])*r)>>0)/100+n+")";return i.z?i.z:(i.rotateX||"")+(i.rotateY||"")+(i.rotateZ||"")},mt=ft.skew=function(t,e,n,r){var i={};for(var s in e)i[s]=s+"("+(10*(t[s]+(e[s]-t[s])*r)>>0)/10+n+")";return(i.skewX||"")+(i.skewY||"")},wt=ft.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},yt={},It=function(t){for(var e=0;e0)return isFinite(this[f][M])&&this[f][M]--,this[f][k]&&(this.reversed=!this.reversed,Pt.call(this)),this._startTime=this[f][k]&&!this.reversed?t+this[f][O]:t,!0;this[f].complete&&this[f].complete.call(),Xt.call(this);for(var s=0,o=this[f][T][a];s.99||i<.01?(10*pt(n,r,i)>>0)/10:pt(n,r,i)>>0)+"px"});var n=L(e),r="height"===t?l:c;return"%"===n.u?n.v*this[m][r]/100:n.v},transform:function(t,e){if(at in yt||(yt[at]=function(t,e,n,r,i,s){t[Y][e]=(n.perspective||"")+("translate"in n?dt(n.translate,r.translate,"px",i):"")+("rotate"in n?gt(n.rotate,r.rotate,"deg",i):"")+("skew"in n?mt(n.skew,r.skew,"deg",i):"")+("scale"in n?wt(n.scale,r.scale,i):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),r=L(n[0]),i=L(n[1],t3d2=L(n[2]));return{translateX:"%"===r.u?r.v*this[m][c]/100:r.v,translateY:"%"===i.u?i.v*this[m][l]/100:i.v,translateZ:"%"===t3d2.u?t3d2.v*(this[m][l]+this[m][c])/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=L(e),u=/X/.test(t)?this[m][c]/100:/Y/.test(t)?this[m][l]/100:(this[m][c]+this[m][l])/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,f="string"==typeof e?e[o](","):e,p={},v=L(f[0]),d=f[a]?L(f[1]):{v:0,u:"px"};return f instanceof Array?(p.x="%"===v.u?v.v*this[m][c]/100:v.v,p.y="%"===d.u?d.v*this[m][l]/100:d.v):(h=L(f),p.x="%"===h.u?h.v*this[m][c]/100:h.v,p.y=0),p}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var g=L(e,!0);return"rad"===g.u?H(g.v):g.v}if("rotate"===t){var w={},y=L(e,!0);return w.z="rad"===y.u?H(y.v):y.v,w}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in yt?"opacity"===t&&(t in yt||(ct?yt[t]=function(t,e,n,r,i){var s="alpha(opacity=",a=")";t[Y].filter=s+(100*pt(n,r,i)>>0)+a}:yt[t]=function(t,e,n,r,i){t[Y].opacity=(100*pt(n,r,i)>>0)/100})):yt[t]=function(t,e,n,r,i){t.scrollTop=pt(n,r,i)>>0},parseFloat(e)},colors:function(t,e){return t in yt||(yt[t]=function(t,e,n,r,i,s){t[Y][e]=vt(n,r,i,s[P])}),N(e)}},Tt=function(t,e){var n="start"===e?this[p]:this[v],r={},i={},s={},a={};for(var o in t)if(_[u](o)!==-1){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var c=0;c<3;c++){var l=h[c];/3d/.test(o)?s["translate"+l]=xt.transform.call(this,"translate"+l,t[o][c]):s["translate"+l]="translate"+l in t?xt.transform.call(this,"translate"+l,t["translate"+l]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var f=/rotate/.test(o)?"rotate":"skew",d="rotate"===f?i:r,g=0;g<3;g++){var m=h[g];void 0!==t[f+m]&&"skewZ"!==o&&(d[f+m]=xt.transform.call(this,f+m,t[f+m]))}a[f]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=xt.transform.call(this,o,t[o]));n[at]=a}else Z[u](o)!==-1?n[o]=xt.boxModel.call(this,o,t[o]):S[u](o)!==-1||"scroll"===o?n[o]=xt.unitless.call(this,o,t[o]):F[u](o)!==-1?n[o]=xt.colors.call(this,o,t[o]):o in xt&&(n[o]=xt[o].call(this,o,t[o]))},Pt=function(){if(this[f][k])for(var t in this[v]){var e=this[g][t];this[g][t]=this[v][t],this[v][t]=e,this[p][t]=this[g][t]}},Yt=function(){this[M]>0&&(this[f][M]=this[M]),this[f][k]&&this.reversed===!0&&(Pt.call(this),this.reversed=!1),this[w]=!1,setTimeout(function(){i[a]||tt()},48)},Et=function(t){var e=r.getAttribute(E);e&&"scroll"===e&&t.preventDefault()},Xt=function(){"scroll"in this[v]&&r.getAttribute(E)&&(document[A](nt,Et,!1),document[A](rt,Et,!1),r.removeAttribute(E))},Ct=function(){"scroll"in this[v]&&!r.getAttribute(E)&&(document[C](nt,Et,!1),document[C](rt,Et,!1),r.setAttribute(E,"scroll"))},At=function(t){return"function"==typeof t?t:"string"==typeof t?Zt[t]:void 0},Ft=function(){var t={},n=K(this[m]),r=["rotate","skew"],i=["X","Y","Z"];for(var s in this[p])if(_[u](s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||$[s];else if(a)t[s]=n[s]||$[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var c=r[o]+i[h];_[u](c)!==-1&&c in this[p]&&(t[c]=n[c]||$[c])}}else if("scroll"!==s)if("opacity"===s&&ct){var l=G(this[m],"filter");t.opacity="number"==typeof l?l:$.opacity}else B[u](s)!==-1?t[s]=G(this[m],s)||d[s]:t[s]=s in Ot?Ot[s].call(this,s,this[p][s]):0;else t[s]=this[m]===ut?e.pageYOffset||ut.scrollTop:this[m].scrollTop;for(var f in n)_[u](f)===-1||f in this[p]||(t[f]=n[f]||$[f]);if(this[p]={},Tt.call(this,t,"start"),at in this[v])for(var g in this[p][at])if("perspective"!==g)if("object"==typeof this[p][at][g])for(var w in this[p][at][g])"undefined"==typeof this[v][at][g]&&(this[v][at][g]={}),"number"==typeof this[p][at][g][w]&&"undefined"==typeof this[v][at][g][w]&&(this[v][at][g][w]=this[p][at][g][w]);else"number"==typeof this[p][at][g]&&"undefined"==typeof this[v][at][g]&&(this[v][at][g]=this[p][at][g])},Zt=e.Easing={};Zt.linear=function(t){return t},Zt.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},Zt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},Zt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},Zt.easingQuadraticIn=function(t){return t*t},Zt.easingQuadraticOut=function(t){return t*(2-t)},Zt.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},Zt.easingCubicIn=function(t){return t*t*t},Zt.easingCubicOut=function(t){return--t*t*t+1},Zt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},Zt.easingQuarticIn=function(t){return t*t*t*t},Zt.easingQuarticOut=function(t){return 1- --t*t*t*t},Zt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},Zt.easingQuinticIn=function(t){return t*t*t*t*t},Zt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},Zt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},Zt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},Zt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},Zt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},Zt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},Zt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},Zt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},Zt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},Zt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},Zt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},Zt.easingElasticIn=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)))},Zt.easingElasticOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/r)+1)},Zt.easingElasticInOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)*.5+1)},Zt.easingBounceIn=function(t){return 1-Zt.easingBounceOut(1-t)},Zt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},Zt.easingBounceInOut=function(t){return t<.5?.5*Zt.easingBounceIn(2*t):.5*Zt.easingBounceOut(2*t-1)+.5};var _t=function(t,e,n,r){this[m]="scroll"in n&&(void 0===t||null===t)?ut:t,this[w]=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[f]={};for(var i in r)this[f][i]=r[i];if(this[f].rpr=r.rpr||!1,this[g]={},this[v]={},this[p]={},Tt.call(this,n,"end"),this[f].rpr?this[p]=e:Tt.call(this,e,"start"),void 0!==this[f].perspective&&at in this[v]){var s="perspective("+parseInt(this[f].perspective)+"px)";this[v][at].perspective=s}for(var a in this[v])a in kt&&!this[f].rpr&&kt[a].call(this);this[f][T]=[],this[f][x]=At(r[x])||Zt[z[x]]||Zt.linear,this[f][M]=r[M]||z[M],this[f][O]=r[O]||z[O],this[f][k]=r[k]||z[k],this[f][y]=r[y]||z[y],this[f][I]=r[I]||z[I],this[M]=this[f][M]},St=(_t.prototype={start:function(t){Ct.call(this),this[f].rpr&&Ft.apply(this),Mt.apply(this);for(var e in this[v])e in kt&&this[f].rpr&&kt[e].call(this),this[g][e]=this[p][e];return i.push(this),this[w]=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[f][I],this._startFired||(this[f].start&&this[f].start.call(),this._startFired=!0),!s&&It(),this},play:function(){return this.paused&&this[w]&&(this.paused=!1,this[f].resume&&this[f].resume.call(),this._startTime+=n.now()-this._pauseTime,J(this),!s&&It()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this[w]&&(V(this),this.paused=!0,this._pauseTime=n.now(),this[f].pause&&this[f].pause.call()),this},stop:function(){return!this.paused&&this[w]&&(V(this),this[w]=!1,this.paused=!1,Xt.call(this),this[f].stop&&this[f].stop.call(),this.stopChainedTweens(),Yt.call(this)),this},chain:function(){return this[f][T]=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[f][T][a];t0?n[I]+(n[b]||z[b]):n[I],this.tweens.push($t(t[i],e,r[i]))}),Bt=function(t,e,n,r){this.tweens=[];for(var i=[],s=0,o=t[a];s0?r[I]+(r[b]||z[b]):r[I],this.tweens.push(qt(t[s],e,n,i[s]))},$t=(St.prototype=Bt.prototype={start:function(t){t=t||n.now();for(var e=0,r=this.tweens[a];e
Date: Fri, 8 Sep 2017 11:43:15 +0300
Subject: [PATCH 129/187] Update Twitter share links.

---
 about.html      | 2 +-
 api.html        | 2 +-
 attr.html       | 2 +-
 css.html        | 2 +-
 easing.html     | 2 +-
 examples.html   | 2 +-
 extend.html     | 2 +-
 features.html   | 2 +-
 index.html      | 2 +-
 options.html    | 2 +-
 properties.html | 2 +-
 start.html      | 2 +-
 svg.html        | 2 +-
 text.html       | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/about.html b/about.html
index 554354a..b3fa087 100644
--- a/about.html
+++ b/about.html
@@ -218,7 +218,7 @@
                     
         
diff --git a/api.html b/api.html
index cd34f96..ecb2335 100644
--- a/api.html
+++ b/api.html
@@ -236,7 +236,7 @@ tween2.chain(tweensCollection2.tweens);
             
 
diff --git a/attr.html b/attr.html
index 9cd7b2d..b3568ad 100644
--- a/attr.html
+++ b/attr.html
@@ -182,7 +182,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
         
 
diff --git a/css.html b/css.html
index c7cbc15..a76e8ec 100644
--- a/css.html
+++ b/css.html
@@ -206,7 +206,7 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
         
 
diff --git a/easing.html b/easing.html
index 58bd465..a72a647 100644
--- a/easing.html
+++ b/easing.html
@@ -321,7 +321,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
             
 
diff --git a/examples.html b/examples.html
index 0799cbf..9852583 100644
--- a/examples.html
+++ b/examples.html
@@ -493,7 +493,7 @@ var myMultiTween2 = KUTE.allFromTo(
         
 
diff --git a/extend.html b/extend.html
index 564ebd5..3670136 100644
--- a/extend.html
+++ b/extend.html
@@ -334,7 +334,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
 
diff --git a/features.html b/features.html
index 897874f..0ec9611 100644
--- a/features.html
+++ b/features.html
@@ -180,7 +180,7 @@
             
         
diff --git a/index.html b/index.html
index b7af5e3..a47d8fd 100644
--- a/index.html
+++ b/index.html
@@ -193,7 +193,7 @@
             
 
diff --git a/options.html b/options.html
index 6a89ea9..d49785a 100644
--- a/options.html
+++ b/options.html
@@ -186,7 +186,7 @@ KUTE.defaultOptions.duration = 1000;
             
 
diff --git a/properties.html b/properties.html
index 0fba1d0..70552f4 100644
--- a/properties.html
+++ b/properties.html
@@ -264,7 +264,7 @@
             
         
diff --git a/start.html b/start.html
index a81e324..fddeda4 100644
--- a/start.html
+++ b/start.html
@@ -151,7 +151,7 @@ define([
             
 
diff --git a/svg.html b/svg.html
index 96c21bd..fa43679 100644
--- a/svg.html
+++ b/svg.html
@@ -555,7 +555,7 @@ KUTE.fromTo(element,
         
 
diff --git a/text.html b/text.html
index 3056902..66f6f41 100644
--- a/text.html
+++ b/text.html
@@ -155,7 +155,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&
             
         

From 61929461615853ecb569c883ae26af66e3e046e9 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 29 Sep 2017 00:56:18 +0300
Subject: [PATCH 130/187] Right, changes: * fixed `scroll` tweening with new
 webkit browsers versions * removed `isMobile` for transforms and svg
 transforms for now * code cleanup

---
 assets/js/scripts.js   |  6 +++---
 index.html             |  1 -
 src/kute-attr.min.js   |  2 +-
 src/kute-css.min.js    |  2 +-
 src/kute-jquery.min.js |  2 +-
 src/kute-svg.min.js    |  2 +-
 src/kute-text.min.js   |  2 +-
 src/kute.min.js        |  2 +-
 start.html             | 26 +++++++++++++-------------
 9 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 1a1544c..b8200f7 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -26,14 +26,14 @@ function classToggles(el){
 }
 
 document.addEventListener('click', function(e){
-    var target = e.target.parentNode.tagName === 'LI' || e.target.parentNode.classList.contains('btn-group') ? e.target : e.target.parentNode, 
+    var target = e.target.parentNode.tagName === 'LI' || e.target.parentNode.classList && e.target.parentNode.classList.contains('btn-group') ? e.target : e.target.parentNode, 
         parent = target.parentNode;
     for (var i = 0, l = toggles.length; i
     
-    
 
     
     
diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index 239e336..875f1db 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | Attributes Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=p.indexOf(i)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(p.indexOf(o)===-1)if(null!==d&&b.test(d)){var y=s(d).u||s(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(/%/.test(y)?e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+A]=function(t,e,r,n,i){var u=u||e.replace(A,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+A]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=-1!==p.indexOf(i)?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(-1===p.indexOf(o))if(null!==d&&b.test(d)){var A=s(d).u||s(r[u]).u,m=/%/.test(A)?"_percent":"_"+A;o+m in e||(/%/.test(A)?e[o+m]=function(t,e,r,n,i){var u=u||e.replace(m,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+m]=function(t,e,r,n,i){var u=u||e.replace(m,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+m]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index 8ddc8d5..5955016 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | CSS Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],v=["backgroundPosition"],b=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,v),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[b[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
\ No newline at end of file
diff --git a/src/kute-jquery.min.js b/src/kute-jquery.min.js
index 9ccc043..ae52109 100644
--- a/src/kute-jquery.min.js
+++ b/src/kute-jquery.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | jQuery Plugin | MIT-License
-!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this});
\ No newline at end of file
+!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,r){return t(r,e),e});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js"),n=require("jquery");module.exports=t(n,r)}else{if(void 0===e.KUTE||void 0===e.$&&void 0===e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var n=e.jQuery||e.$,r=e.KUTE;t(n,r)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,r,n){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,r,n)},e.fn.to=function(e,r){var n=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](n,e,r)},this});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index edbaddf..3a30e12 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1),p=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);if(!(u&&u<9)){var f=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",c=e.Interpolate.coords=p?function(t,e,r,n){for(var a=[],i=0;i>0)}return a}:function(t,e,r,n){for(var a=[],i=0;i>0)/10)}return a},v=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),E(this.element,e)},i.draw=function(){return E(this.element)};var I=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},L=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/100+(o?","+(100*o>>0)/100:"")+")":"")+(p?"rotate("+(100*p>>0)/100+")":"")+(c?"skewX("+(10*c>>0)/10+")":"")+(v?"skewY("+(10*v>>0)/10+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),j.call(this,e)},i.svgTransform=function(t,e){var r={},n=L(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=j.call(this,L(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),S(this.element,e)},i.draw=function(){return S(this.element)};var N=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
diff --git a/src/kute-text.min.js b/src/kute-text.min.js
index 6a2a285..4992d93 100644
--- a/src/kute-text.min.js
+++ b/src/kute-text.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | Text Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),h=String("0123456789").split(""),f=a.concat(l,h),c=(f.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?h:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],x="",b="",d=n.substring(0),C=r.substring(0);x=""!==n?d.substring(d.length,g(i*d.length,d.length)>>0):"",b=C.substring(0,g(i*C.length,C.length)>>0),t.innerHTML=i<1?b+m+x:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index 8b18aaf..e79d246 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.3 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t,e="undefined"!=typeof global?global:window,n=e.performance,r=document.body,i=[],s=null,a="length",o="split",u="indexOf",h="replace",c="offsetWidth",l="offsetHeight",f="options",p="valuesStart",v="valuesEnd",g="valuesRepeat",m="element",w="playing",y="duration",I="delay",b="offset",M="repeat",O="repeatDelay",k="yoyo",x="easing",T="chain",P="keepHex",Y="style",E="data-tweening",X="getElementsByTagName",C="addEventListener",A="removeEventListener",F=["color","backgroundColor"],Z=["top","left","width","height"],_=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],S=["opacity"],B=F.concat(S,Z,_),$={},q=0,Q=B[a];q>0||0:t[i]&&e[i]?(100*pt(t[i],e[i],n)>>0)/100:null;return r?U(s.r,s.g,s.b):s.a?h+s.r+o+s.g+o+s.b+o+s.a+a:u+s.r+o+s.g+o+s.b+a}),dt=ft.translate=lt?function(t,e,n,r){var i={};for(var s in e)i[s]=(t[s]===e[s]?e[s]:t[s]+(e[s]-t[s])*r>>0)+n;return i.x||i.y?"translate("+i.x+","+i.y+")":"translate3d("+i.translateX+","+i.translateY+","+i.translateZ+")"}:function(t,e,n,r){var i={};for(var s in e)i[s]=(t[s]===e[s]?e[s]:(100*(t[s]+(e[s]-t[s])*r)>>0)/100)+n;return i.x||i.y?"translate("+i.x+","+i.y+")":"translate3d("+i.translateX+","+i.translateY+","+i.translateZ+")"},gt=ft.rotate=function(t,e,n,r){var i={};for(var s in e)i[s]="z"===s?"rotate("+(100*(t[s]+(e[s]-t[s])*r)>>0)/100+n+")":s+"("+(100*(t[s]+(e[s]-t[s])*r)>>0)/100+n+")";return i.z?i.z:(i.rotateX||"")+(i.rotateY||"")+(i.rotateZ||"")},mt=ft.skew=function(t,e,n,r){var i={};for(var s in e)i[s]=s+"("+(10*(t[s]+(e[s]-t[s])*r)>>0)/10+n+")";return(i.skewX||"")+(i.skewY||"")},wt=ft.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},yt={},It=function(t){for(var e=0;e0)return isFinite(this[f][M])&&this[f][M]--,this[f][k]&&(this.reversed=!this.reversed,Pt.call(this)),this._startTime=this[f][k]&&!this.reversed?t+this[f][O]:t,!0;this[f].complete&&this[f].complete.call(),Xt.call(this);for(var s=0,o=this[f][T][a];s.99||i<.01?(10*pt(n,r,i)>>0)/10:pt(n,r,i)>>0)+"px"});var n=L(e),r="height"===t?l:c;return"%"===n.u?n.v*this[m][r]/100:n.v},transform:function(t,e){if(at in yt||(yt[at]=function(t,e,n,r,i,s){t[Y][e]=(n.perspective||"")+("translate"in n?dt(n.translate,r.translate,"px",i):"")+("rotate"in n?gt(n.rotate,r.rotate,"deg",i):"")+("skew"in n?mt(n.skew,r.skew,"deg",i):"")+("scale"in n?wt(n.scale,r.scale,i):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),r=L(n[0]),i=L(n[1],t3d2=L(n[2]));return{translateX:"%"===r.u?r.v*this[m][c]/100:r.v,translateY:"%"===i.u?i.v*this[m][l]/100:i.v,translateZ:"%"===t3d2.u?t3d2.v*(this[m][l]+this[m][c])/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=L(e),u=/X/.test(t)?this[m][c]/100:/Y/.test(t)?this[m][l]/100:(this[m][c]+this[m][l])/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,f="string"==typeof e?e[o](","):e,p={},v=L(f[0]),d=f[a]?L(f[1]):{v:0,u:"px"};return f instanceof Array?(p.x="%"===v.u?v.v*this[m][c]/100:v.v,p.y="%"===d.u?d.v*this[m][l]/100:d.v):(h=L(f),p.x="%"===h.u?h.v*this[m][c]/100:h.v,p.y=0),p}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var g=L(e,!0);return"rad"===g.u?H(g.v):g.v}if("rotate"===t){var w={},y=L(e,!0);return w.z="rad"===y.u?H(y.v):y.v,w}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in yt?"opacity"===t&&(t in yt||(ct?yt[t]=function(t,e,n,r,i){var s="alpha(opacity=",a=")";t[Y].filter=s+(100*pt(n,r,i)>>0)+a}:yt[t]=function(t,e,n,r,i){t[Y].opacity=(100*pt(n,r,i)>>0)/100})):yt[t]=function(t,e,n,r,i){t.scrollTop=pt(n,r,i)>>0},parseFloat(e)},colors:function(t,e){return t in yt||(yt[t]=function(t,e,n,r,i,s){t[Y][e]=vt(n,r,i,s[P])}),N(e)}},Tt=function(t,e){var n="start"===e?this[p]:this[v],r={},i={},s={},a={};for(var o in t)if(_[u](o)!==-1){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var c=0;c<3;c++){var l=h[c];/3d/.test(o)?s["translate"+l]=xt.transform.call(this,"translate"+l,t[o][c]):s["translate"+l]="translate"+l in t?xt.transform.call(this,"translate"+l,t["translate"+l]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var f=/rotate/.test(o)?"rotate":"skew",d="rotate"===f?i:r,g=0;g<3;g++){var m=h[g];void 0!==t[f+m]&&"skewZ"!==o&&(d[f+m]=xt.transform.call(this,f+m,t[f+m]))}a[f]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=xt.transform.call(this,o,t[o]));n[at]=a}else Z[u](o)!==-1?n[o]=xt.boxModel.call(this,o,t[o]):S[u](o)!==-1||"scroll"===o?n[o]=xt.unitless.call(this,o,t[o]):F[u](o)!==-1?n[o]=xt.colors.call(this,o,t[o]):o in xt&&(n[o]=xt[o].call(this,o,t[o]))},Pt=function(){if(this[f][k])for(var t in this[v]){var e=this[g][t];this[g][t]=this[v][t],this[v][t]=e,this[p][t]=this[g][t]}},Yt=function(){this[M]>0&&(this[f][M]=this[M]),this[f][k]&&this.reversed===!0&&(Pt.call(this),this.reversed=!1),this[w]=!1,setTimeout(function(){i[a]||tt()},48)},Et=function(t){var e=r.getAttribute(E);e&&"scroll"===e&&t.preventDefault()},Xt=function(){"scroll"in this[v]&&r.getAttribute(E)&&(document[A](nt,Et,!1),document[A](rt,Et,!1),r.removeAttribute(E))},Ct=function(){"scroll"in this[v]&&!r.getAttribute(E)&&(document[C](nt,Et,!1),document[C](rt,Et,!1),r.setAttribute(E,"scroll"))},At=function(t){return"function"==typeof t?t:"string"==typeof t?Zt[t]:void 0},Ft=function(){var t={},n=K(this[m]),r=["rotate","skew"],i=["X","Y","Z"];for(var s in this[p])if(_[u](s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||$[s];else if(a)t[s]=n[s]||$[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var c=r[o]+i[h];_[u](c)!==-1&&c in this[p]&&(t[c]=n[c]||$[c])}}else if("scroll"!==s)if("opacity"===s&&ct){var l=G(this[m],"filter");t.opacity="number"==typeof l?l:$.opacity}else B[u](s)!==-1?t[s]=G(this[m],s)||d[s]:t[s]=s in Ot?Ot[s].call(this,s,this[p][s]):0;else t[s]=this[m]===ut?e.pageYOffset||ut.scrollTop:this[m].scrollTop;for(var f in n)_[u](f)===-1||f in this[p]||(t[f]=n[f]||$[f]);if(this[p]={},Tt.call(this,t,"start"),at in this[v])for(var g in this[p][at])if("perspective"!==g)if("object"==typeof this[p][at][g])for(var w in this[p][at][g])"undefined"==typeof this[v][at][g]&&(this[v][at][g]={}),"number"==typeof this[p][at][g][w]&&"undefined"==typeof this[v][at][g][w]&&(this[v][at][g][w]=this[p][at][g][w]);else"number"==typeof this[p][at][g]&&"undefined"==typeof this[v][at][g]&&(this[v][at][g]=this[p][at][g])},Zt=e.Easing={};Zt.linear=function(t){return t},Zt.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},Zt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},Zt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},Zt.easingQuadraticIn=function(t){return t*t},Zt.easingQuadraticOut=function(t){return t*(2-t)},Zt.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},Zt.easingCubicIn=function(t){return t*t*t},Zt.easingCubicOut=function(t){return--t*t*t+1},Zt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},Zt.easingQuarticIn=function(t){return t*t*t*t},Zt.easingQuarticOut=function(t){return 1- --t*t*t*t},Zt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},Zt.easingQuinticIn=function(t){return t*t*t*t*t},Zt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},Zt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},Zt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},Zt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},Zt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},Zt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},Zt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},Zt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},Zt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},Zt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},Zt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},Zt.easingElasticIn=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)))},Zt.easingElasticOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/r)+1)},Zt.easingElasticInOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)*.5+1)},Zt.easingBounceIn=function(t){return 1-Zt.easingBounceOut(1-t)},Zt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},Zt.easingBounceInOut=function(t){return t<.5?.5*Zt.easingBounceIn(2*t):.5*Zt.easingBounceOut(2*t-1)+.5};var _t=function(t,e,n,r){this[m]="scroll"in n&&(void 0===t||null===t)?ut:t,this[w]=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[f]={};for(var i in r)this[f][i]=r[i];if(this[f].rpr=r.rpr||!1,this[g]={},this[v]={},this[p]={},Tt.call(this,n,"end"),this[f].rpr?this[p]=e:Tt.call(this,e,"start"),void 0!==this[f].perspective&&at in this[v]){var s="perspective("+parseInt(this[f].perspective)+"px)";this[v][at].perspective=s}for(var a in this[v])a in kt&&!this[f].rpr&&kt[a].call(this);this[f][T]=[],this[f][x]=At(r[x])||Zt[z[x]]||Zt.linear,this[f][M]=r[M]||z[M],this[f][O]=r[O]||z[O],this[f][k]=r[k]||z[k],this[f][y]=r[y]||z[y],this[f][I]=r[I]||z[I],this[M]=this[f][M]},St=(_t.prototype={start:function(t){Ct.call(this),this[f].rpr&&Ft.apply(this),Mt.apply(this);for(var e in this[v])e in kt&&this[f].rpr&&kt[e].call(this),this[g][e]=this[p][e];return i.push(this),this[w]=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[f][I],this._startFired||(this[f].start&&this[f].start.call(),this._startFired=!0),!s&&It(),this},play:function(){return this.paused&&this[w]&&(this.paused=!1,this[f].resume&&this[f].resume.call(),this._startTime+=n.now()-this._pauseTime,J(this),!s&&It()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this[w]&&(V(this),this.paused=!0,this._pauseTime=n.now(),this[f].pause&&this[f].pause.call()),this},stop:function(){return!this.paused&&this[w]&&(V(this),this[w]=!1,this.paused=!1,Xt.call(this),this[f].stop&&this[f].stop.call(),this.stopChainedTweens(),Yt.call(this)),this},chain:function(){return this[f][T]=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[f][T][a];t0?n[I]+(n[b]||z[b]):n[I],this.tweens.push($t(t[i],e,r[i]))}),Bt=function(t,e,n,r){this.tweens=[];for(var i=[],s=0,o=t[a];s0?r[I]+(r[b]||z[b]):r[I],this.tweens.push(qt(t[s],e,n,i[s]))},$t=(St.prototype=Bt.prototype={start:function(t){t=t||n.now();for(var e=0,r=this.tweens[a];e>0||0:t[r]&&e[r]?(100*K(t[r],e[r],n)>>0)/100:null;return i?_(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,n,i){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3)+n;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,n,i){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,n,i){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},nt={},it=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*K(n,i,r)>>0)/10:K(n,i,r)>>0)+"px"});var n=X(e),i="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this[f][i]/100:n.v},transform:function(t,e){if(D in nt||(nt[D]=function(t,e,n,i,r,s){t[m][e]=(n.perspective||"")+("translate"in n?J(n.translate,i.translate,"px",r):"")+("rotate"in n?V(n.rotate,i.rotate,"deg",r):"")+("skew"in n?tt(n.skew,i.skew,"deg",r):"")+("scale"in n?et(n.scale,i.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),i=X(n[0]),r=X(n[1],t3d2=X(n[2]));return{translateX:"%"===i.u?i.v*this[f].offsetWidth/100:i.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=X(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=X(c[0]),v=c[a]?X(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=X(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=X(e,!0);return"rad"===d.u?C(d.v):d.v}if("rotate"===t){var g={},w=X(e,!0);return g.z="rad"===w.u?C(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in nt?"opacity"===t&&(t in nt||(nt[t]=L?function(t,e,n,i,r){t[m].filter="alpha(opacity="+(100*K(n,i,r)>>0)+")"}:function(t,e,n,i,r){t[m].opacity=(100*K(n,i,r)>>0)/100})):nt[t]=function(t,e,n,i,r){t.scrollTop=K(n,i,r)>>0},parseFloat(e)},colors:function(t,e){return t in nt||(nt[t]=function(t,e,n,i,r,s){t[m][e]=G(n,i,r,s.keepHex)}),F(e)}},ht=function(t,e){var n="start"===e?this[c]:this[l],i={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:i,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));n[D]=a}else-1!==y[u](o)?n[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?n[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?n[o]=ut.colors.call(this,o,t[o]):o in ut&&(n[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,!r[a]&&q()},ft=function(t){var e=i.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&i.getAttribute("data-tweening")&&i.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!i.getAttribute("data-tweening")&&i.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},n=S(this[f]),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||O[s];else if(a)t[s]=n[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=i[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=n[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in n)-1===I[u](g)||g in this[c]||(t[g]=n[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),D in this[l])for(var m in this[c][D])if("perspective"!==m)if("object"==typeof this[c][D][m])for(var w in this[c][D][m])void 0===this[l][D][m]&&(this[l][D][m]={}),"number"==typeof this[c][D][m][w]&&void 0===this[l][D][m][w]&&(this[l][D][m][w]=this[c][D][m][w]);else"number"==typeof this[c][D][m]&&void 0===this[l][D][m]&&(this[l][D][m]=this[c][D][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,-n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,(t*=2)<1?n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,n,i){this[f]="scroll"in n&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in i)this[h][r]=i[r];if(this[h].rpr=i.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,n,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&D in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][D].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(i.easing)||mt[x.easing]||mt.linear,this[h][v]=i[v]||x[v],this[h].repeatDelay=i.repeatDelay||x.repeatDelay,this[h][g]=i[g]||x[g],this[h].duration=i.duration||x.duration,this[h][p]=i[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(),this._startFired=!0),!s&&it(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(),this._startTime+=n.now()-this._pauseTime,B(this),!s&&it()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=n.now(),this[h].pause&&this[h].pause.call()),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(bt(t[r],e,i[r]))}),It=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,o=t[a];s0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(Mt(t[s],e,n,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||n.now();for(var e=0,i=this.tweens[a];eWebsites
             
    In your website add the following code, the best would be to put it at the end of your body tag:
    
-            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
+            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute.min.js"></script> <!-- core KUTE.js -->
    
             
    An alternate CDN link here:
    
-            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js"></script> <!-- core KUTE.js -->
    
+            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute.min.js"></script> <!-- core KUTE.js -->
    
 
             
    The CDN repositories receive latest updates here and right here. 
                 You might also want to include the tools that you need for your project:
    
-            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
             
    Alternate CDN links:
    
-            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
             
    Your awesome animation coding would follow after these script links.
    
 
@@ -177,7 +177,7 @@ define([
     
     
 
-    
+    
 
     
     

From c977185621c9651068e35af132f78d0b2e192690 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 5 Oct 2017 12:55:29 +0300
Subject: [PATCH 131/187] Update dist files.

---
 src/kute-attr.min.js   | 4 ++--
 src/kute-css.min.js    | 2 +-
 src/kute-jquery.min.js | 2 +-
 src/kute-svg.min.js    | 2 +-
 src/kute-text.min.js   | 2 +-
 src/kute.min.js        | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index 875f1db..5fed828 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.3 | © dnp_theme | Attributes Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),u=c(this.element,i);r[i]=-1!==p.indexOf(i)?u||"rgba(0,0,0,0)":u||(/opacity/i.test(n)?1:0)}return r},o.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var n={};for(var u in r){var o=v(u),b=/(%|[a-z]+)$/,d=c(this.element,o.replace(/_+[a-z]+/,""));if(-1===p.indexOf(o))if(null!==d&&b.test(d)){var A=s(d).u||s(r[u]).u,m=/%/.test(A)?"_percent":"_"+A;o+m in e||(/%/.test(A)?e[o+m]=function(t,e,r,n,i){var u=u||e.replace(m,"");t.setAttribute(u,(100*f(r.v,n.v,i)>>0)/100+n.u)}:e[o+m]=function(t,e,r,n,i){var u=u||e.replace(m,"");t.setAttribute(u,(f(r.v,n.v,i)>>0)+n.u)}),n[o+m]=s(r[u])}else b.test(r[u])&&null!==d&&(null===d||b.test(d))||(o in e||(/opacity/i.test(u)?e[o]=function(t,e,r,n,i){t.setAttribute(e,(100*f(r,n,i)>>0)/100)}:e[o]=function(t,e,r,n,i){t.setAttribute(e,(10*f(r,n,i)>>0)/10)}),n[o]=parseFloat(r[u]));else o in e||(e[o]=function(t,e,n,i,u){t.setAttribute(e,l(n,i,u,r.keepHex))}),n[o]=a(r[u])}return n},this});
\ No newline at end of file
+// KUTE.js v1.6.5 | © dnp_theme | Attributes Plugin | MIT-License
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],d=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e){var r={};for(var n in e){var i=d(n).replace(/_+[a-z]+/,""),o=c(this.element,i);r[i]=-1!==p.indexOf(i)?o||"rgba(0,0,0,0)":o||(/opacity/i.test(n)?1:0)}return r},u.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var n={};for(var o in r){var u=d(o),v=/(%|[a-z]+)$/,b=c(this.element,u.replace(/_+[a-z]+/,""));if(-1===p.indexOf(u))if(null!==b&&v.test(b)){var m=s(b).u||s(r[o]).u,y=/%/.test(m)?"_percent":"_"+m;u+y in e||(/%/.test(m),e[u+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,(1e3*f(r.v,n.v,i)>>0)/1e3+n.u)}),n[u+y]=s(r[o])}else v.test(r[o])&&null!==b&&(null===b||v.test(b))||(u in e||(/opacity/i.test(o),e[u]=function(t,e,r,n,i){t.setAttribute(e,(1e3*f(r,n,i)>>0)/1e3)}),n[u]=parseFloat(r[o]));else u in e||(e[u]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),n[u]=a(r[o])}return n},this});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index 5955016..5edcbf2 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.3 | © dnp_theme | CSS Plugin | MIT-License
+// KUTE.js v1.6.5 | © dnp_theme | CSS Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],v=["backgroundPosition"],b=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,v),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[b[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
\ No newline at end of file
diff --git a/src/kute-jquery.min.js b/src/kute-jquery.min.js
index ae52109..bd0b283 100644
--- a/src/kute-jquery.min.js
+++ b/src/kute-jquery.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.3 | © dnp_theme | jQuery Plugin | MIT-License
+// KUTE.js v1.6.5 | © dnp_theme | jQuery Plugin | MIT-License
 !function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,r){return t(r,e),e});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js"),n=require("jquery");module.exports=t(n,r)}else{if(void 0===e.KUTE||void 0===e.$&&void 0===e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var n=e.jQuery||e.$,r=e.KUTE;t(n,r)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,r,n){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,r,n)},e.fn.to=function(e,r){var n=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](n,e,r)},this});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index 3a30e12..c27459b 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.3 | © dnp_theme | SVG Plugin | MIT-License
+// KUTE.js v1.6.5 | © dnp_theme | SVG Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),S(this.element,e)},i.draw=function(){return S(this.element)};var N=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
diff --git a/src/kute-text.min.js b/src/kute-text.min.js
index 4992d93..0cba68e 100644
--- a/src/kute-text.min.js
+++ b/src/kute-text.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.3 | © dnp_theme | Text Plugin | MIT-License
+// KUTE.js v1.6.5 | © dnp_theme | Text Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),h=String("0123456789").split(""),f=a.concat(l,h),c=(f.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?h:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],x="",b="",d=n.substring(0),C=r.substring(0);x=""!==n?d.substring(d.length,g(i*d.length,d.length)>>0):"",b=C.substring(0,g(i*C.length,C.length)>>0),t.innerHTML=i<1?b+m+x:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index e79d246..1e4f046 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.3 | © dnp_theme | Core Engine | MIT-License
+// KUTE.js v1.6.5 | © dnp_theme | Core Engine | MIT-License
 !function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t,e="undefined"!=typeof global?global:window,n=e.performance,i=document.body,r=[],s=null,a="length",o="split",u="indexOf",h="options",c="valuesStart",l="valuesEnd",f="element",p="delay",v="repeat",g="yoyo",m="style",w=["color","backgroundColor"],y=["top","left","width","height"],I=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],b=["opacity"],M=w.concat(b,y,I),O={},k=0,T=M[a];k>0||0:t[r]&&e[r]?(100*K(t[r],e[r],n)>>0)/100:null;return i?_(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,n,i){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3)+n;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,n,i){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,n,i){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},nt={},it=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*K(n,i,r)>>0)/10:K(n,i,r)>>0)+"px"});var n=X(e),i="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this[f][i]/100:n.v},transform:function(t,e){if(D in nt||(nt[D]=function(t,e,n,i,r,s){t[m][e]=(n.perspective||"")+("translate"in n?J(n.translate,i.translate,"px",r):"")+("rotate"in n?V(n.rotate,i.rotate,"deg",r):"")+("skew"in n?tt(n.skew,i.skew,"deg",r):"")+("scale"in n?et(n.scale,i.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),i=X(n[0]),r=X(n[1],t3d2=X(n[2]));return{translateX:"%"===i.u?i.v*this[f].offsetWidth/100:i.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=X(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=X(c[0]),v=c[a]?X(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=X(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=X(e,!0);return"rad"===d.u?C(d.v):d.v}if("rotate"===t){var g={},w=X(e,!0);return g.z="rad"===w.u?C(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in nt?"opacity"===t&&(t in nt||(nt[t]=L?function(t,e,n,i,r){t[m].filter="alpha(opacity="+(100*K(n,i,r)>>0)+")"}:function(t,e,n,i,r){t[m].opacity=(100*K(n,i,r)>>0)/100})):nt[t]=function(t,e,n,i,r){t.scrollTop=K(n,i,r)>>0},parseFloat(e)},colors:function(t,e){return t in nt||(nt[t]=function(t,e,n,i,r,s){t[m][e]=G(n,i,r,s.keepHex)}),F(e)}},ht=function(t,e){var n="start"===e?this[c]:this[l],i={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:i,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));n[D]=a}else-1!==y[u](o)?n[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?n[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?n[o]=ut.colors.call(this,o,t[o]):o in ut&&(n[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,!r[a]&&q()},ft=function(t){var e=i.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&i.getAttribute("data-tweening")&&i.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!i.getAttribute("data-tweening")&&i.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},n=S(this[f]),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||O[s];else if(a)t[s]=n[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=i[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=n[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in n)-1===I[u](g)||g in this[c]||(t[g]=n[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),D in this[l])for(var m in this[c][D])if("perspective"!==m)if("object"==typeof this[c][D][m])for(var w in this[c][D][m])void 0===this[l][D][m]&&(this[l][D][m]={}),"number"==typeof this[c][D][m][w]&&void 0===this[l][D][m][w]&&(this[l][D][m][w]=this[c][D][m][w]);else"number"==typeof this[c][D][m]&&void 0===this[l][D][m]&&(this[l][D][m]=this[c][D][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,-n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,(t*=2)<1?n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,n,i){this[f]="scroll"in n&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in i)this[h][r]=i[r];if(this[h].rpr=i.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,n,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&D in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][D].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(i.easing)||mt[x.easing]||mt.linear,this[h][v]=i[v]||x[v],this[h].repeatDelay=i.repeatDelay||x.repeatDelay,this[h][g]=i[g]||x[g],this[h].duration=i.duration||x.duration,this[h][p]=i[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(),this._startFired=!0),!s&&it(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(),this._startTime+=n.now()-this._pauseTime,B(this),!s&&it()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=n.now(),this[h].pause&&this[h].pause.call()),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(bt(t[r],e,i[r]))}),It=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,o=t[a];s0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(Mt(t[s],e,n,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||n.now();for(var e=0,i=this.tweens[a];e
Date: Thu, 5 Oct 2017 12:57:13 +0300
Subject: [PATCH 132/187] Update start.html

---
 start.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/start.html b/start.html
index 10a4242..9db5945 100644
--- a/start.html
+++ b/start.html
@@ -118,24 +118,24 @@ define([
 
             
    Websites
    
             
    In your website add the following code, the best would be to put it at the end of your body tag:
    
-            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute.min.js"></script> <!-- core KUTE.js -->
    
+            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute.min.js"></script> <!-- core KUTE.js -->
    
             
    An alternate CDN link here:
    
-            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute.min.js"></script> <!-- core KUTE.js -->
    
+            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute.min.js"></script> <!-- core KUTE.js -->
    
 
             
    The CDN repositories receive latest updates here and right here. 
                 You might also want to include the tools that you need for your project:
    
-            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.3/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
             
    Alternate CDN links:
    
-            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.3/kute-attr.min.js"></script> <!-- Attributes Plugin -->
+            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
    
             
    Your awesome animation coding would follow after these script links.
    
 
@@ -177,7 +177,7 @@ define([
     
     
 
-    
+    
 
     
     

From d33b3b313b56cc2ed7b303d6198667e716213cc0 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 19 Jul 2018 08:39:11 +0300
Subject: [PATCH 133/187] A possible fix for #81

---
 src/kute-attr.min.js   | 2 +-
 src/kute-css.min.js    | 2 +-
 src/kute-jquery.min.js | 2 +-
 src/kute-svg.min.js    | 2 +-
 src/kute-text.min.js   | 2 +-
 src/kute.min.js        | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
index 5fed828..e2fc9bc 100644
--- a/src/kute-attr.min.js
+++ b/src/kute-attr.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.5 | © dnp_theme | Attributes Plugin | MIT-License
+// KUTE.js v1.6.6 | © dnp_theme | Attributes Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],d=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e){var r={};for(var n in e){var i=d(n).replace(/_+[a-z]+/,""),o=c(this.element,i);r[i]=-1!==p.indexOf(i)?o||"rgba(0,0,0,0)":o||(/opacity/i.test(n)?1:0)}return r},u.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var n={};for(var o in r){var u=d(o),v=/(%|[a-z]+)$/,b=c(this.element,u.replace(/_+[a-z]+/,""));if(-1===p.indexOf(u))if(null!==b&&v.test(b)){var m=s(b).u||s(r[o]).u,y=/%/.test(m)?"_percent":"_"+m;u+y in e||(/%/.test(m),e[u+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,(1e3*f(r.v,n.v,i)>>0)/1e3+n.u)}),n[u+y]=s(r[o])}else v.test(r[o])&&null!==b&&(null===b||v.test(b))||(u in e||(/opacity/i.test(o),e[u]=function(t,e,r,n,i){t.setAttribute(e,(1e3*f(r,n,i)>>0)/1e3)}),n[u]=parseFloat(r[o]));else u in e||(e[u]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),n[u]=a(r[o])}return n},this});
\ No newline at end of file
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
index 5edcbf2..16f87c8 100644
--- a/src/kute-css.min.js
+++ b/src/kute-css.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.5 | © dnp_theme | CSS Plugin | MIT-License
+// KUTE.js v1.6.6 | © dnp_theme | CSS Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],v=["backgroundPosition"],b=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,v),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[b[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
\ No newline at end of file
diff --git a/src/kute-jquery.min.js b/src/kute-jquery.min.js
index bd0b283..13eaaac 100644
--- a/src/kute-jquery.min.js
+++ b/src/kute-jquery.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.5 | © dnp_theme | jQuery Plugin | MIT-License
+// KUTE.js v1.6.6 | © dnp_theme | jQuery Plugin | MIT-License
 !function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,r){return t(r,e),e});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js"),n=require("jquery");module.exports=t(n,r)}else{if(void 0===e.KUTE||void 0===e.$&&void 0===e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var n=e.jQuery||e.$,r=e.KUTE;t(n,r)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,r,n){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,r,n)},e.fn.to=function(e,r){var n=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](n,e,r)},this});
\ No newline at end of file
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index c27459b..c567aa9 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.5 | © dnp_theme | SVG Plugin | MIT-License
+// KUTE.js v1.6.6 | © dnp_theme | SVG Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),S(this.element,e)},i.draw=function(){return S(this.element)};var N=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
diff --git a/src/kute-text.min.js b/src/kute-text.min.js
index 0cba68e..7456047 100644
--- a/src/kute-text.min.js
+++ b/src/kute-text.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.5 | © dnp_theme | Text Plugin | MIT-License
+// KUTE.js v1.6.6 | © dnp_theme | Text Plugin | MIT-License
 !function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),h=String("0123456789").split(""),f=a.concat(l,h),c=(f.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?h:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],x="",b="",d=n.substring(0),C=r.substring(0);x=""!==n?d.substring(d.length,g(i*d.length,d.length)>>0):"",b=C.substring(0,g(i*C.length,C.length)>>0),t.innerHTML=i<1?b+m+x:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index 1e4f046..9b539e4 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.5 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t,e="undefined"!=typeof global?global:window,n=e.performance,i=document.body,r=[],s=null,a="length",o="split",u="indexOf",h="options",c="valuesStart",l="valuesEnd",f="element",p="delay",v="repeat",g="yoyo",m="style",w=["color","backgroundColor"],y=["top","left","width","height"],I=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],b=["opacity"],M=w.concat(b,y,I),O={},k=0,T=M[a];k>0||0:t[r]&&e[r]?(100*K(t[r],e[r],n)>>0)/100:null;return i?_(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,n,i){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3)+n;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,n,i){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,n,i){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},nt={},it=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*K(n,i,r)>>0)/10:K(n,i,r)>>0)+"px"});var n=X(e),i="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this[f][i]/100:n.v},transform:function(t,e){if(D in nt||(nt[D]=function(t,e,n,i,r,s){t[m][e]=(n.perspective||"")+("translate"in n?J(n.translate,i.translate,"px",r):"")+("rotate"in n?V(n.rotate,i.rotate,"deg",r):"")+("skew"in n?tt(n.skew,i.skew,"deg",r):"")+("scale"in n?et(n.scale,i.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),i=X(n[0]),r=X(n[1],t3d2=X(n[2]));return{translateX:"%"===i.u?i.v*this[f].offsetWidth/100:i.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=X(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=X(c[0]),v=c[a]?X(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=X(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=X(e,!0);return"rad"===d.u?C(d.v):d.v}if("rotate"===t){var g={},w=X(e,!0);return g.z="rad"===w.u?C(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in nt?"opacity"===t&&(t in nt||(nt[t]=L?function(t,e,n,i,r){t[m].filter="alpha(opacity="+(100*K(n,i,r)>>0)+")"}:function(t,e,n,i,r){t[m].opacity=(100*K(n,i,r)>>0)/100})):nt[t]=function(t,e,n,i,r){t.scrollTop=K(n,i,r)>>0},parseFloat(e)},colors:function(t,e){return t in nt||(nt[t]=function(t,e,n,i,r,s){t[m][e]=G(n,i,r,s.keepHex)}),F(e)}},ht=function(t,e){var n="start"===e?this[c]:this[l],i={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:i,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));n[D]=a}else-1!==y[u](o)?n[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?n[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?n[o]=ut.colors.call(this,o,t[o]):o in ut&&(n[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,!r[a]&&q()},ft=function(t){var e=i.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&i.getAttribute("data-tweening")&&i.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!i.getAttribute("data-tweening")&&i.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},n=S(this[f]),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||O[s];else if(a)t[s]=n[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=i[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=n[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in n)-1===I[u](g)||g in this[c]||(t[g]=n[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),D in this[l])for(var m in this[c][D])if("perspective"!==m)if("object"==typeof this[c][D][m])for(var w in this[c][D][m])void 0===this[l][D][m]&&(this[l][D][m]={}),"number"==typeof this[c][D][m][w]&&void 0===this[l][D][m][w]&&(this[l][D][m][w]=this[c][D][m][w]);else"number"==typeof this[c][D][m]&&void 0===this[l][D][m]&&(this[l][D][m]=this[c][D][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,-n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,(t*=2)<1?n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,n,i){this[f]="scroll"in n&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in i)this[h][r]=i[r];if(this[h].rpr=i.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,n,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&D in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][D].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(i.easing)||mt[x.easing]||mt.linear,this[h][v]=i[v]||x[v],this[h].repeatDelay=i.repeatDelay||x.repeatDelay,this[h][g]=i[g]||x[g],this[h].duration=i.duration||x.duration,this[h][p]=i[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(),this._startFired=!0),!s&&it(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(),this._startTime+=n.now()-this._pauseTime,B(this),!s&&it()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=n.now(),this[h].pause&&this[h].pause.call()),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(bt(t[r],e,i[r]))}),It=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,o=t[a];s0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(Mt(t[s],e,n,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||n.now();for(var e=0,i=this.tweens[a];e>0||0:t[r]&&e[r]?(100*K(t[r],e[r],n)>>0)/100:null;return i?_(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,n,i){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3)+n;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,n,i){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,n,i){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},nt={},it=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*K(n,i,r)>>0)/10:K(n,i,r)>>0)+"px"});var n=X(e),i="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this[f][i]/100:n.v},transform:function(t,e){if(D in nt||(nt[D]=function(t,e,n,i,r,s){t[m][e]=(n.perspective||"")+("translate"in n?J(n.translate,i.translate,"px",r):"")+("rotate"in n?V(n.rotate,i.rotate,"deg",r):"")+("skew"in n?tt(n.skew,i.skew,"deg",r):"")+("scale"in n?et(n.scale,i.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),i=X(n[0]),r=X(n[1],t3d2=X(n[2]));return{translateX:"%"===i.u?i.v*this[f].offsetWidth/100:i.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=X(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=X(c[0]),v=c[a]?X(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=X(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=X(e,!0);return"rad"===d.u?C(d.v):d.v}if("rotate"===t){var g={},w=X(e,!0);return g.z="rad"===w.u?C(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in nt?"opacity"===t&&(t in nt||(nt[t]=L?function(t,e,n,i,r){t[m].filter="alpha(opacity="+(100*K(n,i,r)>>0)+")"}:function(t,e,n,i,r){t[m].opacity=(100*K(n,i,r)>>0)/100})):nt[t]=function(t,e,n,i,r){t.scrollTop=K(n,i,r)>>0},parseFloat(e)},colors:function(t,e){return t in nt||(nt[t]=function(t,e,n,i,r,s){t[m][e]=G(n,i,r,s.keepHex)}),F(e)}},ht=function(t,e){var n="start"===e?this[c]:this[l],i={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:i,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));n[D]=a}else-1!==y[u](o)?n[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?n[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?n[o]=ut.colors.call(this,o,t[o]):o in ut&&(n[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,q()},ft=function(t){var e=i.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&i.getAttribute("data-tweening")&&i.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!i.getAttribute("data-tweening")&&i.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},n=S(this[f]),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||O[s];else if(a)t[s]=n[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=i[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=n[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in n)-1===I[u](g)||g in this[c]||(t[g]=n[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),D in this[l])for(var m in this[c][D])if("perspective"!==m)if("object"==typeof this[c][D][m])for(var w in this[c][D][m])void 0===this[l][D][m]&&(this[l][D][m]={}),"number"==typeof this[c][D][m][w]&&void 0===this[l][D][m][w]&&(this[l][D][m][w]=this[c][D][m][w]);else"number"==typeof this[c][D][m]&&void 0===this[l][D][m]&&(this[l][D][m]=this[c][D][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,-n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,(t*=2)<1?n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,n,i){this[f]="scroll"in n&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in i)this[h][r]=i[r];if(this[h].rpr=i.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,n,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&D in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][D].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(i.easing)||mt[x.easing]||mt.linear,this[h][v]=i[v]||x[v],this[h].repeatDelay=i.repeatDelay||x.repeatDelay,this[h][g]=i[g]||x[g],this[h].duration=i.duration||x.duration,this[h][p]=i[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(),this._startFired=!0),!s&&it(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(),this._startTime+=n.now()-this._pauseTime,B(this),!s&&it()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=n.now(),this[h].pause&&this[h].pause.call()),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(bt(t[r],e,i[r]))}),It=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,o=t[a];s0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(Mt(t[s],e,n,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||n.now();for(var e=0,i=this.tweens[a];e
Date: Thu, 19 Jul 2018 09:25:29 +0300
Subject: [PATCH 134/187] Added callback reference #73

---
 src/kute.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute.min.js b/src/kute.min.js
index 9b539e4..4ef5834 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.6 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t,e="undefined"!=typeof global?global:window,n=e.performance,i=document.body,r=[],s=null,a="length",o="split",u="indexOf",h="options",c="valuesStart",l="valuesEnd",f="element",p="delay",v="repeat",g="yoyo",m="style",w=["color","backgroundColor"],y=["top","left","width","height"],I=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],b=["opacity"],M=w.concat(b,y,I),O={},k=0,T=M[a];k>0||0:t[r]&&e[r]?(100*K(t[r],e[r],n)>>0)/100:null;return i?_(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,n,i){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3)+n;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,n,i){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,n,i){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*i)>>0)/1e3+n+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"},nt={},it=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*K(n,i,r)>>0)/10:K(n,i,r)>>0)+"px"});var n=X(e),i="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this[f][i]/100:n.v},transform:function(t,e){if(D in nt||(nt[D]=function(t,e,n,i,r,s){t[m][e]=(n.perspective||"")+("translate"in n?J(n.translate,i.translate,"px",r):"")+("rotate"in n?V(n.rotate,i.rotate,"deg",r):"")+("skew"in n?tt(n.skew,i.skew,"deg",r):"")+("scale"in n?et(n.scale,i.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var n=e[o](","),i=X(n[0]),r=X(n[1],t3d2=X(n[2]));return{translateX:"%"===i.u?i.v*this[f].offsetWidth/100:i.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=X(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=X(c[0]),v=c[a]?X(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=X(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=X(e,!0);return"rad"===d.u?C(d.v):d.v}if("rotate"===t){var g={},w=X(e,!0);return g.z="rad"===w.u?C(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in nt?"opacity"===t&&(t in nt||(nt[t]=L?function(t,e,n,i,r){t[m].filter="alpha(opacity="+(100*K(n,i,r)>>0)+")"}:function(t,e,n,i,r){t[m].opacity=(100*K(n,i,r)>>0)/100})):nt[t]=function(t,e,n,i,r){t.scrollTop=K(n,i,r)>>0},parseFloat(e)},colors:function(t,e){return t in nt||(nt[t]=function(t,e,n,i,r,s){t[m][e]=G(n,i,r,s.keepHex)}),F(e)}},ht=function(t,e){var n="start"===e?this[c]:this[l],i={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:i,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));n[D]=a}else-1!==y[u](o)?n[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?n[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?n[o]=ut.colors.call(this,o,t[o]):o in ut&&(n[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,q()},ft=function(t){var e=i.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&i.getAttribute("data-tweening")&&i.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!i.getAttribute("data-tweening")&&i.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},n=S(this[f]),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||O[s];else if(a)t[s]=n[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=i[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=n[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in n)-1===I[u](g)||g in this[c]||(t[g]=n[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),D in this[l])for(var m in this[c][D])if("perspective"!==m)if("object"==typeof this[c][D][m])for(var w in this[c][D][m])void 0===this[l][D][m]&&(this[l][D][m]={}),"number"==typeof this[c][D][m][w]&&void 0===this[l][D][m][w]&&(this[l][D][m][w]=this[c][D][m][w]);else"number"==typeof this[c][D][m]&&void 0===this[l][D][m]&&(this[l][D][m]=this[c][D][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,-n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,n=.1;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=.1):e=.4*Math.asin(1/n)/Math.PI*2,(t*=2)<1?n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,n,i){this[f]="scroll"in n&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in i)this[h][r]=i[r];if(this[h].rpr=i.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,n,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&D in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][D].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(i.easing)||mt[x.easing]||mt.linear,this[h][v]=i[v]||x[v],this[h].repeatDelay=i.repeatDelay||x.repeatDelay,this[h][g]=i[g]||x[g],this[h].duration=i.duration||x.duration,this[h][p]=i[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||n.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(),this._startFired=!0),!s&&it(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(),this._startTime+=n.now()-this._pauseTime,B(this),!s&&it()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=n.now(),this[h].pause&&this[h].pause.call()),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(bt(t[r],e,i[r]))}),It=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,o=t[a];s0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(Mt(t[s],e,n,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||n.now();for(var e=0,i=this.tweens[a];e>0||0:t[r]&&e[r]?(100*K(t[r],e[r],i)>>0)/100:null;return n?_(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,i,n){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3)+i;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,i,n){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,i,n){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,i){return"scale("+(1e3*(t+(e-t)*i)>>0)/1e3+")"},it={},nt=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(this),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*K(i,n,r)>>0)/10:K(i,n,r)>>0)+"px"});var i=X(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===i.u?i.v*this[f][n]/100:i.v},transform:function(t,e){if(D in it||(it[D]=function(t,e,i,n,r,s){t[m][e]=(i.perspective||"")+("translate"in i?J(i.translate,n.translate,"px",r):"")+("rotate"in i?V(i.rotate,n.rotate,"deg",r):"")+("skew"in i?tt(i.skew,n.skew,"deg",r):"")+("scale"in i?et(i.scale,n.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var i=e[o](","),n=X(i[0]),r=X(i[1],t3d2=X(i[2]));return{translateX:"%"===n.u?n.v*this[f].offsetWidth/100:n.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=X(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=X(c[0]),v=c[a]?X(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=X(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=X(e,!0);return"rad"===d.u?C(d.v):d.v}if("rotate"===t){var g={},w=X(e,!0);return g.z="rad"===w.u?C(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in it?"opacity"===t&&(t in it||(it[t]=L?function(t,e,i,n,r){t[m].filter="alpha(opacity="+(100*K(i,n,r)>>0)+")"}:function(t,e,i,n,r){t[m].opacity=(100*K(i,n,r)>>0)/100})):it[t]=function(t,e,i,n,r){t.scrollTop=K(i,n,r)>>0},parseFloat(e)},colors:function(t,e){return t in it||(it[t]=function(t,e,i,n,r,s){t[m][e]=G(i,n,r,s.keepHex)}),F(e)}},ht=function(t,e){var i="start"===e?this[c]:this[l],n={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:n,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));i[D]=a}else-1!==y[u](o)?i[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?i[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?i[o]=ut.colors.call(this,o,t[o]):o in ut&&(i[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,q()},ft=function(t){var e=n.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&n.getAttribute("data-tweening")&&n.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!n.getAttribute("data-tweening")&&n.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},i=S(this[f]),n=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=i.translate3d||O[s];else if(a)t[s]=i[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=n[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=i[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in i)-1===I[u](g)||g in this[c]||(t[g]=i[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),D in this[l])for(var m in this[c][D])if("perspective"!==m)if("object"==typeof this[c][D][m])for(var w in this[c][D][m])void 0===this[l][D][m]&&(this[l][D][m]={}),"number"==typeof this[c][D][m][w]&&void 0===this[l][D][m][w]&&(this[l][D][m][w]=this[c][D][m][w]);else"number"==typeof this[c][D][m]&&void 0===this[l][D][m]&&(this[l][D][m]=this[c][D][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,-i*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,i*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,(t*=2)<1?i*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:i*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,i,n){this[f]="scroll"in i&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in n)this[h][r]=n[r];if(this[h].rpr=n.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,i,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&D in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][D].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(n.easing)||mt[x.easing]||mt.linear,this[h][v]=n[v]||x[v],this[h].repeatDelay=n.repeatDelay||x.repeatDelay,this[h][g]=n[g]||x[g],this[h].duration=n.duration||x.duration,this[h][p]=n[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||i.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(this),this._startFired=!0),!s&&nt(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(this),this._startTime+=i.now()-this._pauseTime,B(this),!s&&nt()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=i.now(),this[h].pause&&this[h].pause.call(this)),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(this),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(bt(t[r],e,n[r]))}),It=function(t,e,i,n){this.tweens=[];for(var r=[],s=0,o=t[a];s0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(Mt(t[s],e,i,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||i.now();for(var e=0,n=this.tweens[a];e
Date: Thu, 18 Oct 2018 11:47:43 +0300
Subject: [PATCH 135/187] Fix SVG Plugin function `getPolyLength` for
 `` elements.

---
 src/kute-svg.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index c567aa9..5c2dc14 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.6 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),S(this.element,e)},i.draw=function(){return S(this.element)};var N=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),N(this.element,e)},i.draw=function(){return N(this.element)};var S=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file

From 1e5deb1f1cddd0634286ae04afd6182610a73ad0 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 18 Oct 2018 12:09:27 +0300
Subject: [PATCH 136/187] Typo

---
 src/kute-svg.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index 5c2dc14..2cf6726 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.6 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),N(this.element,e)},i.draw=function(){return N(this.element)};var S=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),N(this.element,e)},i.draw=function(){return N(this.element)};var S=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file

From 52bfc84ef7b865af4baac356ac14c86f8f811e6e Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 19 Oct 2018 08:47:51 +0300
Subject: [PATCH 137/187] Another typo.

---
 src/kute-svg.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index 2cf6726..ea8c8b7 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.6 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),N(this.element,e)},i.draw=function(){return N(this.element)};var S=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),N(this.element,e)},i.draw=function(){return N(this.element)};var S=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file

From 2f1fed31e35032992c3d87291ce5c3c8cc2cdabc Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 19 Oct 2018 08:56:10 +0300
Subject: [PATCH 138/187] Cleanup

---
 src/kute-svg.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
index ea8c8b7..0d9e0a7 100644
--- a/src/kute-svg.min.js
+++ b/src/kute-svg.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.6 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),N(this.element,e)},i.draw=function(){return N(this.element)};var S=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
+!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),N(this.element,e)},i.draw=function(){return N(this.element)};var S=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file

From 96d7f8952ab88de83b4a87742b851bba56c44cbd Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 5 Nov 2018 13:27:08 +0200
Subject: [PATCH 139/187] Trying to solve scroll with EDGE/Safari

---
 src/kute.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/kute.min.js b/src/kute.min.js
index 4ef5834..b1fe571 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js v1.6.6 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t,e="undefined"!=typeof global?global:window,i=e.performance,n=document.body,r=[],s=null,a="length",o="split",u="indexOf",h="options",c="valuesStart",l="valuesEnd",f="element",p="delay",v="repeat",g="yoyo",m="style",w=["color","backgroundColor"],y=["top","left","width","height"],I=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],b=["opacity"],M=w.concat(b,y,I),O={},k=0,T=M[a];k>0||0:t[r]&&e[r]?(100*K(t[r],e[r],i)>>0)/100:null;return n?_(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,i,n){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3)+i;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,i,n){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,i,n){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,i){return"scale("+(1e3*(t+(e-t)*i)>>0)/1e3+")"},it={},nt=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(this),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*K(i,n,r)>>0)/10:K(i,n,r)>>0)+"px"});var i=X(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===i.u?i.v*this[f][n]/100:i.v},transform:function(t,e){if(D in it||(it[D]=function(t,e,i,n,r,s){t[m][e]=(i.perspective||"")+("translate"in i?J(i.translate,n.translate,"px",r):"")+("rotate"in i?V(i.rotate,n.rotate,"deg",r):"")+("skew"in i?tt(i.skew,n.skew,"deg",r):"")+("scale"in i?et(i.scale,n.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var i=e[o](","),n=X(i[0]),r=X(i[1],t3d2=X(i[2]));return{translateX:"%"===n.u?n.v*this[f].offsetWidth/100:n.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=X(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=X(c[0]),v=c[a]?X(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=X(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=X(e,!0);return"rad"===d.u?C(d.v):d.v}if("rotate"===t){var g={},w=X(e,!0);return g.z="rad"===w.u?C(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in it?"opacity"===t&&(t in it||(it[t]=L?function(t,e,i,n,r){t[m].filter="alpha(opacity="+(100*K(i,n,r)>>0)+")"}:function(t,e,i,n,r){t[m].opacity=(100*K(i,n,r)>>0)/100})):it[t]=function(t,e,i,n,r){t.scrollTop=K(i,n,r)>>0},parseFloat(e)},colors:function(t,e){return t in it||(it[t]=function(t,e,i,n,r,s){t[m][e]=G(i,n,r,s.keepHex)}),F(e)}},ht=function(t,e){var i="start"===e?this[c]:this[l],n={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:n,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));i[D]=a}else-1!==y[u](o)?i[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?i[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?i[o]=ut.colors.call(this,o,t[o]):o in ut&&(i[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,q()},ft=function(t){var e=n.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&n.getAttribute("data-tweening")&&n.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!n.getAttribute("data-tweening")&&n.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},i=S(this[f]),n=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=i.translate3d||O[s];else if(a)t[s]=i[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=n[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=i[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in i)-1===I[u](g)||g in this[c]||(t[g]=i[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),D in this[l])for(var m in this[c][D])if("perspective"!==m)if("object"==typeof this[c][D][m])for(var w in this[c][D][m])void 0===this[l][D][m]&&(this[l][D][m]={}),"number"==typeof this[c][D][m][w]&&void 0===this[l][D][m][w]&&(this[l][D][m][w]=this[c][D][m][w]);else"number"==typeof this[c][D][m]&&void 0===this[l][D][m]&&(this[l][D][m]=this[c][D][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,-i*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,i*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,(t*=2)<1?i*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:i*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,i,n){this[f]="scroll"in i&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in n)this[h][r]=n[r];if(this[h].rpr=n.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,i,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&D in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][D].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(n.easing)||mt[x.easing]||mt.linear,this[h][v]=n[v]||x[v],this[h].repeatDelay=n.repeatDelay||x.repeatDelay,this[h][g]=n[g]||x[g],this[h].duration=n.duration||x.duration,this[h][p]=n[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||i.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(this),this._startFired=!0),!s&&nt(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(this),this._startTime+=i.now()-this._pauseTime,B(this),!s&&nt()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=i.now(),this[h].pause&&this[h].pause.call(this)),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(this),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(bt(t[r],e,n[r]))}),It=function(t,e,i,n){this.tweens=[];for(var r=[],s=0,o=t[a];s0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(Mt(t[s],e,i,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||i.now();for(var e=0,n=this.tweens[a];e>0||0:t[r]&&e[r]?(100*G(t[r],e[r],i)>>0)/100:null;return n?A(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,i,n){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3)+i;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,i,n){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,i,n){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,i){return"scale("+(1e3*(t+(e-t)*i)>>0)/1e3+")"},it={},nt=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(this),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*G(i,n,r)>>0)/10:G(i,n,r)>>0)+"px"});var i=C(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===i.u?i.v*this[f][n]/100:i.v},transform:function(t,e){if(W in it||(it[W]=function(t,e,i,n,r,s){t[m][e]=(i.perspective||"")+("translate"in i?J(i.translate,n.translate,"px",r):"")+("rotate"in i?V(i.rotate,n.rotate,"deg",r):"")+("skew"in i?tt(i.skew,n.skew,"deg",r):"")+("scale"in i?et(i.scale,n.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var i=e[o](","),n=C(i[0]),r=C(i[1],t3d2=C(i[2]));return{translateX:"%"===n.u?n.v*this[f].offsetWidth/100:n.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=C(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=C(c[0]),v=c[a]?C(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=C(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=C(e,!0);return"rad"===d.u?X(d.v):d.v}if("rotate"===t){var g={},w=C(e,!0);return g.z="rad"===w.u?X(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in it?"opacity"===t&&(t in it||(it[t]=L?function(t,e,i,n,r){t[m].filter="alpha(opacity="+(100*G(i,n,r)>>0)+")"}:function(t,e,i,n,r){t[m].opacity=(100*G(i,n,r)>>0)/100})):it[t]=function(t,e,i,n,r){t.scrollTop=G(i,n,r)>>0},parseFloat(e)},colors:function(t,e){return t in it||(it[t]=function(t,e,i,n,r,s){t[m][e]=K(i,n,r,s.keepHex)}),F(e)}},ht=function(t,e){var i="start"===e?this[c]:this[l],n={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:n,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));i[W]=a}else-1!==y[u](o)?i[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?i[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?i[o]=ut.colors.call(this,o,t[o]):o in ut&&(i[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,q()},ft=function(t){var e=n.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&n.getAttribute("data-tweening")&&n.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!n.getAttribute("data-tweening")&&n.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},i=S(this[f]),n=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=i.translate3d||O[s];else if(a)t[s]=i[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=n[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=i[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in i)-1===I[u](g)||g in this[c]||(t[g]=i[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),W in this[l])for(var m in this[c][W])if("perspective"!==m)if("object"==typeof this[c][W][m])for(var w in this[c][W][m])void 0===this[l][W][m]&&(this[l][W][m]={}),"number"==typeof this[c][W][m][w]&&void 0===this[l][W][m][w]&&(this[l][W][m][w]=this[c][W][m][w]);else"number"==typeof this[c][W][m]&&void 0===this[l][W][m]&&(this[l][W][m]=this[c][W][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,-i*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,i*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,(t*=2)<1?i*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:i*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,i,n){this[f]="scroll"in i&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in n)this[h][r]=n[r];if(this[h].rpr=n.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,i,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&W in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][W].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(n.easing)||mt[x.easing]||mt.linear,this[h][v]=n[v]||x[v],this[h].repeatDelay=n.repeatDelay||x.repeatDelay,this[h][g]=n[g]||x[g],this[h].duration=n.duration||x.duration,this[h][p]=n[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||i.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(this),this._startFired=!0),!s&&nt(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(this),this._startTime+=i.now()-this._pauseTime,B(this),!s&&nt()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=i.now(),this[h].pause&&this[h].pause.call(this)),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(this),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(bt(t[r],e,n[r]))}),It=function(t,e,i,n){this.tweens=[];for(var r=[],s=0,o=t[a];s0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(Mt(t[s],e,i,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||i.now();for(var e=0,n=this.tweens[a];e
Date: Fri, 1 Feb 2019 12:06:43 +0200
Subject: [PATCH 140/187] Updating gh-pages as well

---
 about.html             | 2 +-
 api.html               | 2 +-
 attr.html              | 2 +-
 css.html               | 2 +-
 easing.html            | 2 +-
 examples.html          | 2 +-
 extend.html            | 2 +-
 features.html          | 2 +-
 index.html             | 4 ++--
 options.html           | 2 +-
 properties.html        | 2 +-
 src/kute-jquery.min.js | 2 --
 start.html             | 2 +-
 svg.html               | 2 +-
 text.html              | 2 +-
 15 files changed, 15 insertions(+), 17 deletions(-)
 delete mode 100644 src/kute-jquery.min.js

diff --git a/about.html b/about.html
index b3fa087..2f36480 100644
--- a/about.html
+++ b/about.html
@@ -227,7 +227,7 @@
         
 
diff --git a/api.html b/api.html
index ecb2335..7323f18 100644
--- a/api.html
+++ b/api.html
@@ -246,7 +246,7 @@ tween2.chain(tweensCollection2.tweens);
         
 
diff --git a/attr.html b/attr.html
index b3568ad..e246687 100644
--- a/attr.html
+++ b/attr.html
@@ -190,7 +190,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
         
 
diff --git a/css.html b/css.html
index a76e8ec..8748fb3 100644
--- a/css.html
+++ b/css.html
@@ -214,7 +214,7 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
         
 
diff --git a/easing.html b/easing.html
index a72a647..c4e93c4 100644
--- a/easing.html
+++ b/easing.html
@@ -331,7 +331,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
         
 
diff --git a/examples.html b/examples.html
index 9852583..ccbf20f 100644
--- a/examples.html
+++ b/examples.html
@@ -501,7 +501,7 @@ var myMultiTween2 = KUTE.allFromTo(
         
 
diff --git a/extend.html b/extend.html
index 3670136..c93136a 100644
--- a/extend.html
+++ b/extend.html
@@ -344,7 +344,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
         
 
diff --git a/features.html b/features.html
index 0ec9611..f23e845 100644
--- a/features.html
+++ b/features.html
@@ -189,7 +189,7 @@
         
 
diff --git a/index.html b/index.html
index 96164b4..841c5c4 100644
--- a/index.html
+++ b/index.html
@@ -147,7 +147,7 @@
                         
    Packed With Tools
    
                         
    KUTE.js comes with a CSS Plugin, 
                             a SVG Plugin,
-                            an ATTR Plugin, a Text Plugin and a jQuery plugin, 
+                            an ATTR Plugin, a Text Plugin, 
                             easing functions, color convertors, utility functions, and you can even extend it yourself.
    
                     
                     
    
@@ -203,7 +203,7 @@
         
 
diff --git a/options.html b/options.html
index d49785a..8a2a9aa 100644
--- a/options.html
+++ b/options.html
@@ -196,7 +196,7 @@ KUTE.defaultOptions.duration = 1000;
         
 
diff --git a/properties.html b/properties.html
index 70552f4..25ab65b 100644
--- a/properties.html
+++ b/properties.html
@@ -273,7 +273,7 @@
         
 
diff --git a/src/kute-jquery.min.js b/src/kute-jquery.min.js
deleted file mode 100644
index 13eaaac..0000000
--- a/src/kute-jquery.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// KUTE.js v1.6.6 | © dnp_theme | jQuery Plugin | MIT-License
-!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,r){return t(r,e),e});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js"),n=require("jquery");module.exports=t(n,r)}else{if(void 0===e.KUTE||void 0===e.$&&void 0===e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var n=e.jQuery||e.$,r=e.KUTE;t(n,r)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,r,n){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,r,n)},e.fn.to=function(e,r){var n=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](n,e,r)},this});
\ No newline at end of file
diff --git a/start.html b/start.html
index 9db5945..dc1c282 100644
--- a/start.html
+++ b/start.html
@@ -161,7 +161,7 @@ define([
         
 
diff --git a/svg.html b/svg.html
index fa43679..044a713 100644
--- a/svg.html
+++ b/svg.html
@@ -563,7 +563,7 @@ KUTE.fromTo(element,
         
 
diff --git a/text.html b/text.html
index 66f6f41..f43583f 100644
--- a/text.html
+++ b/text.html
@@ -164,7 +164,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&
         
 

From 81a86026c5bed5f2cecc63225033808ff5f66f7d Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 1 Feb 2019 12:42:31 +0200
Subject: [PATCH 141/187] Removed jQuery plugin from documentation

---
 about.html    |  2 +-
 api.html      |  3 +--
 easing.html   |  2 +-
 examples.html | 17 +----------------
 features.html |  2 +-
 start.html    |  7 ++-----
 6 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/about.html b/about.html
index 2f36480..fcbb1de 100644
--- a/about.html
+++ b/about.html
@@ -208,7 +208,7 @@
                     
    Remember: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.
    
 
                     
    KUTE.js Project
    
-                    
    KUTE.js continues what was started with jQueryTween (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
+                    
    KUTE.js continues what was started with jQueryTween (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.
    
                     
    It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.
    
                     
    In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, Text Plugin, as well as
diff --git a/api.html b/api.html
index 7323f18..f8293f9 100644
--- a/api.html
+++ b/api.html
@@ -88,8 +88,7 @@
                 duration, repeat or other options. The methods have different uses and performance scores while making it easy to work with.
    
 
             
    Single Tween Object
    
-            
    As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, 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.
    
+            
    As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements.
    
             
    .to() 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 .fromTo() method as it has to compute the default/current value on tween .start() 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 .start() method for the solution for sync/delay issue.
    
diff --git a/easing.html b/easing.html
index c4e93c4..5186b58 100644
--- a/easing.html
+++ b/easing.html
@@ -196,7 +196,7 @@
                 right here.
    
             
    NOTE: Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.
    
-            
    There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:
    
+            
    There is also a pack of presets, and the keywords look very familiar to you:
    
             
      
                 
    • Equivalents of the browser's generic timing functions: easeIn, easeOut and easeInOut
      • 
                 
    • Sinusoidal timing functions: easeInSine, easeOutSine and easeInOutSine
      • 
diff --git a/examples.html b/examples.html
index ccbf20f..7aee710 100644
--- a/examples.html
+++ b/examples.html
@@ -81,7 +81,7 @@
 
         
      
             
      Core Engine
      
-            
      KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript or with jQuery, but before we head over to the more advanced examples, let's have a quick look at these two
+            
      KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript without libraries like jQuery, but before we head over to the more advanced examples, let's have a quick look at these two
                 basic examples here. Note: the examples are posted on codepen.
      
 
             
      Basic Native Javascript Example
      
@@ -107,21 +107,6 @@ tween.paused // checks if the tween is currenlty active so we can prevent pausin
 
             
      The demo for the above example is here.
      
 
-            
      Basic jQuery Example
      
-            
      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:
      
-            
      // this is the tween object, basically $('selector').method(fromValues, toValue, options)
-var tween = $('selector').fromTo({top: 20}, {top: 100}, {delay: 500});
-
      
-            
      We mentioned that the jQuery Plugin is different, and here's why: the above function call uses the allFromTo method to create an Array of objects for each HTML element of chosen selector, but if the selector
-                only returns one element the call returns a single tween object built with fromTo method. For the array of objects we can now apply the exact same tween control methods, except these:
      
-            
      tween.length // check if the tween is an array of objects
-tween.length && tween.tweens[0].playing && tween.tweens[tween.length-1].playing // now we know that one of the tweens is playing
-tween.length && tween.tweens[0].paused && tween.tweens[tween.length-1].paused // now we know that one of the tweens is paused
-
      
-
-            
      The demo for the above example is here.
      
-
             
      Transform Properties Examples
      
             
      KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY                and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateY, rotateZ properties. Additionally it
                 allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.
      
diff --git a/features.html b/features.html
index f23e845..361feff 100644
--- a/features.html
+++ b/features.html
@@ -164,7 +164,7 @@
                 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.
      
 
             
      Addons
      
-            
      KUTE.js sports some fine tuned addons: jQuery Plugin, SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic 
+            
      KUTE.js sports some fine tuned addons: SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic 
                 bezier easing functions and also physics based easing functions. It also features an extensive guide on how to extend, but I'm open for more features in the future.
      
 
             
      Check the documentation on these methods and the examples page for more.
      
diff --git a/start.html b/start.html
index dc1c282..d6cea16 100644
--- a/start.html
+++ b/start.html
@@ -106,7 +106,6 @@ require("kute.js/kute-text"); // Add Text Plugin
             
      // AMD style
 define([
     "kute.js",
-    "kute.js/kute-jquery.js", // optional for jQuery apps
     "kute.js/kute-svg.js", // optional for SVG morph, draw and other SVG related CSS
     "kute.js/kute-css.js", // optional for additional CSS properties
     "kute.js/kute-attr.js", // optional for animating presentation attributes
@@ -124,15 +123,13 @@ define([
 
             
      The CDN repositories receive latest updates here and right here. 
                 You might also want to include the tools that you need for your project:
      
-            
      <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
+            
      <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->
 
      
             
      Alternate CDN links:
      
-            
      <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
+            
      <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->

From e313cb369ff76ab4c1823b181465ced8ab62676d Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 7 Nov 2019 17:49:09 +0200
Subject: [PATCH 142/187] Added a simple example for #96

---
 about.html            |   1 +
 api.html              |   1 +
 assets/js/progress.js |  18 ++++
 assets/js/svg.js      |   2 +-
 attr.html             |   1 +
 css.html              |   1 +
 easing.html           |   1 +
 examples.html         |   1 +
 extend.html           |   1 +
 features.html         |   1 +
 index.html            |   1 +
 options.html          |   1 +
 progress.html         | 215 ++++++++++++++++++++++++++++++++++++++++++
 properties.html       |   1 +
 start.html            |   1 +
 svg.html              |   1 +
 text.html             |   1 +
 17 files changed, 248 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/progress.js
 create mode 100644 progress.html

diff --git a/about.html b/about.html
index fcbb1de..7fbb5d5 100644
--- a/about.html
+++ b/about.html
@@ -61,6 +61,7 @@
                             
    • SVG Plugin 
      • 
                             
    • Text Plugin 
      • 
                             
    • Attributes Plugin 
      • 
+                            
    • Tween Progress 
      • 
                         
    
                     
                     
  • 
diff --git a/api.html b/api.html
index f8293f9..02f9287 100644
--- a/api.html
+++ b/api.html
@@ -64,6 +64,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/assets/js/progress.js b/assets/js/progress.js
new file mode 100644
index 0000000..50d2d69
--- /dev/null
+++ b/assets/js/progress.js
@@ -0,0 +1,18 @@
+(function(){
+
+    // invalidate for unsupported browsers
+    var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
+    if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
+
+    // basic morph, only fromTo and allFromTo should work
+    var morphTween = KUTE.fromTo('#rectangle', { path: '#rectangle' }, { path: '#star' }, { morphIndex: 127 });
+
+    // the range slider
+    var rangeSlider = document.querySelector('input[type="range"');
+
+    rangeSlider.addEventListener('input',function(){
+        var tick = 0.00001; // we need a value that's slightly above 0, math is hard in JavaScript
+        KUTE.update.call(morphTween, this.value * morphTween.options.duration + tick)
+    })
+
+}())
\ No newline at end of file
diff --git a/assets/js/svg.js b/assets/js/svg.js
index f6cf9b3..df091c0 100644
--- a/assets/js/svg.js
+++ b/assets/js/svg.js
@@ -2,7 +2,7 @@
 
     // invalidate for unsupported browsers
     var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
-    if (isIE&&isIE<9) {return;} // return if SVG API is not supported
+    if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
 
     // basic morph
     var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
diff --git a/attr.html b/attr.html
index e246687..cd86a71 100644
--- a/attr.html
+++ b/attr.html
@@ -64,6 +64,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/css.html b/css.html
index 8748fb3..aeb0ca4 100644
--- a/css.html
+++ b/css.html
@@ -63,6 +63,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/easing.html b/easing.html
index 5186b58..b300227 100644
--- a/easing.html
+++ b/easing.html
@@ -66,6 +66,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/examples.html b/examples.html
index 7aee710..0c83ce2 100644
--- a/examples.html
+++ b/examples.html
@@ -62,6 +62,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/extend.html b/extend.html
index c93136a..ea24628 100644
--- a/extend.html
+++ b/extend.html
@@ -62,6 +62,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/features.html b/features.html
index 361feff..fdcd43f 100644
--- a/features.html
+++ b/features.html
@@ -59,6 +59,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/index.html b/index.html
index 841c5c4..35aed1f 100644
--- a/index.html
+++ b/index.html
@@ -59,6 +59,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/options.html b/options.html
index 8a2a9aa..d0c5174 100644
--- a/options.html
+++ b/options.html
@@ -64,6 +64,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/progress.html b/progress.html
new file mode 100644
index 0000000..4f82c0d
--- /dev/null
+++ b/progress.html
@@ -0,0 +1,215 @@
+
+
+
+
+
+
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Using Update Functions | Javascript Animation Engine
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+    
+
+    
+    
+
+
+
+    
    
+
+        
    
+            
    
+                
    KUTE.js
    
+                
+            
    
+        
    
+
+        
    
+            
    Tween Progress Control
    
+            
    KUTE.js object exposes all required methods in order for it to work, so why not try to do something fun? How about control tween progress? So let's make a quick tool:
    
+            
      
+                
    • We need an <input type="range" min="0" max="1" step="0.00001" /> with these exact min, max and step attributes
      • 
+                
    • Now we need a tween object, let's just do a svg morph for instance, but make sure you use KUTE.fromTo() method, the others don't prepare start values for the tween object
      • 
+                
    • We also need to make sure nothing controls the progress except the range input, so don't use start() or pause() methods at all, as well as repeat and / or yoyo options
      • 
+                
    • Next we attach an input event handler to update the tween progress by using the KUTE.update function, which is the step function triggered on every requestAnimationFrame tick
      • 
+            
    
+
+            
    A very basic code sample will look like this:
    
+
+
+
    // basic morph, only fromTo and allFromTo should work
+var morphTween = KUTE.fromTo('#rectangle', { path: '#rectangle' }, { path: '#star' }, { morphIndex: 127 });
+
+// the range slider
+var rangeSlider = document.querySelector('input[type="range"');
+
+// do the dew
+rangeSlider.addEventListener('input',function(){
+    var tick = 0.00001; // we need a value that's slightly above 0, math is hard in JavaScript
+    KUTE.update.call(morphTween, this.value * morphTween.options.duration + tick);
+})
+
    
+
+            
    And now let's see the code in action:
    
+            
    
+                
    
+                    
+                    0%
+                
    
+                
+                    
+                    
+                
+            
    
+
+            
    We might argue that we want to use other methods in combination with this method, or use this method while animations are running, but there are other libraries out there that can do that already. This example here is just to showcase KUTE.js can do this too.
    
+
+            
+        
    
+
+        
+        
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+
+
diff --git a/properties.html b/properties.html
index 25ab65b..8109355 100644
--- a/properties.html
+++ b/properties.html
@@ -61,6 +61,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/start.html b/start.html
index d6cea16..e954580 100644
--- a/start.html
+++ b/start.html
@@ -64,6 +64,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/svg.html b/svg.html
index 044a713..4492a3d 100644
--- a/svg.html
+++ b/svg.html
@@ -63,6 +63,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/text.html b/text.html
index f43583f..7e8419f 100644
--- a/text.html
+++ b/text.html
@@ -73,6 +73,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 

From cb72a478c23b1652b2535bb956b9669a14b10745 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:08:43 +0000
Subject: [PATCH 143/187]

---
 about.html                               |  250 --
 api.html                                 |  273 ---
 assets/css/kute.css                      |  243 +-
 assets/img/apple-touch-icon.png          |  Bin 0 -> 4265 bytes
 assets/img/favicon.ico                   |  Bin 0 -> 133982 bytes
 assets/img/favicon.png                   |  Bin 1456 -> 0 bytes
 assets/img/home.svg                      |   56 +
 assets/img/ms.svg                        |   27 +
 assets/img/rectangle.svg                 |    9 +
 assets/img/social.svg                    |   29 +
 assets/js/backgroundPosition.js          |   11 +
 assets/js/borderRadius.js                |   12 +
 assets/js/boxModel.js                    |   49 +
 assets/js/clipProperty.js                |   25 +
 assets/js/colorProperties.js             |   39 +
 assets/js/css.js                         |  147 --
 assets/js/easing.js                      |   77 -
 assets/js/examples.js                    |  273 ---
 assets/js/extend.js                      |   27 -
 assets/js/filterEffects.js               |   18 +
 assets/js/home.js                        |  164 +-
 assets/js/{attr.js => htmlAttributes.js} |   23 +-
 assets/js/kute-bezier.min.js             |    2 -
 assets/js/kute-bs.js                     |  113 -
 assets/js/kute-physics.min.js            |    2 -
 assets/js/minifill.js                    |  382 ---
 assets/js/opacityProperty.js             |   23 +
 assets/js/perf-matrix.js                 |  113 +
 assets/js/perf.js                        |   75 +-
 assets/js/progress.js                    |   24 +-
 assets/js/sampleComponent.js             |   82 +
 assets/js/scripts.js                     |   33 +-
 assets/js/scrollProperty.js              |   13 +
 assets/js/shadowProperties.js            |   53 +
 assets/js/svg.js                         |  258 --
 assets/js/svgCubicMorph.js               |   60 +
 assets/js/svgDraw.js                     |   29 +
 assets/js/svgMorph.js                    |   96 +
 assets/js/svgTransform.js                |  155 ++
 assets/js/text.js                        |   35 -
 assets/js/textProperties.js              |   27 +
 assets/js/textWrite.js                   |   61 +
 assets/js/transformFunctions.js          |  134 ++
 assets/js/transformMatrix.js             |   92 +
 assets/js/tween.min.js                   |    2 +-
 attr.html                                |  221 --
 backgroundPosition.html                  |  159 ++
 borderRadius.html                        |  173 ++
 boxModel.html                            |  180 ++
 clipProperty.html                        |  154 ++
 colorProperties.html                     |  171 ++
 css.html                                 |  245 --
 easing.html                              |  365 ---
 examples.html                            |  515 ----
 extend.html                              |  376 ---
 features.html                            |  214 --
 filterEffects.html                       |  192 ++
 htmlAttributes.html                      |  236 ++
 index.html                               |  416 ++--
 opacityProperty.html                     |  152 ++
 options.html                             |  224 --
 performance-matrix.html                  |  212 ++
 performance-transform.html               |  218 ++
 performance.html                         |  138 +-
 progress.html                            |  217 +-
 properties.html                          |  298 ---
 scrollProperty.html                      |  193 ++
 shadowProperties.html                    |  195 ++
 src/kute-attr.min.js                     |    2 -
 src/kute-base.js                         |  567 +++++
 src/kute-base.min.js                     |    2 +
 src/kute-css.min.js                      |    2 -
 src/kute-extra.js                        | 2785 ++++++++++++++++++++++
 src/kute-extra.min.js                    |    2 +
 src/kute-svg.min.js                      |    2 -
 src/kute-text.min.js                     |    2 -
 src/kute.min.js                          |    4 +-
 src/polyfill.min.js                      |    2 +
 start.html                               |  186 --
 svg.html                                 |  596 -----
 svgCubicMorph.html                       |  356 +++
 svgDraw.html                             |  166 ++
 svgMorph.html                            |  388 +++
 svgTransform.html                        |  390 +++
 text.html                                |  195 --
 textProperties.html                      |  159 ++
 textWrite.html                           |  275 +++
 transformFunctions.html                  |  297 +++
 transformMatrix.html                     |  216 ++
 89 files changed, 9795 insertions(+), 5879 deletions(-)
 delete mode 100644 about.html
 delete mode 100644 api.html
 create mode 100644 assets/img/apple-touch-icon.png
 create mode 100644 assets/img/favicon.ico
 delete mode 100644 assets/img/favicon.png
 create mode 100644 assets/img/home.svg
 create mode 100644 assets/img/ms.svg
 create mode 100644 assets/img/rectangle.svg
 create mode 100644 assets/img/social.svg
 create mode 100644 assets/js/backgroundPosition.js
 create mode 100644 assets/js/borderRadius.js
 create mode 100644 assets/js/boxModel.js
 create mode 100644 assets/js/clipProperty.js
 create mode 100644 assets/js/colorProperties.js
 delete mode 100644 assets/js/css.js
 delete mode 100644 assets/js/easing.js
 delete mode 100644 assets/js/examples.js
 delete mode 100644 assets/js/extend.js
 create mode 100644 assets/js/filterEffects.js
 rename assets/js/{attr.js => htmlAttributes.js} (79%)
 delete mode 100644 assets/js/kute-bezier.min.js
 delete mode 100644 assets/js/kute-bs.js
 delete mode 100644 assets/js/kute-physics.min.js
 delete mode 100644 assets/js/minifill.js
 create mode 100644 assets/js/opacityProperty.js
 create mode 100644 assets/js/perf-matrix.js
 create mode 100644 assets/js/sampleComponent.js
 create mode 100644 assets/js/scrollProperty.js
 create mode 100644 assets/js/shadowProperties.js
 delete mode 100644 assets/js/svg.js
 create mode 100644 assets/js/svgCubicMorph.js
 create mode 100644 assets/js/svgDraw.js
 create mode 100644 assets/js/svgMorph.js
 create mode 100644 assets/js/svgTransform.js
 delete mode 100644 assets/js/text.js
 create mode 100644 assets/js/textProperties.js
 create mode 100644 assets/js/textWrite.js
 create mode 100644 assets/js/transformFunctions.js
 create mode 100644 assets/js/transformMatrix.js
 delete mode 100644 attr.html
 create mode 100644 backgroundPosition.html
 create mode 100644 borderRadius.html
 create mode 100644 boxModel.html
 create mode 100644 clipProperty.html
 create mode 100644 colorProperties.html
 delete mode 100644 css.html
 delete mode 100644 easing.html
 delete mode 100644 examples.html
 delete mode 100644 extend.html
 delete mode 100644 features.html
 create mode 100644 filterEffects.html
 create mode 100644 htmlAttributes.html
 create mode 100644 opacityProperty.html
 delete mode 100644 options.html
 create mode 100644 performance-matrix.html
 create mode 100644 performance-transform.html
 delete mode 100644 properties.html
 create mode 100644 scrollProperty.html
 create mode 100644 shadowProperties.html
 delete mode 100644 src/kute-attr.min.js
 create mode 100644 src/kute-base.js
 create mode 100644 src/kute-base.min.js
 delete mode 100644 src/kute-css.min.js
 create mode 100644 src/kute-extra.js
 create mode 100644 src/kute-extra.min.js
 delete mode 100644 src/kute-svg.min.js
 delete mode 100644 src/kute-text.min.js
 create mode 100644 src/polyfill.min.js
 delete mode 100644 start.html
 delete mode 100644 svg.html
 create mode 100644 svgCubicMorph.html
 create mode 100644 svgDraw.html
 create mode 100644 svgMorph.html
 create mode 100644 svgTransform.html
 delete mode 100644 text.html
 create mode 100644 textProperties.html
 create mode 100644 textWrite.html
 create mode 100644 transformFunctions.html
 create mode 100644 transformMatrix.html

diff --git a/about.html b/about.html
deleted file mode 100644
index 7fbb5d5..0000000
--- a/about.html
+++ /dev/null
@@ -1,250 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    About KUTE.js | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-
-            
    Did you know?
    
-            
    Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween 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 vertical sync, etc). The term was introduced to the world of web development by early Javascrpt
-                libraries and later used in dedicated animation libraries such as GSAP, Dynamics, Velocity,
-                Shifty, our own KUTE.js here and many others. When used as a verb, it actually reffers to the interpolation of the values.
    
-            
    Tween Object is a Javascript Object 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 tween actually refers to the tween object.
    
-            
    polyfill 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 natively". Basically a polyfill covers what
-                legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. More details.
    
-            
    requestAnimationFrame is a Javascript method developed to enable hardware acceleration animations for the
-                web today. In Javascript, the window.requestAnimationFrame(callback); method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a polyfil                to cover the legacy browsers chaos.
    
-            
    JANK 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
-                explain all about it, so you don't have to stay in the dark.
    
-            
    Methods are functions that create tween objects or control the animation for KUTE.js, so we will encounter mostly main methods and tween control methods. Once a main method is used, then
-                the control methods apply in a specific order.
    
-
-
-            
    How Does It Work?
    
-            
    Well, first things first: it's smart built. Let's briefly explain the phases:
    
-            
      
-                
    1. 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.
      2. 
-                
    2. 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 .to() 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.
      3. 
-                
    3. In the third phase KUTE.js is ready to start the animation, but the animation starts only after the .start() function, if used, has finished. When animation starts, KUTE.js will start ticking on the frequency decided
-                    by requestAnimationFrame or setInterval for legacy browsers, quickly updating the style for the properties and execute the update:function callback if any. Also while animating, KUTE.js will begin
-                    listening for your tween control input such as .pause() or .stop() or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.
      4. 
-                
    4. When tween animation is finished, the complete:function callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with cancelAnimationFrame to save power.
      5. 
-            
    
-            
    Basically, this is it!
    
-
-            
    A Note On Performance
    
-            
    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. We'll dig into each case, by property type or anything that can be considered a factor of influence.
    
-
-            
    Function Nesting
    
-            
    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 click, scroll or resize, 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 resize.
    
-            
    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: if (window.clientWidth > 760) { myTween.start() }. 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.
    
-
-            
    Translate and Position
    
-            
    While the code execution is the fastest for the layout modifiers or what we call box-model, say the position based properties set such as left or top, they may force
-                the entire page layout to change if not absolutelly positioned and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side translate doesn't trigger
-                a repaint but involves more complex operations such as more object traversing, string concatenation or check for certain conditions to be met. All of this is because translate is part of transform CSS3 property
-                that has to stack in a single line many more properties such as rotate, skew and scale. An article                by Paul Irish explains more about differences in performance between position and translation.
    
-            
    Also any transform property is sub-pixel enabled and requires one or more decimals for accurate and smooth animation, decreasing overall performance. That said and with the emerging high resolution displays, it's safe to speculate that at
-                least translation could be optimized by rounding the values, while scale, rotation and skew requires three decimals.
    
-
-            
    To put it short left executes faster but requires repaint on every frame while translateX or translate3d execute slower but require no repaint on each animation
-                frame. The winner is left, 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 overall winner is translate.
-                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.
    
-
-            
    Translate, TranslateX and Translate3D
    
-            
    While running a 2D translate:150 animation could score similar performance as translateX:150, interestingly, translate3d:[150,0,0] is slightly faster than the other translations. Some performance tests                confirm that translate3d is the prefered property for hardware acceleration. For this reason, translate3d is the winner and KUTE.js always uses it even if you only use translateX or
-                translateY for instance.
-                
    
-                    
    Similarly, if you animate the 2D translate this always goes translate(x,y) even if you use translate:150 (only for the X axis) or translate:[150,0] (both X and Y axis), for better
-                        performance as well. And by the way, this works great on IE9 and other legacy browsers.
    
-
-                    
    Box Model
    
-                    
    We compared position with transition above, but now we are going to talk about other issues related to resizers: width, height, margin,
-                        padding and borderWidth 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 all browsers, especially when you animate these resize properties. When this toxic combination occurs animating a large amount of elements could crash any browser,
-                        no exception, and I think any developer should know about this.
    
-                    
    The resize event triggered by these resizer properties can cause some severe issues with legacy browsers 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.
    
-                    
    A workaound for 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 elements themselves. 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.
    
-
-                    
    RGB and HEX
    
-                    
    When animating any color property such as (text) color or background-color, KUTE.js always uses/converts to RGB/RGBA, but there is a keepHex:true                        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 RGB the winner.
    
-
-                    
    TO and FROMTO
    
-                    
    The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are .to() and .fromTo(). While .to() is much more simple and convenient to use, very useful for
-                        tween chaining, it has to process the starting values on every .start() delaying the animation for a few miliseconds depending on the browser and hardware, making .fromTo() the winner. 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 .fromTo() properly.
    
-
-                    
    Easing Functions
    
-                    
    KUTE.js comes with 3 packs of easing functions: the popular easing functions by Robert Penner, dynamics physics easing
-                        functions by Michael Villar and bezier-easing 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 winner.
    
-                    
    The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the cubic-bezier based functions have a 0.0000001
-                        error margin, while the Exponential 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.
    
-
-                    
    Garbage Collection
    
-                    
    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.
    
-                    
    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 page.
    
-
-                    
    Property Value Complexity
    
-                    
    Just like the high amount of simultaneous animations influence performance, the property value complexity is also an important factor. If we were to compare all the supported properties in terms of complexity, the list would go like
-                        this (from most expensive to least): path morphing, regular transform, matrix3d (not yet supported), box-shadow / text-shadow, colors, box model*, unitless props (scroll, opacity).
    
-                    
    The * wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.
    
-
-                    
    OSs, Desktops and Mobiles
    
-                    
    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).
    
-                    
    The results show Windows 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!
    
-
-                    
    The browsers' performance goes like this (from best to poorest): Google Chrome, 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. Some argue that
-                        Safari outperforms Google Chrome due to the latest Webkit upgrade.
    
-
-                    
    Also know that legacy browsers don't support requestAnimationFrame and pollyfills usually replace it with setInterval, a clasic Javascript method that's
-                        significantly affecting performance, because it's one of the main causes for lots of JANK.
    
-
-                    
    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. 
    
-
-                    
    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 these guys                        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.
    
-
-                    
    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 Google I/O 2014 presentation.
-                        Now you understand how much performance really matters.
    
-                    
    Remember: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.
    
-
-                    
    KUTE.js Project
    
-                    
    KUTE.js continues what was started with jQueryTween (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.
    
-                    
    It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.
    
-                    
    In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, Text Plugin, 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.
    
-                    
    Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.
    
-
-                    
-        
    
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-    
-    
-    
-    
-
-
-
-
diff --git a/api.html b/api.html
deleted file mode 100644
index 02f9287..0000000
--- a/api.html
+++ /dev/null
@@ -1,273 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js Developer API | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-
-        
    
-            
    Public Methods
    
-            
    These methods allow you to create tween objects and collections of tween objects; 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.
    
-
-            
    Single Tween Object
    
-            
    As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements.
    
-            
    .to() 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 .fromTo() method as it has to compute the default/current value on tween .start() 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 .start() method for the solution for sync/delay issue.
    
-            
    Considering a given div element is already transparent, a super quick example would be:
    
-            
    KUTE.to(div,{opacity:1}).start()
    
-            
    As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.
    
-            
    .fromTo() 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 .to() 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 features page. Here's a quick example:
    
-            
    KUTE.fromTo(div,{opacity:1},{opacity:0}).start()
    
-
-            
    Tween Object Collections
    
-            
    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.
    
-            
    .allTo() method allows you to create an array of tween objects for a collection of elements. This method is using the above .to() method and inherits it's functionality. Considering a given collection myDivs                elements, a nice example would be:
    
-            
    // 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} );
-
    
-
-            
    .allFromTo() method is also a method to animate a collection of elements and it uses the .fromTo() method. Quick example:
    
-            
    KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()
    
-
-            
    As you can see the above code, these methods have a specific tween option called offset 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 .chain() method. In order to chain another tween to one of the myDivsTweens objects, we would need to access it from the array, but let's leave that for later.
    
-        
    
-
-        
    
-            
    Tween Control Methods
    
-            
    These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:
    
-            
    var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});
    
-            
    This tween object is now ready to work with the methods.
    
-
-            
    Starting Animations
    
-            
    .start() 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 .allTo() and .allFromTo() methods.
    
-            
    //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();
-
    
-
-            
    As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue). 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 eliminates any syncronization issue that may occur on animations start, even if you are using the .to() method. The trick is super duper simple:
    
-
-            
    // 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);
-}
-
    
-
-            
    In other cases the new methods .allTo() and .allFromTo() can be more useful.
    
-
-            
    Stopping Animation
    
-            
    .stop() method stops animation for a given tween object or an array of tween objects (built with .to()/.fromTo() 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 click action:
    
-            
    // for a tween object
-stopButton.addEventListener('click', function(){
-  myTween.stop(); // myMultiTweens.stop();
-}, false);
-
    
-
-            
    Pausing Animation
    
-            
    .pause() method freezez the animation at any given time for a given tween object or collection, and unlike the .stop() method, this one allows resuming the animation on a later use of the next method .play().
    
-            
    pauseButton.addEventListener('click', function(){
-  tween.pause(); // or myMultiTweens.pause();
-}, false);
-
    
-
-            
    Resuming Paused Animation
    
-            
    .play() or .resume() 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.
    
-            
    playButton.addEventListener('click', function(){
-  tween.play(); // or tween.resume(); || or myMultiTweens.resume();
-}, false);
-
    
-
-            
    Chaining Tweens
    
-            
    .chain() method can be used to chain tweens together. When the animation finishes for a given tween, it calls for .start() for another tween(s).
    
-            
    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);
-
    
-
-            
    It's also possible to chain multiple tweens, just as shown in the below example.
    
-            
    //chain multiple tweens
-tween.chain(tween1,tween2);
-
    
-
-            
    Another thing we talked before is the ability to chain to one of the tween object within the array built with .allTo() or .allFromTo() methods.
    
-            
    // chain to a tween from collection
-var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
-
-// 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);
-
    
-            
    Also we can chain the tweens created with .allTo() and .allFromTo() methods like this:
    
-            
    // chain a collection of tweens to another tween
-var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
-
-// the array is right here tweensCollection2.tweens
-// we can pass it in the chain of another tween
-tween2.chain(tweensCollection2.tweens);
-
    
-        
    
-
-        
    
-
-            
-
-        
    
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-
-    
-    
-    
-    
-
-
-
diff --git a/assets/css/kute.css b/assets/css/kute.css
index 0384388..7308775 100644
--- a/assets/css/kute.css
+++ b/assets/css/kute.css
@@ -6,19 +6,65 @@
 /* GLOBAL STYLES
 -------------------------------------------------- */
 body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  line-height: 2; /* ~25px */
+	line-height: 24px; /* ~25px */
+	letter-spacing: 0.02em;
   color: #ccc;
-  background-color: #2e2e2e;
+  background-color: #08263d;
   position: relative
- 
 }
 
-/* the body and it's children can be irresponsive on scroll animations as well */
-body[data-tweening="scroll"],
-body[data-tweening="scroll"] * { pointer-events: none !important; }
+.condensed { font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal !important;}
 
+/* WRAPPER STYLES
+-------------------------------------------------- */
+.content-wrap { max-width: 80%; position: relative;  margin: 0 auto;  clear: both; }
+
+@media (min-width: 1020px){
+	.content-wrap { max-width: 100%; width: 980px; }
+}
+
+/* check div consistency 
+div { background-color: rgba(0,0,0,0.2) }*/
+
+/* TYPO STYLES
+-------------------------------------------------- */
+p, ul, ol { margin: 0 0 12px }
+h1, h2, h3, h4, strong {color: #fff}
+h1, h2, h3, h4, h5 { margin: 24px 0; font-weight: bold; }
+h1 { font-size: 54px; letter-spacing:-2px; line-height: 48px;  }
+h2 { font-size: 46px; letter-spacing:-1px; line-height: 48px;  }
+h3 { font-size: 32px; letter-spacing:-1px; line-height: 36px;  }
+h4 { font-size: 24px; letter-spacing: 0px;   }
+/* h1, h3, [class*="col"] > h4 {margin: 0 0 20px} */
+
+h1.border,
+h2.border,
+h3.border,
+.lead.border { 
+	padding-bottom: 24px; 
+	margin-bottom: 24px; 
+	border-bottom: 1px solid rgba(150,150,150,0.5)
+}
+
+.text-right { text-align: right }
+.text-center { text-align: center }
+.text-left { text-align: left }
+
+.float-left {float:left}
+.float-right {float:right}
+
+.margin-bottom { margin-bottom: 24px !important; }
+
+.lead { font-size: 18px; color: #fff }
+
+.nomargin { margin: 0px !important }
+@media (min-width: 768px){
+	.nomarginlarge { margin: 0 !important }
+}
+
+b,strong {font-weight: 600;color:white}
 
 footer {
   clear: both; overflow: hidden; margin-top: 60px
@@ -26,42 +72,78 @@ footer {
 
 footer .content-wrap {
   padding-top: 5px;
-  border-top: 1px solid rgb(120,120,120); border-top: 1px solid rgba(255,255,255,0.2); 
+	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}
+.site-wrapper { position: relative; overflow: hidden; }
+
+.head-title { margin-top: 60px }
 
 /* navbar */
-.navbar-wrapper { position: relative; clear: both }
-.navbar-wrapper .content-wrap { height: 64px; padding: 20px 0 0; }
+.navbar {
+	display: flex;
+	/* justify-content: space-evenly; */
+	flex-direction: column;
+}
 
-.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) }
+@media (min-width:768px) {
+	.navbar {
+		align-items: center;
+		flex-direction: row;
+	}
+}
+
+.nav-wrapper {
+	border-bottom: 1px solid #555;
+	padding: 0 0 10px;
+	flex-basis: 100%
+}
+.navbar-wrapper { position: relative; clear: both; background: rgba(0,0,0,0.7); padding-bottom: 20px; }
+.navbar-wrapper .content-wrap { padding: 20px 0 0; }
+
+.navbar-wrapper h1 { 
+	color: #fff; 
+	font-size: 32px; line-height: 24px; letter-spacing: 0px; 
+	float: left; padding-right: 24px; margin-right: 24px; margin-top:0; margin-bottom: 0;
+	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 }
+.navbar-wrapper .nav { padding: 0; margin: 0; display: flex; flex-direction: row; }
+.nav > li { display: block; line-height: 25px; list-style: none }
 .nav > li:not(:last-child) { margin-right: 12px }
-.ie8 .nav li { margin-right: 12px }
-.ie8 .nav li li { margin-right: 0 }
 .nav li.active > a { color: #ffd626 }
 .nav li a { color: #ccc }
 .nav li a:hover, .nav li a:focus { text-decoration: none }
+
+/* share */
+#share { display: flex; flex-direction: row; margin: 0; position: absolute; top: 15px; right: 0; }
+#share li { list-style: none }
+#share a { text-decoration: none; }
+#share .icon {width:26px; height:auto; vertical-align: middle;}
+#share path { fill: none; stroke: currentColor; stroke-width: 50; }
+#share li:not(:last-child) { margin-right: 10px; }
+#share li:hover path { fill: currentColor; }
+#share li:hover a.facebook-link { color: #3578E5}
+#share li:hover a.twitter-link { color: #1da1f2 }
+
+
 @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 }
+	#share { top: 30px; }
 }
 
-.ie8 .btn.top-right { top:55px }
+
 
 /* featurettes */
 .featurettes { 
-	background: #eee;
+	background: #fff;
 	padding: 60px 0;
 	width: 100%;
 	clear: both;
@@ -73,8 +155,10 @@ footer p {margin: 0 0 10px}
 .featurettes h1,
 .featurettes h2,
 .featurettes h3,
+.featurettes h4,
 .featurettes b,
-.featurettes strong {color: #222}
+.featurettes .lead,
+.featurettes strong {color: #222;}
 .featurettes a {color: #2196F3}
 
 .content-wrap .featurettes { margin: 0 0 20px; padding: 20px 0 0 20px; display: inline-block; border-radius: 10px; position: relative }
@@ -85,6 +169,7 @@ footer p {margin: 0 0 10px}
 	float: left; position:relative; 
 	width: 150px; height: 150px; 
 	border-radius: 5px; margin: 0 20px 20px 0;
+	color: white
 }
 /*.example-box-model {
 	font-size: 40px; text-align:center; font-weight: bold; 
@@ -98,12 +183,11 @@ svg.example-box { width: auto; height: auto; }*/
 .example-buttons {position: absolute; top: 18px; right:0}
 
 /* text properties example */
-:not(.ie8) .btn.example-item {opacity: 0}
 h1.example-item {
     font-size: 50px;
     line-height:50px;
     color: #333;
-		opacity: 0;
+		/* opacity: 0; */
 }
 
 h1.example-item span {
@@ -112,9 +196,6 @@ h1.example-item span {
     vertical-align: top;
 }
 
-.ie8 h1.example-item,
-.ie8 .btn.example-item {filter: alpha(opacity=0); }
-.ie8 .btn.example-item {display: block; padding:0; text-align: center; }
 
 
 /* UTILITY STYLES
@@ -176,62 +257,48 @@ h1.example-item span {
 .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: #fff}
-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% }
+.columns { position: relative; width: auto; margin: 0 -20px; display:flex; flex-direction: column; }
+.columns > [class*="col"] { padding: 0 20px; position: relative }
+.columns.welcome {min-height:330px}
 
-@media (min-width: 480px) and (max-width: 768px){
-	/*.columns:not(#blocks) .col3:last-child{width: 100%;}*/
+@media (min-width: 768px){
+	.columns { flex-direction: row; flex-wrap: wrap }
+	.columns.welcome {min-height:none}
+
+
+	.col2 { max-width: 50%; flex: 0 0 50% }
+	.col3 { max-width: 33.33%; flex: 0 0 33.33% }
+	.col4 { max-width: 25%; flex: 0 0 25% }
+	.col8 { max-width: 75%; flex: 0 0 75% }
+	.col9 { max-width: 66.65%; flex: 0 0 66.65% }
+}
+
+/* @media (min-width: 480px) and (max-width: 768px){
 	.col3,
-	.col4 { width: 50% }
-	.col8 { width: 100% }
+	.col4 { width: 50%; flex: 0 0 50% }
+	.col8,
+	.col9 { width: 50%; flex: 0 0 50% }
 }
 @media (max-width: 479px){
-	.columns > [class*="col"] { float:none; width: 100%; }
-}
-.frontpage { margin-top:27% }
+	.columns > [class*="col"] { width: 100%; }
+} */
+
 .table { display: table; height: 480px }
 .cell { display: table-cell; vertical-align: middle }
 
 @media (max-width: 479px){
 	.table { height: 320px }
 }
+@media (min-width: 480px) {
+	[class*="col"].border:not(:first-child) {
+		border-left: 1px solid rgba(150,150,150,0.5);
+	}
+}
 
 /* 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),
@@ -244,10 +311,15 @@ h1, h3, [class*="col"] > h4 {margin: 0 0 20px}
 
 /*.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 }
+.frontpage { margin-top: 30%; }
+
+.columns.welcome .col2:nth-child(2) { position: absolute; top: 0; z-index: -1; left: 20%; opacity: 0.5 }
+.kute-logo {
+	margin-top: 12%;
+}
+
+@media (min-width: 768px){
+	.columns.welcome .col2:nth-child(2) { position: relative; top: auto; left: auto; z-index: auto; opacity: 1 }
 }
 
 /* STYLING CONTENT
@@ -275,20 +347,27 @@ hr {
     margin: 10px 0;	
 }
 
-/* share */
-#share {position: fixed; top: 0px; right: 0px; padding:10px 20px; background: #2e2e2e;}
-#share .icon {font-size: 24px; line-height: 1}
+
+.d-block {display: block;}
+.d-flex {display: flex;}
+.d-none {display: none;}
+
+.align-self-center {align-self: center;}
+.align-items-center {align-items: center;}
+.justify-content-space {justify-content: space-between;}
+.justify-content-even {justify-content: space-evenly;}
+
+
 
 /* buttons */
-.btns .btn {opacity: 0; float: left; line-height: 1; margin: 0 3px 3px 0}
-.ie8 .btns .btn {filter: alpha(opacity=0);}
+.btns .btn { float: left; line-height: 1; margin: 0 3px 3px 0}
 .btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; }
 .bg-gray { color:#fff; background-color: #555; fill: #555 }
 .btn.active { background-color: #2196F3 }
 .featurettes .btn, .featurettes .btn:hover, .featurettes .btn:active, .featurettes .btn:focus,
 .btn:hover, .btn:active, .btn:focus { color: #fff; }
 .btn:hover, .btn:active, .btn:focus { text-decoration: none; background-color: #777}
-.btn-olive, .bg-olive {background-color: #9C27B0; color: #fff; fill: #9C27B0} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #673AB7 }
+.btn-olive, .bg-olive {background-color: #9C27B0; color: #fff; fill: #9C27B0} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #FF5722 }
 .btn-indigo, .bg-indigo { background-color: #673AB7; color: #fff; fill: #673AB7} .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus { background-color: #ffd626; color:#000 }
 .btn-green, .bg-green { background-color: #4CAF50; color: #fff; fill: #4CAF50} .btn-green:hover, .btn-green:active, .btn-green:focus { background-color: #9C27B0 }
 .btn-red, .bg-red { background-color: #e91b1f; color: #fff; fill: #e91b1f} .btn-red:hover, .btn-red:active, .btn-red:focus { background-color: #4CAF50 }
@@ -316,7 +395,7 @@ hr {
 
 .btn-group { position: relative; display: inline-block }
 .btn-group ul {
-    background: #555; max-height: 300px; width: 200px; color: #ccc;
+    background: #555; width: 200px; color: #ccc;
     position: absolute; bottom: -9999em; left: 0; list-style: none; 
     overflow: auto; padding: 0; z-index: 5
 }
@@ -333,7 +412,7 @@ hr {
 }
 .nav .btn-group ul {bottom: auto; top: -999em}
 .nav .btn-group.open ul {
-    top: 43px;
+    top: 36px;
 }
 @media (max-width: 768px){
     .nav .btn-group.open ul {
@@ -388,6 +467,7 @@ pre {
 	border-radius: 4px;
 	text-align: left;
 	position: relative;
+	font-size: 15px;
 }
 pre.language-javascript:after,
 pre.language-clike:after, 
@@ -420,4 +500,7 @@ kbd {
 	background-color: #eee;
 	border-radius: 3px;
 	font-weight: bold
-}
\ No newline at end of file
+}
+
+.kute-logo,
+#rectangle {transform-origin: 50% 50%;}
\ No newline at end of file
diff --git a/assets/img/apple-touch-icon.png b/assets/img/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed1ba7e0bdfd344417edbfddaf270bbe0207f5f0
GIT binary patch
literal 4265
zcmX|F3p~@^8+UnKGVw;q`?6UG#m11!B9btgMc!zcFw>S$45Qprsad&2bI!A+9(8rxD)+aXn3&jBl#{(X
z@U9izveLlQxA4SWgg$qOKqNWEgb|L#xO(7Yg7B6Bnl=aItSCqTAecb*gHnRe
zhJ+(2)|$U@k-)b|Y^VwStwIj6);uUO2=ziAg&qnGBS81T&0u(hi3QZ$5{}qsX<=+?
z05vv3m>C*b8X`<#MhK*lCDI51{qNE|AP2Py3kXEI+dKSc3}{(v63OIqNJGP@s3>@p
z2|P6Hv?0RM($dh#*wEM*257*-qeIAk6j(^OmI&fs40}R2K8$pZObQKwiZK2BLnFx6
znwo|pBZmK30o*hEzkfjE{}CdD0AUFO{D-2dkz!(sf1&ITdQkG_`LSe=@A+)u^5-KE
zl*CxH5+g&-!z-}{-i{p0IT`P%QN>S0l>wCnz_&eSsd8QosHKRc>0v94Tz<
zo}4w=u_E{AkLPC6o#jf$g}B7WEm-=tN6W{E*C4a
zs5U3O>#mdSA0?!nQJ%912W}*K^JLnfq(l6^;3QOR#_nYZAJFRh_@cSVB@>gv9
z4Tf}!n9+=2i}&&zzYKpA=S4!=z3y4~o4rzK(27qR+xx`=B>i(Sap&|3iPyL2IHTV@
z;}WkF^F6PfQq!1q7OTg6*IXGN%S|cmxz#SN!5s5Rw##@wIG$6
zZ_`VrKEg)+qJ-txDTxL;4AxYVnb98NA{CSOve-b71r{J
zjBsN#Tb48Q0o8GB{*V0^&~0yOy3!m*2(iI(_z8vR{rQ%O(5JILjLAhyF3LRsGrj}G
zDAC*aagmF7b!Iikd}>9}(X~Jx1%i1CO+doH)48;5?rQ@J;S=4lW%zI1b|ABuUUJQ8
zj1gF?RL~Z#<63Zuk)rbU!XY!3%-$nx**#so_(Chvx%DxW7nVqOE;wP|Q{lly*xid?
zjevXX%cUU_RIo*l6+5)U+bDqi%+Jm!QtS^L7aHOqcZs%VZ=u$K-{YsQfyB`;V
zba28FQ3i^;F|b$8nbCzcO;wq9vImY7T5WLw!JGtm0(DiHo>L~1#5=Gmw=r{^i+a^#
z2TI2tw|(h3DdNxlx;FJO<};bPi$s@NEcM!MQ!lH(TSX&U`9kn!c%Dhn5a5j_mM9)(
z{(cv}xRXph7-62r2>I#iri*#iZKrn2>|t&agHVQ--`myO!dZ*Dx<6WprqU0^I4JGD
zyK_XSbDL&dvAV!==z~Q6J0z=#03nTnj<8id+B*js-!wprP0v&(!if)Nt2RgCH9903#b0Eoyo}ch1$-S7>?TX1R|XQ
zMTN`;?FpVu(?RyLWi(rL8>}{2+c1^1)`4(~DzJ9}%|k0){9nv;y4Rg8pH@ZCQzEbO
zb|Vt2A!k_i`L@S$ru9U!gt6U-@0g9e>e#e0{A;R8zqotOYtyDxg{nP?
z49j<%A-=!}@^!lbK{_DV2+!v|_$=tp)Ey?$N1aA~)9cXMkBeQ>R)>-EoN!9qZ=)b|A36orv7}$$nP+8?ro`NXOd)mfvedm{!GfkmVgobiD0IhU#X$!kP)@
zh4R7}$^tvJE#tYi&PTPPzz)~-Cd|9vj2%Uc%QO}kUm1!=*hY3BYYC;C*R`zZtO@p@
zDY!)yM$XcPr%vAsrpLAFm*G_b!tNUrVQwz|5|hmNOx<$j&EMd9r5*Y@p+a;S-kUB+
z#gXTmkibePNrC8KUPK5Pm-B31Oyq3jJkwY&oL1F*^Yi5S)P}e9#Xe`q4W2Gs^Hb*F
zL-Me1My2ofXl_0XF$0&}*gPxqwEZFLH%+ZE)MLG9|Mc8ShezhN9W92#n}?Xwdc{P#
zRu=QT!gQg5DYyi~z44>#=hBrj{MC{an(dhr;!?}+03^&TYlz#h0plX@kiKVMavh>8=r#9@Xs%+
zyeJ%-#&eh_-%ro;GStH~n5|^_zAn3E6G0(MduGEnVf{j2=EV|fp=u9_zJ^+}XHCmW
zdR20^|MT`_yMDS#|88JIf`(6Pa}lq(cFd~_FXgO0)%Yl&N>U=zw-2c{n$2(7DMctWJ^(WGm
zZM)4U{Kng#KWQ_CktG%<0^A>=2FpWl7p1uVX?gtsddB-ip|)?53i2Su;Q9!AXTmrF
z+^Pqta-P#KA(lIhz%4*4X^%G|r!=Ss%{FoXSu4GSc06R^k*zx#N=)=B8u(;+d~KIj
z*SB>w)3{$vQx@bNa+dzsyF!Ql{Jvb8-z62Kb8zUdM3bN&5?#-u&HqTctc+`0I=cR`
z_ouWQ2%G|nw?gx4@-;TY|B*Z$)sE$6$Hi{LH(9p>%Zx<7Qn_3L%JZ&|XqN6O+uBrG
zckF}Xy&ZAE3aGv`V{nTbc4}DmkIEBk#@0>2e=RZwmBD!%%cs<2cVOKE|4z9p09*ic
z{D|w_5M*48!C2o(vxRb|FfTdvve}OxYMhnz2w;IbfWY(*jgFVs<>!4*8>V&ssymdb
zIVL`IXaCC!5e)}Z7{}rS7%Uu3W^3D+uf`
zs(5eeW1Qx_g=~v9wbg)K9d8BQEU3AJE2>Tr
zluyvXEB8<0e_T{zQ;uVe534DMC%yoZ|Gnn{>d$az^-)3&8v3<8wayj?niosOTZs+L
z$XVS^eJX1InTl@^r7{HbKxzg{yy65N9gpAhSfwI}4%R+TokR(BcyU(1VNgmF)&$w_Qdvs2q{rBNh25skMBb=8qlo4ifiwgXn{H{Yo-T#_7b
z3dSeoHRTS!6}ck*cav5qb@H*n#aVt-YNZM`p}H|mlT9hnIn|OY^I7CQ?9yul#CG^?
z*n<&ME<&>`Ma6DLwR1l*`4w7l0*I}O{fw&N>6hf5z0OD2SFfsI|E$DYnZp1cAgu^$
z&ViTgk5>Zk&=A_NT3aCaUuYt`i9n<>YI<4?MQXbvsOCUMqBcM40!0i^{$%kG5Qv`7
z{!??JK>E6~DZpv|COY8Rv}!U?UFbwoWwx)+pSBk{3(^IQWTiU~x5)ujOqU%qfrl8(
zUE++0W(Q|G1EkOL;zc(QZ(Q5W4+RD?=B|qXYblxn_$~lwEWTcTAqyx3#jr%rbY$C;
zo(y4d#`&o0D*cDGZwPDJbuxbTDWll{avDG@VPV(T-($4_vm6e7-Vqg5B{L{LvND8gW)AJUHpB>K@{++oa;s$tNCE@ySW7Kk?hE9!Wi-unii
zB)-BT1SH1Xm$F};o_lM-!8eSppIy>u>YZ+h^A&f@KXC6F7!WqJKFRYbisMNHuyDt>
zWg^?YQZn=6k||vh_wuZYuUP{s@22}K>unp~O3=jjxq{tVuKNMB8g7)0xBzS{&95iD9Tl{u>%ZUruS&VF;Rd}d(-07(mhap_YtO{ACnVbC~0q
z!td3WKTfoHq}oVCaUvv`B^w*3WFy$lCXZwrk7GGp1%uauDY4;@m-nPuS8riC-84RD
z+0NRx;(}bf_&bMFae7}}eWQdshauZJ=$hVUgKufY#^rL%fCBF1_W!Mk`8WI3EF2g>|aD`)-KxqM!F{9
w`A|)f{cIbA`P2_%K=WTNlUu8<%w363n=qGD+V?$2^bZ5-u&aHwoo~|r0PgMwyZ`_I

literal 0
HcmV?d00001

diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..c7f98a71b388752f2497711860cf9ae64dca3c0e
GIT binary patch
literal 133982
zcmeI5YmC*#6~|43)DQiTN|BG
z_2bz78x8i(wP(g>eserN<2hqlWAwjm+bsS6eb!e$@iFUO%d#HQK}T6nkGU1E4;{DX
z?>%aT7#`4RP1oTS9d_!_q(iF?eL5(HT+09qfCVrCHoyp20W*OaR7zR)P)%C5ubr&-
z3v_7Kfy`0{K^Oo#U}%yKzSy?2jAOso+s=PjAJ^y*r2M>wa&uzJmWjPu+k2c
z4tcI#{NU|EE(7xL_nXUX=t#sghRu#7xKu#7fJp8fGG)jl`SH>8$)tv)H9#pFw#
zz4I*DKDT$(Wid>J+?VlnU*y?4&rulco+aDo-g@qgNVei)
z*q#r0uFSJ!`&|9MuaRZjI6HZ+%(GPcT>s4>_2T0v$TNBN%z$M3TcasEY&{O+T5$q56Uu|LGFz_yYnpBKKJI2Pm^U^Kf|z3p51wtYM-my-9eTeSO(MN
z*_mgl_PO4kLAB^nz5^P4T)ZdGr94Zv&+S}tfx6j6H&Z{CvJ9C>wa;B{x~XP<+PTcd
zdMdAfQ$LU9L#%ynSgBP%I7QuDMmJMGk7gP2kZPa%-#^>Qas`&j^Jt!>+UIU`4Jtf0
z^4f>+bKmT5j4&~Gn=apxv_PH4RkCW%}
z?kq$3HIBZO$wTV*bJyDj)Vzs&2Q>8*WS>XD>gc@jEcN@jvq!o!%UBRS
z8}ypI@hs6kmw^BA%(k68@x1)0Mv?17yua>hX88)LXM}78Coep2
z__fUSTT!l{x`@}6es`D$o?p1HPIX+Aw|?uXatppWn`T
zc^+k*=Y@~x^;@;i3TfNE)$~8^g-^fdWS!?DJKCk8tUBm_JhJ{ymU)(HpIi5H`XBeJ
zcfFo3h3C~jYzn>2O0>^4(EoVo^=xNd3ePhFzjr5z_Br|=k4G~gOnZG+OSI3?|9HH*8Ei}E8BAlo
zUvWFM|1Hu!r~QvdF-By+ZyuMnmo)GUzl3X_bzh%MqJ573$4gm@qy43UXXxmg*9RTH
zuasz?Ls{v6oIHcua@&i2ldp(8W%9q(wg)&g=JGyVIAJXrIHF
zJ^ha-qnp8Z+IR-ndsg214nmrJ4*mSszeoS$PI@!0xHR%StZfGex3n6SEoKkj9&yzh
z^KpI#q>*Pa0NV-z|KorB9M_;qx}A|{8SjT@
znLG#Q8Dlw7_5+!AFx}7ovwxKe7lK14fGS3D7+hxi@wBxKDLlXY<$5*HrzeyO+RVJ$wAE>z%PWOv)WP0Wm&MTBc8>nX
z)7UN~@jUx}y^gD1%S^(CZ<`l={shNQgpZ#Tw>e2XqinDxNZFb{>Q=KpLpxnDGm`(7
z#xrD9uh%q_vK`oPl{z{_I$9#ni@$I})EdQ`e%nl@Q^K@Fo}r`PS$tlKidKC$hSbt;
zG?3{OFfEm5_%u9!yhjYvt$kM=47s4+A<5o>wsm4J$6DfIwp>1GwHe%of+dB%68m=`5&<2pg)*>77k=P&t6z3RUytKWh4
zwRr}|T1*|qwNJZ#HgejrK+b#?^Q=G{d+l3Xm%`Lh9Q&;B3|YZHv$PFhRWxpiiXIG$0Unm==1OB`)2Ydk|{@Chny
z!#dw@{)l5OQ8S%Io)8E}Sc{&U
zkZ0ziy!Wi~44Ku{bckg7;1elmayAh9(bNR;h5^YB*Ra7abs$Dk7F%i
zGMxvWAurf|hh%8y`S$(*<^$tUl4lvg8x1XF2r9Q)8BF$;!
ziRamRjaPghBysEM?I=$?LtcOV{wW20C~-S~LeFdASW8vUsl4$Frr%pD%O{P!
zZ5`U$R#kn5q2tn=Mjm;V=#$3I^w#HF$aKK>!#wf~{UgyQjbR#NEz6(eSWA%SL|%D@
ztR(uRF-*7Xbw%e-=DZfaOy`+ri9Trz&)A=Q|C+-5b-#6*=kxQ-GwNNUPZ~SZwJSK*
z;-`J)ooC2OqE8yb^ssiru;!;6Yw^l7c|KZrrc3lmW0=NVn-?GFycRD^ljmFgQ>i{_
z4AU3%SPSfoUg|W@=aA=-_brJ&X$;TUA9|Z(EtT3Tc^=^zvXbbN#?JKHFL11-9Mj}^
zG|y6f(io--V=YfLvfrU~j}zDAxl}GvebN}FJ1%mp#ffFak>^sLAs2~0X$;TUH~y!K
zV=WFknmjx6EY&BCo#{O*Io49Fr^&N3&ybT;pEQPPjJ2Ttit99?zxxu(chvopXLp`a
zKT>_t7^X4S^3oUUN7ZQpT!H1*1oADpZ}ME8XURTk4AU1HZX`X{0+yS|v#AkP(#|Bv
z#*{&-Pnr?wDRp>zqGK&!d8d(Al6&gs^7`4-jZ~jBcBZ$@IhT}P0L!l!StYqA&)#^J
z?32bYJ3EOi**nju
zFR4Ch4A0m%9*BLc1uR=SG$+k8dG^P%WS=y4rr-U`Wk>xL0dLJZU$Bg@AcFLL-3NL0
z$200nvQHYrG<@}~eKwY{mIXGRCnwD_^Y_m)Wj0D?lWaUgN7qn3qvYf3`9j$xD!Ur6
zT*UKK)=8pu!uF&4Pyrd7>cBH}^!kA51uX}!3toqm-7VRzH!K(FXYf2;hki00SWl3#
zc-tpf9bblL5w;GtC$=Y#3>0h{6?h)2)7tGZJ?f))^%3PgB5yD{*3Pm+e*^j%;T|1M
z=|K5W1`-(nn_#qH)37s*IF~R{$9L%<@qSpQ{MHMY1e*nJ?JSqk&xY}7WSZ?+kWK^3
zVAAmEM?afuCg|(g_sFk4l=3VDgJ98cS=js3&*ob6RrrobrjueD>=pXUA@K~ZVfVmy
zOSDgu>$tcEYhVuS8QnT+A5cHr)4-U^IvwJ=C+3q+S%WdKW@oSDI0T+en)u$MhFr5<
zhs*$&0$YZ&vilHuHu+4_dE=Ro_?!S;2I}&3$^h(uA+Th)^0beDXM4Vw?}9m8n3ssT
zwoN*;>L9{rjV=dyPfiBL*9(|1^RUf)KRZLdj*EF#>Wo#q{a$ryyIyguW!;VV!P5A<
z5Z_rEk4RPP5dWBtpWzTcPRBb$TX%O_!%p!Z@3b6>V_A1~TD?x^kLk3WifQRsxA-$o
z=~&NMZt=B_=TEWR;%7LX|4GYlykjzqqy#7dN`Mle1SkPYfD)htC;>`<5~wJF8IEW8
ze=nssh~R2)z09MaltO(
HV#oMD1}XO>

literal 0
HcmV?d00001

diff --git a/assets/img/favicon.png b/assets/img/favicon.png
deleted file mode 100644
index 7737268571726fc43479a2dbb66d9e9e5523b7ed..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1456
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+m{T%CB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxKsVXI%s|1+P|wiV
z#N6CmN5ROz&_Lh7NZ-&%*U;R`*vQJjKmiJrfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8EkR}&8R-I5=oVMzl_XZ^<`pZ$OmImpPA){ffi_eM3D1{oGuTzrd=COM+4n&cLd=IHa;5RX-@T
zIKQ+g85kdF$}r8qu)}W=NFmTQR{lkqz(`5Vami0E%}vcK@pQ3O0?O#6WTsd-Ihi`T
zI6D~|TADb!niv{7xmlVzx|%wf8dx|x8XFnH%)qAC&Dhe-(89vf)YRC~(9qSy!p+#g
z$<)}u#mvRf%+=Byrq?sCxFj(zITdDaCeU7}UJJZ>t(=Qe6HD@oLh|!-U@0IVBfliS
zI3vG6!8zDeAv`lLCBM8F6gd#Tx}+9mmZhe+73JqDfJ4_R6N~NUZjLU7E{@K|K>IP;ah#PorV(FY|Bq@)590;WF@6Q1ya9C+4A%>(9_B4Eal
zustflz`*#()5S5Q;?|y^z1bm-0`qUq{Vw=UPkxdTXO@S9;z{`g;g8HbFOyP}GgZyZ
z!pxEq6(eqCC}#a@H>u)Sw01$OfB>grdApip(SyC!@89-pcHi;+UZWBR-y5UNyFbsq
z|EDaVD)Y%U>+Sv!fXv5#fOL)(GxR=Vae0rL_Q2pI_n_b_2
z$f`v0EITkEkLl}f>F;OWYV()dywlUFw#)lv#^
zvGH>FrM2ePkIr9t`=_%_Tebhfj8$6$tnR*ia&mU`gq;jtq9&3}Tc4`M#$`F#U*%bu
zwIoqXAW5%NRKeU!I#h0Tb@BS`zjl57oRqV=NHelLx$=|d-dp=N|J?ig0k6HZp*IsX@9TW5c|5R`Dfm(xD9F=zaI056c{jXJgU;A
z)6BPy)lMoHMbT
S^dwJ!%1}>NKbLh*2~7Ye5EQro

diff --git a/assets/img/home.svg b/assets/img/home.svg
new file mode 100644
index 0000000..dfe389b
--- /dev/null
+++ b/assets/img/home.svg
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/ms.svg b/assets/img/ms.svg
new file mode 100644
index 0000000..88df967
--- /dev/null
+++ b/assets/img/ms.svg
@@ -0,0 +1,27 @@
+
+
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+
diff --git a/assets/img/rectangle.svg b/assets/img/rectangle.svg
new file mode 100644
index 0000000..5c14c43
--- /dev/null
+++ b/assets/img/rectangle.svg
@@ -0,0 +1,9 @@
+
+
+	
+	
+
diff --git a/assets/img/social.svg b/assets/img/social.svg
new file mode 100644
index 0000000..bbc017e
--- /dev/null
+++ b/assets/img/social.svg
@@ -0,0 +1,29 @@
+
+
+	
+	
+	
+	
+	
+	
+
+	
+	
+
diff --git a/assets/js/backgroundPosition.js b/assets/js/backgroundPosition.js
new file mode 100644
index 0000000..ff08225
--- /dev/null
+++ b/assets/js/backgroundPosition.js
@@ -0,0 +1,11 @@
+/*  BACKGROUND POSITION EXAMPLE  */
+var bgPos = document.getElementById('bgPos'),
+	bgBox = bgPos.querySelector('.example-box'),
+	bgb = bgPos.querySelector('.btn'),	
+	bpTween = KUTE.to(bgBox, {backgroundPosition: ['0%','50%']}, { yoyo: true, repeat: 1, duration: 1500, easing: 'easingCubicOut'});
+	
+bgb.addEventListener('click', function(e){
+	e.preventDefault();
+	!bpTween.playing && bpTween.start();
+},false);	
+/*  BACKGROUND POSITION EXAMPLE  */
diff --git a/assets/js/borderRadius.js b/assets/js/borderRadius.js
new file mode 100644
index 0000000..6aa183e
--- /dev/null
+++ b/assets/js/borderRadius.js
@@ -0,0 +1,12 @@
+
+/* RADIUS EXAMPLES */
+var radiusBtn = document.getElementById('radiusBtn');
+var allRadius = KUTE.to('#allRadius',{borderRadius:80},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
+var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
+var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
+var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
+var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
+radiusBtn.addEventListener('click',function(){
+    if (!allRadius.playing) { allRadius.start(); tlRadius.start(); trRadius.start(); blRadius.start(); brRadius.start(); }
+}, false);
+/* RADIUS EXAMPLES */
\ No newline at end of file
diff --git a/assets/js/boxModel.js b/assets/js/boxModel.js
new file mode 100644
index 0000000..bf705d6
--- /dev/null
+++ b/assets/js/boxModel.js
@@ -0,0 +1,49 @@
+/*  BOX MODEL EXAMPLE  */
+var boxModel = document.getElementById('boxModel'),
+	btb = boxModel.querySelector('.btn'),
+    box = boxModel.querySelector('.example-box-model');
+    
+// built the tween objects
+var bm1 = KUTE.to(box,{width:250},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onWidth});
+var bm2 = KUTE.to(box,{height:250},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onHeight});
+var bm3 = KUTE.to(box,{left:250},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onLeft});
+var bm4 = KUTE.to(box,{top:-250},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onTop, onComplete: onComplete});
+
+var bm5 = KUTE.to(box,{marginTop:50},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onMarginTop});
+var bm6 = KUTE.to(box,{marginBottom:50},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onMarginBottom});
+var bm7 = KUTE.to(box,{paddingTop:15},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onPadding});
+var bm8 = KUTE.to(box,{marginTop:50,marginLeft:50,marginBottom:70},{ yoyo: true, repeat: 1, duration: 1500, onUpdate: onMargin, onComplete: onComplete});
+
+// chain the bms
+try{
+	bm1.chain(bm2);
+	bm2.chain(bm3);
+	bm3.chain(bm4);
+	bm4.chain(bm5);
+	bm5.chain(bm6);
+	bm6.chain(bm7);
+	bm7.chain(bm8);
+}catch(e){
+	console.error(e+". TweenBase doesn\'t support chain method")
+}
+
+//callback functions
+function onWidth() { box.innerHTML = 'WIDTH
    '+parseInt(box.offsetWidth)+'px'; }
+function onHeight() { box.innerHTML = 'HEIGHT
    '+parseInt(box.offsetHeight)+'px'; }
+function onLeft() { box.innerHTML = 'LEFT
    '+parseInt(box.offsetLeft)+'px'; }
+function onTop() { box.innerHTML = 'TOP
    '+parseInt(box.offsetTop)+'px'; }
+
+function onMarginTop() { box.innerHTML = parseInt(box.style.marginTop)+'px'+'
    MARGIN'; }
+function onMarginBottom() { box.innerHTML = 'MARGIN
    '+parseInt(box.style.marginBottom)+'px'; }
+function onPadding() { box.innerHTML = parseInt(box.style.paddingTop)+'px
    PADDING'; }
+function onMargin() { box.innerHTML = 'MARGIN
    '+parseInt(box.style.marginTop)+'px'; }
+
+function onComplete() { box.innerHTML = 'BOX
     MODEL '; }
+
+btb.addEventListener('click', function(e){
+	e.preventDefault();
+	!bm1.playing && !bm2.playing && !bm3.playing && !bm4.playing 
+    !bm5.playing && !bm6.playing && !bm7.playing && !bm8.playing 
+    && bm1.start();
+},false);
+/*  BOX MODEL EXAMPLE  */
\ No newline at end of file
diff --git a/assets/js/clipProperty.js b/assets/js/clipProperty.js
new file mode 100644
index 0000000..1af3688
--- /dev/null
+++ b/assets/js/clipProperty.js
@@ -0,0 +1,25 @@
+
+/*  CLIP EXAMPLE  */
+var clipExample = document.getElementById('clip'),
+	clipElement = clipExample.querySelector('.example-box'),
+	clpbtn = clipExample.querySelector('.btn');
+
+var clp1 = KUTE.to(clipElement, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
+var clp2 = KUTE.to(clipElement, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
+var clp3 = KUTE.to(clipElement, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
+var clp4 = KUTE.to(clipElement, {clip: [0,150,150,0]}, {duration:1200, easing: 'easingExponentialInOut'});
+
+//chain some clps
+try{
+	clp1.chain(clp2);
+	clp2.chain(clp3);
+	clp3.chain(clp4);
+}catch(e){
+	console.error(e+". TweenBase doesn\'t support chain method")
+}
+
+clpbtn.addEventListener('click', function(e){
+	e.preventDefault();	
+	!clp1.playing && !clp2.playing && !clp3.playing && !clp4.playing && clp1.start();
+},false);
+/*  CLIP EXAMPLE  */
diff --git a/assets/js/colorProperties.js b/assets/js/colorProperties.js
new file mode 100644
index 0000000..225ed6b
--- /dev/null
+++ b/assets/js/colorProperties.js
@@ -0,0 +1,39 @@
+/*  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, {color: '#fff'}, {duration: 1000});
+var colTween4 = KUTE.to(colBoxElement, {backgroundColor: '#9C27B0'}, {duration: 1000});
+var colTween5 = KUTE.to(colBoxElement, {borderColor: '#069'}, {duration: 1000});
+var colTween6 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1000});
+var colTween7 = KUTE.to(colBoxElement, {borderRightColor: '#9C27B0'}, {duration: 1000});
+var colTween8 = KUTE.to(colBoxElement, {borderBottomColor: '#9C27B0'}, {duration: 1000});
+var colTween9 = KUTE.to(colBoxElement, {borderLeftColor: '#9C27B0'}, {duration: 1000});
+var colTween10 = KUTE.to(colBoxElement, {outlineColor: '#9C27B0'}, {duration: 1000, repeat: 1, yoyo: true});
+
+
+try {
+	colTween1.chain(colTween2);
+	colTween2.chain(colTween3);
+	colTween3.chain(colTween4);
+	colTween4.chain(colTween5);
+	colTween5.chain(colTween6);
+	colTween6.chain(colTween7);
+	colTween7.chain(colTween8);
+	colTween8.chain(colTween9);
+	colTween9.chain(colTween10);
+} catch(e){
+	console.error(e+". TweenBase doesn\'t support chain method")
+}
+
+
+colbtn.addEventListener('click', function(e){
+	e.preventDefault();
+	!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing 
+	!colTween5.playing && !colTween6.playing && !colTween7.playing && !colTween8.playing 
+	!colTween9.playing && !colTween10.playing && colTween1.start();
+},false);
+/*  COLORS EXAMPLE  */
\ No newline at end of file
diff --git a/assets/js/css.js b/assets/js/css.js
deleted file mode 100644
index ec680a9..0000000
--- a/assets/js/css.js
+++ /dev/null
@@ -1,147 +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;
-
-
-/* RADIUS EXAMPLES */
-var radiusBtn = document.getElementById('radiusBtn');
-var allRadius = KUTE.to('#allRadius',{borderRadius:80},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
-var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
-var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
-var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
-var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
-radiusBtn.addEventListener('click',function(){
-    if (!allRadius.playing) { allRadius.start(); tlRadius.start(); trRadius.start(); blRadius.start(); brRadius.start(); }
-}, false);
-/* RADIUS EXAMPLES */
-
-
-/*  BOX MODEL EXAMPLE  */
-var boxModel = document.getElementById('boxModel'),
-	btb = boxModel.querySelector('.btn'),
-	box = boxModel.querySelector('.example-box-model');
-
-// built the tween objects
-var bm1 = KUTE.to(box,{marginTop:50},{ yoyo: true, repeat: 1, duration: 1500, update: onMarginTop});
-var bm2 = KUTE.to(box,{marginBottom:50},{ yoyo: true, repeat: 1, duration: 1500, update: onMarginBottom});
-var bm3 = KUTE.to(box,{paddingTop:15},{ yoyo: true, repeat: 1, duration: 1500, update: onPadding});
-var bm4 = 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);
-
-
-//callback functions
-function onMarginTop() { box.innerHTML = parseInt(box.style.marginTop)+'px'+'
    MARGIN'; }
-function onMarginBottom() { box.innerHTML = 'MARGIN
    '+parseInt(box.style.marginBottom)+'px'; }
-function onPadding() { box.innerHTML = parseInt(box.style.paddingTop)+'px
    PADDING'; }
-function onMargin() { box.innerHTML = 'MARGIN
    '+parseInt(box.style.marginTop)+'px'; }
-
-function onComplete() { box.innerHTML = 'BOX
     MODEL '; }
-
-btb.addEventListener('click', function(e){
-	e.preventDefault();
-	!bm1.playing && !bm2.playing && !bm3.playing && !bm4.playing && bm1.start();
-},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 = '' + chars.join('') + '';
-var charsObject = heading.getElementsByTagName('SPAN'), l = charsObject.length;
-
-
-// built the tween objects
-var buttonTween = KUTE.fromTo(button, 
-		{width: 150, opacity:0, height: 70, lineHeight:70, fontSize: 40}, 
-		{width: 100, opacity:1, height: 35, lineHeight:35, fontSize: 20}),
-	headingTween = KUTE.fromTo(heading, {opacity:0}, {opacity:1}),
-	tps = KUTE.allFromTo(charsObject, 
-        { height: 50, fontSize:80, letterSpacing: 20}, 
-        { height: 35, fontSize:50, letterSpacing: 0}, 
-        { offset: 250, duration: 500, easing: 'easingCubicOut'});
-
-	tps.tweens[tps.tweens.length-1].chain(buttonTween);
-
-tbt.addEventListener('click', function(e){
-	e.preventDefault();
-    if (!headingTween.playing && !tps.playing ) {
-        if (isIE8) { button.style.filter ="alpha(opacity=0)"; heading.style.filter ="alpha(opacity=0)"; } else { button.style.opacity = ''; heading.style.opacity = ''; }
-		headingTween.start();
-		tps.start();
-    }
-},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, {borderColor: '#069'}, {duration: 1000});
-var colTween2 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1000});
-var colTween3 = KUTE.to(colBoxElement, {borderRightColor: '#9C27B0'}, {duration: 1000});
-var colTween4 = KUTE.to(colBoxElement, {borderBottomColor: '#9C27B0'}, {duration: 1000});
-var colTween5 = KUTE.to(colBoxElement, {borderLeftColor: '#9C27B0'}, {duration: 1000});
-var colTween6 = KUTE.to(colBoxElement, {outlineColor: '#9C27B0'}, {duration: 1000, repeat: 1, yoyo: true});
-
-colTween1.chain(colTween2);
-colTween2.chain(colTween3);
-colTween3.chain(colTween4);
-colTween4.chain(colTween5);
-colTween5.chain(colTween6);
-
-
-colbtn.addEventListener('click', function(e){
-	e.preventDefault();
-	!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing && !colTween5.playing && !colTween6.playing && colTween1.start();
-},false);
-/*  COLORS EXAMPLE  */
-
-
-/*  CLIP EXAMPLE  */
-var clipExample = document.getElementById('clip'),
-	clipElement = clipExample.querySelector('.example-box'),
-	clpbtn = clipExample.querySelector('.btn');
-
-var clp1 = KUTE.to(clipElement, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
-var clp2 = KUTE.to(clipElement, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
-var clp3 = KUTE.to(clipElement, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
-var clp4 = KUTE.to(clipElement, {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.playing && !clp2.playing && !clp3.playing && !clp4.playing && clp1.start();
-},false);
-/*  CLIP EXAMPLE  */
-
-
-/*  BACKGROUND POSITION EXAMPLE  */
-var bgPos = document.getElementById('bgPos'),
-	bgBox = bgPos.querySelector('.example-box'),
-	bgb = bgPos.querySelector('.btn'),	
-	bpTween = KUTE.to(bgBox, {backgroundPosition: ['0%','50%']}, { yoyo: true, repeat: 1, duration: 1500, easing: 'easingCubicOut'});
-	
-bgb.addEventListener('click', function(e){
-	e.preventDefault();
-	!bpTween.playing && bpTween.start();
-},false);	
-/*  BACKGROUND POSITION EXAMPLE  */
diff --git a/assets/js/easing.js b/assets/js/easing.js
deleted file mode 100644
index c428f51..0000000
--- a/assets/js/easing.js
+++ /dev/null
@@ -1,77 +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;
-
-/* EASINGS EXAMPLES */
-var featurettes = document.querySelectorAll('.featurettes'), l=featurettes.length,
-    esProp1 = isIE && isIE < 9 ? { left:0 } : { translate: 0},
-    esProp2 = isIE && isIE < 9 ? { left:250 } : { translate: 250},
-    tweenEasingElements = [], easings = [], startEasingTween = [], easingSelectButton = [], tweenEasing1 = [], tweenEasing2 = [];
-
-// populate tween objects, triggers, elements
-for (var i=0; itop performance, memory efficient & modular code. It delivers a whole bunch of tools to help you create great custom animations.'}, {duration:4000, easing: 'easingCubicInOut'});
-	    btnst = KUTE.allFromTo(btns, {rotate: 45, opacity: 0 }, { rotate: 0, opacity: 1 }, {transformOrigin: '250px center 0px', offset: 200, duration:700, easing: 'easingCubicInOut'});
-	hd.chain(ld);
-    ld.chain(btnst);
-    textOpened = true;
-}
\ No newline at end of file
+t0.start()
\ No newline at end of file
diff --git a/assets/js/attr.js b/assets/js/htmlAttributes.js
similarity index 79%
rename from assets/js/attr.js
rename to assets/js/htmlAttributes.js
index b3fec5a..0f07c21 100644
--- a/assets/js/attr.js
+++ b/assets/js/htmlAttributes.js
@@ -7,9 +7,14 @@ var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40,fillOpacity:0.3}}
 var coordinatesTween2 = KUTE.to('#circle', {attr: {cx:110,cy:40}}, { duration: 400,  easing: 'linear'});
 var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75,fillOpacity:1}}, { easing: 'easingCubicOut'});
 
-coordinatesTween1.chain(coordinatesTween2);
-coordinatesTween2.chain(coordinatesTween3);
-coordinatesTween3.chain(radiusTween);
+try{
+    coordinatesTween1.chain(coordinatesTween2);
+    coordinatesTween2.chain(coordinatesTween3);
+    coordinatesTween3.chain(radiusTween);
+}catch(e){
+    console.error(e+". TweenBase doesn\'t support chain method")
+}
+
 
 var circleBtn = document.getElementById('circleBtn');
 circleBtn.addEventListener('click', function(){
@@ -23,9 +28,15 @@ var closingGradient = KUTE.to('#gradient',{attr: {x1:'49%', x2:'49%', y1:'49%',
 var rotatingGradient1 = KUTE.to('#gradient',{attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}}, {easing: 'easingCubicInOut'});
 var rotatingGradient2 = KUTE.to('#gradient',{attr: {x1:'0%', x2:'51%', y1:'100%', y2:'0%'}}, {easing: 'easingCubicInOut'});
 var openingGradient = KUTE.to('#gradient',{attr: {x1:'0%', x2:'0%', y1:'0%', y2:'100%'}}, {duration: 1500, easing: 'easingCubicInOut'});
-closingGradient.chain(rotatingGradient1);
-rotatingGradient1.chain(rotatingGradient2);
-rotatingGradient2.chain(openingGradient);
+
+try{
+    closingGradient.chain(rotatingGradient1);
+    rotatingGradient1.chain(rotatingGradient2);
+    rotatingGradient2.chain(openingGradient);
+}catch(e){
+    console.error(e+". TweenBase doesn\'t support chain method")
+}
+
 gradBtn.addEventListener('click', function(){
     !closingGradient.playing && !rotatingGradient1.playing && !rotatingGradient2.playing && !openingGradient.playing && closingGradient.start();
 });
diff --git a/assets/js/kute-bezier.min.js b/assets/js/kute-bezier.min.js
deleted file mode 100644
index 4c5270b..0000000
--- a/assets/js/kute-bezier.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// KUTE.js | © dnp_theme | Bezier Plugin | MIT-License
-!function(a,b){if("function"==typeof define&&define.amd)define(["kute.js"],b);else if("object"==typeof module&&"function"==typeof require)module.exports=b(require("kute.js"));else{if("undefined"==typeof a.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js");b(a.KUTE)}}(this,function(a){"use strict";var b="undefined"!=typeof global?global:window;b.Bezier=function(a,b,d,e){return c.pB(a,b,d,e)};var c=b.Bezier.prototype;c.ni=4,c.nms=.001,c.sp=1e-7,c.smi=10,c.ksts=11,c.ksss=1/(c.ksts-1),c.f32as="Float32Array"in b,c.msv=c.f32as?new Float32Array(c.ksts):new Array(c.ksts),c.A=function(a,b){return 1-3*b+3*a},c.B=function(a,b){return 3*b-6*a},c.C=function(a){return 3*a},c.pB=function(a,b,d,e){this._p=!1;var f=this;return function(g){return f._p||c.pc(a,d,b,e),a===b&&d===e?g:0===g?0:1===g?1:c.cB(c.gx(g,a,d),b,e)}},c.cB=function(a,b,d){return((c.A(b,d)*a+c.B(b,d))*a+c.C(b))*a},c.gS=function(a,b,d){return 3*c.A(b,d)*a*a+2*c.B(b,d)*a+c.C(b)},c.bS=function(a,b,d,e,f){var g,h,i=0,j=c.sp,k=c.smi;do h=b+(d-b)/2,g=c.cB(h,e,f)-a,g>0?d=h:b=h;while(Math.abs(g)>j&&++i=c.nms?c.nri(a,i,b,d):0===j?i:c.bS(a,e,k,b,d)},c.pc=function(a,b,d,e){this._p=!0,a==d&&b==e||c.csv(a,b)},b.Ease={},b.Ease.easeIn=function(){return c.pB(.42,0,1,1)},b.Ease.easeOut=function(){return c.pB(0,0,.58,1)},b.Ease.easeInOut=function(){return c.pB(.5,.16,.49,.86)},b.Ease.easeInSine=function(){return c.pB(.47,0,.745,.715)},b.Ease.easeOutSine=function(){return c.pB(.39,.575,.565,1)},b.Ease.easeInOutSine=function(){return c.pB(.445,.05,.55,.95)},b.Ease.easeInQuad=function(){return c.pB(.55,.085,.68,.53)},b.Ease.easeOutQuad=function(){return c.pB(.25,.46,.45,.94)},b.Ease.easeInOutQuad=function(){return c.pB(.455,.03,.515,.955)},b.Ease.easeInCubic=function(){return c.pB(.55,.055,.675,.19)},b.Ease.easeOutCubic=function(){return c.pB(.215,.61,.355,1)},b.Ease.easeInOutCubic=function(){return c.pB(.645,.045,.355,1)},b.Ease.easeInQuart=function(){return c.pB(.895,.03,.685,.22)},b.Ease.easeOutQuart=function(){return c.pB(.165,.84,.44,1)},b.Ease.easeInOutQuart=function(){return c.pB(.77,0,.175,1)},b.Ease.easeInQuint=function(){return c.pB(.755,.05,.855,.06)},b.Ease.easeOutQuint=function(){return c.pB(.23,1,.32,1)},b.Ease.easeInOutQuint=function(){return c.pB(.86,0,.07,1)},b.Ease.easeInExpo=function(){return c.pB(.95,.05,.795,.035)},b.Ease.easeOutExpo=function(){return c.pB(.19,1,.22,1)},b.Ease.easeInOutExpo=function(){return c.pB(1,0,0,1)},b.Ease.easeInCirc=function(){return c.pB(.6,.04,.98,.335)},b.Ease.easeOutCirc=function(){return c.pB(.075,.82,.165,1)},b.Ease.easeInOutCirc=function(){return c.pB(.785,.135,.15,.86)},b.Ease.easeInBack=function(){return c.pB(.6,-.28,.735,.045)},b.Ease.easeOutBack=function(){return c.pB(.175,.885,.32,1.275)},b.Ease.easeInOutBack=function(){return c.pB(.68,-.55,.265,1.55)},b.Ease.slowMo=function(){return c.pB(0,.5,1,.5)},b.Ease.slowMo1=function(){return c.pB(0,.7,1,.3)},b.Ease.slowMo2=function(){return c.pB(0,.9,1,.1)}});
\ No newline at end of file
diff --git a/assets/js/kute-bs.js b/assets/js/kute-bs.js
deleted file mode 100644
index 3aafeea..0000000
--- a/assets/js/kute-bs.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/* 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 (root,factory) {
-  if (typeof define === 'function' && define.amd) {
-    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("Box Shadow Plugin require KUTE.js.");
-  }
-}(this, function (KUTE) {
-  'use strict';
-  
-  // add a reference to KUTE object
-  var g = typeof global !== 'undefined' ? global : window, K = KUTE, 
-    // add a reference to KUTE utilities
-    prepareStart = K.prepareStart, parseProperty = K.parseProperty,
-    property = K.property, getCurrentStyle = K.getCurrentStyle, trueColor = K.truC,
-    DOM = K.dom, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolation functions
-
-    // 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;
-    _boxShadow = property('boxShadow'), // note we're using the KUTE.property() autopreffix utility
-    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
-    
-    // utility function to process values accordingly
-    // numbers must be integers and color must be rgb object
-    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] = trueColor(newShadow[4]);
-      return newShadow;
-    };
-
-  // for the .to() method, you need to prepareStart the boxShadow property
-  // which means you need to read the current computed value
-  prepareStart.boxShadow = function(property,value){
-    var cssBoxShadow = getCurrentStyle(this.element,_boxShadow);
-    return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
-  }
-
-  // the parseProperty 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]
-  parseProperty['boxShadow'] = function(property,value,element){
-    if ( !('boxShadow' in DOM) ) {
-      
-      // the DOM update function for boxShadow registers here
-      // we only enqueue it if the boxShadow property is used to tween
-      DOM['boxShadow'] = function(element,property,startValue,endValue,progress) {
-
-        // let's start with the numbers | set unit | also determine inset
-        var numbers = [], px = 'px', // the unit is always px
-          inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false; 
-        for (var i=0; i<4; i++){
-          numbers.push( unit( startValue[i], endValue[i], px, progress ) );
-        }
-
-        // now we handle the color
-        var colorValue = color(startValue[4], endValue[4], progress);          
-        
-        // the final piece of the puzzle, the DOM update
-        element.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
-      };
-    }
-    
-    // parseProperty for boxShadow, builds basic structure with ready to tween values
-    if (typeof value === 'string'){
-      var shadowColor, 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"
-      shadowColor = value.match(colRegEx); 
-      value = value.replace(shadowColor[0],'').split(' ').concat([shadowColor[0].replace(/\s/g,'')],[inset]);
-      
-      value = processBoxShadowArray(value);
-    } else if (value instanceof Array){
-      value = processBoxShadowArray(value);
-    }
-    return value;
-  }
-    
-  return this;
-}));
\ No newline at end of file
diff --git a/assets/js/kute-physics.min.js b/assets/js/kute-physics.min.js
deleted file mode 100644
index 592abf3..0000000
--- a/assets/js/kute-physics.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// KUTE.js | © dnp_theme | Physics Plugin | MIT-License
-!function(a,b){if("function"==typeof define&&define.amd)define(["kute.js"],b);else if("object"==typeof module&&"function"==typeof require)module.exports=b(require("kute.js"));else{if("undefined"==typeof a.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js");b(a.KUTE)}}(this,function(a){"use strict";var b="undefined"!=typeof global?global:window;b.spring=function(a){a=a||{};var b=Math.max(1,(a.frequency||300)/20),d=Math.pow(20,(a.friction||200)/100),e=a.anticipationStrength||0,f=(a.anticipationSize||0)/1e3;return function(a){var g,h,i,j,k,l,m,n,o=1-f;return l=a/o-f/o,a.001;)h=c.b-c.a,c={a:c.b,b:c.b+h*b,H:c.H*b*b};return c.b}(),function(){var a,d,i,j;for(d=Math.sqrt(2/(f*h*h)),i={a:-d,b:d,H:1},g&&(i.a=0,i.b=2*i.b),c.push(i),a=h,j=[];i.b<1&&i.H>.001;)a=i.b-i.a,i={a:i.b,b:i.b+a*b,H:i.H*e},j.push(c.push(i));return j}(),function(b){var e,f,i;for(f=0,e=c[f];!(b>=e.a&&b<=e.b)&&(f+=1,e=c[f]););return i=e?d.getPointInCurve(e.a,e.b,e.H,b,a,h):g?0:1}};var d=b.gravity.prototype;d.getPointInCurve=function(a,b,c,d,e,f){var g,h;return f=b-a,h=2/f*d-1-2*a/f,g=h*h*c-c+1,e.initialForce&&(g=1-g),g},b.forceWithGravity=function(a){var c=a||{};return c.initialForce=!0,b.gravity(c)},b.BezierMultiPoint=function(a){a=a||{};var b=a.points,c=!1,d=[];return function(){var a,c;for(a in b){if(c=parseInt(a),c>=b.length-1)break;e.fn(b[c],b[c+1],d)}return d}(),function(a){return 0===a?0:1===a?1:e.yForX(a,d,c)}};var e=b.BezierMultiPoint.prototype;e.fn=function(a,b,c){var d=function(c){return e.Bezier(c,a,a.cp[a.cp.length-1],b.cp[0],b)};return c.push(d)},e.Bezier=function(a,b,c,d,e){return{x:Math.pow(1-a,3)*b.x+3*Math.pow(1-a,2)*a*c.x+3*(1-a)*Math.pow(a,2)*d.x+Math.pow(a,3)*e.x,y:Math.pow(1-a,3)*b.y+3*Math.pow(1-a,2)*a*c.y+3*(1-a)*Math.pow(a,2)*d.y+Math.pow(a,3)*e.y}},e.yForX=function(a,b,c){var d,e,f,g,h,i,j,k,l=0,m=b.length;for(d=null,l;l=e(0).x&&a<=e(1).x&&(d=e),null===d);l++);if(!d)return c?0:1;for(k=1e-4,g=0,i=1,h=(i+g)/2,j=d(h).x,f=0;Math.abs(a-j)>k&&f<100;)a>j?g=h:i=h,h=(i+g)/2,j=d(h).x,f++;return d(h).y},b.Physics={physicsInOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-c/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+c/1e3,y:1}]}]})},physicsIn:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-c/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+c/1e3,y:1}]}]})},physicsBackOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+c/1e3,y:1.3}]}]})},physicsBackIn:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.28-c/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsBackInOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.68-c/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+c/1e3,y:1.45}]}]})}}});
\ No newline at end of file
diff --git a/assets/js/minifill.js b/assets/js/minifill.js
deleted file mode 100644
index 43d8d0e..0000000
--- a/assets/js/minifill.js
+++ /dev/null
@@ -1,382 +0,0 @@
-// minifill.js | MIT | dnp_theme
-(function(){
-
-  // all repeated strings get a single reference
-  // document | window | element + corrections
-  var Doc = 'Document', doc = document, DOCUMENT = this[Doc] || this.HTMLDocument, // IE8
-    WIN = 'Window', win = window, WINDOW =  this.constructor || this[WIN] || Window, // old Safari
-    HTMLELEMENT = 'HTMLElement', documentElement = 'documentElement', ELEMENT = Element,
-
-    // classList related
-    className = 'className', add = 'add', classList = 'classList', remove = 'remove', contains = 'contains',
-    
-    // object | array related
-    prototype = 'prototype', indexOf = 'indexOf', length = 'length',
-
-    // performance
-    now = 'now', performance = 'performance',
-
-    // getComputedStyle
-    getComputedStyle = 'getComputedStyle', currentStyle = 'currentStyle', fontSize = 'fontSize',
-
-    // event related
-    EVENT = 'Event', CustomEvent = 'CustomEvent', IE8EVENTS = '_events', 
-    etype = 'type', target = 'target', currentTarget = 'currentTarget', relatedTarget = 'relatedTarget',
-    cancelable = 'cancelable', bubbles = 'bubbles', cancelBubble = 'cancelBubble', cancelImmediate = 'cancelImmediate', detail = 'detail',
-    addEventListener = 'addEventListener', removeEventListener = 'removeEventListener', dispatchEvent = 'dispatchEvent';
-
-    
-  // Element
-  if (!win[HTMLELEMENT]) { win[HTMLELEMENT] = win[ELEMENT]; }
-
-  // Array[prototype][indexOf]
-  if (!Array[prototype][indexOf]) {
-    Array[prototype][indexOf] = function(searchElement) {
-      if (this === undefined || this === null) {
-        throw new TypeError(this + ' is not an object');
-      }
-    
-      var arraylike = this instanceof String ? this.split('') : this,
-        lengthValue = Math.max(Math.min(arraylike[length], 9007199254740991), 0) || 0,
-        index = Number(arguments[1]) || 0;
-    
-      index = (index < 0 ? Math.max(lengthValue + index, 0) : index) - 1;
-    
-      while (++index < lengthValue) {
-        if (index in arraylike && arraylike[index] === searchElement) {
-          return index;
-        }
-      }
-    
-      return -1;
-    };
-  }
-
-  // Date[now]
-  if(!Date[now]){ Date[now] = function() { return new Date().getTime(); }; }
-
-  // performance[now]
-  (function(){
-    if (performance in win == false) {  win[performance] = {}; }
-    
-    if (now in win[performance] == false){  
-      var nowOffset = Date[now]();
-      
-      window[performance][now] = function(){
-        return Date[now]() - nowOffset;
-      }
-    }
-  })();
-
-
-  // getComputedStyle
-  if (!(getComputedStyle in win)) {
-    function getComputedStylePixel(element, property, fontSizeValue) {
-      
-      // 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;
-  
-      fontSizeValue = !fontSizeValue ? fontSizeValue : /%|em/.test(suffix) && element.parentElement ? getComputedStylePixel(element.parentElement, 'fontSize', null) : 16;
-      rootSize = property == 'fontSize' ? fontSizeValue : /width/i.test(property) ? element.clientWidth : element.clientHeight;
-  
-      return suffix == '%' ? size / 100 * rootSize :
-        suffix == 'cm' ? size * 0.3937 * 96 :
-        suffix == 'em' ? size * fontSizeValue :
-        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(' ');
-    }
-  
-    // 
-    function CSSStyleDeclaration(element) {
-      var style = this,
-      currentStyleValue = element[currentStyle],
-      fontSizeValue = getComputedStylePixel(element, fontSize),
-      unCamelCase = function (match) {
-        return '-' + match.toLowerCase();
-      },
-      property;
-  
-      for (property in currentStyleValue) {
-        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 = currentStyleValue[property];
-        } else if (/margin.|padding.|border.+W/.test(property) && style[property] != 'auto') {
-          style[property] = Math.round(getComputedStylePixel(element, property, fontSizeValue)) + 'px';
-        } else if (/^outline/.test(property)) {
-          // errors on checking outline
-          try {
-            style[property] = currentStyleValue[property];
-          } catch (error) {
-            style.outlineColor = currentStyleValue.color;
-            style.outlineStyle = style.outlineStyle || 'none';
-            style.outlineWidth = style.outlineWidth || '0px';
-            style.outline = [style.outlineColor, style.outlineWidth, style.outlineStyle].join(' ');
-          }
-        } else {
-          style[property] = currentStyleValue[property];
-        }
-      }
-  
-      setShortStyleProperty(style, 'margin');
-      setShortStyleProperty(style, 'padding');
-      setShortStyleProperty(style, 'border');
-  
-      style[fontSize] = Math.round(fontSizeValue) + 'px';    
-    }
-    
-    CSSStyleDeclaration[prototype] = {
-      constructor: CSSStyleDeclaration,
-      // .getPropertyPriority
-      getPropertyPriority: function () {
-        throw new Error('DOM Exception 9');
-      },
-      // .getPropertyValue
-      getPropertyValue: function (property) {
-        return this[property.replace(/-\w/g, function (match) {
-          return match[1].toUpperCase();
-        })];
-      },
-      // .item
-      item: function (index) {
-        return this[index];
-      },
-      // .removeProperty
-      removeProperty: function () {
-        throw new Error('DOM Exception 7');
-      },
-      // .setProperty
-      setProperty: function () {
-        throw new Error('DOM Exception 7');
-      },
-      // .getPropertyCSSValue
-      getPropertyCSSValue: function () {
-        throw new Error('DOM Exception 9');
-      }
-    };    
-  
-    // .getComputedStyle
-    win[getComputedStyle] = function(element) {
-      return new CSSStyleDeclaration(element);
-    };
-  }  
-
-  // Element.prototype.classList by thednp
-  if( !(classList in ELEMENT[prototype]) ) {
-    var ClassLIST = function(elem){
-      var classArr = elem[className].replace(/^\s+|\s+$/g,'').split(/\s+/) || [];
-
-          // methods
-          hasClass = this[contains] = function(classNAME){
-            return classArr[indexOf](classNAME) > -1;
-          },
-          addClass = this[add] = function(classNAME){
-            if (!hasClass(classNAME)) {
-              classArr.push(classNAME);
-              elem[className] = classArr.join(' ');
-            }
-          },
-          removeClass = this[remove] = function(classNAME){
-            if (hasClass(classNAME)) {
-              classArr.splice(classArr[indexOf](classNAME),1);
-              elem[className] = classArr.join(' '); 
-            }
-          },
-          toggleClass = this.toggle = function(classNAME){
-            if ( hasClass(classNAME) ) { removeClass(classNAME); } 
-            else { addClass(classNAME); } 
-          };
-    }
-    Object.defineProperty(ELEMENT[prototype], classList, { get: function () { return new ClassLIST(this); } });
-  }
-
-  // Event
-  if (!win[EVENT]||!WINDOW[prototype][EVENT]) {
-    win[EVENT] = WINDOW[prototype][EVENT] = DOCUMENT[prototype][EVENT] = ELEMENT[prototype][EVENT] = function(type, eventInitDict) {
-      if (!type) { throw new Error('Not enough arguments'); }
-      var event, 
-        bubblesValue = eventInitDict && eventInitDict[bubbles] !== undefined ? eventInitDict[bubbles] : false,
-        cancelableValue = eventInitDict && eventInitDict[cancelable] !== undefined ? eventInitDict[cancelable] : false;
-      if ( 'createEvent' in doc ) {
-        event = doc.createEvent(EVENT);      
-        event.initEvent(type, bubblesValue, cancelableValue);
-      } else {
-        event = doc.createEventObject();
-        event[etype] = type;
-        event[bubbles] = bubblesValue;
-        event[cancelable] = cancelableValue;
-      }
-      return event;
-    };
-  }
-
-  // CustomEvent
-  if (!(CustomEvent in win) || !(CustomEvent in WINDOW[prototype])) {
-    win[CustomEvent] = WINDOW[prototype][CustomEvent] = DOCUMENT[prototype][CustomEvent] = Element[prototype][CustomEvent] = function(type, eventInitDict) {
-      if (!type) {
-        throw Error('CustomEvent TypeError: An event name must be provided.');
-      }
-      var event = new Event(type, eventInitDict);
-      event[detail] = eventInitDict && eventInitDict[detail] || null;
-      return event;
-    };
-  }
-
-  // addEventListener | removeEventListener
-  if (!win[addEventListener]||!WINDOW[prototype][addEventListener]) {
-    win[addEventListener] = WINDOW[prototype][addEventListener] = DOCUMENT[prototype][addEventListener] = ELEMENT[prototype][addEventListener] = function() {
-      var  element = this,
-        type = arguments[0],
-        listener = arguments[1];
-
-      if (!element[IE8EVENTS]) {  element[IE8EVENTS] = {}; }
-
-      if (!element[IE8EVENTS][type]) {
-        element[IE8EVENTS][type] = function (event) {
-          var  list = element[IE8EVENTS][event[etype]].list,
-            events = list.slice(),
-            index = -1,
-            lengthValue = events[length],
-            eventElement;
-
-          event.preventDefault = function() {
-            if (event[cancelable] !== false) {
-              event.returnValue = false;
-            }
-          };
-
-          event.stopPropagation = function() {
-            event[cancelBubble] = true;
-          };
-
-          event.stopImmediatePropagation = function() {
-            event[cancelBubble] = true;
-            event[cancelImmediate] = true;
-          };
-
-          event[currentTarget] = element;
-          event[relatedTarget] = event[relatedTarget] || event.fromElement || null;
-          event[target] = event[target] || event.srcElement || element;
-          event.timeStamp = new Date().getTime();
-
-          if (event.clientX) {
-            event.pageX = event.clientX + doc[documentElement].scrollLeft;
-            event.pageY = event.clientY + doc[documentElement].scrollTop;
-          }
-
-          while (++index < lengthValue && !event[cancelImmediate]) {
-            if (index in events) {
-              eventElement = events[index];
-
-              if (list[indexOf](eventElement) !== -1 && typeof eventElement === 'function') {
-                eventElement.call(element, event);
-              }
-            }
-          }
-        };
-
-        element[IE8EVENTS][type].list = [];
-
-        if (element.attachEvent) {
-          element.attachEvent('on' + type, element[IE8EVENTS][type]);
-        }
-      }
-
-      element[IE8EVENTS][type].list.push(listener);
-    };
-
-    win[removeEventListener] = WINDOW[prototype][removeEventListener] = DOCUMENT[prototype][removeEventListener] = ELEMENT[prototype][removeEventListener] = function() {
-      var element = this,
-        type = arguments[0],
-        listener = arguments[1],
-        index;
-
-      if (element[IE8EVENTS] && element[IE8EVENTS][type] && element[IE8EVENTS][type].list) {
-        index = element[IE8EVENTS][type].list[indexOf](listener);
-
-        if (index !== -1) {
-          element[IE8EVENTS][type].list.splice(index, 1);
-
-          if (!element[IE8EVENTS][type].list[length]) {
-            if (element.detachEvent) {
-              element.detachEvent('on' + type, element[IE8EVENTS][type]);
-            }
-            delete element[IE8EVENTS][type];
-          }
-        }
-      }
-    };
-  }
-
-  // Event dispatcher
-  if (!win[dispatchEvent]||!WINDOW[prototype][dispatchEvent]||!DOCUMENT[prototype][dispatchEvent]||!ELEMENT[prototype][dispatchEvent]) {
-    win[dispatchEvent] = WINDOW[prototype][dispatchEvent] = DOCUMENT[prototype][dispatchEvent] = ELEMENT[prototype][dispatchEvent] = function (event) {
-      if (!arguments[length]) {
-        throw new Error('Not enough arguments');
-      }
-
-      if (!event || typeof event[etype] !== 'string') {
-        throw new Error('DOM Events Exception 0');
-      }
-
-      var element = this, type = event[etype];
-
-      try {
-        if (!event[bubbles]) {
-          event[cancelBubble] = true;
-
-          var cancelBubbleEvent = function (event) {
-            event[cancelBubble] = true;
-
-            (element || win).detachEvent('on' + type, cancelBubbleEvent);
-          };
-
-          this.attachEvent('on' + type, cancelBubbleEvent);
-        }
-
-        this.fireEvent('on' + type, event);
-      } catch (error) {
-        event[target] = element;
-
-        do {
-          event[currentTarget] = element;
-
-          if (IE8EVENTS in element && typeof element[IE8EVENTS][type] === 'function') {
-            element[IE8EVENTS][type].call(element, event);
-          }
-
-          if (typeof element['on' + type] === 'function') {
-            element['on' + type].call(element, event);
-          }
-
-          element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
-        } while (element && !event[cancelBubble]);
-      }
-
-      return true;
-    };
-  }
-}());
\ No newline at end of file
diff --git a/assets/js/opacityProperty.js b/assets/js/opacityProperty.js
new file mode 100644
index 0000000..40b4555
--- /dev/null
+++ b/assets/js/opacityProperty.js
@@ -0,0 +1,23 @@
+/*  OPACITY EXAMPLE  */
+var opacityProperty = document.getElementById('opacityProperty'),
+		button = opacityProperty.getElementsByClassName('btn')[0],
+		heart = opacityProperty.getElementsByClassName('example-box')[0],
+		// fade out
+		fadeOutTween = KUTE.to(heart,{opacity:0},{duration:2000}),
+		// fade in
+		fadeInTween = KUTE.to(heart,{opacity:1},{duration:2000}),
+
+		isHidden = true;
+
+button.addEventListener('click', function(e){
+	e.preventDefault();
+    if ( !isHidden && !fadeOutTween.playing && !fadeInTween.playing ) {
+			fadeOutTween.start();
+			isHidden = !isHidden;
+
+		} else if ( isHidden && !fadeOutTween.playing && !fadeInTween.playing ) {
+			fadeInTween.start();
+			isHidden = !isHidden;
+    }
+},false);
+/*  OPACITY EXAMPLE  */
diff --git a/assets/js/perf-matrix.js b/assets/js/perf-matrix.js
new file mode 100644
index 0000000..db0d576
--- /dev/null
+++ b/assets/js/perf-matrix.js
@@ -0,0 +1,113 @@
+// testing grounds
+"use strict";
+
+var mobileType = '',
+	isMobile = {
+		Windows: function() {
+			var checkW = /IEMobile|Windows Mobile/i.test(navigator.userAgent);
+			mobileType += checkW ? 'Windows Phones.' : '';
+			return checkW;
+		},
+		Android: function() {
+			var checkA = /Android/i.test(navigator.userAgent);
+			mobileType += checkA ? 'Android Phones.' : '';
+			return checkA;
+		},
+		BlackBerry: function() {
+			var checkB = /BlackBerry/i.test(navigator.userAgent);
+			mobileType += checkB ? 'BlackBerry.' : '';
+			return checkB;
+		},
+		iOS: function() {
+			var checkI = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+			mobileType += checkI ? 'Apple iPhone, iPad or iPod.' : '';
+			return checkI;
+		},
+		any: function() {
+			return ( isMobile.Windows() || isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() );
+		}
+	},
+	checkMOBS = isMobile.any();
+
+// protect phones, older / low end devices
+if (document.body.offsetWidth < 1200 || checkMOBS) {
+	var explain = '';
+		explain += checkMOBS && mobileType !== '' ? ('For safety reasons, this page does not work with ' + mobileType) : '';
+		explain += !checkMOBS && document.body.offsetWidth < 1200 && mobileType === '' ? 'For safety reasons this page does not work on your machine because it might be very old. In other cases the browser window size is not enough for the animation to work properly, so if that\'s the case, maximize the window, refresh and proceed with the tests.' : '';
+	var warning = '
    ';
+		warning +='
    Warning!
    ';
+		warning +='
    This web page is only for high-end desktop computers.
    ';
+		warning +='
    We do not take any responsibility and we are not liable for any damage caused through use of this website, be it indirect, special, incidental or consequential damages to your devices.
    ';
+		warning +='
    '+explain+'
    ';
+		warning +='
    ';
+	document.body.innerHTML = warning;
+	throw new Error('This page is only for high-end desktop computers. ' + explain); 
+}
+
+// the variables
+var infoContainer = document.getElementById('info');
+var container = document.getElementById('container');
+var tws = [];
+
+for (var i=0; i<21; i++){
+	container.innerHTML += 
+	'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+		+'
    '
+	+'
    '
+}
+
+var collection = document.getElementsByClassName('cube');
+var lastIdx = collection.length-1;
+
+function complete(){
+	infoContainer.style.display = 'block';
+	container.style.display = 'none';
+}
+
+var engine = document.getElementById('kute'),
+		fromCSS = { 					  rotate3d: [ 0,  0,0 ], perspective:600 },
+		fromMX = { transform: { rotate3d: [ 0,  0,0 ], perspective:600 }},
+		toCSS =  { 						  rotate3d: [ 360,0,0 ], perspective:600 },
+		toMX =   { transform: { rotate3d: [ 0,360,0 ], perspective:600 }},
+		ops = { duration: 2000, repeat: 5 }
+
+// since our engines don't do sync, we make it our own here
+if (engine.src.indexOf('kute.min.js')>-1) {
+	[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromCSS,toCSS,ops) ) })
+}
+if (engine.src.indexOf('kute-extra.min.js')>-1) {
+	[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromMX,toMX,ops) ) })
+}
+
+
+function startTest(){
+	infoContainer.style.display = 'none';
+	container.style.display = 'block'
+
+	!tws[0].playing && startKUTE();	
+}
+
+
+function startKUTE() {
+	var now = window.performance.now(), count = tws.length;
+	for (var t=0; t>0) + 'px,0px,0px)';
 }
 
 function buildObjects(){
@@ -88,9 +88,13 @@ function buildObjects(){
 		
 		createTest(count,property,engine,repeat);
 		// since our engines don't do sync, we make it our own here
-		if (engine==='tween'||engine==='kute') {
+		if (engine==='kute') {
 				document.getElementById('info').style.display = 'none';
-				start();	
+				startKUTE();	
+		}
+		if (engine==='tween') {
+				document.getElementById('info').style.display = 'none';
+				startTWEEN();	
 		}
 	} else {
 
@@ -108,11 +112,26 @@ function buildObjects(){
 	}
 }
 
-function start() {
-		var now = window.performance.now(), count = tws.length;
-		for (var t =0; tsuper simple write text demo."}, {repeat: 1, yoyo: true, duration: 5000, easing: 'easingBounceOut'});
-headBtn.addEventListener('click', function(){
-    !headTween.playing && headTween.start();
-}, false);   
-
-// combo wombo
-var comText = document.getElementById('comText'),
-    comNum = document.getElementById('comNum'),
-    comBtn = document.getElementById('comBtn'),
-    comTween11 = KUTE.to(comNum, {number: 2500}, {duration: 2000, easing: 'easingCubicOut'}),
-    comTween12 = KUTE.to(comText, {text: "People following on Github."}, { textChars: 'symbols', duration: 3000, easing: 'easingCubicInOut'}),
-    comTween21 = KUTE.to(comNum, {number: 7500}, {delay: 3000, duration: 2000, easing: 'easingCubicInOut'}),
-    comTween22 = KUTE.to(comText, {text: "More crazy tricks coming soon."}, {textChars: 'all', delay: 2000, duration: 3000, easing: 'easingCubicInOut'});
-comTween11.chain(comTween21); comTween12.chain(comTween22);    
-comBtn.addEventListener('click', function(){
-    if (!comTween11.playing && !comTween21.playing && !comTween12.playing && !comTween22.playing) {
-        comTween11.start();
-        comTween12.start();  
-    } 
-}, false);   
\ No newline at end of file
diff --git a/assets/js/textProperties.js b/assets/js/textProperties.js
new file mode 100644
index 0000000..89bc85b
--- /dev/null
+++ b/assets/js/textProperties.js
@@ -0,0 +1,27 @@
+/*  TEXT PROPERTIES EXAMPLE  */
+var textProperties = document.getElementById('textProperties'),
+	heading = textProperties.querySelector('h1'),
+	button = textProperties.querySelectorAll('.btn')[0],                                            
+
+	// 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 = '' + chars.join('') + '';
+var charsObject = heading.getElementsByTagName('SPAN'), l = charsObject.length;
+
+
+// built the tween objects
+var	tps = KUTE.allFromTo(charsObject, 
+        { fontSize:50, letterSpacing: 0, color: '#333'}, 
+        { fontSize:80, letterSpacing: 10, color: 'red'}, 
+				{ offset: 75, duration: 250, repeat: 1, yoyo:true, repeatDelay: 150, easing: 'easingCubicOut'});
+				
+
+button.addEventListener('click', function(e){
+	e.preventDefault();
+    if ( !tps.playing() ) {
+			tps.start();
+    }
+},false);
+/*  TEXT PROPERTIES EXAMPLE  */
\ No newline at end of file
diff --git a/assets/js/textWrite.js b/assets/js/textWrite.js
new file mode 100644
index 0000000..2ceb616
--- /dev/null
+++ b/assets/js/textWrite.js
@@ -0,0 +1,61 @@
+// number increment
+var numText = document.getElementById('numText'),
+  numBtn = document.getElementById('numBtn'),
+  numTween = KUTE.to(numText, {number: 1550}, {duration: 3000, easing: 'easingCubicOut'});
+  numBtn.addEventListener('click', function(){
+  
+  if (!numTween.playing) { 
+    if (numText.innerHTML === '1550') { numTween.valuesEnd['number'] = 0; } else { numTween.valuesEnd['number'] = 1550; }
+   numTween.start(); 
+  }
+}, false); 
+
+// write text
+var headText = document.getElementById('headText'),
+  headBtn = document.getElementById('headBtn'),
+  initText = headText.innerHTML,
+  whichTw = false,
+  nextText = "This is a super simple write text demo.",
+  headTween = KUTE.to(headText, {text: nextText}, {textChars: 'alpha', duration: 5000, easing: 'easingBounceOut'}),
+  headTween1 = KUTE.to(headText, {text: initText}, {textChars: 'alpha', duration: 5000, easing: 'easingBounceOut'});
+headBtn.addEventListener('click', function(){
+  !whichTw && !headTween.playing && !headTween1.playing && (headTween.start(), whichTw = !whichTw);
+  whichTw && !headTween.playing && !headTween1.playing && (headTween1.start(), whichTw = !whichTw);
+}, false);
+
+
+// improved write text
+var textTweenBTN = document.getElementById('textExampleBtn');
+var textTarget = document.getElementById('textExample');
+var textOriginal = textTarget.innerHTML;
+var anotherText = 'This text has a link to homepage inside.';
+var options = {duration: 'auto', textChars: 'alphanumeric'}
+
+textTweenBTN.addEventListener('click', function(){
+  var newContent = textTarget.innerHTML === textOriginal ? anotherText : textOriginal;
+  !textTarget.playing && KUTE.Util.createTextTweens(textTarget,newContent,options).start()
+})
+
+
+// combo wombo
+var comText = document.getElementById('comText'),
+  comNum = document.getElementById('comNum'),
+  comBtn = document.getElementById('comBtn'),
+  comTween11 = KUTE.to(comNum, {number: 2500}, {duration: 2000, easing: 'easingCubicOut'}),
+  comTween12 = KUTE.to(comText, {text: "People following on Github."}, { textChars: 'symbols', duration: 3000, easing: 'easingCubicInOut'}),
+  comTween21 = KUTE.to(comNum, {number: 7500}, {delay: 3000, duration: 2000, easing: 'easingCubicInOut'}),
+  comTween22 = KUTE.to(comText, {text: "More crazy tricks coming soon."}, {textChars: 'all', delay: 2000, duration: 3000, easing: 'easingCubicInOut'});
+
+try{
+  comTween11.chain(comTween21); 
+  comTween12.chain(comTween22);
+}catch(e){
+  console.error(`${e} TweenBase doesn't support chain method`)
+}  
+
+comBtn.addEventListener('click', function(){
+  if (!comTween11.playing && !comTween21.playing && !comTween12.playing && !comTween22.playing) {
+    comTween11.start();
+    comTween12.start();  
+  } 
+}, false);   
\ No newline at end of file
diff --git a/assets/js/transformFunctions.js b/assets/js/transformFunctions.js
new file mode 100644
index 0000000..bbeff97
--- /dev/null
+++ b/assets/js/transformFunctions.js
@@ -0,0 +1,134 @@
+
+/* TRANSFORMS EXAMPLES */
+var translateExamples = document.getElementById('translate-examples'),
+    translateBtn = translateExamples.querySelector('.btn'),
+    tr2d = translateExamples.getElementsByTagName('div')[0],
+    trx = translateExamples.getElementsByTagName('div')[1],
+    trry = translateExamples.getElementsByTagName('div')[2],
+    trz = translateExamples.getElementsByTagName('div')[3],
+    tr2dTween = KUTE.to(tr2d, {translate:[170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
+    trxTween = KUTE.to(trx, {translateX:-170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500})
+    trryTween = KUTE.to(trry, {translate3d:[0,170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
+    trzTween = KUTE.to(trz, {perspective:200, translate3d:[0,0,-100]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500});
+translateBtn.addEventListener('click', function(){
+    !tr2dTween.playing && tr2dTween.start();
+    !trxTween.playing && trxTween.start();
+    !trryTween.playing && trryTween.start();
+    !trzTween.playing && trzTween.start();
+}, false);
+
+var rotExamples = document.getElementById('rotExamples'),
+    rotBtn = rotExamples.querySelector('.btn'),
+    r2d = rotExamples.querySelectorAll('div')[0],
+    rx = rotExamples.querySelectorAll('div')[1],
+    ry = rotExamples.querySelectorAll('div')[2],
+    rz = rotExamples.querySelectorAll('div')[3],
+    r2dTween = KUTE.to(r2d, {rotate:-720}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
+    rxTween = KUTE.to(rx, {rotateX:180}, {easing:'linear', yoyo:true, repeat: 1, duration:1500}),
+    ryTween = KUTE.to(ry, {perspective:200, rotate3d:[0,-180,0],scale:1.2}, {easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
+    rzTween = KUTE.to(rz, {rotateZ:360}, {easing:'easingBackOut', yoyo:true, repeat: 1, duration:1500});
+rotBtn.addEventListener('click', function(){
+    !r2dTween.playing && r2dTween.start();
+    !rxTween.playing && rxTween.start();
+    !ryTween.playing && ryTween.start();
+    !rzTween.playing && rzTween.start();
+}, false);
+
+var skewExamples = document.getElementById('skewExamples'),
+    skewBtn = skewExamples.querySelector('.btn'),
+    sx = skewExamples.querySelectorAll('div')[0],
+    sy = skewExamples.querySelectorAll('div')[1],
+    sxTween = KUTE.to(sx, {skewX:-25}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
+    syTween = KUTE.to(sy, {skew:[0,25]}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500});
+skewBtn.addEventListener('click', function(){
+    !sxTween.playing && sxTween.start();
+    !syTween.playing && syTween.start();
+}, false);
+
+var mixTransforms = document.getElementById('mixTransforms'),
+    mixBtn = mixTransforms.querySelector('.btn'),
+    mt1 = mixTransforms.querySelectorAll('div')[0],
+    mt2 = mixTransforms.querySelectorAll('div')[1],
+    // pp = KUTE.Util.trueProperty('perspective'),
+    // tfp = KUTE.Util.trueProperty('transform'),
+    // tfo = KUTE.Util.trueProperty('transformOrigin'),
+    mt1Tween = KUTE.to(mt1, {perspective:200,translateX:300,rotateX:360,rotateY:15,rotateZ:5}, { easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
+    mt2Tween = KUTE.to(mt2, {translateX:300,rotateX:360,rotateY:15,rotateZ:5}, { easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500});
+
+mixBtn.addEventListener('click', function(){
+    !mt1Tween.playing && mt1Tween.start();
+    !mt2Tween.playing && mt2Tween.start();
+}, false);
+
+/* 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],
+	el4 = chainedTweens.querySelectorAll('.example-item')[3],
+	ctb = chainedTweens.querySelector('.btn');
+
+// built the tween objects for element1
+var tween11 = KUTE.fromTo(el1, { perspective:400,translateX:0, rotateX: 0}, {perspective:400,translateX:150, rotateX: 25}, {duration: 2000});
+var tween12 = KUTE.fromTo(el1, { perspective:400,translateY:0, rotateY: 0}, {perspective:400,translateY:20, rotateY: 15}, {duration: 2000});
+var tween13 = KUTE.fromTo(el1, { perspective:400,translate3d:[150,20,0], rotate3d:[25,15,0]}, {perspective:400,translate3d:[0,0,0], rotate3d:[0,0,0]}, {duration: 3000});
+
+// chain tweens
+try {
+    tween11.chain(tween12);
+    tween12.chain(tween13);
+} catch(e) {
+    console.warn(e+". TweenBase doesn\'t support chain method")
+}
+
+// built the tween objects for element2
+var tween21 = KUTE.fromTo(el2, { perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0 }, {perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY:0}, {duration: 2000});
+var tween22 = KUTE.fromTo(el2, { perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY: 0}, {perspective:400,translateX:150, translateY:20, rotateX: 25, rotateY: 15}, {duration: 2000});
+var tween23 = KUTE.fromTo(el2, { perspective:400,translate3d:[150,20,0], rotateX: 25, rotateY:15}, {perspective:400,translate3d:[0,0,0], rotateX: 0, rotateY:0}, {duration: 3000});
+
+// chain tweens
+try{
+    tween21.chain(tween22);
+    tween22.chain(tween23);
+}catch(e){
+    console.warn(e+". TweenBase doesn\'t support chain method")
+}
+
+// built the tween objects for element3
+var tween31 = KUTE.to(el3,{ perspective:400,translateX:150, rotateX:25}, {duration: 2000});
+var tween32 = KUTE.to(el3,{ perspective:400,translateX:150,translateY:20, rotateY:15}, {duration: 2000});
+var tween33 = KUTE.to(el3,{ perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0}, {duration: 3000});
+
+// chain tweens
+try{
+  tween31.chain(tween32); 
+  tween32.chain(tween33);
+}catch(e){
+  console.warn(e+". TweenBase doesn\'t support chain method")
+}
+
+// built the tween objects for element4
+var tween41 = KUTE.to(el4,{ perspective:400, translate3d:[150,0,0], rotate3d: [25,0,0]}, {duration: 2000});
+var tween42 = KUTE.to(el4,{ perspective:400, translate3d:[150,20,0], rotate3d:[25,15,0]}, {duration: 2000});
+var tween43 = KUTE.to(el4,{ perspective:400, translate3d:[0,0,0], rotate3d: [0,0,0]}, {duration: 3000});
+
+// chain tweens
+try{
+  tween41.chain(tween42); 
+  tween42.chain(tween43);
+}catch(e){
+  console.warn(e+". TweenBase doesn\'t support chain method")
+}
+
+
+ctb.addEventListener('click',function(e){
+	e.preventDefault();
+	!tween11.playing && !tween12.playing && !tween13.playing && tween11.start(); 
+  !tween21.playing && !tween22.playing && !tween23.playing && tween21.start(); 
+  !tween31.playing && !tween32.playing && !tween33.playing && tween31.start();
+  !tween41.playing && !tween42.playing && !tween43.playing && tween41.start();
+},false);
+/*  CHAINED TWEENS EXAMPLE  */
\ No newline at end of file
diff --git a/assets/js/transformMatrix.js b/assets/js/transformMatrix.js
new file mode 100644
index 0000000..00f4440
--- /dev/null
+++ b/assets/js/transformMatrix.js
@@ -0,0 +1,92 @@
+
+/*  MATRIX TRANSFORMS EXAMPLES */
+/* using parent perspective */
+var matrixExamples = document.getElementById('matrix-examples'),
+    matrixBtn = matrixExamples.querySelector('.btn'),
+    mx1 = matrixExamples.getElementsByTagName('div')[0],
+    mx2 = matrixExamples.getElementsByTagName('div')[1],
+    mx3 = matrixExamples.getElementsByTagName('div')[2],
+    mx4 = matrixExamples.getElementsByTagName('div')[3],
+    mx1Tween = KUTE.to(mx1, {transform: { translate3d:[-50,-50,-50]} }, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
+    mx2Tween = KUTE.to(mx2, {transform: { perspective: 100, translate3d:[-50,-50,-50], rotateX:180 } }, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
+    mx3Tween = KUTE.to(mx3, {transform: { translate3d:[-50,-50,-50], skew:[-15,-15] } }, { easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}), // matrix(1, 45, 45, 1, 0, -170)    
+    mx4Tween = KUTE.to(mx4, {transform: { translate3d:[-50,-50,-50], rotate3d:[0,-360,0], scaleX: 0.5 } }, { easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500});
+
+matrixBtn.addEventListener('click', function(){
+    !mx1Tween.playing && mx1Tween.start();
+    !mx2Tween.playing && mx2Tween.start();
+    !mx3Tween.playing && mx3Tween.start();
+    !mx4Tween.playing && mx4Tween.start();
+}, false);
+
+
+/*  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],
+	el4 = chainedTweens.querySelectorAll('.example-item')[3],
+	ctb = chainedTweens.querySelector('.btn');
+
+// built the tween objects for element1
+var tween11 = KUTE.fromTo(el1, { transform: {perspective:400,translateX:0, rotateX: 0}}, {transform: {perspective:400,translateX:150, rotateX: 25}}, {duration: 2000});
+var tween12 = KUTE.fromTo(el1, { transform: {perspective:400,translateY:0, rotateY: 0}}, {transform: {perspective:400,translateY:20, rotateY: 15}}, {duration: 2000});
+var tween13 = KUTE.fromTo(el1, { transform: {perspective:400,translate3d:[150,20,0], rotate3d:[25,15,0]}}, {transform: {perspective:400,translate3d:[0,0,0], rotate3d:[0,0,0]}}, {duration: 3000});
+
+// chain tweens
+try {
+    tween11.chain(tween12);
+    tween12.chain(tween13);
+} catch(e) {
+    console.warn(e+". TweenBase doesn\'t support chain method")
+}
+
+// built the tween objects for element2
+var tween21 = KUTE.fromTo(el2, { transform: {perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0 }}, {transform: {perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY:0}}, {duration: 2000});
+var tween22 = KUTE.fromTo(el2, { transform: {perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY: 0}}, {transform: {perspective:400,translateX:150, translateY:20, rotateX: 25, rotateY: 15}}, {duration: 2000});
+var tween23 = KUTE.fromTo(el2, { transform: {perspective:400,translate3d:[150,20,0], rotateX: 25, rotateY:15}}, {transform: {perspective:400,translate3d:[0,0,0], rotateX: 0, rotateY:0}}, {duration: 3000});
+
+// chain tweens
+try{
+    tween21.chain(tween22);
+    tween22.chain(tween23);
+}catch(e){
+    console.warn(e+". TweenBase doesn\'t support chain method")
+}
+
+// built the tween objects for element3
+var tween31 = KUTE.to(el3,{ transform: {perspective:400,translateX:150, rotateX:25}}, {duration: 2000});
+var tween32 = KUTE.to(el3,{ transform: {perspective:400,translateX:150,translateY:20, rotateY:15}}, {duration: 2000});
+var tween33 = KUTE.to(el3,{ transform: {perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0}}, {duration: 3000});
+
+// chain tweens
+try{
+  tween31.chain(tween32); 
+  tween32.chain(tween33);
+}catch(e){
+  console.warn(e+". TweenBase doesn\'t support chain method")
+}
+
+// built the tween objects for element4
+var tween41 = KUTE.to(el4,{ transform: {perspective:400, translate3d:[150,0,0], rotate3d: [25,0,0]}}, {duration: 2000});
+var tween42 = KUTE.to(el4,{ transform: {perspective:400, translate3d:[150,20,0], rotate3d:[25,15,0]}}, {duration: 2000});
+var tween43 = KUTE.to(el4,{ transform: {perspective:400, translate3d:[0,0,0], rotate3d: [0,0,0]}}, {duration: 3000});
+
+// chain tweens
+try{
+  tween41.chain(tween42); 
+  tween42.chain(tween43);
+}catch(e){
+  console.warn(e+". TweenBase doesn\'t support chain method")
+}
+
+
+ctb.addEventListener('click',function(e){
+	e.preventDefault();
+	!tween11.playing && !tween12.playing && !tween13.playing && tween11.start(); 
+  !tween21.playing && !tween22.playing && !tween23.playing && tween21.start(); 
+  !tween31.playing && !tween32.playing && !tween33.playing && tween31.start();
+  !tween41.playing && !tween42.playing && !tween43.playing && tween41.start();
+},false);
+/*  CHAINED TWEENS EXAMPLE  */
+
diff --git a/assets/js/tween.min.js b/assets/js/tween.min.js
index 9c2a893..a0fb5e7 100644
--- a/assets/js/tween.min.js
+++ b/assets/js/tween.min.js
@@ -1,2 +1,2 @@
 // tween.js MIT License
-!function(){if("performance"in window==!1&&(window.performance={}),Date.now=Date.now||function(){return(new Date).getTime()},"now"in window.performance==!1){var n=window.performance.timing&&window.performance.timing.navigationStart?window.performance.timing.navigationStart:Date.now();window.performance.now=function(){return Date.now()-n}}}();var TWEEN=TWEEN||function(){var n=[];return{getAll:function(){return n},removeAll:function(){n=[]},add:function(t){n.push(t)},remove:function(t){var r=n.indexOf(t);-1!==r&&n.splice(r,1)},update:function(t){if(0===n.length)return!1;var r=0;for(t=void 0!==t?t:window.performance.now();rn;n++)E[n].stop()},this.delay=function(n){return s=n,this},this.repeat=function(n){return e=n,this},this.yoyo=function(n){return a=n,this},this.easing=function(n){return l=n,this},this.interpolation=function(n){return p=n,this},this.chain=function(){return E=arguments,this},this.onStart=function(n){return w=n,this},this.onUpdate=function(n){return M=n,this},this.onComplete=function(n){return v=n,this},this.onStop=function(n){return d=n,this},this.update=function(n){var f,d,m;if(h>n)return!0;I===!1&&(null!==w&&w.call(t),I=!0),d=(n-h)/u,d=d>1?1:d,m=l(d);for(f in i){var g=r[f]||0,T=i[f];T instanceof Array?t[f]=p(T,m):("string"==typeof T&&(T=g+parseFloat(T,10)),"number"==typeof T&&(t[f]=g+(T-g)*m))}if(null!==M&&M.call(t,m),1===d){if(e>0){isFinite(e)&&e--;for(f in o){if("string"==typeof i[f]&&(o[f]=o[f]+parseFloat(i[f],10)),a){var O=o[f];o[f]=i[f],i[f]=O}r[f]=o[f]}return a&&(c=!c),h=n+s,!0}null!==v&&v.call(t);for(var N=0,W=E.length;W>N;N++)E[N].start(h+u);return!1}return!0}},TWEEN.Easing={Linear:{None:function(n){return n}},Quadratic:{In:function(n){return n*n},Out:function(n){return n*(2-n)},InOut:function(n){return(n*=2)<1?.5*n*n:-.5*(--n*(n-2)-1)}},Cubic:{In:function(n){return n*n*n},Out:function(n){return--n*n*n+1},InOut:function(n){return(n*=2)<1?.5*n*n*n:.5*((n-=2)*n*n+2)}},Quartic:{In:function(n){return n*n*n*n},Out:function(n){return 1- --n*n*n*n},InOut:function(n){return(n*=2)<1?.5*n*n*n*n:-.5*((n-=2)*n*n*n-2)}},Quintic:{In:function(n){return n*n*n*n*n},Out:function(n){return--n*n*n*n*n+1},InOut:function(n){return(n*=2)<1?.5*n*n*n*n*n:.5*((n-=2)*n*n*n*n+2)}},Sinusoidal:{In:function(n){return 1-Math.cos(n*Math.PI/2)},Out:function(n){return Math.sin(n*Math.PI/2)},InOut:function(n){return.5*(1-Math.cos(Math.PI*n))}},Exponential:{In:function(n){return 0===n?0:Math.pow(1024,n-1)},Out:function(n){return 1===n?1:1-Math.pow(2,-10*n)},InOut:function(n){return 0===n?0:1===n?1:(n*=2)<1?.5*Math.pow(1024,n-1):.5*(-Math.pow(2,-10*(n-1))+2)}},Circular:{In:function(n){return 1-Math.sqrt(1-n*n)},Out:function(n){return Math.sqrt(1- --n*n)},InOut:function(n){return(n*=2)<1?-.5*(Math.sqrt(1-n*n)-1):.5*(Math.sqrt(1-(n-=2)*n)+1)}},Elastic:{In:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),-(r*Math.pow(2,10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i)))},Out:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),r*Math.pow(2,-10*n)*Math.sin(2*(n-t)*Math.PI/i)+1)},InOut:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),(n*=2)<1?-.5*r*Math.pow(2,10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i):r*Math.pow(2,-10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i)*.5+1)}},Back:{In:function(n){var t=1.70158;return n*n*((t+1)*n-t)},Out:function(n){var t=1.70158;return--n*n*((t+1)*n+t)+1},InOut:function(n){var t=2.5949095;return(n*=2)<1?.5*n*n*((t+1)*n-t):.5*((n-=2)*n*((t+1)*n+t)+2)}},Bounce:{In:function(n){return 1-TWEEN.Easing.Bounce.Out(1-n)},Out:function(n){return 1/2.75>n?7.5625*n*n:2/2.75>n?7.5625*(n-=1.5/2.75)*n+.75:2.5/2.75>n?7.5625*(n-=2.25/2.75)*n+.9375:7.5625*(n-=2.625/2.75)*n+.984375},InOut:function(n){return.5>n?.5*TWEEN.Easing.Bounce.In(2*n):.5*TWEEN.Easing.Bounce.Out(2*n-1)+.5}}},TWEEN.Interpolation={Linear:function(n,t){var r=n.length-1,i=r*t,o=Math.floor(i),u=TWEEN.Interpolation.Utils.Linear;return 0>t?u(n[0],n[1],i):t>1?u(n[r],n[r-1],r-i):u(n[o],n[o+1>r?r:o+1],i-o)},Bezier:function(n,t){for(var r=0,i=n.length-1,o=Math.pow,u=TWEEN.Interpolation.Utils.Bernstein,e=0;i>=e;e++)r+=o(1-t,i-e)*o(t,e)*n[e]*u(i,e);return r},CatmullRom:function(n,t){var r=n.length-1,i=r*t,o=Math.floor(i),u=TWEEN.Interpolation.Utils.CatmullRom;return n[0]===n[r]?(0>t&&(o=Math.floor(i=r*(1+t))),u(n[(o-1+r)%r],n[o],n[(o+1)%r],n[(o+2)%r],i-o)):0>t?n[0]-(u(n[0],n[0],n[1],n[1],-i)-n[0]):t>1?n[r]-(u(n[r],n[r],n[r-1],n[r-1],i-r)-n[r]):u(n[o?o-1:0],n[o],n[o+1>r?r:o+1],n[o+2>r?r:o+2],i-o)},Utils:{Linear:function(n,t,r){return(t-n)*r+n},Bernstein:function(n,t){var r=TWEEN.Interpolation.Utils.Factorial;return r(n)/r(t)/r(n-t)},Factorial:function(){var n=[1];return function(t){var r=1;if(n[t])return n[t];for(var i=t;i>1;i--)r*=i;return n[t]=r,r}}(),CatmullRom:function(n,t,r,i,o){var u=.5*(r-n),e=.5*(i-t),a=o*o,f=o*a;return(2*t-2*r+u+e)*f+(-3*t+3*r-2*u-e)*a+u*o+t}}},function(n){"function"==typeof define&&define.amd?define([],function(){return TWEEN}):"object"==typeof exports?module.exports=TWEEN:n.TWEEN=TWEEN}(this);
\ No newline at end of file
+(function(global,factory){typeof exports==='object'&&typeof module!=='undefined'?module.exports=factory():typeof define==='function'&&define.amd?define(factory):(global.TWEEN=factory())}(this,(function(){'use strict';var version='18.4.2';var _Group=function(){this._tweens={};this._tweensAddedDuringUpdate={}};_Group.prototype={getAll:function(){return Object.keys(this._tweens).map(function(tweenId){return this._tweens[tweenId]}.bind(this))},removeAll:function(){this._tweens={}},add:function(tween){this._tweens[tween.getId()]=tween;this._tweensAddedDuringUpdate[tween.getId()]=tween},remove:function(tween){delete this._tweens[tween.getId()];delete this._tweensAddedDuringUpdate[tween.getId()]},update:function(time,preserve){var tweenIds=Object.keys(this._tweens);if(tweenIds.length===0){return false}time=time!==undefined?time:TWEEN.now();while(tweenIds.length>0){this._tweensAddedDuringUpdate={};for(var i=0;i1)?1:elapsed;value=this._easingFunction(elapsed);for(property in this._valuesEnd){if(this._valuesStart[property]===undefined){continue}var start=this._valuesStart[property]||0;var end=this._valuesEnd[property];if(end instanceof Array){this._object[property]=this._interpolationFunction(end,value)}else{if(typeof(end)==='string'){if(end.charAt(0)==='+'||end.charAt(0)==='-'){end=start+parseFloat(end)}else{end=parseFloat(end)}}if(typeof(end)==='number'){this._object[property]=start+(end-start)*value}}}if(this._onUpdateCallback!==null){this._onUpdateCallback(this._object,elapsed)}if(elapsed===1){if(this._repeat>0){if(isFinite(this._repeat)){this._repeat-=1}for(property in this._valuesStartRepeat){if(typeof(this._valuesEnd[property])==='string'){this._valuesStartRepeat[property]=this._valuesStartRepeat[property]+parseFloat(this._valuesEnd[property])}if(this._yoyo){var tmp=this._valuesStartRepeat[property];this._valuesStartRepeat[property]=this._valuesEnd[property];this._valuesEnd[property]=tmp}this._valuesStart[property]=this._valuesStartRepeat[property]}if(this._yoyo){this._reversed=!this._reversed}if(this._repeatDelayTime!==undefined){this._startTime=time+this._repeatDelayTime}else{this._startTime=time+this._delayTime}if(this._onRepeatCallback!==null){this._onRepeatCallback(this._object)}return true}else{if(this._onCompleteCallback!==null){this._onCompleteCallback(this._object)}for(var i=0,numChainedTweens=this._chainedTweens.length;i1){return fn(v[m],v[m-1],m-f)}return fn(v[i],v[i+1>m?m:i+1],f-i)},Bezier:function(v,k){var b=0;var n=v.length-1;var pw=Math.pow;var bn=TWEEN.Interpolation.Utils.Bernstein;for(var i=0;i<=n;i+=1){b+=pw(1-k,n-i)*pw(k,i)*v[i]*bn(n,i)}return b},CatmullRom:function(v,k){var m=v.length-1;var f=m*k;var i=Math.floor(f);var fn=TWEEN.Interpolation.Utils.CatmullRom;if(v[0]===v[m]){if(k<0){i=Math.floor(f=m*(1+k))}return fn(v[(i-1+m)%m],v[i],v[(i+1)%m],v[(i+2)%m],f-i)}else{if(k<0){return v[0]-(fn(v[0],v[0],v[1],v[1],-f)-v[0])}if(k>1){return v[m]-(fn(v[m],v[m],v[m-1],v[m-1],f-m)-v[m])}return fn(v[i?i-1:0],v[i],v[m1;i-=1){s*=i}a[n]=s;return s}})(),CatmullRom:function(p0,p1,p2,p3,t){var v0=(p2-p0)*0.5;var v1=(p3-p1)*0.5;var t2=t*t;var t3=t*t2;return(2*p1-2*p2+v0+v1)*t3+(-3*p1+3*p2-2*v0-v1)*t2+v0*t+p1}}};TWEEN.version=version;return TWEEN})));
\ No newline at end of file
diff --git a/attr.html b/attr.html
deleted file mode 100644
index cd86a71..0000000
--- a/attr.html
+++ /dev/null
@@ -1,221 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js Attributes Plugin | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-            
    Attributes Plugin
    
-            
    The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations
-                in combination with the SVG Plugin as we'll see in the following examples. As a quick refference, the basic synthax goes like this:
    
-
-            
    // basic synthax for unitless attributes
-var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
-
-// OR for attributes that are ALWAYS suffixed / have a measurement unit
-var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
-
    
-
-            
    The Attributes Plugin does support color attributes such as fill or stroke starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like stroke-dasharray, viewBox                or transform for simplicity reasons. To animate the stroke/fill or transform attribute, the SVG Plugin has some handy solutions for you. Despite the limitations of this plugin, you have access to just
-                about any SVGElement/Element presentation attribute available.
    
-
-            
    Attributes Namespace
    
-            
    Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:
    
-            
    // dashed attribute notation
-var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
-
-// non-dashed attribute notation
-var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
-
    
-            
    The strokeWidth example is very interesting because this attribute along with many others can work with px, % or with no unit/suffix.
    
-
-            
    Color Attributes
    
-            
    Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: fill, stroke and stopColor. If the elements are affected by their CSS counterparts, the effect is not visible,
-                so always make sure you know what you're doing.
    
-            
    // some fill rgb, rgba, hex
-var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
-
-// some stopColor or 'stop-color'
-var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
-
    
-
-            
    
-                
-
-                
-            
-
-                
    
-                    Start
-                
    
-            
    
-            
    If in this example the fill attribute value would reference a gradient, then rgba(0,0,0,0) is used.
    
-
-            
    Unitless Attributes
    
-            
    In the first example, let's play with the attributes of a <circle> element: radius and center coordinates.
    
-            
    // radius attribute
-var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
-
-// coordinates of the circle center
-var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
-
    
-            
    A quick demo with the above:
-                
    
-                    
    
-                        
-                
-            
-
-                        
    
-                            Start
-                        
    
-                    
    
-
-                    
    Suffixed Attributes
    
-                    
    Similar to the example on gradients with SVG Plugin, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the % unit
-                        is found in the current value and used as unit for the DOM update:
    
-                    
    // gradient positions to middle
-var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
-
-// gradient positions rotated
-var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
-
    
-
-                    
    
-                        
-                
-                    
-                        
-                        
-                    
-                
-                
-            
-
-                        
    
-                            Start
-                        
    
-                    
    
-                    
    This plugin is quite handy and a great addition to the SVG Plugin.
    
-
-        
    
-
-        
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-
-
-
diff --git a/backgroundPosition.html b/backgroundPosition.html
new file mode 100644
index 0000000..90fcd69
--- /dev/null
+++ b/backgroundPosition.html
@@ -0,0 +1,159 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Background Position
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+            
    Background Position
    
+            
    The component that animates the CSS property controling the background-position property of a target element.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate the position of the background image, simple and effective.
    
+              
    
+              
    
+                
    The KUTE.js Background Position component enables animation for the CSS backgroundPosition property on most browsers.
    
+                
    It can handle an entire set of input values [x,y], '0% 50%' and even 'left center'. The component always updates the values of the position 
+                    property via % suffix for simplicity reasons and even if px or any other unit is supported.
    
+                
    While we might not have much use for this kind of animation, some older browsers will love to show you something if that is the case.
    
+              
    
+            
    
+          
    
+        
    
+
+        
    
+
+          
    Example
    
+
+          
    Here a couple of possible tween objects:
    
+
+
    // provide the exact values for interpolation
+let bgPosTween = KUTE.to('selector1',{backgroundPosition:[0,50]}).start();
+
+// provide the coordinates
+let bgPosTween = KUTE.to('selector1',{backgroundPosition:"0% 50%"}).start();
+
+// or provide the position names
+let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start();
+
    
+
+          
    
+              
    
+
+              
    
+                  Start
+              
    
+          
    
+
+          
    Notes
    
+          
      
+              
    • Unfortunatelly this property also has no access at the sub-pixel level, animations are as good as it gets, despite the fact that the % suffix is used.
      • 
+              
    • There are thankfully replacements for this forgotten property that strangelly supports CSS3 transitions, you can simply use all kinds of SVG masks and filters
+                  and the HTML Attributes component for much more animation potential and supreme animation quality.
      • 
+              
    • This component is bundled with the kute-extra.js distribution file.
      • 
+
+          
    
+      
    
+
+      
+      
+
+    
    
+    
+
+
+
+    
+    
+    
+    
+    
+
+    
+    
+
+
+
diff --git a/borderRadius.html b/borderRadius.html
new file mode 100644
index 0000000..f92e06e
--- /dev/null
+++ b/borderRadius.html
@@ -0,0 +1,173 @@
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Border Radius
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Border Radius
    
+          
    The component that animates the CSS properties that control the radius of the corners of a target element.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate the radius for all corners or a specific one for a target element.
    
+              
    
+              
    
+                
    The KUTE.js Border Radius component provides support for the CSS3 border-radius property and all corner variations.
     
+                
    The component accepts any measurement unit but the best results in terms of visual presentation are when you use %, em or any other 
+                    subpixel units.
    
+                
    Even if you don't provide any unit at all, the component will work it out with px.
    
+                
    For a quick reference, here are the properties supported:
                            
+              
    
+            
    
+          
    
+        
    
+
+        
    
+
+          
    Border Radius Properties
    
+          
      
+            
    • borderRadius allows you to animate the border-radius on all corners for a given element.
      • 
+            
    • borderTopLeftRadius allows you to animate the border-top-left-radius for a given element.
      • 
+            
    • borderTopRightRadius allows you to animate the border-top-right-radius for a given element.
      • 
+            
    • borderBottomLeftRadius allows you to animate the border-bottom-left-radiusfor a given element.
      • 
+            
    • borderBottomRightRadius allows you to animate the border-bottom-right-radiusfor a given element.
      • 
+          
    
+
+          
+          
    Examples
    
+          
    OK let's have a look at some sample tween objects and a quick demo:
    
+                
+
    KUTE.to('selector1',{borderRadius:'100%'}).start();
+KUTE.to('selector2',{borderTopLeftRadius:'100%'}).start();
+KUTE.to('selector3',{borderTopRightRadius:'5em'}).start();
+KUTE.to('selector4',{borderBottomLeftRadius:50}).start();
+KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start();
+
    
+
+          
    
+              
    ALL
    
+              
    TL
    
+              
    TR
    
+              
    BL
    
+              
    BR
    
+
+              
    
+                  Start
+              
    
+          
    
+          
+          
    Notes
    
+          
      
+              
    • A quick reminder here is that the component does not support radius shorthand values, EG border-radius: 50px 20px.
      • 
+              
    • The component does not use vendor property preffixes anymore, the major browsers don't need for quite some time now. If you want to support 
+                  legacy browsers, you still have the utilities available.
      • 
+              
    • Early implementations from any browser that have been deprecated are also not supported.
      • 
+              
    • This component is bundled with kute-extra.js distribution file.
      • 
+
+          
    
+      
    
+
+
+      
+      
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+    
+
+    
+    
+
+
+
+
diff --git a/boxModel.html b/boxModel.html
new file mode 100644
index 0000000..df5529d
--- /dev/null
+++ b/boxModel.html
@@ -0,0 +1,180 @@
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Box Model
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+
+        
    
+          
    Box Model
    
+          
    The component that animates most of the CSS box model properties of a target element on all browsers.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate the width, height, borderWidth or spacing for a target element on all browsers.
    
+              
    
+              
    
+                
    The KUTE.js Box Model component provides support for all box-model properties and all their variations.
    
+                
    Unlike other components, this one only works with px measurement unit, simply because these properties have no control at subpixel level. This means that even if you use % 
+                    as suffix, the computed values are still pixel based in all browsers.
    
+                
    Because modern browsers shine with transform animations and box model properties generally come with performance penalties and other animation
+                    jank, they can be used as fallback for legacy browsers, for your very special clients of course.
                
+              
    
+            
    
+          
    
+        
    
+
+        
    
+
+          
    Box Model Properties
    
+          
      
+            
    • left, top, right and bottom are position based properties for movement on 
+                vertical and / or horizontal axis. These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires 
+                position:relative. These properties can be used as fallback for browsers with no support for translate properties such as IE8.
      • 
+            
    • width, height, minWidth, minHeight, maxWidth, 
+                maxHeight 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 
+                scale on IE8 again, as well as for other purposes.
      • 
+            
    • padding, margin, paddingTop, paddingBottom, paddingLeft, 
+                paddingRight, marginTop, marginBottom, marginLeft and 
+                marginRight are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin).
      • 
+            
    • borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth are 
+                borderLeftWidth are properties that allow you to animate the border of an element either on all sides at once or each side separatelly.
      • 
+            
    • outlineWidth property allows you to animate the outline-width of an element.
      • 
+          
    
+          
    The properties marked with different color, namely left, top, width and height are part of a lighter 
+              version of the component called baseBoxModel.js, since they're the most used and probably most needed in just about every KUTE.js distribution.
    
+
+          
    Examples
    
+          
    OK let's have a look at some sample tween objects and a quick demo:
    
+
+
    let tween1 = KUTE.to('selector1',{width:200})
+let tween2 = KUTE.to('selector1',{height:300})
+let tween3 = KUTE.to('selector1',{left:250})
+let tween4 = KUTE.to('selector1',{top:100})
+let tween5 = KUTE.to('selector1',{marginTop:200})
+let tween6 = KUTE.to('selector1',{marginBottom:50})
+let tween7 = KUTE.to('selector1',{padding:30})
+let tween8 = KUTE.to('selector1',{margin:'5px'})
+
    
+
+          
    We're gonna chain these tweens and start the animation.
    
+          
    
+              
    BOX
     MODEL 
    
+
+              
    
+                  Start
+              
    
+          
    
+
+          
+          
    Notes
    
+          
      
+              
    • Shorthand notations such as margin: "20px 50px" or any other property are not supported.
      • 
+              
    • Most box-model properties (except top, left, bottom and right) are layout modifiers and will not 
+                  produce the best visual experience mainly because they force re-paint on all page layout and they don't support animation under the pixel level.
      • 
+              
    • The baseBoxModel component is featured in all distributions, while the full component is featured in kute-extra.js distribution file.
      • 
+          
    
+
+      
    
+
+      
+      
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+    
+    
+    
+
+
+
+
diff --git a/clipProperty.html b/clipProperty.html
new file mode 100644
index 0000000..b8955fa
--- /dev/null
+++ b/clipProperty.html
@@ -0,0 +1,154 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Clip Property
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Clip Property
    
+          
    The component that animates the CSS clip property of a target element on most browsers.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate the clip property of a target element when certain conditions are met.
    
+              
    
+              
    
+                
    The KUTE.js Clip Property component enables animation for the CSS clip property on most browsers.
    
+                
    What exactly does it do? Well you can animate the visible rectangular shape of an element that is set to position:absolute. 
+                    If conditions are not met (more conditions apply, see notes below), the component will update the target element, but the effect is not visible.
    
+                
    Generally you can set the CSS rule for this property like this clip: rect(top,right,bottom,left) which forms a rectangular masking shape above 
+                    a target element making parts of it invisible.
    
+                
    While the CSS clip property has been deprecated, it can still be used to emulate a type of scale/reveal animation for legacy browsers in certain cases.
    
+              
    
+            
    
+          
    
+        
    
+
+
+        
    
+
+          
    Example
    
+          
    A possible tween object using the property:
    
+
+
    KUTE.to('selector',{clip:[0,150,100,0]}).start();
    
+
+          
    And a quick example here could look like this:
    
+
+          
    
+              
    
+
+              
    
+                  Start
+              
    
+          
    
+
+          
    Notes
    
+          
      
+            
    • The component will produce no effect for target elements that have overflow:visible style rule.
      • 
+            
    • Also target elements without position:absolute CSS rule will produce no effect.
      • 
+            
    • This property will only work with px unit for the rectangular mask, which is unfortunate.
      • 
+            
    • Don't stop here, there are thankfully replacements for this property, you can simply use all kinds of SVG masks and filters in combination
+                with the HTML Attributes component for much more animation potential and for no compromise on animation quality.
      • 
+            
    • This component is bundled with the kute-extra.js distribution file.
      • 
+          
    
+
+        
    
+
+        
+        
+
+    
    
+    
+
+    
+    
+
+    
+    
+    
+
+    
+    
+
+
+
diff --git a/colorProperties.html b/colorProperties.html
new file mode 100644
index 0000000..3af958f
--- /dev/null
+++ b/colorProperties.html
@@ -0,0 +1,171 @@
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Color Properties
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Color Properties
    
+          
    The component that animates CSS color properties for Element targets on most browsers.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate color properties for a target element and updates its CSS style via RGB.
    
+              
    
+              
    
+                
    The KUTE.js Color Properties component provides support for all color properties and all their variations on most browsers.
    
+                
    While with previous versions we used to have a keepHex option to always use the HEX format of the output color, modern browsers outright ignore the option and always 
+                    deliver colors in RGB format, probably for performance reasons.
    
+    
+                
    The component supports input values such as HEX, RGB and RGBA for all color properties and most browsers should also work with 
+                    web safe colors, eg. color: 'red'.
    
+    
+                
    For a quick reference, here are all the supported properties:
                            
+              
    
+            
            
+          
            
+        
            
+
+        
    
+            
+          
    Supported Properties
    
+          
      
+            
    • color allows you to animate the color for a target text element. Eg. color: '#ff0000'.
      • 
+            
    • backgroundColor allows you to animate the background-color for a target element. Eg. backgroundColor: 'rgb(202,150,20)'.
      • 
+            
    • outlineColor allows you to animate the outline-color for a target element. Eg. outline-color: 'cyan'.
      • 
+            
    • borderColor allows you to animate the border-color on all sides for a target element. Eg. borderColor: 'rgba(250,100,20,0.5)'.
      • 
+            
    • borderTopColor, borderRightColor, borderBottomColor and borderLeftColor properties allow 
+              you to animate the color of the border on each side of a target element. Eg. borderTopColor: 'rgb(0,66,99)'.
      • 
+          
    
+
+          
    Examples
    
+          
    OK let's have a look at some sample tween objects and a quick demo:
    
+
+
    KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
+KUTE.to('selector1',{backgroundColor:'#069'}).start();
+KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+
+
    
+
+        
    
+          
    Colors
    
+
+          
    
+              Start
+          
    
+        
    
+
+        
    Notes
    
+        
      
+          
    • The component will NOT work with SVGElement targets and their specific color attributes like fill or stroke, for that you can use the 
+              HTML Attributes component.
      • 
+          
    • To simplify your workflow, the value processing can also work with web safe colors like steelblue or darkorange.
      • 
+          
    • You can also use RGB or RGBA, but the last one is not supported on legacy browsers and it should fallback to RGB.
      • 
+          
    • Some properties like borderColor and its variations or outlineColor won't have any visible effect if no border or outline style is applied to 
+              your target element.
      • 
+          
    • This component is bundled with the standard kute.js and kute-extra.js distribution files.
      • 
+
+        
    
+
+      
    
+
+      
+      
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+    
+    
+    
+
+
+
+
diff --git a/css.html b/css.html
deleted file mode 100644
index aeb0ca4..0000000
--- a/css.html
+++ /dev/null
@@ -1,245 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js CSS Plugin | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-            
    CSS Plugin
    
-            
    The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the examples page. The focus is on box model properties like padding, margin                or borderWidth, as well as other types of properties like borderRadius, borderColor, backgroundPosition, borderColor or clip.
    
-
-
-            
    Border Radius
    
-            
    In the example below we are doing some animation on the border-radius 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
-                px, % and text properties' units such as em or rem.
    
-            
    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();
-
    
-
-            
    And here is how it looks like:
    
-
-            
    
-                
    ALL
    
-                
    TL
    
-                
    TR
    
-                
    BL
    
-                
    BR
    
-
-                
    
-                    Start
-                
    
-            
    
-
-            
    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 -moz-border-radius-topleft are not supported because they were depracated
-                with later versions. Download this example here.
    
-
-            
    Box Model Properties
    
-            
    The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as outlineWidth, minWidth or maxHeight                require a more complex context and we won't insist on them.
    
-            
    var tween1 = KUTE.to('selector1',{marginTop:200});
-var tween2 = KUTE.to('selector1',{marginBottom:50});
-var tween3 = KUTE.to('selector1',{padding:30});
-var tween4 = KUTE.to('selector1',{margin:'5%'});
-
    
-            
    We're gonna chain these tweens and start the animation. You can download this example here.
    
-            
    
-                
    BOX
     MODEL 
    
-
-                
    
-                    Start
-                
    
-            
    
-
-
-            
    TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.
    
-
-            
    Text Properties
    
-            
    OK here we're gonna do a cool example for text properties. Basically the below code would work:
    
-            
    var tween1 = KUTE.to('selector1',{fontSize:'200%'});
-var tween2 = KUTE.to('selector1',{lineHeight:24});
-var tween3 = KUTE.to('selector1',{letterSpacing:50});
-var tween3 = KUTE.to('selector1',{wordSpacing:50});
-
    
-            
    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 fontSize and letterSpacing properties for each character while
-                the button will animate fontSize and lineHeight properties. Watch this:
    
-
-            
    
-                
    Howdy!
    
-                Button
-
-                
    Start
    
-            
    
-            
    TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check assets/css/css.css file for more. This
-                example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example here.
    
-
-            
    Color Properties
    
-            
    The next example is about animating all border color properties, since the core engine already supports text color and backgroundColor properties. So check these lines for reference.
    
-            
    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:'red'}).start(); // IE9+ browsers
-KUTE.to('selector1',{borderLeftColor:'#069'}).start();
-KUTE.to('selector1',{outlineColor:'#069'}).start();
-
    
-            
    Let's get some animation going. Download the example here.
    
-
-            
    
-                
    Colors
    
-
-                
    
-                    Start
-                
    
-            
    
-
-            
    A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.
    
-
-            
    Clip Property
    
-            
    This property allows you to animate the rectangular shape of an element that is set to position:absolute. In CSS this property works like this clip: rect(top,right,bottom,left) forming a rectangular shape that masks an element making parts of it invisible. While the clip property have been deprecated, it can still be used to emulate a scale animation for legacy browsers in certain cases.
    
-
-            
    KUTE.to('selector',{clip:[0,150,100,0]}).start();
    
-
-            
    A quick example here could look like this:
    
-
-            
    
-                
    
-
-                
    
-                    Start
-                
    
-            
    
-            
    Note that this would produce no effect for elements that have overflow:visible style rule. Download this example here.
    
-
-            
    Background Position
    
-            
    Another property we can animate with KUTE.js is backgroundPosition. Quick example:
    
-            
    KUTE.to('selector1',{backgroundPosition:[0,50]}).start();
    
-            
    A working example would look like this:
    
-
-            
    
-                
    
-
-                
    
-                    Start
-                
    
-            
    
-            
    Download this example here.
    
-
-        
    
-
-        
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-
-
-
diff --git a/easing.html b/easing.html
deleted file mode 100644
index b300227..0000000
--- a/easing.html
+++ /dev/null
@@ -1,365 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js Easing Functions | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-
-        
    
-
-            
    Easing Functions
    
-            
    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.
    
-            
    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, here's an excellent resource some developers recommend. I would also recommend
-                this one too.
    
-
-            
    Core Functions
    
-            
    Modern browsers that support transition can also make use of some generic easing functions via the CSS3 transition-timing-function:ease-out property, but in Javascript animation, we need some special functions. The
-                popular Robert Penner's easing functions set 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 circular or exponential, and also the type of progression in                and/or out.
    
-
-            
    To use them, simply set a tween option like so easing: KUTE.Easing.easingSinusoidalInOut or simply easing: 'easingSinusoidalInOut'.
    
-            
    linear 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.
    
-
-            
    curve based functions are the next set of easings we are going to talk 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):
    
-            
      
-                
    • Sinusoidal - multiplier of 1 (super light object, like a feather)
      • 
-                
    • Quadratic - multiplier of 2
      • 
-                
    • Cubic - multiplier of 3
      • 
-                
    • Quartic - multiplier of 4
      • 
-                
    • Quintic - multiplier of 5
      • 
-                
    • Circular - multiplier of 6
      • 
-                
    • Exponential - multiplier of 10 (super heavy object, like a truck)
      • 
-            
    
-
-            
    The In / Out explained:
    
-            
      
-                
    • In - 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: easingSinusoidalIn, easingQuadraticIn,easingCubicIn,
-                    easingQuarticIn, easingQuinticIn, easingCircularIn and easingExponentialIn.
      • 
-                
    • Out - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: easingSinusoidalOut, easingQuadraticOut, easingCubicOut,
-                    easingQuarticOut, easingQuinticOut, easingCircularOut and easingExponentialOut.
      • 
-                
    • InOut - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: easingSinusoidalInOut, easingQuadraticInOut,
-                    easingCubicInOut, easingQuarticInOut, easingQuinticInOut, easingCircularInOut and easingExponentialInOut.
      • 
-            
    
-
-            
    back easing functions describe more complex animations (I would call them reverse gravity easings). They also come with in and/or out types of progression. 
    
-            
      
-                
    • easingBackIn 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 ground with acceleration.
      • 
-                
    • easingBackOut would be best described as the previous function, but viewed in reverse mode.
      • 
-                
    • easingBackInOut is a combination of the other two.
      • 
-            
    
-
-            
    elasticity easing functions describe the kind of animation where the object is elastic. With in and/or out as well. 
    
-            
      
-                
    • easingElasticOut would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.
      • 
-                
    • easingElasticIn would be best described as the above function but viewed in reverse mode.
      • 
-                
    • easingElasticInOut is simply a combination of the other two.
      • 
-            
    
-
-            
    gravity based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With in and/or out as well.
    
-            
      
-                
    • easingBounceOut looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.
      • 
-                
    • easingBounceIn looks like the previous viewed in reverse mode
      • 
-                
    • easingBounceInOut is a combination of the other two.
      • 
-            
    
-
-            
    Core easing functions examples:
    
-            
    
-                
    Linear
    
-                
    
-
-                
    
-                    
    
-                        Select
-                        
      
-                            
    • easingSinusoidalIn
      • 
-                            
    • easingSinusoidalOut
      • 
-                            
    • easingSinusoidalInOut
      • 
-                            
    • easingQuadraticIn
      • 
-                            
    • easingQuadraticOut
      • 
-                            
    • easingQuadraticInOut
      • 
-                            
    • easingCubicIn
      • 
-                            
    • easingCubicOut
      • 
-                            
    • easingCubicInOut
      • 
-                            
    • easingQuarticIn
      • 
-                            
    • easingQuarticOut
      • 
-                            
    • easingQuarticInOut
      • 
-                            
    • easingQuinticIn
      • 
-                            
    • easingQuinticOut
      • 
-                            
    • easingQuinticInOut
      • 
-                            
    • easingCircularIn
      • 
-                            
    • easingCircularOut
      • 
-                            
    • easingCircularInOut
      • 
-                            
    • easingExponentialIn
      • 
-                            
    • easingExponentialOut
      • 
-                            
    • easingExponentialInOut
      • 
-                            
    • easingBackIn
      • 
-                            
    • easingBackOut
      • 
-                            
    • easingBackInOut
      • 
-                            
    • easingElasticIn
      • 
-                            
    • easingElasticOut
      • 
-                            
    • easingElasticInOut
      • 
-                        
    
-                    
    
-                    Start
-                
    
-            
    
-
-            
    Cubic Bezier Functions
    
-            
    While modern browsers support CSS3 transition with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5), in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned
-                in the features page, we are using a modified version of the cubic-bezier by Gaëtan Renaudeau. I believe this must be most accurate easing functions
-                set.
    
-            
    You can use them either with easing: Bezier(mX1, mY1, mX2, mY2) or easing: 'bezier(mX1, mY1, mX2, mY2)', where mX1, mY1, mX2, mY2 are Float values from 0 to 1. You can find the right values you need
-                right here.
    
-            
    NOTE: Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.
    
-            
    There is also a pack of presets, and the keywords look very familiar to you:
    
-            
      
-                
    • Equivalents of the browser's generic timing functions: easeIn, easeOut and easeInOut
      • 
-                
    • Sinusoidal timing functions: easeInSine, easeOutSine and easeInOutSine
      • 
-                
    • Quadratic timing functions: easeInQuad, easeOutQuad and easeInOutQuad
      • 
-                
    • Cubic timing functions: easeInCubic, easeOutCubic and easeInOutCubic
      • 
-                
    • Quartic timing functions: easeInQuart, easeInQuart and easeInOutQuart
      • 
-                
    • Quintic timing functions: easeInQuint, easeOutQuint and easeInOutQuint
      • 
-                
    • Exponential timing functions: easeInExpo, easeOutExpo and easeInOutExpo
      • 
-                
    • Back timing functions: easeInBack, easeOutBack and easeInOutBack
      • 
-                
    • Special slow motion timing functions look like this: slowMo, slowMo1 and slowMo2
      • 
-            
    
-            
    Cubic-bezier easing functions examples:
    
-            
    
-                
    Linear
    
-                
    
-
-                
    
-                    
    
-                        Select
-                        
      
-                            
    • bezier(0.15, 0.7, 0.2, 0.9)
      • 
-                            
    • bezier(0.25, 0.5, 0.6, 0.7)
      • 
-                            
    • bezier(0.35, 0.2, 0.9, 0.2)
      • 
-                            
    • easeIn
      • 
-                            
    • easeOut
      • 
-                            
    • easeInOut
      • 
-                            
    • easeInSine
      • 
-                            
    • easeOutSine
      • 
-                            
    • easeInOutSine
      • 
-                            
    • easeInQuad
      • 
-                            
    • easeOutQuad
      • 
-                            
    • easeInOutQuad
      • 
-                            
    • easeInCubic
      • 
-                            
    • easeOutCubic
      • 
-                            
    • easeInOutCubic
      • 
-                            
    • easeInQuart
      • 
-                            
    • easeOutQuart
      • 
-                            
    • easeInOutQuart
      • 
-                            
    • easeInQuint
      • 
-                            
    • easeOutQuint
      • 
-                            
    • easeInOutQuint
      • 
-                            
    • easeInExpo
      • 
-                            
    • easeOutExpo
      • 
-                            
    • easeInOutExpo
      • 
-                            
    • easeInCirc
      • 
-                            
    • easeOutCirc
      • 
-                            
    • easeInOutCirc
      • 
-                            
    • easeInBack
      • 
-                            
    • easeOutBack
      • 
-                            
    • easeInOutBack
      • 
-                            
    • slowMo
      • 
-                            
    • slowMo1
      • 
-                            
    • slowMo2
      • 
-                        
    
-                    
    
-                    Start
-                
    
-            
    
-
-
-            
    Physics Based Functions
    
-            
    KUTE.js also packs the dynamics physics 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.
    
-            
    NOTE: Starting with KUTE.js v 1.6.0 the Physics Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.
    
-            
    You can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly
-                bezier based functions. Ok now, let's get to it:
    
-
-            
      
-                
    • spring function is basically an elastic type of easing that allows you to set frequency:1-1000, friction:1-1000, anticipationSize:0-1000 (a kind of delay in miliseconds)
-                    and anticipationStrength:0-1000 (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: spring({friction:100,frequency:600}).
      • 
-                
    • bounce function is also an elastic easing function, but it works different than Robert Penner's version that's basically a gravity based function. This one here will always come back to the
-                    starting values. This function allows you to set frequency:0-1000 and friction:0-1000. Usage: easing: bounce({friction:100,frequency:600}).
      • 
-                
    • gravity function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: elasticity:1-1000 and bounciness:0-1000. Usage: easing: gravity({elasticity:100,bounciness:600}).
      • 
-                
    • forceWithGravity function acts just like gravity except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000 and bounciness:0-1000.
-                    Usage: easing: forceWithGravity({elasticity:100,bounciness:600}).
      • 
-                
    • bezier easing function is a bit more complicated as it allows you to set multiple points of bezier curves. Usage: easing: BezierMultiPoint({points:POINTS_ARRAY_COMES HERE}), 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 easeIn looks like:
-                    
      // sample bezier based easing
-easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
-
       In other cases, the bezier can handle multiple points as well, basically unlimited:
-                    
      // multi point bezier easing
-easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
-
      
-                
      • 
-            
    
-            
    The presets can be used both as a string easing:'physicsIn' or easing: Physics.physicsIn(friction:200). The list is:
    
-            
      
-                
    • curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
      • 
-                
    • back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.
      • 
-            
    
-            
    Physics easing functions examples:
    
-            
    
-                
    Linear
    
-                
    
-
-                
    
-                    
    
-                        Select
-                        
      
-                            
    • physicsIn
      • 
-                            
    • physicsOut
      • 
-                            
    • physicsInOut
      • 
-                            
    • physicsBackIn
      • 
-                            
    • physicsBackOut
      • 
-                            
    • physicsBackInOut
      • 
-                            
    • spring
      • 
-                            
    • bounce
      • 
-                            
    • gravity
      • 
-                            
    • forceWithGravity
      • 
-                            
    • bezier
      • 
-                            
    • multiPointBezier
      • 
-                        
    
-                    
    
-                    Start
-                
    
-            
    
-
-        
    
-
-        
    
-
-            
-
-        
    
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-
-
-
diff --git a/examples.html b/examples.html
deleted file mode 100644
index 0c83ce2..0000000
--- a/examples.html
+++ /dev/null
@@ -1,515 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js Core Engine Examples | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-            
    Core Engine
    
-            
    KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript without libraries like jQuery, but before we head over to the more advanced examples, let's have a quick look at these two
-                basic examples here. Note: the examples are posted on codepen.
    
-
-            
    Basic Native Javascript Example
    
-            
    When developing with native Javascript, a very basic syntax goes like this:
    
-
-            
    -// this is the tween object, basically KUTE.method(element, from, to, options);
-var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});
-
    
-
-            
    Now the tween object is created, it's a good time for you to know that via Native Javascript we always animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements
-                such as querySelectorAll() or getElementsByTagName(), you need to do a for () loop, or make use of the two new methods: .allTo() or .allFromTo(). Now let's apply the tween
-                control methods:
    
-
-            
    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
-tween.playing // checks if the tween is currenlty active so we prevent start() when not needed
-tween.paused // checks if the tween is currenlty active so we can prevent pausing or resume if needed
-
    
-
-            
    The demo for the above example is here.
    
-
-            
    Transform Properties Examples
    
-            
    KUTE.js supports almost all about transform as described in the spec: the 2D translate, rotate, skewX, skewY                and scale, as well as the 3D translateX, translateY, translateZ, translate3d, rotateX, rotateY, rotateZ properties. Additionally it
-                allows you to set a perspective for the element or it's parent as well as a perpective-origin for the element or it's parent.
    
-
-            
    Translations
    
-            
    In the next example the first box is moving to left 250px with translate property, the second box is moving to the right by 200px using translateX and the third box is moving to the bottom using translate3d.
-                The last box also uses translate3d but requires a perspective value for the animation on the Z axis to be effective.
    
-            
    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});
-
    
-            
    And here is how it looks like:
    
-            
    
-                
    2D
    
-                
    X
    
-                
    Y
    
-                
    Z
    
-
-                
    
-                    Start
-                
    
-            
    
-
-            
    As you can see in your browsers console, for all animations translate3d is used, as explained in the features page. Also the first example that's using the 2D translate for both vertical
-                and horizontal axis even if we only set X axis. You can download this example here.
    
-            
    Remember: stacking translate and translate3d together may not work and IE9 does not support perspective.
    
-
-            
    Rotations
    
-            
    Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support rotate3d.
    
-
-            
    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});
-
    
-
-            
    And here is how it looks like:
    
-            
    
-                
    2D
    
-                
    X
    
-                
    Y
    
-                
    Z
    
-                
    
-                    Start
-                
    
-            
    
-            
    The rotateX and rotateY 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
-                perspective 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 here.
    
-
-            
    Skews
    
-            
    KUTE.js supports skewX and skewY so let's animate the two. Since they are 2D transformations, IE9 supports skews.
    
-            
    var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
-var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});
-
    
-
-            
    And here is how it looks like:
    
-            
    
-                
    X
    
-                
    Y
    
-
-                
    
-                    Start
-                
    
-            
    
-            
    You can download this example here.
    
-
-            
    Mixed Transformations
    
-            
    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:
    
-
-            
    var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
-var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
-
    
-            
    If you check the test here, you will notice that only the skewY is going to work and no rotation. Now let's do this properly.
    
-
-            
    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'} // transform 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'} // transform options
-);
-
    
-            
    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.
    
-
-            
    
-                
    element perspective 400px
    
-                
    parent perspective 400px
    
-
-                
    
-                    Start
-                
    
-            
    
-
-            
    This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example here.
    
-
-            
    Chained Transformations
    
-            
    KUTE.js has the ability to stack transform properties as they come in chained tweens 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 .to()                method because it has the ability to stack 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:
    
-            
    
-                
    FROMTO
    
-                
    FROMTO
    
-                
    TO
    
-
-                
    
-                    Start
-                
    
-            
    
-            
    What's this all about?
    
-            
      
-                
    • the first box uses a regular .fromTo() 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
      • 
-                
    • the second box is also using .fromTo() object, but using proper values for all tweens at all times, so we fixed that glitch
      • 
-                
    • and the last box uses the .to() method, and does the chaining easier for most properties, especially for transform
      • 
-            
    
-
-            
    When coding transformation chains I would highly recommend:
    
-            
      
-                
    • keep the same order of the transform properties, best would be: translation, rotation, skew and scale; an example of the difference shown here for rotations and
-                    here for rotations and skew;
      • 
-                
    • 2D and 3D translations would work best in if you provide a value at all times; eg. translate:[x,y] and translate3d:[x,y,z]; for instance using translate:150 or translateX:150 would mean
-                    that all other axis are 0;
      • 
-                
    • on larger amount of elements animating chains, the .fromTo() 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 features page;
      • 
-                
    • download this example here.
      • 
-            
    
-
-            
    Box Model Properties
    
-            
    KUTE.js core engine supports most used box model properties, and almost all the box model properties via the CSS Plugin, so the next example will only animate width, height, top                and left.
    
-            
    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});
-
    
-            
    We're gonna chain these tweens and start the animation. You can download this example here.
    
-            
    
-                
    BOX MODEL
    
-
-                
    
-                    Start
-                
    
-            
    
-
-
-            
    TIP: the width and height properties used together can be great for scale animation fallback on images for legacy browsers.
    
-
-            
    Color Properties
    
-            
    The next example is about animating color properties. As for example, check these lines for reference. Additional color properties such as borderColor or borderLeftColor are supported via the CSS Plugin.
    
-            
    KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
-KUTE.to('selector1',{backgroundColor:'#069'}).start();
-KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only
-
    
-            
    Let's get some animation going. Download the example here.
    
-
-            
    
-                
    Colors
    
-
-                
    
-                    Start
-                
    
-            
    
-
-            
    A quick reminder: you can also use RGB or RGBA, but the last one is not supported on IE8 and it will fallback to RGB.
    
-
-            
    Vertical Scrolling
    
-            
    Another property we can animate with KUTE.js is scrollTop. I works for both the window and any scrollable object. Quick example:
    
-            
    KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
-KUTE.to('window',{scroll:450}).start(); // for the window
-
    
-            
    The scroll animation could however be influenced by mouse hover effects, usually creating some really nasty bottlenecks, but you can always add some CSS to your page to prevent that:
    
-            
    /* prevent scroll bottlenecks */
-body[data-tweening="scroll"],
-body[data-tweening="scroll"] * { pointer-events: none !important; }
-
    
-            
    A working example would work like this. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.
    
-
-
-            
    Cross Browser Animation Example
    
-            
    Unlike the examples hosted on Codepen, 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 complete reference. Now we are ready:
    
-
-                    
    Collect Information And Cache It
    
-
    // 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
-
-
    
-                    
    Define Properties And Options Objects
    
-                    
    // create values and options objects
-var startValues = {};
-var endValues = {};
-var options = {};
-
-// here we define properties that are commonly supported
-startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';
-
-// 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;
-  // for IE we override color values
-  startValues.backgroundColor = '#CDDC39';
-  endValues.backgroundColor = '#ec1e71';
-  // IE8 also doesn't support RGBA, we set to animate the opacity of the element
-  startValues.opacity = 1;
-  endValues.opacity = 0.2;
-} 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;
-
    
-
-                    
    Build Tween Object And Tween Controls
    
-                    
    // 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);
-
    
-                    
    Live Demo
    
-                    
    
-                        
    
-
-                        
    
-                        
    
-                            Pause
-                            Start
-                            Stop
-                        
    
-                    
    
-                    
    Let's explain this code a bit. KUTE.js gives you the internal variables myTween.playing and myTween.paused (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.
    
-                    
    Also please know that opacity animation only works on Internet Explorer 8 if the target element uses float: left/right, display: block or display: inline-block.
    
-                    
      
-                        
    • the START button will use the .start() method and the animation starts;
      • 
-                        
    • the STOP button will use the .stop() method and stops the animation; after this the, animation can only be started again
      • 
-                        
    • the PAUSE button will use the .pause() method and pauses the animation; this also changes the button's text and functionality;
      • 
-                        
    • the RESUME button will use the .resume() method and resumes the animation; this reverses the button's initial state;
      • 
-                        
    • make sure you work with the conditions properly when you want to pause an animation you MUST check both !myTween.playing and myTween.paused conditions because you could end up with errors.
      • 
-                    
    
-
-                    
    Tween Object Collections
    
-                    
    With KUTE.js 1.5.0 new tween object constructor methods were introduced, and 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.
    
-                    
    // 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 }
-);
-
    
-                    
    And should looks like this:
    
-                    
    
-                        
    K
    
-                        
    U
    
-                        
    T
    
-                        
    E
    
-
-                        
    
-                            Start
-                        
    
-                    
    
-                    
    As you can see, we also used the new tween options offset and transformOrigin and they make it so much more easy.
    
-
-
-                    
    Easing Functions
    
-                    
    KUTE.js core engine comes with Robert Penner's easing functions, but it can also work with any other easing functions, including custom functions. In the example below the first box animation uses the linear easing function
-                        and the second will use another function you choose.
    
-                    
    
-                        
    Linear
    
-                        
    
-
-                        
    
-                            
    
-                                Select
-                                
      
-                                    
    • easingSinusoidalIn
      • 
-                                    
    • easingSinusoidalOut
      • 
-                                    
    • easingSinusoidalInOut
      • 
-                                    
    • easingQuadraticIn
      • 
-                                    
    • easingQuadraticOut
      • 
-                                    
    • easingQuadraticInOut
      • 
-                                    
    • easingCubicIn
      • 
-                                    
    • easingCubicOut
      • 
-                                    
    • easingCubicInOut
      • 
-                                    
    • easingQuarticIn
      • 
-                                    
    • easingQuarticOut
      • 
-                                    
    • easingQuarticInOut
      • 
-                                    
    • easingQuinticIn
      • 
-                                    
    • easingQuinticOut
      • 
-                                    
    • easingQuinticInOut
      • 
-                                    
    • easingCircularIn
      • 
-                                    
    • easingCircularOut
      • 
-                                    
    • easingCircularInOut
      • 
-                                    
    • easingExponentialIn
      • 
-                                    
    • easingExponentialOut
      • 
-                                    
    • easingExponentialInOut
      • 
-                                    
    • easingBackIn
      • 
-                                    
    • easingBackOut
      • 
-                                    
    • easingBackInOut
      • 
-                                    
    • easingElasticIn
      • 
-                                    
    • easingElasticOut
      • 
-                                    
    • easingElasticInOut
      • 
-                                
    
-                            
    
-                            Start
-                        
    
-                    
    
-                    
    For more examples and info about the other easing functions, head over to the easing examples page.
    
-        
    
-
-        
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-    
-    
-    
-    
-    
-    
-
-
-
diff --git a/extend.html b/extend.html
deleted file mode 100644
index ea24628..0000000
--- a/extend.html
+++ /dev/null
@@ -1,376 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-
-    Extending KUTE.js | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-
-            
    Extend Guide
    
-            
    KUTE.js is a very flexible animation engine that allows you to extend beyond measure. In this tutorial we'll dig into what's best to do to extend/customize the functionality of KUTE.js core, plugins and features.
    
-
-            
    Basic Plugin Template
    
-            
    The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:
    
-            
    /* KUTE.js - The Light Tweening Engine
- * by dnp_theme
- * package - pluginName
- * desc - what your plugin does
- * pluginName by yourNickname aka YOUR NAME
- * Licensed under MIT-License
- */
-
-(function (root,factory) {
-  if (typeof define === 'function' && define.amd) {
-    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("pluginName require KUTE.js.");
-  }
-}(this, function (KUTE) {
-    // your code goes here
-
-    // in this function body
-
-    // the plugin returns this
-    return this;
-}));
-
    
-            
    As suggested in the above template, your function body could be written with one or more of the examples below.
    
-
-            
    Extend Tween Control
    
-            
    In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check Tween function to get the internal references notation:
    
-            
    //add a reference to _tween function
-var Tween = KUTE.Tween;
-
-// let's add a timescale method
-Tween.prototype.timescale = function(factor){
-    this.options.duration *= factor;
-    return this;
-}
-
-// or let's add a reverse method
-Tween.prototype.reverse = function(){
-    for (var p in this.valuesEnd) {
-        var tmp = this.valuesRepeat[p]; // we cache this object first
-        this.valuesRepeat[p] = this.valuesEnd[p];
-        this.valuesEnd[p] = tmp;
-        this.valuesStart[p] = this.valuesRepeat[p];
-    }
-    return this;
-}
-
-// go back in time
-Tween.prototype.seek = function (time) {
-    this._startTime -= time;
-    return this;
-};
-
-// how about a restart method
-Tween.prototype.restart = function(){
-    if (this.playing) {
-        this.stop();
-        this.start();
-    }
-    return this;
-}
-
-// methods to queue callbacks with ease
-Tween.prototype.onUpdate = function(){
-    this.options.update = arguments;
-    return this;
-}
-
-
    
-            
    For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very specific need.
    
-
-            
    Support For Additional CSS Properties
    
-            
    KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and
-                you'll master it real quick, it's very easy.
    
-            
    We need basically 3 functions:
    
-            
      
-                
    • KUTE.prepareStart['propertyName'] required a function to get the current value of the property required for the .to() method;
      • 
-                
    • KUTE.parseProperty['propertyName'] required a function to process the user value / current value to have it ready to tween;
      • 
-                
    • KUTE.dom['propertyName'] required a domUpdate function that will update the property value into the DOM;
      • 
-                
    • KUTE.crossCheck['propertyName'] optional a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms
-                    and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;
      • 
-                
    • also optional additional functions that will help with value processing.
      • 
-            
    
-            
    So let's add support for boxShadow! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template
-                and let's break it down to pieces:
    
-            
    // add a reference to global and KUTE object
-var g = typeof global !== 'undefined' ? global : window, K = KUTE,
-    // add a reference to KUTE utilities
-    prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
-    property = K.property, parseProperty = K.parseProperty, trueColor = K.truC,
-    DOM = K.dom, color = g.Interpolate.color, unit = g.Interpolate.unit; // interpolation functions
-
-// 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 = 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 browsers that don't support the property, use a filter
-// if (!(_boxShadow in document.body.style)) {return;}
-
    
-            
    Now we have access to the KUTE object, prototypes and it's utility functions, let's write a prepareStart function that will read the current boxShadow value:
    
-            
    // for the .to() method, you need to prepareStart the boxShadow property
-// which means you need to read the current computed value
-// if the current computed value is not acceptable, use a default value
-prepareStart['boxShadow'] = function(property,value){
-    var cssBoxShadow = getCurrentStyle(this.element,'boxShadow'); // where getCurrentStyle() is an accurate method to read the current property value
-    return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow; // if the current value is not valid, use a default one
-}
-
-// note that in some cases the window.getComputedStyle(this.element,null) can be faster or more appropriate
-// we are using a hybrid function that's trying to get proper colors and other stuff
-// some legacy browsers lack in matters of accuracy so the KUTE.js core methods would suffice
-
-// also to read the current value of an attribute, replace first line of the above function body with this
-// var attrValue = element.getAttribute(property);
-// and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types
-
    
-
-            
    Since KUTE.js 1.6.0, the tween object is bound to all property parsing utilities, meaning that you have access to this that has the target element, options, start and end values and everything else. This is extremely useful if
-                you want to optimize and/or extend particular properties values, the dom update functions, and even override the property name
    
-
-            
    Now we need an utility function that makes sure the structure looks right for the DOM update function.
    
-            
    // utility function to process values accordingly
-// numbers must be floats/integers and color must be rgb object
-var processBoxShadowArray = function(shadow){
-  var newShadow;
-  // properly process the shadow based on amount of values
-  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 numbers are ready to tween
-  for (var i=0; i<4; i++){
-    newShadow[i] = parseFloat(newShadow[i]);
-  }
-  // make sure color is an rgb object
-  newShadow[4] = trueColor(newShadow[4]); // where K.truC()/trueColor is a core method to return the true color in rgb object format
-  return newShadow;
-};
-
    
-
-            
    Next we'll need to write a parseProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the KUTE.dom['boxShadow'] function into the
-                KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
    
-
-            
    // the parseProperty for boxShadow
-// registers the window.dom['boxShadow'] function
-// returns an array of 6 values in the following format
-// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
-parseProperty['boxShadow'] = function(property,value,element){
-  // the DOM update function for boxShadow registers here
-  // we only enqueue it if the boxShadow property is used to tween
-  if ( !('boxShadow' in DOM) ) {
-    DOM['boxShadow'] = function(element,property,startValue,endValue,progress) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress
-
-      // let's start with the numbers | set unit | also determine inset
-      var numbers = [], px = 'px', // the unit is always px
-        inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false;
-
-      for (var i=0; i<4; i++){ // for boxShadow coordinates we do the math for an array of numbers
-        numbers.push( unit(startValue[i], endValue[i], px, progress) );
-      }
-
-      // now we handle the color
-      var colorValue = color(startValue[4],endValue[4],progress);
-
-      // last piece of the puzzle, the DOM update
-      element.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
-    };
-  }
-
-  // processProperty for boxShadow, builds basic structure with ready to tween values
-  if (typeof value === 'string'){
-    var shadowColor, 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"
-    shadowColor = value.match(colRegEx);
-    value = value.replace(shadowColor[0],'').split(' ').concat([shadowColor[0].replace(/\s/g,'')],[inset]);
-
-    // now we can use the above specific utitlity
-    value = processBoxShadowArray(value);
-  } else if (value instanceof Array){
-    value = processBoxShadowArray(value);
-  }
-  return value;
-}
-
    
-
-            
    And now, we are ready to tween both .to() and .fromTo() methods:
    
-            
    // tween to a string value
-var myBSTween1 = KUTE.to('selector', {boxShadow: '15px 25px #069'}).start();
-
-// or a fromTo with string and array, hex and rgb
-var myBSTween2 = KUTE.fromTo('selector', {boxShadow: [15, 25, 0, '#069']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
-
-// maybe you want to animate an inset boxShadow?
-var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
-
    
-            
    You are now ready to demo!
    
-            
    
-                
    
-
-                
    
-                    Start
-                
    
-            
    
-            
    This plugin should be compatible with IE9+ and anything that supports boxShadow CSS property. As you can see it can handle pretty much anything you throw at it, but it requires at least 3 values: h-shadow, v-shadow, and color
-                because Safari doesn't work without a color. Also this plugin won't be able to handle multiple instances of boxShadow for same element, because the lack of support on legacy browsers, also the color cannot be RGBA, but hey,
-                it supports both outline and inset shadows and you can fork it anyway to your liking.
    
-            
    If you liked this tutorial, feel free to write your own, a great idea would be for textShadow, it's very similar to the above example plugin.
    
-
-            
    Utility Methods
    
-            
      
-                
    • KUTE.selector(selector,multi) is the selector utility that uses getElementById or querySelector when multi argument is null or false, BUT
-                    when true, querySelectorAll is used and returns a HTMLCollection object.
      • 
-                
    • KUTE.property(propertyName) is the autoPrefix function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function
-                    returns undefinedPropertyName and that would be an easy way to detect support for that property on most legacy browsers: 
      if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }
      • 
-                
    • KUTE.getPrefix() returns a vendor preffix even if the browser supports a specific preffixed property or not.
      • 
-                
    • KUTE.getCurrentStyle(element,property) a hybrid getComputedStyle function to get the current value of the property required for the .to() method; it actually checks in element.style,
-                    element.currentStyle and window.getComputedStyle(element,null) to make sure it won't miss the property value;
      • 
-                
    • KUTE.truD(value) a function that accepts String and Number and returns a {v: 150, u: 'px'} object for any box model or a single numeric value based property and make it ready to tween. When a second
-                    parameter is set to true it will return an object with value and unit specific for rotation angles and skews.
      • 
-                
    • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color,
-                    the IE9+ browsers will be able to return the rgb object we need.
      • 
-                
    • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
      • 
-                
    • KUTE.rth(r,g,b) a function that accepts numeric values for red, blue and green and returns a HEX format #006699 color string.
      • 
-                
    • Interpolate.number is most essential interpolation tool when developing plugins for various properties not supported in the core.
      • 
-                
    • Interpolate.unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
      • 
-                
    • Interpolate.color is a very fast interpolation function for colors, as used in the above example.
      • 
-                
    • Interpolate.coords is SVG Plugin only, but you can have a look anytime when you're out of ideas.
      • 
-            
    
-
-            
-
-        
    
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-
-
diff --git a/features.html b/features.html
deleted file mode 100644
index fdcd43f..0000000
--- a/features.html
+++ /dev/null
@@ -1,214 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js Features | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-            
    Features Overview
    
-            
    Badass Performance
    
-            
    KUTE.js was developed with best practices in mind for fastest code execution and memory efficiency, but performance varies from case to case, as well as for all the 
-                other Javascript based animation engines. As a quick note on how it works, 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.
    
-
-            
    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 
-                video), code simplicity (lots of CSS for a custom animation) 
-                and more other.
    
-            
    To learn more about how performance can vary from case to case, check out this section, it's very informative.
    
-        
    
-
-        
    
-            
    Extensible Prototype
    
-            
    KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing 
-                functions, HTML presentation attributes or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy. 
    
-            
    For instance if you want to be able to animate the filter property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function 
-                to read current value and the last one for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other 
-                tools you can use for your own plugin's processing.
    
-            
    You may want to head over to the extend page for an indepth guide on how to write your own plugin/extension.
    
-        
    
-
-        
    
-            
    Auto Browser Prefix
    
-            
    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: transform, perspective, perspective-origin, border-radius and the requestAnimationFrame 
-                Javascript method.
    
-            
    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; less string concatenation = more performance. This asumes you are NOT styling the above CSS3 properties 
-                using your stylesheets to avoid glitches with legacy browsers.
    
-            
    This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.
    
-        
    
-
-        
    
-            
    Browser Compatibility
    
-            
    KUTE.js covers all modern browsers but also provides fallback options for legacy browsers. The prefix free feature mentioned above is one way to enable smooth Javascript 
-                based animations on older versions Gecko/Webkit/IE browsers for transform and border-radius. Generally, KUTE.js is built around most used properties, so I highly recommend checking 
-                the can I use website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support 
-                2D transforms or 3D transforms so make sure you know what browsers support and 
-                how to target them before you get to work with a complete browser supported animation setup.
    
-            
    I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 (compatibility mode OFF) and it really works with the help of 
-            polyfills 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 transition.
    
-            
    Speaking of polyfills, KUTE.js no longer requires window.requestAnimationFrame() for the main thread, but it does require the window.performance.now() for checking the current time, 
-                .indexOf() for array/string checks, window.getComputedStyle() for the .to() method and .addEventListener() for scroll animation. 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 
-                polyfill service some browser detection will not work because they fill the gap and your code won't work as expected. For instance this would 
-                check for IE8 browser var isIE = document.all && !document.addEventListener; but the polyfill covers .addEventListener() so you will never succeed. This very demo is a great solution 
-                for targeting Microsoft's legacy browsers.
    
-            
    As of Safari, we did some tests there too, KUTE.js does it really well.
    
-        
    
-
-        
    
-            
    Methods, Tools and Options
    
-            
    Building Tween Objects
    
-            
    KUTE.js allows you to create tween objects with the help of .to() and .fromTo() methods for a single element, with distinctive functionalities, and the other .allTo() and 
-                .allFromTo() that use the first two for collections of elements.
    
-
-            
    KUTE.to('selector', toValues, options) method is super simple and straightforward and requires a polyfill for window.getComputedStyle() 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 transform properties as they come in chained tweens. However fixing the 
-                sync issues is not that hard, see the example at start() method API.
    
-
-            
    KUTE.fromTo('selector', fromValues, toValues, options) 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.
    
-
-            
    It doesn't stack transform 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.
    
-
-            
    KUTE.allTo('selector', toValues, options) and KUTE.allFromTo('selector', fromValues, toValues, options) inherit all functionality from the .to() and .fromTo() 
-                method respectively, but they apply to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the 
-                API documentation on all the methods.
    
-
-            
    Tween Control
    
-            
    Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: .start(), .stop(), .pause() 
-                and .resume(). These public methods work either when animation is not running, running or is paused. You need to see the documentation to learn how these work.
    
-
-            
    Tween Options
    
-            
    Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or 
-                a perspective-origin, right? Well, make sure to check that out.
    
-
-            
    Callback System
    
-            
    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.
    
-
-            
    Addons
    
-            
    KUTE.js sports some fine tuned addons: SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic 
-                bezier easing functions and also physics based easing functions. It also features an extensive guide on how to extend, but I'm open for more features in the future.
    
-
-            
    Check the documentation on these methods and the examples page for more.
    
-        
    
-
-        
    
-            
    Developer Friendly
    
-            
    You can develop with KUTE.js for free thanks to the MIT License terms. The terms in short 
-                allow you to use the script for free in both personal and commercial application as long as you give proper credits to the original author. 
-                Also a link back would be appreciated.
    
-            
    Also KUTE.js is super documented, all features and options are showcased with detailed examples so you can get your hands really dirty.
    
-
-            
-        
    
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-
-    
-    
-    
-    
-
-
-
diff --git a/filterEffects.html b/filterEffects.html
new file mode 100644
index 0000000..53d08d8
--- /dev/null
+++ b/filterEffects.html
@@ -0,0 +1,192 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Filter Effects
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Filter Effects
    
+          
    The component that animates the CSS3 filter property for specific Element targets on modern browsers.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate filter functions for a target Element and deliver the best possible animation.
    
+              
    
+              
    
+                
    The KUTE.js Filter Effects component provides support for the CSS3 filter property on modern browsers.
    
+                
    The component covers all filter functions, except that the url() function cannot be animated, however the component will 
+                    try and keep it's value into the target element styling at all times.
    
+                
    Similar to the Transform Functions and the Transform Matrix components, 
+                    this component will try and keep same order of the filter functions, regardless of the input order, and the reason is that chained animations can 
+                    have some unwanted janky artifact effects.
         
+                
    Most values are in [0-Infinity] range and the presentation is delivered with % suffixed values, except blur() which uses px
+                    as unit/suffix.
    
+              
    
+            
    
+          
    
+        
    
+
+        
    
+          
    Filter Functions
    
+          
      
+            
    • url() function links an element to an SVG filter, the function is supported to keep it's value into the target element's style in case it's set 
+                initially or you want to set it yourself.
      • 
+            
    • opacity() can animate the opacity for a target element in the 0-100% range. Default is 100%.
      • 
+            
    • blur() can animate the blur for a target element in the 0-Infinity range. Default is 0px and the unit is always px.
      • 
+            
    • saturate() can animate the color saturation for a target element in the 0-Infinity range. Default is 100%.
      • 
+            
    • grayscale() can animate the color desaturation for a target element in the 0-100% range. Default is 0%.
      • 
+            
    • brightness() can animate the brightness for a target element in the 0-Infinity range. Default is 100%.
      • 
+            
    • contrast() can animate the contrast for a target element in the 0-Infinity range. Default is 100%.
      • 
+            
    • sepia() can animate the sepia filter for a target element in the 0-100% range. Default is 0%.
      • 
+            
    • invert() can animate the color inversion for a target element in the 0-100% range. Default is 0%.
      • 
+            
    • hueRotate() can animate the color hue rotation for a target element in the 0-Infinity range. Default is 0deg.
      • 
+            
    • dropShadow() can animate the shadow and all related parameters for a target element. Default is [0,0,0,'black']
      • 
+          
                    
+          
+          
    Examples
    
+          
    Let's have a look at some sample tween objects and a quick example:
    
+
+            
    let fe1 = KUTE.to('selector1', {filter :{ blur: 5 }})
+let fe2 = KUTE.to('selector2', {filter :{ sepia: 50, invert: 80 }})
+let fe3 = KUTE.to('selector3', {filter :{ saturate: 150, brightness: 90 }})
+let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, dropShadow:[5,5,5,'olive'] }})
+
    
+
+          
    
+              
+                  
+                      
+                          
+                          
+                          
+                          
+                          
+                              
+                              
+                          
+                      
+                  
+              
+              
    FE1
    
+              
    FE2
    
+              
    FE3
    
+              
    FE4
    
+
+              
    
+                  Start
+              
    
+          
    
+          
    Notes
    
+          
      
+              
    • The CSS filter property is supported on all major browsers nowadays, but it's better to check and 
+                  double check.
      • 
+              
    • This component can be a great addition to all SVG related components, especially because the dropShadow provides a better experience than 
+                  boxShadow, as shown here.
      • 
+              
    • Since this component can work with the url() function the way it does, the HTML Attributes component will 
+                  complement greatly for even more animation potential.
      • 
+              
    • Similar to the HTML Attributes component, this one can also deal with specific function namespace, for instance hue-rotate and 
+                  hueRotate.
      • 
+              
    • This component is bundled with the kute-extra.js distribution file.
      • 
+              
+          
    
+      
    
+
+      
+      
+
+    
    
+    
+
+
+    
+    
+
+    
+    
+    
+    
+    
+
+
+
diff --git a/htmlAttributes.html b/htmlAttributes.html
new file mode 100644
index 0000000..522f99b
--- /dev/null
+++ b/htmlAttributes.html
@@ -0,0 +1,236 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js HTML Attributes
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    HTML Attributes
    
+          
    The component that animates color attributes or any single value presentation attribute of a target element on most browsers.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate a wide variety of presetantion attributes of a target element.
    
+              
    
+              
    
+                
    The KUTE.js HTML Attributes component enables animation for any numeric presentation attribute, with or without a measurement unit / suffix as well as specific color attributes.
    
+                
    The component can be a great asset for creating complex animations in combination with the SVG components as we'll see in the following examples.
    
+                
    The component doesn't support attributes with multiple values like stroke-dasharray, viewBox or transform for specific reasons. To animate the stroke related attributes, the 
+                    SVG Draw component is the tool for you, while for transform you have the SVG Transform component and the 
+                    Transform Matrix component.
    
+                
    Despite the "limitations" of this component, you have access to just about any SVGElement or Element 
+                    presentation attribute available.
    
+              
    
+            
    
+          
    
+        
    
+
+        
    
+          
    General Usage
    
+
+
    // basic notation for unitless attributes
+var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
+
+// OR for attributes that are ALWAYS suffixed / have a measurement unit
+var mySuffAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
+
    
+
+          
    Attributes Namespace
    
+          
    The HTML Attributes component can handle all possible single value presentation attributes with both dashed string and camel-case notation. Let's have a look at a sample notation so you can 
+              get the idea:
    
+
+
    // dashed attribute notation
+var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
+
+// non-dashed attribute notation
+var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
+
    
+
+          
    The strokeWidth attribute is very interesting because it can work with px, % or with no unit/suffix. In this case, and in any context, the component will always work with the 
+              attribute's current value suffix to eliminate any possible janky animation.
    
+
+          
    Examples
    
+          
    Color Attributes
    
+          
    The HTML Attributes component can also animate color attributes: fill, stroke and stopColor. If the elements are affected by their CSS counterparts, the effect 
+              is not visible, you need to make sure that doesn't happen.
    
+
+
    // some fill rgb, rgba, hex
+var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
+
+// some stopColor or 'stop-color'
+var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
+
    
+
+          
    
+              
+
+              
+          
+
+              
    
+                  Start
+              
    
+          
    
+          
    If in this example the fill attribute value would reference a gradient, then rgba(0,0,0,0) is used. Keep in mind that the component will not work with combined
+              fill values like url(#pattern) rgba(), you are better of only using the url(#pattern) and use other attributes to control directly the animation of that 
+              linked pattern, just like in the last example below.
    
+
+          
    Unitless Attributes
    
+          
    In the next example, let's play with the attributes of a <circle> element: radius and center coordinates.
    
+
+
    // radius attribute
+var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
+
+// coordinates of the circle center
+var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
+
    
+
+          
    A quick demo with the above:
    
+
+          
    
+              
+                  
+              
+
+              
    
+                  Start
+              
    
+          
    
+
+          
    Suffixed Attributes
    
+          
    Similar to the example on circle attributes, we can also animate the gradient positions but this time with a specific to gradients suffix, and the component will make sure 
+              to always include the suffix for you, as in this example the % unit is found in the current value and used as unit for the DOM update:
    
+
+
    // gradient positions to middle
+var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
+
+// gradient positions rotated
+var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
+
    
+
+          
    
+              
+                  
+                      
+                          
+                          
+                      
+                  
+                  
+              
+
+              
    
+                  Start
+              
    
+          
    
+
+          
    Notes
    
+          
      
+              
    • The power of this little gem comes from the fact that it can work with internally undefined/unknown attributes, as well as with attributes that are not yet present in the W3 draft. As long as you provide valid values specific
+                  to the attribute, the component will assign an update function and will always double check for the current value to determine if it needs a suffix or if the attribute name needs adjustments 
+                  (EG: fillOpacity becomes fill-opacity).
      • 
+              
    • This component is a great addition to complement any SVG related component as well as a great complement to Filter Effects component.
      • 
+              
    • Remember to check your elements markup for changes, your animation might not be visible because equivalent CSS is used.
      • 
+              
    • This component is bundled with the standard kute.js and kute-extra.js distribution files.
      • 
+
+          
    
+
+          
+          
+
+        
    
+    
    
+
+    
+    
+    
+    
+    
+    
+    
+
+
+
+
diff --git a/index.html b/index.html
index 35aed1f..9f1496d 100644
--- a/index.html
+++ b/index.html
@@ -1,233 +1,233 @@
 
-
-
-
-
-
 
-
-
 
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
 
-    KUTE.js | Javascript Animation Engine
+  KUTE.js | JavaScript Animation Engine
 
-    
-    
+  
+  
 
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
+  
+  
 
 
 
 
-    
    
+  
    
 
-        
    
-            
    
-                
    KUTE.js
    
-                
    
+
+    
    
+      
    
+        
    
+          
    
+            
    Welcome to KUTE.js!
    
+            
    
+            
    
+              Download
+              Github
+              CDN 1
+              CDN 2
+              NPM
+
+            
    
+          
    
+        
    
+        
    
+            
 
         
    
-
-        
-        
-
+      
    
     
    
-    
+
+    
    
+      
    
+        
    
+          
    
+            
    Overview
    
+            
    If you're looking for that spicy tool to kickstart your animations, developed with latest technology and modular design, you will love KUTE.js.
    
+          
    
+          
    
+
+            
    The JavaScript animation engine reimagined for the evolving modern web, the library that keeps track on the changing standards, the modular tool
+              to enable creativity.
    
+            
    Built on modern ES6/ES7 JavaScript Standard, packed with utilities, build tools and a wide range of supported properties, KUTE.js is now a fully featured animation engine
+              you can use to create complex animations, with properties or elements that cannot be animated with CSS3 transitions or other animation engines, or attributes that aren't
+              even drafted in the specification yet.
    
+
+
+            
    The JavaScript animation engine that never stops evolving just like we never stop learning. Instead of becoming more bloated, we make it more modular,
+              instead of compromising we chose innovating. 
    
+            
    While KUTE.js doesn't activelly support legacy browsers, it provides a wide range of tools and utilities you can use to create a fallback animation for every browser
+              and property.
    
+            
    The demo pages use a dedicated polyfill for IE10+ browsers, but today we have polyfill services and a wide range of
+              browser detection options to handle legacy browsers, our focus here is the highest performance on modern browsers.
    
+            
    By the way, KUTE.js is really fast.
    
+          
    
+        
    
+
+      
    
+    
    
+
+    
    
+
+      
    
+        
    
+          
    ES6/ES7 JavaScript
    
+          
    The entire codebase reworked on the latest standards with flexible rollup based build tools. Most classes are extensible via the ES6 extend
+          or your usual prototype, depending on the class.
    
+        
    
+        
    
+          
    Lots of Components
    
+          
    All your previously supported properties and plugins have been split into components for more modularity. New additions have been added for a broader scope.
+            The official distribution only includes most popular components.
    
+        
    
+        
    
+          
    Familiar Syntax
    
+          
    You can create your tween objects with a familiar syntax with your trusted options, the callback system and other component related options.
    
+        
    
+        
    
+          
    Tools and Options
    
+          
    Along the wide range of options, certain components provide tools for further control over the outcome. Also there's a progress
+             bar somewhere.
    
+        
    
+        
    
+          
    Well Documented
    
+          
    Each component demo page comes packed with tons of guides and tips on how to optimize the performance and visual presentation.
    
+        
    
+        
    
+          
    MIT License
    
+          
    The library is released under the MIT License.
    
+        
    
+
+      
    
+    
    
+
+    
+    
+
+  
    
+  
 
 
 
 
-    
-    
+  
+
+  
+  
+  
+  
 
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
 
 
 
diff --git a/opacityProperty.html b/opacityProperty.html
new file mode 100644
index 0000000..e928e1b
--- /dev/null
+++ b/opacityProperty.html
@@ -0,0 +1,152 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Opacity Property
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Opacity Property
    
+          
    The component that animates the CSS opacity property of a target Element on most browsers.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate the opacity property of a target element.
    
+              
    
+              
    
+                
    The KUTE.js Opacity Property component enables animation for the opacity CSS property of an Element target on most browsers.
    
+                
    In most cases, the best presentatation can be offered with a nice and smooth fade animation, with opacity going from 0% all the way up to to 100%.
    
+                
+                
    While some components like HTML Attributes and Filter Effects do provide some 
+                    similar functionality for specific Element types, this component covers all types of elements and is supported on a wide range of modern 
+                    and legacy browsers alike.
    
+              
    
+            
    
+          
    
+        
            
+
+        
    
+
+          
    Example
    
+            
+
    // fade out
+let fadeOutTween = KUTE.to('selector1',{opacity:0}).start()
+
+// fade in
+let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
+
    
+
+          
    
+            
    
+              
+                
+              
+            
    
+            
    Start
    
+          
    
+          
+          
    Notes
    
+          
      
+            
    • Support for the specific IE8 filter:alpha(opacity=50) have been dropped.
      • 
+            
    • Early implementations with vendor preffixes such as -o-opacity, -moz-opacity or -ms-opacity are not supported.
      • 
+            
    • The component is an essential part in ALL KUTE.js distributions.
      • 
+          
    
+      
    
+
+      
+      
+
+    
    
+    
+
+    
+    
+    
+    
+    
+
+    
+    
+
+
+
diff --git a/options.html b/options.html
deleted file mode 100644
index d0c5174..0000000
--- a/options.html
+++ /dev/null
@@ -1,224 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js Tween Options | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-            
    Tween Options
    
-            
    Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can 
-                override these default values, as we'll see later on this page.
    
-
-            
    Common Options
    
-            
    These options affect all types of tweens, no matter the properties used or context.
    
-            
      
-                
    • duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.
      • 
-                
    • repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
      • 
-                
    • delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.
      • 
-                
    • offset: 200 option is only for .allTo() and .allFromTo() 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 0.
      • 
-                
    • repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. 
-                    The default value is 0.
      • 
-                
    • yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat 
-                    option with at least value 1. The default value is false.
      • 
-                
    • easing: 'easingCubicInOut' 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 linear.
      • 
-            
    
-
-            
    Transform Options
    
-            
    These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or 
-                perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.
    
-            
      
-                
    • perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
      • 
-                
    • perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML element. This option has no default value and only accepts valid CSS values according to 
-                    it's specs.
      • 
-                
    • parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation. No default value.
      • 
-                
    • parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin 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 and has no default value.
      • 
-                
    • transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to 
-                    SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always 
-                    think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a 
-                    svgTransform property, it can also accept array values: transformOrigin: [250,250]. There is no default value but the SVG Plugin will always use 
-                    50% 50% for your transform tweens.
      • 
-            
    
-
-            
    SVG Plugin Options
    
-            
    The following options only affect animation of the path tween property, to customize the SVG morph animation. See SVG Plugin page.
    
-            
      
-                
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.
      • 
-                
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".
      • 
-                
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.
      • 
-                
    • reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.
      • 
-            
    
-
-            
    Text Plugin Options
    
-            
    The only option for the plugin is the textChars option for the text property and allows you to set the characters set for the scrambling character during the animation. 
-                See Text Plugin page for more instructions and demo.
    
-
-            
    Callback Options
    
-            
    These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.
    
-            
      
-                
    • start: function option allows you to set a function to run once tween animation starts.
      • 
-                
    • update: function option allows you to set a function to run on every frame.
      • 
-                
    • pause: function option allows you to set a function to run when animation is paused.
      • 
-                
    • resume: function option allows you to set a function to run when animation is resumed.
      • 
-                
    • stop: function option allows you to set a function to run when animation is stopped.
      • 
-                
    • complete: function option allows you to set a function to run when animation is finished.
      • 
-            
    
-
-            
    A quick example would look like this:
    
-            
    //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();
-
    
-            
    Other Options
    
-            
    keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on 
-                legacy browsers, however modern browsers may ignore this option for performance reasons.
    
-
-            
    Override Default Options' Values
    
-            
    Most options have a default value as you can see above, they are globally defined in the KUTE.defaultOptions object like so:
    
-            
    // the list of all tween options that can be overrided
-KUTE.defaultOptions = {
-    duration: 700,
-    delay: 0,
-    offset: 0, // allTo() or allFromTo() methods only
-    repeat: 0,
-    repeatDelay: 0,
-    yoyo: false,
-    easing: 'linear',
-    keepHex: false,
-    morphPrecision: 15, // SVG Plugin only
-    textChars: 'alpha', // Text Plugin only
-};
-
    
-
-            
    As some user suggested, he would need a way to override the default duration value, here's how to:
    
-
-            
    // sets the new global duration tween option default value
-KUTE.defaultOptions.duration = 1000;
-
    
-            
    Also make sure to define the new option global default values before you define your tween objects.
    
-        
    
-
-        
    
-
-            
-
-        
    
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-
-    
-    
-    
-    
-
-
-
diff --git a/performance-matrix.html b/performance-matrix.html
new file mode 100644
index 0000000..8fefb2c
--- /dev/null
+++ b/performance-matrix.html
@@ -0,0 +1,212 @@
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js | Transform Matrix Performance Testing Page
+    
+
+
+
+
+    
    
+        
+        
    
+
+        
    
+            
+        
    
+        
    These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.
    
+        
    Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.
    
+
+
+    
    
+
+    
    
+
+    
+    
+    
+
+    
+    
+    
+
+
+
diff --git a/performance-transform.html b/performance-transform.html
new file mode 100644
index 0000000..1ccd009
--- /dev/null
+++ b/performance-transform.html
@@ -0,0 +1,218 @@
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js | Regular Transform Performance Testing Page
+    
+
+
+
+
+    
    
+
+        
+        
    
+
+        
    
+            
+        
    
+
+        
    These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, here's how.
    
+        
    Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.
    
+
+    
    
+
+    
    
+
+
+
+
+    
+    
+    
+
+    
+    
+    
+
+
+
diff --git a/performance.html b/performance.html
index 3eb0b42..81dcc03 100644
--- a/performance.html
+++ b/performance.html
@@ -8,24 +8,28 @@
     
     
     
-    
-    
+    
+    
 
     KUTE.js | Performance Testing Page
-    
+    
     
-    
-    
+
 
 
 
 
     
    
-        
    Back to KUTE.js
    
-        
    Engine 
    
-        
-          
+        
+        
    
+
+        
+          
         
         
 
-        
    Property 
    
-        
-          
+        
+          
         
         
 
-
-        
    Repeat 
    
-        
-          
+        
+          
         
    
 
@@ -169,10 +236,11 @@
     
     
 
-    
+    
+    
     
-    
-    
+    
+
     
     
 
diff --git a/progress.html b/progress.html
index 4f82c0d..a6a14a9 100644
--- a/progress.html
+++ b/progress.html
@@ -1,11 +1,6 @@
 
-
-
-
 
-
 
-
 
 
     
@@ -14,8 +9,9 @@
     
     
     
-    
-    
+    
+    
+    
 
     KUTE.js Using Update Functions | Javascript Animation Engine
 
@@ -25,21 +21,9 @@
     
     
 
-    
-    
-
     
     
 
-    
-    
-    
-
-    
     
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Shadow Properties
    
+          
    The component that animates shadow properties of a specific target element on most browsers.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate the shadow properties of a target element.
    
+              
    
+              
    
+                
    The KUTE.js Shadow Properties component enables animation for the text-shadow CSS property of text elements
+                  as well as the box-shadow property of any element on most browsers.
    
+                
    The functionality was developed while writing a guide on how to extend KUTE.js a couple of years ago and is now a fully featured component.
    
+                
    The component uses px as unit for the shadow parameters, can animate the color of the shadow and can also handle the inset shadow parameter 
+                  of the boxShadow property.
    
+                
    OK let's have a look at a couple of quick examples:
    
+              
    
+            
    
+          
    
+        
    
+
+        
    
+
+          
    Box Shadow
    
+
+
    // tween to a string value
+var myBSTween1 = KUTE.to('selector', {boxShadow: '10px 10px #069'}).start();
+
+// or a fromTo with string and array, hex and rgb
+var myBSTween2 = KUTE.fromTo(
+    'selector',                         // target
+    {boxShadow: [0, 0, 0, '#069']},     // from
+    {boxShadow: '5px 5px rgb(0,0,0)'})  // to
+    .start();
+
+// maybe you want to animate an inset boxShadow?
+var myBSTween3 = KUTE.fromTo(
+    'selector',                                // target
+    {boxShadow: [5, 5, 0, '#069', 'inset']},   // from
+    {boxShadow: '0px 0px rgb(0,0,0)'})         // to
+    .start();
+
    
+
+          
    
+              
    
+                  
+              
    
+                  Start	
+              
    
+          
    
+
+          
    Text Shadow
    
+
+
    // tween to a string value
+var myTSTween1 = KUTE.to('selector', {textShadow: '10px 10px #069'}).start();
+
+// or a fromTo with string and array, hex and rgb
+var myTSTween2 = KUTE.fromTo(
+    'selector',                          // target
+    {textShadow: [0, 0, 0, '#069']},     // from
+    {textShadow: '5px 5px rgb(0,0,0)'})  // to
+    .start();
+
    
+
+          
    
+              
    Sample Text
    
+                  
+              
    
+                  Start	
+              
    
+          
    
+
+          
    Notes
    
+          
      
+              
    • The component will NOT handle multiple shadows per target at the same time.
      • 
+              
    • The component features a solid value processing script, it can handle a great deal of combinations of input values.
      • 
+              
    • I highly recommend that you check the boxShadow.js for more insight.
      • 
+              
    • This component is bundled with the kute-extra.js distribution file.
      • 
+          
    
+      
+      
    
+
+      
+      
+
+    
    
+    
+
+
+    
+    
+
+    
+    
+    
+
+    
+    
+
+
+
diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js
deleted file mode 100644
index e2fc9bc..0000000
--- a/src/kute-attr.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// KUTE.js v1.6.6 | © dnp_theme | Attributes Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,s=n.truD,f=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],d=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e){var r={};for(var n in e){var i=d(n).replace(/_+[a-z]+/,""),o=c(this.element,i);r[i]=-1!==p.indexOf(i)?o||"rgba(0,0,0,0)":o||(/opacity/i.test(n)?1:0)}return r},u.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var n={};for(var o in r){var u=d(o),v=/(%|[a-z]+)$/,b=c(this.element,u.replace(/_+[a-z]+/,""));if(-1===p.indexOf(u))if(null!==b&&v.test(b)){var m=s(b).u||s(r[o]).u,y=/%/.test(m)?"_percent":"_"+m;u+y in e||(/%/.test(m),e[u+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,(1e3*f(r.v,n.v,i)>>0)/1e3+n.u)}),n[u+y]=s(r[o])}else v.test(r[o])&&null!==b&&(null===b||v.test(b))||(u in e||(/opacity/i.test(o),e[u]=function(t,e,r,n,i){t.setAttribute(e,(1e3*f(r,n,i)>>0)/1e3)}),n[u]=parseFloat(r[o]));else u in e||(e[u]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),n[u]=a(r[o])}return n},this});
\ No newline at end of file
diff --git a/src/kute-base.js b/src/kute-base.js
new file mode 100644
index 0000000..a74afbb
--- /dev/null
+++ b/src/kute-base.js
@@ -0,0 +1,567 @@
+/*!
+* KUTE.js Base v2.0.0 (http://thednp.github.io/kute.js)
+* Copyright 2015-2020 © thednp
+* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
+*/
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.KUTE = factory());
+}(this, (function () { 'use strict';
+
+  var version = "2.0.0";
+
+  var Tweens = [];
+  var supportedProperties = {};
+  var defaultOptions = {
+    duration: 700,
+    delay: 0,
+    easing: 'linear'
+  };
+  var crossCheck = {};
+  var onComplete = {};
+  var onStart = {};
+  var linkProperty = {};
+  var Util = {};
+  var BaseObjects = {
+    defaultOptions: defaultOptions,
+    linkProperty: linkProperty,
+    onComplete: onComplete,
+    onStart: onStart,
+    supportedProperties: supportedProperties
+  };
+
+  function linear (t) { return t; }
+  function easingQuadraticIn (t) { return t*t; }
+  function easingQuadraticOut (t) { return t*(2-t); }
+  function easingQuadraticInOut (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; }
+  function easingCubicIn (t) { return t*t*t; }
+  function easingCubicOut (t) { return (--t)*t*t+1; }
+  function easingCubicInOut (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }
+  function easingCircularIn (t) { return -(Math.sqrt(1 - (t * t)) - 1); }
+  function easingCircularOut (t) { return Math.sqrt(1 - (t = t - 1) * t); }
+  function easingCircularInOut (t) {  return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); }
+  function easingBackIn (t) { var s = 1.70158; return t * t * ((s + 1) * t - s); }
+  function easingBackOut (t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; }
+  function easingBackInOut (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); }
+  var Easing = {
+    linear : linear,
+    easingQuadraticIn : easingQuadraticIn,
+    easingQuadraticOut : easingQuadraticOut,
+    easingQuadraticInOut : easingQuadraticInOut,
+    easingCubicIn : easingCubicIn,
+    easingCubicOut : easingCubicOut,
+    easingCubicInOut : easingCubicInOut,
+    easingCircularIn : easingCircularIn,
+    easingCircularOut : easingCircularOut,
+    easingCircularInOut : easingCircularInOut,
+    easingBackIn : easingBackIn,
+    easingBackOut : easingBackOut,
+    easingBackInOut : easingBackInOut
+  };
+  function processEasing(fn) {
+    if ( typeof fn === 'function') {
+      return fn;
+    } else if ( typeof fn === 'string' ) {
+      return Easing[fn];
+    } else {
+      return Easing.linear
+    }
+  }
+  Util.processEasing = processEasing;
+
+  var globalObject = typeof (global) !== 'undefined' ? global
+                            : typeof(self) !== 'undefined' ? self
+                            : typeof(window) !== 'undefined' ? window : {};
+  var TweenConstructor = {};
+  var KUTE = {};
+
+  function numbers(a, b, v) {
+    a = +a; b -= a; return a + b * v;
+  }
+  function units(a, b, u, v) {
+    a = +a; b -= a; return ( a + b * v ) + u;
+  }
+  function arrays(a,b,v){
+    var result = [];
+    for ( var i=0, l=b.length; i> 0 ) / 1000;
+    }
+    return result
+  }
+  var Interpolate = {
+    numbers: numbers,
+    units: units,
+    arrays: arrays
+  };
+
+  var add = function(tw) { Tweens.push(tw); };
+  var remove = function(tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }};
+  var getAll = function() { return Tweens };
+  var removeAll = function() { Tweens.length = 0; };
+  var Tick = 0;
+  function Ticker(time) {
+    var i = 0;
+    while ( i < Tweens.length ) {
+      if ( Tweens[i].update(time) ) {
+        i++;
+      } else {
+        Tweens.splice(i, 1);
+      }
+    }
+    Tick = requestAnimationFrame(Ticker);
+  }
+  var Time = {};
+  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
+  	Time.now = function () {
+  		var time = process.hrtime();
+  		return time[0] * 1000 + time[1] / 1000000;
+  	};
+  } else if (typeof (self) !== 'undefined' &&
+           self.performance !== undefined &&
+  		 self.performance.now !== undefined) {
+  	Time.now = self.performance.now.bind(self.performance);
+  }
+  function stop () {
+    setTimeout(function () {
+      if (!Tweens.length && Tick) {
+        cancelAnimationFrame(Tick);
+        Tick = null;
+        for (var obj in onStart) {
+          if (typeof (onStart[obj]) === 'function') {
+            KUTE[obj] && (delete KUTE[obj]);
+          } else {
+            for (var prop in onStart[obj]) {
+              KUTE[prop] && (delete KUTE[prop]);
+            }
+          }
+        }
+        for (var i in Interpolate) {
+          KUTE[i] && (delete KUTE[i]);
+        }
+      }
+    },64);
+  }
+  function linkInterpolation(){
+    var this$1 = this;
+    var loop = function ( component ) {
+      var componentLink = linkProperty[component];
+      var componentProps = supportedProperties[component];
+      for ( var fnObj in componentLink ) {
+        if ( typeof(componentLink[fnObj]) === 'function'
+            && Object.keys(this$1.valuesEnd).some(function (i) { return componentProps.includes(i)
+            || i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps.includes(j); }); } ) )
+        {
+          !KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
+        } else {
+          for ( var prop in this$1.valuesEnd ) {
+            for ( var i in this$1.valuesEnd[prop] ) {
+              if ( typeof(componentLink[i]) === 'function' ) {
+                !KUTE[i] && (KUTE[i] = componentLink[i]);
+              } else {
+                for (var j in componentLink[fnObj]){
+                  if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
+                    !KUTE[j] && (KUTE[j] = componentLink[i][j]);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+    for (var component in linkProperty)loop( component );
+  }
+  var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
+  for (var blob in Render ) {
+    if (!KUTE[blob]) {
+      KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
+    }
+  }
+  globalObject["_KUTE"] = KUTE;
+  var Internals = {
+    add: add,
+    remove: remove,
+    getAll: getAll,
+    removeAll: removeAll,
+    stop: stop,
+    linkInterpolation: linkInterpolation
+  };
+
+  function selector(el, multi) {
+    try{
+      var requestedElem;
+      if (multi){
+        requestedElem = el instanceof HTMLCollection
+                     || el instanceof NodeList
+                     || el instanceof Array && el[0] instanceof Element
+                      ? el : document.querySelectorAll(el);
+      } else {
+        requestedElem = el instanceof Element
+                     || el === window
+                      ? el : document.querySelector(el);
+      }
+      return requestedElem;
+    } catch(e){
+      console.error(("KUTE.js - Element(s) not found: " + el + "."));
+    }
+  }
+
+  var AnimationBase = function AnimationBase(Component){
+    this.Component = Component;
+    return this.setComponent()
+  };
+  AnimationBase.prototype.setComponent = function setComponent (){
+    var Component = this.Component;
+    var ComponentName = Component.component;
+    var Functions = { onStart: onStart, onComplete: onComplete, crossCheck: crossCheck };
+    var Category = Component.category;
+    var Property = Component.property;
+    supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property;
+    if (Component.defaultOptions) {
+      for (var op in Component.defaultOptions) {
+        defaultOptions[op] = Component.defaultOptions[op];
+      }
+    }
+    if (Component.functions) {
+      for (var fn in Functions) {
+        if (fn in Component.functions && ['onStart','onComplete'].includes(fn)) {
+          if (typeof (Component.functions[fn]) === 'function' ) {
+            !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
+            !Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn]);
+          } else {
+            for ( var ofn in Component.functions[fn] ){
+              !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
+              !Functions[fn][ComponentName][ofn] && (Functions[fn][ComponentName][ofn] = Component.functions[fn][ofn]);
+            }
+          }
+        }
+      }
+    }
+    if (Component.Interpolate) {
+      for (var fn$1 in Component.Interpolate) {
+        if (!Interpolate[fn$1]) {
+          Interpolate[fn$1] = Component.Interpolate[fn$1];
+        }
+      }
+      linkProperty[ComponentName] = Component.Interpolate;
+    }
+    if (Component.Util) {
+      for (var fn$2 in Component.Util){
+        !Util[fn$2] && (Util[fn$2] = Component.Util[fn$2]);
+      }
+    }
+    return {name:ComponentName}
+  };
+
+  var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
+    this.element = targetElement;
+    this.playing = false;
+    this._startTime = null;
+    this._startFired = false;
+    this.valuesEnd = endObject;
+    this.valuesStart = startObject;
+    options = options || {};
+    this._resetStart = options.resetStart || 0;
+    this._easing = typeof (options.easing) === 'function' ? options.easing : Util.processEasing(options.easing);
+    this._duration = options.duration || defaultOptions.duration;
+    this._delay = options.delay || defaultOptions.delay;
+    for (var op in options) {
+      var internalOption = "_" + op;
+      if( !(internalOption in this ) ) { this[internalOption] = options[op]; }
+    }
+    var easingFnName = this._easing.name;
+    if (!onStart[easingFnName]) {
+      onStart[easingFnName] = function(prop){
+        !KUTE[prop] && prop === this._easing.name && (KUTE[prop] = this._easing);
+      };
+    }
+    return this;
+  };
+  TweenBase.prototype.start = function start (time) {
+    add(this);
+    this.playing = true;
+    this._startTime = time || KUTE.Time();
+    this._startTime += this._delay;
+    if (!this._startFired) {
+      if (this._onStart) {
+        this._onStart.call(this);
+      }
+      for (var obj in onStart) {
+        if (typeof (onStart[obj]) === 'function') {
+          onStart[obj].call(this,obj);
+        } else {
+          for (var prop in onStart[obj]) {
+            onStart[obj][prop].call(this,prop);
+          }
+        }
+      }
+      linkInterpolation.call(this);
+      this._startFired = true;
+    }
+    !Tick && Ticker();
+    return this;
+  };
+  TweenBase.prototype.stop = function stop () {
+    if (this.playing) {
+      remove(this);
+      this.playing = false;
+      if (this._onStop) {
+        this._onStop.call(this);
+      }
+      this.close();
+    }
+    return this;
+  };
+  TweenBase.prototype.close = function close () {
+    for (var component in onComplete){
+      for (var toClose in onComplete[component]){
+        onComplete[component][toClose].call(this,toClose);
+      }
+    }
+    this._startFired = false;
+    stop.call(this);
+  };
+  TweenBase.prototype.update = function update (time) {
+    time = time !== undefined ? time : KUTE.Time();
+    var elapsed, progress;
+    if ( time < this._startTime && this.playing ) { return true; }
+    elapsed = (time - this._startTime) / this._duration;
+    elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
+    progress = this._easing(elapsed);
+    for (var tweenProp in this.valuesEnd){
+      KUTE[tweenProp](this.element,this.valuesStart[tweenProp],this.valuesEnd[tweenProp],progress);
+    }
+    if (this._onUpdate) {
+      this._onUpdate.call(this);
+    }
+    if (elapsed === 1) {
+      if (this._onComplete) {
+        this._onComplete.call(this);
+      }
+      this.playing = false;
+      this.close();
+      return false;
+    }
+    return true;
+  };
+  TweenConstructor.Tween = TweenBase;
+
+  var TC = TweenConstructor.Tween;
+  function fromTo(element, startObject, endObject, optionsObj) {
+    optionsObj = optionsObj || {};
+    return new TC(selector(element), startObject, endObject, optionsObj)
+  }
+
+  function perspective(a, b, u, v) {
+    return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
+  }
+  function translate3d(a, b, u, v) {
+    var translateArray = [];
+    for (var ax=0; ax<3; ax++){
+      translateArray[ax] = ( a[ax]||b[ax] ? ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 : 0 ) + u;
+    }
+    return ("translate3d(" + (translateArray.join(',')) + ")");
+  }
+  function rotate3d(a, b, u, v) {
+    var rotateStr = '';
+    rotateStr += a[0]||b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
+    rotateStr += a[1]||b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
+    rotateStr += a[2]||b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
+    return rotateStr
+  }
+  function translate(a, b, u, v) {
+    var translateArray = [];
+    translateArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
+    translateArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0';
+    return ("translate(" + (translateArray.join(',')) + ")");
+  }
+  function rotate(a, b, u, v) {
+    return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
+  }
+  function skew(a, b, u, v) {
+    var skewArray = [];
+    skewArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
+    skewArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0';
+    return ("skew(" + (skewArray.join(',')) + ")");
+  }
+  function scale (a, b, v) {
+    return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")");
+  }
+  function onStartTransform(tweenProp){
+    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.style[tweenProp] =
+            (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '')
+          + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
+          + (a.translate ? translate(a.translate,b.translate,'px',v):'')
+          + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
+          + (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+          + (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+          + (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
+      };
+    }
+  }
+  var supportedTransformProperties = [
+    'perspective',
+    'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
+    'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
+    'skewX', 'skewY', 'skew',
+    'scale'
+  ];
+  var baseTransformOps = {
+    component: 'transformFunctions',
+    property: 'transform',
+    subProperties: supportedTransformProperties,
+    functions: {onStart: onStartTransform},
+    Interpolate: {
+      perspective: perspective,
+      translate3d: translate3d,
+      rotate3d: rotate3d,
+      translate: translate, rotate: rotate, scale: scale, skew: skew
+    },
+  };
+
+  function boxModelOnStart(tweenProp){
+    if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((numbers(a,b,v)*10)>>0)/10 : (numbers(a,b,v) ) >> 0) + "px";
+      };
+    }
+  }
+  var baseBoxProps = ['top','left','width','height'];
+  var baseBoxOnStart = {};
+  baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
+  var baseBoxModelOps = {
+    component: 'boxModelProps',
+    category: 'boxModel',
+    properties: baseBoxProps,
+    Interpolate: {numbers: numbers},
+    functions: {onStart: baseBoxOnStart}
+  };
+
+  function onStartOpacity(tweenProp){
+    if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000;
+      };
+    }
+  }
+  var baseOpacityOps = {
+    component: 'opacityProperty',
+    property: 'opacity',
+    Interpolate: {numbers: numbers},
+    functions: {onStart: onStartOpacity}
+  };
+
+  function on (element, event, handler, options) {
+    options = options || false;
+    element.addEventListener(event, handler, options);
+  }
+
+  function off (element, event, handler, options) {
+    options = options || false;
+    element.removeEventListener(event, handler, options);
+  }
+
+  function one (element, event, handler, options) {
+    on(element, event, function handlerWrapper(e){
+      if (e.target === element) {
+        handler(e);
+        off(element, event, handlerWrapper, options);
+      }
+    }, options);
+  }
+
+  var supportPassive = (function () {
+    var result = false;
+    try {
+      var opts = Object.defineProperty({}, 'passive', {
+        get: function() {
+          result = true;
+        }
+      });
+      one(document, 'DOMContentLoaded', function (){}, opts);
+    } catch (e) {}
+    return result;
+  })();
+
+  var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
+
+  var canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false;
+  var touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
+  var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0];
+  var passiveHandler = supportPassive ? { passive: false } : false;
+  function preventScroll(e) {
+    this.scrolling && e.preventDefault();
+  }
+  function getScrollTargets(){
+    var el = this.element;
+    return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
+  }
+  function scrollIn(){
+    var targets = getScrollTargets.call(this);
+    if ( 'scroll' in this.valuesEnd && !targets.el.scrolling) {
+      targets.el.scrolling = 1;
+      on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
+      on( targets.el, touchOrWheel, preventScroll, passiveHandler);
+      targets.st.style.pointerEvents = 'none';
+    }
+  }
+  function scrollOut(){
+    var targets = getScrollTargets.call(this);
+    if ( 'scroll' in this.valuesEnd && targets.el.scrolling) {
+      targets.el.scrolling = 0;
+      off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
+      off( targets.el, touchOrWheel, preventScroll, passiveHandler);
+      targets.st.style.pointerEvents = '';
+    }
+  }
+  function onStartScroll(tweenProp){
+    if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.scrollTop = (numbers(a,b,v))>>0;
+      };
+    }
+  }
+  function onCompleteScroll(tweenProp){
+    scrollOut.call(this);
+  }
+  var baseScrollOps = {
+    component: 'scrollProperty',
+    property: 'scroll',
+    Interpolate: {numbers: numbers},
+    functions: {
+      onStart: onStartScroll,
+      onComplete: onCompleteScroll
+    },
+    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
+  };
+
+  var BaseTransform = new AnimationBase(baseTransformOps);
+  var BaseBoxModel = new AnimationBase(baseBoxModelOps);
+  var BaseOpacity = new AnimationBase(baseOpacityOps);
+  var BaseScroll = new AnimationBase(baseScrollOps);
+  var indexBase = {
+    Animation: AnimationBase,
+    Components: {
+      BaseTransform: BaseTransform,
+      BaseBoxModel: BaseBoxModel,
+      BaseScroll: BaseScroll,
+      BaseOpacity: BaseOpacity,
+    },
+    TweenBase: TweenBase,
+    fromTo: fromTo,
+    Objects: BaseObjects,
+    Easing: Easing,
+    Util: Util,
+    Render: Render,
+    Interpolate: Interpolate,
+    Internals: Internals,
+    Selector: selector,
+    Version: version
+  };
+
+  return indexBase;
+
+})));
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
new file mode 100644
index 0000000..6f2920b
--- /dev/null
+++ b/src/kute-base.min.js
@@ -0,0 +1,2 @@
+// KUTE.js Base v2.0.0 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t=[],e={},n={duration:700,delay:0,easing:"linear"},r={},o={},i={},s={},a={},u={defaultOptions:n,linkProperty:s,onComplete:o,onStart:i,supportedProperties:e};var l={linear:function(t){return t},easingQuadraticIn:function(t){return t*t},easingQuadraticOut:function(t){return t*(2-t)},easingQuadraticInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easingCubicIn:function(t){return t*t*t},easingCubicOut:function(t){return--t*t*t+1},easingCubicInOut:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easingCircularIn:function(t){return-(Math.sqrt(1-t*t)-1)},easingCircularOut:function(t){return Math.sqrt(1-(t-=1)*t)},easingCircularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},easingBackIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},easingBackOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},easingBackInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)}};a.processEasing=function(t){return"function"==typeof t?t:"string"==typeof t?l[t]:l.linear};var c="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},f={},p={};function d(t,e,n){return(t=+t)+(e-=t)*n}var v={numbers:d,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],o=0,i=e.length;o>0)/1e3;return r}},h=function(e){t.push(e)},m=function(e){var n=t.indexOf(e);-1!==n&&t.splice(n,1)},y=0;function g(e){for(var n=0;n1?1:e,n=this._easing(e),this.valuesEnd)p[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},f.Tween=O;var k=f.Tween;function M(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function x(t,e,n,r){for(var o=[],i=0;i<3;i++)o[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function B(t,e,n,r){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function U(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+o.join(",")+")"}function j(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function P(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}function A(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var q={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!p[t]&&this.valuesEnd[t]&&(p[t]=function(e,n,r,o){e.style[t]=(n.perspective||r.perspective?M(n.perspective,r.perspective,"px",o):"")+(n.translate3d?x(n.translate3d,r.translate3d,"px",o):"")+(n.translate?U(n.translate,r.translate,"px",o):"")+(n.rotate3d?B(n.rotate3d,r.rotate3d,"deg",o):"")+(n.rotate||r.rotate?j(n.rotate,r.rotate,"deg",o):"")+(n.skew?P(n.skew,r.skew,"deg",o):"")+(n.scale||r.scale?A(n.scale,r.scale,o):"")})}},Interpolate:{perspective:M,translate3d:x,rotate3d:B,translate:U,rotate:j,scale:A,skew:P}};function F(t){t in this.valuesEnd&&!p[t]&&(p[t]=function(e,n,r,o){e.style[t]=(o>.99||o<.01?(10*d(n,r,o)>>0)/10:d(n,r,o)>>0)+"px"})}var L=["top","left","width","height"],X={};L.map((function(t){return X[t]=F}));var Y={component:"boxModelProps",category:"boxModel",properties:L,Interpolate:{numbers:d},functions:{onStart:X}};var D={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!p[t]&&(p[t]=function(e,n,r,o){e.style[t]=(1e3*d(n,r,o)>>0)/1e3})}}};function H(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function K(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var Q=function(){var t,e,n,r,o=!1;try{var i=Object.defineProperty({},"passive",{get:function(){o=!0}});t=document,n=function(){},H(t,e="DOMContentLoaded",(function o(i){i.target===t&&(n(i),K(t,e,o,r))}),r=i)}catch(t){}return o}(),Z="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],N="ontouchstart"in window||navigator&&navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",G=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.getElementsByTagName("HTML")[0],R=!!Q&&{passive:!1};function V(t){this.scrolling&&t.preventDefault()}function z(){var t=this.element;return t===G?{el:document,st:document.body}:{el:t,st:t}}function J(){var t=z.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,K(t.el,Z[0],V,R),K(t.el,N,V,R),t.st.style.pointerEvents="")}var W={component:"scrollProperty",property:"scroll",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!p[t]&&(p[t]=function(t,e,n,r){t.scrollTop=d(e,n,r)>>0})},onComplete:function(t){J.call(this)}},Util:{preventScroll:V,scrollIn:function(){var t=z.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,H(t.el,Z[0],V,R),H(t.el,N,V,R),t.st.style.pointerEvents="none")},scrollOut:J,scrollContainer:G,passiveHandler:R,getScrollTargets:z}},$=new I(q),tt=new I(Y),et=new I(D),nt=new I(W);return{Animation:I,Components:{BaseTransform:$,BaseBoxModel:tt,BaseScroll:nt,BaseOpacity:et},TweenBase:O,fromTo:function(t,e,n,r){return r=r||{},new k(S(t),e,n,r)},Objects:u,Easing:l,Util:a,Render:T,Interpolate:v,Internals:C,Selector:S,Version:"2.0.0"}}));
diff --git a/src/kute-css.min.js b/src/kute-css.min.js
deleted file mode 100644
index 16f87c8..0000000
--- a/src/kute-css.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// KUTE.js v1.6.6 | © dnp_theme | CSS Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],v=["backgroundPosition"],b=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,v),x=R.length,C=C||{},T=0;T-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[b[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});
\ No newline at end of file
diff --git a/src/kute-extra.js b/src/kute-extra.js
new file mode 100644
index 0000000..b785160
--- /dev/null
+++ b/src/kute-extra.js
@@ -0,0 +1,2785 @@
+/*!
+* KUTE.js Extra v2.0.0 (http://thednp.github.io/kute.js)
+* Copyright 2015-2020 © thednp
+* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
+*/
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.KUTE = factory());
+}(this, (function () { 'use strict';
+
+  var version = "2.0.0";
+
+  var Tweens = [];
+  var supportedProperties = {};
+  var defaultValues = {};
+  var defaultOptions = {
+    duration: 700,
+    delay: 0,
+    easing: 'linear'
+  };
+  var prepareStart = {};
+  var prepareProperty = {};
+  var crossCheck = {};
+  var onComplete = {};
+  var onStart = {};
+  var linkProperty = {};
+  var Util = {};
+  var Objects = {
+    supportedProperties: supportedProperties,
+    defaultOptions: defaultOptions,
+    defaultValues: defaultValues,
+    prepareProperty: prepareProperty,
+    prepareStart: prepareStart,
+    crossCheck: crossCheck,
+    onStart: onStart,
+    onComplete: onComplete,
+    linkProperty: linkProperty
+  };
+
+  function numbers(a, b, v) {
+    a = +a; b -= a; return a + b * v;
+  }
+  function units(a, b, u, v) {
+    a = +a; b -= a; return ( a + b * v ) + u;
+  }
+  function arrays(a,b,v){
+    var result = [];
+    for ( var i=0, l=b.length; i> 0 ) / 1000;
+    }
+    return result
+  }
+  var Interpolate = {
+    numbers: numbers,
+    units: units,
+    arrays: arrays
+  };
+
+  function getPrefix() {
+    var prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
+    var thePrefix;
+    for (var i = 0, pfl = prefixes.length; i < pfl; i++) {
+      if (((prefixes[i]) + "Transform") in document.body.style) { thePrefix = prefixes[i]; break; }
+    }
+    return thePrefix;
+  }
+  function trueProperty(property) {
+    var prefixRequired = (!(property in document.body.style)) ? true : false;
+    var prefix = getPrefix();
+    return prefixRequired ? prefix + (property.charAt(0).toUpperCase() + property.slice(1)) : property;
+  }
+  function trueDimension(dimValue, isAngle) {
+    var intValue = parseInt(dimValue) || 0;
+    var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
+    var theUnit;
+    for (var mIndex=0; mIndex t1) { return t1; }
+    while (t0 < t1) {
+      x2 = this.sampleCurveX(t2);
+      if (Math.abs(x2 - x) < epsilon)
+        { return t2; }
+      if (x > x2) { t0 = t2; }
+      else { t1 = t2; }
+      t2 = (t1 - t0) * .5 + t0;
+    }
+    return t2;
+  };
+
+  var Easing = {
+    linear :  new CubicBezier(0, 0, 1, 1,'linear'),
+    easingSinusoidalIn : new CubicBezier(0.47, 0, 0.745, 0.715,'easingSinusoidalIn'),
+    easingSinusoidalOut : new CubicBezier(0.39, 0.575, 0.565, 1,'easingSinusoidalOut'),
+    easingSinusoidalInOut : new CubicBezier(0.445, 0.05, 0.55, 0.95,'easingSinusoidalInOut'),
+    easingQuadraticIn : new CubicBezier(0.550, 0.085, 0.680, 0.530,'easingQuadraticIn'),
+    easingQuadraticOut : new CubicBezier(0.250, 0.460, 0.450, 0.940,'easingQuadraticOut'),
+    easingQuadraticInOut : new CubicBezier(0.455, 0.030, 0.515, 0.955,'easingQuadraticInOut'),
+    easingCubicIn : new CubicBezier(0.55, 0.055, 0.675, 0.19,'easingCubicIn'),
+    easingCubicOut : new CubicBezier(0.215, 0.61, 0.355, 1,'easingCubicOut'),
+    easingCubicInOut : new CubicBezier(0.645, 0.045, 0.355, 1,'easingCubicInOut'),
+    easingQuarticIn : new CubicBezier(0.895, 0.03, 0.685, 0.22,'easingQuarticIn'),
+    easingQuarticOut : new CubicBezier(0.165, 0.84, 0.44, 1,'easingQuarticOut'),
+    easingQuarticInOut : new CubicBezier(0.77, 0, 0.175, 1,'easingQuarticInOut'),
+    easingQuinticIn : new CubicBezier(0.755, 0.05, 0.855, 0.06,'easingQuinticIn'),
+    easingQuinticOut : new CubicBezier(0.23, 1, 0.32, 1,'easingQuinticOut'),
+    easingQuinticInOut : new CubicBezier(0.86, 0, 0.07, 1,'easingQuinticInOut'),
+    easingExponentialIn : new CubicBezier(0.95, 0.05, 0.795, 0.035,'easingExponentialIn'),
+    easingExponentialOut : new CubicBezier(0.19, 1, 0.22, 1,'easingExponentialOut'),
+    easingExponentialInOut : new CubicBezier(1, 0, 0, 1,'easingExponentialInOut'),
+    easingCircularIn : new CubicBezier(0.6, 0.04, 0.98, 0.335,'easingCircularIn'),
+    easingCircularOut : new CubicBezier(0.075, 0.82, 0.165, 1,'easingCircularOut'),
+    easingCircularInOut : new CubicBezier(0.785, 0.135, 0.15, 0.86,'easingCircularInOut'),
+    easingBackIn : new CubicBezier(0.6, -0.28, 0.735, 0.045,'easingBackIn'),
+    easingBackOut : new CubicBezier(0.175, 0.885, 0.32, 1.275,'easingBackOut'),
+    easingBackInOut : new CubicBezier(0.68, -0.55, 0.265, 1.55,'easingBackInOut')
+  };
+  function processBezierEasing(fn) {
+    if ( typeof fn === 'function') {
+      return fn;
+    } else if (typeof(Easing[fn]) === 'function') {
+      return Easing[fn];
+    } else if ( /bezier/.test(fn) ) {
+      var bz = fn.replace(/bezier|\s|\(|\)/g,'').split(',');
+      return new CubicBezier( bz[0]*1,bz[1]*1,bz[2]*1,bz[3]*1 );
+    } else {
+      if ( /elastic|bounce/i.test(fn) ) {
+        console.warn(("KUTE.js - CubicBezier doesn't support " + fn + " easing."));
+      }
+      return Easing.linear
+    }
+  }
+  Util.processEasing = processBezierEasing;
+
+  function selector(el, multi) {
+    try{
+      var requestedElem;
+      if (multi){
+        requestedElem = el instanceof HTMLCollection
+                     || el instanceof NodeList
+                     || el instanceof Array && el[0] instanceof Element
+                      ? el : document.querySelectorAll(el);
+      } else {
+        requestedElem = el instanceof Element
+                     || el === window
+                      ? el : document.querySelector(el);
+      }
+      return requestedElem;
+    } catch(e){
+      console.error(("KUTE.js - Element(s) not found: " + el + "."));
+    }
+  }
+
+  var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
+    this.element = targetElement;
+    this.playing = false;
+    this._startTime = null;
+    this._startFired = false;
+    this.valuesEnd = endObject;
+    this.valuesStart = startObject;
+    options = options || {};
+    this._resetStart = options.resetStart || 0;
+    this._easing = typeof (options.easing) === 'function' ? options.easing : Util.processEasing(options.easing);
+    this._duration = options.duration || defaultOptions.duration;
+    this._delay = options.delay || defaultOptions.delay;
+    for (var op in options) {
+      var internalOption = "_" + op;
+      if( !(internalOption in this ) ) { this[internalOption] = options[op]; }
+    }
+    var easingFnName = this._easing.name;
+    if (!onStart[easingFnName]) {
+      onStart[easingFnName] = function(prop){
+        !KUTE[prop] && prop === this._easing.name && (KUTE[prop] = this._easing);
+      };
+    }
+    return this;
+  };
+  TweenBase.prototype.start = function start (time) {
+    add(this);
+    this.playing = true;
+    this._startTime = time || KUTE.Time();
+    this._startTime += this._delay;
+    if (!this._startFired) {
+      if (this._onStart) {
+        this._onStart.call(this);
+      }
+      for (var obj in onStart) {
+        if (typeof (onStart[obj]) === 'function') {
+          onStart[obj].call(this,obj);
+        } else {
+          for (var prop in onStart[obj]) {
+            onStart[obj][prop].call(this,prop);
+          }
+        }
+      }
+      linkInterpolation.call(this);
+      this._startFired = true;
+    }
+    !Tick && Ticker();
+    return this;
+  };
+  TweenBase.prototype.stop = function stop () {
+    if (this.playing) {
+      remove(this);
+      this.playing = false;
+      if (this._onStop) {
+        this._onStop.call(this);
+      }
+      this.close();
+    }
+    return this;
+  };
+  TweenBase.prototype.close = function close () {
+    for (var component in onComplete){
+      for (var toClose in onComplete[component]){
+        onComplete[component][toClose].call(this,toClose);
+      }
+    }
+    this._startFired = false;
+    stop.call(this);
+  };
+  TweenBase.prototype.update = function update (time) {
+    time = time !== undefined ? time : KUTE.Time();
+    var elapsed, progress;
+    if ( time < this._startTime && this.playing ) { return true; }
+    elapsed = (time - this._startTime) / this._duration;
+    elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
+    progress = this._easing(elapsed);
+    for (var tweenProp in this.valuesEnd){
+      KUTE[tweenProp](this.element,this.valuesStart[tweenProp],this.valuesEnd[tweenProp],progress);
+    }
+    if (this._onUpdate) {
+      this._onUpdate.call(this);
+    }
+    if (elapsed === 1) {
+      if (this._onComplete) {
+        this._onComplete.call(this);
+      }
+      this.playing = false;
+      this.close();
+      return false;
+    }
+    return true;
+  };
+  TweenConstructor.Tween = TweenBase;
+
+  defaultOptions.repeat = 0;
+  defaultOptions.repeatDelay = 0;
+  defaultOptions.yoyo = false;
+  defaultOptions.resetStart = false;
+  var Tween = (function (TweenBase) {
+    function Tween() {
+      var args = [], len = arguments.length;
+      while ( len-- ) args[ len ] = arguments[ len ];
+      TweenBase.apply(this, args);
+      this.valuesStart = {};
+      this.valuesEnd = {};
+      var startObject = args[1];
+      var endObject = args[2];
+      prepareObject.call(this,endObject,'end');
+      if ( this._resetStart ) {
+        this.valuesStart = startObject;
+      } else {
+        prepareObject.call(this,startObject,'start');
+      }
+      if (!this._resetStart) {
+        for ( var component in crossCheck ) {
+          for ( var checkProp in crossCheck[component] ) {
+             crossCheck[component][checkProp].call(this,checkProp);
+          }
+        }
+      }
+      this.paused = false;
+      this._pauseTime = null;
+      var options = args[3];
+      this._repeat = options.repeat || defaultOptions.repeat;
+      this._repeatDelay = options.repeatDelay || defaultOptions.repeatDelay;
+      this._repeatOption = this._repeat;
+      this.valuesRepeat = {};
+      this._yoyo = options.yoyo || defaultOptions.yoyo;
+      this._reversed = false;
+      return this;
+    }
+    if ( TweenBase ) Tween.__proto__ = TweenBase;
+    Tween.prototype = Object.create( TweenBase && TweenBase.prototype );
+    Tween.prototype.constructor = Tween;
+    Tween.prototype.start = function start (time) {
+      if ( this._resetStart ) {
+        this.valuesStart = this._resetStart;
+        getStartValues.call(this);
+        for ( var component in crossCheck ) {
+          for ( var prop in crossCheck[component] ) {
+            crossCheck[component][prop].call(this,prop);
+          }
+        }
+      }
+      this.paused = false;
+      if (this._yoyo) {
+        for ( var endProp in this.valuesEnd ) {
+          this.valuesRepeat[endProp] = this.valuesStart[endProp];
+        }
+      }
+      TweenBase.prototype.start.call(this, time);
+      return this
+    };
+    Tween.prototype.stop = function stop () {
+      TweenBase.prototype.stop.call(this);
+      if (!this.paused && this.playing) {
+        this.paused = false;
+        this.stopChainedTweens();
+      }
+      return this
+    };
+    Tween.prototype.close = function close () {
+      TweenBase.prototype.close.call(this);
+      if (this._repeatOption > 0) {
+        this._repeat = this._repeatOption;
+      }
+      if (this._yoyo && this._reversed===true) {
+        this.reverse();
+        this._reversed = false;
+      }
+      return this
+    };
+    Tween.prototype.resume = function resume () {
+      if (this.paused && this.playing) {
+        this.paused = false;
+        if (this._onResume !== undefined) {
+          this._onResume.call(this);
+        }
+        this._startTime += KUTE.Time() - this._pauseTime;
+        add(this);
+        !Tick && Ticker();
+      }
+      return this;
+    };
+    Tween.prototype.pause = function pause () {
+      if (!this.paused && this.playing) {
+        remove(this);
+        this.paused = true;
+        this._pauseTime = KUTE.Time();
+        if (this._onPause !== undefined) {
+          this._onPause.call(this);
+        }
+      }
+      return this;
+    };
+    Tween.prototype.reverse = function reverse () {
+        for (var reverseProp in this.valuesEnd) {
+          var tmp = this.valuesRepeat[reverseProp];
+          this.valuesRepeat[reverseProp] = this.valuesEnd[reverseProp];
+          this.valuesEnd[reverseProp] = tmp;
+          this.valuesStart[reverseProp] = this.valuesRepeat[reverseProp];
+        }
+    };
+    Tween.prototype.chain = function chain (args) {
+      this._chain = [];
+      this._chain = args.length ? args : this._chain.concat(args);
+      return this;
+    };
+    Tween.prototype.stopChainedTweens = function stopChainedTweens () {
+      this._chain && this._chain.length && this._chain.map(function (tw){ return tw.stop(); });
+    };
+    Tween.prototype.update = function update (time) {
+      time = time !== undefined ? time : KUTE.Time();
+      var elapsed, progress;
+      if ( time < this._startTime && this.playing ) { return true; }
+      elapsed = (time - this._startTime) / this._duration;
+      elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
+      progress = this._easing(elapsed);
+      for (var tweenProp in this.valuesEnd){
+        KUTE[tweenProp](this.element,this.valuesStart[tweenProp],this.valuesEnd[tweenProp],progress);
+      }
+      if (this._onUpdate) {
+        this._onUpdate.call(this);
+      }
+      if (elapsed === 1) {
+        if (this._repeat > 0) {
+          if ( isFinite( this._repeat ) ) { this._repeat--; }
+          this._startTime = (isFinite( this._repeat ) && this._yoyo && !this._reversed) ? time + this._repeatDelay : time;
+          if (this._yoyo) {
+            this._reversed = !this._reversed;
+            this.reverse();
+          }
+          return true;
+        } else {
+          if (this._onComplete) {
+            this._onComplete.call(this);
+          }
+          this.playing = false;
+          this.close();
+          if (this._chain !== undefined && this._chain.length){
+            this._chain.map(function (tw){ return tw.start(); });
+          }
+        }
+        return false;
+      }
+      return true;
+    };
+    return Tween;
+  }(TweenBase));
+  TweenConstructor.Tween = Tween;
+
+  var TweenExtra = (function (Tween) {
+    function TweenExtra() {
+      var args = [], len = arguments.length;
+      while ( len-- ) args[ len ] = arguments[ len ];
+      Tween.apply(this, args);
+      return this;
+    }
+    if ( Tween ) TweenExtra.__proto__ = Tween;
+    TweenExtra.prototype = Object.create( Tween && Tween.prototype );
+    TweenExtra.prototype.constructor = TweenExtra;
+    TweenExtra.prototype.to = function to (property,value){
+    };
+    TweenExtra.prototype.fromTo = function fromTo (property,value){
+    };
+    TweenExtra.prototype.getTotalDuration = function getTotalDuration (){
+    };
+    TweenExtra.prototype.callback = function callback (name,fn){
+      if ( ['start','stop','update','complete','pause','resume'].indexOf(name) >-1 ) {
+        this[("_on" + (name.charAt(0).toUpperCase() + name.slice(1)))] = fn;
+      }
+    };
+    TweenExtra.prototype.option = function option (option$1,value) {
+      this[("_" + option$1)] = value;
+    };
+    return TweenExtra;
+  }(Tween));
+  TweenConstructor.Tween = TweenExtra;
+
+  var TweenCollection = function TweenCollection(els,vS,vE,Ops){
+    var this$1 = this;
+    this.tweens = [];
+    !('offset' in defaultOptions) && (defaultOptions.offset = 0);
+    var TC = TweenConstructor.Tween;
+    Ops = Ops || {};
+    Ops.delay = Ops.delay || defaultOptions.delay;
+    var options = [];
+    Array.from(els).map(function (el,i) {
+      options[i] = Ops || {};
+      options[i].delay = i > 0 ? Ops.delay + (Ops.offset||defaultOptions.offset) : Ops.delay;
+      if (el instanceof Element) {
+        this$1.tweens.push( new TC(el, vS, vE, options[i]) );
+      } else {
+        console.error(("KUTE.js - " + el + " not instanceof [Element]"));
+      }
+    });
+    this.length = this.tweens.length;
+    return this
+  };
+  TweenCollection.prototype.start = function start (time) {
+    time = time === undefined ? KUTE.Time() : time;
+    this.tweens.map(function (tween) { return tween.start(time); });
+    return this
+  };
+  TweenCollection.prototype.stop = function stop () {
+    this.tweens.map(function (tween) { return tween.stop(time); });
+    return this
+  };
+  TweenCollection.prototype.pause = function pause () {
+    this.tweens.map(function (tween) { return tween.pause(time); });
+    return this
+  };
+  TweenCollection.prototype.resume = function resume () {
+    this.tweens.map(function (tween) { return tween.resume(time); });
+    return this
+  };
+  TweenCollection.prototype.chain = function chain (args) {
+    var lastTween = this.tweens[this.length-1];
+    if (args instanceof TweenCollection){
+      lastTween.chain(args.tweens);
+    } else if (args instanceof TweenConstructor){
+      lastTween.chain(args);
+    } else {
+      throw new TypeError('KUTE.js - invalid chain value')
+    }
+    return this
+  };
+  TweenCollection.prototype.playing = function playing () {
+    return this.tweens.some(function (tw){ return tw.playing; });
+  };
+  TweenCollection.prototype.removeTweens = function removeTweens (){
+    this.tweens = [];
+  };
+  TweenCollection.prototype.getMaxDuration = function getMaxDuration (){
+    var durations = [];
+    this.tweens.forEach(function(tw){
+      durations.push(tw._duration + tw._delay + tw._repeat * tw._repeatDelay);
+    });
+    return Math.max(durations)
+  };
+
+  var ProgressBar = function ProgressBar(element, tween){
+    this.element = selector(element);
+    this.element.tween = tween;
+    this.element.tween.toolbar = this.element;
+    this.element.toolbar = this;
+    this.element.output = this.element.parentNode.getElementsByTagName('OUTPUT')[0];
+    if (!(this.element instanceof HTMLInputElement)) { throw TypeError("Target element is not [HTMLInputElement]") }
+    if (this.element.type !=='range') { throw TypeError("Target element is not a range input") }
+    if (!(tween instanceof TweenConstructor.Tween)) { throw TypeError(("tween parameter is not [" + TweenConstructor + "]")) }
+    this.element.setAttribute('value',0);
+    this.element.setAttribute('min',0);
+    this.element.setAttribute('max',1);
+    this.element.setAttribute('step',0.0001);
+    this.element.tween._onUpdate = this.updateBar;
+    this.element.addEventListener('mousedown',this.downAction,false);
+  };
+  ProgressBar.prototype.updateBar = function updateBar (){
+    var tick = 0.0001;
+    var output = this.toolbar.output;
+    var progress = this.paused ? this.toolbar.value
+                 : (KUTE.Time() - this._startTime ) / this._duration;
+    progress = progress > 1-tick ? 1 : progress < 0.01 ? 0 : progress;
+    var value = !this._reversed ? progress : 1-progress;
+    this.toolbar.value = value;
+    output && (output.value=(value*100).toFixed(2)+'%');
+  };
+  ProgressBar.prototype.toggleEvents = function toggleEvents (action){
+    this.element[(action + "EventListener")]('mousemove',this.moveAction,false);
+    this.element[(action + "EventListener")]('mouseup',this.upAction,false);
+  };
+  ProgressBar.prototype.updateTween = function updateTween () {
+    var progress = (!this.tween._reversed ? this.value : 1-this.value) * this.tween._duration - 0.0001;
+    this.tween._startTime = 0;
+    this.tween.update(progress);
+  };
+  ProgressBar.prototype.moveAction = function moveAction (){
+    this.toolbar.updateTween.call(this);
+  };
+  ProgressBar.prototype.downAction = function downAction (){
+    if (!this.tween.playing) {
+      this.tween.start();
+    }
+    if ( !this.tween.paused ){
+      this.tween.pause();
+      this.toolbar.toggleEvents('add');
+      KUTE.Tick = cancelAnimationFrame(KUTE.Ticker);
+    }
+  };
+  ProgressBar.prototype.upAction = function upAction (){
+    if ( this.tween.paused) {
+      this.tween.paused && this.tween.resume();
+      this.tween._startTime = (KUTE.Time() - (!this.tween._reversed ? this.value : 1 - this.value) * this.tween._duration);
+      this.toolbar.toggleEvents('remove');
+      KUTE.Tick = requestAnimationFrame(KUTE.Ticker);
+    }
+  };
+
+  var TC = TweenConstructor.Tween;
+  function to(element, endObject, optionsObj) {
+    optionsObj = optionsObj || {};
+    optionsObj.resetStart = endObject;
+    return new TC(selector(element), endObject, endObject, optionsObj)
+  }
+  function fromTo(element, startObject, endObject, optionsObj) {
+    optionsObj = optionsObj || {};
+    return new TC(selector(element), startObject, endObject, optionsObj)
+  }
+  function allTo(elements, endObject, optionsObj) {
+    optionsObj = optionsObj || {};
+    optionsObj.resetStart = endObject;
+    return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
+  }
+  function allFromTo(elements, startObject, endObject, optionsObj) {
+    optionsObj = optionsObj || {};
+    return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
+  }
+
+  var Animation = function Animation(Component){
+    try {
+      if ( Component.component in supportedProperties ) {
+        console.error(("KUTE.js - " + (Component.component) + " already registered"));
+      } else if ( Component.property in defaultValues) {
+        console.error(("KUTE.js - " + (Component.property) + " already registered"));
+      } else {
+        this.setComponent(Component);
+      }
+    } catch(e){
+      console.error(e);
+    }
+  };
+  Animation.prototype.setComponent = function setComponent (Component){
+    var propertyInfo = this;
+    var ComponentName = Component.component;
+    var Functions = { prepareProperty: prepareProperty, prepareStart: prepareStart, onStart: onStart, onComplete: onComplete, crossCheck: crossCheck };
+    var Category = Component.category;
+    var Property = Component.property;
+    var Length = Component.properties && Component.properties.length || Component.subProperties && Component.subProperties.length;
+    supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property;
+    if ('defaultValue' in Component){
+      defaultValues[ Property ] = Component.defaultValue;
+      propertyInfo.supports = Property + " property";
+    } else if (Component.defaultValues) {
+      for (var dv in Component.defaultValues) {
+        defaultValues[dv] = Component.defaultValues[dv];
+      }
+      propertyInfo.supports = (Length||Property) + " " + (Property||Category) + " properties";
+    }
+    if (Component.defaultOptions) {
+      for (var op in Component.defaultOptions) {
+        defaultOptions[op] = Component.defaultOptions[op];
+      }
+    }
+    if (Component.functions) {
+      for (var fn in Functions) {
+        if (fn in Component.functions) {
+          if (typeof (Component.functions[fn]) === 'function' ) {
+            !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
+            !Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn]);
+          } else {
+            for ( var ofn in Component.functions[fn] ){
+              !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
+              !Functions[fn][ComponentName][ofn] && (Functions[fn][ComponentName][ofn] = Component.functions[fn][ofn]);
+            }
+          }
+        }
+      }
+    }
+    if (Component.Interpolate) {
+      for (var fn$1 in Component.Interpolate) {
+        var compIntObj = Component.Interpolate[fn$1];
+        if ( typeof(compIntObj) === 'function' && !Interpolate[fn$1] ) {
+          Interpolate[fn$1] = compIntObj;
+        } else {
+          for ( var sfn in compIntObj ) {
+            if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn$1] ) {
+              Interpolate[fn$1] = compIntObj[sfn];
+            }
+          }
+        }
+      }
+      linkProperty[ComponentName] = Component.Interpolate;
+    }
+    if (Component.Util) {
+      for (var fn$2 in Component.Util){
+        !Util[fn$2] && (Util[fn$2] = Component.Util[fn$2]);
+      }
+    }
+    return propertyInfo
+  };
+
+  var AnimationDevelopment = (function (Animation) {
+    function AnimationDevelopment(){
+      var args = [], len = arguments.length;
+      while ( len-- ) args[ len ] = arguments[ len ];
+      Animation.apply(this, args);
+    }
+    if ( Animation ) AnimationDevelopment.__proto__ = Animation;
+    AnimationDevelopment.prototype = Object.create( Animation && Animation.prototype );
+    AnimationDevelopment.prototype.constructor = AnimationDevelopment;
+    AnimationDevelopment.prototype.setComponent = function setComponent (Component){
+      Animation.prototype.setComponent.call(this, Component);
+      var propertyInfo = this;
+      var Functions = { prepareProperty: prepareProperty,prepareStart: prepareStart,onStart: onStart,onComplete: onComplete,crossCheck: crossCheck };
+      var Category = Component.category;
+      var Property = Component.property;
+      var Length = Component.properties && Component.properties.length || Component.subProperties && Component.subProperties.length;
+      if ('defaultValue' in Component){
+        propertyInfo.supports = Property + " property";
+        propertyInfo.defaultValue = "" + ((Component.defaultValue+'').length?"YES":"not set or incorrect");
+      } else if (Component.defaultValues) {
+        propertyInfo.supports = (Length||Property) + " " + (Property||Category) + " properties";
+        propertyInfo.defaultValues = Object.keys(Component.defaultValues).length === Length ? "YES" : "Not set or incomplete";
+      }
+      if (Component.defaultOptions) {
+        propertyInfo.extends = [];
+        for (var op in Component.defaultOptions) {
+          propertyInfo.extends.push(op);
+        }
+        propertyInfo.extends.length ? propertyInfo.extends = "with <" + (propertyInfo.extends.join(', ')) + "> new option(s)" : delete propertyInfo.extends;
+      }
+      if (Component.functions) {
+        propertyInfo.interface = [];
+        propertyInfo.render = [];
+        propertyInfo.warning = [];
+        for (var fn in Functions) {
+          if (fn in Component.functions) {
+            fn === 'prepareProperty' ? propertyInfo.interface.push("fromTo()") : 0;
+            fn === 'prepareStart' ? propertyInfo.interface.push("to()") : 0;
+            fn === 'onStart' ? propertyInfo.render = "can render update" : 0;
+          } else {
+            fn === 'prepareProperty' ? propertyInfo.warning.push("fromTo()") : 0;
+            fn === 'prepareStart' ? propertyInfo.warning.push("to()") : 0;
+            fn === 'onStart' ? propertyInfo.render = "no function to render update" : 0;
+          }
+        }
+        propertyInfo.interface.length ? propertyInfo.interface = (Category||Property) + " can use [" + (propertyInfo.interface.join(', ')) + "] method(s)" : delete propertyInfo.uses;
+        propertyInfo.warning.length ? propertyInfo.warning = (Category||Property) + " can't use [" + (propertyInfo.warning.join(', ')) + "] method(s) because values aren't processed" : delete propertyInfo.warning;
+      }
+      if (Component.Interpolate) {
+        propertyInfo.uses = [];
+        propertyInfo.adds = [];
+        for (var fn$1 in Component.Interpolate) {
+          var compIntObj = Component.Interpolate[fn$1];
+          if ( typeof(compIntObj) === 'function' ) {
+            if ( !Interpolate[fn$1] ) {
+              propertyInfo.adds.push(("" + fn$1));
+            }
+            propertyInfo.uses.push(("" + fn$1));
+          } else {
+            for ( var sfn in compIntObj ) {
+              if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn$1] ) {
+                propertyInfo.adds.push(("" + sfn));
+              }
+              propertyInfo.uses.push(("" + sfn));
+            }
+          }
+        }
+        propertyInfo.uses.length ? propertyInfo.uses = "[" + (propertyInfo.uses.join(', ')) + "] interpolation function(s)" : delete propertyInfo.uses;
+        propertyInfo.adds.length ? propertyInfo.adds = "new [" + (propertyInfo.adds.join(', ')) + "] interpolation function(s)" : delete propertyInfo.adds;
+      } else {
+        propertyInfo.critical = "For " + (Property||Category) + " no interpolation function[s] is set";
+      }
+      if (Component.Util) {
+        propertyInfo.hasUtil = Object.keys(Component.Util).join(',');
+      }
+      return propertyInfo
+    };
+    return AnimationDevelopment;
+  }(Animation));
+
+  function getBgPos(prop){
+    return getStyleForProperty(this.element,prop) || defaultValues[prop];
+  }
+  function prepareBgPos(prop,value){
+    if ( value instanceof Array ){
+      var x = trueDimension(value[0]).v,
+            y = trueDimension(value[1]).v;
+      return [ x !== NaN ? x : 50, y !== NaN ? y : 50 ];
+    } else {
+      var posxy = value.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);
+      posxy = posxy.split(/(\,|\s)/g);
+      posxy = posxy.length === 2 ? posxy : [posxy[0],50];
+      return [ trueDimension(posxy[0]).v, trueDimension(posxy[1]).v ];
+    }
+  }
+  function onStartBgPos(prop){
+    if ( this.valuesEnd[prop] && !KUTE[prop]) {
+      KUTE[prop] = function (elem, a, b, v) {
+        elem.style[prop] = ((numbers(a[0],b[0],v)*100>>0)/100) + "%  " + (((numbers(a[1],b[1],v)*100>>0)/100)) + "%";
+      };
+    }
+  }
+  var bgPositionFunctions = {
+    prepareStart: getBgPos,
+    prepareProperty: prepareBgPos,
+    onStart: onStartBgPos
+  };
+  var bgPosOps = {
+    component: 'BgPositionProp',
+    property: 'backgroundPosition',
+    defaultValue: [50,50],
+    Interpolate: {numbers: numbers},
+    functions: bgPositionFunctions,
+    Util: {trueDimension: trueDimension}
+  };
+
+  var radiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'];
+  var radiusValues = {};
+  radiusProps.map(function (x) { return radiusValues[x] = 0; });
+  function radiusOnStartFn(tweenProp){
+    if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.style[tweenProp] = units(a.v,b.v,b.u,v);
+      };
+    }
+  }
+  var radiusOnStart = {};
+  radiusProps.forEach(function (tweenProp) {
+    radiusOnStart[tweenProp] = radiusOnStartFn;
+  });
+  function getRadius(tweenProp){
+    return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
+  }
+  function prepareRadius(tweenProp,value){
+    return trueDimension(value);
+  }
+  var radiusFunctions = {
+    prepareStart: getRadius,
+    prepareProperty: prepareRadius,
+    onStart: radiusOnStart
+  };
+  var radiusOps = {
+    component: 'borderRadiusProps',
+    category: 'borderRadius',
+    properties: radiusProps,
+    defaultValues: radiusValues,
+    Interpolate: {units: units},
+    functions: radiusFunctions,
+    Util: {trueDimension: trueDimension}
+  };
+
+  var boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
+                            'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
+                            'margin', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
+                            'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'];
+  var boxModelValues = {};
+  boxModelProperties.map(function (x) { return boxModelValues[x] = 0; });
+  function boxModelOnStart(tweenProp){
+    if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((numbers(a,b,v)*10)>>0)/10 : (numbers(a,b,v) ) >> 0) + "px";
+      };
+    }
+  }
+  function getBoxModel(tweenProp){
+    return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
+  }
+  function prepareBoxModel(tweenProp,value){
+    var boxValue = trueDimension(value), offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth';
+    return boxValue.u === '%' ? boxValue.v * this.element[offsetProp] / 100 : boxValue.v;
+  }
+  var boxPropsOnStart = {};
+  boxModelProperties.map(function (x) { return boxPropsOnStart[x] = boxModelOnStart; } );
+  var boxModelFunctions = {
+    prepareStart: getBoxModel,
+    prepareProperty: prepareBoxModel,
+    onStart: boxPropsOnStart
+  };
+  var boxModelOps = {
+    component: 'boxModelProps',
+    category: 'boxModel',
+    properties: boxModelProperties,
+    defaultValues: boxModelValues,
+    Interpolate: {numbers: numbers},
+    functions: boxModelFunctions
+  };
+
+  function getClip(tweenProp,v){
+    var currentClip = getStyleForProperty(this.element,tweenProp),
+          width = getStyleForProperty(this.element,'width'),
+          height = getStyleForProperty(this.element,'height');
+    return !/rect/.test(currentClip) ? [0, width, height, 0] : currentClip;
+  }
+  function prepareClip(tweenProp,value) {
+    if ( value instanceof Array ){
+      return [ trueDimension(value[0]), trueDimension(value[1]), trueDimension(value[2]), trueDimension(value[3]) ];
+    } else {
+      var clipValue = value.replace(/rect|\(|\)/g,'');
+      clipValue = /\,/g.test(clipValue) ? clipValue.split(/\,/g) : clipValue.split(/\s/g);
+      return [ trueDimension(clipValue[0]),  trueDimension(clipValue[1]), trueDimension(clipValue[2]),  trueDimension(clipValue[3]) ];
+    }
+  }
+  function onStartClip(tweenProp) {
+    if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        var h = 0, cl = [];
+        for (h;h<4;h++){
+          var c1 = a[h].v, c2 = b[h].v, cu = b[h].u || 'px';
+          cl[h] = ((numbers(c1,c2,v)*100 >> 0)/100) + cu;
+        }
+        elem.style.clip = "rect(" + cl + ")";
+      };
+    }
+  }
+  var clipFunctions = {
+    prepareStart: getClip,
+    prepareProperty: prepareClip,
+    onStart: onStartClip
+  };
+  var clipOps = {
+    component: 'clipProperty',
+    property: 'clip',
+    defaultValue: [0,0,0,0],
+    Interpolate: {numbers: numbers},
+    functions: clipFunctions,
+    Util: {trueDimension: trueDimension}
+  };
+
+  function colors(a, b, v) {
+    var _c = {},
+        c,
+        ep = ')',
+        cm =',',
+        rgb = 'rgb(',
+        rgba = 'rgba(';
+    for (c in b) { _c[c] = c !== 'a' ? (numbers(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (numbers(a[c],b[c],v) * 100 >> 0 )/100 : null; }
+    return !_c.a ? rgb + _c.r + cm + _c.g + cm + _c.b + ep : rgba + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
+  }
+  var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
+  var defaultColors = {};
+  supportedColors.forEach(function (tweenProp) {
+    defaultColors[tweenProp] = '#000';
+  });
+  function onStartColors(tweenProp){
+    if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.style[tweenProp] = colors(a,b,v);
+      };
+    }
+  }
+  var colorsOnStart = {};
+  supportedColors.map(function (x) { return colorsOnStart[x] = onStartColors; });
+  function getColor(prop,value) {
+    return getStyleForProperty(this.element,prop) || defaultValues[prop];
+  }
+  function prepareColor(prop,value) {
+    return trueColor(value);
+  }
+  var colorsFunctions = {
+    prepareStart: getColor,
+    prepareProperty: prepareColor,
+    onStart: colorsOnStart
+  };
+  var colorsOps = {
+    component: 'colorProps',
+    category: 'colors',
+    properties: supportedColors,
+    defaultValues: defaultColors,
+    Interpolate: {numbers: numbers,colors: colors},
+    functions: colorsFunctions,
+    Util: {trueColor: trueColor}
+  };
+
+  var ComponentName = 'htmlAttributes';
+  var svgColors = ['fill','stroke','stop-color'];
+  var attributes = {};
+  function replaceUppercase (a) { return a.replace(/[A-Z]/g, "-$&").toLowerCase(); }
+  function getAttr(tweenProp,value){
+    var attrStartValues = {};
+    for (var attr in value){
+      var attribute = replaceUppercase(attr).replace(/_+[a-z]+/,'');
+      var currentValue = this.element.getAttribute(attribute);
+      attrStartValues[attribute] = svgColors.includes(attribute) ? (currentValue || 'rgba(0,0,0,0)') : (currentValue || (/opacity/i.test(attr) ? 1 : 0));
+    }
+    return attrStartValues;
+  }
+  function prepareAttr(tweenProp,attrObj){
+    var attributesObject = {};
+    for ( var p in attrObj ) {
+      var prop = replaceUppercase(p);
+      var regex = /(%|[a-z]+)$/;
+      var currentValue = this.element.getAttribute(prop.replace(/_+[a-z]+/,''));
+      if ( !svgColors.includes(prop)) {
+        if ( currentValue !== null && regex.test(currentValue) ) {
+          var unit = trueDimension(currentValue).u || trueDimension(attrObj[p]).u;
+          var suffix = /%/.test(unit) ? '_percent' : ("_" + unit);
+          onStart[ComponentName][prop+suffix] = function(tp) {
+            if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) {
+              attributes[tp] = function (elem, p, a, b, v) {
+                var _p = p.replace(suffix,'');
+                elem.setAttribute(_p, ( (numbers(a.v,b.v,v)*1000>>0)/1000) + b.u );
+              };
+            }
+          };
+          attributesObject[prop+suffix] = trueDimension(attrObj[p]);
+        } else if ( !regex.test(attrObj[p]) || currentValue === null || currentValue !== null && !regex.test(currentValue) ) {
+          onStart[ComponentName][prop] = function(tp) {
+            if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) {
+              attributes[tp] = function (elem, oneAttr, a, b, v) {
+                elem.setAttribute(oneAttr, (numbers(a,b,v) * 1000 >> 0) / 1000 );
+              };
+            }
+          };
+          attributesObject[prop] = parseFloat(attrObj[p]);
+        }
+      } else {
+        onStart[ComponentName][prop] = function(tp) {
+          if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) {
+            attributes[tp] = function (elem, oneAttr, a, b, v) {
+              elem.setAttribute(oneAttr, colors(a,b,v));
+            };
+          }
+        };
+        attributesObject[prop] = trueColor(attrObj[p]) || defaultValues.htmlAttributes[p];
+      }
+    }
+    return attributesObject;
+  }
+  var onStartAttr = {
+    attr : function(tweenProp){
+      if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+        KUTE[tweenProp] = function (elem, vS, vE, v) {
+          for ( var oneAttr in vE ){
+            KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
+          }
+        };
+      }
+    },
+    attributes : function(tweenProp){
+      if (!KUTE[tweenProp] && this.valuesEnd.attr) {
+        KUTE[tweenProp] = attributes;
+      }
+    }
+  };
+  var attrFunctions = {
+    prepareStart: getAttr,
+    prepareProperty: prepareAttr,
+    onStart: onStartAttr
+  };
+  var attrOps = {
+    component: ComponentName,
+    property: 'attr',
+    subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'],
+    defaultValue: {fill : 'rgb(0,0,0)', stroke: 'rgb(0,0,0)', 'stop-color': 'rgb(0,0,0)', opacity: 1, 'stroke-opacity': 1,'fill-opacity': 1},
+    Interpolate: { numbers: numbers,colors: colors },
+    functions: attrFunctions,
+    Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension }
+  };
+
+  function dropShadow(a,b,v){
+    var params = [], unit = 'px';
+    for (var i=0; i<3; i++){
+      params[i] = ((numbers(a[i],b[i],v) * 100 >>0) /100) + unit;
+    }
+    return ("drop-shadow(" + (params.concat( colors(a[3],b[3],v) ).join(' ')) + ")")
+  }
+  function replaceDashNamespace(str){
+    return str.replace('-r','R').replace('-s','S')
+  }
+  function parseDropShadow (shadow){
+    var newShadow;
+    if (shadow.length === 3) {
+      newShadow = [shadow[0], shadow[1], 0, shadow[2] ];
+    } else if (shadow.length === 4) {
+      newShadow = [shadow[0], shadow[1], shadow[2], shadow[3]];
+    }
+    for (var i=0;i<3;i++){
+      newShadow[i] = parseFloat(newShadow[i]);
+    }
+    newShadow[3] = trueColor(newShadow[3]);
+    return newShadow;
+  }
+  function parseFilterString(currentStyle){
+    var result = {};
+    var fnReg = /(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g;
+    var matches = currentStyle.match(fnReg);
+    var fnArray = currentStyle !== 'none' ? matches : 'none';
+    if (fnArray instanceof Array) {
+      for (var j=0, jl = fnArray.length; j>0)/100) + "%)") : '')
+                              + (a.blur||b.blur             ? ("blur(" + (((numbers(a.blur,b.blur,v) * 100)>>0)/100) + "em)") : '')
+                              + (a.saturate||b.saturate     ? ("saturate(" + (((numbers(a.saturate,b.saturate,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.invert||b.invert         ? ("invert(" + (((numbers(a.invert,b.invert,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.grayscale||b.grayscale   ? ("grayscale(" + (((numbers(a.grayscale,b.grayscale,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.hueRotate||b.hueRotate   ? ("hue-rotate(" + (((numbers(a.hueRotate,b.hueRotate,v) * 100)>>0)/100) + "deg)") : '')
+                              + (a.sepia||b.sepia           ? ("sepia(" + (((numbers(a.sepia,b.sepia,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.brightness||b.brightness ? ("brightness(" + (((numbers(a.brightness,b.brightness,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.contrast||b.contrast     ? ("contrast(" + (((numbers(a.contrast,b.contrast,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.dropShadow||b.dropShadow ? dropShadow(a.dropShadow,b.dropShadow,v) : '');
+      };
+    }
+  }
+  function crossCheckFilter(tweenProp){
+    if ( this.valuesEnd[tweenProp] ) {
+      for (var fn in this.valuesStart[tweenProp]){
+        if (!this.valuesEnd[tweenProp][fn]){
+          this.valuesEnd[tweenProp][fn] = this.valuesStart[tweenProp][fn];
+        }
+      }
+    }
+  }
+  var filterFunctions = {
+    prepareStart: getFilter,
+    prepareProperty: prepareFilter,
+    onStart: onStartFilter,
+    crossCheck: crossCheckFilter
+  };
+  var filterOps = {
+    component: 'filterEffects',
+    property: 'filter',
+    defaultValue: {opacity: 100, blur: 0, saturate: 100, grayscale: 0, brightness: 100, contrast: 100, sepia: 0, invert: 0, hueRotate:0, dropShadow: [0,0,0,{r:0,g:0,b:0}], url:''},
+    Interpolate: {
+      opacity: numbers,
+      blur: numbers,
+      saturate: numbers,
+      grayscale: numbers,
+      brightness: numbers,
+      contrast: numbers,
+      sepia: numbers,
+      invert: numbers,
+      hueRotate: numbers,
+      dropShadow: {numbers: numbers,colors: colors,dropShadow: dropShadow}
+    },
+    functions: filterFunctions,
+    Util: {parseDropShadow: parseDropShadow,parseFilterString: parseFilterString,replaceDashNamespace: replaceDashNamespace,trueColor: trueColor}
+  };
+
+  function getOpacity(tweenProp){
+    return getStyleForProperty(this.element,tweenProp)
+  }
+  function prepareOpacity(tweenProp,value){
+    return parseFloat(value);
+  }
+  function onStartOpacity(tweenProp){
+    if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000;
+      };
+    }
+  }
+  var opacityFunctions = {
+    prepareStart: getOpacity,
+    prepareProperty: prepareOpacity,
+    onStart: onStartOpacity
+  };
+  var opacityOps = {
+    component: 'opacityProperty',
+    property: 'opacity',
+    defaultValue: 1,
+    Interpolate: {numbers: numbers},
+    functions: opacityFunctions
+  };
+
+  var percent = function (v, l) { return parseFloat(v) / 100 * l; };
+  var getRectLength = function (el) {
+    var w = el.getAttribute('width'),
+        h = el.getAttribute('height');
+    return (w*2)+(h*2);
+  };
+  var getPolyLength = function (el) {
+    var points = el.getAttribute('points').split(' ');
+    var len = 0;
+    if (points.length > 1) {
+      var coord = function (p) {
+        var c = p.split(',');
+        if (c.length != 2) { return; }
+        if (isNaN(c[0]) || isNaN(c[1])) { return; }
+        return [parseFloat(c[0]), parseFloat(c[1])];
+      };
+      var dist = function (c1, c2) {
+        if (c1 != undefined && c2 != undefined) {
+          return Math.sqrt(Math.pow( (c2[0] - c1[0]), 2 ) + Math.pow( (c2[1] - c1[1]), 2 ));
+        }
+        return 0;
+      };
+      if (points.length > 2) {
+        for (var i=0; i>0)/100,
+        start = (numbers(a.s,b.s,v)*100>>0)/100,
+        end = (numbers(a.e,b.e,v)*100>>0)/100,
+        offset = 0 - start,
+        dashOne = end+offset;
+    elem.style.strokeDashoffset = offset + "px";
+    elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
+  }
+  function getDrawValue(){
+    return getDraw(this.element);
+  }
+  function prepareDraw(a,o){
+    return getDraw(this.element,o);
+  }
+  function onStartDraw(tweenProp){
+    if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem,a,b,v) { return paintDraw(elem,a,b,v); };
+    }
+  }
+  var svgDrawFunctions = {
+    prepareStart: getDrawValue,
+    prepareProperty: prepareDraw,
+    onStart: onStartDraw
+  };
+  var svgDrawOps = {
+    component: 'svgDraw',
+    property: 'draw',
+    defaultValue: '0% 0%',
+    Interpolate: {numbers: numbers,paintDraw: paintDraw},
+    functions: svgDrawFunctions,
+    Util: {
+      getRectLength: getRectLength,
+      getPolyLength: getPolyLength,
+      getLineLength: getLineLength,
+      getCircleLength: getCircleLength,
+      getEllipseLength: getEllipseLength,
+      getTotalLength: getTotalLength,
+      getDraw: getDraw,
+      percent: percent
+    }
+  };
+
+  var INVALID_INPUT = 'Invalid path value';
+  function catmullRom2bezier(crp, z) {
+    var d = [];
+    for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
+      var p = [
+                {x: +crp[i - 2], y: +crp[i - 1]},
+                {x: +crp[i],     y: +crp[i + 1]},
+                {x: +crp[i + 2], y: +crp[i + 3]},
+                {x: +crp[i + 4], y: +crp[i + 5]}
+              ];
+      if (z) {
+        if (!i) {
+          p[0] = {x: +crp[iLen - 2], y: +crp[iLen - 1]};
+        } else if (iLen - 4 == i) {
+          p[3] = {x: +crp[0], y: +crp[1]};
+        } else if (iLen - 2 == i) {
+          p[2] = {x: +crp[0], y: +crp[1]};
+          p[3] = {x: +crp[2], y: +crp[3]};
+        }
+      } else {
+        if (iLen - 4 == i) {
+          p[3] = p[2];
+        } else if (!i) {
+          p[0] = {x: +crp[i], y: +crp[i + 1]};
+        }
+      }
+      d.push(["C",
+            (-p[0].x + 6 * p[1].x + p[2].x) / 6,
+            (-p[0].y + 6 * p[1].y + p[2].y) / 6,
+            (p[1].x + 6 * p[2].x - p[3].x) / 6,
+            (p[1].y + 6*p[2].y - p[3].y) / 6,
+            p[2].x,
+            p[2].y
+      ]);
+    }
+    return d
+  }
+  function ellipsePath(x, y, rx, ry, a) {
+    if (a == null && ry == null) {
+      ry = rx;
+    }
+    x = +x;
+    y = +y;
+    rx = +rx;
+    ry = +ry;
+    var res;
+    if (a != null) {
+      var rad = Math.PI / 180,
+            x1 = x + rx * Math.cos(-ry * rad),
+            x2 = x + rx * Math.cos(-a * rad),
+            y1 = y + rx * Math.sin(-ry * rad),
+            y2 = y + rx * Math.sin(-a * rad);
+      res = [["M", x1, y1], ["A", rx, rx, 0, +(a - ry > 180), 0, x2, y2]];
+    } else {
+      res = [
+          ["M", x, y],
+          ["m", 0, -ry],
+          ["a", rx, ry, 0, 1, 1, 0, 2 * ry],
+          ["a", rx, ry, 0, 1, 1, 0, -2 * ry],
+          ["z"]
+      ];
+    }
+    return res;
+  }
+  function parsePathString(pathString) {
+    if (!pathString) {
+      return null;
+    }
+    if( pathString instanceof Array ) {
+      return pathString;
+    } else {
+      var spaces = "\\" + (("x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029").split('|').join('\\')),
+          pathCommand = new RegExp(("([a-z])[" + spaces + ",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?[" + spaces + "]*,?[" + spaces + "]*)+)"), "ig"),
+          pathValues = new RegExp(("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[" + spaces + "]*,?[" + spaces + "]*"), "ig"),
+          paramCounts = {a: 7, c: 6, o: 2, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, u: 3, z: 0},
+          data = [];
+      pathString.replace(pathCommand, function (a, b, c) {
+        var params = [], name = b.toLowerCase();
+        c.replace(pathValues, function (a, b) {
+          b && params.push(+b);
+        });
+        if (name == "m" && params.length > 2) {
+          data.push([b].concat(params.splice(0, 2)));
+          name = "l";
+          b = b == "m" ? "l" : "L";
+        }
+        if (name == "o" && params.length == 1) {
+          data.push([b, params[0]]);
+        }
+        if (name == "r") {
+          data.push([b].concat(params));
+        } else { while (params.length >= paramCounts[name]) {
+          data.push([b].concat(params.splice(0, paramCounts[name])));
+          if (!paramCounts[name]) {
+            break;
+          }
+        } }
+      });
+      return data;
+    }
+  }
+  function pathToAbsolute(pathArray) {
+    pathArray = parsePathString(pathArray);
+    if (!pathArray || !pathArray.length) {
+      return [["M", 0, 0]];
+    }
+    var res = [], x = 0, y = 0, mx = 0, my = 0, start = 0, pa0;
+    if (pathArray[0][0] === "M") {
+      x = +pathArray[0][1];
+      y = +pathArray[0][2];
+      mx = x;
+      my = y;
+      start++;
+      res[0] = ["M", x, y];
+    }
+    var crz = pathArray.length === 3 &&
+        pathArray[0][0] === "M" &&
+        pathArray[1][0].toUpperCase() === "R" &&
+        pathArray[2][0].toUpperCase() === "Z";
+    for (var r = (void 0), pa = (void 0), i = start, ii = pathArray.length; i < ii; i++) {
+      res.push(r = []);
+      pa = pathArray[i];
+      pa0 = pa[0];
+      if (pa0 !== pa0.toUpperCase()) {
+        r[0] = pa0.toUpperCase();
+        switch (r[0]) {
+          case "A":
+            r[1] = pa[1];
+            r[2] = pa[2];
+            r[3] = pa[3];
+            r[4] = pa[4];
+            r[5] = pa[5];
+            r[6] = +pa[6] + x;
+            r[7] = +pa[7] + y;
+            break;
+          case "V":
+            r[1] = +pa[1] + y;
+            break;
+          case "H":
+            r[1] = +pa[1] + x;
+            break;
+          case "R":
+            var dots = [x, y].concat(pa.slice(1));
+            for (var j = 2, jj = dots.length; j < jj; j++) {
+              dots[j] = +dots[j] + x;
+              dots[++j] = +dots[j] + y;
+            }
+            res.pop();
+            res = res.concat(catmullRom2bezier(dots, crz));
+            break;
+          case "O":
+            res.pop();
+            dots = ellipsePath(x, y, pa[1], pa[2]);
+            dots.push(dots[0]);
+            res = res.concat(dots);
+            break;
+          case "U":
+            res.pop();
+            res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3]));
+            r = ["U"].concat(res[res.length - 1].slice(-2));
+            break;
+          case "M":
+            mx = +pa[1] + x;
+            my = +pa[2] + y;
+          default:
+            for (j = 1, jj = pa.length; j < jj; j++) {
+              r[j] = +pa[j] + ((j % 2) ? x : y);
+            }
+        }
+      } else if (pa0 == "R") {
+        dots = [x, y].concat(pa.slice(1));
+        res.pop();
+        res = res.concat(catmullRom2bezier(dots, crz));
+        r = ["R"].concat(pa.slice(-2));
+      } else if (pa0 == "O") {
+        res.pop();
+        dots = ellipsePath(x, y, pa[1], pa[2]);
+        dots.push(dots[0]);
+        res = res.concat(dots);
+      } else if (pa0 == "U") {
+        res.pop();
+        res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3]));
+        r = ["U"].concat(res[res.length - 1].slice(-2));
+      } else {
+        for (var k = 0, kk = pa.length; k < kk; k++) {
+          r[k] = pa[k];
+        }
+      }
+      pa0 = pa0.toUpperCase();
+      if (pa0 != "O") {
+        switch (r[0]) {
+          case "Z":
+            x = +mx;
+            y = +my;
+            break;
+          case "H":
+            x = r[1];
+            break;
+          case "V":
+            y = r[1];
+            break;
+          case "M":
+            mx = r[r.length - 2];
+            my = r[r.length - 1];
+          default:
+            x = r[r.length - 2];
+            y = r[r.length - 1];
+        }
+      }
+    }
+    return res
+  }
+  function l2c(x1, y1, x2, y2) {
+    return [x1, y1, x2, y2, x2, y2];
+  }
+  function q2c(x1, y1, ax, ay, x2, y2) {
+    var _13 = 1 / 3;
+    var _23 = 2 / 3;
+    return [
+            _13 * x1 + _23 * ax,
+            _13 * y1 + _23 * ay,
+            _13 * x2 + _23 * ax,
+            _13 * y2 + _23 * ay,
+            x2,
+            y2
+          ]
+  }
+  function a2c(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
+    var _120 = Math.PI * 120 / 180, rad = Math.PI / 180 * (+angle || 0);
+    var res = [], xy, f1, f2, cx, cy;
+    function rotateVector(x, y, rad) {
+      var X = x * Math.cos(rad) - y * Math.sin(rad),
+            Y = x * Math.sin(rad) + y * Math.cos(rad);
+      return {x: X, y: Y};
+    }
+    if (!recursive) {
+      xy = rotateVector(x1, y1, -rad);
+      x1 = xy.x;
+      y1 = xy.y;
+      xy = rotateVector(x2, y2, -rad);
+      x2 = xy.x;
+      y2 = xy.y;
+      var x = (x1 - x2) / 2, y = (y1 - y2) / 2, h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
+      if (h > 1) {
+        h = Math.sqrt(h);
+        rx = h * rx;
+        ry = h * ry;
+      }
+      var rx2 = rx * rx,
+          ry2 = ry * ry,
+          k = (large_arc_flag == sweep_flag ? -1 : 1)
+            * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x)
+            / (rx2 * y * y + ry2 * x * x)));
+      cx = k * rx * y / ry + (x1 + x2) / 2,
+      cy = k * -ry * x / rx + (y1 + y2) / 2;
+      f1 = Math.asin(((y1 - cy) / ry).toFixed(9)),
+      f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
+      f1 = x1 < cx ? Math.PI - f1 : f1;
+      f2 = x2 < cx ? Math.PI - f2 : f2;
+      f1 < 0 && (f1 = Math.PI * 2 + f1);
+      f2 < 0 && (f2 = Math.PI * 2 + f2);
+      if (sweep_flag && f1 > f2) {
+        f1 = f1 - Math.PI * 2;
+      }
+      if (!sweep_flag && f2 > f1) {
+        f2 = f2 - Math.PI * 2;
+      }
+    } else {
+      f1 = recursive[0];
+      f2 = recursive[1];
+      cx = recursive[2];
+      cy = recursive[3];
+    }
+    var df = f2 - f1;
+    if (Math.abs(df) > _120) {
+      var f2old = f2, x2old = x2, y2old = y2;
+      f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
+      x2 = cx + rx * Math.cos(f2);
+      y2 = cy + ry * Math.sin(f2);
+      res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
+    }
+    df = f2 - f1;
+    var c1 = Math.cos(f1),
+          s1 = Math.sin(f1),
+          c2 = Math.cos(f2),
+          s2 = Math.sin(f2),
+          t = Math.tan(df / 4),
+          hx = 4 / 3 * rx * t,
+          hy = 4 / 3 * ry * t,
+          m1 = [x1, y1],
+          m2 = [x1 + hx * s1, y1 - hy * c1],
+          m3 = [x2 + hx * s2, y2 - hy * c2],
+          m4 = [x2, y2];
+    m2[0] = 2 * m1[0] - m2[0];
+    m2[1] = 2 * m1[1] - m2[1];
+    if (recursive) {
+      return [m2, m3, m4].concat(res);
+    } else {
+      res = [m2, m3, m4].concat(res).join().split(",");
+      var newres = [];
+      for (var i = 0, ii = res.length; i < ii; i++) {
+        newres[i] = i % 2 ? rotateVector(res[i - 1], res[i], rad).y : rotateVector(res[i], res[i + 1], rad).x;
+      }
+      return newres;
+    }
+  }
+  function processPath (path, d, pcom) {
+    var nx, ny;
+    if (!path) {
+      return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
+    }
+    !(path[0] in {T: 1, Q: 1}) && (d.qx = d.qy = null);
+    switch (path[0]) {
+      case "M":
+        d.X = path[1];
+        d.Y = path[2];
+        break;
+      case "A":
+        path = ["C"].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1))));
+        break;
+      case "S":
+        if (pcom == "C" || pcom == "S") {
+          nx = d.x * 2 - d.bx;
+          ny = d.y * 2 - d.by;
+        }
+        else {
+          nx = d.x;
+          ny = d.y;
+        }
+        path = ["C", nx, ny].concat(path.slice(1));
+        break;
+      case "T":
+        if (pcom == "Q" || pcom == "T") {
+          d.qx = d.x * 2 - d.qx;
+          d.qy = d.y * 2 - d.qy;
+        }
+        else {
+          d.qx = d.x;
+          d.qy = d.y;
+        }
+        path = ["C"].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
+        break;
+      case "Q":
+        d.qx = path[1];
+        d.qy = path[2];
+        path = ["C"].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
+        break;
+      case "L":
+        path = ["C"].concat(l2c(d.x, d.y, path[1], path[2]));
+        break;
+      case "H":
+        path = ["C"].concat(l2c(d.x, d.y, path[1], d.y));
+        break;
+      case "V":
+        path = ["C"].concat(l2c(d.x, d.y, d.x, path[1]));
+        break;
+      case "Z":
+        path = ["C"].concat(l2c(d.x, d.y, d.X, d.Y));
+        break;
+    }
+    path.map(function (x,i){ return i?x.toFixed(3):x; });
+    return path;
+  }
+  function fixM (path1, path2, a1, a2, i) {
+    if (path1 && path2 && path1[i][0] === "M" && path2[i][0] !== "M") {
+      path2.splice(i, 0, ["M", a2.x, a2.y]);
+      a1.bx = 0;
+      a1.by = 0;
+      a1.x = path1[i][1];
+      a1.y = path1[i][2];
+    }
+  }
+  function fixArc (p, p2, pcoms1, pcoms2, i) {
+    if (p[i].length > 7) {
+      p[i].shift();
+      var pi = p[i];
+      while (pi.length) {
+        pcoms1[i] = "A";
+        p2 && (pcoms2[i] = "A");
+        p.splice(i++, 0, ["C"].concat(pi.splice(0, 6)));
+      }
+      p.splice(i, 1);
+    }
+  }
+  function path2curve(path, path2) {
+    var p = pathToAbsolute(path),
+          p2 = path2 && pathToAbsolute(path2),
+          attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
+          attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null};
+    var pcoms1 = [], pcoms2 = [], pfirst = "", pcom = "";
+    for (var i = 0, ii = Math.max(p.length, p2 && p2.length || 0); i < ii; i++) {
+      p[i] && (pfirst = p[i][0]);
+      if (pfirst !== "C") {
+        pcoms1[i] = pfirst;
+        i && ( pcom = pcoms1[i - 1]);
+      }
+      p[i] = processPath(p[i], attrs, pcom);
+      if (pcoms1[i] !== "A" && pfirst === "C") { pcoms1[i] = "C"; }
+      fixArc(p, p2, pcoms1, pcoms2, i);
+      ii = Math.max(p.length, p2 && p2.length || 0);
+      if (p2) {
+        p2[i] && (pfirst = p2[i][0]);
+        if (pfirst !== "C") {
+          pcoms2[i] = pfirst;
+          i && (pcom = pcoms2[i - 1]);
+        }
+        p2[i] = processPath(p2[i], attrs2, pcom);
+        if (pcoms2[i] !== "A" && pfirst === "C") {
+          pcoms2[i] = "C";
+        }
+        fixArc(p2, p, pcoms2, pcoms1, i);
+        ii = Math.max(p.length, p2 && p2.length || 0);
+      }
+      fixM(p, p2, attrs, attrs2, i);
+      p2 && fixM(p2, p, attrs2, attrs, i);
+      ii = Math.max(p.length, p2 && p2.length || 0);
+      var seg = p[i],
+            seg2 = p2 && p2[i],
+            seglen = seg.length,
+            seg2len = p2 && seg2.length;
+      attrs.x = seg[seglen - 2];
+      attrs.y = seg[seglen - 1];
+      attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
+      attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
+      attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
+      attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
+      attrs2.x = p2 && seg2[seg2len - 2];
+      attrs2.y = p2 && seg2[seg2len - 1];
+    }
+    return p2 ? [p, p2] : p;
+  }
+  function createPath (path) {
+    var np = document.createElementNS('http://www.w3.org/2000/svg','path'),
+          d = path instanceof SVGElement ? path.getAttribute('d') : path;
+    np.setAttribute('d',d);
+    return np
+  }
+  function getSegments(curveArray) {
+    var result = [];
+    curveArray.map(function (seg, i) {
+      result[i] = {
+        x: seg[seg[0] === 'M' ? 1 : 5],
+        y: seg[seg[0] === 'M' ? 2 : 6],
+        seg: seg
+      };
+    });
+    return result
+  }
+  function reverseCurve(path){
+    var newSegments = [],
+        oldSegments = getSegments(path),
+        segsCount = oldSegments.length,
+        pointCount = segsCount - 1,
+        oldSegIdx = pointCount,
+        oldSegs = [];
+    oldSegments.map(function (p,i){
+      if (i === 0||oldSegments[oldSegIdx].seg[0] === 'M') {
+        newSegments[i] = ['M',oldSegments[oldSegIdx].x,oldSegments[oldSegIdx].y];
+      } else {
+        oldSegIdx = pointCount - i > 0 ? pointCount - i : pointCount;
+        oldSegs = oldSegments[oldSegIdx].seg;
+        newSegments[i] = [oldSegs[0], oldSegs[5],oldSegs[6],oldSegs[3],oldSegs[4], oldSegs[1], oldSegs[2]];
+      }
+    });
+    return newSegments
+  }
+  function getRotationSegments(s,idx) {
+    var newSegments = [], segsCount = s.length, pointCount = segsCount - 1;
+    s.map(function (p,i){
+      var oldSegIdx = idx + i;
+      if (i===0 || s[oldSegIdx] && s[oldSegIdx].seg[0] === 'M') {
+        newSegments[i] = ['M',s[oldSegIdx].x,s[oldSegIdx].y];
+      } else {
+        if (oldSegIdx >= segsCount) { oldSegIdx -= pointCount; }
+        newSegments[i] = s[oldSegIdx].seg;
+      }
+    });
+    return newSegments
+  }
+  function getRotations(a) {
+    var startSegments = getSegments(a), rotations = [];
+    startSegments.map(function (s,i){rotations[i] = getRotationSegments(startSegments,i);});
+    return rotations
+  }
+  function getRotatedCurve(a,b) {
+    var startSegments = getSegments(a),
+        endSegments = getSegments(b),
+        segsCount = startSegments.length,
+        pointCount = segsCount - 1,
+        linePaths = [],
+        lineLengths = [],
+        rotations = getRotations(a);
+    rotations.map(function (r,i){
+      var sumLensSqrd = 0, linePath = createPath('M0,0L0,0');
+      for (var j = 0; j < pointCount; j++) {
+        var linePt1 = startSegments[(i + j) % pointCount];
+        var linePt2 = endSegments[ j  % pointCount];
+        var linePathStr = "M" + (linePt1.x) + "," + (linePt1.y) + "L" + (linePt2.x) + "," + (linePt2.y);
+        linePath.setAttribute('d',linePathStr);
+        sumLensSqrd += Math.pow(linePath.getTotalLength(),2);
+        linePaths[j] = linePath;
+      }
+      lineLengths[i] = sumLensSqrd;
+      sumLensSqrd = 0;
+    });
+    var computedIndex = lineLengths.indexOf(Math.min.apply(null,lineLengths)),
+        newPath = rotations[computedIndex];
+    return newPath
+  }
+  function toPathString(pathArray) {
+    var newPath = pathArray.map( function (c) {
+      if (typeof(c) === 'string') {
+        return c
+      } else {
+        var c0 = c.shift();
+        return c0 + c.join(',')
+      }
+    });
+    return newPath.join('');
+  }
+  function getCubicMorph(tweenProp){
+    return this.element.getAttribute('d');
+  }
+  function prepareCubicMorph(tweenProp,value){
+    var pathObject = {},
+        el = value instanceof SVGElement ? value : /^\.|^\#/.test(value) ? selector(value) : null,
+        pathReg = new RegExp('\\n','ig');
+    try {
+      if ( typeof(value) === 'object' && value.curve ) {
+        return value;
+      } else if ( el && /path|glyph/.test(el.tagName) ) {
+        pathObject.original = el.getAttribute('d').replace(pathReg,'');
+      } else if (!el && typeof(value) === 'string') {
+        pathObject.original = value.replace(pathReg,'');
+      }
+      return pathObject;
+    }
+    catch(e){
+      throw TypeError(("KUTE.js - " + INVALID_INPUT + " " + e))
+    }
+  }
+  function crossCheckCubicMorph(tweenProp){
+    if (this.valuesEnd[tweenProp]) {
+      var pathCurve1 = this.valuesStart[tweenProp].curve,
+          pathCurve2 = this.valuesEnd[tweenProp].curve;
+      if ( !pathCurve1 || !pathCurve2 || ( pathCurve1 && pathCurve2 && pathCurve1[0][0] === 'M' && pathCurve1.length !== pathCurve2.length) ) {
+        var path1 = this.valuesStart[tweenProp].original,
+            path2 = this.valuesEnd[tweenProp].original,
+            curves = path2curve(path1,path2);
+        var curve0 = this._reverseFirstPath ? reverseCurve.call(this,curves[0]) : curves[0],
+            curve1 = this._reverseSecondPath ? reverseCurve.call(this,curves[1]) : curves[1];
+        curve0 = getRotatedCurve.call(this,curve0,curve1);
+        this.valuesStart[tweenProp].curve = curve0;
+        this.valuesEnd[tweenProp].curve = curve1;
+      }
+    }
+  }
+  function onStartCubicMorph(tweenProp){
+    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+      KUTE[tweenProp] = function(elem,a,b,v){
+        var curve = [], path1 = a.curve, path2 = b.curve;
+        for(var i=0, l=path2.length; i>0)/1000 );
+          }
+        }
+        elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) );
+      };
+    }
+  }
+  var svgCubicMorphFunctions = {
+    prepareStart: getCubicMorph,
+    prepareProperty: prepareCubicMorph,
+    onStart: onStartCubicMorph,
+    crossCheck: crossCheckCubicMorph
+  };
+  var svgCubicMorphOps = {
+    component: 'svgCubicMorph',
+    property: 'path',
+    defaultValue: [],
+    Interpolate: {numbers: numbers,toPathString: toPathString},
+    functions: svgCubicMorphFunctions,
+    Util: {
+      l2c: l2c, q2c: q2c, a2c: a2c, catmullRom2bezier: catmullRom2bezier, ellipsePath: ellipsePath,
+      path2curve: path2curve, pathToAbsolute: pathToAbsolute, toPathString: toPathString, parsePathString: parsePathString,
+      getRotatedCurve: getRotatedCurve, getRotations: getRotations,
+      getRotationSegments: getRotationSegments, reverseCurve: reverseCurve, getSegments: getSegments, createPath: createPath
+    }
+  };
+
+  function parseStringOrigin (origin, ref) {
+    var x = ref.x;
+    var width = ref.width;
+    return /[a-zA-Z]/.test(origin) && !/px/.test(origin)
+      ? origin.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50)
+      : /%/.test(origin) ? (x + parseFloat(origin) * width / 100) : parseFloat(origin);
+  }
+  function parseTransformString (a) {
+    var d = a && /\)/.test(a) ? a.substring(0, a.length-1).split(/\)\s|\)/) : 'none', c = {};
+    if (d instanceof Array) {
+      for (var j=0, jl = d.length; j>0)/1000) + (y ? (("," + ((y*1000>>0)/1000))) : '') + ")")) : '' )
+                                   +( rotate ? ("rotate(" + ((rotate*1000>>0)/1000) + ")") : '' )
+                                   +( skewX ? ("skewX(" + ((skewX*1000>>0)/1000) + ")") : '' )
+                                   +( skewY ? ("skewY(" + ((skewY*1000>>0)/1000) + ")") : '' )
+                                   +( scale !== 1 ? ("scale(" + ((scale*1000>>0)/1000) + ")") : '' ) );
+      };
+    }
+  }
+  function prepareSvgTransform(p,v){
+    return parseTransformSVG.call(this,p,v);
+  }
+  function getStartSvgTransform (tweenProp,value) {
+    var transformObject = {};
+    var currentTransform = parseTransformString(this.element.getAttribute('transform'));
+    for (var i in value) {
+      transformObject[i] = i in currentTransform ? currentTransform[i] : (i==='scale'?1:0);
+    }
+    return transformObject;
+  }
+  function svgTransformCrossCheck(prop) {
+    if (!this._resetStart) { return; }
+    if ( this.valuesEnd[prop] ) {
+      var valuesStart = this.valuesStart[prop];
+      var valuesEnd = this.valuesEnd[prop];
+      var currentTransform = parseTransformSVG.call(this, prop, parseTransformString(this.element.getAttribute('transform')) );
+      for ( var i in currentTransform ) {
+        valuesStart[i] = currentTransform[i];
+      }
+      var parentSVG = this.element.ownerSVGElement;
+      var startMatrix = parentSVG.createSVGTransformFromMatrix(
+        parentSVG.createSVGMatrix()
+        .translate(-valuesStart.origin[0],-valuesStart.origin[1])
+        .translate('translate' in valuesStart ? valuesStart.translate[0] : 0,'translate' in valuesStart ? valuesStart.translate[1] : 0)
+        .rotate(valuesStart.rotate||0).skewX(valuesStart.skewX||0).skewY(valuesStart.skewY||0).scale(valuesStart.scale||1)
+        .translate(+valuesStart.origin[0],+valuesStart.origin[1])
+      );
+      valuesStart.translate = [startMatrix.matrix.e,startMatrix.matrix.f];
+      for ( var i$1 in valuesStart) {
+        if ( !(i$1 in valuesEnd) || i$1==='origin') {
+          valuesEnd[i$1] = valuesStart[i$1];
+        }
+      }
+    }
+  }
+  var svgTransformFunctions = {
+    prepareStart: getStartSvgTransform,
+    prepareProperty: prepareSvgTransform,
+    onStart: svgTransformOnStart,
+    crossCheck: svgTransformCrossCheck
+  };
+  var svgTransformOps = {
+    component: 'svgTransformProperty',
+    property: 'svgTransform',
+    defaultOptions: {transformOrigin:'50% 50%'},
+    defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1},
+    Interpolate: {numbers: numbers},
+    functions: svgTransformFunctions,
+    Util: { parseStringOrigin: parseStringOrigin, parseTransformString: parseTransformString, parseTransformSVG: parseTransformSVG }
+  };
+
+  function on (element, event, handler, options) {
+    options = options || false;
+    element.addEventListener(event, handler, options);
+  }
+
+  function off (element, event, handler, options) {
+    options = options || false;
+    element.removeEventListener(event, handler, options);
+  }
+
+  function one (element, event, handler, options) {
+    on(element, event, function handlerWrapper(e){
+      if (e.target === element) {
+        handler(e);
+        off(element, event, handlerWrapper, options);
+      }
+    }, options);
+  }
+
+  var supportPassive = (function () {
+    var result = false;
+    try {
+      var opts = Object.defineProperty({}, 'passive', {
+        get: function() {
+          result = true;
+        }
+      });
+      one(document, 'DOMContentLoaded', function (){}, opts);
+    } catch (e) {}
+    return result;
+  })();
+
+  var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
+
+  var canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false;
+  var touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
+  var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0];
+  var passiveHandler = supportPassive ? { passive: false } : false;
+  function preventScroll(e) {
+    this.scrolling && e.preventDefault();
+  }
+  function getScrollTargets(){
+    var el = this.element;
+    return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
+  }
+  function scrollIn(){
+    var targets = getScrollTargets.call(this);
+    if ( 'scroll' in this.valuesEnd && !targets.el.scrolling) {
+      targets.el.scrolling = 1;
+      on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
+      on( targets.el, touchOrWheel, preventScroll, passiveHandler);
+      targets.st.style.pointerEvents = 'none';
+    }
+  }
+  function scrollOut(){
+    var targets = getScrollTargets.call(this);
+    if ( 'scroll' in this.valuesEnd && targets.el.scrolling) {
+      targets.el.scrolling = 0;
+      off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
+      off( targets.el, touchOrWheel, preventScroll, passiveHandler);
+      targets.st.style.pointerEvents = '';
+    }
+  }
+  function getScroll(){
+    this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
+    scrollIn.call(this);
+    return this.element === scrollContainer ? (window.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
+  }
+  function prepareScroll(prop,value){
+    return parseInt(value);
+  }
+  function onStartScroll(tweenProp){
+    if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.scrollTop = (numbers(a,b,v))>>0;
+      };
+    }
+  }
+  function onCompleteScroll(tweenProp){
+    scrollOut.call(this);
+  }
+  var scrollFunctions = {
+    prepareStart: getScroll,
+    prepareProperty: prepareScroll,
+    onStart: onStartScroll,
+    onComplete: onCompleteScroll
+  };
+  var scrollOps = {
+    component: 'scrollProperty',
+    property: 'scroll',
+    defaultValue: 0,
+    Interpolate: {numbers: numbers},
+    functions: scrollFunctions,
+    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
+  };
+
+  var shadowProps = ['boxShadow','textShadow'];
+  function processShadowArray (shadow,tweenProp){
+    var newShadow, i;
+    if (shadow.length === 3) {
+      newShadow = [shadow[0], shadow[1], 0, 0, shadow[2], 'none'];
+    } else if (shadow.length === 4) {
+      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) {
+      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) {
+      newShadow = shadow;
+    }
+    for (i=0;i<4;i++){
+      newShadow[i] = parseFloat(newShadow[i]);
+    }
+    newShadow[4] = trueColor(newShadow[4]);
+    newShadow = tweenProp === 'boxShadow' ? newShadow : newShadow.filter(function (x,i){ return [0,1,2,4].indexOf(i)>-1; });
+    return newShadow;
+  }
+  function getShadow(tweenProp,value){
+    var cssShadow = getStyleForProperty(this.element,tweenProp);
+    return /^none$|^initial$|^inherit$|^inset$/.test(cssShadow) ? defaultValues[tweenProp] : cssShadow;
+  }
+  function prepareShadow(tweenProp,value) {
+    if (typeof value === 'string'){
+      var currentColor, inset = 'none';
+      var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi;
+      inset = /inset/.test(value) ? 'inset' : inset;
+      value = /inset/.test(value) ? value.replace(/(\s+inset|inset+\s)/g,'') : value;
+      currentColor = value.match(colRegEx);
+      value = value.replace(currentColor[0],'').split(' ').concat([currentColor[0].replace(/\s/g,'')],[inset]);
+      value = processShadowArray(value,tweenProp);
+    } else if (value instanceof Array){
+      value = processShadowArray(value,tweenProp);
+    }
+    return value;
+  }
+  function onStartShadow(tweenProp) {
+    if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        var params = [], unit = 'px', sl = tweenProp === 'textShadow' ? 3 : 4,
+            colA = sl === 3 ? a[3] : a[4], colB = sl === 3 ? b[3] : b[4],
+            inset = a[5] && a[5] !== 'none' || b[5] && b[5] !== 'none' ? ' inset' : false;
+        for (var i=0; i> 0) / 1000) + unit );
+        }
+        elem.style[tweenProp] = inset ? colors(colA,colB,v) + params.join(' ') + inset
+                                      : colors(colA,colB,v) + params.join(' ');
+      };
+    }
+  }
+  var shadowPropOnStart = {};
+  shadowProps.map(function (x){ return shadowPropOnStart[x]=onStartShadow; });
+  var shadowFunctions = {
+    prepareStart: getShadow,
+    prepareProperty: prepareShadow,
+    onStart: shadowPropOnStart
+  };
+  var shadowOps = {
+    component: 'shadowProperties',
+    properties: shadowProps,
+    defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px rgb(0,0,0)'},
+    Interpolate: {numbers: numbers,colors: colors},
+    functions: shadowFunctions,
+    Util: { processShadowArray: processShadowArray, trueColor: trueColor }
+  };
+
+  var textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing'];
+  var textOnStart = {};
+  function textPropOnStart(tweenProp){
+    if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        elem.style[tweenProp] = units(a.v,b.v,b.u,v);
+      };
+    }
+  }
+  textProperties.forEach(function (tweenProp) {
+    textOnStart[tweenProp] = textPropOnStart;
+  });
+  function getTextProp(prop) {
+    return getStyleForProperty(this.element,prop) || defaultValues[prop];
+  }
+  function prepareTextProp(prop,value) {
+    return trueDimension(value);
+  }
+  var textPropFunctions = {
+    prepareStart: getTextProp,
+    prepareProperty: prepareTextProp,
+    onStart: textOnStart
+  };
+  var textOps = {
+    component: 'textProperties',
+    category: 'textProps',
+    properties: textProperties,
+    defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},
+    Interpolate: {units: units},
+    functions: textPropFunctions,
+    Util: {trueDimension: trueDimension}
+  };
+
+  function wrapContentsSpan(el,classNAME){
+    var textWriteWrapper;
+    var newElem;
+    if ( typeof(el) === 'string' ) {
+      newElem = document.createElement('SPAN');
+      newElem.innerHTML = el;
+      newElem.className = classNAME;
+      return newElem
+    } else if (!el.children.length || el.children.length && el.children[0].className !== classNAME ) {
+      var elementInnerHTML = el.innerHTML;
+      textWriteWrapper = document.createElement('SPAN');
+      textWriteWrapper.className = classNAME;
+      textWriteWrapper.innerHTML = elementInnerHTML;
+      el.appendChild(textWriteWrapper);
+      el.innerHTML = textWriteWrapper.outerHTML;
+    } else if (el.children.length && el.children[0].className === classNAME){
+      textWriteWrapper = el.children[0];
+    }
+    return textWriteWrapper
+  }
+  function getTextPartsArray(el,classNAME){
+    var elementsArray = [];
+    if (el.children.length) {
+      var textParts = [];
+      var remainingMarkup = el.innerHTML;
+      var wrapperParts;
+      for ( var i=0, l = el.children.length, currentChild = (void 0), childOuter = (void 0), unTaggedContent = (void 0); i,./?\=-").split(""),
+      numeric = String("0123456789").split(""),
+      alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric),
+      allTypes = alphaNumeric.concat(nonAlpha);
+  var charSet = {
+    alpha: lowerCaseAlpha,
+    upper: upperCaseAlpha,
+    symbols: nonAlpha,
+    numeric: numeric,
+    alphanumeric: alphaNumeric,
+    all: allTypes,
+  };
+  function getWrite(tweenProp,value){
+    return this.element.innerHTML;
+  }
+  function prepareText(tweenProp,value) {
+    if( tweenProp === 'number' ) {
+      return parseFloat(value)
+    } else {
+      return value === '' ? ' ' : value
+    }
+  }
+  var onStartWrite = {
+    text: function(tweenProp){
+      if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
+        var chars = this._textChars,
+            charsets = chars in charSet ? charSet[chars]
+                    : chars && chars.length ? chars
+                    : charSet[defaultOptions.textChars];
+        KUTE[tweenProp] = function(elem,a,b,v) {
+          var initialText = '',
+              endText = '',
+              firstLetterA = a.substring(0),
+              firstLetterB = b.substring(0),
+              pointer = charsets[(Math.random() * charsets.length)>>0];
+          if (a === ' ') {
+            endText         = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
+            elem.innerHTML = v < 1 ? ( ( endText + pointer  ) ) : (b === '' ? ' ' : b);
+          } else if (b === ' ') {
+            initialText     = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
+            elem.innerHTML = v < 1 ? ( ( initialText + pointer  ) ) : (b === '' ? ' ' : b);
+          } else {
+            initialText     = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
+            endText         = firstLetterB.substring(0,                   Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
+            elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
+          }
+        };
+      }
+    },
+    number: function(tweenProp) {
+      if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+        KUTE[tweenProp] = function (elem, a, b, v) {
+          elem.innerHTML = numbers(a, b, v)>>0;
+        };
+      }
+    }
+  };
+  var textWriteFunctions = {
+    prepareStart: getWrite,
+    prepareProperty: prepareText,
+    onStart: onStartWrite
+  };
+  var textWriteOps = {
+    component: 'textWriteProperties',
+    category: 'textWrite',
+    properties: ['text','number'],
+    defaultValues: {text: ' ',numbers:'0'},
+    defaultOptions: { textChars: 'alpha' },
+    Interpolate: {numbers: numbers},
+    functions: textWriteFunctions,
+    Util: { charSet: charSet, createTextTweens: createTextTweens }
+  };
+
+  var componentName = 'transformMatrix';
+  var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
+                          : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
+                          : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
+                          : typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
+                          : null;
+  function getTransform(tweenProp, value){
+    var transformObject = {};
+    if (this.element[componentName]) {
+      var currentValue = this.element[componentName];
+      for (var vS in currentValue) {
+        transformObject[vS] = currentValue[vS];
+      }
+    } else {
+      for (var vE in value){
+        transformObject[vE] = vE === 'perspective' ? value[vE] : defaultValues.transform[vE];
+      }
+    }
+    return transformObject
+  }
+  function prepareTransform(tweenProp,value){
+    if ( typeof(value) === 'object' && !value.length) {
+      var transformObject = {},
+          translate3dObj = {},
+          rotate3dObj = {},
+          scale3dObj = {},
+          skewObj = {},
+          axis = [{translate3d:translate3dObj},{rotate3d:rotate3dObj},{skew:skewObj},{scale3d:scale3dObj}];
+      var loop = function ( prop ) {
+        if ( /3d/.test(prop) && typeof(value[prop]) === 'object' && value[prop].length ){
+          var pv = value[prop].map( function (v) { return prop === 'scale3d' ? parseFloat(v) : parseInt(v); } );
+          transformObject[prop] = prop === 'scale3d' ? [pv[0]||1, pv[1]||1, pv[2]||1] : [pv[0]||0, pv[1]||0, pv[2]||0];
+        } else if ( /[XYZ]/.test(prop) ) {
+          var obj = /translate/.test(prop) ? translate3dObj
+                  : /rotate/.test(prop) ? rotate3dObj
+                  : /scale/.test(prop) ? scale3dObj
+                  : /skew/.test(prop) ? skewObj : {};
+          var idx = prop.replace(/translate|rotate|scale|skew/,'').toLowerCase();
+          obj[idx] = /scale/.test(prop) ? parseFloat(value[prop]) : parseInt(value[prop]);
+        } else if ('skew' === prop ) {
+          var pv$1 = value[prop].map(function (v) { return parseInt(v)||0; });
+          transformObject[prop] = [pv$1[0]||0, pv$1[1]||0];
+        } else {
+          transformObject[prop] = parseInt(value[prop]);
+        }
+      };
+      for (var prop in value) loop( prop );
+      axis.map(function (o) {
+        var tp = Object.keys(o)[0];
+        var tv = o[tp];
+        if ( Object.keys(tv).length && !transformObject[tp]) {
+          transformObject[tp] = tp === 'scale3d' ? [tv.x || 1, tv.y || 1, tv.z || 1]
+                              : tp === 'skew' ? [tv.x || 0, tv.y || 0]
+                              : [tv.x || 0, tv.y || 0, tv.z || 0];
+        }
+      });
+      return transformObject;
+    } else {
+      console.error(("KUTE.js - \"" + value + "\" is not valid/supported transform function"));
+    }
+  }
+  var onStartTransform = {
+    transform : function(tweenProp) {
+      if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+        KUTE[tweenProp] = function (elem, a, b, v) {
+          var matrix = new CSS3Matrix();
+          var transformObject = {};
+          for ( var p in b ) {
+            transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v);
+          }
+          transformObject.perspective && (matrix.m34 = -1/transformObject.perspective);
+          matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix;
+          matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix;
+          if (transformObject.skew) {
+            matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix;
+            matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix;
+          }
+          matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix;
+          elem.style[tweenProp] = matrix.toString();
+        };
+      }
+    },
+    CSS3Matrix: function(prop) {
+      if (this.valuesEnd.transform){
+        !KUTE[prop] && (KUTE[prop] = CSS3Matrix);
+      }
+    },
+  };
+  function onCompleteTransform(tweenProp){
+    if (this.valuesEnd[tweenProp]) {
+      this.element[componentName] = {};
+      for (var tf in this.valuesEnd[tweenProp]){
+        this.element[componentName][tf] = this.valuesEnd[tweenProp][tf];
+      }
+    }
+  }
+  function crossCheckTransform(tweenProp){
+    if (this.valuesEnd[tweenProp]) {
+      if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
+        this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective;
+      }
+    }
+  }
+  var matrixFunctions = {
+    prepareStart: getTransform,
+    prepareProperty: prepareTransform,
+    onStart: onStartTransform,
+    onComplete: onCompleteTransform,
+    crossCheck: crossCheckTransform
+  };
+  var matrixTransformOps = {
+    component: componentName,
+    property: 'transform',
+    defaultValue: {perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},
+    functions: matrixFunctions,
+    Interpolate: {
+      perspective: numbers,
+      translate3d: arrays,
+      rotate3d: arrays,
+      skew: arrays,
+      scale3d: arrays
+    }
+  };
+
+  var BackgroundPosition = new AnimationDevelopment(bgPosOps);
+  var BorderRadius = new AnimationDevelopment(radiusOps);
+  var BoxModel = new AnimationDevelopment(boxModelOps);
+  var ColorProperties = new AnimationDevelopment(colorsOps);
+  var ClipProperty = new AnimationDevelopment(clipOps);
+  var FilterEffects = new AnimationDevelopment(filterOps);
+  var HTMLAttributes = new AnimationDevelopment(attrOps);
+  var OpacityProperty = new AnimationDevelopment(opacityOps);
+  var TextProperties = new AnimationDevelopment(textOps);
+  var TextWrite = new AnimationDevelopment(textWriteOps);
+  var TransformMatrix = new AnimationDevelopment(matrixTransformOps);
+  var ScrollProperty = new AnimationDevelopment(scrollOps);
+  var ShadowProperties = new AnimationDevelopment(shadowOps);
+  var SVGCubicMorph = new AnimationDevelopment(svgCubicMorphOps);
+  var SVGDraw = new AnimationDevelopment(svgDrawOps);
+  var SVGTransform = new AnimationDevelopment(svgTransformOps);
+  var indexExtra = {
+    Animation: AnimationDevelopment,
+    Components: {
+      BackgroundPosition: BackgroundPosition,
+      BorderRadius: BorderRadius,
+      BoxModel: BoxModel,
+      ColorProperties: ColorProperties,
+      ClipProperty: ClipProperty,
+      FilterEffects: FilterEffects,
+      HTMLAttributes: HTMLAttributes,
+      OpacityProperty: OpacityProperty,
+      TextProperties: TextProperties,
+      TextWrite: TextWrite,
+      TransformMatrix: TransformMatrix,
+      ScrollProperty: ScrollProperty,
+      ShadowProperties: ShadowProperties,
+      SVGCubicMorph: SVGCubicMorph,
+      SVGDraw: SVGDraw,
+      SVGTransform: SVGTransform
+    },
+    TweenExtra: TweenExtra,
+    fromTo: fromTo,
+    to: to,
+    TweenCollection: TweenCollection,
+    ProgressBar: ProgressBar,
+    allFromTo: allFromTo,
+    allTo: allTo,
+    Objects: Objects,
+    Util: Util,
+    Easing: Easing,
+    CubicBezier: CubicBezier,
+    Render: Render,
+    Interpolate: Interpolate,
+    Process: Process,
+    Internals: Internals,
+    Selector: selector,
+    Version: version
+  };
+
+  return indexExtra;
+
+})));
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
new file mode 100644
index 0000000..bd4357d
--- /dev/null
+++ b/src/kute-extra.min.js
@@ -0,0 +1,2 @@
+// KUTE.js Extra v2.0.0 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t=[],e={},n={},r={duration:700,delay:0,easing:"linear"},i={},a={},s={},o={},l={},u={},p={},c={supportedProperties:e,defaultOptions:r,defaultValues:n,prepareProperty:a,prepareStart:i,crossCheck:s,onStart:l,onComplete:o,linkProperty:u};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){var e=!(t in document.body.style),n=function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=0,r=e.length;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var R={linear:new V(0,0,1,1,"linear"),easingSinusoidalIn:new V(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new V(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new V(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new V(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new V(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new V(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new V(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new V(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new V(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new V(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new V(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new V(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new V(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new V(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new V(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new V(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new V(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new V(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new V(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new V(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new V(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new V(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new V(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new V(.68,-.55,.265,1.55,"easingBackInOut")};function H(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof R[t])return R[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new V(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),R.linear};var N=function(t,e,n,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||r.duration,this._delay=i.delay||r.delay,i){var s="_"+a;s in this||(this[s]=i[a])}var o=this._easing.name;return l[o]||(l[o]=function(t){!_[t]&&t===this._easing.name&&(_[t]=this._easing)}),this};N.prototype.start=function(t){if(C(this),this.playing=!0,this._startTime=t||_.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var n in l[e])l[e][n].call(this,n);L.call(this),this._startFired=!0}return!I&&P(),this},N.prototype.stop=function(){return this.playing&&(k(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},N.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,A.call(this)},N.prototype.update=function(t){var e,n;if((t=void 0!==t?t:_.Time())1?1:e,n=this._easing(e),this.valuesEnd)_[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},E.Tween=N,r.repeat=0,r.repeatDelay=0,r.yoyo=!1,r.resetStart=!1;var q=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],a=e[2];if(S.call(this,a,"end"),this._resetStart?this.valuesStart=i:S.call(this,i,"start"),!this._resetStart)for(var o in s)for(var l in s[o])s[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||r.repeat,this._repeatDelay=u.repeatDelay||r.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||r.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,x.call(this),s)for(var r in s[n])s[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=_.Time()-this._pauseTime,C(this),!I&&P()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(k(this),this.paused=!0,this._pauseTime=_.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:_.Time())1?1:e,n=this._easing(e),this.valuesEnd)_[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(N);E.Tween=q;var B=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(q);E.Tween=B;var D=function(t,e,n,i){var a=this;this.tweens=[],!("offset"in r)&&(r.offset=0);var s=E.Tween;(i=i||{}).delay=i.delay||r.delay;var o=[];return Array.from(t).map((function(t,l){o[l]=i||{},o[l].delay=l>0?i.delay+(i.offset||r.offset):i.delay,t instanceof Element?a.tweens.push(new s(t,e,n,o[l])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};D.prototype.start=function(t){return t=void 0===t?_.Time():t,this.tweens.map((function(e){return e.start(t)})),this},D.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},D.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},D.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},D.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof D)e.chain(t.tweens);else{if(!(t instanceof E))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},D.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},D.prototype.removeTweens=function(){this.tweens=[]},D.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var z=function(t,e){if(this.element=H(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof E.Tween))throw TypeError("tween parameter is not ["+E+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};z.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(_.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},z.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},z.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},z.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},z.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),_.Tick=cancelAnimationFrame(_.Ticker))},z.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=_.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),_.Tick=requestAnimationFrame(_.Ticker))};var X=E.Tween;var Y=function(t){try{t.component in e?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};Y.prototype.setComponent=function(t){var c=t.component,h={prepareProperty:a,prepareStart:i,onStart:l,onComplete:o,crossCheck:s},f=t.category,d=t.property,g=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(e[c]=t.properties||t.subProperties||t.property,"defaultValue"in t)n[d]=t.defaultValue,this.supports=d+" property";else if(t.defaultValues){for(var m in t.defaultValues)n[m]=t.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(t.defaultOptions)for(var y in t.defaultOptions)r[y]=t.defaultOptions[y];if(t.functions)for(var b in h)if(b in t.functions)if("function"==typeof t.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=t.functions[b]);else for(var w in t.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=t.functions[b][w]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}u[c]=t.Interpolate}if(t.Util)for(var T in t.Util)!p[T]&&(p[T]=t.Util[T]);return this};var Q=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:a,prepareStart:i,onStart:l,onComplete:o,crossCheck:s},r=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||r)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(r||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(r||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||r)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(Y);var W={prepareStart:function(t){return w(this.element,t)||n[t]},prepareProperty:function(t,e){if(e instanceof Array){var n=m(e[0]).v,r=m(e[1]).v;return[NaN!==n?n:50,NaN!==r?r:50]}var i=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return[m((i=2===(i=i.split(/(\,|\s)/g)).length?i:[i[0],50])[0]).v,m(i[1]).v]},onStart:function(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=(100*h(n[0],r[0],i)>>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},K={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:W,Util:{trueDimension:m}},G=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],$={};function Z(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}G.map((function(t){return $[t]=0}));var J={};G.forEach((function(t){J[t]=Z}));var tt={component:"borderRadiusProps",category:"borderRadius",properties:G,defaultValues:$,Interpolate:{units:f},functions:{prepareStart:function(t){return w(this.element,t)||n[t]},prepareProperty:function(t,e){return m(e)},onStart:J},Util:{trueDimension:m}},et=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],nt={};function rt(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}et.map((function(t){return nt[t]=0}));var it={};et.map((function(t){return it[t]=rt}));var at={component:"boxModelProps",category:"boxModel",properties:et,defaultValues:nt,Interpolate:{numbers:h},functions:{prepareStart:function(t){return w(this.element,t)||n[t]},prepareProperty:function(t,e){var n=m(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:it}};var st={prepareStart:function(t,e){var n=w(this.element,t),r=w(this.element,"width"),i=w(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[m(e[0]),m(e[1]),m(e[2]),m(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[m((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),m(n[1]),m(n[2]),m(n[3])]},onStart:function(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},ot={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:st,Util:{trueDimension:m}};function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,e){return w(this.element,t)||n[t]},prepareProperty:function(t,e){return y(e)},onStart:ht},Util:{trueColor:y}},dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var r={};for(var i in e){var a=gt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=y(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=m(o).u||m(e[i]).u,p=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=m(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!_[t]&&this.valuesEnd[t]&&(_[t]=function(t,e,n,r){for(var i in n)_.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!_[t]&&this.valuesEnd.attr&&(_[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:y,trueDimension:m}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=y(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:y}};var Et={prepareStart:function(t){return w(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et},Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var jt={prepareStart:function(){return Ut(this.element)},prepareProperty:function(t,e){return Ut(this.element,e)},onStart:function(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(t,e,n,r){return Ft(t,e,n,r)})}},Vt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h,paintDraw:Ft},functions:jt,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};function Rt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Ht(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Nt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function qt(t){if(!(t=Nt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=zt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,B=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Wt(t,e){for(var n=qt(t),r=e&&qt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Zt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Jt(t){var e=Gt(t),n=[];return e.map((function(t,r){n[r]=Zt(e,r)})),n}function te(t,e){var n=Gt(t),r=Gt(e),i=n.length-1,a=[],s=[],o=Jt(t);return o.map((function(t,e){for(var o=0,l=Kt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:ee(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Wt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?$t.call(this,r[0]):r[0],a=this._reverseSecondPath?$t.call(this,r[1]):r[1];i=te.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},re={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:ee},functions:ne,Util:{l2c:Bt,q2c:Dt,a2c:zt,catmullRom2bezier:Rt,ellipsePath:Ht,path2curve:Wt,pathToAbsolute:qt,toPathString:ee,parsePathString:Nt,getRotatedCurve:te,getRotations:Jt,getRotationSegments:Zt,reverseCurve:$t,getSegments:Gt,createPath:Kt}};function ie(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ae(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=se.call(this,t,ae(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},le={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:oe,Util:{parseStringOrigin:ie,parseTransformString:ae,parseTransformSVG:se}};function ue(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function pe(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var ce=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},ue(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),pe(t,e,i,r))}),r=a)}catch(t){}return i}(),he="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],fe="ontouchstart"in window||navigator&&navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",de=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.getElementsByTagName("HTML")[0],ve=!!ce&&{passive:!1};function ge(t){this.scrolling&&t.preventDefault()}function me(){var t=this.element;return t===de?{el:document,st:document.body}:{el:t,st:t}}function ye(){var t=me.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,ue(t.el,he[0],ge,ve),ue(t.el,fe,ge,ve),t.st.style.pointerEvents="none")}function be(){var t=me.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,pe(t.el,he[0],ge,ve),pe(t.el,fe,ge,ve),t.st.style.pointerEvents="")}var we={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:de,ye.call(this),this.element===de?window.pageYOffset||de.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){be.call(this)}},xe={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:we,Util:{preventScroll:ge,scrollIn:ye,scrollOut:be,scrollContainer:de,passiveHandler:ve,getScrollTargets:me}},Se=["boxShadow","textShadow"];function Me(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=y(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Te(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Ee={};Se.map((function(t){return Ee[t]=Te}));var _e={component:"shadowProperties",properties:Se,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,e){var r=w(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?n[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Me(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Me(e,t));return e},onStart:Ee},Util:{processShadowArray:Me,trueColor:y}},Ce=["fontSize","lineHeight","letterSpacing","wordSpacing"],ke={};function Ie(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}Ce.forEach((function(t){ke[t]=Ie}));var Pe={component:"textProperties",category:"textProps",properties:Ce,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return w(this.element,t)||n[t]},prepareProperty:function(t,e){return m(e)},onStart:ke},Util:{trueDimension:m}};function Oe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Ae(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),je=String("0123456789").split(""),Ve=Le.concat(Ue,je),Re=Ve.concat(Fe),He={alpha:Le,upper:Ue,symbols:Fe,numeric:je,alphanumeric:Ve,all:Re};var Ne={text:function(t){if(!_[t]&&this.valuesEnd[t]){var e=this._textChars,n=e in He?He[e]:e&&e.length?e:He[r.textChars];_[t]=function(t,e,r,i){var a="",s="",o=e.substring(0),l=r.substring(0),u=n[Math.random()*n.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===r?" ":r):" "===r?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===r?" ":r):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===r?" ":r)}}},number:function(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},qe={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:Ne},Util:{charSet:He,createTextTweens:function(t,e,n){if(!t.playing){var r=E.Tween;(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var i=function(t,e){var n=Ae(t,"text-part"),r=Ae(Oe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],p=0;return(u=(u=u.concat(o.map((function(t,e){return n.duration="auto"===n.duration?75*a[e].innerHTML.length:n.duration,n.delay=p,n.onComplete=null,p+=n.duration,new r(t,{text:t.innerHTML},{text:""},n)})))).concat(l.map((function(i,a){return n.duration="auto"===n.duration?75*s[a].innerHTML.length:n.duration,n.delay=p,n.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=n.duration,new r(i,{text:""},{text:s[a].innerHTML},n)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}},Be="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var De={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in e)r[s]="perspective"===s?e[s]:n.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){var a=new Be,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!_[t]&&(_[t]=Be)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}},ze=new Q(K),Xe=new Q(tt),Ye=new Q(at),Qe=new Q(ft),We=new Q(ot),Ke=new Q(Tt),Ge=new Q(yt),$e=new Q(_t),Ze=new Q(Pe),Je=new Q(qe),tn=new Q(De),en=new Q(xe),nn=new Q(_e),rn=new Q(re),an=new Q(Vt),sn=new Q(le);return{Animation:Q,Components:{BackgroundPosition:ze,BorderRadius:Xe,BoxModel:Ye,ColorProperties:Qe,ClipProperty:We,FilterEffects:Ke,HTMLAttributes:Ge,OpacityProperty:$e,TextProperties:Ze,TextWrite:Je,TransformMatrix:tn,ScrollProperty:en,ShadowProperties:nn,SVGCubicMorph:rn,SVGDraw:an,SVGTransform:sn},TweenExtra:B,fromTo:function(t,e,n,r){return r=r||{},new X(H(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new X(H(t),e,e,n)},TweenCollection:D,ProgressBar:z,allFromTo:function(t,e,n,r){return r=r||{},new D(H(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new D(H(t,!0),e,e,n)},Objects:c,Util:p,Easing:R,CubicBezier:V,Render:U,Interpolate:v,Process:M,Internals:j,Selector:H,Version:"2.0.0"}}));
diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js
deleted file mode 100644
index 0d9e0a7..0000000
--- a/src/kute-svg.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// KUTE.js v1.6.6 | © dnp_theme | SVG Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("SVG Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=r.dom,a=r.parseProperty,i=r.prepareStart,s=r.getCurrentStyle,o=(r.truC,r.truD,r.crossCheck),l=e.Interpolate.number,h=(e.Interpolate.unit,e.Interpolate.color,r.defaultOptions),u=null!==new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)&&parseFloat(RegExp.$1);if(!(u&&u<9)){var p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g=e.Interpolate.coords=function(t,e,r,n){for(var a=[],i=0;i>0)/1e3)}return a},f=function(t,e,r){for(var n=[],a=[],i=t.getTotalLength(),s=e.getTotalLength(),o=Math.max(i,s),l=o/r,h=0,u=l*r;(h+=r)1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,s=(100*l(r.s,n.s,a)>>0)/100,o=(100*l(r.e,n.e,a)>>0)/100,h=0-s,u=o+h;t.style.strokeDashoffset=h+"px",t.style.strokeDasharray=(100*(u<1?0:u)>>0)/100+"px, "+i+"px"}),N(this.element,e)},i.draw=function(){return N(this.element)};var S=function(t,e){return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?e.x+parseFloat(t)*e.width/100:parseFloat(t)},E=function(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,a=e.length;n>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(c?"skewX("+(1e3*c>>0)/1e3+")":"")+(v?"skewY("+(1e3*v>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))}),I.call(this,e)},i.svgTransform=function(t,e){var r={},n=E(this.element.getAttribute("transform"));for(var a in e)r[a]=a in n?n[a]:"scale"===a?1:0;return r},o.svgTransform=function(){if(this.options.rpr){var t=this.valuesStart.svgTransform,e=this.valuesEnd.svgTransform,r=I.call(this,E(this.element.getAttribute("transform")));for(var n in r)t[n]=r[n];var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-t.origin[0],-t.origin[1]).translate("translate"in t?t.translate[0]:0,"translate"in t?t.translate[1]:0).rotate(t.rotate||0).skewX(t.skewX||0).skewY(t.skewY||0).scale(t.scale||1).translate(+t.origin[0],+t.origin[1]));t.translate=[i.matrix.e,i.matrix.f];for(var n in t)n in e||(e[n]=t[n])}},this}});
\ No newline at end of file
diff --git a/src/kute-text.min.js b/src/kute-text.min.js
deleted file mode 100644
index 7456047..0000000
--- a/src/kute-text.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// KUTE.js v1.6.6 | © dnp_theme | Text Plugin | MIT-License
-!function(t,e){if("function"==typeof define&&define.amd)define(["./kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("./kute.js"));else{if(void 0===t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),h=String("0123456789").split(""),f=a.concat(l,h),c=(f.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?h:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],x="",b="",d=n.substring(0),C=r.substring(0);x=""!==n?d.substring(d.length,g(i*d.length,d.length)>>0):"",b=C.substring(0,g(i*C.length,C.length)>>0),t.innerHTML=i<1?b+m+x:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
\ No newline at end of file
diff --git a/src/kute.min.js b/src/kute.min.js
index b1fe571..b4bc347 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.6 | © dnp_theme | Core Engine | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t,e="undefined"!=typeof global?global:window,i=e.performance,n=document.body,r=[],s=null,a="length",o="split",u="indexOf",h="options",c="valuesStart",l="valuesEnd",f="element",p="delay",v="repeat",g="yoyo",m="style",w=["color","backgroundColor"],y=["top","left","width","height"],I=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],b=["opacity"],M=w.concat(b,y,I),O={},T=0,k=M[a];T>0||0:t[r]&&e[r]?(100*G(t[r],e[r],i)>>0)/100:null;return n?A(s.r,s.g,s.b):s.a?"rgba("+s.r+","+s.g+","+s.b+","+s.a+")":"rgb("+s.r+","+s.g+","+s.b+")"}),J=U.translate=function(t,e,i,n){var r={};for(var s in e)r[s]=(t[s]===e[s]?e[s]:(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3)+i;return r.x||r.y?"translate("+r.x+","+r.y+")":"translate3d("+r.translateX+","+r.translateY+","+r.translateZ+")"},V=U.rotate=function(t,e,i,n){var r={};for(var s in e)r[s]="z"===s?"rotate("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")":s+"("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")";return r.z?r.z:(r.rotateX||"")+(r.rotateY||"")+(r.rotateZ||"")},tt=U.skew=function(t,e,i,n){var r={};for(var s in e)r[s]=s+"("+(1e3*(t[s]+(e[s]-t[s])*n)>>0)/1e3+i+")";return(r.skewX||"")+(r.skewY||"")},et=U.scale=function(t,e,i){return"scale("+(1e3*(t+(e-t)*i)>>0)/1e3+")"},it={},nt=function(t){for(var e=0;e0)return isFinite(this[h][v])&&this[h][v]--,this[h][g]&&(this.reversed=!this.reversed,ct.call(this)),this._startTime=this[h][g]&&!this.reversed?t+this[h].repeatDelay:t,!0;this[h].complete&&this[h].complete.call(this),pt.call(this);for(var s=0,o=this[h].chain[a];s.99||r<.01?(10*G(i,n,r)>>0)/10:G(i,n,r)>>0)+"px"});var i=C(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===i.u?i.v*this[f][n]/100:i.v},transform:function(t,e){if(W in it||(it[W]=function(t,e,i,n,r,s){t[m][e]=(i.perspective||"")+("translate"in i?J(i.translate,n.translate,"px",r):"")+("rotate"in i?V(i.rotate,n.rotate,"deg",r):"")+("skew"in i?tt(i.skew,n.skew,"deg",r):"")+("scale"in i?et(i.scale,n.scale,r):"")}),/translate/.test(t)){if("translate3d"===t){var i=e[o](","),n=C(i[0]),r=C(i[1],t3d2=C(i[2]));return{translateX:"%"===n.u?n.v*this[f].offsetWidth/100:n.v,translateY:"%"===r.u?r.v*this[f].offsetHeight/100:r.v,translateZ:"%"===t3d2.u?t3d2.v*(this[f].offsetHeight+this[f].offsetWidth)/200:t3d2.v}}if(/^translate(?:[XYZ])$/.test(t)){var s=C(e),u=/X/.test(t)?this[f].offsetWidth/100:/Y/.test(t)?this[f].offsetHeight/100:(this[f].offsetWidth+this[f].offsetHeight)/200;return"%"===s.u?s.v*u:s.v}if("translate"===t){var h,c="string"==typeof e?e[o](","):e,l={},p=C(c[0]),v=c[a]?C(c[1]):{v:0,u:"px"};return c instanceof Array?(l.x="%"===p.u?p.v*this[f].offsetWidth/100:p.v,l.y="%"===v.u?v.v*this[f].offsetHeight/100:v.v):(h=C(c),l.x="%"===h.u?h.v*this[f].offsetWidth/100:h.v,l.y=0),l}}else if(/rotate|skew/.test(t)){if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(t)){var d=C(e,!0);return"rad"===d.u?X(d.v):d.v}if("rotate"===t){var g={},w=C(e,!0);return g.z="rad"===w.u?X(w.v):w.v,g}}else if("scale"===t)return parseFloat(e)},unitless:function(t,e){return!/scroll/.test(t)||t in it?"opacity"===t&&(t in it||(it[t]=L?function(t,e,i,n,r){t[m].filter="alpha(opacity="+(100*G(i,n,r)>>0)+")"}:function(t,e,i,n,r){t[m].opacity=(100*G(i,n,r)>>0)/100})):it[t]=function(t,e,i,n,r){t.scrollTop=G(i,n,r)>>0},parseFloat(e)},colors:function(t,e){return t in it||(it[t]=function(t,e,i,n,r,s){t[m][e]=K(i,n,r,s.keepHex)}),F(e)}},ht=function(t,e){var i="start"===e?this[c]:this[l],n={},r={},s={},a={};for(var o in t)if(-1!==I[u](o)){var h=["X","Y","Z"];if(/^translate(?:[XYZ]|3d)$/.test(o)){for(var f=0;f<3;f++){var p=h[f];/3d/.test(o)?s["translate"+p]=ut.transform.call(this,"translate"+p,t[o][f]):s["translate"+p]="translate"+p in t?ut.transform.call(this,"translate"+p,t["translate"+p]):0}a.translate=s}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(o)){for(var v=/rotate/.test(o)?"rotate":"skew",d="rotate"===v?r:n,g=0;g<3;g++){var m=h[g];void 0!==t[v+m]&&"skewZ"!==o&&(d[v+m]=ut.transform.call(this,v+m,t[v+m]))}a[v]=d}else/(rotate|translate|scale)$/.test(o)&&(a[o]=ut.transform.call(this,o,t[o]));i[W]=a}else-1!==y[u](o)?i[o]=ut.boxModel.call(this,o,t[o]):-1!==b[u](o)||"scroll"===o?i[o]=ut.unitless.call(this,o,t[o]):-1!==w[u](o)?i[o]=ut.colors.call(this,o,t[o]):o in ut&&(i[o]=ut[o].call(this,o,t[o]))},ct=function(){if(this[h][g])for(var t in this[l]){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this[l][t],this[l][t]=e,this[c][t]=this.valuesRepeat[t]}},lt=function(){this[v]>0&&(this[h][v]=this[v]),this[h][g]&&!0===this.reversed&&(ct.call(this),this.reversed=!1),this.playing=!1,q()},ft=function(t){var e=n.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},pt=function(){"scroll"in this[l]&&n.getAttribute("data-tweening")&&n.removeAttribute("data-tweening")},vt=function(){"scroll"in this[l]&&!n.getAttribute("data-tweening")&&n.setAttribute("data-tweening","scroll")},dt=function(t){return"function"==typeof t?t:"string"==typeof t?mt[t]:void 0},gt=function(){var t={},i=S(this[f]),n=["rotate","skew"],r=["X","Y","Z"];for(var s in this[c])if(-1!==I[u](s)){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)t.translate3d=i.translate3d||O[s];else if(a)t[s]=i[s]||O[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var h=0;h<3;h++){var p=n[o]+r[h];-1!==I[u](p)&&p in this[c]&&(t[p]=i[p]||O[p])}}else if("scroll"!==s)if("opacity"===s&&L){var v=Z(this[f],"filter");t.opacity="number"==typeof v?v:O.opacity}else-1!==M[u](s)?t[s]=Z(this[f],s)||d[s]:t[s]=s in at?at[s].call(this,s,this[c][s]):0;else t[s]=this[f]===j?e.pageYOffset||j.scrollTop:this[f].scrollTop;for(var g in i)-1===I[u](g)||g in this[c]||(t[g]=i[g]||O[g]);if(this[c]={},ht.call(this,t,"start"),W in this[l])for(var m in this[c][W])if("perspective"!==m)if("object"==typeof this[c][W][m])for(var w in this[c][W][m])void 0===this[l][W][m]&&(this[l][W][m]={}),"number"==typeof this[c][W][m][w]&&void 0===this[l][W][m][w]&&(this[l][W][m][w]=this[c][W][m][w]);else"number"==typeof this[c][W][m]&&void 0===this[l][W][m]&&(this[l][W][m]=this[c][W][m])},mt=e.Easing={};mt.linear=function(t){return t},mt.easingSinusoidalIn=function(t){return 1-Math.cos(t*Math.PI/2)},mt.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},mt.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},mt.easingQuadraticIn=function(t){return t*t},mt.easingQuadraticOut=function(t){return t*(2-t)},mt.easingQuadraticInOut=function(t){return t<.5?2*t*t:(4-2*t)*t-1},mt.easingCubicIn=function(t){return t*t*t},mt.easingCubicOut=function(t){return--t*t*t+1},mt.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},mt.easingQuarticIn=function(t){return t*t*t*t},mt.easingQuarticOut=function(t){return 1- --t*t*t*t},mt.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},mt.easingQuinticIn=function(t){return t*t*t*t*t},mt.easingQuinticOut=function(t){return 1+--t*t*t*t*t},mt.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},mt.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},mt.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},mt.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},mt.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},mt.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},mt.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},mt.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},mt.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},mt.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)},mt.easingElasticIn=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,-i*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4))},mt.easingElasticOut=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,i*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/.4)+1)},mt.easingElasticInOut=function(t){var e,i=.1;return 0===t?0:1===t?1:(!i||i<1?(i=1,e=.1):e=.4*Math.asin(1/i)/Math.PI*2,(t*=2)<1?i*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*-.5:i*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/.4)*.5+1)},mt.easingBounceIn=function(t){return 1-mt.easingBounceOut(1-t)},mt.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},mt.easingBounceInOut=function(t){return t<.5?.5*mt.easingBounceIn(2*t):.5*mt.easingBounceOut(2*t-1)+.5};var wt=function(t,e,i,n){this[f]="scroll"in i&&(void 0===t||null===t)?j:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this[h]={};for(var r in n)this[h][r]=n[r];if(this[h].rpr=n.rpr||!1,this.valuesRepeat={},this[l]={},this[c]={},ht.call(this,i,"end"),this[h].rpr?this[c]=e:ht.call(this,e,"start"),void 0!==this[h].perspective&&W in this[l]){var s="perspective("+parseInt(this[h].perspective)+"px)";this[l][W].perspective=s}for(var a in this[l])a in ot&&!this[h].rpr&&ot[a].call(this);this[h].chain=[],this[h].easing=dt(n.easing)||mt[x.easing]||mt.linear,this[h][v]=n[v]||x[v],this[h].repeatDelay=n.repeatDelay||x.repeatDelay,this[h][g]=n[g]||x[g],this[h].duration=n.duration||x.duration,this[h][p]=n[p]||x[p],this[v]=this[h][v]},yt=(wt.prototype={start:function(t){vt.call(this),this[h].rpr&>.apply(this),st.apply(this);for(var e in this[l])e in ot&&this[h].rpr&&ot[e].call(this),this.valuesRepeat[e]=this[c][e];return r.push(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||i.now(),this._startTime+=this[h][p],this._startFired||(this[h].start&&this[h].start.call(this),this._startFired=!0),!s&&nt(),this},play:function(){return this.paused&&this.playing&&(this.paused=!1,this[h].resume&&this[h].resume.call(this),this._startTime+=i.now()-this._pauseTime,B(this),!s&&nt()),this},resume:function(){return this.play()},pause:function(){return!this.paused&&this.playing&&($(this),this.paused=!0,this._pauseTime=i.now(),this[h].pause&&this[h].pause.call(this)),this},stop:function(){return!this.paused&&this.playing&&($(this),this.playing=!1,this.paused=!1,pt.call(this),this[h].stop&&this[h].stop.call(this),this.stopChainedTweens(),lt.call(this)),this},chain:function(){return this[h].chain=arguments,this},stopChainedTweens:function(){for(var t=0,e=this[h].chain[a];t0?i[p]+(i.offset||x.offset):i[p],this.tweens.push(bt(t[r],e,n[r]))}),It=function(t,e,i,n){this.tweens=[];for(var r=[],s=0,o=t[a];s0?n[p]+(n.offset||x.offset):n[p],this.tweens.push(Mt(t[s],e,i,r[s]))},bt=(yt.prototype=It.prototype={start:function(t){t=t||i.now();for(var e=0,n=this.tweens[a];e>0)/1e3;return n}},C=function(e){t.push(e)},A=function(e){var r=t.indexOf(e);-1!==r&&t.splice(r,1)},I=0;function M(e){for(var r=0;r(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var H={linear:new F(0,0,1,1,"linear"),easingSinusoidalIn:new F(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new F(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new F(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new F(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new F(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new F(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new F(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new F(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new F(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new F(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new F(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new F(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new F(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new F(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new F(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new F(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new F(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new F(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new F(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new F(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new F(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new F(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new F(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new F(.68,-.55,.265,1.55,"easingBackInOut")};function N(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof H[t])return H[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new F(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),H.linear};var V=function(t,e,r,n){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,n=n||{},this._resetStart=n.resetStart||0,this._easing="function"==typeof n.easing?n.easing:p.processEasing(n.easing),this._duration=n.duration||i.duration,this._delay=n.delay||i.delay,n){var s="_"+a;s in this||(this[s]=n[a])}var o=this._easing.name;return u[o]||(u[o]=function(t){!x[t]&&t===this._easing.name&&(x[t]=this._easing)}),this};V.prototype.start=function(t){if(C(this),this.playing=!0,this._startTime=t||x.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),u)if("function"==typeof u[e])u[e].call(this,e);else for(var r in u[e])u[e][r].call(this,r);P.call(this),this._startFired=!0}return!I&&M(),this},V.prototype.stop=function(){return this.playing&&(A(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},V.prototype.close=function(){for(var t in l)for(var e in l[t])l[t][e].call(this,e);this._startFired=!1,O.call(this)},V.prototype.update=function(t){var e,r;if((t=void 0!==t?t:x.Time())1?1:e,r=this._easing(e),this.valuesEnd)x[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},S.Tween=V,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var X=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(b.call(this,a,"end"),this._resetStart?this.valuesStart=n:b.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,y.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=x.Time()-this._pauseTime,C(this),!I&&M()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(A(this),this.paused=!0,this._pauseTime=x.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:x.Time())1?1:e,r=this._easing(e),this.valuesEnd)x[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(V);S.Tween=X;var z=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0);var s=S.Tween;(n=n||{}).delay=n.delay||i.delay;var o=[];return Array.from(t).map((function(t,l){o[l]=n||{},o[l].delay=l>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new s(t,e,r,o[l])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};z.prototype.start=function(t){return t=void 0===t?x.Time():t,this.tweens.map((function(e){return e.start(t)})),this},z.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},z.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},z.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},z.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof z)e.chain(t.tweens);else{if(!(t instanceof S))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},z.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},z.prototype.removeTweens=function(){this.tweens=[]},z.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=S.Tween;var B=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};B.prototype.setComponent=function(t){var e=t.component,h={prepareProperty:s,prepareStart:a,onStart:u,onComplete:l,crossCheck:o},f=t.category,d=t.property,v=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(r[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)n[d]=t.defaultValue,this.supports=d+" property";else if(t.defaultValues){for(var g in t.defaultValues)n[g]=t.defaultValues[g];this.supports=(v||d)+" "+(d||f)+" properties"}if(t.defaultOptions)for(var m in t.defaultOptions)i[m]=t.defaultOptions[m];if(t.functions)for(var y in h)if(y in t.functions)if("function"==typeof t.functions[y])!h[y][e]&&(h[y][e]={}),!h[y][e][f||d]&&(h[y][e][f||d]=t.functions[y]);else for(var b in t.functions[y])!h[y][e]&&(h[y][e]={}),!h[y][e][b]&&(h[y][e][b]=t.functions[y][b]);if(t.Interpolate){for(var w in t.Interpolate){var T=t.Interpolate[w];if("function"!=typeof T||E[w])for(var S in T)"function"!=typeof T[S]||E[w]||(E[w]=T[S]);else E[w]=T}c[e]=t.Interpolate}if(t.Util)for(var x in t.Util)!p[x]&&(p[x]=t.Util[x]);return this};var R=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],Y={};function Q(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(e,r,n,i){e.style[t]=(i>.99||i<.01?(10*_(r,n,i)>>0)/10:_(r,n,i)>>0)+"px"})}R.map((function(t){return Y[t]=0}));var K={};R.map((function(t){return K[t]=Q}));var W={component:"boxModelProps",category:"boxModel",properties:R,defaultValues:Y,Interpolate:{numbers:_},functions:{prepareStart:function(t){return m(this.element,t)||n[t]},prepareProperty:function(t,e){var r=d(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:K}};function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?_(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*_(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=W;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],G={};function $(t){this.valuesEnd[t]&&!x[t]&&(x[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){G[t]="#000"}));var J={};q.map((function(t){return J[t]=$}));var tt={component:"colorProps",category:"colors",properties:q,defaultValues:G,Interpolate:{numbers:_,colors:Z},functions:{prepareStart:function(t,e){return m(this.element,t)||n[t]},prepareProperty:function(t,e){return v(e)},onStart:J},Util:{trueColor:v}};e.ColorProperties=tt;var et=["fill","stroke","stop-color"],rt={};function nt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var it={prepareStart:function(t,e){var r={};for(var n in e){var i=nt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=et.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=nt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(et.includes(a))u.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=v(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var l=d(o).u||d(e[i]).u,c=/%/.test(l)?"_percent":"_"+l;u.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*_(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=d(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(u.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*_(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!x[t]&&this.valuesEnd[t]&&(x[t]=function(t,e,r,n){for(var i in r)x.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!x[t]&&this.valuesEnd.attr&&(x[t]=rt)}}},at={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:_,colors:Z},functions:it,Util:{replaceUppercase:nt,trueColor:v,trueDimension:d}};e.HTMLAttributes=at;var st={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(e,r,n,i){e.style[t]=(1e3*_(r,n,i)>>0)/1e3})}},ot={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:_},functions:st};function lt(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function ut(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ft=String("0123456789").split(""),dt=ct.concat(pt,ft),vt=dt.concat(ht),gt={alpha:ct,upper:pt,symbols:ht,numeric:ft,alphanumeric:dt,all:vt};var mt={text:function(t){if(!x[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in gt?gt[e]:e&&e.length?e:gt[i.textChars];x[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(t,e,r,n){t.innerHTML=_(e,r,n)>>0})}},yt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:_},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:mt},Util:{charSet:gt,createTextTweens:function(t,e,r){if(!t.playing){var n=S.Tween;(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var i=function(t,e){var r=ut(t,"text-part"),n=ut(lt(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],c=0;return(u=(u=u.concat(o.map((function(t,e){return r.duration="auto"===r.duration?75*a[e].innerHTML.length:r.duration,r.delay=c,r.onComplete=null,c+=r.duration,new n(t,{text:t.innerHTML},{text:""},r)})))).concat(l.map((function(i,a){return r.duration="auto"===r.duration?75*s[a].innerHTML.length:r.duration,r.delay=c,r.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,c+=r.duration,new n(i,{text:""},{text:s[a].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function bt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function wt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function Tt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function St(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function xt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function _t(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function Et(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=yt;var Ct={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=g(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!x[t]&&this.valuesEnd[t]&&(x[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?bt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?wt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?St(r.translate,n.translate,"px",i):"")+(r.rotate3d?Tt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?xt(r.rotate,n.rotate,"deg",i):"")+(r.skew?_t(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?Et(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:bt,translate3d:wt,rotate3d:Tt,translate:St,rotate:xt,scale:Et,skew:_t}};function At(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function It(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Ct;var Mt=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},At(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),It(t,e,i,n))}),n=a)}catch(t){}return i}(),kt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],Ot="ontouchstart"in window||navigator&&navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Pt=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.getElementsByTagName("HTML")[0],Lt=!!Mt&&{passive:!1};function jt(t){this.scrolling&&t.preventDefault()}function Ut(){var t=this.element;return t===Pt?{el:document,st:document.body}:{el:t,st:t}}function Ft(){var t=Ut.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,At(t.el,kt[0],jt,Lt),At(t.el,Ot,jt,Lt),t.st.style.pointerEvents="none")}function Ht(){var t=Ut.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,It(t.el,kt[0],jt,Lt),It(t.el,Ot,jt,Lt),t.st.style.pointerEvents="")}var Nt={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Pt,Ft.call(this),this.element===Pt?window.pageYOffset||Pt.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(t,e,r,n){t.scrollTop=_(e,r,n)>>0})},onComplete:function(t){Ht.call(this)}},Vt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:_},functions:Nt,Util:{preventScroll:jt,scrollIn:Ft,scrollOut:Ht,scrollContainer:Pt,passiveHandler:Lt,getScrollTargets:Ut}};e.ScrollProperty=Vt;var Xt=function(t,e){return parseFloat(t)/100*e},zt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Dt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*_(e.s,r.s,n)>>0)/100,s=(100*_(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var Zt={prepareStart:function(){return Kt(this.element)},prepareProperty:function(t,e){return Kt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(t,e,r,n){return Wt(t,e,r,n)})}},qt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:_,paintDraw:Wt},functions:Zt,Util:{getRectLength:zt,getPolyLength:Dt,getLineLength:Bt,getCircleLength:Rt,getEllipseLength:Yt,getTotalLength:Qt,getDraw:Kt,percent:Xt}};function Gt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=qt;var $t="Invalid path value";function Jt(t){return"number"==typeof t&&isFinite(t)}function te(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function ee(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function re(t,e){return te(t,e)<1e-9}var ne={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},ie=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ae(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&ie.indexOf(t)>=0}function se(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function oe(t){return 97==(32|t)}function le(t){return t>=48&&t<=57}function ue(t){return t>=48&&t<=57||43===t||45===t||46===t}function ce(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function pe(t){for(;t.index=i)t.err="KUTE.js - "+$t;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=ne[r]&&(t.result.push([e].concat(n.splice(0,ne[r]))),ne[r]););}function ve(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=oe(e=t.path.charCodeAt(t.index)),se(e))if(i=ne[t.path[t.index].toLowerCase()],t.index++,pe(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?fe(t):he(t),t.err.length)return;t.data.push(t.param),pe(t),n=!1,t.index=t.max)break;if(!ue(t.path.charCodeAt(t.index)))break}}de(t)}else de(t);else t.err="KUTE.js - "+$t}function ge(t){var e=new ce(t),r=e.max;for(pe(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=ee(n,i,.5),t.splice(r+1,0,i)}function Ie(t,e){var r,n;if("string"==typeof t){var i=be(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError($t);if(!Me(r=t.slice(0)))throw new TypeError($t);return r.length>1&&re(r[0],r[r.length-1])&&r.pop(),Ee(r)>0&&r.reverse(),!n&&e&&Jt(e)&&e>0&&Ae(r,e),r}function Me(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Jt(t[0])&&Jt(t[1])}))}function ke(t,e,r){var n=Ie(t,r=r||i.morphPrecision),a=Ie(e,r),s=n.length-a.length;return Ce(n,s<0?-1*s:0),Ce(a,s>0?s:0),xe(n,a),[n,a]}me.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},me.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var Oe={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?N(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!x[t]&&this.valuesEnd[t]&&(x[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Gt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=ke(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},Pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Gt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:Oe,Util:{INVALID_INPUT:$t,isFiniteNumber:Jt,distance:te,pointAlong:ee,samePoint:re,paramCounts:ne,SPECIAL_SPACES:ie,isSpace:ae,isCommand:se,isArc:oe,isDigit:le,isDigitStart:ue,State:ce,skipSpaces:pe,scanFlag:he,scanParam:fe,finalizeSegment:de,scanSegment:ve,pathParse:ge,SvgPath:me,split:ye,pathStringToRing:be,exactRing:we,approximateRing:Te,measure:Se,rotateRing:xe,polygonLength:_e,polygonArea:Ee,addPoints:Ce,bisect:Ae,normalizeRing:Ie,validRing:Me,getInterpolationPoints:ke}};function Le(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function je(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=Ue.call(this,t,je(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},He={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:_},functions:Fe,Util:{parseStringOrigin:Le,parseTransformString:je,parseTransformSVG:Ue}};for(var Ne in e.SVGTransformProperty=He,e){var Ve=e[Ne];e[Ne]=new B(Ve)}return{Animation:B,Components:e,Tween:X,fromTo:function(t,e,r,n){return n=n||{},new D(N(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new D(N(t),e,e,r)},TweenCollection:z,allFromTo:function(t,e,r,n){return n=n||{},new z(N(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new z(N(t,!0),e,e,r)},Objects:h,Util:p,Easing:H,CubicBezier:F,Render:L,Interpolate:E,Process:w,Internals:U,Selector:N,Version:"2.0.0"}}));
diff --git a/src/polyfill.min.js b/src/polyfill.min.js
new file mode 100644
index 0000000..b279d33
--- /dev/null
+++ b/src/polyfill.min.js
@@ -0,0 +1,2 @@
+"use strict";
+if(window.addEventListener&&Window.prototype.addEventListener||(window.addEventListener=Window.prototype.addEventListener=Document.prototype.addEventListener=Element.prototype.addEventListener=function(){var e=this,t=arguments[0],n=arguments[1];e._events||(e._events={}),e._events[t]||(e._events[t]=function(t){var n,o=e._events[t.type].list,i=o.slice(),r=-1,a=i.length;for(t.preventDefault=function(){!1!==t.cancelable&&(t.returnValue=!1)},t.stopPropagation=function(){t.cancelBubble=!0},t.stopImmediatePropagation=function(){t.cancelBubble=!0,t.cancelImmediate=!0},t.currentTarget=e,t.relatedTarget=t.fromElement||null,t.target=t.target||t.srcElement||e,t.timeStamp=(new Date).getTime(),t.clientX&&(t.pageX=t.clientX+document.documentElement.scrollLeft,t.pageY=t.clientY+document.documentElement.scrollTop);++r
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    Getting Started with KUTE.js | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-
-            
    Getting Started
    
-            
    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 detail. KUTE.js can be found on 
-                CDN and also npm and Bower repositories with all it's features and tools.
    
-
-            
    Bower and NPM
    
-            
    You can install KUTE.js package by using either Bower or NPM.
    
-            
    $ npm install --save kute.js
-# Or
-$ bower install --save kute.js
-
    
-
-            
    Require and CommonJS
    
-            
    // CommonJS style
-var kute = require("kute.js"); //grab the core
-require("kute.js/kute-svg"); // Add SVG Plugin
-require("kute.js/kute-css"); // Add CSS Plugin
-require("kute.js/kute-attr"); // Add Attributes Plugin
-require("kute.js/kute-text"); // Add Text Plugin
-
    
-
-            
    // AMD style
-define([
-    "kute.js",
-    "kute.js/kute-svg.js", // optional for SVG morph, draw and other SVG related CSS
-    "kute.js/kute-css.js", // optional for additional CSS properties
-    "kute.js/kute-attr.js", // optional for animating presentation attributes
-    "kute.js/kute-text.js" // optional for string write and number incrementing animations
-], function(KUTE){
-    // ...
-});
-
    
-
-            
    Websites
    
-            
    In your website add the following code, the best would be to put it at the end of your body tag:
    
-            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute.min.js"></script> <!-- core KUTE.js -->
    
-            
    An alternate CDN link here:
    
-            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute.min.js"></script> <!-- core KUTE.js -->
    
-
-            
    The CDN repositories receive latest updates here and right here. 
-                You might also want to include the tools that you need for your project:
    
-            
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->
-
    
-            
    Alternate CDN links:
    
-            
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-css.min.js"></script> <!-- CSS Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-svg.min.js"></script> <!-- SVG Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-text.min.js"></script> <!-- Text Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.5/kute-attr.min.js"></script> <!-- Attributes Plugin -->
-
    
-            
    Your awesome animation coding would follow after these script links.
    
-
-            
    Targeting Legacy Browsers
    
-            
    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 transform property or 
-                RGBA colors while IE9 can only do 2D transformations. Check the 2D transforms and the 
-                3D transforms browser support list for more information.
    
-            
    Don't use Modernizr, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and 
-                here is the full refference on that. For other legacy browsers there is a ton of ways 
-                to target them, quite efficiently I would say: there you go.
    
-
-
-            
-
-        
    
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-
-    
-    
-    
-    
-
-
-
diff --git a/svg.html b/svg.html
deleted file mode 100644
index 4492a3d..0000000
--- a/svg.html
+++ /dev/null
@@ -1,596 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js SVG Plugin | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-            
    SVG Plugin
    
-            
    The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, SVG morphing of path shapes and SVG transforms. We'll dig into this in great detail as well as provide valuable tips on how to
-                configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.
    
-            
    Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG so make sure to fiter out your SVG
-                tweens.
    
-            
    SVG Morphing
    
-            
    One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <path> and <glyph> SVG elements, with closed shapes (their d attribute ends with z).
-                On initialization or animation start, depending on the chosen KUTE.js method, it will sample a number of points along the two paths based on a default /
-                given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect
-                of the morph:
    
-            
      
-                
    • morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 15 but the
-                    D3.js example uses 4.
      • 
-                
    • morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is
-                    not set.
      • 
-                
    • reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape. By default this option is false.
      • 
-                
    • reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape. By default this option is also false.
      • 
-            
    
-            
    Basic Example
    
-            
    In the first morph example we are going to go through some basic steps on how to setup and how to improve the morph animation. Our demo is a morph from a rectangle into a star, so first let's create an SVG element with two paths, first is
-                going to be visible, filled with color, while second is going to be hidden. The first path is the start shape and the second is the end shape, you guessed it, and we can also add some ID to the paths so we can easily target them with our
-                code.
    
-            
    <svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
-    <path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
-    <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
-</svg>
-
    
-            
    Now we can apply both .to() and fromTo() methods:
    
-            
    // the fromTo() method
-var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
-
-// OR
-
-// the to() method will take the path's d attribute value and use it as start value
-var tween = KUTE.to('#rectangle', { path: '#star' }).start();
-
-// OR
-
-// simply pass in a valid path string without the need to have two paths in your SVG
-var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
-
    
-
-            
    For all the above tween objects the animation should look like this:
    
-
-            
    
-                
-              
-              
-          
-                
    
-                    Start
-                
    
-            
    
-
-            
    As you can see, the animation could need some fine tunning. Let's go ahead and play with the new utility, it's gonna make your SVG morph work a breeze.
    
-
-            
    Well, we're going to set the morphIndex: 127 tween option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values 
-                around the recommended one. I also made a pen for you to play with.
    
-            
    
-                
-                    
-                    
-                
-
-                
    
-                    Start
-                
    
-            
    
-            
    Much better! You can play with the morphIndex value, maybe you can get a more interesting morph.
    
-
-            
    Morphing Polygon Paths
    
-            
    When your paths are only lineto, vertical-lineto and horizontal-lineto based shapes (the d attribute consists of L, V and 
-                H path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The 
-                morphPrecision option will not apply since the paths are already polygons, still you will have access to all the other options.
    
-            
    The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative v and h path commands. I highly 
-                recommend using my utility converter to prepare your paths in that case.
    
-
-            
    // let's morph a triangle into a star
-var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
-
-// or same path into a square
-var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
-
    
-
-            
    In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each 
-                tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.
    
-            
-            
    
-
-                
-
-                    
-
-                    
-                    
-
-                    
-
-                    
-                
-
-                
    
-                    Start
-                
    
-            
    
-            
    The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only L path command will make sure to prevent value processing 
-                and allow the animation to start as fast as possible.
    
-
-
-            
    Multi Path Example
    
-            
    In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:
    
-            
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
-<path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096  c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z
-    M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z
-    M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z
-    M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
-<path d="M0.175 256l-0.175-156.037 192-26.072v182.109z
-    M224 69.241l255.936-37.241v224h-255.936z
-    M479.999 288l-0.063 224-255.936-36.008v-187.992z
-    M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
-</svg>
-
    
-            
    As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.
    
-
-
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
-    <path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
-    <path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
-    <path id="w13" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
-    <path id="w14" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
-
-    <path id="w21" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
-    <path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
-    <path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
-    <path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
-</svg>
-
    
-            
    After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: #w11 
-                to #w24, #w13 to #w21, #w14 to #w22 and #w12 to #w23.
    
-            
    Now we can write the tween objects and get to working:
    
-
-
    var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
-var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
-var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
-var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
-
    
-
-            
    As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:
    
-
-            
    
-                
-                    
-                    
-                    
-                    
-
-                    
-                    
-                    
-                    
-                
-
-                
    
-                    Start
-                
    
-            
    
-            
    Note that this final touch required using reverseSecondPath:true option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to 
-                check the svg.js for a full code review.
    
-
-            
    Complex Example
    
-            
    The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant 
-                differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure 
-                the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.
    
-            
    An important aspect of multi path morph is syncronization: since the .to() method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, 
-                the problem can be easily solved as always using the .fromTo() method. So, let's get into it:
    
-
-            
    // complex multi morph, the paths should be self explanatory
-var morph1 = KUTE.fromTo('#start-container',  { path: '#start-container' },    { path: '#end-container' });
-var morph2 = KUTE.fromTo('#startpath1',       { path: '#startpath1' },         { path: '#endpath1' });
-var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' },   { path: '#endpath1' });
-var morph4 = KUTE.fromTo('#startpath2',       { path: '#startpath2' },         { path: '#endpath2' });
-
    
-            
    As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next 
-                example, we have used a mask where we included the subpaths of both start and end shape, just to get the same visual as the originals.
    
-            
    
-                
-                
-                    
-                        
-                        
-                        
-                        
-                        
-                        
-                        
-                    
-                
-                
-                
-            
-
-                
    
-                    Start
-                
    
-            
    
-            
    So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates 
-                for tween, it's super light, it's a lighter script, it might be a better solution for your applications.
    
-
-            
    Recommendations
    
-            
      
-                
    • The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.
      • 
-                
    • When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the 
-                    overal animation performance, don't forget about mobile devices.
      • 
-                
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays 
-                    you can get quite comfortable with almost any value, including the default value.
      • 
-                
    • Polygons with only lineto path commands are best for performance.
      • 
-                
    • Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.
      • 
-                
    • Don't forget about the path morph utility, it's gonna make your work a lot easier.
      • 
-                
    • The SVG morph performance is the same for both .to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared 
-                    already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() 
-                    based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will 
-                    be delayed.
      • 
-            
    
-
-            
    Drawing Stroke
    
-            
    Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <path> shapes, <circle>, <ellipse>, <rect>,
-                 <line>, <polyline> and <polygon> shapes are also supported; the script uses the SVG standard .getTotalLength() method for <path> 
-                 shapes, while the others use some helper methods. Here some code examples:
    
-
-            
    // draw the stroke from 0-10% to 90-100%
-var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
-
-// draw the stroke from zero to full path length
-var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
-
-// draw the stroke from full length to 50%
-var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
-
    
-
-            
    We're gonna chain these tweens and start the animation real quick.
    
-            
    
-                
-                
-                
-                
-                
-                
-            
-                
    
-                    Start
-                
    
-            
    
-            
    Remember: the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% as start value for your 
-                tweens when stroke-dasharray and stroke-dashoffset are not set.
    
-
-            
    SVG Transforms
    
-            
    Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve 
-                most browser inconsistencies. A very simple roadmap was described here; in brief we needed to find a way to enable SVG transforms 
-                in a reliable and cross-browser supported fashion.
    
-            
    With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the transformOrigin just like for CSS3 transforms and secondly the unique 
-                way to normalize translation to work with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with 
-                the working draft.
    
-            
    While you can still use regular CSS3 transforms for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based 
-                transform-origin values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements.
    
-            
    KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the transform presentation attribute and the 
-                svgTransform tween property with a special notation:
    
-
-            
    // using the svgTransform property works in all SVG enabled browsers
-var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }});
-
-// regular CSS3 transforms apply to SVG elements but not all browsers fully/partially supported
-var tween1 = KUTE.to('shape', { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }, { transformOrigin: '50% 50%' });
-
    
-
-            
    As you can see we have some familiar notation, but an important notice here is that svgTransform tween property treat all SVG transform functions as if you are using the 
-                50% 50% of the shape box at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.
    
-            
    Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the transform attribute accepts no measurement units such as degrees 
-                or pixels. For these reasons the transformOrigin tween option can also accept array values just in case you need coordinates relative to the parent <svg> element. Also values 
-                like top left values will work.
    
-            
    In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as svgTransform based animations (RIGHT). I highly encourage you 
-                to test all of them in all browsers, and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.
    
-
-            
    SVG Rotation
    
-            
    Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the svgTransform will only accept single value 
-                for the angle value rotate: 45, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a transformOrigin 
-                tween option to override the behavior.
    
-            
    The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. 
-                Let's have a look at a quick demo:
    
-
-            
    
-                
-                    
-                    
-                
-
-                
    
-                    Start
-                
    
-            
    
-            
    The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set transformOrigin option to 50% 50%, but this 
-                animation doesn't work in IE browsers, while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the rotate: 360 notation and the animation shows the shape rotating 
-                around it's own central point and without any option, an animation that DO WORK in all SVG enabled browsers.
    
-            
    When for CSS3 transforms we could have used values such as center bottom as transform-origin (also not supported in all modern browsers for SVGs), the entire processing was basically in/by 
-                the browser, however when it comes to SVGs the plugin here will compute the transformOrigin tween setting value accordingly to use a shape's .getBBox() value to determine for instance 
-                the coordinates for 25% 75% position or center top.
    
-
-            
    In other cases you may want to rotate shapes around the center point of the parent <svg> or <g> element, and we use it's .getBBox() to determine the 50% 50% 
-                coordinate, so here's how to deal with it:
    
-
-
    // rotate around parent svg's "50% 50%" coordinate as transform-origin
-// get the bounding box of the parent element
-var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent <svg> element
-
-// we need to know the current translate position of the element [x,y]
-// in our case is:
-var translation = [580,0];
-
-// determine the X point of transform-origin for 50%
-var svgOriginX = svgBB.width * 50 / 100 - translation[0];
-
-// determine the Y point of transform-origin for 50%
-var svgOriginY = svgBB.height * 50 / 100 - translation[1];
-
-// set your rotation tween with "50% 50%" transform-origin of the parent <svg> element
-var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformOrigin: [svgOriginX, svgOriginY]} );
-
    
-
-            
    
-                
-                    
-                    
-                
-
-                
    
-                    Start
-                
    
-            
    
-            
    Note that this is the only SVG transform example in which we have adapted the transform-origin for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are 
-                interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check svg.js file.
    
-
-            
    SVG Translation
    
-            
    In this example we'll have a look at translations, so when setting translate: [150,0], the first value is X (horizontal) coordinate to which the shape will translate to and the second value is 
-                Y (vertical) coordinate for translation. When translate: 150 notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements 
-                transformation. Let's have a look at a quick demo:
    
-            
-            
    
-                
-                    
-                    
-                
-
-                
    
-                    Start
-                
    
-            
    
-            
    The first tween uses the CSS3 translate: 580 notation for the end value, while the second tween uses the translate: [0,0] as svgTransform value. 
-                For the second example the values are unitless and are relative to the viewBox attribute.
    
-
-            
    SVG Skew
    
-            
    For skews for SVGs we have a very simple notation: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:
    
-            
    
-                
-                
-                
-            
-
-                
    
-                    Start
-                
    
-            
    
-            
    The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the svgTransform tween 
-                property. You will notice translation kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via transform attribute works just 
-                as for the CSS3 transformations.
    
-
-            
    SVG Scaling
    
-            
    Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, 
-                to keep it simple and even if SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to 
-                make the animation look as we would expect. A quick demo:
    
-            
    
-                
-                    
-                    
-                
-
-                
    
-                    Start
-                
    
-            
    
-            
    The first tween scales the shape at scale: 1.5 via regular CSS3 transforms, and the second tween scales down the shape at scale: 0.5 value via svgTransform. 
-                If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected 50% 50% value. A similar case as with the skews.
    
-
-            
    SVG Mixed Transform Functions
    
-            
    Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation transform-origin to make it look as you would expect it 
-                from regular HTML elements. Let's combine 3 functions at the same time and see what happens:
    
-            
    
-                
-                
-                
-            
-
-                
    
-                    Start
-                
    
-            
    
-            
    Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. If you inspect the elements, you will notice the second shape's translation is 
-                different from what we've set in the tween object, and this is to keep transform-origin at an expected 50% 50% value. This means that the plugin will also compensate rotation transform origin 
-                when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.
    
-
-            
    Chained SVG transforms
    
-            
    The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom transform-origin, 
-                it should look like this:
    
-
-
    <svg>
-    <circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20"></circle>
-</svg>
-
    
-
-            
    Well in this case I would recommend using the values of the first translation as transform-origin for your tween built with the .fromTo() method like so:
    
-            
    // a possible workaround for animating a SVG element that uses chained transform functions
-KUTE.fromTo(element,
-    {svgTransform : { translate: 0, rotate: 45, scale: 0.5 }}, // we asume the current translation is zero on both X & Y axis
-    {svgTransform : { translate: 450, rotate: 0, scale: 1.5 }}, // we will translate the X to a 450 value and scale to 1.5
-    {transformOrigin: [256,256]} // tween options use the transform-origin of the target SVG element
-).start();
-
    
-            
    Before you hit the Start button, make sure to check the transform attribute value. The below tween will reset the element's transform attribute to original value when the animation is complete.
    
-            
    
-                
-                
-            
-
-                
    
-                    Start
-                
    
-            
    
-            
    This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.
    
-
-            
    Recommendations for SVG Transforms
    
-            
      
-                
    • The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and always uses same order of transform functions: translate, 
-                    rotate, skewX, skewY and scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.
      • 
-                
    • Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.
      • 
-                
    • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
      • 
-                
    • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible 
-                    or some browser specific tricks if that is the case.
      • 
-                
    • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most 
-                    Internet Explorer versions simply don't work. You might want to check this tutorial.
      • 
-                
    • Similar to the CSS3 transform animation featured in the core engine, the svgTransform property DOES stack transform functions for chained tween objects created with the 
-                    .to() method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all 
-                    the properties and I highly recommend checking the example code for skews in the svg.js file.
      • 
-                
    • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
      • 
-                
    • Also the svgTransform tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.
      • 
-            
    
-
-
-            
    SVG Plugin Tips
    
-            
      
-                
    • The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.
      • 
-                
    • Since SVG morph scripting works only with path or glyph elements, you might need a convertToPath feature, so 
-                    check this out.
      • 
-            
    
-
-        
    
-
-        
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-
-
-
diff --git a/svgCubicMorph.html b/svgCubicMorph.html
new file mode 100644
index 0000000..00f3daa
--- /dev/null
+++ b/svgCubicMorph.html
@@ -0,0 +1,356 @@
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js SVG Cubic Morph
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    SVG Cubic Morph
    
+          
    The component that also covers SVG morphing, with similar functionality as for the SVG Morph component, but with a different 
+              implementation for value processing and animation setup.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate SVG paths with cubic-bezier path commands and improved performance.
    
+              
    
+              
    
+                
    The KUTE.js SVG Cubic Morph component enables animation for the d (description) presentation attribute and is the latest in all the SVG 
+                    components.
    
+                
    The main difference with the other SVG Morph component is the fact that this time we're using some path processing scripts borrowed from 
+                    Raphael.js and other libraries to convert all path commands into cubic-bezier path commands.
    
+                
    This component will process paths and out of the box will provide the closest possible interpolation by default. It comes with two tween options to help you manage the morphing
+                    animation in certain conditions:
    
+              
    
+          
    
+
+          
    
+              
    
+                  
    Options
    
+                  
    A series of familiar options to optimize the animation for every situation.
    
+              
    
+              
    
+                
    To enhance processing and improve the morphing animation, in certain cases you will need to control the outcome via two options
+                    to reverse paths.
    
+                
      
+                  
    • reverseFirstPath: FALSE when is TRUE you will reverse the FIRST shape. By default this option is false.
      • 
+                  
    • reverseSecondPath: FALSE when is TRUE you will reverse the SECOND shape. By default this option is also false.
      • 
+                
    
+              
    
+            
    
+          
    
+        
    
+
+
+        
    
+
+            
    Basic Example
    
+            
    The first morphing animation example is a transition from a rectangle into a star, just like for the other component.
    
+
+
    <svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+    <path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
+    <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
+</svg>
+
    
+
+            
    Now we can apply both .to() and fromTo() methods:
    
+
+
    // the fromTo() method
+var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
+// OR
+// the to() method will take the path's d attribute value and use it as start value
+var tween = KUTE.to('#rectangle', { path: '#star' }).start();
+// OR
+// simply pass in a valid path string without the need to have two paths in your SVG
+var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
+
    
+
+            
    By default, the component will process the paths as authered and deliver its best without any option required, like for the first red rectangle below which applies to any of the above invocations:
    
+
+            
    
+                
+                    
+                    
+                
+                
+                    
+                    
+                
+                
    
+                    Start
+                
    
+            
    
+
+            
    The second blue shape and its corresponding end shape have been edited by adding additional curve points using a vector graphics editor to match the amount of points in both shapes as well as to optimize their travel
+                distance during the animation. You can use the same technique on your shapes to control the animation to your style.
    
+            
    Chris Coyier wrote an excelent article to explain how SVG morphing animation works, it should give you a pretty good idea on the concept, terminology.
    
+
+            
    Subpath Example
    
+            
    In other cases, you may want to morph paths that have subpaths. Let's have a look at the following SVG:
    
+
+
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path id="w1" d="M412.23 511.914c-47.708-24.518-94.086-36.958-137.88-36.958-5.956 0-11.952 0.18-17.948 0.708-55.88 4.624-106.922 19.368-139.75 30.828-8.708 3.198-17.634 6.576-26.83 10.306l-89.822 311.394c61.702-22.832 116.292-33.938 166.27-33.938 80.846 0 139.528 30.208 187.992 61.304 22.962-77.918 78.044-266.09 94.482-322.324-11.95-7.284-24.076-14.57-36.514-21.32z 
+    m116.118 79.156l-90.446 314.148c26.832 15.372 117.098 64.05 186.212 64.05 55.792 0 118.252-14.296 190.834-43.792l86.356-301.976c-58.632 18.922-114.876 28.52-167.464 28.52-95.95 0-163.114-31.098-205.492-60.95z 
+    m-235.526-222.28c77.118 0.798 134.152 30.208 181.416 60.502l92.752-317.344c-19.546-11.196-70.806-39.094-107.858-48.6-24.386-5.684-50.02-8.616-77.204-8.616-51.796 0.976-108.388 13.946-172.888 39.8l-88.44 310.596c64.808-24.436 120.644-36.34 172.086-36.34 0.046 0.002 0.136 0.002 0.136 0.002z 
+    m731.178-170.666c-58.814 22.832-116.208 34.466-171.028 34.466-91.686 0-159.292-31.802-203.094-62.366l-91.95 318.236c61.746 39.708 128.29 59.878 198.122 59.878 56.948 0 115.94-13.68 175.462-40.688l-0.182-2.222 3.734-0.886 88.936-306.418z"/>
+  <path id="w2" d="M0 187.396l367.2-50.6v354.798h-367.2v-304.2z 
+    m0 649.2v-299.798h367.2v350.398z 
+    m407.6 56v-355.798h488.4v423.2z 
+    m0-761.2l488.4-67.4v427.6h-488.4v-360.2z"/>
+</svg>
+
    
+            
    Similar to the svgMorph component, this component doesn't provide multipath processing so we should split the sub-paths into multiple <path> shapes, analyze and associate them
+                in a way that corresponding shapes are close and their points travel the least possible distance.
    
+
+            
    Now since we've worked with these paths before, the first example below showcases how the svgCubicMorph component handles it by default, using the reverseSecondPath:true option for all tweens because 
+                each shape have a slightly different position from its corresponding shape. The following example was made possible by editing the shapes with a vector graphics editor. The last example showcases a creative use of
+                association between starting and end shapes. Let's have a look:
    
+
+            
    
+                
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                
+                
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                
+                
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                
+
+                
    
+                    Start
+                
    
+            
    
+            
    Make sure to check the markup here as well as the svgCubicMorph.js for a full code review.
    
+
+            
    Intersecting Paths Example
    
+            
    The same preparation apply here, however the outcome is a bit different with cubic-bezier path commands, as shown in the first example. For the next two examples, the shapes have been edited for a better outcome.
+                Let's have a look:
    
+
+            
    
+                
+                    
+                        
+                            
+                            
+                            
+                            
+                            
+                            
+                            
+                        
+                    
+                    
+                    
+                
+                
+                    
+                        
+                            
+                            
+                            
+                            
+                            
+                            
+                            
+                        
+                    
+                    
+                    
+                
+                
+                    
+                        
+                            
+                            
+                            
+                            
+                            
+                            
+                            
+                        
+                    
+                    
+                    
+                
+                
    
+                    Start
+                
    
+            
    
+
+            
    So the technique involves creating <mask> elements, splitting multipath shapes into multiple <path> shapes, matching the amount of starting and ending shapes by duplicating 
+                an existing shape or by sampling another shape for the same purpose, editing shapes for more accurate point-to-point animation, as well as various options to optimize the visual presentation.
    
+
+            
    That's it, you now mastered the SVG Cubic Morph component.
    
+
+            
    Notes
    
+            
      
+                
    • Since animation works only with path SVGElements, you might need a convertToPath utility.
      • 
+                
    • In some cases your start and end shapes don't have a very close size, you might need to use SVGPath tools to apply a scale transformation to your shapes'
+                    path commands.
      • 
+                
    • The SVG Cubic Morph component WILL animate paths with sub-paths, but the animation isn't very appealing unless you've prepared your paths for this specific case, in other cases hopefuly
+                    this guide will help you break the ice.
      • 
+                
    • Compared to svgMorph, this component requires more work, but can be more memory efficient, as we're dealing with significantly less interpolation points which translates directly 
+                    into better performance and the shapes never show any sign of "polygon artifacts".
      • 
+                
    • Some shapes can be broken even if the browser won't throw any error so make sure you double check with your SVG editor of choice.
      • 
+                
    • In some cases the duplicated curve bezier points don't produce the best morphing animation, but you can edit the shapes and add your own additional path commands between the existing ones
+                    so that the component will work with actual points that travel less and produce a much more "natural" morphing animation.
      • 
+                
    • The edited shapes can be found in the assets/img folder of this demo, make sure to check them out.
      • 
+                
    • Make sure to check the svgCubicMorph.js for a full code review.
      • 
+                
    • This component is affected by the the fill-rule="evenodd" specific SVG attribute, you must make sure you check your shapes in that regard as well.
      • 
+                
    • This component is bundled with the kute-extra.js distribution file.
      • 
+            
    
+        
    
+
+        
+        
+
+    
    
+    
+
+
+
+    
+    
+    
+    
+    
+    
+    
+
+
+
+
diff --git a/svgDraw.html b/svgDraw.html
new file mode 100644
index 0000000..0cfeb42
--- /dev/null
+++ b/svgDraw.html
@@ -0,0 +1,166 @@
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js SVG Draw
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    SVG Draw
    
+          
    The component that animates the stroke of any SVGElement and updates the style attribute of the target.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate the stroke for most SVGElement shapes, with a very easy to use coordinates system.
    
+              
    
+              
    
+                
    The KUTE.js SVG Draw component enables animation for the stroke-dasharray and stroke-dashoffset properties via CSS style.
    
+                
    The component uses the SVG standard .getTotalLength() method for <path> shapes, while for the other shapes it uses some helper methods to calculate the values 
+                  required for animation.
                            
+                
    It can work with <path>, <glyph>, <circle>, <ellipse>, <rect>, <line>, <polyline> and <polygon> 
+                  shapes. It uses a very simple to use coordinates system so you can set up animations right away.
     
+                
    As you will see in the examples below, there is alot of flexibility in terms of input values.
    
+              
    
+            
    
+          
            
+        
            
+
+        
    
+          
    Examples
    
+
+
    // draw the stroke from 0-10% to 90-100%
+var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
+
+// draw the stroke from zero to full path length
+var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
+
+// draw the stroke from full length to 50%
+var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
+
    
+
+
+          
    Based on the above sample code, let's see some animation going on:
    
+
+          
    
+              
+              
+              
+              
+              
+              
+          
+              
    
+                  Start
+              
    
+          
    
+          
+          
+          
    Notes
    
+          
      
+            
    • Remember that the draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100% 
+                as start value for your tweens when stroke-dasharray and stroke-dashoffset properties are not set.
      • 
+            
    • Sometimes the stroke on some shapes may not completely close, you might want to consider values outside the [0-100] percent range.
      • 
+            
    • The SVG Draw component can be combined with any other SVG based component to create even more complex animations for SVG elements.
      • 
+            
    • This component is bundled with the standard kute.js and kute-extra.js distribution files.
      • 
+          
    
+      
    
+
+
+      
+      
+
+    
    
+    
+
+
+    
+    
+
+    
+    
+    
+    
+    
+
+
+
+
diff --git a/svgMorph.html b/svgMorph.html
new file mode 100644
index 0000000..72b3b08
--- /dev/null
+++ b/svgMorph.html
@@ -0,0 +1,388 @@
+
+
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  KUTE.js SVG Morph
+
+  
+  
+
+  
+  
+
+  
+  
+
+
+
+  
    
+
+    
    
+    
    
+      
+      
    
+    
    
+
+    
    
+      
    SVG Morph
    
+      
    The component that covers SVG morphing, an animation that's close to impossible with CSS3 transitions and not supported in some legacy browsers. It comes packed
+        with tools and options to improve performance and visual presentation.
    
+    
    
+
+    
    
+      
    
+        
    
+          
    
+            
    Overview
    
+            
    Animate SVG paths with line-to path commands, improve visual presentation and optimize performance on any device.
    
+          
    
+          
    
+            
    The KUTE.js SVG Morph component enables animation for the d (description) presentation attribute and is one of the most important in all the 
+              SVG components.
    
+            
    It only applies to inline <path> SVGElement shapes and requires that these shapes are closed (their d attribute ends with 
+              Z path command). On initialization or animation start, depending on the chosen KUTE.js method, it will 
+              sample a number of points along the two paths based on a default / given sample size and will 
+              create two arrays of coordinates we need for interpolation.
    
+            
    This component was originally inspired by a D3.js path morphing example and now implements a set of 
+              D3 polygon geometric operations and other functionalities from flubber to 
+              produce the coordinates for a very consistent morphing animation.
    
+            
    While in some cases you might be able to create SVG morphing animations via CSS3 transition, this component was developed to provide various solutions for working 
+              with complex shapes, bringing convenience, resources and clarity to one of the most complex types of animation.
    
+          
    
+        
    
+
+        
    
+          
    
+            
    Options
    
+            
    The easy way to optimize morphing animation for every device in a single option.
    
+          
    
+          
    
+            
    The SVG Morph component comes with a simple option to optimize animation on every device. Previous versions used to have additional options required for processing,
+              but now the component will handle all that for you thanks to the new code.
    
+
+            
      
+              
    • morphPrecision: Number option allows you to set the sampling size of the shapes in pixels. The lesser value the better visual but the more power consumption 
+                and less performance. The default value is 10 but the processing functions will determine the best possible outcome depending on shapes' path commands.
      • 
+            
    
+          
    
+        
    
+      
    
+    
    
+
+    
    
+
+      
    Basic Example
    
+      
    The first morphing animation example is a transition from a rectangle into a star, the first path is the start shape and the second is the end shape; we can also add some ID to the 
+        paths so we can easily target them with our code.
    
+
+
    <svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+  <path id="rectangle" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
+  <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
+</svg>
+
    
+
+      
    Now we can apply both .to() and fromTo() methods:
    
+
+
    // the fromTo() method
+var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
+// OR
+// the to() method will take the path's d attribute value and use it as start value
+var tween = KUTE.to('#rectangle', { path: '#star' }).start();
+// OR
+// simply pass in a valid path string without the need to have two paths in your SVG
+var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
+
    
+
+      
    For all the above tween objects the animation should look like this:
    
+
+      
    
+        
+        
+        
+      
+        
    
+          Start
+        
    
+      
    
+
+      
    That's it, let move on to the next example.
    
+
+      
    Polygon Paths
    
+      
    When your paths are only lineto, vertical-lineto and horizontal-lineto based shapes (the d attribute consists of only L, V and 
+        H path commands), the SVG Morph component will work differently from previous versions, it will sample points as for any other non-polygon shapes. In this case you can set a higher
+        morphPrecision value to optimize performance.
    
+
+
    // let's morph a triangle into a star
+var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
+
+// or same path into a square
+var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
+
    
+      
+      
    
+
+        
+
+          
+          
+
+          
+          
+          
+
+          
+        
+
+        
    
+          Start
+        
    
+      
    
+      
    Did you catch the cat?
    
+
+
+      
    Subpath Example
    
+      
    In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:
    
+
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path id="w1" d="M412.23 511.914c-47.708-24.518-94.086-36.958-137.88-36.958-5.956 0-11.952 0.18-17.948 0.708-55.88 4.624-106.922 19.368-139.75 30.828-8.708 3.198-17.634 6.576-26.83 10.306l-89.822 311.394c61.702-22.832 116.292-33.938 166.27-33.938 80.846 0 139.528 30.208 187.992 61.304 22.962-77.918 78.044-266.09 94.482-322.324-11.95-7.284-24.076-14.57-36.514-21.32z 
+  m116.118 79.156l-90.446 314.148c26.832 15.372 117.098 64.05 186.212 64.05 55.792 0 118.252-14.296 190.834-43.792l86.356-301.976c-58.632 18.922-114.876 28.52-167.464 28.52-95.95 0-163.114-31.098-205.492-60.95z 
+  m-235.526-222.28c77.118 0.798 134.152 30.208 181.416 60.502l92.752-317.344c-19.546-11.196-70.806-39.094-107.858-48.6-24.386-5.684-50.02-8.616-77.204-8.616-51.796 0.976-108.388 13.946-172.888 39.8l-88.44 310.596c64.808-24.436 120.644-36.34 172.086-36.34 0.046 0.002 0.136 0.002 0.136 0.002z 
+  m731.178-170.666c-58.814 22.832-116.208 34.466-171.028 34.466-91.686 0-159.292-31.802-203.094-62.366l-91.95 318.236c61.746 39.708 128.29 59.878 198.122 59.878 56.948 0 115.94-13.68 175.462-40.688l-0.182-2.222 3.734-0.886 88.936-306.418z"/>
+  <path id="w2" d="M0 187.396l367.2-50.6v354.798h-367.2v-304.2z 
+  m0 649.2v-299.798h367.2v350.398z 
+  m407.6 56v-355.798h488.4v423.2z 
+  m0-761.2l488.4-67.4v427.6h-488.4v-360.2z"/>
+</svg>
+
    
+      
    As you can see, both these paths have subpaths, and this component will only animate the first subpath from both paths. To animate them all there are a few easy steps required in preparation for 
+        the animation, so here's a quick guide:
    
+      
      
+        
    1. Use the convertToAbsolute utility to convert path commands to absolute values. It's important to do this
+          conversion first.
      2. 
+        
    2. Create a new <path> shape for each subpath string from M to Z path commands. See the sample code below.
      3. 
+        
    3. Give the new paths an id="uniqueID" attribute so you can target them easily. You could use relevant namespace to help you better understand positioning. EG: id="square-top-left" 
+          or id="left-eye"
      4. 
+        
    4. In the browser console inspect with your mouse all paths from both starting and ending shapes and determine which shapes should morph to which. The idea is to produce a morphing animation
+          where points from each shape travel the least possible distance, however this is where you can get creative, as shown in one of the examples below.
      5. 
+        
    5. If the number of the starting and ending shapes are not equal, you can consider either duplicating one of the subpath shapes close to it's corresponding subpath shape or creating a sample
+          shape close to the corresponding subpath shape.
      6. 
+        
    6. Update the id attribute for all starting and ending shapes to match positions and make it easier to work with the tween objects.
      7. 
+        
    7. Optional: set a fill attribute for each new shape if you like, normally you coulnd't have done it with the original paths.
      8. 
+        
    8. Create your tween objects and get to animating and tweaking.
      9. 
+      
    
+
+      
    For our example here, this is the end result markup for the shapes to be used for morphing animation:
    
+
+
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
+  <path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
+  <path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
+  <path id="w13" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
+  <path id="w14" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
+
+  <path id="w21" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
+  <path id="w22" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
+  <path id="w23" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
+  <path id="w24" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
+</svg>
+
    
+
+      
    The graphic on the left side of the below example is exactly for the above markup, no option needed out of the box nearly perfect animation, while the right side example showcases a different or 
+        perhaps more creative example of this morph animation:
    
+
+
+      
    
+        
+          
+          
+          
+          
+          
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+          
+          
+          
+          
+          
+        
+        
    
+          Start
+        
    
+      
    
+
+      
    As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically. Perhaps in the future we could have dedicated AI powered APIs to train and 
+        program for this work, but until then, it's up to you to learn, observe, adapt and tweak in order to get the most out of this component.
    
+
+      
    Intersecting Paths Example
    
+      
    The last morph example is a bit more complex as the paths have intersecting subpaths with different positions as well as different amounts of subpaths. In this case you can manually clone one or 
+        more subpaths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding ending shapes; at this point 
+        you should be just like in the previous examples.
    
+
+      
    You need to inspect the markup here in your browser console to get an idea on how the shapes have been arranged, we have used a <mask> where we included the subpaths of both start 
+        and end shape, just to get the same visual as the original paths.
    
+
+      
    
+        
+          
+            
+              
+              
+              
+              
+              
+              
+              
+            
+          
+          
+          
+        
+        
+          
+            
+              
+              
+              
+              
+              
+              
+              
+            
+          
+          
+          
+        
+
+        
    
+          Start
+        
    
+      
    
+
+      
    The example on the left side showcases the cloning of one of the shapes to match the amount of starting and ending shapes, while the right side showcases
+        using a sample shape, somewhere close to its corresponding end shape, a much better animation, but in the end, it's up to you and your need on preparing, 
+        analyzing as well as deciding on how to optimize these cases.
    
+
+
+      
    Notes
    
+      
      
+        
    • Since SVG Morph animation works only with path elements, you might need a convertToPath feature, so 
+          grab one here and get to working.
      • 
+        
    • In some cases your start and end shapes don't have a very close size, you might need to use SVGPath tools to apply a scale transformation to your shapes'
+          path commands.
      • 
+        
    • The morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multipaths instead of cloning shapes to have same number 
+          of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.
      • 
+        
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays 
+          you can get quite comfortable with almost any value, including the default value.
      • 
+        
    • Because you have the tools at hand, you can also try to use a morphPrecision value for every resolution. Take some time to experiement, you might find a better morphPrecision 
+          value you can use for any particular device and / or resolution.
      • 
+        
    • The animation performance is the same for both .to() and .fromTo() methods, but the ones that use the second method will start faster, because the values have been prepared 
+          already and for the first method the processing of the two paths happens on tween start, thus delaying the animation, so keep that in mind when working with syncing multiple tweens, the .to() 
+          based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will 
+          be delayed.
      • 
+        
    • The SVG Morph component uses approximatelly the same algorithm as D3.js for determining the coordinates for interpolation, it might be a better solution for your applications.
      • 
+        
    • This component should ignore the fill-rule="evenodd" specific SVG attribute, but you can make sure you check your shapes in that regard as well.
      • 
+        
    • This component is bundled with the standard kute.js distribution file.
      • 
+      
    
+    
    
+
+    
+    
+
+  
    
+  
+
+
+
+  
+  
+
+  
+  
+  
+  
+  
+
+
+
+
diff --git a/svgTransform.html b/svgTransform.html
new file mode 100644
index 0000000..e2de2eb
--- /dev/null
+++ b/svgTransform.html
@@ -0,0 +1,390 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js SVG Transform
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    SVG Transform
    
+          
    The component that covers transform animation on SVGElement targets, solves browser inconsistencies and provides a similar visual presentation as 
+            with other transform based components on non-SVGElements targets.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate 2D transform functions on SVG elements on any SVG enabled browser.
    
+              
    
+              
    
+                
    The KUTE.js SVG Transform component enables animation for the transform presentation attribute on any SVGElement target.
    
+                
    The SVG Transform is an important part of the SVG components for some reasons:
    
+                
      
+                  
    • It was developed to solve most browser inconsistencies of the time for transform animation. Nowadays modern browsers are Chromium browsers that work with regular 2D
+                    transform functions.
      • 
+                  
    • The unique way to normalize translation to produce the kind of animation that is just as consistent as for CSS3 transforms on non-SVGElement targets.
      • 
+                  
    • The value processing is consistent with the current W3 draft.
      • 
+                
    
+                
    Keep in mind that the transform attribute accepts no measurement units such as degrees or pixels, but it expects rotation / skew angles to be in degrees, and 
+                  translations in lengths measured around the parent <svg> element viewBox attribute.
                       
+              
    
+            
    
+            
    
+                
    
+                  
    Options
    
+                  
    Keep everything under control and handle any situation with a single option.
    
+                
    
+                
    
+                  
    The only component that keeps the transformOrigin option because it's required to compute transform functions in the SVG 
+                    cooordinates system.
    
+
+                  
      
+                    
    • transformOrigin: ['50%','50%'] sets the much needed origin. Eg: transformOrigin:[50,50]. The default 
+                      value is 50% 50% of the target element box, which is contrary with the SVG draft.
      • 
+                  
    
+
+                  
    Keep in mind that the component will disregard the current SVG default origin of 0px 0px of the target's parent, even if the browsers' default 
+                    transformOrigin have been normalized over the years.
    
+
+                  
    The transformOrigin tween option can also be used to set coordinates of a parent <svg> element (in the second example below). 
+                    Values like top left values are also accepted, but will take the target element's box as a reference, not the parent's box.
                                   
+                
    
+            
    
+          
    
+        
    
+
+        
    
+          
+          
    2D Transform
    
+          
      
+            
    • translate function applies horizontal and / or vertical translation. EG. translate:150 to translate a shape 150px to the right or 
+                translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. IE9+
      • 
+            
    • rotate function applies rotation to a shape on the Z axis. Eg. rotate:150 will rotate a shape clockwise by 150 degrees around it's own center or around 
+                the transformOrigin: '450 450' set tween option coordinate of the parent element. IE9+
      • 
+            
    • skewX function used to apply a skew transformation on the X axis. Eg. skewX:25 will skew a shape by 25 degrees. IE9+
      • 
+            
    • skewY function used to apply a skew transformation on the Y axis. Eg. skewY:25 will skew a shape by 25 degrees. IE9+
      • 
+            
    • scale function used to apply a single value size transformation. Eg. scale:0.5 will scale a shape to half of it's initial size. IE9+
      • 
+            
    • matrix function is not supported, but the Transform Matrix covers you there, if you'll read below.
      • 
+          
    
+
+          
    Examples
    
+          
    As explained with the Transform Matrix component, the DOMMatrix API will replace webkitCSSMatrix and SVGMatrix and on this page we intend to put 
+            the two components head to head, the elements on the left will be using Transform Matrix component and equivalent 2D transform functions, while the elements on the right will be using 2D functions of
+            the SVG Transform component.
     
+          
+          
    The SVG Transform component comes with a reliable set of scripts that work on all browsers, making use of the SVGMatrix API for some origin calculation, the transform presentation
+            attribute and the svgTransform tween property with a familiar and very easy notation:
    
+
+
    // using the svgTransform property works in all SVG enabled browsers
+var tween2 = KUTE.to(
+    'shape',                // target
+    {                       // to
+        svgTransform: { 
+            translate: [150,100], 
+            rotate: 45, 
+            skewX: 15, skewY: 20, 
+            scale: 1.5 
+        }
+    }
+);
+
+// transformMatrix can animate SVGElement targets on modern browsers
+// requires adding styling like `transform-origin:50% 50%` to the target element
+var tween1 = KUTE.to(
+    'shape',            // target
+    {                   // to
+        transform: { 
+            translate3d: [150,100,0], 
+            rotate3d: [0,0,45], 
+            skew: [15,20], 
+            scale3d: [1.5,1.5,1] 
+        } 
+    }
+);
+
    
+
+          
    Let's see some examples and explain each case.
    
+
+
+          
    SVG Rotation
    
+          
    Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. The svgTransform will only accept single value 
+              for the angle value rotate: 45, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a transformOrigin 
+              tween option to override the behavior.
    
+          
    The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. 
+              Let's have a look at a quick demo:
    
+
+          
    
+              
+                  
+                  
+              
+
+              
    
+                  Start
+              
    
+          
    
+          
    For the first element, the Transform Matrix creates the rotation animation via rotate3d[0,0,360] tween property around the element center coordinate, as we've set transform-origin:25% 50% 
+              to the element's style; this animation doesn't work in IE browsers, while in older versions Firefox the animation is inconsistent. The second element uses the rotate: 360 function of the SVG Transform 
+              component and the rotation animation is around the element's own central point without any option, an animation that DO WORK in all SVG enabled browsers.
    
+
+          
    When for non-SVG elements' transform we could have used values such as center bottom as transformOrigin (also not supported in all modern browsers for SVGs), the entire processing falls 
+              to the browser, however when it comes to SVGs our component here will compute the transformOrigin tween option value accordingly to use the shape's .getBBox() value to determine 
+              for instance the coordinates for 25% 75% position or center top.
    
+
+          
    In other cases you may want to rotate shapes around the center point of the parent <svg> or <g> element, and we use it's .getBBox() to determine the 50% 50% 
+              coordinate, so here's how to deal with it:
    
+
+
    // rotate around parent svg's "50% 50%" coordinate as transform-origin
+// get the bounding box of the parent element
+var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent <svg> element
+
+// we need to know the current translate position of the element [x,y]
+// in our case is:
+var translation = [580,0];
+
+// determine the X point of transform-origin for 50%
+var OriginX = svgBB.width * 50 / 100 - translation[0];
+
+// determine the Y point of transform-origin for 50%
+var OriginY = svgBB.height * 50 / 100 - translation[1];
+
+// set your rotation tween with "50% 50%" transform-origin of the parent <svg> element
+var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformOrigin: [OriginX, OriginY]} );
+
    
+
+          
    
+              
+                  
+                  
+              
+
+              
    
+                  Start
+              
    
+          
    
+          
    Same as the above example, the first element is rotated by the Transform Matrix component and is using transform-origin: 50% 50%; styling, while the second element is rotated by the SVG Transform
+              component with the above calculated transform-origin.
    
+
+          
    SVG Translation
    
+          
    In this example we'll have a look at translations, so when setting translate: [150,0], the first value is X (horizontal) coordinate to which the shape will translate to and the second value is 
+              Y (vertical) coordinate for translation. When translate: 150 notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements 
+              transformation. Let's have a look at a quick demo:
    
+          
+          
    
+              
+                  
+                  
+              
+
+              
    
+                  Start
+              
    
+          
    
+          
    The first element uses the Transform Matrix translate3d: [580,0,0] function, while the second tween uses the translate: [0,0] as svgTransform value. 
+              For the second example the values are unitless and are relative to the viewBox attribute.
    
+
+          
    SVG Skew
    
+          
    For skews we have: skewX: 25 or skewY: -25 as SVGs don't support the skew: [X,Y] function. Here's a quick demo:
    
+          
    
+              
+              
+              
+          
+
+              
    
+                  Start
+              
    
+          
    
+          
    The first tween skews the shape on both X and Y axes in a chain via Transform Matrix skew:[-15,-15] function and the second tween skews the shape on X and Y axes via the svgTransform functions skewX:15 and 
+              skewY:15 tween properties. You will notice translation kicking in to set the transform origin.
    
+
+          
    SVG Scaling
    
+          
    Another transform example for SVGs is the scale. Unlike translations, for scale animation the component only accepts single value like scale: 1.5, for both X (horizontal) axis and Y (vertical) axis, 
+              to keep it simple and even if SVGs do support scale(X,Y). But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to 
+              make the animation look as we would expect. A quick demo:
    
+          
    
+              
+                  
+                  
+              
+
+              
    
+                  Start
+              
    
+          
    
+          
    The first tween scales the shape at scale: 1.5 via Transform Matrix component and it's scale3d:[1.5,1.5,1] function, and the second tween scales down the shape at scale: 0.5 
+              value via svgTransform. If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep transform-origin at an expected 
+              50% 50% of the shape box. A similar case as with the skews.
    
+
+          
    Mixed SVG Transform Functions
    
+          
    Our last transform example for SVG Transform is the mixed transformation. Just like for the other examples the component will try to adjust the rotation transform-origin to make it look as you would expect it 
+              from regular HTML elements. Let's combine 3 functions at the same time and see what happens:
    
+          
    
+              
+              
+              
+          
+
+              
    
+                  Start
+              
    
+          
    
+          
    Both shapes are scaled at scale: 1.5, translated to translate: 250 and skewed at skewX: -15. If you inspect the elements, you will notice the second shape's translation is 
+              different from what we've set in the tween object, and this is to keep transform-origin at an expected 50% 50% value. This means that the component will also compensate rotation transform origin 
+              when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.
    
+
+          
    Chained SVG Transform
    
+          
    The SVG Transform does not work with SVG specific chained transform functions right away (do not confuse with tween chain), Ana Tudor explains best here, 
+              but if your SVG elements only use this feature to set a custom transform-origin, it should look like this:
    
+
+
    <svg>
+    <circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20"></circle>
+</svg>
+
    
+
+          
    In this case I would recommend using the values of the first translation as transformOrigin for your tween built with the .fromTo() method like so:
    
+            
+
    // a possible workaround for animating a SVG element that uses chained transform functions
+KUTE.fromTo(element,
+    {svgTransform : { translate: 0, rotate: 45, scale: 0.5 }}, // we asume the current translation is zero on both X & Y axis
+    {svgTransform : { translate: 450, rotate: 0, scale: 1.5 }}, // we will translate the X to a 450 value and scale to 1.5
+    {transformOrigin: [150,150]} // tween options use the transform-origin of the target SVG element
+).start();
+
    
+
+          
    Before you hit the Start button, make sure to check the transform attribute value. The below tween will reset the element's transform attribute to original value when the animation is complete.
    
+          
    
+            
+            
+          
+
+              
    
+                  Start
+              
    
+          
    
+          
    This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.
    
+
+          
    Notes
    
+          
      
+            
    • The SVG Transform component is successfuly handling all possible combinations of transform functions, and always uses same order of transform functions: translate, 
+                rotate, skewX, skewY and scale to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.
      • 
+            
    • Keep in mind that the SVG transform functionss will use the center of a shape as transform origin by default, contrary to the SVG draft.
      • 
+            
    • Keep in mind the adjustments required for rotations, remember the .getBBox() method, it's really useful to set custom transform-origin.
      • 
+            
    • By default browsers use overflow: hidden for <svg> so child elements are partialy/completely hidden while animating. You might want to set overflow: visible 
+                or some browser specific tricks if that is the case.
      • 
+            
    • When using viewBox="0 0 500 500" attribute for <svg> and no width and/or height attribute(s), means that you expect the SVG to be scalable and most 
+                Internet Explorer versions simply don't work. You might want to check this tutorial.
      • 
+            
    • In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the .fromTo() method with all proper values.
      • 
+            
    • Also the svgTransform tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.
      • 
+            
    • The SVG Transform component cannot work with the transformOrigin set to an SVGElement via CSS, you must always use a it's specific option.
      • 
+            
    • The component can be combined with the HTML Attributes component to enable even more advanced/complex animations for SVG elements.
      • 
+            
    • Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below do not support inline SVG 
+                so make sure to fiter your SVG tweens properly.
      • 
+            
    • While you can still use regular CSS3 transforms for SVG elements, everything is fine with Google Chrome, Opera and other webkit browsers, but older Firefox versions struggle with the percentage based 
+                transformOrigin values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements, which means that the SVG Transform component will become a fallback 
+                component to handle legacy browsers in the future. Guess who's taking over :)
      • 
+            
    • This component is bundled with the standard kute.js and kute-extra.js distribution files.
      • 
+
+          
    
+
+      
    
+
+      
+      
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+    
+    
+    
+
+
+
+
diff --git a/text.html b/text.html
deleted file mode 100644
index 7e8419f..0000000
--- a/text.html
+++ /dev/null
@@ -1,195 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    KUTE.js Text Plugin | Javascript Animation Engine
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-
-    
-    
-    
-
-    
-    
-
-
-
-    
    
-
-        
    
-            
    
-                
    KUTE.js
    
-                
-            
    
-        
    
-
-        
    
-            
    Text Plugin
    
-            
    The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by 
-                character with a very cool effect.
    
-
-
    // basic synthax for number increments
-var myNumberTween = KUTE.to('selector', {number: 1500}); // this assumes it will start from current number or from 0
-
-// OR text writing character by character
-var myTextTween = KUTE.to('selector', {text: 'A text string with other <span>substring</span> should do.'});
-
    
-
-            
    The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is 
-                advised. With other words, try to limit the number of simultaneus text animations.
    
-
-            
    Number Incrementing/Decreasing
    
-            
    In the first example, let's animate a number, approximatelly as written above:
    
-            
    
-                
    Total number of lines: 0
    
-
-                
    
-                    Start
-                
    
-            
    
-            
    The button action will toggle the valuesEnd value for the number property, because tweening a number to itself would produce no effect.
    
-
-            
    Writing Text
    
-            
    This feature come with a additional tween option called textChars for the scrambling text character:
    
-            
      
-                
    • alpha use lowercase alphabetical characters, the default value
      • 
-                
    • upper use UPPERCASE alphabetical characters
      • 
-                
    • numeric use numerical characters
      • 
-                
    • symbols use symbols such as #, $, %, etc.
      • 
-                
    • all use all alpha numeric and symbols.
      • 
-                
    • YOUR CUSTOM STRING use your own custom characters; eg: 'KUTE.JS IS #AWESOME'.
      • 
-            
    
-            
    
-                
    Click the Start button on the right.
    
-
-                
    
-                    Start
-                
    
-            
    
-            
    Keep in mind that the yoyo feature will NOT un-write / delete character by character the string, but will write the previous text instead.
    
-
-            
    Combining Both
    
-            
    
-                
    
-                    
    
-                        
    0
    
-                    
    
-                    
    
-                        
    Clicks so far?
    
-                    
    
-                
    
-                
    
-                    Start
-                
    
-            
    
-            
    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js 
-                features can really spice up some content. Have fun!
    
-
-            
-        
    
-
-        
-        
-
-    
    
-    
-
-
-
-    
-    
-
-    
-    
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-
-
-
diff --git a/textProperties.html b/textProperties.html
new file mode 100644
index 0000000..8021bec
--- /dev/null
+++ b/textProperties.html
@@ -0,0 +1,159 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Text Properties
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Text Properties
    
+          
    The component that animates the typographic CSS properties of a target content Element on most browsers.
    
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    Animate the text size or spacing properties of a target text element.
    
+              
    
+              
    
+                
    The KUTE.js Text Properties component enables animation for typography related CSS properties of content element targets
+                    on most browsers.
    
+                
    This small and simple component can be used to create various attention seekers for any content elements such as HTMLHeadingElement, 
+                    HTMLParagraphElement, HTMLUListElement or any other, as well as for entire content blocks.
    
+                
    You can either animate an entire string or content block or split your string into words or letters and create a simple animation with one or more of
+                    the following properties:
                            
+              
    
+            
    
+          
    
+        
    
+
+        
    
+
+          
    Supported Properties
    
+
+          
      
+            
    • fontSize allows you to animate the font-size for a target element.
      • 
+            
    • lineHeight allows you to animate the line-height for a target element.
      • 
+            
    • letterSpacing allows you to animate the letter-spacing for a target element.
      • 
+            
    • wordSpacing allows you to animate the word-spacing for a target element.
      • 
+          
    
+
+          
    Example
    
+            
+
    let tween1 = KUTE.to('selector1',{fontSize:'200%'})
+let tween2 = KUTE.to('selector1',{lineHeight:24})
+let tween3 = KUTE.to('selector1',{letterSpacing:50})
+let tween3 = KUTE.to('selector1',{wordSpacing:50})
+
    
+
+          
    
+              
    Howdy!
    
+              
    Start
    
+          
    
+          
+          
    Notes
    
+          
      
+              
    • Be sure to check the textProperties.js for a more in-depth review of the above example.
      • 
+              
    • Similar to box model properties, the text properties are also layout modifiers, they will push the layout around forcing unwanted re-paint work. To avoid re-paint, you
+                  can use a fixed height for the target element's container, as we used in our example here, or set your text to position:absolute.
      • 
+              
    • The component is only included in the kute-extra.js distribution file.
      • 
+          
    
+
+      
    
+
+      
+      
+
+    
    
+    
+
+    
+    
+
+    
+    
+    
+
+    
+    
+
+
+
diff --git a/textWrite.html b/textWrite.html
new file mode 100644
index 0000000..c10042b
--- /dev/null
+++ b/textWrite.html
@@ -0,0 +1,275 @@
+
+
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  KUTE.js TextWrite
+
+  
+  
+
+  
+  
+
+  
+  
+
+  
+
+
+
+  
    
+
+    
    
+      
    
+        
+      
    
+    
    
+
+    
    
+      
    Text Write
    
+      
    The component that enables a unique animation by manipulating the string content of Element targets on most browsers.
    
+    
    
+
+    
    
+      
    
+        
    
+          
    
+            
    Overview
    
+            
    Manipulate string contents with ease.
    
+          
    
+          
    
+            
    The KUTE.js Text Write component enables animation for content Element targets by manipulating their string contents.
    
+            
    The component provides two properties:
    
+            
      
+              
    • number: NUMBER - interpolate the string numbers by increasing or decreasing their values
      • 
+              
    • text: STRING - will add/remove a content string one character at a time
      • 
+            
    
+            
    This text property comes with an additional tween option called textChars for the scrambling text character, with the following expected values:
    
+            
      
+              
    • alpha use lowercase alphabetical characters, the default value
      • 
+              
    • upper use UPPERCASE alphabetical characters
      • 
+              
    • numeric use numerical characters
      • 
+              
    • symbols use symbols such as #, $, %, etc.
      • 
+              
    • all use all alpha numeric and symbols.
      • 
+              
    • YOUR CUSTOM STRING use your own custom characters; eg: 'KUTE.JS IS #AWESOME'.
      • 
+            
                
+            
    It's always best to wrap your target number in a <span id="uniqueID"> for the number property and content targets should be split into 
+              multiple parts for the text property if the target has child contents, as we will see in the examples below.
    
+          
    
+        
    
+      
    
+    
    
+
+
+    
    
+
+      
    Examples
    
+
+      
    The effect of these two properties is very popular, so let's go through some quick examples to explain the workflow for the best possible outcome. We will try to focus 
+        on the text property a bit more because we can optimize the content targets for a great visual experience.
    
+
+      
    Number Property
    
+      
    As discussed above, the target number need to be wrapped in a tag of choice with a unique ID so we can target it.
    
+
+
    // the target number is wrapped in a <span> tag with a unique ID
+<p class="text-example">Total number of lines: <span id="myNumber">0</span></p>
+
    
+
+
    // sample tween object with "number" property
+// this assumes it will start from current number which is different from 1550
+var myNumberTween = KUTE.to('#myNumber', {number: 1550}); 
+
    
+
+      
    The above should work like this:
    
+      
    
+        
    Total number of lines: 0
    
+
+        
    
+          Start
+        
    
+      
    
+      
    The button action will toggle the valuesEnd value for the number property, because tweening a number to itself would produce no effect.
    
+
+      
    Text Property
    
+      
    Let's try a quick example and analyze the current outcome. Be aware that the example involves using child contents for the values, which is something we need to 
+        handle in a special way to optimize the visual experience.
    
+
+
    // sample tween object with "text" property
+var myTextTween = KUTE.to('selector', {text: 'A text string with <span>child content</span> should do.'});
+
    
+
+      
    
+        
    Click the Start button on the right.
    
+        
    
+          Start
+        
    
+      
    
+
+      
    So targets with child elements don't animate very well it seems. We could probably split the starting content and end content into multiple parts, set a tween object 
+        for each parth with delays and other settings, but Text Write component comes with a powerful utility you can use to ease your work in these instances.
    
+      
    The createTextTweens() utility will do it all for you: split text strings, set tween objects, but let's see some sample code:
    
+
+
    // grab the parent of the content segments
+var textTarget = document.getElementById('textExample');
+
+// make a reversed array with its child contents
+var tweenObjects = KUTE.Util.createTextTweens(
+  textTarget,
+  'This text has a <a href="index.html">link to homepage</a> inside.',
+  options
+);
+
+// start whenever you want
+tweenObjects.start();
+
    
+
+      
    Now let's see how we doin:
    
+
+      
    
+        
    Click the Start button on the right.
    
+        
    
+          Start
+        
    
+      
    
+
+      
    There are some considerations for the createTextTweens(target,newText,options) utility:
    
+      
      
+        
    • The utility will replace the target content with <span> parts or the children's tagNames, then for the newText content will 
+          create similar parts but empty. Also the number of the parts of the target content doesn't have to be the same as for the new content.
      • 
+        
    • The utility returns an Array of tween objects, which is similar but independent from tweenCollection objects.
      • 
+        
    • The returned Array itself has a start() "method" you can call on all the tweens inside.
      • 
+        
    • The utility will assign playing: boolean property to the target content Element to prevent unwanted animation interruptions or glitches.
      • 
+        
    • While you can set various tween options like easing, duration or the component specific textChars option, the delay option is handled
+          by the utility automatically.
      • 
+        
    • The utility has a special handling for the duration tween option. You can either set a fixed duration like 1000, which isn't recommended, or auto
+          which will allow the utility the ability to determine a duration for each text part
      • 
+        
    • When the animation of the last text part is complete, the target content Element.innerHTML will be set to the original un-split newText.
      • 
+        
    • Using yoyo tween option is not recommended because it doesn't produce a desirable effect.
      • 
+        
    • The utility will not work properly with targets that have a deeper structure than level 1, which means that for instance 
+          <span>Text <span>sample</span></span> may not be processed properly.
      • 
+      
    
+
+      
    Combining Both
    
+      
    
+        
    
+          
    
+            
    0
    
+          
    
+          
    
+            
    Clicks so far
    
+          
    
+        
    
+        
    
+          Start
+        
    
+      
    
+      
    In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js 
+        features can really spice up some content. Have fun!
    
+
+      
    Notes
    
+      
      
+        
    • Keep in mind that the yoyo tween option will NOT un-write / delete the string character by character for the text property, but will write the previous text instead.
      • 
+        
    • For a full code review, check out the ./assets/js/textWrite.js example source code.
      • 
+      
    
+
+      
+    
    
+
+    
+    
+
+  
    
+  
+
+
+
+  
+  
+
+  
+  
+  
+  
+  
+
+
+
+
diff --git a/transformFunctions.html b/transformFunctions.html
new file mode 100644
index 0000000..37b7e7c
--- /dev/null
+++ b/transformFunctions.html
@@ -0,0 +1,297 @@
+
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Transform Functions
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Transform Functions
    
+          
    The component covers most important 2D and 3D transform functions as described in the W3 specification,
+            completelly reworked for improved performance and faster value processing.
                
+        
    
+
+        
    
+
+          
    
+
+            
    
+              
    
+                
    Overview
    
+                
    The component to cover animation for most transform functions with improved performance and faster value processing.
    
+              
    
+              
    
+                
    The KUTE.js Transform Functions enables animation for the CSS3 transform style on Element targets on most modern browsers and specific legacy browsers.
    
+                
    Starting with KUTE.js version 2.0, you can set the perspective function as a tween property, while you can still rely on a parent's perspective but for less performance.
    
+                
    All the previous perspective related options have been removed. The transform CSS3 property itself no longer uses preffixes like webkit, moz or ms since all major 
+                  browsers are standardized.
    
+                
    In comparison with previous versions, the component expects that input values are already px and deg based and no longer transforms % percent based values into px based or rad 
+                  based angles into deg based. This makes the execution faster and more consistent.
    
+                
    The component will stack all transform functions for translations, rotations and skews to shorthand functions to optimize performance and minimize value processing.
    
+              
    
+            
    
+          
    
+        
    
+
+        
    
+
+            
    3D Transform
    
+            
      
+              
    • perspective function creates a 3D perspective for a target element transformation. EG. perspective:400 to apply a 400px perspective. IE10+
      • 
+              
    • translateX function is for horizontal translation. EG. translateX:150 to translate an element 150px to the right. IE10+
      • 
+              
    • translateY function is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top. IE10+
      • 
+              
    • translateZ function is for translation on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px away from the viewer, making it 
+                appear smaller. This function can be combined with the perspective function to take effect or the parent's perspective; the smaller perspective value, the deeper translation. IE10+
      • 
+              
    • translate3d function is for movement on all axes in a given 3D field. EG. translate3d:[-150,200,150] to translate an element 150px to the left, 200px 
+                to the bottom and 150px closer to the viewer, making it larger. When third value is used, it requires using a perspective. IE10+
      • 
+              
    • rotateX function rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees. Requires perspective. 
+                IE10+
      • 
+              
    • rotateY function rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees. 
+                Requires perspective. IE10+
      • 
+              
    • rotateZ function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees on X axis. 
+                IE10+
      • 
+              
    • rotate3d is a tween property, which combines the above rotateX, rotateY, and rotateZ functions and rotates an element on all axes. Obviously this is NOT
+                equivalent with the rotate3d(vectorX,vectorY,vectorZ,angle) shorthand function, this is only an optimization implemented for performance reasons and hopefully for your convenience.
+                Eg. rotate3d:[-150,80,90] will rotate an element counter-clockwise by 150 degrees on X axis, 80 degrees on Y axis and 90 degrees on Z axis. The X and Y axis require a perspective. 
+                IE10+
      • 
+              
    • matrix3d and scale3d functions are not supported by this component, but they are implemented in the transformMatrix component.
      • 
+            
    
+
+            
    2D Transform
    
+            
      
+              
    • translate function is for movement on X and Y axis. EG. translate:[-150,200] to translate an element 150px to the left, 200px to the bottom. IE9+
      • 
+              
    • rotate function rotates an element on the Z axis. Eg. rotate:250 will rotate an element clockwise by 250 degrees. IE9+
      • 
+              
    • skewX function will apply a shear on X axis to a target element. Eg. skewX:50 will skew a target element on X axis by 50 degrees. IE9+
      • 
+              
    • skewY function will apply a shear on X axis to a target element. Eg. skewX:50 will skew a target element on X axis by 50 degrees. IE9+
      • 
+              
    • skew function will apply a shear on both X and Y axes to a target element. Eg. skew:[50,50] will skew a target element on X axis by 50 degrees and 50 degrees on Y axis. 
+                  IE9+
      • 
+              
    • scale function will scale a target element on all axes. Eg. scale:1.5 will scale up a target element by 50%. IE9+
      • 
+              
    • matrix is not supported by this component, but is implemented in the transformMatrix component.
      • 
+            
    
+
+            
    Translations
    
+
+
    var tween1 = KUTE.fromTo('selector1',{translate:0},{translate:250}); // or translate:[x,y] for both axes
+var tween2 = KUTE.fromTo('selector2',{translateX:0},{translateX:-250});
+var tween3 = KUTE.fromTo('selector3',{translate3d:[0,0,0]},{translate3d:[0,250,0]});
+var tween4 = KUTE.fromTo('selector4',{perspective:400,translateY:0},{perspective:200,translateY:-100});
+
    
+
+          
    
+            
    2D
    
+            
    X
    
+            
    Y
    
+            
    Z
    
+
+            
    
+                Start
+            
    
+          
    
+
+          
    As you can see in your browsers console, for all animations translate3d is used, as explained above. Also the first example that's using the 2D translate for both vertical
+              and horizontal axis even if we only set X axis.
    
+
+          
    Rotations
    
+
+
    var tween1 = KUTE.fromTo('selector1',{rotate:0},{rotate:-720});
+var tween2 = KUTE.fromTo('selector2',{rotateX:0},{rotateX:200});
+var tween3 = KUTE.fromTo('selector3',{perspective:100,rotate3d:[0,0,0]},{perspective:100,rotate3d:[0,160,0]});
+var tween4 = KUTE.fromTo('selector4',{rotateZ:0},{rotateZ:360});
+
    
+
+          
    
+            
    2D
    
+            
    X
    
+            
    Y
    
+            
    Z
    
+            
    
+              Start
+            
    
+          
    
+          
    The rotateX and rotateY 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 the
+              perspective function. 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.
    
+
+          
    Skews
    
+
+
    var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
+var tween2 = KUTE.fromTo('selector2',{skew:[0,0]},{skew:[0,45]});
+
    
+
+          
    
+            
    X
    
+            
    Y
    
+
+            
    
+              Start
+            
    
+          
    
+
+          
    Mixed Transformations
    
+          
    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:
    
+
+            
    var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
+var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();
+
    
+            
    If you check the test here, you will notice that only the skewY is going to work and no rotation. Now let's do this properly.
    
+
+
    var tween1 = KUTE.fromTo(
+  'selector1', // element
+  {pespective:200,translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
+  {pespective:200,translateX:250, rotateX:360, rotateY:15, rotateZ:5} // to
+);
+var tween2 = KUTE.fromTo(
+  'selector2', // element
+  {translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
+  {translateX:-250, rotateX:360, rotateY:15, rotateZ:5} // to
+);
+
    
+
+          
    
+            
    self perspective 200px
    
+            
    parent perspective 400px
    
+
+            
    
+                Start
+            
    
+          
    
+          
    Note in this example, the first tween object uses the element's perspective while the second relies on the parent's perspective.
    
+
+          
    Chained Transformations
    
+          
    KUTE.js has the ability to stack transform functions in a way to improve performance and optimize your workflow. In that idea the .to() method can be the right choice for most of your 
+              animation needs and especially to link animations together because it has the ability to check the current values of the transform functions found in the element's inline styling, mostly from previous 
+              tween animation, and use them as start values for the next animation. OK now, let's see a side by side comparison with 4 elements:
    
+
+          
    
+            
    FROMTO
    
+            
    FROMTO
    
+            
    TO
    
+            
    TO
    
+
+            
    
+              Start
+            
    
+          
    
+          
    Observations
    
+          
      
+            
    • The example hopefully demostrates what the animation looks like with different combinations of transform functions and how to combine them to optimize your workflow, size on disk as well as to how
+                to link animations together in a smooth continuous animation.
      • 
+            
    • No matter the input values, the component will always stack translations into translate3d and rotations into rotate3d.
      • 
+            
    • The first box uses a regular .fromTo() object, from point A to B and back to A, with the exact coordinates we want.
      • 
+            
    • The second box is also using .fromTo() object, but using all values for all tweens at all times, so we gave the animation a sense of continuity.
      • 
+            
    • The third box uses the .to() method, and will try and continue animation from last animation, but we "forgot" to keep track on the rotation of the X axis.
      • 
+            
    • The last box also uses the .to() method, and uses all values and reproduce the animation of the second box exactly, but with nearly half the code.
      • 
+          
    
+
+          
    Notes
    
+          
      
+            
    • The order of the transform functions/properties is always the same: perspective, translation, rotation, skew, scale, this way we can prevent 
+                jumpy/janky animations; one of the reasons is consistency in all transform based components and another reason is the order of execution from the draft for 
+                matrix3d recomposition.
      • 
+            
    • Tests reveal that an element's own perspective produce better performance than using the parent's perspective. Also having both will severelly punish the animation performance, so keep that in mind 
+                when you work on optimizing your code. 
      •     
+            
    • Use single axis transform functions like translateX when you want to animate the Y and Z axes back to ZERO, but in a convenient way.
      • 
+            
    • Use shorthand functions like translate3d when you want to animate / keep multiple axes.
      • 
+            
    • Shorthand functions like translate3d or rotate3d tween property generally not only improve performance, but will also minimize the code size. Eg. translateX:150,
+                translateY:200, translateZ:50 => translate3d:[150,200,50] is quite the difference.
      • 
+            
    • On larger amount of elements animating chains, the .fromTo() method is fastest, and you will have more work to do as well, but will eliminate any delay / syncronization issue that may occur.
      •  
+            
    • This component is bundled with the kute-base.js and the standard kute.js distribution files.
      • 
+          
    
+
+      
    
+
+      
+      
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+    
+
+    
+    
+
+
+
diff --git a/transformMatrix.html b/transformMatrix.html
new file mode 100644
index 0000000..0f51f3d
--- /dev/null
+++ b/transformMatrix.html
@@ -0,0 +1,216 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    KUTE.js Transform Matrix
+
+    
+    
+
+    
+    
+
+    
+    
+
+
+
+    
    
+
+      
    
+        
    
+          
+          
    
+        
    
+
+        
    
+          
    Transform Matrix
    
+          
    The component covers all 3D transform functions and renders the update with either matrix() or matrix3d() functions, depending on the 
+            functions used and their values. The notation is also fairly easy to use and familiar with other components.
                
+        
    
+
+        
    
+          
    
+            
    
+              
    
+                
    Overview
    
+                
    The brand new component to enable complex transform animations of the future.
    
+              
    
+              
    
+                
    The KUTE.js Transform Matrix component covers animation for the CSS3 transform style on Element targets but with a different implementation.
    
+                
      
+                  
    • The notation is a little different because we have a different supported functions/properties set, and the value processing function needs to differentiate the two components.
      • 
+                  
    • The 2D transform functions like rotate, translate or scale have been dropped to enable faster value processing and improved performance. The component is 
+                      geared towards the future of web development with this very specific purpose in mind.
      • 
+                  
    • Most importantly we have the update function which implements the DOMMatrix() API for smooth animation at no 
+                      performance cost, which is different from other libraries that use a webkitCSSMatrix polyfill and lose performance.
      •  
+                  
    • The script is robust, simple and light in size. It's simply a matter of taste when choosing between the two transform components.
      • 
+                
    
+                
    The component was developed for more complex transform animations and comes with additional supported transform functions. According to the W3 draft, the DOMMatrix API will merge the 
+                    fallback webkitCSSMatrix API and the SVGMatrix API together, so awesome is yet to come.
    
+                
    Due to execution complexity and other performance considerations, and similar to the Transform Functions component, this component provides support for a custom 
+                    rotate3d[X,Y,Z] tween property which is different from CSS3 standard rotate3d(x,y,z,Angle) shorthand function.
    
+                
    In certain situations you can also use functions like scaleX, rotateY or translateZ for convenience, but the component will always stack translations 
+                    into translate3d, all scale axes into scale3d, all rotations into rotate3d and both skews into skew.
                                 
+              
            
+            
            
+          
            
+        
            
+
+        
    
+            
+          
    3D Transform
    
+          
      
+            
    • perspective function creates a 3D perspective for a target element transformation. EG. perspective:400 to apply a 400px perspective.
      • 
+            
    • translateX function is for horizontal translation. EG. translateX:150 to translate an element 150px to the right.
      • 
+            
    • translateY function is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top.
      • 
+            
    • translateZ function is for translation on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px away from the viewer, making it 
+                appear smaller. This function can be combined with the perspective function to take effect or the parent's perspective; the smaller perspective value, the deeper translation.
      • 
+            
    • translate3d shorthand function is for translation on all the axes in a given 3D field. EG. translate3d:[-150,200,150] to translate an element 150px to the left, 200px 
+                to the bottom and 150px closer to the viewer, making it larger. When third value is used, it requires using a perspective.
      • 
+            
    • rotateX function rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees on X axis. 
+                Requires perspective.
      • 
+            
    • rotateY function rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees on Y axis. 
+                Requires perspective.
      • 
+            
    • rotateZ function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:90 will rotate an element clockwise by 90 degrees on Z axis.
      • 
+            
    • rotate3d is a tween property, which combines the above rotateX, rotateY, and rotateZ functions and rotates an element on all axes. 
+                Eg. rotate3d:[250,-150,90] will produce the same effect as the three above combined. The X and Y axes require a perspective.
      • 
+            
    • skewX function will apply a shear to a target element on the X axis. Eg. skewX:50 will skew the element by 50 degrees on X axis.
      • 
+            
    • skewY function will apply a shear to a target element on the Y axis. Eg. skewY:-50 will skew the element by -50 degrees on Y axis.
      • 
+            
    • skew shorthand function will apply a shear on both X and Y axes to a target element. Eg. skew:[50,50] will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.
      • 
+            
    • scaleX function will scale the X axis of a target element. Eg. scaleX:1.5 will increase the scale of a target element on the X axis by 50%.
      • 
+            
    • scaleY function will scale the Y axis of a target element. Eg. scaleY:0.5 will decrease the scale of a target element on the Y axis by 50%.
      • 
+            
    • scaleZ function will scale the Z axis of a target element. Eg. scaleZ:0.75 will decrease the scale of a target element on the Z axis by 25%.
      • 
+            
    • scale3d function will scale a target element on all axes. Eg. scale3d:[1.5,0.5,0.75] will produce the same effect as the 3 above combined.
      • 
+            
    • matrix and matrix3d are not supported CSS3 transform functions or tween properties, but the results of the update function.
      • 
+          
    
+
+          
    Example
    
+          
    Now let's have a look at the notation and a quick example:
    
+
+
    let mx1 = KUTE.to('el1', { transform: { translate3d:[-50,-50,-50]} })
+let mx2 = KUTE.to('el2', { transform: { perspective: 100, translateX: -50, rotateX:-180} })
+let mx3 = KUTE.to('el3', { transform: { translate3d:[-50,-50,-50], skew:[-15,-15]} })
+let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-360,0], scaleX:0.5 } })
+
    
+
+        
    
+          
    MX1
    
+          
    MX2
    
+          
    MX3
    
+          
    MX4
    
+
+          
    
+            Start
+          
    
+        
    
+        
    So the second element uses it's own perspective but notice that the parent perspective also apply. This case must be avoided in order to keep performance in check: one perspective is best.
    
+
+        
    Chained Transformations
    
+        
    Similar to the other component the Transform Matrix component will produce the same visual experience, but with the matrix3d function.
    
+        
    
+          
    FROMTO
    
+          
    FROMTO
    
+          
    TO
    
+          
    TO
    
+
+          
    
+            Start
+          
    
+        
    
+
+        
    Notes
    
+        
      
+            
    • Why no support for the matrix3d function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees. 
+                As explained here, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify 
+                the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.
      • 
+            
    • The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable. 
+                Such a feature would allow us to kick start animations directly from matrix3d string/array values, but considering the size of this component, I let you draw the conclusions.
      • 
+            
    • Despite the "limitations", we have some tricks available: the fromTo() method will never fail and it's much better when performance and sync are a must, and for to() 
+                method we're storing the values from previous animations to have them ready and available for the next chained animation.
      • 
+            
    • The performance of this component is identical with the Transform Functions component, which is crazy and awesome, all that thanks to the DOMMatrix API built into our modern browsers. 
+                If that's not good enough, the API will automatically switch from matrix3d to matrix and vice-versa whenever needed to save power. Neat?
      • 
+            
    • The rotate3d property makes alot more sense for this component since the DOMMatrix rotate(angleX,angleY,angleZ) method works exactly the same, while the 
+                rotate3d(vectorX,vectorY,vectorZ,angle) function is a thing of the past, according to Chris Coyier nobody use it.
      • 
+            
    • Since the component fully utilize the DOMMatrix API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers 
+                like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.
      • 
+            
    • This component is bundled with the kute-extra.js distribution file.
      •   
+        
    
+      
    
+
+      
+      
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+    
+
+    
+    
+
+
+

From b51196cb8605b17de79be04201f71981f162631f Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:22:33 +0000
Subject: [PATCH 144/187]

---
 backgroundPosition.html | 2 +-
 borderRadius.html       | 2 +-
 boxModel.html           | 2 +-
 clipProperty.html       | 2 +-
 colorProperties.html    | 2 +-
 filterEffects.html      | 2 +-
 opacityProperty.html    | 2 +-
 progress.html           | 2 +-
 scrollProperty.html     | 2 +-
 shadowProperties.html   | 2 +-
 svgCubicMorph.html      | 2 +-
 svgDraw.html            | 2 +-
 svgMorph.html           | 2 +-
 svgTransform.html       | 2 +-
 textProperties.html     | 2 +-
 textWrite.html          | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/backgroundPosition.html b/backgroundPosition.html
index 90fcd69..715987d 100644
--- a/backgroundPosition.html
+++ b/backgroundPosition.html
@@ -83,7 +83,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the position of the background image, simple and effective.
    
diff --git a/borderRadius.html b/borderRadius.html
index f92e06e..389c946 100644
--- a/borderRadius.html
+++ b/borderRadius.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the radius for all corners or a specific one for a target element.
    
diff --git a/boxModel.html b/boxModel.html
index df5529d..08ac081 100644
--- a/boxModel.html
+++ b/boxModel.html
@@ -83,7 +83,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the width, height, borderWidth or spacing for a target element on all browsers.
    
diff --git a/clipProperty.html b/clipProperty.html
index b8955fa..4daf5da 100644
--- a/clipProperty.html
+++ b/clipProperty.html
@@ -81,7 +81,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the clip property of a target element when certain conditions are met.
    
diff --git a/colorProperties.html b/colorProperties.html
index 3af958f..3197378 100644
--- a/colorProperties.html
+++ b/colorProperties.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate color properties for a target element and updates its CSS style via RGB.
    
diff --git a/filterEffects.html b/filterEffects.html
index 53d08d8..9f04bdc 100644
--- a/filterEffects.html
+++ b/filterEffects.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate filter functions for a target Element and deliver the best possible animation.
    
diff --git a/opacityProperty.html b/opacityProperty.html
index e928e1b..920d9e5 100644
--- a/opacityProperty.html
+++ b/opacityProperty.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the opacity property of a target element.
    
diff --git a/progress.html b/progress.html
index a6a14a9..52f3bc4 100644
--- a/progress.html
+++ b/progress.html
@@ -132,7 +132,7 @@
 
       
    
         
    
-          
    
+          
    
             
    
               
    Overview
    
               
    Create a tween object and link it to a range slider Input. Some stuff happening.
    
diff --git a/scrollProperty.html b/scrollProperty.html
index fed6a98..8dd9933 100644
--- a/scrollProperty.html
+++ b/scrollProperty.html
@@ -81,7 +81,7 @@
 
     
    
       
    
-        
    
+        
    
           
    
             
    Overview
    
             
    The fully reworked component for vertical scrolling animation is an essential part of KUTE.js.
    
diff --git a/shadowProperties.html b/shadowProperties.html
index c58bb82..c2e77f5 100644
--- a/shadowProperties.html
+++ b/shadowProperties.html
@@ -90,7 +90,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the shadow properties of a target element.
    
diff --git a/svgCubicMorph.html b/svgCubicMorph.html
index 00f3daa..b481b39 100644
--- a/svgCubicMorph.html
+++ b/svgCubicMorph.html
@@ -83,7 +83,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate SVG paths with cubic-bezier path commands and improved performance.
    
diff --git a/svgDraw.html b/svgDraw.html
index 0cfeb42..69d185b 100644
--- a/svgDraw.html
+++ b/svgDraw.html
@@ -81,7 +81,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the stroke for most SVGElement shapes, with a very easy to use coordinates system.
    
diff --git a/svgMorph.html b/svgMorph.html
index 72b3b08..c7d0b3c 100644
--- a/svgMorph.html
+++ b/svgMorph.html
@@ -81,7 +81,7 @@
 
     
    
       
    
-        
    
+        
    
           
    
             
    Overview
    
             
    Animate SVG paths with line-to path commands, improve visual presentation and optimize performance on any device.
    
diff --git a/svgTransform.html b/svgTransform.html
index e2de2eb..0bfbcfb 100644
--- a/svgTransform.html
+++ b/svgTransform.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate 2D transform functions on SVG elements on any SVG enabled browser.
    
diff --git a/textProperties.html b/textProperties.html
index 8021bec..426fc10 100644
--- a/textProperties.html
+++ b/textProperties.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the text size or spacing properties of a target text element.
    
diff --git a/textWrite.html b/textWrite.html
index c10042b..3ffb461 100644
--- a/textWrite.html
+++ b/textWrite.html
@@ -93,7 +93,7 @@
 
     
    
       
    
-        
    
+        
    
           
    
             
    Overview
    
             
    Manipulate string contents with ease.
    

From 1d8cf96422e17ab7096e965aef67193032f6cab8 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:23:36 +0000
Subject: [PATCH 145/187]

---
 svgCubicMorph.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/svgCubicMorph.html b/svgCubicMorph.html
index b481b39..1b2c8e1 100644
--- a/svgCubicMorph.html
+++ b/svgCubicMorph.html
@@ -139,7 +139,7 @@ var tween = KUTE.to('#rectangle', { path: '#star' }).start();
 var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
 
    • 
 
-            
    By default, the component will process the paths as authered and deliver its best without any option required, like for the first red rectangle below which applies to any of the above invocations:
    
+            
    By default, the component will process the paths as authored and deliver its best without any option required, like for the first red rectangle below which applies to any of the above invocations:
    
 
             
    
                 

From acbeb00a48c8fc9afbdeaee7987416544379f7f2 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:46:08 +0000
Subject: [PATCH 146/187]

---
 htmlAttributes.html | 66 ++++++++++++++++++++++-----------------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/htmlAttributes.html b/htmlAttributes.html
index 522f99b..75695cc 100644
--- a/htmlAttributes.html
+++ b/htmlAttributes.html
@@ -183,43 +183,41 @@ var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%',
 var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
 
    
 
-          
    
-              
-                  
-                      
-                          
-                          
-                      
-                  
-                  
-              
+        
    
+          
+            
+              
+                
+                
+              
+            
+              
+          
 
-              
    
-                  Start
-              
    
+          
    
+              Start
           
    
-
-          
    Notes
    
-          
      
-              
    • The power of this little gem comes from the fact that it can work with internally undefined/unknown attributes, as well as with attributes that are not yet present in the W3 draft. As long as you provide valid values specific
-                  to the attribute, the component will assign an update function and will always double check for the current value to determine if it needs a suffix or if the attribute name needs adjustments 
-                  (EG: fillOpacity becomes fill-opacity).
      • 
-              
    • This component is a great addition to complement any SVG related component as well as a great complement to Filter Effects component.
      • 
-              
    • Remember to check your elements markup for changes, your animation might not be visible because equivalent CSS is used.
      • 
-              
    • This component is bundled with the standard kute.js and kute-extra.js distribution files.
      • 
-
-          
    
-
-          
-          
-
         
    
+
+        
    Notes
    
+        
      
+          
    • The power of this little gem comes from the fact that it can work with internally undefined/unknown attributes, as well as with attributes that are not yet present in the W3 draft. As long as you provide valid values specific
+              to the attribute, the component will assign an update function and will always double check for the current value to determine if it needs a suffix or if the attribute name needs adjustments 
+              (EG: fillOpacity becomes fill-opacity).
      • 
+          
    • This component is a great addition to complement any SVG related component as well as a great complement to Filter Effects component.
      • 
+          
    • Remember to check your elements markup for changes, your animation might not be visible because equivalent CSS is used.
      • 
+          
    • This component is bundled with the standard kute.js and kute-extra.js distribution files.
      • 
+        
    
+      
    
+
+      
+      
     
 
     
diff --git a/src/kute-base.js b/src/kute-base.js
index a74afbb..966b258 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.0 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.1 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,28 +9,32 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.0";
+  var version = "2.0.1";
 
-  var Tweens = [];
-  var supportedProperties = {};
   var defaultOptions = {
     duration: 700,
     delay: 0,
     easing: 'linear'
   };
-  var crossCheck = {};
-  var onComplete = {};
-  var onStart = {};
+
   var linkProperty = {};
-  var Util = {};
-  var BaseObjects = {
+
+  var onStart = {};
+
+  var onComplete = {};
+
+  var supportedProperties = {};
+
+  var Objects = {
     defaultOptions: defaultOptions,
     linkProperty: linkProperty,
-    onComplete: onComplete,
     onStart: onStart,
+    onComplete: onComplete,
     supportedProperties: supportedProperties
   };
 
+  var Util = {};
+
   function linear (t) { return t; }
   function easingQuadraticIn (t) { return t*t; }
   function easingQuadraticOut (t) { return t*(2-t); }
@@ -70,12 +74,25 @@
   }
   Util.processEasing = processEasing;
 
-  var globalObject = typeof (global) !== 'undefined' ? global
-                            : typeof(self) !== 'undefined' ? self
-                            : typeof(window) !== 'undefined' ? window : {};
-  var TweenConstructor = {};
+  var Tweens = [];
+
+  function add (tw) { return Tweens.push(tw); }
+
+  function remove (tw) {
+    var i = Tweens.indexOf(tw);
+    i !== -1 && Tweens.splice(i, 1);
+  }
+
+  function getAll () { return Tweens; }
+
+  function removeAll () { Tweens.length = 0; }
+
   var KUTE = {};
 
+  var globalObject = typeof (global) !== 'undefined' ? global
+                    : typeof(self) !== 'undefined' ? self
+                    : typeof(window) !== 'undefined' ? window : {};
+
   function numbers(a, b, v) {
     a = +a; b -= a; return a + b * v;
   }
@@ -95,22 +112,6 @@
     arrays: arrays
   };
 
-  var add = function(tw) { Tweens.push(tw); };
-  var remove = function(tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }};
-  var getAll = function() { return Tweens };
-  var removeAll = function() { Tweens.length = 0; };
-  var Tick = 0;
-  function Ticker(time) {
-    var i = 0;
-    while ( i < Tweens.length ) {
-      if ( Tweens[i].update(time) ) {
-        i++;
-      } else {
-        Tweens.splice(i, 1);
-      }
-    }
-    Tick = requestAnimationFrame(Ticker);
-  }
   var Time = {};
   if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
   	Time.now = function () {
@@ -122,7 +123,19 @@
   		 self.performance.now !== undefined) {
   	Time.now = self.performance.now.bind(self.performance);
   }
-  function stop () {
+  var Tick = 0;
+  var Ticker = function (time) {
+    var i = 0;
+    while ( i < Tweens.length ) {
+      if ( Tweens[i].update(time) ) {
+        i++;
+      } else {
+        Tweens.splice(i, 1);
+      }
+    }
+    Tick = requestAnimationFrame(Ticker);
+  };
+  function stop() {
     setTimeout(function () {
       if (!Tweens.length && Tick) {
         cancelAnimationFrame(Tick);
@@ -142,15 +155,23 @@
       }
     },64);
   }
-  function linkInterpolation(){
+  var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
+  for ( var blob in Render ) {
+    if (!KUTE[blob]) {
+      KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
+    }
+  }
+  globalObject["_KUTE"] = KUTE;
+
+  function linkInterpolation() {
     var this$1 = this;
     var loop = function ( component ) {
       var componentLink = linkProperty[component];
       var componentProps = supportedProperties[component];
       for ( var fnObj in componentLink ) {
         if ( typeof(componentLink[fnObj]) === 'function'
-            && Object.keys(this$1.valuesEnd).some(function (i) { return componentProps.includes(i)
-            || i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps.includes(j); }); } ) )
+            && Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
+            || i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
         {
           !KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
         } else {
@@ -172,13 +193,7 @@
     };
     for (var component in linkProperty)loop( component );
   }
-  var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
-  for (var blob in Render ) {
-    if (!KUTE[blob]) {
-      KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
-    }
-  }
-  globalObject["_KUTE"] = KUTE;
+
   var Internals = {
     add: add,
     remove: remove,
@@ -207,6 +222,8 @@
     }
   }
 
+  var crossCheck = {};
+
   var AnimationBase = function AnimationBase(Component){
     this.Component = Component;
     return this.setComponent()
@@ -254,6 +271,8 @@
     return {name:ComponentName}
   };
 
+  var TweenConstructor = {};
+
   var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
     this.element = targetElement;
     this.playing = false;
@@ -488,9 +507,10 @@
 
   var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
 
-  var canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false;
-  var touchOrWheel = canTouch ? 'touchstart' : 'mousewheel';
-  var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0];
+  var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
+
+  var touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel';
+  var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
   var passiveHandler = supportPassive ? { passive: false } : false;
   function preventScroll(e) {
     this.scrolling && e.preventDefault();
@@ -538,6 +558,25 @@
     Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
   };
 
+  function getPrefix() {
+    var thePrefix, prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
+    for (var i = 0, pfl = prefixes.length; i < pfl; i++) {
+      if (((prefixes[i]) + "Transform") in document.body.style) {
+        thePrefix = prefixes[i]; break;
+      }
+    }
+    return thePrefix;
+  }
+
+  function trueProperty(property) {
+    return !(property in document.body.style)
+            ? getPrefix() + (property.charAt(0).toUpperCase() + property.slice(1))
+            : property;
+  }
+
+  var transformProperty = trueProperty('transform');
+  var supportTransform = transformProperty in document.body.style ? 1 : 0;
+
   var BaseTransform = new AnimationBase(baseTransformOps);
   var BaseBoxModel = new AnimationBase(baseBoxModelOps);
   var BaseOpacity = new AnimationBase(baseOpacityOps);
@@ -552,7 +591,7 @@
     },
     TweenBase: TweenBase,
     fromTo: fromTo,
-    Objects: BaseObjects,
+    Objects: Objects,
     Easing: Easing,
     Util: Util,
     Render: Render,
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index 6f2920b..98ca310 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Base v2.0.0 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t=[],e={},n={duration:700,delay:0,easing:"linear"},r={},o={},i={},s={},a={},u={defaultOptions:n,linkProperty:s,onComplete:o,onStart:i,supportedProperties:e};var l={linear:function(t){return t},easingQuadraticIn:function(t){return t*t},easingQuadraticOut:function(t){return t*(2-t)},easingQuadraticInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easingCubicIn:function(t){return t*t*t},easingCubicOut:function(t){return--t*t*t+1},easingCubicInOut:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easingCircularIn:function(t){return-(Math.sqrt(1-t*t)-1)},easingCircularOut:function(t){return Math.sqrt(1-(t-=1)*t)},easingCircularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},easingBackIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},easingBackOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},easingBackInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)}};a.processEasing=function(t){return"function"==typeof t?t:"string"==typeof t?l[t]:l.linear};var c="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},f={},p={};function d(t,e,n){return(t=+t)+(e-=t)*n}var v={numbers:d,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],o=0,i=e.length;o>0)/1e3;return r}},h=function(e){t.push(e)},m=function(e){var n=t.indexOf(e);-1!==n&&t.splice(n,1)},y=0;function g(e){for(var n=0;n1?1:e,n=this._easing(e),this.valuesEnd)p[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},f.Tween=O;var k=f.Tween;function M(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function x(t,e,n,r){for(var o=[],i=0;i<3;i++)o[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function B(t,e,n,r){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function U(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+o.join(",")+")"}function j(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function P(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}function A(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var q={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!p[t]&&this.valuesEnd[t]&&(p[t]=function(e,n,r,o){e.style[t]=(n.perspective||r.perspective?M(n.perspective,r.perspective,"px",o):"")+(n.translate3d?x(n.translate3d,r.translate3d,"px",o):"")+(n.translate?U(n.translate,r.translate,"px",o):"")+(n.rotate3d?B(n.rotate3d,r.rotate3d,"deg",o):"")+(n.rotate||r.rotate?j(n.rotate,r.rotate,"deg",o):"")+(n.skew?P(n.skew,r.skew,"deg",o):"")+(n.scale||r.scale?A(n.scale,r.scale,o):"")})}},Interpolate:{perspective:M,translate3d:x,rotate3d:B,translate:U,rotate:j,scale:A,skew:P}};function F(t){t in this.valuesEnd&&!p[t]&&(p[t]=function(e,n,r,o){e.style[t]=(o>.99||o<.01?(10*d(n,r,o)>>0)/10:d(n,r,o)>>0)+"px"})}var L=["top","left","width","height"],X={};L.map((function(t){return X[t]=F}));var Y={component:"boxModelProps",category:"boxModel",properties:L,Interpolate:{numbers:d},functions:{onStart:X}};var D={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!p[t]&&(p[t]=function(e,n,r,o){e.style[t]=(1e3*d(n,r,o)>>0)/1e3})}}};function H(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function K(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var Q=function(){var t,e,n,r,o=!1;try{var i=Object.defineProperty({},"passive",{get:function(){o=!0}});t=document,n=function(){},H(t,e="DOMContentLoaded",(function o(i){i.target===t&&(n(i),K(t,e,o,r))}),r=i)}catch(t){}return o}(),Z="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],N="ontouchstart"in window||navigator&&navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",G=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.getElementsByTagName("HTML")[0],R=!!Q&&{passive:!1};function V(t){this.scrolling&&t.preventDefault()}function z(){var t=this.element;return t===G?{el:document,st:document.body}:{el:t,st:t}}function J(){var t=z.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,K(t.el,Z[0],V,R),K(t.el,N,V,R),t.st.style.pointerEvents="")}var W={component:"scrollProperty",property:"scroll",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!p[t]&&(p[t]=function(t,e,n,r){t.scrollTop=d(e,n,r)>>0})},onComplete:function(t){J.call(this)}},Util:{preventScroll:V,scrollIn:function(){var t=z.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,H(t.el,Z[0],V,R),H(t.el,N,V,R),t.st.style.pointerEvents="none")},scrollOut:J,scrollContainer:G,passiveHandler:R,getScrollTargets:z}},$=new I(q),tt=new I(Y),et=new I(D),nt=new I(W);return{Animation:I,Components:{BaseTransform:$,BaseBoxModel:tt,BaseScroll:nt,BaseOpacity:et},TweenBase:O,fromTo:function(t,e,n,r){return r=r||{},new k(S(t),e,n,r)},Objects:u,Easing:l,Util:a,Render:T,Interpolate:v,Internals:C,Selector:S,Version:"2.0.0"}}));
+// KUTE.js Base v2.0.1 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={duration:700,delay:0,easing:"linear"},e={},n={},r={},o={},i={defaultOptions:t,linkProperty:e,onStart:n,onComplete:r,supportedProperties:o},s={};var a={linear:function(t){return t},easingQuadraticIn:function(t){return t*t},easingQuadraticOut:function(t){return t*(2-t)},easingQuadraticInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easingCubicIn:function(t){return t*t*t},easingCubicOut:function(t){return--t*t*t+1},easingCubicInOut:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easingCircularIn:function(t){return-(Math.sqrt(1-t*t)-1)},easingCircularOut:function(t){return Math.sqrt(1-(t-=1)*t)},easingCircularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},easingBackIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},easingBackOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},easingBackInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)}};s.processEasing=function(t){return"function"==typeof t?t:"string"==typeof t?a[t]:a.linear};var u=[];function l(t){return u.push(t)}function c(t){var e=u.indexOf(t);-1!==e&&u.splice(e,1)}var f={},p="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function d(t,e,n){return(t=+t)+(e-=t)*n}var v={numbers:d,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],o=0,i=e.length;o>0)/1e3;return r}},h={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?h.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(h.now=self.performance.now.bind(self.performance));var m=0,y=function(t){for(var e=0;e1?1:e,n=this._easing(e),this.valuesEnd)f[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},O.Tween=S;var I=O.Tween;function M(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function x(t,e,n,r){for(var o=[],i=0;i<3;i++)o[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function U(t,e,n,r){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function j(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+o.join(",")+")"}function A(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function B(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}function P(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var q={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!f[t]&&this.valuesEnd[t]&&(f[t]=function(e,n,r,o){e.style[t]=(n.perspective||r.perspective?M(n.perspective,r.perspective,"px",o):"")+(n.translate3d?x(n.translate3d,r.translate3d,"px",o):"")+(n.translate?j(n.translate,r.translate,"px",o):"")+(n.rotate3d?U(n.rotate3d,r.rotate3d,"deg",o):"")+(n.rotate||r.rotate?A(n.rotate,r.rotate,"deg",o):"")+(n.skew?B(n.skew,r.skew,"deg",o):"")+(n.scale||r.scale?P(n.scale,r.scale,o):"")})}},Interpolate:{perspective:M,translate3d:x,rotate3d:U,translate:j,rotate:A,scale:P,skew:B}};function F(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(o>.99||o<.01?(10*d(n,r,o)>>0)/10:d(n,r,o)>>0)+"px"})}var L=["top","left","width","height"],X={};L.map((function(t){return X[t]=F}));var Y={component:"boxModelProps",category:"boxModel",properties:L,Interpolate:{numbers:d},functions:{onStart:X}};var D={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(1e3*d(n,r,o)>>0)/1e3})}}};function K(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function Q(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var Z=function(){var t,e,n,r,o=!1;try{var i=Object.defineProperty({},"passive",{get:function(){o=!0}});t=document,n=function(){},K(t,e="DOMContentLoaded",(function o(i){i.target===t&&(n(i),Q(t,e,o,r))}),r=i)}catch(t){}return o}(),z="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],H="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",G=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,N=!!Z&&{passive:!1};function R(t){this.scrolling&&t.preventDefault()}function V(){var t=this.element;return t===G?{el:document,st:document.body}:{el:t,st:t}}function W(){var t=V.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,Q(t.el,z[0],R,N),Q(t.el,H,R,N),t.st.style.pointerEvents="")}var J={component:"scrollProperty",property:"scroll",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(t,e,n,r){t.scrollTop=d(e,n,r)>>0})},onComplete:function(t){W.call(this)}},Util:{preventScroll:R,scrollIn:function(){var t=V.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,K(t.el,z[0],R,N),K(t.el,H,R,N),t.st.style.pointerEvents="none")},scrollOut:W,scrollContainer:G,passiveHandler:N,getScrollTargets:V}};($="transform")in document.body.style||(function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=0,r=e.length;n>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){var e=!(t in document.body.style),n=function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=0,r=e.length;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var R={linear:new V(0,0,1,1,"linear"),easingSinusoidalIn:new V(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new V(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new V(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new V(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new V(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new V(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new V(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new V(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new V(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new V(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new V(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new V(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new V(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new V(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new V(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new V(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new V(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new V(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new V(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new V(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new V(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new V(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new V(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new V(.68,-.55,.265,1.55,"easingBackInOut")};function H(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof R[t])return R[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new V(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),R.linear};var N=function(t,e,n,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||r.duration,this._delay=i.delay||r.delay,i){var s="_"+a;s in this||(this[s]=i[a])}var o=this._easing.name;return l[o]||(l[o]=function(t){!_[t]&&t===this._easing.name&&(_[t]=this._easing)}),this};N.prototype.start=function(t){if(C(this),this.playing=!0,this._startTime=t||_.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var n in l[e])l[e][n].call(this,n);L.call(this),this._startFired=!0}return!I&&P(),this},N.prototype.stop=function(){return this.playing&&(k(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},N.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,A.call(this)},N.prototype.update=function(t){var e,n;if((t=void 0!==t?t:_.Time())1?1:e,n=this._easing(e),this.valuesEnd)_[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},E.Tween=N,r.repeat=0,r.repeatDelay=0,r.yoyo=!1,r.resetStart=!1;var q=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],a=e[2];if(S.call(this,a,"end"),this._resetStart?this.valuesStart=i:S.call(this,i,"start"),!this._resetStart)for(var o in s)for(var l in s[o])s[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||r.repeat,this._repeatDelay=u.repeatDelay||r.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||r.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,x.call(this),s)for(var r in s[n])s[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=_.Time()-this._pauseTime,C(this),!I&&P()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(k(this),this.paused=!0,this._pauseTime=_.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:_.Time())1?1:e,n=this._easing(e),this.valuesEnd)_[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(N);E.Tween=q;var B=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(q);E.Tween=B;var D=function(t,e,n,i){var a=this;this.tweens=[],!("offset"in r)&&(r.offset=0);var s=E.Tween;(i=i||{}).delay=i.delay||r.delay;var o=[];return Array.from(t).map((function(t,l){o[l]=i||{},o[l].delay=l>0?i.delay+(i.offset||r.offset):i.delay,t instanceof Element?a.tweens.push(new s(t,e,n,o[l])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};D.prototype.start=function(t){return t=void 0===t?_.Time():t,this.tweens.map((function(e){return e.start(t)})),this},D.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},D.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},D.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},D.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof D)e.chain(t.tweens);else{if(!(t instanceof E))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},D.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},D.prototype.removeTweens=function(){this.tweens=[]},D.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var z=function(t,e){if(this.element=H(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof E.Tween))throw TypeError("tween parameter is not ["+E+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};z.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(_.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},z.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},z.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},z.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},z.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),_.Tick=cancelAnimationFrame(_.Ticker))},z.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=_.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),_.Tick=requestAnimationFrame(_.Ticker))};var X=E.Tween;var Y=function(t){try{t.component in e?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};Y.prototype.setComponent=function(t){var c=t.component,h={prepareProperty:a,prepareStart:i,onStart:l,onComplete:o,crossCheck:s},f=t.category,d=t.property,g=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(e[c]=t.properties||t.subProperties||t.property,"defaultValue"in t)n[d]=t.defaultValue,this.supports=d+" property";else if(t.defaultValues){for(var m in t.defaultValues)n[m]=t.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(t.defaultOptions)for(var y in t.defaultOptions)r[y]=t.defaultOptions[y];if(t.functions)for(var b in h)if(b in t.functions)if("function"==typeof t.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=t.functions[b]);else for(var w in t.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=t.functions[b][w]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}u[c]=t.Interpolate}if(t.Util)for(var T in t.Util)!p[T]&&(p[T]=t.Util[T]);return this};var Q=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:a,prepareStart:i,onStart:l,onComplete:o,crossCheck:s},r=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||r)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(r||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(r||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||r)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(Y);var W={prepareStart:function(t){return w(this.element,t)||n[t]},prepareProperty:function(t,e){if(e instanceof Array){var n=m(e[0]).v,r=m(e[1]).v;return[NaN!==n?n:50,NaN!==r?r:50]}var i=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return[m((i=2===(i=i.split(/(\,|\s)/g)).length?i:[i[0],50])[0]).v,m(i[1]).v]},onStart:function(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=(100*h(n[0],r[0],i)>>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},K={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:W,Util:{trueDimension:m}},G=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],$={};function Z(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}G.map((function(t){return $[t]=0}));var J={};G.forEach((function(t){J[t]=Z}));var tt={component:"borderRadiusProps",category:"borderRadius",properties:G,defaultValues:$,Interpolate:{units:f},functions:{prepareStart:function(t){return w(this.element,t)||n[t]},prepareProperty:function(t,e){return m(e)},onStart:J},Util:{trueDimension:m}},et=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],nt={};function rt(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}et.map((function(t){return nt[t]=0}));var it={};et.map((function(t){return it[t]=rt}));var at={component:"boxModelProps",category:"boxModel",properties:et,defaultValues:nt,Interpolate:{numbers:h},functions:{prepareStart:function(t){return w(this.element,t)||n[t]},prepareProperty:function(t,e){var n=m(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:it}};var st={prepareStart:function(t,e){var n=w(this.element,t),r=w(this.element,"width"),i=w(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[m(e[0]),m(e[1]),m(e[2]),m(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[m((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),m(n[1]),m(n[2]),m(n[3])]},onStart:function(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},ot={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:st,Util:{trueDimension:m}};function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,e){return w(this.element,t)||n[t]},prepareProperty:function(t,e){return y(e)},onStart:ht},Util:{trueColor:y}},dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var r={};for(var i in e){var a=gt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=y(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=m(o).u||m(e[i]).u,p=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=m(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!_[t]&&this.valuesEnd[t]&&(_[t]=function(t,e,n,r){for(var i in n)_.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!_[t]&&this.valuesEnd.attr&&(_[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:y,trueDimension:m}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=y(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:y}};var Et={prepareStart:function(t){return w(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et},Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var jt={prepareStart:function(){return Ut(this.element)},prepareProperty:function(t,e){return Ut(this.element,e)},onStart:function(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(t,e,n,r){return Ft(t,e,n,r)})}},Vt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h,paintDraw:Ft},functions:jt,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};function Rt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Ht(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Nt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function qt(t){if(!(t=Nt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=zt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,B=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Wt(t,e){for(var n=qt(t),r=e&&qt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Zt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Jt(t){var e=Gt(t),n=[];return e.map((function(t,r){n[r]=Zt(e,r)})),n}function te(t,e){var n=Gt(t),r=Gt(e),i=n.length-1,a=[],s=[],o=Jt(t);return o.map((function(t,e){for(var o=0,l=Kt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:ee(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Wt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?$t.call(this,r[0]):r[0],a=this._reverseSecondPath?$t.call(this,r[1]):r[1];i=te.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},re={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:ee},functions:ne,Util:{l2c:Bt,q2c:Dt,a2c:zt,catmullRom2bezier:Rt,ellipsePath:Ht,path2curve:Wt,pathToAbsolute:qt,toPathString:ee,parsePathString:Nt,getRotatedCurve:te,getRotations:Jt,getRotationSegments:Zt,reverseCurve:$t,getSegments:Gt,createPath:Kt}};function ie(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ae(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=se.call(this,t,ae(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},le={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:oe,Util:{parseStringOrigin:ie,parseTransformString:ae,parseTransformSVG:se}};function ue(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function pe(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var ce=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},ue(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),pe(t,e,i,r))}),r=a)}catch(t){}return i}(),he="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],fe="ontouchstart"in window||navigator&&navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",de=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.getElementsByTagName("HTML")[0],ve=!!ce&&{passive:!1};function ge(t){this.scrolling&&t.preventDefault()}function me(){var t=this.element;return t===de?{el:document,st:document.body}:{el:t,st:t}}function ye(){var t=me.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,ue(t.el,he[0],ge,ve),ue(t.el,fe,ge,ve),t.st.style.pointerEvents="none")}function be(){var t=me.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,pe(t.el,he[0],ge,ve),pe(t.el,fe,ge,ve),t.st.style.pointerEvents="")}var we={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:de,ye.call(this),this.element===de?window.pageYOffset||de.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){be.call(this)}},xe={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:we,Util:{preventScroll:ge,scrollIn:ye,scrollOut:be,scrollContainer:de,passiveHandler:ve,getScrollTargets:me}},Se=["boxShadow","textShadow"];function Me(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=y(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Te(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Ee={};Se.map((function(t){return Ee[t]=Te}));var _e={component:"shadowProperties",properties:Se,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,e){var r=w(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?n[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Me(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Me(e,t));return e},onStart:Ee},Util:{processShadowArray:Me,trueColor:y}},Ce=["fontSize","lineHeight","letterSpacing","wordSpacing"],ke={};function Ie(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}Ce.forEach((function(t){ke[t]=Ie}));var Pe={component:"textProperties",category:"textProps",properties:Ce,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return w(this.element,t)||n[t]},prepareProperty:function(t,e){return m(e)},onStart:ke},Util:{trueDimension:m}};function Oe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Ae(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),je=String("0123456789").split(""),Ve=Le.concat(Ue,je),Re=Ve.concat(Fe),He={alpha:Le,upper:Ue,symbols:Fe,numeric:je,alphanumeric:Ve,all:Re};var Ne={text:function(t){if(!_[t]&&this.valuesEnd[t]){var e=this._textChars,n=e in He?He[e]:e&&e.length?e:He[r.textChars];_[t]=function(t,e,r,i){var a="",s="",o=e.substring(0),l=r.substring(0),u=n[Math.random()*n.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===r?" ":r):" "===r?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===r?" ":r):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===r?" ":r)}}},number:function(t){t in this.valuesEnd&&!_[t]&&(_[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},qe={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:Ne},Util:{charSet:He,createTextTweens:function(t,e,n){if(!t.playing){var r=E.Tween;(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var i=function(t,e){var n=Ae(t,"text-part"),r=Ae(Oe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],p=0;return(u=(u=u.concat(o.map((function(t,e){return n.duration="auto"===n.duration?75*a[e].innerHTML.length:n.duration,n.delay=p,n.onComplete=null,p+=n.duration,new r(t,{text:t.innerHTML},{text:""},n)})))).concat(l.map((function(i,a){return n.duration="auto"===n.duration?75*s[a].innerHTML.length:n.duration,n.delay=p,n.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=n.duration,new r(i,{text:""},{text:s[a].innerHTML},n)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}},Be="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var De={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in e)r[s]="perspective"===s?e[s]:n.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!_[t]&&(_[t]=function(e,n,r,i){var a=new Be,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!_[t]&&(_[t]=Be)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}},ze=new Q(K),Xe=new Q(tt),Ye=new Q(at),Qe=new Q(ft),We=new Q(ot),Ke=new Q(Tt),Ge=new Q(yt),$e=new Q(_t),Ze=new Q(Pe),Je=new Q(qe),tn=new Q(De),en=new Q(xe),nn=new Q(_e),rn=new Q(re),an=new Q(Vt),sn=new Q(le);return{Animation:Q,Components:{BackgroundPosition:ze,BorderRadius:Xe,BoxModel:Ye,ColorProperties:Qe,ClipProperty:We,FilterEffects:Ke,HTMLAttributes:Ge,OpacityProperty:$e,TextProperties:Ze,TextWrite:Je,TransformMatrix:tn,ScrollProperty:en,ShadowProperties:nn,SVGCubicMorph:rn,SVGDraw:an,SVGTransform:sn},TweenExtra:B,fromTo:function(t,e,n,r){return r=r||{},new X(H(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new X(H(t),e,e,n)},TweenCollection:D,ProgressBar:z,allFromTo:function(t,e,n,r){return r=r||{},new D(H(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new D(H(t,!0),e,e,n)},Objects:c,Util:p,Easing:R,CubicBezier:V,Render:U,Interpolate:v,Process:M,Internals:j,Selector:H,Version:"2.0.0"}}));
+// KUTE.js Extra v2.0.1 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},n={duration:700,delay:0,easing:"linear"},r={},i={},a={},s={},o={},l={},u={supportedProperties:t,defaultValues:e,defaultOptions:n,prepareProperty:r,prepareStart:i,crossCheck:a,onStart:s,onComplete:o,linkProperty:l},p={},c={};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0);var s=V.Tween;(i=i||{}).delay=i.delay||n.delay;var o=[];return Array.from(t).map((function(t,l){o[l]=i||{},o[l].delay=l>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new s(t,e,r,o[l])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};q.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},q.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},q.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},q.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},q.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof q)e.chain(t.tweens);else{if(!(t instanceof V))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},q.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},q.prototype.removeTweens=function(){this.tweens=[]},q.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};D.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},D.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},D.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},D.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},D.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},D.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var B=V.Tween;var X=V.Tween;var z=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};z.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var Y=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(z);function Q(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},K={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:W,Util:{trueDimension:Q}};c.BackgroundPositionProperty=K;var G=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],$={};function Z(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}G.map((function(t){return $[t]=0}));var J={};G.forEach((function(t){J[t]=Z}));var tt={component:"borderRadiusProps",category:"borderRadius",properties:G,defaultValues:$,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Q(e)},onStart:J},Util:{trueDimension:Q}};c.BorderRadiusProperties=tt;var et=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],nt={};function rt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}et.map((function(t){return nt[t]=0}));var it={};et.map((function(t){return it[t]=rt}));var at={component:"boxModelProps",category:"boxModel",properties:et,defaultValues:nt,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Q(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:it}};c.BoxModelProperties=at;var st={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Q(e[0]),Q(e[1]),Q(e[2]),Q(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Q((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Q(n[1]),Q(n[2]),Q(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},ot={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:st,Util:{trueDimension:Q}};function lt(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function ut(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=ot;var pt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ct={};function ht(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=ut(n,r,i)})}pt.forEach((function(t){ct[t]="#000"}));var ft={};pt.map((function(t){return ft[t]=ht}));var dt={component:"colorProps",category:"colors",properties:pt,defaultValues:ct,Interpolate:{numbers:h,colors:ut},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return lt(e)},onStart:ft},Util:{trueColor:lt}};c.ColorProperties=dt;var vt=["fill","stroke","stop-color"],gt={};function mt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var yt={prepareStart:function(t,e){var n={};for(var r in e){var i=mt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=vt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=mt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(vt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,r,i){t.setAttribute(e,ut(n,r,i))})},r[a]=lt(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Q(l).u||Q(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Q(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=gt)}}},bt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:ut},functions:yt,Util:{replaceUppercase:mt,trueColor:lt,trueDimension:Q}};function wt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(ut(t[3],e[3],n)).join(" ")+")"}function xt(t){return t.replace("-r","R").replace("-s","S")}function St(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=lt(e[3]),e}function Mt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?wt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Et={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:ut,dropShadow:wt}},functions:Tt,Util:{parseDropShadow:St,parseFilterString:Mt,replaceDashNamespace:xt,trueColor:lt}};c.FilterEffects=Et;var _t={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},Ct={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:_t};c.OpacityProperty=Ct;var kt=function(t,e){return parseFloat(t)/100*e},It=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Pt=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var Vt={prepareStart:function(){return Ft(this.element)},prepareProperty:function(t,e){return Ft(this.element,e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){return jt(t,e,n,r)})}},Rt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h,paintDraw:jt},functions:Vt,Util:{getRectLength:It,getPolyLength:Pt,getLineLength:Ot,getCircleLength:At,getEllipseLength:Lt,getTotalLength:Ut,getDraw:Ft,percent:kt}};c.SVGDraw=Rt;function Ht(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Nt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function qt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Dt(t){if(!(t=qt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=zt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,D=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Kt(t,e){for(var n=Dt(t),r=e&&Dt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Jt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function te(t){var e=$t(t),n=[];return e.map((function(t,r){n[r]=Jt(e,r)})),n}function ee(t,e){var n=$t(t),r=$t(e),i=n.length-1,a=[],s=[],o=te(t);return o.map((function(t,e){for(var o=0,l=Gt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:ne(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Kt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Zt.call(this,r[0]):r[0],a=this._reverseSecondPath?Zt.call(this,r[1]):r[1];i=ee.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ie={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:ne},functions:re,Util:{l2c:Bt,q2c:Xt,a2c:zt,catmullRom2bezier:Ht,ellipsePath:Nt,path2curve:Kt,pathToAbsolute:Dt,toPathString:ne,parsePathString:qt,getRotatedCurve:ee,getRotations:te,getRotationSegments:Jt,reverseCurve:Zt,getSegments:$t,createPath:Gt}};function ae(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function se(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=oe.call(this,t,se(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ue={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:le,Util:{parseStringOrigin:ae,parseTransformString:se,parseTransformSVG:oe}};function pe(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ce(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=ue;var he=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},pe(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ce(t,e,i,r))}),r=a)}catch(t){}return i}(),fe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],de="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ve=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,ge=!!he&&{passive:!1};function me(t){this.scrolling&&t.preventDefault()}function ye(){var t=this.element;return t===ve?{el:document,st:document.body}:{el:t,st:t}}function be(){var t=ye.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,pe(t.el,fe[0],me,ge),pe(t.el,de,me,ge),t.st.style.pointerEvents="none")}function we(){var t=ye.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ce(t.el,fe[0],me,ge),ce(t.el,de,me,ge),t.st.style.pointerEvents="")}var xe={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ve,be.call(this),this.element===ve?window.pageYOffset||ve.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){we.call(this)}},Se={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:xe,Util:{preventScroll:me,scrollIn:be,scrollOut:we,scrollContainer:ve,passiveHandler:ge,getScrollTargets:ye}};c.ScrollProperty=Se;var Me=["boxShadow","textShadow"];function Te(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=lt(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Ee(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?ut(o,l,i)+a.join(" ")+u:ut(o,l,i)+a.join(" ")})}var _e={};Me.map((function(t){return _e[t]=Ee}));var Ce={component:"shadowProperties",properties:Me,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:ut},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Te(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Te(e,t));return e},onStart:_e},Util:{processShadowArray:Te,trueColor:lt}};c.ShadowProperties=Ce;var ke=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ie={};function Pe(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}ke.forEach((function(t){Ie[t]=Pe}));var Oe={component:"textProperties",category:"textProps",properties:ke,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Q(e)},onStart:Ie},Util:{trueDimension:Q}};function Ae(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Le(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),Ve=String("0123456789").split(""),Re=Ue.concat(Fe,Ve),He=Re.concat(je),Ne={alpha:Ue,upper:Fe,symbols:je,numeric:Ve,alphanumeric:Re,all:He};var qe={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in Ne?Ne[e]:e&&e.length?e:Ne[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},De={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:qe},Util:{charSet:Ne,createTextTweens:function(t,e,n){if(!t.playing){var r=V.Tween;(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var i=function(t,e){var n=Le(t,"text-part"),r=Le(Ae(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],p=0;return(u=(u=u.concat(o.map((function(t,e){return n.duration="auto"===n.duration?75*a[e].innerHTML.length:n.duration,n.delay=p,n.onComplete=null,p+=n.duration,new r(t,{text:t.innerHTML},{text:""},n)})))).concat(l.map((function(i,a){return n.duration="auto"===n.duration?75*s[a].innerHTML.length:n.duration,n.delay=p,n.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=n.duration,new r(i,{text:""},{text:s[a].innerHTML},n)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};c.TextWriteProperties=De;var Be="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Xe={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new Be,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=Be)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var ze in c.TransformMatrix=Xe,c){var Ye=c[ze];c[ze]=new Y(Ye)}return{Animation:Y,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new X(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new B(j(t),e,e,n)},TweenCollection:q,ProgressBar:D,allFromTo:function(t,e,n,r){return r=r||{},new q(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.1"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index b4bc347..e9051a5 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.0 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t=[],e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={},h={supportedProperties:r,defaultOptions:i,defaultValues:n,prepareProperty:s,prepareStart:a,crossCheck:o,onStart:u,onComplete:l,linkProperty:c};function f(t){var e=!(t in document.body.style),r=function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],r=0,n=e.length;r>0)/1e3;return n}},C=function(e){t.push(e)},A=function(e){var r=t.indexOf(e);-1!==r&&t.splice(r,1)},I=0;function M(e){for(var r=0;r(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var H={linear:new F(0,0,1,1,"linear"),easingSinusoidalIn:new F(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new F(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new F(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new F(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new F(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new F(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new F(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new F(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new F(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new F(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new F(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new F(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new F(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new F(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new F(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new F(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new F(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new F(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new F(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new F(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new F(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new F(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new F(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new F(.68,-.55,.265,1.55,"easingBackInOut")};function N(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof H[t])return H[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new F(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),H.linear};var V=function(t,e,r,n){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,n=n||{},this._resetStart=n.resetStart||0,this._easing="function"==typeof n.easing?n.easing:p.processEasing(n.easing),this._duration=n.duration||i.duration,this._delay=n.delay||i.delay,n){var s="_"+a;s in this||(this[s]=n[a])}var o=this._easing.name;return u[o]||(u[o]=function(t){!x[t]&&t===this._easing.name&&(x[t]=this._easing)}),this};V.prototype.start=function(t){if(C(this),this.playing=!0,this._startTime=t||x.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),u)if("function"==typeof u[e])u[e].call(this,e);else for(var r in u[e])u[e][r].call(this,r);P.call(this),this._startFired=!0}return!I&&M(),this},V.prototype.stop=function(){return this.playing&&(A(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},V.prototype.close=function(){for(var t in l)for(var e in l[t])l[t][e].call(this,e);this._startFired=!1,O.call(this)},V.prototype.update=function(t){var e,r;if((t=void 0!==t?t:x.Time())1?1:e,r=this._easing(e),this.valuesEnd)x[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},S.Tween=V,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var X=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(b.call(this,a,"end"),this._resetStart?this.valuesStart=n:b.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,y.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=x.Time()-this._pauseTime,C(this),!I&&M()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(A(this),this.paused=!0,this._pauseTime=x.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:x.Time())1?1:e,r=this._easing(e),this.valuesEnd)x[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(V);S.Tween=X;var z=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0);var s=S.Tween;(n=n||{}).delay=n.delay||i.delay;var o=[];return Array.from(t).map((function(t,l){o[l]=n||{},o[l].delay=l>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new s(t,e,r,o[l])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};z.prototype.start=function(t){return t=void 0===t?x.Time():t,this.tweens.map((function(e){return e.start(t)})),this},z.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},z.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},z.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},z.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof z)e.chain(t.tweens);else{if(!(t instanceof S))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},z.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},z.prototype.removeTweens=function(){this.tweens=[]},z.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=S.Tween;var B=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};B.prototype.setComponent=function(t){var e=t.component,h={prepareProperty:s,prepareStart:a,onStart:u,onComplete:l,crossCheck:o},f=t.category,d=t.property,v=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(r[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)n[d]=t.defaultValue,this.supports=d+" property";else if(t.defaultValues){for(var g in t.defaultValues)n[g]=t.defaultValues[g];this.supports=(v||d)+" "+(d||f)+" properties"}if(t.defaultOptions)for(var m in t.defaultOptions)i[m]=t.defaultOptions[m];if(t.functions)for(var y in h)if(y in t.functions)if("function"==typeof t.functions[y])!h[y][e]&&(h[y][e]={}),!h[y][e][f||d]&&(h[y][e][f||d]=t.functions[y]);else for(var b in t.functions[y])!h[y][e]&&(h[y][e]={}),!h[y][e][b]&&(h[y][e][b]=t.functions[y][b]);if(t.Interpolate){for(var w in t.Interpolate){var T=t.Interpolate[w];if("function"!=typeof T||E[w])for(var S in T)"function"!=typeof T[S]||E[w]||(E[w]=T[S]);else E[w]=T}c[e]=t.Interpolate}if(t.Util)for(var x in t.Util)!p[x]&&(p[x]=t.Util[x]);return this};var R=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],Y={};function Q(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(e,r,n,i){e.style[t]=(i>.99||i<.01?(10*_(r,n,i)>>0)/10:_(r,n,i)>>0)+"px"})}R.map((function(t){return Y[t]=0}));var K={};R.map((function(t){return K[t]=Q}));var W={component:"boxModelProps",category:"boxModel",properties:R,defaultValues:Y,Interpolate:{numbers:_},functions:{prepareStart:function(t){return m(this.element,t)||n[t]},prepareProperty:function(t,e){var r=d(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:K}};function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?_(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*_(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=W;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],G={};function $(t){this.valuesEnd[t]&&!x[t]&&(x[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){G[t]="#000"}));var J={};q.map((function(t){return J[t]=$}));var tt={component:"colorProps",category:"colors",properties:q,defaultValues:G,Interpolate:{numbers:_,colors:Z},functions:{prepareStart:function(t,e){return m(this.element,t)||n[t]},prepareProperty:function(t,e){return v(e)},onStart:J},Util:{trueColor:v}};e.ColorProperties=tt;var et=["fill","stroke","stop-color"],rt={};function nt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var it={prepareStart:function(t,e){var r={};for(var n in e){var i=nt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=et.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=nt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(et.includes(a))u.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=v(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var l=d(o).u||d(e[i]).u,c=/%/.test(l)?"_percent":"_"+l;u.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*_(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=d(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(u.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*_(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!x[t]&&this.valuesEnd[t]&&(x[t]=function(t,e,r,n){for(var i in r)x.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!x[t]&&this.valuesEnd.attr&&(x[t]=rt)}}},at={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:_,colors:Z},functions:it,Util:{replaceUppercase:nt,trueColor:v,trueDimension:d}};e.HTMLAttributes=at;var st={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(e,r,n,i){e.style[t]=(1e3*_(r,n,i)>>0)/1e3})}},ot={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:_},functions:st};function lt(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function ut(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ft=String("0123456789").split(""),dt=ct.concat(pt,ft),vt=dt.concat(ht),gt={alpha:ct,upper:pt,symbols:ht,numeric:ft,alphanumeric:dt,all:vt};var mt={text:function(t){if(!x[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in gt?gt[e]:e&&e.length?e:gt[i.textChars];x[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(t,e,r,n){t.innerHTML=_(e,r,n)>>0})}},yt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:_},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:mt},Util:{charSet:gt,createTextTweens:function(t,e,r){if(!t.playing){var n=S.Tween;(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var i=function(t,e){var r=ut(t,"text-part"),n=ut(lt(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],c=0;return(u=(u=u.concat(o.map((function(t,e){return r.duration="auto"===r.duration?75*a[e].innerHTML.length:r.duration,r.delay=c,r.onComplete=null,c+=r.duration,new n(t,{text:t.innerHTML},{text:""},r)})))).concat(l.map((function(i,a){return r.duration="auto"===r.duration?75*s[a].innerHTML.length:r.duration,r.delay=c,r.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,c+=r.duration,new n(i,{text:""},{text:s[a].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function bt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function wt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function Tt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function St(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function xt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function _t(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function Et(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=yt;var Ct={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=g(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!x[t]&&this.valuesEnd[t]&&(x[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?bt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?wt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?St(r.translate,n.translate,"px",i):"")+(r.rotate3d?Tt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?xt(r.rotate,n.rotate,"deg",i):"")+(r.skew?_t(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?Et(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:bt,translate3d:wt,rotate3d:Tt,translate:St,rotate:xt,scale:Et,skew:_t}};function At(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function It(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Ct;var Mt=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},At(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),It(t,e,i,n))}),n=a)}catch(t){}return i}(),kt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],Ot="ontouchstart"in window||navigator&&navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Pt=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.getElementsByTagName("HTML")[0],Lt=!!Mt&&{passive:!1};function jt(t){this.scrolling&&t.preventDefault()}function Ut(){var t=this.element;return t===Pt?{el:document,st:document.body}:{el:t,st:t}}function Ft(){var t=Ut.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,At(t.el,kt[0],jt,Lt),At(t.el,Ot,jt,Lt),t.st.style.pointerEvents="none")}function Ht(){var t=Ut.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,It(t.el,kt[0],jt,Lt),It(t.el,Ot,jt,Lt),t.st.style.pointerEvents="")}var Nt={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Pt,Ft.call(this),this.element===Pt?window.pageYOffset||Pt.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(t,e,r,n){t.scrollTop=_(e,r,n)>>0})},onComplete:function(t){Ht.call(this)}},Vt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:_},functions:Nt,Util:{preventScroll:jt,scrollIn:Ft,scrollOut:Ht,scrollContainer:Pt,passiveHandler:Lt,getScrollTargets:Ut}};e.ScrollProperty=Vt;var Xt=function(t,e){return parseFloat(t)/100*e},zt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Dt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*_(e.s,r.s,n)>>0)/100,s=(100*_(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var Zt={prepareStart:function(){return Kt(this.element)},prepareProperty:function(t,e){return Kt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!x[t]&&(x[t]=function(t,e,r,n){return Wt(t,e,r,n)})}},qt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:_,paintDraw:Wt},functions:Zt,Util:{getRectLength:zt,getPolyLength:Dt,getLineLength:Bt,getCircleLength:Rt,getEllipseLength:Yt,getTotalLength:Qt,getDraw:Kt,percent:Xt}};function Gt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=qt;var $t="Invalid path value";function Jt(t){return"number"==typeof t&&isFinite(t)}function te(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function ee(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function re(t,e){return te(t,e)<1e-9}var ne={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},ie=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ae(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&ie.indexOf(t)>=0}function se(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function oe(t){return 97==(32|t)}function le(t){return t>=48&&t<=57}function ue(t){return t>=48&&t<=57||43===t||45===t||46===t}function ce(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function pe(t){for(;t.index=i)t.err="KUTE.js - "+$t;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=ne[r]&&(t.result.push([e].concat(n.splice(0,ne[r]))),ne[r]););}function ve(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=oe(e=t.path.charCodeAt(t.index)),se(e))if(i=ne[t.path[t.index].toLowerCase()],t.index++,pe(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?fe(t):he(t),t.err.length)return;t.data.push(t.param),pe(t),n=!1,t.index=t.max)break;if(!ue(t.path.charCodeAt(t.index)))break}}de(t)}else de(t);else t.err="KUTE.js - "+$t}function ge(t){var e=new ce(t),r=e.max;for(pe(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=ee(n,i,.5),t.splice(r+1,0,i)}function Ie(t,e){var r,n;if("string"==typeof t){var i=be(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError($t);if(!Me(r=t.slice(0)))throw new TypeError($t);return r.length>1&&re(r[0],r[r.length-1])&&r.pop(),Ee(r)>0&&r.reverse(),!n&&e&&Jt(e)&&e>0&&Ae(r,e),r}function Me(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Jt(t[0])&&Jt(t[1])}))}function ke(t,e,r){var n=Ie(t,r=r||i.morphPrecision),a=Ie(e,r),s=n.length-a.length;return Ce(n,s<0?-1*s:0),Ce(a,s>0?s:0),xe(n,a),[n,a]}me.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},me.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var Oe={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?N(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!x[t]&&this.valuesEnd[t]&&(x[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Gt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=ke(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},Pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Gt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:Oe,Util:{INVALID_INPUT:$t,isFiniteNumber:Jt,distance:te,pointAlong:ee,samePoint:re,paramCounts:ne,SPECIAL_SPACES:ie,isSpace:ae,isCommand:se,isArc:oe,isDigit:le,isDigitStart:ue,State:ce,skipSpaces:pe,scanFlag:he,scanParam:fe,finalizeSegment:de,scanSegment:ve,pathParse:ge,SvgPath:me,split:ye,pathStringToRing:be,exactRing:we,approximateRing:Te,measure:Se,rotateRing:xe,polygonLength:_e,polygonArea:Ee,addPoints:Ce,bisect:Ae,normalizeRing:Ie,validRing:Me,getInterpolationPoints:ke}};function Le(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function je(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=Ue.call(this,t,je(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},He={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:_},functions:Fe,Util:{parseStringOrigin:Le,parseTransformString:je,parseTransformSVG:Ue}};for(var Ne in e.SVGTransformProperty=He,e){var Ve=e[Ne];e[Ne]=new B(Ve)}return{Animation:B,Components:e,Tween:X,fromTo:function(t,e,r,n){return n=n||{},new D(N(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new D(N(t),e,e,r)},TweenCollection:z,allFromTo:function(t,e,r,n){return n=n||{},new z(N(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new z(N(t,!0),e,e,r)},Objects:h,Util:p,Easing:H,CubicBezier:F,Render:L,Interpolate:E,Process:w,Internals:U,Selector:N,Version:"2.0.0"}}));
+// KUTE.js Standard v2.0.1 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:l,onComplete:u,linkProperty:c};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],l=r[s];for(var u in o){var c={};for(var p in t)n[p]&&o[p]?i[p]=o[p].call(this,p,t[p]):!n[u]&&"transform"===u&&l.includes(p)?c[p]=t[p]:!n[u]&&l&&l.includes(p)&&(i[p]=o[u].call(this,p,t[p]));Object.keys&&Object.keys(c).length&&(i[u]=o[u].call(this,u,c))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var l in o)(l===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[l].call(this,i,this.valuesStart[i]))}for(var u in e)u in this.valuesStart||(t[u]=e[u]||n[u]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function w(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var b={},T="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function S(t,e,r){return(t=+t)+(e-=t)*r}var x={numbers:S,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return l[u]||(l[u]=function(t){!b[t]&&t===this._easing.name&&(b[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||b.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var r in l[e])l[e][r].call(this,r);k.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(w(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in u)for(var e in u[t])u[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=b.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(w(this),this.paused=!0,this._pauseTime=b.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0);var s=U.Tween;(n=n||{}).delay=n.delay||i.delay;var o=[];return Array.from(t).map((function(t,l){o[l]=n||{},o[l].delay=l>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new s(t,e,r,o[l])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(t){return t=void 0===t?b.Time():t,this.tweens.map((function(e){return e.start(t)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof U))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var V=U.Tween;var X=U.Tween;var D=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function z(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*S(r,n,i)>>0)/10:S(r,n,i)>>0)+"px"})}B.map((function(t){return R[t]=0}));var Q={};B.map((function(t){return Q[t]=Y}));var K={component:"boxModelProps",category:"boxModel",properties:B,defaultValues:R,Interpolate:{numbers:S},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=z(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:Q}};function Z(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function q(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?S(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*S(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=K;var W=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],G={};function $(t){this.valuesEnd[t]&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=q(r,n,i)})}W.forEach((function(t){G[t]="#000"}));var J={};W.map((function(t){return J[t]=$}));var tt={component:"colorProps",category:"colors",properties:W,defaultValues:G,Interpolate:{numbers:S,colors:q},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return Z(e)},onStart:J},Util:{trueColor:Z}};e.ColorProperties=tt;var et=["fill","stroke","stop-color"],rt={};function nt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var it={prepareStart:function(t,e){var r={};for(var n in e){var i=nt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=et.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=nt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(et.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){t.setAttribute(e,q(r,n,i))})},r[a]=Z(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=z(o).u||z(e[i]).u,c=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*S(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=z(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*S(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){for(var i in r)b.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!b[t]&&this.valuesEnd.attr&&(b[t]=rt)}}},at={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:S,colors:q},functions:it,Util:{replaceUppercase:nt,trueColor:Z,trueDimension:z}};e.HTMLAttributes=at;var st={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=(1e3*S(r,n,i)>>0)/1e3})}},ot={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:S},functions:st};function lt(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function ut(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ft=String("0123456789").split(""),dt=ct.concat(pt,ft),vt=dt.concat(ht),gt={alpha:ct,upper:pt,symbols:ht,numeric:ft,alphanumeric:dt,all:vt};var mt={text:function(t){if(!b[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in gt?gt[e]:e&&e.length?e:gt[i.textChars];b[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.innerHTML=S(e,r,n)>>0})}},yt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:S},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:mt},Util:{charSet:gt,createTextTweens:function(t,e,r){if(!t.playing){var n=U.Tween;(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var i=function(t,e){var r=ut(t,"text-part"),n=ut(lt(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],c=0;return(u=(u=u.concat(o.map((function(t,e){return r.duration="auto"===r.duration?75*a[e].innerHTML.length:r.duration,r.delay=c,r.onComplete=null,c+=r.duration,new n(t,{text:t.innerHTML},{text:""},r)})))).concat(l.map((function(i,a){return r.duration="auto"===r.duration?75*s[a].innerHTML.length:r.duration,r.delay=c,r.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,c+=r.duration,new n(i,{text:""},{text:s[a].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function wt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function bt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function Tt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function St(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function xt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function _t(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function Et(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=yt;var Ct={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?wt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?bt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?St(r.translate,n.translate,"px",i):"")+(r.rotate3d?Tt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?xt(r.rotate,n.rotate,"deg",i):"")+(r.skew?_t(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?Et(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:wt,translate3d:bt,rotate3d:Tt,translate:St,rotate:xt,scale:Et,skew:_t}};function At(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function It(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Ct;var Mt=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},At(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),It(t,e,i,n))}),n=a)}catch(t){}return i}(),kt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],Ot="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Pt=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Lt=!!Mt&&{passive:!1};function jt(t){this.scrolling&&t.preventDefault()}function Ut(){var t=this.element;return t===Pt?{el:document,st:document.body}:{el:t,st:t}}function Ft(){var t=Ut.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,At(t.el,kt[0],jt,Lt),At(t.el,Ot,jt,Lt),t.st.style.pointerEvents="none")}function Ht(){var t=Ut.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,It(t.el,kt[0],jt,Lt),It(t.el,Ot,jt,Lt),t.st.style.pointerEvents="")}var Nt={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Pt,Ft.call(this),this.element===Pt?window.pageYOffset||Pt.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.scrollTop=S(e,r,n)>>0})},onComplete:function(t){Ht.call(this)}},Vt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:S},functions:Nt,Util:{preventScroll:jt,scrollIn:Ft,scrollOut:Ht,scrollContainer:Pt,passiveHandler:Lt,getScrollTargets:Ut}};e.ScrollProperty=Vt;var Xt=function(t,e){return parseFloat(t)/100*e},Dt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},zt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*S(e.s,r.s,n)>>0)/100,s=(100*S(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var qt={prepareStart:function(){return Kt(this.element)},prepareProperty:function(t,e){return Kt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){return Zt(t,e,r,n)})}},Wt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S,paintDraw:Zt},functions:qt,Util:{getRectLength:Dt,getPolyLength:zt,getLineLength:Bt,getCircleLength:Rt,getEllipseLength:Yt,getTotalLength:Qt,getDraw:Kt,percent:Xt}};function Gt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=Wt;var $t="Invalid path value";function Jt(t){return"number"==typeof t&&isFinite(t)}function te(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function ee(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function re(t,e){return te(t,e)<1e-9}var ne={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},ie=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ae(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&ie.indexOf(t)>=0}function se(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function oe(t){return 97==(32|t)}function le(t){return t>=48&&t<=57}function ue(t){return t>=48&&t<=57||43===t||45===t||46===t}function ce(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function pe(t){for(;t.index=i)t.err="KUTE.js - "+$t;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=ne[r]&&(t.result.push([e].concat(n.splice(0,ne[r]))),ne[r]););}function ve(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=oe(e=t.path.charCodeAt(t.index)),se(e))if(i=ne[t.path[t.index].toLowerCase()],t.index++,pe(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?fe(t):he(t),t.err.length)return;t.data.push(t.param),pe(t),n=!1,t.index=t.max)break;if(!ue(t.path.charCodeAt(t.index)))break}}de(t)}else de(t);else t.err="KUTE.js - "+$t}function ge(t){var e=new ce(t),r=e.max;for(pe(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=ee(n,i,.5),t.splice(r+1,0,i)}function Ie(t,e){var r,n;if("string"==typeof t){var i=we(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError($t);if(!Me(r=t.slice(0)))throw new TypeError($t);return r.length>1&&re(r[0],r[r.length-1])&&r.pop(),Ee(r)>0&&r.reverse(),!n&&e&&Jt(e)&&e>0&&Ae(r,e),r}function Me(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Jt(t[0])&&Jt(t[1])}))}function ke(t,e,r){var n=Ie(t,r=r||i.morphPrecision),a=Ie(e,r),s=n.length-a.length;return Ce(n,s<0?-1*s:0),Ce(a,s>0?s:0),xe(n,a),[n,a]}me.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},me.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var Oe={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Gt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=ke(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},Pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Gt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:Oe,Util:{INVALID_INPUT:$t,isFiniteNumber:Jt,distance:te,pointAlong:ee,samePoint:re,paramCounts:ne,SPECIAL_SPACES:ie,isSpace:ae,isCommand:se,isArc:oe,isDigit:le,isDigitStart:ue,State:ce,skipSpaces:pe,scanFlag:he,scanParam:fe,finalizeSegment:de,scanSegment:ve,pathParse:ge,SvgPath:me,split:ye,pathStringToRing:we,exactRing:be,approximateRing:Te,measure:Se,rotateRing:xe,polygonLength:_e,polygonArea:Ee,addPoints:Ce,bisect:Ae,normalizeRing:Ie,validRing:Me,getInterpolationPoints:ke}};function Le(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function je(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=Ue.call(this,t,je(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},He={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:Fe,Util:{parseStringOrigin:Le,parseTransformString:je,parseTransformSVG:Ue}};for(var Ne in e.SVGTransformProperty=He,e){var Ve=e[Ne];e[Ne]=new D(Ve)}return{Animation:D,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new X(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t),e,e,r)},TweenCollection:N,allFromTo:function(t,e,r,n){return n=n||{},new N(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t,!0),e,e,r)},Objects:p,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:x,Process:g,Internals:O,Selector:j,Version:"2.0.1"}}));
diff --git a/src/polyfill.min.js b/src/polyfill.min.js
index b279d33..7c165cd 100644
--- a/src/polyfill.min.js
+++ b/src/polyfill.min.js
@@ -1,2 +1,2 @@
 "use strict";
-if(window.addEventListener&&Window.prototype.addEventListener||(window.addEventListener=Window.prototype.addEventListener=Document.prototype.addEventListener=Element.prototype.addEventListener=function(){var e=this,t=arguments[0],n=arguments[1];e._events||(e._events={}),e._events[t]||(e._events[t]=function(t){var n,o=e._events[t.type].list,i=o.slice(),r=-1,a=i.length;for(t.preventDefault=function(){!1!==t.cancelable&&(t.returnValue=!1)},t.stopPropagation=function(){t.cancelBubble=!0},t.stopImmediatePropagation=function(){t.cancelBubble=!0,t.cancelImmediate=!0},t.currentTarget=e,t.relatedTarget=t.fromElement||null,t.target=t.target||t.srcElement||e,t.timeStamp=(new Date).getTime(),t.clientX&&(t.pageX=t.clientX+document.documentElement.scrollLeft,t.pageY=t.clientY+document.documentElement.scrollTop);++r0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p=0?e=i:(e=n+i)<0&&(e=0);e
 
     
-    
+    
     
     
     
diff --git a/textWrite.html b/textWrite.html
index 3ffb461..7f78d8f 100644
--- a/textWrite.html
+++ b/textWrite.html
@@ -233,18 +233,6 @@ tweenObjects.start();
         
  • For a full code review, check out the ./assets/js/textWrite.js example source code.
    • 
       
 
-      
     
 
     

From 7e098ab567e19160ed056be5f825ab3d1d7bb3a8 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 10 Jun 2020 13:40:18 +0000
Subject: [PATCH 149/187]

---
 src/kute-base.js      |  3 +--
 src/kute-base.min.js  |  2 +-
 src/kute-extra.js     | 10 ++++------
 src/kute-extra.min.js |  2 +-
 src/kute.min.js       |  2 +-
 5 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/kute-base.js b/src/kute-base.js
index 966b258..9676670 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -366,10 +366,9 @@
   };
   TweenConstructor.Tween = TweenBase;
 
-  var TC = TweenConstructor.Tween;
   function fromTo(element, startObject, endObject, optionsObj) {
     optionsObj = optionsObj || {};
-    return new TC(selector(element), startObject, endObject, optionsObj)
+    return new TweenConstructor.Tween(selector(element), startObject, endObject, optionsObj)
   }
 
   function perspective(a, b, u, v) {
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index 98ca310..9a8ad31 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Base v2.0.1 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={duration:700,delay:0,easing:"linear"},e={},n={},r={},o={},i={defaultOptions:t,linkProperty:e,onStart:n,onComplete:r,supportedProperties:o},s={};var a={linear:function(t){return t},easingQuadraticIn:function(t){return t*t},easingQuadraticOut:function(t){return t*(2-t)},easingQuadraticInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easingCubicIn:function(t){return t*t*t},easingCubicOut:function(t){return--t*t*t+1},easingCubicInOut:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easingCircularIn:function(t){return-(Math.sqrt(1-t*t)-1)},easingCircularOut:function(t){return Math.sqrt(1-(t-=1)*t)},easingCircularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},easingBackIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},easingBackOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},easingBackInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)}};s.processEasing=function(t){return"function"==typeof t?t:"string"==typeof t?a[t]:a.linear};var u=[];function l(t){return u.push(t)}function c(t){var e=u.indexOf(t);-1!==e&&u.splice(e,1)}var f={},p="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function d(t,e,n){return(t=+t)+(e-=t)*n}var v={numbers:d,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],o=0,i=e.length;o>0)/1e3;return r}},h={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?h.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(h.now=self.performance.now.bind(self.performance));var m=0,y=function(t){for(var e=0;e1?1:e,n=this._easing(e),this.valuesEnd)f[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},O.Tween=S;var I=O.Tween;function M(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function x(t,e,n,r){for(var o=[],i=0;i<3;i++)o[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function U(t,e,n,r){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function j(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+o.join(",")+")"}function A(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function B(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}function P(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var q={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!f[t]&&this.valuesEnd[t]&&(f[t]=function(e,n,r,o){e.style[t]=(n.perspective||r.perspective?M(n.perspective,r.perspective,"px",o):"")+(n.translate3d?x(n.translate3d,r.translate3d,"px",o):"")+(n.translate?j(n.translate,r.translate,"px",o):"")+(n.rotate3d?U(n.rotate3d,r.rotate3d,"deg",o):"")+(n.rotate||r.rotate?A(n.rotate,r.rotate,"deg",o):"")+(n.skew?B(n.skew,r.skew,"deg",o):"")+(n.scale||r.scale?P(n.scale,r.scale,o):"")})}},Interpolate:{perspective:M,translate3d:x,rotate3d:U,translate:j,rotate:A,scale:P,skew:B}};function F(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(o>.99||o<.01?(10*d(n,r,o)>>0)/10:d(n,r,o)>>0)+"px"})}var L=["top","left","width","height"],X={};L.map((function(t){return X[t]=F}));var Y={component:"boxModelProps",category:"boxModel",properties:L,Interpolate:{numbers:d},functions:{onStart:X}};var D={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(1e3*d(n,r,o)>>0)/1e3})}}};function K(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function Q(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var Z=function(){var t,e,n,r,o=!1;try{var i=Object.defineProperty({},"passive",{get:function(){o=!0}});t=document,n=function(){},K(t,e="DOMContentLoaded",(function o(i){i.target===t&&(n(i),Q(t,e,o,r))}),r=i)}catch(t){}return o}(),z="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],H="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",G=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,N=!!Z&&{passive:!1};function R(t){this.scrolling&&t.preventDefault()}function V(){var t=this.element;return t===G?{el:document,st:document.body}:{el:t,st:t}}function W(){var t=V.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,Q(t.el,z[0],R,N),Q(t.el,H,R,N),t.st.style.pointerEvents="")}var J={component:"scrollProperty",property:"scroll",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(t,e,n,r){t.scrollTop=d(e,n,r)>>0})},onComplete:function(t){W.call(this)}},Util:{preventScroll:R,scrollIn:function(){var t=V.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,K(t.el,z[0],R,N),K(t.el,H,R,N),t.st.style.pointerEvents="none")},scrollOut:W,scrollContainer:G,passiveHandler:N,getScrollTargets:V}};($="transform")in document.body.style||(function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=0,r=e.length;n>0)/1e3;return r}},h={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?h.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(h.now=self.performance.now.bind(self.performance));var m=0,y=function(t){for(var e=0;e>0)/1e3+n+")"}function M(t,e,n,r){for(var o=[],i=0;i<3;i++)o[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function x(t,e,n,r){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function U(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+o.join(",")+")"}function j(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function A(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}function B(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}S.prototype.start=function(t){if(l(this),this.playing=!0,this._startTime=t||f.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),n)if("function"==typeof n[e])n[e].call(this,e);else for(var r in n[e])n[e][r].call(this,r);E.call(this),this._startFired=!0}return!m&&y(),this},S.prototype.stop=function(){return this.playing&&(c(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},S.prototype.close=function(){for(var t in r)for(var e in r[t])r[t][e].call(this,e);this._startFired=!1,g.call(this)},S.prototype.update=function(t){var e,n;if((t=void 0!==t?t:f.Time())1?1:e,n=this._easing(e),this.valuesEnd)f[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},O.Tween=S;var P={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!f[t]&&this.valuesEnd[t]&&(f[t]=function(e,n,r,o){e.style[t]=(n.perspective||r.perspective?I(n.perspective,r.perspective,"px",o):"")+(n.translate3d?M(n.translate3d,r.translate3d,"px",o):"")+(n.translate?U(n.translate,r.translate,"px",o):"")+(n.rotate3d?x(n.rotate3d,r.rotate3d,"deg",o):"")+(n.rotate||r.rotate?j(n.rotate,r.rotate,"deg",o):"")+(n.skew?A(n.skew,r.skew,"deg",o):"")+(n.scale||r.scale?B(n.scale,r.scale,o):"")})}},Interpolate:{perspective:I,translate3d:M,rotate3d:x,translate:U,rotate:j,scale:B,skew:A}};function q(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(o>.99||o<.01?(10*d(n,r,o)>>0)/10:d(n,r,o)>>0)+"px"})}var F=["top","left","width","height"],L={};F.map((function(t){return L[t]=q}));var X={component:"boxModelProps",category:"boxModel",properties:F,Interpolate:{numbers:d},functions:{onStart:L}};var Y={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(1e3*d(n,r,o)>>0)/1e3})}}};function D(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function K(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var Q=function(){var t,e,n,r,o=!1;try{var i=Object.defineProperty({},"passive",{get:function(){o=!0}});t=document,n=function(){},D(t,e="DOMContentLoaded",(function o(i){i.target===t&&(n(i),K(t,e,o,r))}),r=i)}catch(t){}return o}(),Z="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],z="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",H=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,G=!!Q&&{passive:!1};function N(t){this.scrolling&&t.preventDefault()}function R(){var t=this.element;return t===H?{el:document,st:document.body}:{el:t,st:t}}function V(){var t=R.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,K(t.el,Z[0],N,G),K(t.el,z,N,G),t.st.style.pointerEvents="")}var W={component:"scrollProperty",property:"scroll",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(t,e,n,r){t.scrollTop=d(e,n,r)>>0})},onComplete:function(t){V.call(this)}},Util:{preventScroll:N,scrollIn:function(){var t=R.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,D(t.el,Z[0],N,G),D(t.el,z,N,G),t.st.style.pointerEvents="none")},scrollOut:V,scrollContainer:H,passiveHandler:G,getScrollTargets:R}};(J="transform")in document.body.style||(function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=0,r=e.length;n>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0);var s=V.Tween;(i=i||{}).delay=i.delay||n.delay;var o=[];return Array.from(t).map((function(t,l){o[l]=i||{},o[l].delay=l>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new s(t,e,r,o[l])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};q.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},q.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},q.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},q.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},q.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof q)e.chain(t.tweens);else{if(!(t instanceof V))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},q.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},q.prototype.removeTweens=function(){this.tweens=[]},q.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};D.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},D.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},D.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},D.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},D.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},D.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var B=V.Tween;var X=V.Tween;var z=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};z.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var Y=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(z);function Q(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},K={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:W,Util:{trueDimension:Q}};c.BackgroundPositionProperty=K;var G=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],$={};function Z(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}G.map((function(t){return $[t]=0}));var J={};G.forEach((function(t){J[t]=Z}));var tt={component:"borderRadiusProps",category:"borderRadius",properties:G,defaultValues:$,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Q(e)},onStart:J},Util:{trueDimension:Q}};c.BorderRadiusProperties=tt;var et=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],nt={};function rt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}et.map((function(t){return nt[t]=0}));var it={};et.map((function(t){return it[t]=rt}));var at={component:"boxModelProps",category:"boxModel",properties:et,defaultValues:nt,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Q(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:it}};c.BoxModelProperties=at;var st={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Q(e[0]),Q(e[1]),Q(e[2]),Q(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Q((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Q(n[1]),Q(n[2]),Q(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},ot={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:st,Util:{trueDimension:Q}};function lt(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function ut(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=ot;var pt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ct={};function ht(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=ut(n,r,i)})}pt.forEach((function(t){ct[t]="#000"}));var ft={};pt.map((function(t){return ft[t]=ht}));var dt={component:"colorProps",category:"colors",properties:pt,defaultValues:ct,Interpolate:{numbers:h,colors:ut},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return lt(e)},onStart:ft},Util:{trueColor:lt}};c.ColorProperties=dt;var vt=["fill","stroke","stop-color"],gt={};function mt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var yt={prepareStart:function(t,e){var n={};for(var r in e){var i=mt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=vt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=mt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(vt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,r,i){t.setAttribute(e,ut(n,r,i))})},r[a]=lt(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Q(l).u||Q(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Q(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=gt)}}},bt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:ut},functions:yt,Util:{replaceUppercase:mt,trueColor:lt,trueDimension:Q}};function wt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(ut(t[3],e[3],n)).join(" ")+")"}function xt(t){return t.replace("-r","R").replace("-s","S")}function St(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=lt(e[3]),e}function Mt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?wt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Et={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:ut,dropShadow:wt}},functions:Tt,Util:{parseDropShadow:St,parseFilterString:Mt,replaceDashNamespace:xt,trueColor:lt}};c.FilterEffects=Et;var _t={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},Ct={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:_t};c.OpacityProperty=Ct;var kt=function(t,e){return parseFloat(t)/100*e},It=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Pt=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var Vt={prepareStart:function(){return Ft(this.element)},prepareProperty:function(t,e){return Ft(this.element,e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){return jt(t,e,n,r)})}},Rt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h,paintDraw:jt},functions:Vt,Util:{getRectLength:It,getPolyLength:Pt,getLineLength:Ot,getCircleLength:At,getEllipseLength:Lt,getTotalLength:Ut,getDraw:Ft,percent:kt}};c.SVGDraw=Rt;function Ht(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Nt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function qt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Dt(t){if(!(t=qt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=zt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,D=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Kt(t,e){for(var n=Dt(t),r=e&&Dt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Jt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function te(t){var e=$t(t),n=[];return e.map((function(t,r){n[r]=Jt(e,r)})),n}function ee(t,e){var n=$t(t),r=$t(e),i=n.length-1,a=[],s=[],o=te(t);return o.map((function(t,e){for(var o=0,l=Gt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:ne(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Kt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Zt.call(this,r[0]):r[0],a=this._reverseSecondPath?Zt.call(this,r[1]):r[1];i=ee.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ie={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:ne},functions:re,Util:{l2c:Bt,q2c:Xt,a2c:zt,catmullRom2bezier:Ht,ellipsePath:Nt,path2curve:Kt,pathToAbsolute:Dt,toPathString:ne,parsePathString:qt,getRotatedCurve:ee,getRotations:te,getRotationSegments:Jt,reverseCurve:Zt,getSegments:$t,createPath:Gt}};function ae(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function se(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=oe.call(this,t,se(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ue={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:le,Util:{parseStringOrigin:ae,parseTransformString:se,parseTransformSVG:oe}};function pe(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ce(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=ue;var he=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},pe(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ce(t,e,i,r))}),r=a)}catch(t){}return i}(),fe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],de="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ve=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,ge=!!he&&{passive:!1};function me(t){this.scrolling&&t.preventDefault()}function ye(){var t=this.element;return t===ve?{el:document,st:document.body}:{el:t,st:t}}function be(){var t=ye.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,pe(t.el,fe[0],me,ge),pe(t.el,de,me,ge),t.st.style.pointerEvents="none")}function we(){var t=ye.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ce(t.el,fe[0],me,ge),ce(t.el,de,me,ge),t.st.style.pointerEvents="")}var xe={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ve,be.call(this),this.element===ve?window.pageYOffset||ve.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){we.call(this)}},Se={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:xe,Util:{preventScroll:me,scrollIn:be,scrollOut:we,scrollContainer:ve,passiveHandler:ge,getScrollTargets:ye}};c.ScrollProperty=Se;var Me=["boxShadow","textShadow"];function Te(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=lt(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Ee(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?ut(o,l,i)+a.join(" ")+u:ut(o,l,i)+a.join(" ")})}var _e={};Me.map((function(t){return _e[t]=Ee}));var Ce={component:"shadowProperties",properties:Me,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:ut},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Te(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Te(e,t));return e},onStart:_e},Util:{processShadowArray:Te,trueColor:lt}};c.ShadowProperties=Ce;var ke=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ie={};function Pe(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}ke.forEach((function(t){Ie[t]=Pe}));var Oe={component:"textProperties",category:"textProps",properties:ke,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Q(e)},onStart:Ie},Util:{trueDimension:Q}};function Ae(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Le(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),Ve=String("0123456789").split(""),Re=Ue.concat(Fe,Ve),He=Re.concat(je),Ne={alpha:Ue,upper:Fe,symbols:je,numeric:Ve,alphanumeric:Re,all:He};var qe={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in Ne?Ne[e]:e&&e.length?e:Ne[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},De={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:qe},Util:{charSet:Ne,createTextTweens:function(t,e,n){if(!t.playing){var r=V.Tween;(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var i=function(t,e){var n=Le(t,"text-part"),r=Le(Ae(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],p=0;return(u=(u=u.concat(o.map((function(t,e){return n.duration="auto"===n.duration?75*a[e].innerHTML.length:n.duration,n.delay=p,n.onComplete=null,p+=n.duration,new r(t,{text:t.innerHTML},{text:""},n)})))).concat(l.map((function(i,a){return n.duration="auto"===n.duration?75*s[a].innerHTML.length:n.duration,n.delay=p,n.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=n.duration,new r(i,{text:""},{text:s[a].innerHTML},n)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};c.TextWriteProperties=De;var Be="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Xe={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new Be,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=Be)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var ze in c.TransformMatrix=Xe,c){var Ye=c[ze];c[ze]=new Y(Ye)}return{Animation:Y,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new X(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new B(j(t),e,e,n)},TweenCollection:q,ProgressBar:D,allFromTo:function(t,e,n,r){return r=r||{},new q(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.1"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},n={duration:700,delay:0,easing:"linear"},r={},i={},a={},s={},o={},l={},u={supportedProperties:t,defaultValues:e,defaultOptions:n,prepareProperty:r,prepareStart:i,crossCheck:a,onStart:s,onComplete:o,linkProperty:l},p={},c={};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,D=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0),(i=i||{}).delay=i.delay||n.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=i||{},s[o].delay=o>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new q(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};D.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},D.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},D.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},D.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},D.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof D)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},D.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},D.prototype.removeTweens=function(){this.tweens=[]},D.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var B=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};B.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},B.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},B.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},B.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},B.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},B.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var X=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};X.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:Q,Util:{trueDimension:Y}};c.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};c.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};c.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};c.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=gt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=ot(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Y(l).u||Y(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Y(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};c.FilterEffects=Tt;var Et={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et};c.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var jt={prepareStart:function(){return Ut(this.element)},prepareProperty:function(t,e){return Ut(this.element,e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){return Ft(t,e,n,r)})}},Vt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h,paintDraw:Ft},functions:jt,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};c.SVGDraw=Vt;function Rt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Ht(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Nt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function qt(t){if(!(t=Nt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Xt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,D=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Wt(t,e){for(var n=qt(t),r=e&&qt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Zt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Jt(t){var e=Gt(t),n=[];return e.map((function(t,r){n[r]=Zt(e,r)})),n}function te(t,e){var n=Gt(t),r=Gt(e),i=n.length-1,a=[],s=[],o=Jt(t);return o.map((function(t,e){for(var o=0,l=Kt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:ee(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Wt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?$t.call(this,r[0]):r[0],a=this._reverseSecondPath?$t.call(this,r[1]):r[1];i=te.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},re={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:ee},functions:ne,Util:{l2c:Dt,q2c:Bt,a2c:Xt,catmullRom2bezier:Rt,ellipsePath:Ht,path2curve:Wt,pathToAbsolute:qt,toPathString:ee,parsePathString:Nt,getRotatedCurve:te,getRotations:Jt,getRotationSegments:Zt,reverseCurve:$t,getSegments:Gt,createPath:Kt}};function ie(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ae(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=se.call(this,t,ae(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},le={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:oe,Util:{parseStringOrigin:ie,parseTransformString:ae,parseTransformSVG:se}};function ue(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function pe(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=le;var ce=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},ue(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),pe(t,e,i,r))}),r=a)}catch(t){}return i}(),he="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],fe="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",de=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,ve=!!ce&&{passive:!1};function ge(t){this.scrolling&&t.preventDefault()}function me(){var t=this.element;return t===de?{el:document,st:document.body}:{el:t,st:t}}function ye(){var t=me.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,ue(t.el,he[0],ge,ve),ue(t.el,fe,ge,ve),t.st.style.pointerEvents="none")}function be(){var t=me.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,pe(t.el,he[0],ge,ve),pe(t.el,fe,ge,ve),t.st.style.pointerEvents="")}var we={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:de,ye.call(this),this.element===de?window.pageYOffset||de.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){be.call(this)}},xe={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:we,Util:{preventScroll:ge,scrollIn:ye,scrollOut:be,scrollContainer:de,passiveHandler:ve,getScrollTargets:me}};c.ScrollProperty=xe;var Se=["boxShadow","textShadow"];function Me(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Te(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Ee={};Se.map((function(t){return Ee[t]=Te}));var _e={component:"shadowProperties",properties:Se,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Me(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Me(e,t));return e},onStart:Ee},Util:{processShadowArray:Me,trueColor:ot}};c.ShadowProperties=_e;var Ce=["fontSize","lineHeight","letterSpacing","wordSpacing"],ke={};function Ie(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}Ce.forEach((function(t){ke[t]=Ie}));var Pe={component:"textProperties",category:"textProps",properties:Ce,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:ke},Util:{trueDimension:Y}};function Oe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Ae(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),je=String("0123456789").split(""),Ve=Le.concat(Ue,je),Re=Ve.concat(Fe),He={alpha:Le,upper:Ue,symbols:Fe,numeric:je,alphanumeric:Ve,all:Re};var Ne={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in He?He[e]:e&&e.length?e:He[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},qe={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:Ne},Util:{charSet:He,createTextTweens:function(t,e,n){if(!t.playing){var r=V.Tween;(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var i=function(t,e){var n=Ae(t,"text-part"),r=Ae(Oe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],p=0;return(u=(u=u.concat(o.map((function(t,e){return n.duration="auto"===n.duration?75*a[e].innerHTML.length:n.duration,n.delay=p,n.onComplete=null,p+=n.duration,new r(t,{text:t.innerHTML},{text:""},n)})))).concat(l.map((function(i,a){return n.duration="auto"===n.duration?75*s[a].innerHTML.length:n.duration,n.delay=p,n.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=n.duration,new r(i,{text:""},{text:s[a].innerHTML},n)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};c.TextWriteProperties=qe;var De="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new De,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=De)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var Xe in c.TransformMatrix=Be,c){var ze=c[Xe];c[Xe]=new z(ze)}return{Animation:z,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new V.Tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new V.Tween(j(t),e,e,n)},TweenCollection:D,ProgressBar:B,allFromTo:function(t,e,n,r){return r=r||{},new D(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new D(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.1"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index e9051a5..af59aa3 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Standard v2.0.1 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:l,onComplete:u,linkProperty:c};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],l=r[s];for(var u in o){var c={};for(var p in t)n[p]&&o[p]?i[p]=o[p].call(this,p,t[p]):!n[u]&&"transform"===u&&l.includes(p)?c[p]=t[p]:!n[u]&&l&&l.includes(p)&&(i[p]=o[u].call(this,p,t[p]));Object.keys&&Object.keys(c).length&&(i[u]=o[u].call(this,u,c))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var l in o)(l===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[l].call(this,i,this.valuesStart[i]))}for(var u in e)u in this.valuesStart||(t[u]=e[u]||n[u]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function w(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var b={},T="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function S(t,e,r){return(t=+t)+(e-=t)*r}var x={numbers:S,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return l[u]||(l[u]=function(t){!b[t]&&t===this._easing.name&&(b[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||b.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var r in l[e])l[e][r].call(this,r);k.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(w(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in u)for(var e in u[t])u[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=b.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(w(this),this.paused=!0,this._pauseTime=b.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0);var s=U.Tween;(n=n||{}).delay=n.delay||i.delay;var o=[];return Array.from(t).map((function(t,l){o[l]=n||{},o[l].delay=l>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new s(t,e,r,o[l])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(t){return t=void 0===t?b.Time():t,this.tweens.map((function(e){return e.start(t)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof U))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var V=U.Tween;var X=U.Tween;var D=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function z(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*S(r,n,i)>>0)/10:S(r,n,i)>>0)+"px"})}B.map((function(t){return R[t]=0}));var Q={};B.map((function(t){return Q[t]=Y}));var K={component:"boxModelProps",category:"boxModel",properties:B,defaultValues:R,Interpolate:{numbers:S},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=z(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:Q}};function Z(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function q(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?S(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*S(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=K;var W=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],G={};function $(t){this.valuesEnd[t]&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=q(r,n,i)})}W.forEach((function(t){G[t]="#000"}));var J={};W.map((function(t){return J[t]=$}));var tt={component:"colorProps",category:"colors",properties:W,defaultValues:G,Interpolate:{numbers:S,colors:q},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return Z(e)},onStart:J},Util:{trueColor:Z}};e.ColorProperties=tt;var et=["fill","stroke","stop-color"],rt={};function nt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var it={prepareStart:function(t,e){var r={};for(var n in e){var i=nt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=et.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=nt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(et.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){t.setAttribute(e,q(r,n,i))})},r[a]=Z(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=z(o).u||z(e[i]).u,c=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*S(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=z(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in rt)&&(rt[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*S(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){for(var i in r)b.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!b[t]&&this.valuesEnd.attr&&(b[t]=rt)}}},at={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:S,colors:q},functions:it,Util:{replaceUppercase:nt,trueColor:Z,trueDimension:z}};e.HTMLAttributes=at;var st={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=(1e3*S(r,n,i)>>0)/1e3})}},ot={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:S},functions:st};function lt(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function ut(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ft=String("0123456789").split(""),dt=ct.concat(pt,ft),vt=dt.concat(ht),gt={alpha:ct,upper:pt,symbols:ht,numeric:ft,alphanumeric:dt,all:vt};var mt={text:function(t){if(!b[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in gt?gt[e]:e&&e.length?e:gt[i.textChars];b[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.innerHTML=S(e,r,n)>>0})}},yt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:S},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:mt},Util:{charSet:gt,createTextTweens:function(t,e,r){if(!t.playing){var n=U.Tween;(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var i=function(t,e){var r=ut(t,"text-part"),n=ut(lt(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],c=0;return(u=(u=u.concat(o.map((function(t,e){return r.duration="auto"===r.duration?75*a[e].innerHTML.length:r.duration,r.delay=c,r.onComplete=null,c+=r.duration,new n(t,{text:t.innerHTML},{text:""},r)})))).concat(l.map((function(i,a){return r.duration="auto"===r.duration?75*s[a].innerHTML.length:r.duration,r.delay=c,r.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,c+=r.duration,new n(i,{text:""},{text:s[a].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function wt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function bt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function Tt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function St(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function xt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function _t(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function Et(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=yt;var Ct={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?wt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?bt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?St(r.translate,n.translate,"px",i):"")+(r.rotate3d?Tt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?xt(r.rotate,n.rotate,"deg",i):"")+(r.skew?_t(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?Et(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:wt,translate3d:bt,rotate3d:Tt,translate:St,rotate:xt,scale:Et,skew:_t}};function At(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function It(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Ct;var Mt=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},At(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),It(t,e,i,n))}),n=a)}catch(t){}return i}(),kt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],Ot="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Pt=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Lt=!!Mt&&{passive:!1};function jt(t){this.scrolling&&t.preventDefault()}function Ut(){var t=this.element;return t===Pt?{el:document,st:document.body}:{el:t,st:t}}function Ft(){var t=Ut.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,At(t.el,kt[0],jt,Lt),At(t.el,Ot,jt,Lt),t.st.style.pointerEvents="none")}function Ht(){var t=Ut.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,It(t.el,kt[0],jt,Lt),It(t.el,Ot,jt,Lt),t.st.style.pointerEvents="")}var Nt={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Pt,Ft.call(this),this.element===Pt?window.pageYOffset||Pt.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.scrollTop=S(e,r,n)>>0})},onComplete:function(t){Ht.call(this)}},Vt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:S},functions:Nt,Util:{preventScroll:jt,scrollIn:Ft,scrollOut:Ht,scrollContainer:Pt,passiveHandler:Lt,getScrollTargets:Ut}};e.ScrollProperty=Vt;var Xt=function(t,e){return parseFloat(t)/100*e},Dt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},zt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*S(e.s,r.s,n)>>0)/100,s=(100*S(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var qt={prepareStart:function(){return Kt(this.element)},prepareProperty:function(t,e){return Kt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){return Zt(t,e,r,n)})}},Wt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S,paintDraw:Zt},functions:qt,Util:{getRectLength:Dt,getPolyLength:zt,getLineLength:Bt,getCircleLength:Rt,getEllipseLength:Yt,getTotalLength:Qt,getDraw:Kt,percent:Xt}};function Gt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=Wt;var $t="Invalid path value";function Jt(t){return"number"==typeof t&&isFinite(t)}function te(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function ee(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function re(t,e){return te(t,e)<1e-9}var ne={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},ie=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ae(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&ie.indexOf(t)>=0}function se(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function oe(t){return 97==(32|t)}function le(t){return t>=48&&t<=57}function ue(t){return t>=48&&t<=57||43===t||45===t||46===t}function ce(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function pe(t){for(;t.index=i)t.err="KUTE.js - "+$t;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=ne[r]&&(t.result.push([e].concat(n.splice(0,ne[r]))),ne[r]););}function ve(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=oe(e=t.path.charCodeAt(t.index)),se(e))if(i=ne[t.path[t.index].toLowerCase()],t.index++,pe(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?fe(t):he(t),t.err.length)return;t.data.push(t.param),pe(t),n=!1,t.index=t.max)break;if(!ue(t.path.charCodeAt(t.index)))break}}de(t)}else de(t);else t.err="KUTE.js - "+$t}function ge(t){var e=new ce(t),r=e.max;for(pe(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=ee(n,i,.5),t.splice(r+1,0,i)}function Ie(t,e){var r,n;if("string"==typeof t){var i=we(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError($t);if(!Me(r=t.slice(0)))throw new TypeError($t);return r.length>1&&re(r[0],r[r.length-1])&&r.pop(),Ee(r)>0&&r.reverse(),!n&&e&&Jt(e)&&e>0&&Ae(r,e),r}function Me(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Jt(t[0])&&Jt(t[1])}))}function ke(t,e,r){var n=Ie(t,r=r||i.morphPrecision),a=Ie(e,r),s=n.length-a.length;return Ce(n,s<0?-1*s:0),Ce(a,s>0?s:0),xe(n,a),[n,a]}me.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},me.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var Oe={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Gt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=ke(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},Pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Gt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:Oe,Util:{INVALID_INPUT:$t,isFiniteNumber:Jt,distance:te,pointAlong:ee,samePoint:re,paramCounts:ne,SPECIAL_SPACES:ie,isSpace:ae,isCommand:se,isArc:oe,isDigit:le,isDigitStart:ue,State:ce,skipSpaces:pe,scanFlag:he,scanParam:fe,finalizeSegment:de,scanSegment:ve,pathParse:ge,SvgPath:me,split:ye,pathStringToRing:we,exactRing:be,approximateRing:Te,measure:Se,rotateRing:xe,polygonLength:_e,polygonArea:Ee,addPoints:Ce,bisect:Ae,normalizeRing:Ie,validRing:Me,getInterpolationPoints:ke}};function Le(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function je(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=Ue.call(this,t,je(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},He={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:Fe,Util:{parseStringOrigin:Le,parseTransformString:je,parseTransformSVG:Ue}};for(var Ne in e.SVGTransformProperty=He,e){var Ve=e[Ne];e[Ne]=new D(Ve)}return{Animation:D,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new X(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t),e,e,r)},TweenCollection:N,allFromTo:function(t,e,r,n){return n=n||{},new N(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t,!0),e,e,r)},Objects:p,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:x,Process:g,Internals:O,Selector:j,Version:"2.0.1"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:l,onComplete:u,linkProperty:c};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],l=r[s];for(var u in o){var c={};for(var p in t)n[p]&&o[p]?i[p]=o[p].call(this,p,t[p]):!n[u]&&"transform"===u&&l.includes(p)?c[p]=t[p]:!n[u]&&l&&l.includes(p)&&(i[p]=o[u].call(this,p,t[p]));Object.keys&&Object.keys(c).length&&(i[u]=o[u].call(this,u,c))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var l in o)(l===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[l].call(this,i,this.valuesStart[i]))}for(var u in e)u in this.valuesStart||(t[u]=e[u]||n[u]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function w(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var b={},T="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function S(t,e,r){return(t=+t)+(e-=t)*r}var x={numbers:S,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return l[u]||(l[u]=function(t){!b[t]&&t===this._easing.name&&(b[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||b.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var r in l[e])l[e][r].call(this,r);k.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(w(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in u)for(var e in u[t])u[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=b.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(w(this),this.paused=!0,this._pauseTime=b.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=U.Tween,V=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0),(n=n||{}).delay=n.delay||i.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=n||{},s[o].delay=o>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new N(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(t){return t=void 0===t?b.Time():t,this.tweens.map((function(e){return e.start(t)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var X=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*S(r,n,i)>>0)/10:S(r,n,i)>>0)+"px"})}z.map((function(t){return B[t]=0}));var Y={};z.map((function(t){return Y[t]=R}));var Q={component:"boxModelProps",category:"boxModel",properties:z,defaultValues:B,Interpolate:{numbers:S},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=D(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:Y}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?S(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*S(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=Q;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};function G(t){this.valuesEnd[t]&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){W[t]="#000"}));var $={};q.map((function(t){return $[t]=G}));var J={component:"colorProps",category:"colors",properties:q,defaultValues:W,Interpolate:{numbers:S,colors:Z},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};e.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=rt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=K(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[i]).u,c=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*S(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=D(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*S(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){for(var i in r)b.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!b[t]&&this.valuesEnd.attr&&(b[t]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:S,colors:Z},functions:nt,Util:{replaceUppercase:rt,trueColor:K,trueDimension:D}};e.HTMLAttributes=it;var at={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=(1e3*S(r,n,i)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:S},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function lt(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=ut.concat(ct,ht),dt=ft.concat(pt),vt={alpha:ut,upper:ct,symbols:pt,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(t){if(!b[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in vt?vt[e]:e&&e.length?e:vt[i.textChars];b[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.innerHTML=S(e,r,n)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:S},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){var n=U.Tween;(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var i=function(t,e){var r=lt(t,"text-part"),n=lt(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],c=0;return(u=(u=u.concat(o.map((function(t,e){return r.duration="auto"===r.duration?75*a[e].innerHTML.length:r.duration,r.delay=c,r.onComplete=null,c+=r.duration,new n(t,{text:t.innerHTML},{text:""},r)})))).concat(l.map((function(i,a){return r.duration="auto"===r.duration?75*s[a].innerHTML.length:r.duration,r.delay=c,r.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,c+=r.duration,new n(i,{text:""},{text:s[a].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function wt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function bt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function Tt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function St(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function _t(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?wt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?Tt(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?St(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?_t(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:wt,rotate3d:bt,translate:Tt,rotate:St,scale:_t,skew:xt}};function Ct(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function At(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Et;var It=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},Ct(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),At(t,e,i,n))}),n=a)}catch(t){}return i}(),Mt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],kt="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Ot=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Pt=!!It&&{passive:!1};function Lt(t){this.scrolling&&t.preventDefault()}function jt(){var t=this.element;return t===Ot?{el:document,st:document.body}:{el:t,st:t}}function Ut(){var t=jt.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,Ct(t.el,Mt[0],Lt,Pt),Ct(t.el,kt,Lt,Pt),t.st.style.pointerEvents="none")}function Ft(){var t=jt.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,At(t.el,Mt[0],Lt,Pt),At(t.el,kt,Lt,Pt),t.st.style.pointerEvents="")}var Ht={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Ot,Ut.call(this),this.element===Ot?window.pageYOffset||Ot.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.scrollTop=S(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:S},functions:Ht,Util:{preventScroll:Lt,scrollIn:Ut,scrollOut:Ft,scrollContainer:Ot,passiveHandler:Pt,getScrollTargets:jt}};e.ScrollProperty=Nt;var Vt=function(t,e){return parseFloat(t)/100*e},Xt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Dt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*S(e.s,r.s,n)>>0)/100,s=(100*S(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var Zt={prepareStart:function(){return Qt(this.element)},prepareProperty:function(t,e){return Qt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){return Kt(t,e,r,n)})}},qt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S,paintDraw:Kt},functions:Zt,Util:{getRectLength:Xt,getPolyLength:Dt,getLineLength:zt,getCircleLength:Bt,getEllipseLength:Rt,getTotalLength:Yt,getDraw:Qt,percent:Vt}};function Wt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=qt;var Gt="Invalid path value";function $t(t){return"number"==typeof t&&isFinite(t)}function Jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function te(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function ee(t,e){return Jt(t,e)<1e-9}var re={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},ne=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ie(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&ne.indexOf(t)>=0}function ae(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function se(t){return 97==(32|t)}function oe(t){return t>=48&&t<=57}function le(t){return t>=48&&t<=57||43===t||45===t||46===t}function ue(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function ce(t){for(;t.index=i)t.err="KUTE.js - "+Gt;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=re[r]&&(t.result.push([e].concat(n.splice(0,re[r]))),re[r]););}function de(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=se(e=t.path.charCodeAt(t.index)),ae(e))if(i=re[t.path[t.index].toLowerCase()],t.index++,ce(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?he(t):pe(t),t.err.length)return;t.data.push(t.param),ce(t),n=!1,t.index=t.max)break;if(!le(t.path.charCodeAt(t.index)))break}}fe(t)}else fe(t);else t.err="KUTE.js - "+Gt}function ve(t){var e=new ue(t),r=e.max;for(ce(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=te(n,i,.5),t.splice(r+1,0,i)}function Ae(t,e){var r,n;if("string"==typeof t){var i=ye(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Gt);if(!Ie(r=t.slice(0)))throw new TypeError(Gt);return r.length>1&&ee(r[0],r[r.length-1])&&r.pop(),_e(r)>0&&r.reverse(),!n&&e&&$t(e)&&e>0&&Ce(r,e),r}function Ie(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&$t(t[0])&&$t(t[1])}))}function Me(t,e,r){var n=Ae(t,r=r||i.morphPrecision),a=Ae(e,r),s=n.length-a.length;return Ee(n,s<0?-1*s:0),Ee(a,s>0?s:0),Se(n,a),[n,a]}ge.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},ge.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ke={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Wt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=Me(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},Oe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Wt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ke,Util:{INVALID_INPUT:Gt,isFiniteNumber:$t,distance:Jt,pointAlong:te,samePoint:ee,paramCounts:re,SPECIAL_SPACES:ne,isSpace:ie,isCommand:ae,isArc:se,isDigit:oe,isDigitStart:le,State:ue,skipSpaces:ce,scanFlag:pe,scanParam:he,finalizeSegment:fe,scanSegment:de,pathParse:ve,SvgPath:ge,split:me,pathStringToRing:ye,exactRing:we,approximateRing:be,measure:Te,rotateRing:Se,polygonLength:xe,polygonArea:_e,addPoints:Ee,bisect:Ce,normalizeRing:Ae,validRing:Ie,getInterpolationPoints:Me}};function Pe(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function Le(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=je.call(this,t,Le(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},Fe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:Ue,Util:{parseStringOrigin:Pe,parseTransformString:Le,parseTransformSVG:je}};for(var He in e.SVGTransformProperty=Fe,e){var Ne=e[He];e[He]=new X(Ne)}return{Animation:X,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new U.Tween(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new U.Tween(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:p,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:x,Process:g,Internals:O,Selector:j,Version:"2.0.1"}}));

From 94fe92738c0b78442f10998e62fa947baec76537 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 10 Jun 2020 14:34:18 +0000
Subject: [PATCH 150/187]

---
 src/kute-base.js      |  8 +++++---
 src/kute-base.min.js  |  4 ++--
 src/kute-extra.js     | 10 +++++-----
 src/kute-extra.min.js |  4 ++--
 src/kute.min.js       |  4 ++--
 5 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/kute-base.js b/src/kute-base.js
index 9676670..e1f4c3f 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.1 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.2 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.1";
+  var version = "2.0.2";
 
   var defaultOptions = {
     duration: 700,
@@ -366,9 +366,11 @@
   };
   TweenConstructor.Tween = TweenBase;
 
+  var TC = TweenConstructor.Tween;
+
   function fromTo(element, startObject, endObject, optionsObj) {
     optionsObj = optionsObj || {};
-    return new TweenConstructor.Tween(selector(element), startObject, endObject, optionsObj)
+    return new TC(selector(element), startObject, endObject, optionsObj)
   }
 
   function perspective(a, b, u, v) {
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index 9a8ad31..d3d3011 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Base v2.0.1 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={duration:700,delay:0,easing:"linear"},e={},n={},r={},o={},i={defaultOptions:t,linkProperty:e,onStart:n,onComplete:r,supportedProperties:o},s={};var a={linear:function(t){return t},easingQuadraticIn:function(t){return t*t},easingQuadraticOut:function(t){return t*(2-t)},easingQuadraticInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easingCubicIn:function(t){return t*t*t},easingCubicOut:function(t){return--t*t*t+1},easingCubicInOut:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easingCircularIn:function(t){return-(Math.sqrt(1-t*t)-1)},easingCircularOut:function(t){return Math.sqrt(1-(t-=1)*t)},easingCircularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},easingBackIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},easingBackOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},easingBackInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)}};s.processEasing=function(t){return"function"==typeof t?t:"string"==typeof t?a[t]:a.linear};var u=[];function l(t){return u.push(t)}function c(t){var e=u.indexOf(t);-1!==e&&u.splice(e,1)}var f={},p="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function d(t,e,n){return(t=+t)+(e-=t)*n}var v={numbers:d,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],o=0,i=e.length;o>0)/1e3;return r}},h={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?h.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(h.now=self.performance.now.bind(self.performance));var m=0,y=function(t){for(var e=0;e>0)/1e3+n+")"}function M(t,e,n,r){for(var o=[],i=0;i<3;i++)o[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function x(t,e,n,r){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function U(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+o.join(",")+")"}function j(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function A(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}function B(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}S.prototype.start=function(t){if(l(this),this.playing=!0,this._startTime=t||f.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),n)if("function"==typeof n[e])n[e].call(this,e);else for(var r in n[e])n[e][r].call(this,r);E.call(this),this._startFired=!0}return!m&&y(),this},S.prototype.stop=function(){return this.playing&&(c(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},S.prototype.close=function(){for(var t in r)for(var e in r[t])r[t][e].call(this,e);this._startFired=!1,g.call(this)},S.prototype.update=function(t){var e,n;if((t=void 0!==t?t:f.Time())1?1:e,n=this._easing(e),this.valuesEnd)f[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},O.Tween=S;var P={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!f[t]&&this.valuesEnd[t]&&(f[t]=function(e,n,r,o){e.style[t]=(n.perspective||r.perspective?I(n.perspective,r.perspective,"px",o):"")+(n.translate3d?M(n.translate3d,r.translate3d,"px",o):"")+(n.translate?U(n.translate,r.translate,"px",o):"")+(n.rotate3d?x(n.rotate3d,r.rotate3d,"deg",o):"")+(n.rotate||r.rotate?j(n.rotate,r.rotate,"deg",o):"")+(n.skew?A(n.skew,r.skew,"deg",o):"")+(n.scale||r.scale?B(n.scale,r.scale,o):"")})}},Interpolate:{perspective:I,translate3d:M,rotate3d:x,translate:U,rotate:j,scale:B,skew:A}};function q(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(o>.99||o<.01?(10*d(n,r,o)>>0)/10:d(n,r,o)>>0)+"px"})}var F=["top","left","width","height"],L={};F.map((function(t){return L[t]=q}));var X={component:"boxModelProps",category:"boxModel",properties:F,Interpolate:{numbers:d},functions:{onStart:L}};var Y={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(1e3*d(n,r,o)>>0)/1e3})}}};function D(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function K(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var Q=function(){var t,e,n,r,o=!1;try{var i=Object.defineProperty({},"passive",{get:function(){o=!0}});t=document,n=function(){},D(t,e="DOMContentLoaded",(function o(i){i.target===t&&(n(i),K(t,e,o,r))}),r=i)}catch(t){}return o}(),Z="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],z="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",H=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,G=!!Q&&{passive:!1};function N(t){this.scrolling&&t.preventDefault()}function R(){var t=this.element;return t===H?{el:document,st:document.body}:{el:t,st:t}}function V(){var t=R.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,K(t.el,Z[0],N,G),K(t.el,z,N,G),t.st.style.pointerEvents="")}var W={component:"scrollProperty",property:"scroll",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(t,e,n,r){t.scrollTop=d(e,n,r)>>0})},onComplete:function(t){V.call(this)}},Util:{preventScroll:N,scrollIn:function(){var t=R.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,D(t.el,Z[0],N,G),D(t.el,z,N,G),t.st.style.pointerEvents="none")},scrollOut:V,scrollContainer:H,passiveHandler:G,getScrollTargets:R}};(J="transform")in document.body.style||(function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=0,r=e.length;n>0)/1e3;return r}},h={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?h.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(h.now=self.performance.now.bind(self.performance));var m=0,y=function(t){for(var e=0;e1?1:e,n=this._easing(e),this.valuesEnd)f[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},O.Tween=S;var I=O.Tween;function M(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function x(t,e,n,r){for(var o=[],i=0;i<3;i++)o[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function U(t,e,n,r){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function j(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+o.join(",")+")"}function A(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function B(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}function P(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var q={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!f[t]&&this.valuesEnd[t]&&(f[t]=function(e,n,r,o){e.style[t]=(n.perspective||r.perspective?M(n.perspective,r.perspective,"px",o):"")+(n.translate3d?x(n.translate3d,r.translate3d,"px",o):"")+(n.translate?j(n.translate,r.translate,"px",o):"")+(n.rotate3d?U(n.rotate3d,r.rotate3d,"deg",o):"")+(n.rotate||r.rotate?A(n.rotate,r.rotate,"deg",o):"")+(n.skew?B(n.skew,r.skew,"deg",o):"")+(n.scale||r.scale?P(n.scale,r.scale,o):"")})}},Interpolate:{perspective:M,translate3d:x,rotate3d:U,translate:j,rotate:A,scale:P,skew:B}};function F(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(o>.99||o<.01?(10*d(n,r,o)>>0)/10:d(n,r,o)>>0)+"px"})}var L=["top","left","width","height"],X={};L.map((function(t){return X[t]=F}));var Y={component:"boxModelProps",category:"boxModel",properties:L,Interpolate:{numbers:d},functions:{onStart:X}};var D={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(1e3*d(n,r,o)>>0)/1e3})}}};function K(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function Q(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var Z=function(){var t,e,n,r,o=!1;try{var i=Object.defineProperty({},"passive",{get:function(){o=!0}});t=document,n=function(){},K(t,e="DOMContentLoaded",(function o(i){i.target===t&&(n(i),Q(t,e,o,r))}),r=i)}catch(t){}return o}(),z="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],H="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",G=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,N=!!Z&&{passive:!1};function R(t){this.scrolling&&t.preventDefault()}function V(){var t=this.element;return t===G?{el:document,st:document.body}:{el:t,st:t}}function W(){var t=V.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,Q(t.el,z[0],R,N),Q(t.el,H,R,N),t.st.style.pointerEvents="")}var J={component:"scrollProperty",property:"scroll",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(t,e,n,r){t.scrollTop=d(e,n,r)>>0})},onComplete:function(t){W.call(this)}},Util:{preventScroll:R,scrollIn:function(){var t=V.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,K(t.el,z[0],R,N),K(t.el,H,R,N),t.st.style.pointerEvents="none")},scrollOut:W,scrollContainer:G,passiveHandler:N,getScrollTargets:V}};($="transform")in document.body.style||(function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=0,r=e.length;n>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,D=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0),(i=i||{}).delay=i.delay||n.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=i||{},s[o].delay=o>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new q(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};D.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},D.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},D.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},D.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},D.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof D)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},D.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},D.prototype.removeTweens=function(){this.tweens=[]},D.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var B=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};B.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},B.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},B.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},B.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},B.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},B.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var X=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};X.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:Q,Util:{trueDimension:Y}};c.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};c.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};c.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};c.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=gt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=ot(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Y(l).u||Y(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Y(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};c.FilterEffects=Tt;var Et={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et};c.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var jt={prepareStart:function(){return Ut(this.element)},prepareProperty:function(t,e){return Ut(this.element,e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){return Ft(t,e,n,r)})}},Vt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h,paintDraw:Ft},functions:jt,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};c.SVGDraw=Vt;function Rt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Ht(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Nt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function qt(t){if(!(t=Nt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Xt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,D=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Wt(t,e){for(var n=qt(t),r=e&&qt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Zt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Jt(t){var e=Gt(t),n=[];return e.map((function(t,r){n[r]=Zt(e,r)})),n}function te(t,e){var n=Gt(t),r=Gt(e),i=n.length-1,a=[],s=[],o=Jt(t);return o.map((function(t,e){for(var o=0,l=Kt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:ee(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Wt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?$t.call(this,r[0]):r[0],a=this._reverseSecondPath?$t.call(this,r[1]):r[1];i=te.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},re={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:ee},functions:ne,Util:{l2c:Dt,q2c:Bt,a2c:Xt,catmullRom2bezier:Rt,ellipsePath:Ht,path2curve:Wt,pathToAbsolute:qt,toPathString:ee,parsePathString:Nt,getRotatedCurve:te,getRotations:Jt,getRotationSegments:Zt,reverseCurve:$t,getSegments:Gt,createPath:Kt}};function ie(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ae(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=se.call(this,t,ae(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},le={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:oe,Util:{parseStringOrigin:ie,parseTransformString:ae,parseTransformSVG:se}};function ue(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function pe(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=le;var ce=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},ue(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),pe(t,e,i,r))}),r=a)}catch(t){}return i}(),he="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],fe="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",de=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,ve=!!ce&&{passive:!1};function ge(t){this.scrolling&&t.preventDefault()}function me(){var t=this.element;return t===de?{el:document,st:document.body}:{el:t,st:t}}function ye(){var t=me.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,ue(t.el,he[0],ge,ve),ue(t.el,fe,ge,ve),t.st.style.pointerEvents="none")}function be(){var t=me.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,pe(t.el,he[0],ge,ve),pe(t.el,fe,ge,ve),t.st.style.pointerEvents="")}var we={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:de,ye.call(this),this.element===de?window.pageYOffset||de.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){be.call(this)}},xe={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:we,Util:{preventScroll:ge,scrollIn:ye,scrollOut:be,scrollContainer:de,passiveHandler:ve,getScrollTargets:me}};c.ScrollProperty=xe;var Se=["boxShadow","textShadow"];function Me(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Te(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Ee={};Se.map((function(t){return Ee[t]=Te}));var _e={component:"shadowProperties",properties:Se,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Me(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Me(e,t));return e},onStart:Ee},Util:{processShadowArray:Me,trueColor:ot}};c.ShadowProperties=_e;var Ce=["fontSize","lineHeight","letterSpacing","wordSpacing"],ke={};function Ie(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}Ce.forEach((function(t){ke[t]=Ie}));var Pe={component:"textProperties",category:"textProps",properties:Ce,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:ke},Util:{trueDimension:Y}};function Oe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Ae(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),je=String("0123456789").split(""),Ve=Le.concat(Ue,je),Re=Ve.concat(Fe),He={alpha:Le,upper:Ue,symbols:Fe,numeric:je,alphanumeric:Ve,all:Re};var Ne={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in He?He[e]:e&&e.length?e:He[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},qe={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:Ne},Util:{charSet:He,createTextTweens:function(t,e,n){if(!t.playing){var r=V.Tween;(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var i=function(t,e){var n=Ae(t,"text-part"),r=Ae(Oe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],p=0;return(u=(u=u.concat(o.map((function(t,e){return n.duration="auto"===n.duration?75*a[e].innerHTML.length:n.duration,n.delay=p,n.onComplete=null,p+=n.duration,new r(t,{text:t.innerHTML},{text:""},n)})))).concat(l.map((function(i,a){return n.duration="auto"===n.duration?75*s[a].innerHTML.length:n.duration,n.delay=p,n.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=n.duration,new r(i,{text:""},{text:s[a].innerHTML},n)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};c.TextWriteProperties=qe;var De="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new De,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=De)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var Xe in c.TransformMatrix=Be,c){var ze=c[Xe];c[Xe]=new z(ze)}return{Animation:z,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new V.Tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new V.Tween(j(t),e,e,n)},TweenCollection:D,ProgressBar:B,allFromTo:function(t,e,n,r){return r=r||{},new D(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new D(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.1"}}));
+// KUTE.js Extra v2.0.2 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},n={duration:700,delay:0,easing:"linear"},r={},i={},a={},s={},o={},l={},u={supportedProperties:t,defaultValues:e,defaultOptions:n,prepareProperty:r,prepareStart:i,crossCheck:a,onStart:s,onComplete:o,linkProperty:l},p={},c={};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,D=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0),(i=i||{}).delay=i.delay||n.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=i||{},s[o].delay=o>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new q(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};D.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},D.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},D.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},D.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},D.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof D)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},D.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},D.prototype.removeTweens=function(){this.tweens=[]},D.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var B=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};B.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},B.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},B.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},B.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},B.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},B.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var X=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};X.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:Q,Util:{trueDimension:Y}};c.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};c.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};c.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};c.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=gt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=ot(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Y(l).u||Y(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Y(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};c.FilterEffects=Tt;var Et={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et};c.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var jt={prepareStart:function(){return Ut(this.element)},prepareProperty:function(t,e){return Ut(this.element,e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){return Ft(t,e,n,r)})}},Vt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h,paintDraw:Ft},functions:jt,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};c.SVGDraw=Vt;function Rt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Ht(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Nt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function qt(t){if(!(t=Nt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Xt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,D=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Wt(t,e){for(var n=qt(t),r=e&&qt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Zt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Jt(t){var e=Gt(t),n=[];return e.map((function(t,r){n[r]=Zt(e,r)})),n}function te(t,e){var n=Gt(t),r=Gt(e),i=n.length-1,a=[],s=[],o=Jt(t);return o.map((function(t,e){for(var o=0,l=Kt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:ee(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Wt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?$t.call(this,r[0]):r[0],a=this._reverseSecondPath?$t.call(this,r[1]):r[1];i=te.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},re={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:ee},functions:ne,Util:{l2c:Dt,q2c:Bt,a2c:Xt,catmullRom2bezier:Rt,ellipsePath:Ht,path2curve:Wt,pathToAbsolute:qt,toPathString:ee,parsePathString:Nt,getRotatedCurve:te,getRotations:Jt,getRotationSegments:Zt,reverseCurve:$t,getSegments:Gt,createPath:Kt}};function ie(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ae(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=se.call(this,t,ae(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},le={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:oe,Util:{parseStringOrigin:ie,parseTransformString:ae,parseTransformSVG:se}};function ue(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function pe(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=le;var ce=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},ue(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),pe(t,e,i,r))}),r=a)}catch(t){}return i}(),he="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],fe="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",de=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,ve=!!ce&&{passive:!1};function ge(t){this.scrolling&&t.preventDefault()}function me(){var t=this.element;return t===de?{el:document,st:document.body}:{el:t,st:t}}function ye(){var t=me.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,ue(t.el,he[0],ge,ve),ue(t.el,fe,ge,ve),t.st.style.pointerEvents="none")}function be(){var t=me.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,pe(t.el,he[0],ge,ve),pe(t.el,fe,ge,ve),t.st.style.pointerEvents="")}var we={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:de,ye.call(this),this.element===de?window.pageYOffset||de.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){be.call(this)}},xe={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:we,Util:{preventScroll:ge,scrollIn:ye,scrollOut:be,scrollContainer:de,passiveHandler:ve,getScrollTargets:me}};c.ScrollProperty=xe;var Se=["boxShadow","textShadow"];function Me(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Te(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Ee={};Se.map((function(t){return Ee[t]=Te}));var _e={component:"shadowProperties",properties:Se,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Me(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Me(e,t));return e},onStart:Ee},Util:{processShadowArray:Me,trueColor:ot}};c.ShadowProperties=_e;var Ce=["fontSize","lineHeight","letterSpacing","wordSpacing"],ke={};function Ie(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}Ce.forEach((function(t){ke[t]=Ie}));var Pe={component:"textProperties",category:"textProps",properties:Ce,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:ke},Util:{trueDimension:Y}};function Oe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Ae(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),je=String("0123456789").split(""),Ve=Le.concat(Ue,je),Re=Ve.concat(Fe),He={alpha:Le,upper:Ue,symbols:Fe,numeric:je,alphanumeric:Ve,all:Re};var Ne={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in He?He[e]:e&&e.length?e:He[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},qe={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:Ne},Util:{charSet:He,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=Ae(t,"text-part"),r=Ae(Oe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=u,n.onComplete=null,u+=n.duration,new q(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=u,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=n.duration,new q(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};c.TextWriteProperties=qe;var De="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new De,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=De)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var Xe in c.TransformMatrix=Be,c){var ze=c[Xe];c[Xe]=new z(ze)}return{Animation:z,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new q(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t),e,e,n)},TweenCollection:D,ProgressBar:B,allFromTo:function(t,e,n,r){return r=r||{},new D(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new D(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.2"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index af59aa3..455140b 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.1 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:l,onComplete:u,linkProperty:c};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],l=r[s];for(var u in o){var c={};for(var p in t)n[p]&&o[p]?i[p]=o[p].call(this,p,t[p]):!n[u]&&"transform"===u&&l.includes(p)?c[p]=t[p]:!n[u]&&l&&l.includes(p)&&(i[p]=o[u].call(this,p,t[p]));Object.keys&&Object.keys(c).length&&(i[u]=o[u].call(this,u,c))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var l in o)(l===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[l].call(this,i,this.valuesStart[i]))}for(var u in e)u in this.valuesStart||(t[u]=e[u]||n[u]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function w(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var b={},T="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function S(t,e,r){return(t=+t)+(e-=t)*r}var x={numbers:S,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return l[u]||(l[u]=function(t){!b[t]&&t===this._easing.name&&(b[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||b.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var r in l[e])l[e][r].call(this,r);k.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(w(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in u)for(var e in u[t])u[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=b.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(w(this),this.paused=!0,this._pauseTime=b.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=U.Tween,V=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0),(n=n||{}).delay=n.delay||i.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=n||{},s[o].delay=o>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new N(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(t){return t=void 0===t?b.Time():t,this.tweens.map((function(e){return e.start(t)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var X=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*S(r,n,i)>>0)/10:S(r,n,i)>>0)+"px"})}z.map((function(t){return B[t]=0}));var Y={};z.map((function(t){return Y[t]=R}));var Q={component:"boxModelProps",category:"boxModel",properties:z,defaultValues:B,Interpolate:{numbers:S},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=D(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:Y}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?S(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*S(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=Q;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};function G(t){this.valuesEnd[t]&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){W[t]="#000"}));var $={};q.map((function(t){return $[t]=G}));var J={component:"colorProps",category:"colors",properties:q,defaultValues:W,Interpolate:{numbers:S,colors:Z},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};e.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=rt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=K(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[i]).u,c=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*S(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=D(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*S(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){for(var i in r)b.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!b[t]&&this.valuesEnd.attr&&(b[t]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:S,colors:Z},functions:nt,Util:{replaceUppercase:rt,trueColor:K,trueDimension:D}};e.HTMLAttributes=it;var at={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=(1e3*S(r,n,i)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:S},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function lt(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=ut.concat(ct,ht),dt=ft.concat(pt),vt={alpha:ut,upper:ct,symbols:pt,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(t){if(!b[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in vt?vt[e]:e&&e.length?e:vt[i.textChars];b[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.innerHTML=S(e,r,n)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:S},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){var n=U.Tween;(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var i=function(t,e){var r=lt(t,"text-part"),n=lt(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),a=i[0],s=i[1],o=[].slice.call(t.getElementsByClassName("oldText")).reverse(),l=[].slice.call(t.getElementsByClassName("newText")),u=[],c=0;return(u=(u=u.concat(o.map((function(t,e){return r.duration="auto"===r.duration?75*a[e].innerHTML.length:r.duration,r.delay=c,r.onComplete=null,c+=r.duration,new n(t,{text:t.innerHTML},{text:""},r)})))).concat(l.map((function(i,a){return r.duration="auto"===r.duration?75*s[a].innerHTML.length:r.duration,r.delay=c,r.onComplete=a===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,c+=r.duration,new n(i,{text:""},{text:s[a].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function wt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function bt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function Tt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function St(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function _t(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?wt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?Tt(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?St(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?_t(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:wt,rotate3d:bt,translate:Tt,rotate:St,scale:_t,skew:xt}};function Ct(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function At(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Et;var It=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},Ct(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),At(t,e,i,n))}),n=a)}catch(t){}return i}(),Mt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],kt="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Ot=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Pt=!!It&&{passive:!1};function Lt(t){this.scrolling&&t.preventDefault()}function jt(){var t=this.element;return t===Ot?{el:document,st:document.body}:{el:t,st:t}}function Ut(){var t=jt.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,Ct(t.el,Mt[0],Lt,Pt),Ct(t.el,kt,Lt,Pt),t.st.style.pointerEvents="none")}function Ft(){var t=jt.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,At(t.el,Mt[0],Lt,Pt),At(t.el,kt,Lt,Pt),t.st.style.pointerEvents="")}var Ht={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Ot,Ut.call(this),this.element===Ot?window.pageYOffset||Ot.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.scrollTop=S(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:S},functions:Ht,Util:{preventScroll:Lt,scrollIn:Ut,scrollOut:Ft,scrollContainer:Ot,passiveHandler:Pt,getScrollTargets:jt}};e.ScrollProperty=Nt;var Vt=function(t,e){return parseFloat(t)/100*e},Xt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Dt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*S(e.s,r.s,n)>>0)/100,s=(100*S(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var Zt={prepareStart:function(){return Qt(this.element)},prepareProperty:function(t,e){return Qt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){return Kt(t,e,r,n)})}},qt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S,paintDraw:Kt},functions:Zt,Util:{getRectLength:Xt,getPolyLength:Dt,getLineLength:zt,getCircleLength:Bt,getEllipseLength:Rt,getTotalLength:Yt,getDraw:Qt,percent:Vt}};function Wt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=qt;var Gt="Invalid path value";function $t(t){return"number"==typeof t&&isFinite(t)}function Jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function te(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function ee(t,e){return Jt(t,e)<1e-9}var re={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},ne=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ie(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&ne.indexOf(t)>=0}function ae(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function se(t){return 97==(32|t)}function oe(t){return t>=48&&t<=57}function le(t){return t>=48&&t<=57||43===t||45===t||46===t}function ue(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function ce(t){for(;t.index=i)t.err="KUTE.js - "+Gt;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=re[r]&&(t.result.push([e].concat(n.splice(0,re[r]))),re[r]););}function de(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=se(e=t.path.charCodeAt(t.index)),ae(e))if(i=re[t.path[t.index].toLowerCase()],t.index++,ce(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?he(t):pe(t),t.err.length)return;t.data.push(t.param),ce(t),n=!1,t.index=t.max)break;if(!le(t.path.charCodeAt(t.index)))break}}fe(t)}else fe(t);else t.err="KUTE.js - "+Gt}function ve(t){var e=new ue(t),r=e.max;for(ce(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=te(n,i,.5),t.splice(r+1,0,i)}function Ae(t,e){var r,n;if("string"==typeof t){var i=ye(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Gt);if(!Ie(r=t.slice(0)))throw new TypeError(Gt);return r.length>1&&ee(r[0],r[r.length-1])&&r.pop(),_e(r)>0&&r.reverse(),!n&&e&&$t(e)&&e>0&&Ce(r,e),r}function Ie(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&$t(t[0])&&$t(t[1])}))}function Me(t,e,r){var n=Ae(t,r=r||i.morphPrecision),a=Ae(e,r),s=n.length-a.length;return Ee(n,s<0?-1*s:0),Ee(a,s>0?s:0),Se(n,a),[n,a]}ge.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},ge.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ke={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Wt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=Me(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},Oe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Wt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ke,Util:{INVALID_INPUT:Gt,isFiniteNumber:$t,distance:Jt,pointAlong:te,samePoint:ee,paramCounts:re,SPECIAL_SPACES:ne,isSpace:ie,isCommand:ae,isArc:se,isDigit:oe,isDigitStart:le,State:ue,skipSpaces:ce,scanFlag:pe,scanParam:he,finalizeSegment:fe,scanSegment:de,pathParse:ve,SvgPath:ge,split:me,pathStringToRing:ye,exactRing:we,approximateRing:be,measure:Te,rotateRing:Se,polygonLength:xe,polygonArea:_e,addPoints:Ee,bisect:Ce,normalizeRing:Ae,validRing:Ie,getInterpolationPoints:Me}};function Pe(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function Le(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=je.call(this,t,Le(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},Fe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:Ue,Util:{parseStringOrigin:Pe,parseTransformString:Le,parseTransformSVG:je}};for(var He in e.SVGTransformProperty=Fe,e){var Ne=e[He];e[He]=new X(Ne)}return{Animation:X,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new U.Tween(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new U.Tween(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:p,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:x,Process:g,Internals:O,Selector:j,Version:"2.0.1"}}));
+// KUTE.js Standard v2.0.2 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:l,onComplete:u,linkProperty:c};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],l=r[s];for(var u in o){var c={};for(var p in t)n[p]&&o[p]?i[p]=o[p].call(this,p,t[p]):!n[u]&&"transform"===u&&l.includes(p)?c[p]=t[p]:!n[u]&&l&&l.includes(p)&&(i[p]=o[u].call(this,p,t[p]));Object.keys&&Object.keys(c).length&&(i[u]=o[u].call(this,u,c))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var l in o)(l===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[l].call(this,i,this.valuesStart[i]))}for(var u in e)u in this.valuesStart||(t[u]=e[u]||n[u]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function w(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var b={},T="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function S(t,e,r){return(t=+t)+(e-=t)*r}var x={numbers:S,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return l[u]||(l[u]=function(t){!b[t]&&t===this._easing.name&&(b[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||b.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var r in l[e])l[e][r].call(this,r);k.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(w(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in u)for(var e in u[t])u[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=b.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(w(this),this.paused=!0,this._pauseTime=b.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=U.Tween,V=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0),(n=n||{}).delay=n.delay||i.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=n||{},s[o].delay=o>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new N(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(t){return t=void 0===t?b.Time():t,this.tweens.map((function(e){return e.start(t)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var X=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*S(r,n,i)>>0)/10:S(r,n,i)>>0)+"px"})}z.map((function(t){return B[t]=0}));var Y={};z.map((function(t){return Y[t]=R}));var Q={component:"boxModelProps",category:"boxModel",properties:z,defaultValues:B,Interpolate:{numbers:S},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=D(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:Y}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?S(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*S(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=Q;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};function G(t){this.valuesEnd[t]&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){W[t]="#000"}));var $={};q.map((function(t){return $[t]=G}));var J={component:"colorProps",category:"colors",properties:q,defaultValues:W,Interpolate:{numbers:S,colors:Z},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};e.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=rt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=K(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[i]).u,c=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*S(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=D(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*S(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){for(var i in r)b.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!b[t]&&this.valuesEnd.attr&&(b[t]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:S,colors:Z},functions:nt,Util:{replaceUppercase:rt,trueColor:K,trueDimension:D}};e.HTMLAttributes=it;var at={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=(1e3*S(r,n,i)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:S},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function lt(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=ut.concat(ct,ht),dt=ft.concat(pt),vt={alpha:ut,upper:ct,symbols:pt,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(t){if(!b[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in vt?vt[e]:e&&e.length?e:vt[i.textChars];b[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.innerHTML=S(e,r,n)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:S},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var n=function(t,e){var r=lt(t,"text-part"),n=lt(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),i=n[0],a=n[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=u,r.onComplete=null,u+=r.duration,new N(t,{text:t.innerHTML},{text:""},r)})))).concat(o.map((function(n,i){return r.duration="auto"===r.duration?75*a[i].innerHTML.length:r.duration,r.delay=u,r.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=r.duration,new N(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function wt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function bt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function Tt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function St(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function _t(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?wt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?Tt(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?St(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?_t(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:wt,rotate3d:bt,translate:Tt,rotate:St,scale:_t,skew:xt}};function Ct(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function At(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Et;var It=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},Ct(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),At(t,e,i,n))}),n=a)}catch(t){}return i}(),Mt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],kt="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Ot=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Pt=!!It&&{passive:!1};function Lt(t){this.scrolling&&t.preventDefault()}function jt(){var t=this.element;return t===Ot?{el:document,st:document.body}:{el:t,st:t}}function Ut(){var t=jt.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,Ct(t.el,Mt[0],Lt,Pt),Ct(t.el,kt,Lt,Pt),t.st.style.pointerEvents="none")}function Ft(){var t=jt.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,At(t.el,Mt[0],Lt,Pt),At(t.el,kt,Lt,Pt),t.st.style.pointerEvents="")}var Ht={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Ot,Ut.call(this),this.element===Ot?window.pageYOffset||Ot.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.scrollTop=S(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:S},functions:Ht,Util:{preventScroll:Lt,scrollIn:Ut,scrollOut:Ft,scrollContainer:Ot,passiveHandler:Pt,getScrollTargets:jt}};e.ScrollProperty=Nt;var Vt=function(t,e){return parseFloat(t)/100*e},Xt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Dt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*S(e.s,r.s,n)>>0)/100,s=(100*S(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var Zt={prepareStart:function(){return Qt(this.element)},prepareProperty:function(t,e){return Qt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){return Kt(t,e,r,n)})}},qt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S,paintDraw:Kt},functions:Zt,Util:{getRectLength:Xt,getPolyLength:Dt,getLineLength:zt,getCircleLength:Bt,getEllipseLength:Rt,getTotalLength:Yt,getDraw:Qt,percent:Vt}};function Wt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=qt;var Gt="Invalid path value";function $t(t){return"number"==typeof t&&isFinite(t)}function Jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function te(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function ee(t,e){return Jt(t,e)<1e-9}var re={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},ne=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ie(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&ne.indexOf(t)>=0}function ae(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function se(t){return 97==(32|t)}function oe(t){return t>=48&&t<=57}function le(t){return t>=48&&t<=57||43===t||45===t||46===t}function ue(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function ce(t){for(;t.index=i)t.err="KUTE.js - "+Gt;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=re[r]&&(t.result.push([e].concat(n.splice(0,re[r]))),re[r]););}function de(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=se(e=t.path.charCodeAt(t.index)),ae(e))if(i=re[t.path[t.index].toLowerCase()],t.index++,ce(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?he(t):pe(t),t.err.length)return;t.data.push(t.param),ce(t),n=!1,t.index=t.max)break;if(!le(t.path.charCodeAt(t.index)))break}}fe(t)}else fe(t);else t.err="KUTE.js - "+Gt}function ve(t){var e=new ue(t),r=e.max;for(ce(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=te(n,i,.5),t.splice(r+1,0,i)}function Ae(t,e){var r,n;if("string"==typeof t){var i=ye(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Gt);if(!Ie(r=t.slice(0)))throw new TypeError(Gt);return r.length>1&&ee(r[0],r[r.length-1])&&r.pop(),_e(r)>0&&r.reverse(),!n&&e&&$t(e)&&e>0&&Ce(r,e),r}function Ie(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&$t(t[0])&&$t(t[1])}))}function Me(t,e,r){var n=Ae(t,r=r||i.morphPrecision),a=Ae(e,r),s=n.length-a.length;return Ee(n,s<0?-1*s:0),Ee(a,s>0?s:0),Se(n,a),[n,a]}ge.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},ge.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ke={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Wt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=Me(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},Oe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Wt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ke,Util:{INVALID_INPUT:Gt,isFiniteNumber:$t,distance:Jt,pointAlong:te,samePoint:ee,paramCounts:re,SPECIAL_SPACES:ne,isSpace:ie,isCommand:ae,isArc:se,isDigit:oe,isDigitStart:le,State:ue,skipSpaces:ce,scanFlag:pe,scanParam:he,finalizeSegment:fe,scanSegment:de,pathParse:ve,SvgPath:ge,split:me,pathStringToRing:ye,exactRing:we,approximateRing:be,measure:Te,rotateRing:Se,polygonLength:xe,polygonArea:_e,addPoints:Ee,bisect:Ce,normalizeRing:Ae,validRing:Ie,getInterpolationPoints:Me}};function Pe(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function Le(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=je.call(this,t,Le(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},Fe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:Ue,Util:{parseStringOrigin:Pe,parseTransformString:Le,parseTransformSVG:je}};for(var He in e.SVGTransformProperty=Fe,e){var Ne=e[He];e[He]=new X(Ne)}return{Animation:X,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new N(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:p,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:x,Process:g,Internals:O,Selector:j,Version:"2.0.2"}}));

From ced91131a33314bb0b6345f6e55222aa54338b88 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 05:01:56 +0000
Subject: [PATCH 151/187]

---
 clipProperty.html       |   2 +-
 filterEffects.html      |   1 -
 shadowProperties.html   |  97 +++++-----
 src/kute-extra.js       |  21 +--
 src/kute-extra.min.js   |   2 +-
 src/kute.min.js         |   2 +-
 svgCubicMorph.html      | 394 ++++++++++++++++++++--------------------
 svgDraw.html            |   2 +-
 svgMorph.html           |   8 +-
 svgTransform.html       |   4 +-
 textProperties.html     |  20 +-
 textWrite.html          |   1 +
 transformFunctions.html |   2 +-
 transformMatrix.html    |   2 +-
 14 files changed, 278 insertions(+), 280 deletions(-)

diff --git a/clipProperty.html b/clipProperty.html
index 209e92b..38df1cc 100644
--- a/clipProperty.html
+++ b/clipProperty.html
@@ -124,7 +124,7 @@
             
  • This property will only work with px unit for the rectangular mask, which is unfortunate.
    • 
             
  • Don't stop here, there are thankfully replacements for this property, you can simply use all kinds of SVG masks and filters in combination
                 with the HTML Attributes component for much more animation potential and for no compromise on animation quality.
    • 
-            
  • This component is bundled with the kute-extra.js distribution file.
    • 
+            
  • This component is bundled with the demo/src/kute-extra.js file.
    • 
           
 
         
diff --git a/filterEffects.html b/filterEffects.html
index 5e079dc..873baf6 100644
--- a/filterEffects.html
+++ b/filterEffects.html
@@ -162,7 +162,6 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop
               
  • Similar to the HTML Attributes component, this one can also deal with specific function namespace, for instance hue-rotate and 
                   hueRotate.
    • 
               
  • This component is bundled with the demo/src/kute-extra.js file.
    • 
-              
           
       
 
diff --git a/shadowProperties.html b/shadowProperties.html
index c2e77f5..3a09b6a 100644
--- a/shadowProperties.html
+++ b/shadowProperties.html
@@ -116,67 +116,66 @@ var myBSTween1 = KUTE.to('selector', {boxShadow: '10px 10px #069'}).start();
 
 // or a fromTo with string and array, hex and rgb
 var myBSTween2 = KUTE.fromTo(
-    'selector',                         // target
-    {boxShadow: [0, 0, 0, '#069']},     // from
-    {boxShadow: '5px 5px rgb(0,0,0)'})  // to
-    .start();
+  'selector',                         // target
+  {boxShadow: [0, 0, 0, '#069']},     // from
+  {boxShadow: '5px 5px rgb(0,0,0)'})  // to
+  .start();
 
 // maybe you want to animate an inset boxShadow?
 var myBSTween3 = KUTE.fromTo(
-    'selector',                                // target
-    {boxShadow: [5, 5, 0, '#069', 'inset']},   // from
-    {boxShadow: '0px 0px rgb(0,0,0)'})         // to
-    .start();
+  'selector',                                // target
+  {boxShadow: [5, 5, 0, '#069', 'inset']},   // from
+  {boxShadow: '0px 0px rgb(0,0,0)'})         // to
+  .start();
 
    
 
-          
    
-              
    
-                  
-              
    
-                  Start	
-              
    
-          
    
+        
    
+          
    
+            
    
+              Start	
+            
    
+        
    
 
-          
    Text Shadow
    
+        
    Text Shadow
    
 
 
    // tween to a string value
 var myTSTween1 = KUTE.to('selector', {textShadow: '10px 10px #069'}).start();
 
 // or a fromTo with string and array, hex and rgb
 var myTSTween2 = KUTE.fromTo(
-    'selector',                          // target
-    {textShadow: [0, 0, 0, '#069']},     // from
-    {textShadow: '5px 5px rgb(0,0,0)'})  // to
-    .start();
+  'selector',                          // target
+  {textShadow: [0, 0, 0, '#069']},     // from
+  {textShadow: '5px 5px rgb(0,0,0)'})  // to
+  .start();
 
    
 
-          
    
-              
    Sample Text
    
-                  
-              
    
-                  Start	
-              
    
+        
    
+          
    Sample Text
    
+              
+          
    
+            Start	
           
    
+        
    
 
-          
    Notes
    
-          
      
-              
    • The component will NOT handle multiple shadows per target at the same time.
      • 
-              
    • The component features a solid value processing script, it can handle a great deal of combinations of input values.
      • 
-              
    • I highly recommend that you check the boxShadow.js for more insight.
      • 
-              
    • This component is bundled with the kute-extra.js distribution file.
      • 
-          
    
-      
-      
    
-
-      
-      
-
+        
    Notes
    
+        
      
+          
    • The component will NOT handle multiple shadows per target at the same time.
      • 
+          
    • The component features a solid value processing script, it can handle a great deal of combinations of input values.
      • 
+          
    • I highly recommend that you check the boxShadow.js for more insight.
      • 
+          
    • This component is bundled with the demo/src/kute-extra.js file.
      • 
+        
    
+    
     
+
+    
+    
+
+  
     
 
 
@@ -184,12 +183,12 @@ var myTSTween2 = KUTE.fromTo(
 ================================================== -->
     
 
-    
-    
-    
+  
+  
+  
 
-    
-    
+  
+  
 
 
 
diff --git a/src/kute-extra.js b/src/kute-extra.js
index b4df83b..10f90e0 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -1505,15 +1505,6 @@
     }
     return { s: start, e: end, l: length };
   };
-  function paintDraw(elem,a,b,v){
-    var pathLength = (a.l*100>>0)/100,
-        start = (numbers(a.s,b.s,v)*100>>0)/100,
-        end = (numbers(a.e,b.e,v)*100>>0)/100,
-        offset = 0 - start,
-        dashOne = end+offset;
-    elem.style.strokeDashoffset = offset + "px";
-    elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
-  }
   function getDrawValue(){
     return getDraw(this.element);
   }
@@ -1522,7 +1513,15 @@
   }
   function onStartDraw(tweenProp){
     if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
-      KUTE[tweenProp] = function (elem,a,b,v) { return paintDraw(elem,a,b,v); };
+      KUTE[tweenProp] = function (elem,a,b,v) {
+        var pathLength = (a.l*100>>0)/100,
+          start = (numbers(a.s,b.s,v)*100>>0)/100,
+          end = (numbers(a.e,b.e,v)*100>>0)/100,
+          offset = 0 - start,
+          dashOne = end+offset;
+        elem.style.strokeDashoffset = offset + "px";
+        elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
+      };
     }
   }
   var svgDrawFunctions = {
@@ -1534,7 +1533,7 @@
     component: 'svgDraw',
     property: 'draw',
     defaultValue: '0% 0%',
-    Interpolate: {numbers: numbers,paintDraw: paintDraw},
+    Interpolate: {numbers: numbers},
     functions: svgDrawFunctions,
     Util: {
       getRectLength: getRectLength,
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index 7d6c0cf..8f8e8f3 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Extra v2.0.2 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},n={duration:700,delay:0,easing:"linear"},r={},i={},a={},s={},o={},l={},u={supportedProperties:t,defaultValues:e,defaultOptions:n,prepareProperty:r,prepareStart:i,crossCheck:a,onStart:s,onComplete:o,linkProperty:l},p={},c={};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,D=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0),(i=i||{}).delay=i.delay||n.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=i||{},s[o].delay=o>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new q(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};D.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},D.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},D.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},D.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},D.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof D)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},D.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},D.prototype.removeTweens=function(){this.tweens=[]},D.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var B=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};B.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},B.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},B.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},B.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},B.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},B.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var X=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};X.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:Q,Util:{trueDimension:Y}};c.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};c.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};c.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};c.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=gt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=ot(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Y(l).u||Y(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Y(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};c.FilterEffects=Tt;var Et={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et};c.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var jt={prepareStart:function(){return Ut(this.element)},prepareProperty:function(t,e){return Ut(this.element,e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){return Ft(t,e,n,r)})}},Vt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h,paintDraw:Ft},functions:jt,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};c.SVGDraw=Vt;function Rt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Ht(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Nt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function qt(t){if(!(t=Nt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Xt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,D=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Wt(t,e){for(var n=qt(t),r=e&&qt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Zt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Jt(t){var e=Gt(t),n=[];return e.map((function(t,r){n[r]=Zt(e,r)})),n}function te(t,e){var n=Gt(t),r=Gt(e),i=n.length-1,a=[],s=[],o=Jt(t);return o.map((function(t,e){for(var o=0,l=Kt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:ee(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Wt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?$t.call(this,r[0]):r[0],a=this._reverseSecondPath?$t.call(this,r[1]):r[1];i=te.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},re={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:ee},functions:ne,Util:{l2c:Dt,q2c:Bt,a2c:Xt,catmullRom2bezier:Rt,ellipsePath:Ht,path2curve:Wt,pathToAbsolute:qt,toPathString:ee,parsePathString:Nt,getRotatedCurve:te,getRotations:Jt,getRotationSegments:Zt,reverseCurve:$t,getSegments:Gt,createPath:Kt}};function ie(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ae(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=se.call(this,t,ae(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},le={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:oe,Util:{parseStringOrigin:ie,parseTransformString:ae,parseTransformSVG:se}};function ue(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function pe(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=le;var ce=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},ue(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),pe(t,e,i,r))}),r=a)}catch(t){}return i}(),he="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],fe="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",de=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,ve=!!ce&&{passive:!1};function ge(t){this.scrolling&&t.preventDefault()}function me(){var t=this.element;return t===de?{el:document,st:document.body}:{el:t,st:t}}function ye(){var t=me.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,ue(t.el,he[0],ge,ve),ue(t.el,fe,ge,ve),t.st.style.pointerEvents="none")}function be(){var t=me.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,pe(t.el,he[0],ge,ve),pe(t.el,fe,ge,ve),t.st.style.pointerEvents="")}var we={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:de,ye.call(this),this.element===de?window.pageYOffset||de.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){be.call(this)}},xe={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:we,Util:{preventScroll:ge,scrollIn:ye,scrollOut:be,scrollContainer:de,passiveHandler:ve,getScrollTargets:me}};c.ScrollProperty=xe;var Se=["boxShadow","textShadow"];function Me(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Te(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Ee={};Se.map((function(t){return Ee[t]=Te}));var _e={component:"shadowProperties",properties:Se,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Me(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Me(e,t));return e},onStart:Ee},Util:{processShadowArray:Me,trueColor:ot}};c.ShadowProperties=_e;var Ce=["fontSize","lineHeight","letterSpacing","wordSpacing"],ke={};function Ie(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}Ce.forEach((function(t){ke[t]=Ie}));var Pe={component:"textProperties",category:"textProps",properties:Ce,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:ke},Util:{trueDimension:Y}};function Oe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Ae(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),je=String("0123456789").split(""),Ve=Le.concat(Ue,je),Re=Ve.concat(Fe),He={alpha:Le,upper:Ue,symbols:Fe,numeric:je,alphanumeric:Ve,all:Re};var Ne={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in He?He[e]:e&&e.length?e:He[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},qe={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:Ne},Util:{charSet:He,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=Ae(t,"text-part"),r=Ae(Oe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=u,n.onComplete=null,u+=n.duration,new q(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=u,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=n.duration,new q(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};c.TextWriteProperties=qe;var De="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new De,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=De)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var Xe in c.TransformMatrix=Be,c){var ze=c[Xe];c[Xe]=new z(ze)}return{Animation:z,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new q(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t),e,e,n)},TweenCollection:D,ProgressBar:B,allFromTo:function(t,e,n,r){return r=r||{},new D(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new D(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.2"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},n={duration:700,delay:0,easing:"linear"},r={},i={},a={},s={},o={},l={},u={supportedProperties:t,defaultValues:e,defaultOptions:n,prepareProperty:r,prepareStart:i,crossCheck:a,onStart:s,onComplete:o,linkProperty:l},p={},c={};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,B=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0),(i=i||{}).delay=i.delay||n.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=i||{},s[o].delay=o>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new q(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};B.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},B.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},B.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},B.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},B.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof B)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},B.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},B.prototype.removeTweens=function(){this.tweens=[]},B.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};D.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},D.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},D.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},D.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},D.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},D.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var X=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};X.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:Q,Util:{trueDimension:Y}};c.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};c.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};c.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};c.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=gt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=ot(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Y(l).u||Y(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Y(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};c.FilterEffects=Tt;var Et={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et};c.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},jt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h},functions:Ft,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};c.SVGDraw=jt;function Vt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Rt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Ht(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Nt(t){if(!(t=Ht(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Dt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,B=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Qt(t,e){for(var n=Nt(t),r=e&&Nt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function $t(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Zt(t){var e=Kt(t),n=[];return e.map((function(t,r){n[r]=$t(e,r)})),n}function Jt(t,e){var n=Kt(t),r=Kt(e),i=n.length-1,a=[],s=[],o=Zt(t);return o.map((function(t,e){for(var o=0,l=Wt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:te(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Qt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Gt.call(this,r[0]):r[0],a=this._reverseSecondPath?Gt.call(this,r[1]):r[1];i=Jt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ne={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:te},functions:ee,Util:{l2c:qt,q2c:Bt,a2c:Dt,catmullRom2bezier:Vt,ellipsePath:Rt,path2curve:Qt,pathToAbsolute:Nt,toPathString:te,parsePathString:Ht,getRotatedCurve:Jt,getRotations:Zt,getRotationSegments:$t,reverseCurve:Gt,getSegments:Kt,createPath:Wt}};function re(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ie(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=ae.call(this,t,ie(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},oe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:se,Util:{parseStringOrigin:re,parseTransformString:ie,parseTransformSVG:ae}};function le(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ue(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=oe;var pe=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},le(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ue(t,e,i,r))}),r=a)}catch(t){}return i}(),ce="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],he="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",fe=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,de=!!pe&&{passive:!1};function ve(t){this.scrolling&&t.preventDefault()}function ge(){var t=this.element;return t===fe?{el:document,st:document.body}:{el:t,st:t}}function me(){var t=ge.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,le(t.el,ce[0],ve,de),le(t.el,he,ve,de),t.st.style.pointerEvents="none")}function ye(){var t=ge.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ue(t.el,ce[0],ve,de),ue(t.el,he,ve,de),t.st.style.pointerEvents="")}var be={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:fe,me.call(this),this.element===fe?window.pageYOffset||fe.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){ye.call(this)}},we={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:be,Util:{preventScroll:ve,scrollIn:me,scrollOut:ye,scrollContainer:fe,passiveHandler:de,getScrollTargets:ge}};c.ScrollProperty=we;var xe=["boxShadow","textShadow"];function Se(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Me(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Te={};xe.map((function(t){return Te[t]=Me}));var Ee={component:"shadowProperties",properties:xe,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Se(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Se(e,t));return e},onStart:Te},Util:{processShadowArray:Se,trueColor:ot}};c.ShadowProperties=Ee;var _e=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ce={};function ke(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}_e.forEach((function(t){Ce[t]=ke}));var Ie={component:"textProperties",category:"textProps",properties:_e,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Ce},Util:{trueDimension:Y}};function Pe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Oe(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),Fe=String("0123456789").split(""),je=Ae.concat(Le,Fe),Ve=je.concat(Ue),Re={alpha:Ae,upper:Le,symbols:Ue,numeric:Fe,alphanumeric:je,all:Ve};var He={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in Re?Re[e]:e&&e.length?e:Re[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},Ne={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:He},Util:{charSet:Re,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=Oe(t,"text-part"),r=Oe(Pe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=u,n.onComplete=null,u+=n.duration,new q(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=u,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=n.duration,new q(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};c.TextWriteProperties=Ne;var qe="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new qe,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=qe)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var De in c.TransformMatrix=Be,c){var Xe=c[De];c[De]=new z(Xe)}return{Animation:z,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new q(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t),e,e,n)},TweenCollection:B,ProgressBar:D,allFromTo:function(t,e,n,r){return r=r||{},new B(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new B(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.2"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index 455140b..89d8808 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Standard v2.0.2 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:l,onComplete:u,linkProperty:c};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],l=r[s];for(var u in o){var c={};for(var p in t)n[p]&&o[p]?i[p]=o[p].call(this,p,t[p]):!n[u]&&"transform"===u&&l.includes(p)?c[p]=t[p]:!n[u]&&l&&l.includes(p)&&(i[p]=o[u].call(this,p,t[p]));Object.keys&&Object.keys(c).length&&(i[u]=o[u].call(this,u,c))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var l in o)(l===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[l].call(this,i,this.valuesStart[i]))}for(var u in e)u in this.valuesStart||(t[u]=e[u]||n[u]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function w(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var b={},T="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function S(t,e,r){return(t=+t)+(e-=t)*r}var x={numbers:S,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return l[u]||(l[u]=function(t){!b[t]&&t===this._easing.name&&(b[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||b.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var r in l[e])l[e][r].call(this,r);k.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(w(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in u)for(var e in u[t])u[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=b.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(w(this),this.paused=!0,this._pauseTime=b.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=U.Tween,V=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0),(n=n||{}).delay=n.delay||i.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=n||{},s[o].delay=o>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new N(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(t){return t=void 0===t?b.Time():t,this.tweens.map((function(e){return e.start(t)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var X=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*S(r,n,i)>>0)/10:S(r,n,i)>>0)+"px"})}z.map((function(t){return B[t]=0}));var Y={};z.map((function(t){return Y[t]=R}));var Q={component:"boxModelProps",category:"boxModel",properties:z,defaultValues:B,Interpolate:{numbers:S},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=D(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:Y}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?S(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*S(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=Q;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};function G(t){this.valuesEnd[t]&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){W[t]="#000"}));var $={};q.map((function(t){return $[t]=G}));var J={component:"colorProps",category:"colors",properties:q,defaultValues:W,Interpolate:{numbers:S,colors:Z},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};e.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=rt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=K(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[i]).u,c=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*S(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=D(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*S(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){for(var i in r)b.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!b[t]&&this.valuesEnd.attr&&(b[t]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:S,colors:Z},functions:nt,Util:{replaceUppercase:rt,trueColor:K,trueDimension:D}};e.HTMLAttributes=it;var at={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=(1e3*S(r,n,i)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:S},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function lt(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=ut.concat(ct,ht),dt=ft.concat(pt),vt={alpha:ut,upper:ct,symbols:pt,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(t){if(!b[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in vt?vt[e]:e&&e.length?e:vt[i.textChars];b[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.innerHTML=S(e,r,n)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:S},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var n=function(t,e){var r=lt(t,"text-part"),n=lt(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),i=n[0],a=n[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=u,r.onComplete=null,u+=r.duration,new N(t,{text:t.innerHTML},{text:""},r)})))).concat(o.map((function(n,i){return r.duration="auto"===r.duration?75*a[i].innerHTML.length:r.duration,r.delay=u,r.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=r.duration,new N(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function wt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function bt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function Tt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function St(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function _t(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?wt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?Tt(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?St(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?_t(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:wt,rotate3d:bt,translate:Tt,rotate:St,scale:_t,skew:xt}};function Ct(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function At(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Et;var It=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},Ct(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),At(t,e,i,n))}),n=a)}catch(t){}return i}(),Mt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],kt="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Ot=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Pt=!!It&&{passive:!1};function Lt(t){this.scrolling&&t.preventDefault()}function jt(){var t=this.element;return t===Ot?{el:document,st:document.body}:{el:t,st:t}}function Ut(){var t=jt.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,Ct(t.el,Mt[0],Lt,Pt),Ct(t.el,kt,Lt,Pt),t.st.style.pointerEvents="none")}function Ft(){var t=jt.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,At(t.el,Mt[0],Lt,Pt),At(t.el,kt,Lt,Pt),t.st.style.pointerEvents="")}var Ht={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Ot,Ut.call(this),this.element===Ot?window.pageYOffset||Ot.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.scrollTop=S(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:S},functions:Ht,Util:{preventScroll:Lt,scrollIn:Ut,scrollOut:Ft,scrollContainer:Ot,passiveHandler:Pt,getScrollTargets:jt}};e.ScrollProperty=Nt;var Vt=function(t,e){return parseFloat(t)/100*e},Xt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Dt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*S(e.s,r.s,n)>>0)/100,s=(100*S(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"}var Zt={prepareStart:function(){return Qt(this.element)},prepareProperty:function(t,e){return Qt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){return Kt(t,e,r,n)})}},qt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S,paintDraw:Kt},functions:Zt,Util:{getRectLength:Xt,getPolyLength:Dt,getLineLength:zt,getCircleLength:Bt,getEllipseLength:Rt,getTotalLength:Yt,getDraw:Qt,percent:Vt}};function Wt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=qt;var Gt="Invalid path value";function $t(t){return"number"==typeof t&&isFinite(t)}function Jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function te(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function ee(t,e){return Jt(t,e)<1e-9}var re={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},ne=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ie(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&ne.indexOf(t)>=0}function ae(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function se(t){return 97==(32|t)}function oe(t){return t>=48&&t<=57}function le(t){return t>=48&&t<=57||43===t||45===t||46===t}function ue(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function ce(t){for(;t.index=i)t.err="KUTE.js - "+Gt;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=re[r]&&(t.result.push([e].concat(n.splice(0,re[r]))),re[r]););}function de(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=se(e=t.path.charCodeAt(t.index)),ae(e))if(i=re[t.path[t.index].toLowerCase()],t.index++,ce(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?he(t):pe(t),t.err.length)return;t.data.push(t.param),ce(t),n=!1,t.index=t.max)break;if(!le(t.path.charCodeAt(t.index)))break}}fe(t)}else fe(t);else t.err="KUTE.js - "+Gt}function ve(t){var e=new ue(t),r=e.max;for(ce(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=te(n,i,.5),t.splice(r+1,0,i)}function Ae(t,e){var r,n;if("string"==typeof t){var i=ye(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Gt);if(!Ie(r=t.slice(0)))throw new TypeError(Gt);return r.length>1&&ee(r[0],r[r.length-1])&&r.pop(),_e(r)>0&&r.reverse(),!n&&e&&$t(e)&&e>0&&Ce(r,e),r}function Ie(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&$t(t[0])&&$t(t[1])}))}function Me(t,e,r){var n=Ae(t,r=r||i.morphPrecision),a=Ae(e,r),s=n.length-a.length;return Ee(n,s<0?-1*s:0),Ee(a,s>0?s:0),Se(n,a),[n,a]}ge.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},ge.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ke={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Wt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=Me(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},Oe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Wt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ke,Util:{INVALID_INPUT:Gt,isFiniteNumber:$t,distance:Jt,pointAlong:te,samePoint:ee,paramCounts:re,SPECIAL_SPACES:ne,isSpace:ie,isCommand:ae,isArc:se,isDigit:oe,isDigitStart:le,State:ue,skipSpaces:ce,scanFlag:pe,scanParam:he,finalizeSegment:fe,scanSegment:de,pathParse:ve,SvgPath:ge,split:me,pathStringToRing:ye,exactRing:we,approximateRing:be,measure:Te,rotateRing:Se,polygonLength:xe,polygonArea:_e,addPoints:Ee,bisect:Ce,normalizeRing:Ae,validRing:Ie,getInterpolationPoints:Me}};function Pe(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function Le(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=je.call(this,t,Le(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},Fe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:Ue,Util:{parseStringOrigin:Pe,parseTransformString:Le,parseTransformSVG:je}};for(var He in e.SVGTransformProperty=Fe,e){var Ne=e[He];e[He]=new X(Ne)}return{Animation:X,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new N(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:p,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:x,Process:g,Internals:O,Selector:j,Version:"2.0.2"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:l,onComplete:u,linkProperty:c};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],l=r[s];for(var u in o){var c={};for(var p in t)n[p]&&o[p]?i[p]=o[p].call(this,p,t[p]):!n[u]&&"transform"===u&&l.includes(p)?c[p]=t[p]:!n[u]&&l&&l.includes(p)&&(i[p]=o[u].call(this,p,t[p]));Object.keys&&Object.keys(c).length&&(i[u]=o[u].call(this,u,c))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var l in o)(l===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[l].call(this,i,this.valuesStart[i]))}for(var u in e)u in this.valuesStart||(t[u]=e[u]||n[u]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function w(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var b={},T="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function S(t,e,r){return(t=+t)+(e-=t)*r}var x={numbers:S,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return l[u]||(l[u]=function(t){!b[t]&&t===this._easing.name&&(b[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||b.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var r in l[e])l[e][r].call(this,r);k.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(w(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in u)for(var e in u[t])u[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=b.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(w(this),this.paused=!0,this._pauseTime=b.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=U.Tween,V=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0),(n=n||{}).delay=n.delay||i.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=n||{},s[o].delay=o>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new N(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(t){return t=void 0===t?b.Time():t,this.tweens.map((function(e){return e.start(t)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var X=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*S(r,n,i)>>0)/10:S(r,n,i)>>0)+"px"})}z.map((function(t){return B[t]=0}));var Y={};z.map((function(t){return Y[t]=R}));var Q={component:"boxModelProps",category:"boxModel",properties:z,defaultValues:B,Interpolate:{numbers:S},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=D(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:Y}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?S(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*S(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=Q;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};function G(t){this.valuesEnd[t]&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){W[t]="#000"}));var $={};q.map((function(t){return $[t]=G}));var J={component:"colorProps",category:"colors",properties:q,defaultValues:W,Interpolate:{numbers:S,colors:Z},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};e.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=rt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=K(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[i]).u,c=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*S(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=D(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*S(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){for(var i in r)b.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!b[t]&&this.valuesEnd.attr&&(b[t]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:S,colors:Z},functions:nt,Util:{replaceUppercase:rt,trueColor:K,trueDimension:D}};e.HTMLAttributes=it;var at={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=(1e3*S(r,n,i)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:S},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function lt(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=ut.concat(ct,ht),dt=ft.concat(pt),vt={alpha:ut,upper:ct,symbols:pt,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(t){if(!b[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in vt?vt[e]:e&&e.length?e:vt[i.textChars];b[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.innerHTML=S(e,r,n)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:S},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var n=function(t,e){var r=lt(t,"text-part"),n=lt(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),i=n[0],a=n[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=u,r.onComplete=null,u+=r.duration,new N(t,{text:t.innerHTML},{text:""},r)})))).concat(o.map((function(n,i){return r.duration="auto"===r.duration?75*a[i].innerHTML.length:r.duration,r.delay=u,r.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=r.duration,new N(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function wt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function bt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function Tt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function St(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function _t(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?wt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?Tt(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?St(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?_t(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:wt,rotate3d:bt,translate:Tt,rotate:St,scale:_t,skew:xt}};function Ct(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function At(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Et;var It=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},Ct(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),At(t,e,i,n))}),n=a)}catch(t){}return i}(),Mt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],kt="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Ot=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Pt=!!It&&{passive:!1};function Lt(t){this.scrolling&&t.preventDefault()}function jt(){var t=this.element;return t===Ot?{el:document,st:document.body}:{el:t,st:t}}function Ut(){var t=jt.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,Ct(t.el,Mt[0],Lt,Pt),Ct(t.el,kt,Lt,Pt),t.st.style.pointerEvents="none")}function Ft(){var t=jt.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,At(t.el,Mt[0],Lt,Pt),At(t.el,kt,Lt,Pt),t.st.style.pointerEvents="")}var Ht={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Ot,Ut.call(this),this.element===Ot?window.pageYOffset||Ot.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.scrollTop=S(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:S},functions:Ht,Util:{preventScroll:Lt,scrollIn:Ut,scrollOut:Ft,scrollContainer:Ot,passiveHandler:Pt,getScrollTargets:jt}};e.ScrollProperty=Nt;var Vt=function(t,e){return parseFloat(t)/100*e},Xt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Dt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*S(e.s,r.s,n)>>0)/100,s=(100*S(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Zt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S},functions:Kt,Util:{getRectLength:Xt,getPolyLength:Dt,getLineLength:zt,getCircleLength:Bt,getEllipseLength:Rt,getTotalLength:Yt,getDraw:Qt,percent:Vt}};function qt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=Zt;var Wt="Invalid path value";function Gt(t){return"number"==typeof t&&isFinite(t)}function $t(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Jt(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function te(t,e){return $t(t,e)<1e-9}var ee={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},re=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ne(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&re.indexOf(t)>=0}function ie(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function ae(t){return 97==(32|t)}function se(t){return t>=48&&t<=57}function oe(t){return t>=48&&t<=57||43===t||45===t||46===t}function le(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function ue(t){for(;t.index=i)t.err="KUTE.js - "+Wt;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=ee[r]&&(t.result.push([e].concat(n.splice(0,ee[r]))),ee[r]););}function fe(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=ae(e=t.path.charCodeAt(t.index)),ie(e))if(i=ee[t.path[t.index].toLowerCase()],t.index++,ue(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?pe(t):ce(t),t.err.length)return;t.data.push(t.param),ue(t),n=!1,t.index=t.max)break;if(!oe(t.path.charCodeAt(t.index)))break}}he(t)}else he(t);else t.err="KUTE.js - "+Wt}function de(t){var e=new le(t),r=e.max;for(ue(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Jt(n,i,.5),t.splice(r+1,0,i)}function Ce(t,e){var r,n;if("string"==typeof t){var i=me(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Wt);if(!Ae(r=t.slice(0)))throw new TypeError(Wt);return r.length>1&&te(r[0],r[r.length-1])&&r.pop(),xe(r)>0&&r.reverse(),!n&&e&&Gt(e)&&e>0&&Ee(r,e),r}function Ae(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Gt(t[0])&&Gt(t[1])}))}function Ie(t,e,r){var n=Ce(t,r=r||i.morphPrecision),a=Ce(e,r),s=n.length-a.length;return _e(n,s<0?-1*s:0),_e(a,s>0?s:0),Te(n,a),[n,a]}ve.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},ve.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var Me={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+qt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=Ie(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},ke={component:"svgMorph",property:"path",defaultValue:[],Interpolate:qt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:Me,Util:{INVALID_INPUT:Wt,isFiniteNumber:Gt,distance:$t,pointAlong:Jt,samePoint:te,paramCounts:ee,SPECIAL_SPACES:re,isSpace:ne,isCommand:ie,isArc:ae,isDigit:se,isDigitStart:oe,State:le,skipSpaces:ue,scanFlag:ce,scanParam:pe,finalizeSegment:he,scanSegment:fe,pathParse:de,SvgPath:ve,split:ge,pathStringToRing:me,exactRing:ye,approximateRing:we,measure:be,rotateRing:Te,polygonLength:Se,polygonArea:xe,addPoints:_e,bisect:Ee,normalizeRing:Ce,validRing:Ae,getInterpolationPoints:Ie}};function Oe(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function Pe(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=Le.call(this,t,Pe(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},Ue={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:je,Util:{parseStringOrigin:Oe,parseTransformString:Pe,parseTransformSVG:Le}};for(var Fe in e.SVGTransformProperty=Ue,e){var He=e[Fe];e[Fe]=new X(He)}return{Animation:X,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new N(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:p,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:x,Process:g,Internals:O,Selector:j,Version:"2.0.2"}}));
diff --git a/svgCubicMorph.html b/svgCubicMorph.html
index 1b2c8e1..0ad0afb 100644
--- a/svgCubicMorph.html
+++ b/svgCubicMorph.html
@@ -2,27 +2,26 @@
 
 
 
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
 
-    KUTE.js SVG Cubic Morph
+  KUTE.js SVG Cubic Morph
 
-    
-    
+  
+  
 
-    
-    
-
-    
-    
+  
+  
 
+  
+  
 
 
 
@@ -78,7 +77,7 @@
         
    
           
    SVG Cubic Morph
    
           
    The component that also covers SVG morphing, with similar functionality as for the SVG Morph component, but with a different 
-              implementation for value processing and animation setup.
    
+            implementation for value processing and animation setup.
    
         
    
 
         
    
@@ -90,22 +89,22 @@
               
    
               
    
                 
    The KUTE.js SVG Cubic Morph component enables animation for the d (description) presentation attribute and is the latest in all the SVG 
-                    components.
    
+                  components.
    
                 
    The main difference with the other SVG Morph component is the fact that this time we're using some path processing scripts borrowed from 
-                    Raphael.js and other libraries to convert all path commands into cubic-bezier path commands.
    
+                  Raphael.js and other libraries to convert all path commands into cubic-bezier path commands.
    
                 
    This component will process paths and out of the box will provide the closest possible interpolation by default. It comes with two tween options to help you manage the morphing
-                    animation in certain conditions:
    
+                  animation in certain conditions:
    
               
    
           
 
           
    
               
    
-                  
    Options
    
-                  
    A series of familiar options to optimize the animation for every situation.
    
+                
    Options
    
+                
    A series of familiar options to optimize the animation for every situation.
    
               
    
               
    
                 
    To enhance processing and improve the morphing animation, in certain cases you will need to control the outcome via two options
-                    to reverse paths.
    
+                  to reverse paths.
    
                 
      
                   
    • reverseFirstPath: FALSE when is TRUE you will reverse the FIRST shape. By default this option is false.
      • 
                   
    • reverseSecondPath: FALSE when is TRUE you will reverse the SECOND shape. By default this option is also false.
      • 
@@ -122,8 +121,8 @@
             
      The first morphing animation example is a transition from a rectangle into a star, just like for the other component.
      
 
 
      <svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
-    <path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
-    <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
+  <path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
+  <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
 </svg>
 
      
 
@@ -142,29 +141,29 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
             
      By default, the component will process the paths as authored and deliver its best without any option required, like for the first red rectangle below which applies to any of the above invocations:
      
 
             
      
-                
-                    
-                    
-                
-                
-                    
-                    
-                
-                
      
-                    Start
-                
      
-            
      
+              
+                  
+                  
+              
+              
+                  
+                  
+              
+              
      
+                  Start
+              
      
+          
    
 
-            
    The second blue shape and its corresponding end shape have been edited by adding additional curve points using a vector graphics editor to match the amount of points in both shapes as well as to optimize their travel
-                distance during the animation. You can use the same technique on your shapes to control the animation to your style.
    
-            
    Chris Coyier wrote an excelent article to explain how SVG morphing animation works, it should give you a pretty good idea on the concept, terminology.
    
+          
    The second blue shape and its corresponding end shape have been edited by adding additional curve points using a vector graphics editor to match the amount of points in both shapes as well as to optimize their travel
+              distance during the animation. You can use the same technique on your shapes to control the animation to your style.
    
+          
    Chris Coyier wrote an excelent article to explain how SVG morphing animation works, it should give you a pretty good idea on the concept, terminology.
    
 
-            
    Subpath Example
    
-            
    In other cases, you may want to morph paths that have subpaths. Let's have a look at the following SVG:
    
+          
    Subpath Example
    
+          
    In other cases, you may want to morph paths that have subpaths. Let's have a look at the following SVG:
    
 
 
    <svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
   <path id="w1" d="M412.23 511.914c-47.708-24.518-94.086-36.958-137.88-36.958-5.956 0-11.952 0.18-17.948 0.708-55.88 4.624-106.922 19.368-139.75 30.828-8.708 3.198-17.634 6.576-26.83 10.306l-89.822 311.394c61.702-22.832 116.292-33.938 166.27-33.938 80.846 0 139.528 30.208 187.992 61.304 22.962-77.918 78.044-266.09 94.482-322.324-11.95-7.284-24.076-14.57-36.514-21.32z 
@@ -177,165 +176,166 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
     m0-761.2l488.4-67.4v427.6h-488.4v-360.2z"/>
 </svg>
 
    
-            
    Similar to the svgMorph component, this component doesn't provide multipath processing so we should split the sub-paths into multiple <path> shapes, analyze and associate them
-                in a way that corresponding shapes are close and their points travel the least possible distance.
    
 
-            
    Now since we've worked with these paths before, the first example below showcases how the svgCubicMorph component handles it by default, using the reverseSecondPath:true option for all tweens because 
-                each shape have a slightly different position from its corresponding shape. The following example was made possible by editing the shapes with a vector graphics editor. The last example showcases a creative use of
-                association between starting and end shapes. Let's have a look:
    
+          
    Similar to the svgMorph component, this component doesn't provide multipath processing so we should split the sub-paths into multiple <path> shapes, analyze and associate them
+              in a way that corresponding shapes are close and their points travel the least possible distance.
    
 
-            
    
-                
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                
-                
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                
-                
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                
+          
    Now since we've worked with these paths before, the first example below showcases how the svgCubicMorph component handles it by default, using the reverseSecondPath:true option for all tweens because 
+              each shape have a slightly different position from its corresponding shape. The following example was made possible by editing the shapes with a vector graphics editor. The last example showcases a creative use of
+              association between starting and end shapes. Let's have a look:
    
 
-                
    
-                    Start
-                
    
-            
    
-            
    Make sure to check the markup here as well as the svgCubicMorph.js for a full code review.
    
+          
    
+              
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+              
+              
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+              
+              
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+                  
+              
 
-            
    Intersecting Paths Example
    
-            
    The same preparation apply here, however the outcome is a bit different with cubic-bezier path commands, as shown in the first example. For the next two examples, the shapes have been edited for a better outcome.
-                Let's have a look:
    
+              
    
+                  Start
+              
    
+          
    
+          
    Make sure to check the markup here as well as the svgCubicMorph.js for a full code review.
    
 
-            
    
-                
-                    
-                        
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                        
-                    
-                    
-                    
-                
-                
-                    
-                        
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                        
-                    
-                    
-                    
-                
-                
-                    
-                        
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                        
-                    
-                    
-                    
-                
-                
    
-                    Start
-                
    
-            
    
+          
    Intersecting Paths Example
    
+          
    The same preparation apply here, however the outcome is a bit different with cubic-bezier path commands, as shown in the first example. For the next two examples, the shapes have been edited for a better outcome.
+              Let's have a look:
    
 
-            
    So the technique involves creating <mask> elements, splitting multipath shapes into multiple <path> shapes, matching the amount of starting and ending shapes by duplicating 
-                an existing shape or by sampling another shape for the same purpose, editing shapes for more accurate point-to-point animation, as well as various options to optimize the visual presentation.
    
+          
    
+              
+                  
+                      
+                          
+                          
+                          
+                          
+                          
+                          
+                          
+                      
+                  
+                  
+                  
+              
+              
+                  
+                      
+                          
+                          
+                          
+                          
+                          
+                          
+                          
+                      
+                  
+                  
+                  
+              
+              
+                  
+                      
+                          
+                          
+                          
+                          
+                          
+                          
+                          
+                      
+                  
+                  
+                  
+              
+              
    
+                  Start
+              
    
+          
    
 
-            
    That's it, you now mastered the SVG Cubic Morph component.
    
+          
    So the technique involves creating <mask> elements, splitting multipath shapes into multiple <path> shapes, matching the amount of starting and ending shapes by duplicating 
+              an existing shape or by sampling another shape for the same purpose, editing shapes for more accurate point-to-point animation, as well as various options to optimize the visual presentation.
    
 
-            
    Notes
    
-            
      
-                
    • Since animation works only with path SVGElements, you might need a convertToPath utility.
      • 
-                
    • In some cases your start and end shapes don't have a very close size, you might need to use SVGPath tools to apply a scale transformation to your shapes'
-                    path commands.
      • 
-                
    • The SVG Cubic Morph component WILL animate paths with sub-paths, but the animation isn't very appealing unless you've prepared your paths for this specific case, in other cases hopefuly
-                    this guide will help you break the ice.
      • 
-                
    • Compared to svgMorph, this component requires more work, but can be more memory efficient, as we're dealing with significantly less interpolation points which translates directly 
-                    into better performance and the shapes never show any sign of "polygon artifacts".
      • 
-                
    • Some shapes can be broken even if the browser won't throw any error so make sure you double check with your SVG editor of choice.
      • 
-                
    • In some cases the duplicated curve bezier points don't produce the best morphing animation, but you can edit the shapes and add your own additional path commands between the existing ones
-                    so that the component will work with actual points that travel less and produce a much more "natural" morphing animation.
      • 
-                
    • The edited shapes can be found in the assets/img folder of this demo, make sure to check them out.
      • 
-                
    • Make sure to check the svgCubicMorph.js for a full code review.
      • 
-                
    • This component is affected by the the fill-rule="evenodd" specific SVG attribute, you must make sure you check your shapes in that regard as well.
      • 
-                
    • This component is bundled with the kute-extra.js distribution file.
      • 
-            
    
+          
    That's it, you now mastered the SVG Cubic Morph component.
    
+
+          
    Notes
    
+          
      
+            
    • Since animation works only with path SVGElements, you might need a convertToPath utility.
      • 
+            
    • In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or something like SVGPath tools to
+               apply a scale transformation to your shapes' path commands.
      • 
+            
    • The SVG Cubic Morph component WILL animate paths with sub-paths, but the animation isn't very appealing unless you've prepared your paths for this specific case, in other cases hopefuly
+                this guide will help you break the ice.
      • 
+            
    • Compared to svgMorph, this component requires more work, but can be more memory efficient, as we're dealing with significantly less interpolation points which translates directly 
+                into better performance and the shapes never show any sign of "polygon artifacts".
      • 
+            
    • Some shapes can be broken even if the browser won't throw any error so make sure you double check with your SVG editor of choice.
      • 
+            
    • In some cases the duplicated curve bezier points don't produce the best morphing animation, but you can edit the shapes and add your own additional path commands between the existing ones
+                so that the component will work with actual points that travel less and produce a much more "natural" morphing animation.
      • 
+            
    • The edited shapes can be found in the assets/img folder of this demo, make sure to check them out.
      • 
+            
    • Make sure to check the svgCubicMorph.js for a full code review.
      • 
+            
    • This component is affected by the the fill-rule="evenodd" specific SVG attribute, you must make sure you check your shapes in that regard as well.
      • 
+            
    • This component is bundled with the demo/src/kute-extra.js file.
      • 
+          
    
+      
    
+
+      
+      
 
     
     
diff --git a/svgDraw.html b/svgDraw.html
index 69d185b..a0b2848 100644
--- a/svgDraw.html
+++ b/svgDraw.html
@@ -134,7 +134,7 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
                 as start value for your tweens when stroke-dasharray and stroke-dashoffset properties are not set.
             
  • Sometimes the stroke on some shapes may not completely close, you might want to consider values outside the [0-100] percent range.
    • 
             
  • The SVG Draw component can be combined with any other SVG based component to create even more complex animations for SVG elements.
    • 
-            
  • This component is bundled with the standard kute.js and kute-extra.js distribution files.
    • 
+            
  • This component is bundled with the default distribution kute.js and the demo/src/kute-extra.js file.
    • 
           
       
 
diff --git a/svgMorph.html b/svgMorph.html
index c7d0b3c..a07cc81 100644
--- a/svgMorph.html
+++ b/svgMorph.html
@@ -342,10 +342,10 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
       
      
         
    • Since SVG Morph animation works only with path elements, you might need a convertToPath feature, so 
           grab one here and get to working.
      • 
-        
    • In some cases your start and end shapes don't have a very close size, you might need to use SVGPath tools to apply a scale transformation to your shapes'
-          path commands.
      • 
-        
    • The morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multipaths instead of cloning shapes to have same number 
-          of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.
      • 
+        
    • In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or something like SVGPath tools to
+          apply a scale transformation to your shapes' path commands.
      • 
+        
    • The morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multi-paths instead of cloning shapes to have same number 
+          of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don.
      • 
         
    • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays 
           you can get quite comfortable with almost any value, including the default value.
      • 
         
    • Because you have the tools at hand, you can also try to use a morphPrecision value for every resolution. Take some time to experiement, you might find a better morphPrecision 
diff --git a/svgTransform.html b/svgTransform.html
index e676ae1..e898223 100644
--- a/svgTransform.html
+++ b/svgTransform.html
@@ -356,9 +356,9 @@ KUTE.fromTo(element,
             
    • While you can still use regular CSS3 transforms for SVG elements, everything is fine with Google Chrome, Opera and other webkit browsers, but older Firefox versions struggle with the percentage based 
                 transformOrigin values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements, which means that the SVG Transform component will become a fallback 
                 component to handle legacy browsers in the future. Guess who's taking over :)
      • 
-            
    • This component is bundled with the standard kute.js and kute-extra.js distribution files.
      • 
+            
    • This component is bundled with the standard kute.js distribution file and the demo/src/kute-extra.js file.
      • 
 
-          
    
+        
 
       
 
diff --git a/textProperties.html b/textProperties.html
index 426fc10..c123026 100644
--- a/textProperties.html
+++ b/textProperties.html
@@ -119,17 +119,17 @@ let tween3 = KUTE.to('selector1',{wordSpacing:50})
 
    
 
           
    
-              
    Howdy!
    
-              
    Start
    
+            
    Howdy!
    
+            
    Start
    
           
    
-          
-          
    Notes
    
-          
      
-              
    • Be sure to check the textProperties.js for a more in-depth review of the above example.
      • 
-              
    • Similar to box model properties, the text properties are also layout modifiers, they will push the layout around forcing unwanted re-paint work. To avoid re-paint, you
-                  can use a fixed height for the target element's container, as we used in our example here, or set your text to position:absolute.
      • 
-              
    • The component is only included in the kute-extra.js distribution file.
      • 
-          
    
+        
+        
    Notes
    
+        
      
+          
    • Be sure to check the textProperties.js for a more in-depth review of the above example.
      • 
+          
    • Similar to box model properties, the text properties are also layout modifiers, they will push the layout around forcing unwanted re-paint work. To avoid re-paint, you
+              can use a fixed height for the target element's container, as we used in our example here, or set your text to position:absolute.
      • 
+          
    • The component is only included in the demo/src/kute-extra.js file.
      • 
+        
    
 
       
 
diff --git a/textWrite.html b/textWrite.html
index 7f78d8f..479a115 100644
--- a/textWrite.html
+++ b/textWrite.html
@@ -231,6 +231,7 @@ tweenObjects.start();
       
      
         
    • Keep in mind that the yoyo tween option will NOT un-write / delete the string character by character for the text property, but will write the previous text instead.
      • 
         
    • For a full code review, check out the ./assets/js/textWrite.js example source code.
      • 
+        
    • The component is only included in the demo/src/kute-extra.js file.
      • 
       
    
 
     
diff --git a/transformFunctions.html b/transformFunctions.html
index 37b7e7c..038de76 100644
--- a/transformFunctions.html
+++ b/transformFunctions.html
@@ -264,7 +264,7 @@ var tween2 = KUTE.fromTo(
             
  • Shorthand functions like translate3d or rotate3d tween property generally not only improve performance, but will also minimize the code size. Eg. translateX:150,
                 translateY:200, translateZ:50 => translate3d:[150,200,50] is quite the difference.
    • 
             
  • On larger amount of elements animating chains, the .fromTo() method is fastest, and you will have more work to do as well, but will eliminate any delay / syncronization issue that may occur.
    •  
-            
  • This component is bundled with the kute-base.js and the standard kute.js distribution files.
    • 
+            
  • This component is bundled with the demo/src/kute-base.js and the standard kute.js distribution files.
    • 
           
 
       
diff --git a/transformMatrix.html b/transformMatrix.html
index 0f51f3d..07b864c 100644
--- a/transformMatrix.html
+++ b/transformMatrix.html
@@ -184,7 +184,7 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
                 rotate3d(vectorX,vectorY,vectorZ,angle) function is a thing of the past, according to Chris Coyier nobody use it.
             
  • Since the component fully utilize the DOMMatrix API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers 
                 like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.
    • 
-            
  • This component is bundled with the kute-extra.js distribution file.
    •   
+            
  • This component is bundled with the demo/src/kute-extra.js distribution file.
    •   
         
       
 

From 97c795a97252e8c9554d592b0f6ca21849bd8a13 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 15:30:34 +0000
Subject: [PATCH 152/187]

---
 assets/css/kute.css         |   5 ++
 assets/js/scripts.js        |  11 ----
 assets/js/scrollProperty.js |  10 ++++
 scrollProperty.html         |   9 ++-
 src/kute-base.js            | 109 +-----------------------------------
 src/kute-base.min.js        |   4 +-
 src/kute-extra.js           |   4 +-
 src/kute-extra.min.js       |   4 +-
 src/kute.min.js             |   4 +-
 9 files changed, 32 insertions(+), 128 deletions(-)

diff --git a/assets/css/kute.css b/assets/css/kute.css
index b6693e8..064ecd0 100644
--- a/assets/css/kute.css
+++ b/assets/css/kute.css
@@ -17,6 +17,11 @@ body {
 
 .condensed { font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal !important;}
 
+/* smooth scroll */
+html {
+	scroll-behavior: smooth;
+}
+
 /* WRAPPER STYLES
 -------------------------------------------------- */
 .content-wrap { max-width: 80%; position: relative;  margin: 0 auto;  clear: both; }
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index b154cb2..c2d13c3 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -3,17 +3,6 @@ function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-// scroll top?
-var toTop = document.getElementById('toTop'),
-    toTopTween = KUTE.to( window, { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500  } );
-
-function topHandler(e){
-	e.preventDefault(); 
-  toTopTween.start();
-}
-toTop.addEventListener('click',topHandler,false);
-
-
 // toggles utility
 var toggles = document.querySelectorAll('[data-function="toggle"]');
 
diff --git a/assets/js/scrollProperty.js b/assets/js/scrollProperty.js
index 3271250..73869a8 100644
--- a/assets/js/scrollProperty.js
+++ b/assets/js/scrollProperty.js
@@ -11,3 +11,13 @@ button.addEventListener('click', function(e){
 	!scrollTween.playing && scrollTween.start()
 },false);
 /*  SCROLL EXAMPLE  */
+
+// scroll top?
+var toTop = document.getElementById('toTop'),
+    toTopTween = KUTE.to( window, { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500  } );
+
+function topHandler(e){
+	e.preventDefault(); 
+  toTopTween.start();
+}
+toTop.addEventListener('click',topHandler,false);
diff --git a/scrollProperty.html b/scrollProperty.html
index 897fcd1..fced931 100644
--- a/scrollProperty.html
+++ b/scrollProperty.html
@@ -22,6 +22,10 @@
   
   
 
+  
+
 
 
 
@@ -149,7 +153,8 @@ KUTE.to('#myElement',{scroll: 0 }).start()
         
  • The scroll animation is not as smooth as with transform animations, it has no access at sub-pixel level, but you can play around
           with various easing functions and durations to find the best possible outcome.
    • 
         
  • All pages in this documentation have a <a>Back to top</a> button at the bottom, just in case you didn't notice.
    • 
-        
  • The component is an essential part in ALL KUTE.js distributions.
    • 
+        
  • The component is only bundled with the demo/src/kute-extra.js file. That is thanks to scroll-behavior, but you can 
+          use this component to enable scrolling for legacy browsers.
    • 
       
 
     
@@ -170,7 +175,7 @@ KUTE.to('#myElement',{scroll: 0 }).start()
   
 
   
-  
+  
   
 
   
diff --git a/src/kute-base.js b/src/kute-base.js
index e1f4c3f..0467c71 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.2 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.3 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.2";
+  var version = "2.0.3";
 
   var defaultOptions = {
     duration: 700,
@@ -474,114 +474,9 @@
     functions: {onStart: onStartOpacity}
   };
 
-  function on (element, event, handler, options) {
-    options = options || false;
-    element.addEventListener(event, handler, options);
-  }
-
-  function off (element, event, handler, options) {
-    options = options || false;
-    element.removeEventListener(event, handler, options);
-  }
-
-  function one (element, event, handler, options) {
-    on(element, event, function handlerWrapper(e){
-      if (e.target === element) {
-        handler(e);
-        off(element, event, handlerWrapper, options);
-      }
-    }, options);
-  }
-
-  var supportPassive = (function () {
-    var result = false;
-    try {
-      var opts = Object.defineProperty({}, 'passive', {
-        get: function() {
-          result = true;
-        }
-      });
-      one(document, 'DOMContentLoaded', function (){}, opts);
-    } catch (e) {}
-    return result;
-  })();
-
-  var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
-
-  var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
-
-  var touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel';
-  var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
-  var passiveHandler = supportPassive ? { passive: false } : false;
-  function preventScroll(e) {
-    this.scrolling && e.preventDefault();
-  }
-  function getScrollTargets(){
-    var el = this.element;
-    return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
-  }
-  function scrollIn(){
-    var targets = getScrollTargets.call(this);
-    if ( 'scroll' in this.valuesEnd && !targets.el.scrolling) {
-      targets.el.scrolling = 1;
-      on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
-      on( targets.el, touchOrWheel, preventScroll, passiveHandler);
-      targets.st.style.pointerEvents = 'none';
-    }
-  }
-  function scrollOut(){
-    var targets = getScrollTargets.call(this);
-    if ( 'scroll' in this.valuesEnd && targets.el.scrolling) {
-      targets.el.scrolling = 0;
-      off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
-      off( targets.el, touchOrWheel, preventScroll, passiveHandler);
-      targets.st.style.pointerEvents = '';
-    }
-  }
-  function onStartScroll(tweenProp){
-    if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
-      KUTE[tweenProp] = function (elem, a, b, v) {
-        elem.scrollTop = (numbers(a,b,v))>>0;
-      };
-    }
-  }
-  function onCompleteScroll(tweenProp){
-    scrollOut.call(this);
-  }
-  var baseScrollOps = {
-    component: 'scrollProperty',
-    property: 'scroll',
-    Interpolate: {numbers: numbers},
-    functions: {
-      onStart: onStartScroll,
-      onComplete: onCompleteScroll
-    },
-    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
-  };
-
-  function getPrefix() {
-    var thePrefix, prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
-    for (var i = 0, pfl = prefixes.length; i < pfl; i++) {
-      if (((prefixes[i]) + "Transform") in document.body.style) {
-        thePrefix = prefixes[i]; break;
-      }
-    }
-    return thePrefix;
-  }
-
-  function trueProperty(property) {
-    return !(property in document.body.style)
-            ? getPrefix() + (property.charAt(0).toUpperCase() + property.slice(1))
-            : property;
-  }
-
-  var transformProperty = trueProperty('transform');
-  var supportTransform = transformProperty in document.body.style ? 1 : 0;
-
   var BaseTransform = new AnimationBase(baseTransformOps);
   var BaseBoxModel = new AnimationBase(baseBoxModelOps);
   var BaseOpacity = new AnimationBase(baseOpacityOps);
-  var BaseScroll = new AnimationBase(baseScrollOps);
   var indexBase = {
     Animation: AnimationBase,
     Components: {
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index d3d3011..7919a8c 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Base v2.0.2 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={duration:700,delay:0,easing:"linear"},e={},n={},r={},o={},i={defaultOptions:t,linkProperty:e,onStart:n,onComplete:r,supportedProperties:o},s={};var a={linear:function(t){return t},easingQuadraticIn:function(t){return t*t},easingQuadraticOut:function(t){return t*(2-t)},easingQuadraticInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easingCubicIn:function(t){return t*t*t},easingCubicOut:function(t){return--t*t*t+1},easingCubicInOut:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easingCircularIn:function(t){return-(Math.sqrt(1-t*t)-1)},easingCircularOut:function(t){return Math.sqrt(1-(t-=1)*t)},easingCircularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},easingBackIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},easingBackOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},easingBackInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)}};s.processEasing=function(t){return"function"==typeof t?t:"string"==typeof t?a[t]:a.linear};var u=[];function l(t){return u.push(t)}function c(t){var e=u.indexOf(t);-1!==e&&u.splice(e,1)}var f={},p="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function d(t,e,n){return(t=+t)+(e-=t)*n}var v={numbers:d,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],o=0,i=e.length;o>0)/1e3;return r}},h={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?h.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(h.now=self.performance.now.bind(self.performance));var m=0,y=function(t){for(var e=0;e1?1:e,n=this._easing(e),this.valuesEnd)f[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},O.Tween=S;var I=O.Tween;function M(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function x(t,e,n,r){for(var o=[],i=0;i<3;i++)o[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function U(t,e,n,r){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function j(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+o.join(",")+")"}function A(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function B(t,e,n,r){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}function P(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var q={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!f[t]&&this.valuesEnd[t]&&(f[t]=function(e,n,r,o){e.style[t]=(n.perspective||r.perspective?M(n.perspective,r.perspective,"px",o):"")+(n.translate3d?x(n.translate3d,r.translate3d,"px",o):"")+(n.translate?j(n.translate,r.translate,"px",o):"")+(n.rotate3d?U(n.rotate3d,r.rotate3d,"deg",o):"")+(n.rotate||r.rotate?A(n.rotate,r.rotate,"deg",o):"")+(n.skew?B(n.skew,r.skew,"deg",o):"")+(n.scale||r.scale?P(n.scale,r.scale,o):"")})}},Interpolate:{perspective:M,translate3d:x,rotate3d:U,translate:j,rotate:A,scale:P,skew:B}};function F(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(o>.99||o<.01?(10*d(n,r,o)>>0)/10:d(n,r,o)>>0)+"px"})}var L=["top","left","width","height"],X={};L.map((function(t){return X[t]=F}));var Y={component:"boxModelProps",category:"boxModel",properties:L,Interpolate:{numbers:d},functions:{onStart:X}};var D={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(e,n,r,o){e.style[t]=(1e3*d(n,r,o)>>0)/1e3})}}};function K(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function Q(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}var Z=function(){var t,e,n,r,o=!1;try{var i=Object.defineProperty({},"passive",{get:function(){o=!0}});t=document,n=function(){},K(t,e="DOMContentLoaded",(function o(i){i.target===t&&(n(i),Q(t,e,o,r))}),r=i)}catch(t){}return o}(),z="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],H="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",G=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,N=!!Z&&{passive:!1};function R(t){this.scrolling&&t.preventDefault()}function V(){var t=this.element;return t===G?{el:document,st:document.body}:{el:t,st:t}}function W(){var t=V.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,Q(t.el,z[0],R,N),Q(t.el,H,R,N),t.st.style.pointerEvents="")}var J={component:"scrollProperty",property:"scroll",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!f[t]&&(f[t]=function(t,e,n,r){t.scrollTop=d(e,n,r)>>0})},onComplete:function(t){W.call(this)}},Util:{preventScroll:R,scrollIn:function(){var t=V.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,K(t.el,z[0],R,N),K(t.el,H,R,N),t.st.style.pointerEvents="none")},scrollOut:W,scrollContainer:G,passiveHandler:N,getScrollTargets:V}};($="transform")in document.body.style||(function(){for(var t,e=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=0,r=e.length;n>0)/1e3;return r}},v={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?v.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(v.now=self.performance.now.bind(self.performance));var m=0,y=function(t){for(var e=0;e1?1:e,n=this._easing(e),this.valuesEnd)l[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},I.Tween=b;var O=I.Tween;function x(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function B(t,e,n,r){for(var i=[],o=0;o<3;o++)i[o]=(t[o]||e[o]?(1e3*(t[o]+(e[o]-t[o])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function U(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function j(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function M(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function q(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}function A(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var F={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!l[t]&&this.valuesEnd[t]&&(l[t]=function(e,n,r,i){e.style[t]=(n.perspective||r.perspective?x(n.perspective,r.perspective,"px",i):"")+(n.translate3d?B(n.translate3d,r.translate3d,"px",i):"")+(n.translate?j(n.translate,r.translate,"px",i):"")+(n.rotate3d?U(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?M(n.rotate,r.rotate,"deg",i):"")+(n.skew?q(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?A(n.scale,r.scale,i):"")})}},Interpolate:{perspective:x,translate3d:B,rotate3d:U,translate:j,rotate:M,scale:A,skew:q}};function P(t){t in this.valuesEnd&&!l[t]&&(l[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*d(n,r,i)>>0)/10:d(n,r,i)>>0)+"px"})}var X=["top","left","width","height"],Y={};X.map((function(t){return Y[t]=P}));var K={component:"boxModelProps",category:"boxModel",properties:X,Interpolate:{numbers:d},functions:{onStart:Y}};var Q={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!l[t]&&(l[t]=function(e,n,r,i){e.style[t]=(1e3*d(n,r,i)>>0)/1e3})}}},Z=new C(F),L=new C(K),H=new C(Q);return{Animation:C,Components:{BaseTransform:Z,BaseBoxModel:L,BaseScroll:BaseScroll,BaseOpacity:H},TweenBase:b,fromTo:function(t,e,n,r){return r=r||{},new O(S(t),e,n,r)},Objects:o,Easing:s,Util:a,Render:_,Interpolate:h,Internals:E,Selector:S,Version:"2.0.3"}}));
diff --git a/src/kute-extra.js b/src/kute-extra.js
index 10f90e0..1952b7a 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Extra v2.0.2 (http://thednp.github.io/kute.js)
+* KUTE.js Extra v2.0.3 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.2";
+  var version = "2.0.3";
 
   var supportedProperties = {};
 
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index 8f8e8f3..0e7eb1f 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Extra v2.0.2 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},n={duration:700,delay:0,easing:"linear"},r={},i={},a={},s={},o={},l={},u={supportedProperties:t,defaultValues:e,defaultOptions:n,prepareProperty:r,prepareStart:i,crossCheck:a,onStart:s,onComplete:o,linkProperty:l},p={},c={};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,B=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0),(i=i||{}).delay=i.delay||n.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=i||{},s[o].delay=o>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new q(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};B.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},B.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},B.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},B.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},B.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof B)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},B.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},B.prototype.removeTweens=function(){this.tweens=[]},B.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};D.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},D.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},D.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},D.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},D.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},D.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var X=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};X.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:Q,Util:{trueDimension:Y}};c.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};c.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};c.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};c.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=gt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=ot(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Y(l).u||Y(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Y(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};c.FilterEffects=Tt;var Et={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et};c.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},jt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h},functions:Ft,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};c.SVGDraw=jt;function Vt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Rt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Ht(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Nt(t){if(!(t=Ht(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Dt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,B=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Qt(t,e){for(var n=Nt(t),r=e&&Nt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function $t(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Zt(t){var e=Kt(t),n=[];return e.map((function(t,r){n[r]=$t(e,r)})),n}function Jt(t,e){var n=Kt(t),r=Kt(e),i=n.length-1,a=[],s=[],o=Zt(t);return o.map((function(t,e){for(var o=0,l=Wt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:te(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Qt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Gt.call(this,r[0]):r[0],a=this._reverseSecondPath?Gt.call(this,r[1]):r[1];i=Jt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ne={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:te},functions:ee,Util:{l2c:qt,q2c:Bt,a2c:Dt,catmullRom2bezier:Vt,ellipsePath:Rt,path2curve:Qt,pathToAbsolute:Nt,toPathString:te,parsePathString:Ht,getRotatedCurve:Jt,getRotations:Zt,getRotationSegments:$t,reverseCurve:Gt,getSegments:Kt,createPath:Wt}};function re(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ie(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=ae.call(this,t,ie(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},oe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:se,Util:{parseStringOrigin:re,parseTransformString:ie,parseTransformSVG:ae}};function le(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ue(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=oe;var pe=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},le(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ue(t,e,i,r))}),r=a)}catch(t){}return i}(),ce="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],he="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",fe=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,de=!!pe&&{passive:!1};function ve(t){this.scrolling&&t.preventDefault()}function ge(){var t=this.element;return t===fe?{el:document,st:document.body}:{el:t,st:t}}function me(){var t=ge.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,le(t.el,ce[0],ve,de),le(t.el,he,ve,de),t.st.style.pointerEvents="none")}function ye(){var t=ge.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ue(t.el,ce[0],ve,de),ue(t.el,he,ve,de),t.st.style.pointerEvents="")}var be={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:fe,me.call(this),this.element===fe?window.pageYOffset||fe.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){ye.call(this)}},we={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:be,Util:{preventScroll:ve,scrollIn:me,scrollOut:ye,scrollContainer:fe,passiveHandler:de,getScrollTargets:ge}};c.ScrollProperty=we;var xe=["boxShadow","textShadow"];function Se(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Me(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Te={};xe.map((function(t){return Te[t]=Me}));var Ee={component:"shadowProperties",properties:xe,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Se(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Se(e,t));return e},onStart:Te},Util:{processShadowArray:Se,trueColor:ot}};c.ShadowProperties=Ee;var _e=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ce={};function ke(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}_e.forEach((function(t){Ce[t]=ke}));var Ie={component:"textProperties",category:"textProps",properties:_e,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Ce},Util:{trueDimension:Y}};function Pe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Oe(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),Fe=String("0123456789").split(""),je=Ae.concat(Le,Fe),Ve=je.concat(Ue),Re={alpha:Ae,upper:Le,symbols:Ue,numeric:Fe,alphanumeric:je,all:Ve};var He={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in Re?Re[e]:e&&e.length?e:Re[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},Ne={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:He},Util:{charSet:Re,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=Oe(t,"text-part"),r=Oe(Pe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=u,n.onComplete=null,u+=n.duration,new q(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=u,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=n.duration,new q(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};c.TextWriteProperties=Ne;var qe="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new qe,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=qe)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var De in c.TransformMatrix=Be,c){var Xe=c[De];c[De]=new z(Xe)}return{Animation:z,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new q(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t),e,e,n)},TweenCollection:B,ProgressBar:D,allFromTo:function(t,e,n,r){return r=r||{},new B(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new B(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.2"}}));
+// KUTE.js Extra v2.0.3 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},n={duration:700,delay:0,easing:"linear"},r={},i={},a={},s={},o={},l={},u={supportedProperties:t,defaultValues:e,defaultOptions:n,prepareProperty:r,prepareStart:i,crossCheck:a,onStart:s,onComplete:o,linkProperty:l},p={},c={};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,B=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0),(i=i||{}).delay=i.delay||n.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=i||{},s[o].delay=o>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new q(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};B.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},B.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},B.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},B.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},B.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof B)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},B.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},B.prototype.removeTweens=function(){this.tweens=[]},B.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};D.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},D.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},D.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},D.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},D.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},D.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var X=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};X.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:Q,Util:{trueDimension:Y}};c.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};c.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};c.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};c.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=gt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=ot(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Y(l).u||Y(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Y(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};c.FilterEffects=Tt;var Et={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et};c.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},jt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h},functions:Ft,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};c.SVGDraw=jt;function Vt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Rt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Ht(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Nt(t){if(!(t=Ht(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Dt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,B=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Qt(t,e){for(var n=Nt(t),r=e&&Nt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function $t(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Zt(t){var e=Kt(t),n=[];return e.map((function(t,r){n[r]=$t(e,r)})),n}function Jt(t,e){var n=Kt(t),r=Kt(e),i=n.length-1,a=[],s=[],o=Zt(t);return o.map((function(t,e){for(var o=0,l=Wt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:te(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Qt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Gt.call(this,r[0]):r[0],a=this._reverseSecondPath?Gt.call(this,r[1]):r[1];i=Jt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ne={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:te},functions:ee,Util:{l2c:qt,q2c:Bt,a2c:Dt,catmullRom2bezier:Vt,ellipsePath:Rt,path2curve:Qt,pathToAbsolute:Nt,toPathString:te,parsePathString:Ht,getRotatedCurve:Jt,getRotations:Zt,getRotationSegments:$t,reverseCurve:Gt,getSegments:Kt,createPath:Wt}};function re(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ie(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=ae.call(this,t,ie(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},oe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:se,Util:{parseStringOrigin:re,parseTransformString:ie,parseTransformSVG:ae}};function le(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ue(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=oe;var pe=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},le(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ue(t,e,i,r))}),r=a)}catch(t){}return i}(),ce="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],he="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",fe=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,de=!!pe&&{passive:!1};function ve(t){this.scrolling&&t.preventDefault()}function ge(){var t=this.element;return t===fe?{el:document,st:document.body}:{el:t,st:t}}function me(){var t=ge.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,le(t.el,ce[0],ve,de),le(t.el,he,ve,de),t.st.style.pointerEvents="none")}function ye(){var t=ge.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ue(t.el,ce[0],ve,de),ue(t.el,he,ve,de),t.st.style.pointerEvents="")}var be={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:fe,me.call(this),this.element===fe?window.pageYOffset||fe.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){ye.call(this)}},we={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:be,Util:{preventScroll:ve,scrollIn:me,scrollOut:ye,scrollContainer:fe,passiveHandler:de,getScrollTargets:ge}};c.ScrollProperty=we;var xe=["boxShadow","textShadow"];function Se(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Me(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Te={};xe.map((function(t){return Te[t]=Me}));var Ee={component:"shadowProperties",properties:xe,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Se(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Se(e,t));return e},onStart:Te},Util:{processShadowArray:Se,trueColor:ot}};c.ShadowProperties=Ee;var _e=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ce={};function ke(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}_e.forEach((function(t){Ce[t]=ke}));var Ie={component:"textProperties",category:"textProps",properties:_e,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Ce},Util:{trueDimension:Y}};function Pe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Oe(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),Fe=String("0123456789").split(""),je=Ae.concat(Le,Fe),Ve=je.concat(Ue),Re={alpha:Ae,upper:Le,symbols:Ue,numeric:Fe,alphanumeric:je,all:Ve};var He={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in Re?Re[e]:e&&e.length?e:Re[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},Ne={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:He},Util:{charSet:Re,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=Oe(t,"text-part"),r=Oe(Pe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=u,n.onComplete=null,u+=n.duration,new q(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=u,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=n.duration,new q(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};c.TextWriteProperties=Ne;var qe="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new qe,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=qe)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var De in c.TransformMatrix=Be,c){var Xe=c[De];c[De]=new z(Xe)}return{Animation:z,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new q(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t),e,e,n)},TweenCollection:B,ProgressBar:D,allFromTo:function(t,e,n,r){return r=r||{},new B(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new B(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.3"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index 89d8808..9503ae1 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.2 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},l={},u={},c={},p={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:l,onComplete:u,linkProperty:c};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],l=r[s];for(var u in o){var c={};for(var p in t)n[p]&&o[p]?i[p]=o[p].call(this,p,t[p]):!n[u]&&"transform"===u&&l.includes(p)?c[p]=t[p]:!n[u]&&l&&l.includes(p)&&(i[p]=o[u].call(this,p,t[p]));Object.keys&&Object.keys(c).length&&(i[u]=o[u].call(this,u,c))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var l in o)(l===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[l].call(this,i,this.valuesStart[i]))}for(var u in e)u in this.valuesStart||(t[u]=e[u]||n[u]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function w(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var b={},T="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function S(t,e,r){return(t=+t)+(e-=t)*r}var x={numbers:S,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return l[u]||(l[u]=function(t){!b[t]&&t===this._easing.name&&(b[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||b.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),l)if("function"==typeof l[e])l[e].call(this,e);else for(var r in l[e])l[e][r].call(this,r);k.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(w(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in u)for(var e in u[t])u[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var l in o[s])o[s][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||i.repeat,this._repeatDelay=u.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=b.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(w(this),this.paused=!0,this._pauseTime=b.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:b.Time())1?1:e,r=this._easing(e),this.valuesEnd)b[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=U.Tween,V=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0),(n=n||{}).delay=n.delay||i.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=n||{},s[o].delay=o>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new N(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(t){return t=void 0===t?b.Time():t,this.tweens.map((function(e){return e.start(t)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var X=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*S(r,n,i)>>0)/10:S(r,n,i)>>0)+"px"})}z.map((function(t){return B[t]=0}));var Y={};z.map((function(t){return Y[t]=R}));var Q={component:"boxModelProps",category:"boxModel",properties:z,defaultValues:B,Interpolate:{numbers:S},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=D(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:Y}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?S(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*S(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=Q;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};function G(t){this.valuesEnd[t]&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){W[t]="#000"}));var $={};q.map((function(t){return $[t]=G}));var J={component:"colorProps",category:"colors",properties:q,defaultValues:W,Interpolate:{numbers:S,colors:Z},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};e.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=rt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=K(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[i]).u,c=/%/.test(u)?"_percent":"_"+u;l.htmlAttributes[a+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){var a=e.replace(c,"");t.setAttribute(a,(1e3*S(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+c]=D(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(l.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*S(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){for(var i in r)b.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!b[t]&&this.valuesEnd.attr&&(b[t]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:S,colors:Z},functions:nt,Util:{replaceUppercase:rt,trueColor:K,trueDimension:D}};e.HTMLAttributes=it;var at={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(e,r,n,i){e.style[t]=(1e3*S(r,n,i)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:S},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function lt(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,c=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=ut.concat(ct,ht),dt=ft.concat(pt),vt={alpha:ut,upper:ct,symbols:pt,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(t){if(!b[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in vt?vt[e]:e&&e.length?e:vt[i.textChars];b[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.innerHTML=S(e,r,n)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:S},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var n=function(t,e){var r=lt(t,"text-part"),n=lt(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),i=n[0],a=n[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=u,r.onComplete=null,u+=r.duration,new N(t,{text:t.innerHTML},{text:""},r)})))).concat(o.map((function(n,i){return r.duration="auto"===r.duration?75*a[i].innerHTML.length:r.duration,r.delay=u,r.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=r.duration,new N(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function wt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function bt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function Tt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function St(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function _t(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var l in e)if(o.includes(l)){var u="object"==typeof e[l]?e[l].map((function(t){return parseInt(t)})):[parseInt(e[l]),0];s[l]="skew"===l||"translate"===l?[u[0]||0,u[1]||0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(l)){for(var c=l.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[l]="scale"===l?parseFloat(e[l]):parseInt(e[l]);return s},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?wt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?Tt(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?St(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?_t(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:wt,rotate3d:bt,translate:Tt,rotate:St,scale:_t,skew:xt}};function Ct(t,e,r,n){n=n||!1,t.addEventListener(e,r,n)}function At(t,e,r,n){n=n||!1,t.removeEventListener(e,r,n)}e.TransformFunctions=Et;var It=function(){var t,e,r,n,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,r=function(){},Ct(t,e="DOMContentLoaded",(function i(a){a.target===t&&(r(a),At(t,e,i,n))}),n=a)}catch(t){}return i}(),Mt="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],kt="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Ot=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Pt=!!It&&{passive:!1};function Lt(t){this.scrolling&&t.preventDefault()}function jt(){var t=this.element;return t===Ot?{el:document,st:document.body}:{el:t,st:t}}function Ut(){var t=jt.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,Ct(t.el,Mt[0],Lt,Pt),Ct(t.el,kt,Lt,Pt),t.st.style.pointerEvents="none")}function Ft(){var t=jt.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,At(t.el,Mt[0],Lt,Pt),At(t.el,kt,Lt,Pt),t.st.style.pointerEvents="")}var Ht={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Ot,Ut.call(this),this.element===Ot?window.pageYOffset||Ot.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!b[t]&&(b[t]=function(t,e,r,n){t.scrollTop=S(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:S},functions:Ht,Util:{preventScroll:Lt,scrollIn:Ut,scrollOut:Ft,scrollContainer:Ot,passiveHandler:Pt,getScrollTargets:jt}};e.ScrollProperty=Nt;var Vt=function(t,e){return parseFloat(t)/100*e},Xt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Dt=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*S(e.s,r.s,n)>>0)/100,s=(100*S(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Zt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S},functions:Kt,Util:{getRectLength:Xt,getPolyLength:Dt,getLineLength:zt,getCircleLength:Bt,getEllipseLength:Rt,getTotalLength:Yt,getDraw:Qt,percent:Vt}};function qt(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=Zt;var Wt="Invalid path value";function Gt(t){return"number"==typeof t&&isFinite(t)}function $t(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Jt(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function te(t,e){return $t(t,e)<1e-9}var ee={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},re=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function ne(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&re.indexOf(t)>=0}function ie(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function ae(t){return 97==(32|t)}function se(t){return t>=48&&t<=57}function oe(t){return t>=48&&t<=57||43===t||45===t||46===t}function le(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function ue(t){for(;t.index=i)t.err="KUTE.js - "+Wt;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=ee[r]&&(t.result.push([e].concat(n.splice(0,ee[r]))),ee[r]););}function fe(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=ae(e=t.path.charCodeAt(t.index)),ie(e))if(i=ee[t.path[t.index].toLowerCase()],t.index++,ue(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?pe(t):ce(t),t.err.length)return;t.data.push(t.param),ue(t),n=!1,t.index=t.max)break;if(!oe(t.path.charCodeAt(t.index)))break}}he(t)}else he(t);else t.err="KUTE.js - "+Wt}function de(t){var e=new le(t),r=e.max;for(ue(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Jt(n,i,.5),t.splice(r+1,0,i)}function Ce(t,e){var r,n;if("string"==typeof t){var i=me(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Wt);if(!Ae(r=t.slice(0)))throw new TypeError(Wt);return r.length>1&&te(r[0],r[r.length-1])&&r.pop(),xe(r)>0&&r.reverse(),!n&&e&&Gt(e)&&e>0&&Ee(r,e),r}function Ae(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Gt(t[0])&&Gt(t[1])}))}function Ie(t,e,r){var n=Ce(t,r=r||i.morphPrecision),a=Ce(e,r),s=n.length-a.length;return _e(n,s<0?-1*s:0),_e(a,s>0?s:0),Te(n,a),[n,a]}ve.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,l=0;return r.map((function(e,r){var u=t(e,r,a,s);Array.isArray(u)&&(n[r]=u,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(l=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=l);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},ve.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var Me={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!b[t]&&this.valuesEnd[t]&&(b[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+qt(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=Ie(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},ke={component:"svgMorph",property:"path",defaultValue:[],Interpolate:qt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:Me,Util:{INVALID_INPUT:Wt,isFiniteNumber:Gt,distance:$t,pointAlong:Jt,samePoint:te,paramCounts:ee,SPECIAL_SPACES:re,isSpace:ne,isCommand:ie,isArc:ae,isDigit:se,isDigitStart:oe,State:le,skipSpaces:ue,scanFlag:ce,scanParam:pe,finalizeSegment:he,scanSegment:fe,pathParse:de,SvgPath:ve,split:ge,pathStringToRing:me,exactRing:ye,approximateRing:we,measure:be,rotateRing:Te,polygonLength:Se,polygonArea:xe,addPoints:_e,bisect:Ee,normalizeRing:Ce,validRing:Ae,getInterpolationPoints:Ie}};function Oe(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function Pe(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=Le.call(this,t,Pe(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},Ue={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:je,Util:{parseStringOrigin:Oe,parseTransformString:Pe,parseTransformSVG:Le}};for(var Fe in e.SVGTransformProperty=Ue,e){var He=e[Fe];e[Fe]=new X(He)}return{Animation:X,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new N(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:p,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:x,Process:g,Internals:O,Selector:j,Version:"2.0.2"}}));
+// KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},u={},l={},p={},c={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:u,onComplete:l,linkProperty:p};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],u=r[s];for(var l in o){var p={};for(var c in t)n[c]&&o[c]?i[c]=o[c].call(this,c,t[c]):!n[l]&&"transform"===l&&u.includes(c)?p[c]=t[c]:!n[l]&&u&&u.includes(c)&&(i[c]=o[l].call(this,c,t[c]));Object.keys&&Object.keys(p).length&&(i[l]=o[l].call(this,l,p))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var u in o)(u===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[u].call(this,i,this.valuesStart[i]))}for(var l in e)l in this.valuesStart||(t[l]=e[l]||n[l]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function b(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var w={},x="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function T(t,e,r){return(t=+t)+(e-=t)*r}var S={numbers:T,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return u[l]||(u[l]=function(t){!w[t]&&t===this._easing.name&&(w[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||w.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),u)if("function"==typeof u[e])u[e].call(this,e);else for(var r in u[e])u[e][r].call(this,r);M.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(b(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in l)for(var e in l[t])l[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:w.Time())1?1:e,r=this._easing(e),this.valuesEnd)w[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var u in o[s])o[s][u].call(this,u);this.paused=!1,this._pauseTime=null;var l=e[3];return this._repeat=l.repeat||i.repeat,this._repeatDelay=l.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=l.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=w.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(b(this),this.paused=!0,this._pauseTime=w.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:w.Time())1?1:e,r=this._easing(e),this.valuesEnd)w[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=U.Tween,V=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0),(n=n||{}).delay=n.delay||i.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=n||{},s[o].delay=o>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new N(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(t){return t=void 0===t?w.Time():t,this.tweens.map((function(e){return e.start(t)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var X=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function z(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*T(r,n,i)>>0)/10:T(r,n,i)>>0)+"px"})}B.map((function(t){return R[t]=0}));var D={};B.map((function(t){return D[t]=Y}));var Q={component:"boxModelProps",category:"boxModel",properties:B,defaultValues:R,Interpolate:{numbers:T},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=z(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:D}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?T(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*T(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=Q;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};function G(t){this.valuesEnd[t]&&!w[t]&&(w[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){W[t]="#000"}));var $={};q.map((function(t){return $[t]=G}));var J={component:"colorProps",category:"colors",properties:q,defaultValues:W,Interpolate:{numbers:T,colors:Z},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};e.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=rt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))u.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=K(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var l=z(o).u||z(e[i]).u,p=/%/.test(l)?"_percent":"_"+l;u.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*T(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+p]=z(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(u.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*T(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!w[t]&&this.valuesEnd[t]&&(w[t]=function(t,e,r,n){for(var i in r)w.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!w[t]&&this.valuesEnd.attr&&(w[t]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:T,colors:Z},functions:nt,Util:{replaceUppercase:rt,trueColor:K,trueDimension:z}};e.HTMLAttributes=it;var at={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!w[t]&&(w[t]=function(e,r,n,i){e.style[t]=(1e3*T(r,n,i)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:T},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function ut(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=lt.concat(pt,ht),dt=ft.concat(ct),vt={alpha:lt,upper:pt,symbols:ct,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(t){if(!w[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in vt?vt[e]:e&&e.length?e:vt[i.textChars];w[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!w[t]&&(w[t]=function(t,e,r,n){t.innerHTML=T(e,r,n)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:T},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var n=function(t,e){var r=ut(t,"text-part"),n=ut(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),i=n[0],a=n[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),u=[],l=0;return(u=(u=u.concat(s.map((function(t,e){return r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=l,r.onComplete=null,l+=r.duration,new N(t,{text:t.innerHTML},{text:""},r)})))).concat(o.map((function(n,i){return r.duration="auto"===r.duration?75*a[i].innerHTML.length:r.duration,r.delay=l,r.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,l+=r.duration,new N(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function bt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function wt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function Tt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function St(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function _t(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="translate"===p?n:"rotate"===p?i:"skew"===p?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+p+d in e?parseInt(e[""+p+d]):0}s[c]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(t){!w[t]&&this.valuesEnd[t]&&(w[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?bt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?xt(r.translate,n.translate,"px",i):"")+(r.rotate3d?wt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?Tt(r.rotate,n.rotate,"deg",i):"")+(r.skew?St(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?_t(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:bt,rotate3d:wt,translate:xt,rotate:Tt,scale:_t,skew:St}};e.TransformFunctions=Et;var Ct=function(t,e){return parseFloat(t)/100*e},At=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*T(e.s,r.s,n)>>0)/100,s=(100*T(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:T},functions:jt,Util:{getRectLength:At,getPolyLength:It,getLineLength:kt,getCircleLength:Mt,getEllipseLength:Ot,getTotalLength:Pt,getDraw:Lt,percent:Ct}};function Ft(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=Ut;var Ht="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Vt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Xt(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function zt(t,e){return Vt(t,e)<1e-9}var Bt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Rt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Yt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Rt.indexOf(t)>=0}function Dt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Qt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function Zt(t){return t>=48&&t<=57||43===t||45===t||46===t}function qt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Wt(t){for(;t.index=i)t.err="KUTE.js - "+Ht;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=Bt[r]&&(t.result.push([e].concat(n.splice(0,Bt[r]))),Bt[r]););}function te(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=Qt(e=t.path.charCodeAt(t.index)),Dt(e))if(i=Bt[t.path[t.index].toLowerCase()],t.index++,Wt(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?$t(t):Gt(t),t.err.length)return;t.data.push(t.param),Wt(t),n=!1,t.index=t.max)break;if(!Zt(t.path.charCodeAt(t.index)))break}}Jt(t)}else Jt(t);else t.err="KUTE.js - "+Ht}function ee(t){var e=new qt(t),r=e.max;for(Wt(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Xt(n,i,.5),t.splice(r+1,0,i)}function fe(t,e){var r,n;if("string"==typeof t){var i=ie(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ht);if(!de(r=t.slice(0)))throw new TypeError(Ht);return r.length>1&&zt(r[0],r[r.length-1])&&r.pop(),pe(r)>0&&r.reverse(),!n&&e&&Nt(e)&&e>0&&he(r,e),r}function de(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Nt(t[0])&&Nt(t[1])}))}function ve(t,e,r){var n=fe(t,r=r||i.morphPrecision),a=fe(e,r),s=n.length-a.length;return ce(n,s<0?-1*s:0),ce(a,s>0?s:0),ue(n,a),[n,a]}re.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,u=0;return r.map((function(e,r){var l=t(e,r,a,s);Array.isArray(l)&&(n[r]=l,i=!0);var p=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(p?a:0),s=e[2]+(p?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(p?a:0));case"v":case"V":return void(s=e[1]+(p?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(p?a:0),s=e[e.length-1]+(p?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},re.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ge={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!w[t]&&this.valuesEnd[t]&&(w[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Ft(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=ve(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},me={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ft,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ge,Util:{INVALID_INPUT:Ht,isFiniteNumber:Nt,distance:Vt,pointAlong:Xt,samePoint:zt,paramCounts:Bt,SPECIAL_SPACES:Rt,isSpace:Yt,isCommand:Dt,isArc:Qt,isDigit:Kt,isDigitStart:Zt,State:qt,skipSpaces:Wt,scanFlag:Gt,scanParam:$t,finalizeSegment:Jt,scanSegment:te,pathParse:ee,SvgPath:re,split:ne,pathStringToRing:ie,exactRing:ae,approximateRing:se,measure:oe,rotateRing:ue,polygonLength:le,polygonArea:pe,addPoints:ce,bisect:he,normalizeRing:fe,validRing:de,getInterpolationPoints:ve}};function ye(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function be(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(l?"rotate("+(1e3*l>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=we.call(this,t,be(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},Te={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:T},functions:xe,Util:{parseStringOrigin:ye,parseTransformString:be,parseTransformSVG:we}};for(var Se in e.SVGTransformProperty=Te,e){var _e=e[Se];e[Se]=new X(_e)}return{Animation:X,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new N(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:c,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:S,Process:g,Internals:O,Selector:j,Version:"2.0.3"}}));

From 7c12028d46f0de0e4c75601d68bfe1ab765a2f1d Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 15:41:39 +0000
Subject: [PATCH 153/187]

---
 assets/css/prism.css | 227 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 225 insertions(+), 2 deletions(-)

diff --git a/assets/css/prism.css b/assets/css/prism.css
index c7ced87..b6092ab 100644
--- a/assets/css/prism.css
+++ b/assets/css/prism.css
@@ -1,3 +1,226 @@
- /* prism okaidia | ocodia */
+/* PrismJS 1.20.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+scss&plugins=line-highlight+line-numbers */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	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;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #051725;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+
+pre[data-line] {
+	position: relative;
+	padding: 1em 0 1em 3em;
+}
+
+.line-highlight {
+	position: absolute;
+	left: 0;
+	right: 0;
+	padding: inherit 0;
+	margin-top: 1em; /* Same as .prism’s padding-top */
+
+	background: hsla(24, 20%, 50%,.08);
+	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+
+	pointer-events: none;
+
+	line-height: inherit;
+	white-space: pre;
+}
+
+	.line-highlight:before,
+	.line-highlight[data-end]:after {
+		content: attr(data-start);
+		position: absolute;
+		top: .4em;
+		left: .6em;
+		min-width: 1em;
+		padding: 0 .5em;
+		background-color: hsla(24, 20%, 50%,.4);
+		color: hsl(24, 20%, 95%);
+		font: bold 65%/1.5 sans-serif;
+		text-align: center;
+		vertical-align: .3em;
+		border-radius: 999px;
+		text-shadow: none;
+		box-shadow: 0 1px white;
+	}
+
+	.line-highlight[data-end]:after {
+		content: attr(data-end);
+		top: auto;
+		bottom: .4em;
+	}
+
+.line-numbers .line-highlight:before,
+.line-numbers .line-highlight:after {
+	content: none;
+}
+
+pre[id].linkable-line-numbers span.line-numbers-rows {
+	pointer-events: all;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
+	cursor: pointer;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
+	background-color: rgba(128, 128, 128, .2);
+}
+
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
 
-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}
\ No newline at end of file

From 8c52e9f9e799bb4ab2d38b046f6535ab364ada5c Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 12 Jun 2020 06:12:19 +0000
Subject: [PATCH 154/187] Demo fixes

---
 filterEffects.html    |   4 +-
 scrollProperty.html   |  41 ++++++-
 src/kute-base.js      | 160 +++++++++++++-------------
 src/kute-base.min.js  |   2 +-
 src/kute-extra.js     | 254 +++++++++++++++++++++---------------------
 src/kute-extra.min.js |   2 +-
 src/kute.min.js       |   2 +-
 svgTransform.html     |  36 +++---
 8 files changed, 266 insertions(+), 235 deletions(-)

diff --git a/filterEffects.html b/filterEffects.html
index 873baf6..23bb722 100644
--- a/filterEffects.html
+++ b/filterEffects.html
@@ -121,14 +121,14 @@
           
    Examples
    
           
    Let's have a look at some sample tween objects and a quick example:
    
 
-            
    let fe1 = KUTE.to('selector1', {filter :{ blur: 5 }})
+
    let fe1 = KUTE.to('selector1', {filter :{ blur: 5 }})
 let fe2 = KUTE.to('selector2', {filter :{ sepia: 50, invert: 80 }})
 let fe3 = KUTE.to('selector3', {filter :{ saturate: 150, brightness: 90 }})
 let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, dropShadow:[5,5,5,'olive'] }})
 
    
 
           
    
-              
+              
                 
                   
                     
diff --git a/scrollProperty.html b/scrollProperty.html
index fced931..2ab83c3 100644
--- a/scrollProperty.html
+++ b/scrollProperty.html
@@ -120,7 +120,7 @@ KUTE.to('#myElement',{scroll: 0 }).start()
 
       
    
         
    
-          
    Sample Heading Ipsulexum
    
+          
    KUTE.js works here
    
           
    Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy 
             foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive 
             innovation via workplace diversity and empowerment.
    
@@ -142,8 +142,38 @@ KUTE.to('#myElement',{scroll: 0 }).start()
           
    Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed 
             base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
    
         
    
-        
    Start
    
+        
    Toggle
    
       
    
+
+      
    
+        
    
+          
    Scroll Behavior Works here
    
+          
    Click to scroll to bottom, 
+            leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy 
+            foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive 
+            innovation via workplace diversity and empowerment.
    
+
+          
    Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal 
+            that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in 
+            real-time will have multiple touchpoints for offshoring.
    
+          
+          
    Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with 
+            additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing 
+            solely on the bottom line.
    
+
+          
    Second Sample Heading
    
+          
+          
    Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators 
+            offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive 
+            convergence on cross-platform integration.
    
+          
+          
    Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed 
+            base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
    
+        
    
+        
    Top
    
+      
    
+      
    The above shows a comparison of the Scroll Property component with the scroll-behavior: smooth CSS; while this browser 
+        feature shows excellent performance it lacks the flexibility and support for legacy browsers.
    
       
       
    Notes
    
       
      
@@ -152,9 +182,10 @@ KUTE.to('#myElement',{scroll: 0 }).start()
           scrollProperty.js sample code.
         
    • The scroll animation is not as smooth as with transform animations, it has no access at sub-pixel level, but you can play around
           with various easing functions and durations to find the best possible outcome.
      • 
-        
    • All pages in this documentation have a <a>Back to top</a> button at the bottom, just in case you didn't notice.
      • 
-        
    • The component is only bundled with the demo/src/kute-extra.js file. That is thanks to scroll-behavior, but you can 
-          use this component to enable scrolling for legacy browsers.
      • 
+        
    • All pages in this documentation have a <a>Back to top</a> button at the bottom, just in case you didn't notice, but 
+          only on this page scrollProperty component is used.
      • 
+        
    • The component is only bundled with the demo/src/kute-extra.js file and not in the official build. That is thanks to 
+          scroll-behavior, but you can include this component in your custom builds to enable scrolling for legacy browsers.
      • 
       
    
 
     
    
diff --git a/src/kute-base.js b/src/kute-base.js
index 0467c71..484b17e 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -11,6 +11,86 @@
 
   var version = "2.0.3";
 
+  var KUTE = {};
+
+  var Tweens = [];
+
+  var globalObject = typeof (global) !== 'undefined' ? global
+                    : typeof(self) !== 'undefined' ? self
+                    : typeof(window) !== 'undefined' ? window : {};
+
+  function numbers(a, b, v) {
+    a = +a; b -= a; return a + b * v;
+  }
+  function units(a, b, u, v) {
+    a = +a; b -= a; return ( a + b * v ) + u;
+  }
+  function arrays(a,b,v){
+    var result = [];
+    for ( var i=0, l=b.length; i> 0 ) / 1000;
+    }
+    return result
+  }
+  var Interpolate = {
+    numbers: numbers,
+    units: units,
+    arrays: arrays
+  };
+
+  var onStart = {};
+
+  var Time = {};
+  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
+  	Time.now = function () {
+  		var time = process.hrtime();
+  		return time[0] * 1000 + time[1] / 1000000;
+  	};
+  } else if (typeof (self) !== 'undefined' &&
+           self.performance !== undefined &&
+  		 self.performance.now !== undefined) {
+  	Time.now = self.performance.now.bind(self.performance);
+  }
+  var Tick = 0;
+  var Ticker = function (time) {
+    var i = 0;
+    while ( i < Tweens.length ) {
+      if ( Tweens[i].update(time) ) {
+        i++;
+      } else {
+        Tweens.splice(i, 1);
+      }
+    }
+    Tick = requestAnimationFrame(Ticker);
+  };
+  function stop() {
+    setTimeout(function () {
+      if (!Tweens.length && Tick) {
+        cancelAnimationFrame(Tick);
+        Tick = null;
+        for (var obj in onStart) {
+          if (typeof (onStart[obj]) === 'function') {
+            KUTE[obj] && (delete KUTE[obj]);
+          } else {
+            for (var prop in onStart[obj]) {
+              KUTE[prop] && (delete KUTE[prop]);
+            }
+          }
+        }
+        for (var i in Interpolate) {
+          KUTE[i] && (delete KUTE[i]);
+        }
+      }
+    },64);
+  }
+  var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
+  for ( var blob in Render ) {
+    if (!KUTE[blob]) {
+      KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
+    }
+  }
+  globalObject["_KUTE"] = KUTE;
+
   var defaultOptions = {
     duration: 700,
     delay: 0,
@@ -19,8 +99,6 @@
 
   var linkProperty = {};
 
-  var onStart = {};
-
   var onComplete = {};
 
   var supportedProperties = {};
@@ -74,8 +152,6 @@
   }
   Util.processEasing = processEasing;
 
-  var Tweens = [];
-
   function add (tw) { return Tweens.push(tw); }
 
   function remove (tw) {
@@ -87,82 +163,6 @@
 
   function removeAll () { Tweens.length = 0; }
 
-  var KUTE = {};
-
-  var globalObject = typeof (global) !== 'undefined' ? global
-                    : typeof(self) !== 'undefined' ? self
-                    : typeof(window) !== 'undefined' ? window : {};
-
-  function numbers(a, b, v) {
-    a = +a; b -= a; return a + b * v;
-  }
-  function units(a, b, u, v) {
-    a = +a; b -= a; return ( a + b * v ) + u;
-  }
-  function arrays(a,b,v){
-    var result = [];
-    for ( var i=0, l=b.length; i> 0 ) / 1000;
-    }
-    return result
-  }
-  var Interpolate = {
-    numbers: numbers,
-    units: units,
-    arrays: arrays
-  };
-
-  var Time = {};
-  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
-  	Time.now = function () {
-  		var time = process.hrtime();
-  		return time[0] * 1000 + time[1] / 1000000;
-  	};
-  } else if (typeof (self) !== 'undefined' &&
-           self.performance !== undefined &&
-  		 self.performance.now !== undefined) {
-  	Time.now = self.performance.now.bind(self.performance);
-  }
-  var Tick = 0;
-  var Ticker = function (time) {
-    var i = 0;
-    while ( i < Tweens.length ) {
-      if ( Tweens[i].update(time) ) {
-        i++;
-      } else {
-        Tweens.splice(i, 1);
-      }
-    }
-    Tick = requestAnimationFrame(Ticker);
-  };
-  function stop() {
-    setTimeout(function () {
-      if (!Tweens.length && Tick) {
-        cancelAnimationFrame(Tick);
-        Tick = null;
-        for (var obj in onStart) {
-          if (typeof (onStart[obj]) === 'function') {
-            KUTE[obj] && (delete KUTE[obj]);
-          } else {
-            for (var prop in onStart[obj]) {
-              KUTE[prop] && (delete KUTE[prop]);
-            }
-          }
-        }
-        for (var i in Interpolate) {
-          KUTE[i] && (delete KUTE[i]);
-        }
-      }
-    },64);
-  }
-  var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
-  for ( var blob in Render ) {
-    if (!KUTE[blob]) {
-      KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
-    }
-  }
-  globalObject["_KUTE"] = KUTE;
-
   function linkInterpolation() {
     var this$1 = this;
     var loop = function ( component ) {
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index 7919a8c..8bd9b41 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Base v2.0.3 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={duration:700,delay:0,easing:"linear"},e={},n={},r={},i={},o={defaultOptions:t,linkProperty:e,onStart:n,onComplete:r,supportedProperties:i},a={};var s={linear:function(t){return t},easingQuadraticIn:function(t){return t*t},easingQuadraticOut:function(t){return t*(2-t)},easingQuadraticInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easingCubicIn:function(t){return t*t*t},easingCubicOut:function(t){return--t*t*t+1},easingCubicInOut:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easingCircularIn:function(t){return-(Math.sqrt(1-t*t)-1)},easingCircularOut:function(t){return Math.sqrt(1-(t-=1)*t)},easingCircularInOut:function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},easingBackIn:function(t){var e=1.70158;return t*t*((e+1)*t-e)},easingBackOut:function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},easingBackInOut:function(t){var e=2.5949095;return(t*=2)<1?t*t*((e+1)*t-e)*.5:.5*((t-=2)*t*((e+1)*t+e)+2)}};a.processEasing=function(t){return"function"==typeof t?t:"string"==typeof t?s[t]:s.linear};var u=[];function f(t){return u.push(t)}function c(t){var e=u.indexOf(t);-1!==e&&u.splice(e,1)}var l={},p="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function d(t,e,n){return(t=+t)+(e-=t)*n}var h={numbers:d,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],i=0,o=e.length;i>0)/1e3;return r}},v={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?v.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(v.now=self.performance.now.bind(self.performance));var m=0,y=function(t){for(var e=0;e1?1:e,n=this._easing(e),this.valuesEnd)l[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},I.Tween=b;var O=I.Tween;function x(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function B(t,e,n,r){for(var i=[],o=0;o<3;o++)i[o]=(t[o]||e[o]?(1e3*(t[o]+(e[o]-t[o])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function U(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function j(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function M(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function q(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}function A(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var F={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(t){!l[t]&&this.valuesEnd[t]&&(l[t]=function(e,n,r,i){e.style[t]=(n.perspective||r.perspective?x(n.perspective,r.perspective,"px",i):"")+(n.translate3d?B(n.translate3d,r.translate3d,"px",i):"")+(n.translate?j(n.translate,r.translate,"px",i):"")+(n.rotate3d?U(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?M(n.rotate,r.rotate,"deg",i):"")+(n.skew?q(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?A(n.scale,r.scale,i):"")})}},Interpolate:{perspective:x,translate3d:B,rotate3d:U,translate:j,rotate:M,scale:A,skew:q}};function P(t){t in this.valuesEnd&&!l[t]&&(l[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*d(n,r,i)>>0)/10:d(n,r,i)>>0)+"px"})}var X=["top","left","width","height"],Y={};X.map((function(t){return Y[t]=P}));var K={component:"boxModelProps",category:"boxModel",properties:X,Interpolate:{numbers:d},functions:{onStart:Y}};var Q={component:"opacityProperty",property:"opacity",Interpolate:{numbers:d},functions:{onStart:function(t){t in this.valuesEnd&&!l[t]&&(l[t]=function(e,n,r,i){e.style[t]=(1e3*d(n,r,i)>>0)/1e3})}}},Z=new C(F),L=new C(K),H=new C(Q);return{Animation:C,Components:{BaseTransform:Z,BaseBoxModel:L,BaseScroll:BaseScroll,BaseOpacity:H},TweenBase:b,fromTo:function(t,e,n,r){return r=r||{},new O(S(t),e,n,r)},Objects:o,Easing:s,Util:a,Render:_,Interpolate:h,Internals:E,Selector:S,Version:"2.0.3"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}var i={numbers:r,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],i=0,o=e.length;i>0)/1e3;return r}},o={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,u=function(t){for(var n=0;n1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},I.Tween=b;var O=I.Tween;function x(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function B(t,e,n,r){for(var i=[],o=0;o<3;o++)i[o]=(t[o]||e[o]?(1e3*(t[o]+(e[o]-t[o])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function U(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function j(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function M(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function q(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}function A(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var F={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?x(n.perspective,r.perspective,"px",i):"")+(n.translate3d?B(n.translate3d,r.translate3d,"px",i):"")+(n.translate?j(n.translate,r.translate,"px",i):"")+(n.rotate3d?U(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?M(n.rotate,r.rotate,"deg",i):"")+(n.skew?q(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?A(n.scale,r.scale,i):"")})}},Interpolate:{perspective:x,translate3d:B,rotate3d:U,translate:j,rotate:M,scale:A,skew:q}};function P(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(o>.99||o<.01?(10*r(n,i,o)>>0)/10:r(n,i,o)>>0)+"px"})}var X=["top","left","width","height"],Y={};X.map((function(t){return Y[t]=P}));var K={component:"boxModelProps",category:"boxModel",properties:X,Interpolate:{numbers:r},functions:{onStart:Y}};var Q={component:"opacityProperty",property:"opacity",Interpolate:{numbers:r},functions:{onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(1e3*r(n,i,o)>>0)/1e3})}}},Z=new C(F),L=new C(K),H=new C(Q);return{Animation:C,Components:{BaseTransform:Z,BaseBoxModel:L,BaseScroll:BaseScroll,BaseOpacity:H},TweenBase:b,fromTo:function(t,e,n,r){return r=r||{},new O(S(t),e,n,r)},Objects:m,Easing:g,Util:y,Render:c,Interpolate:i,Internals:E,Selector:S,Version:"2.0.3"}}));
diff --git a/src/kute-extra.js b/src/kute-extra.js
index 1952b7a..89ca9c1 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -11,6 +11,86 @@
 
   var version = "2.0.3";
 
+  var KUTE = {};
+
+  var Tweens = [];
+
+  var globalObject = typeof (global) !== 'undefined' ? global
+                    : typeof(self) !== 'undefined' ? self
+                    : typeof(window) !== 'undefined' ? window : {};
+
+  function numbers(a, b, v) {
+    a = +a; b -= a; return a + b * v;
+  }
+  function units(a, b, u, v) {
+    a = +a; b -= a; return ( a + b * v ) + u;
+  }
+  function arrays(a,b,v){
+    var result = [];
+    for ( var i=0, l=b.length; i> 0 ) / 1000;
+    }
+    return result
+  }
+  var Interpolate = {
+    numbers: numbers,
+    units: units,
+    arrays: arrays
+  };
+
+  var onStart = {};
+
+  var Time = {};
+  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
+  	Time.now = function () {
+  		var time = process.hrtime();
+  		return time[0] * 1000 + time[1] / 1000000;
+  	};
+  } else if (typeof (self) !== 'undefined' &&
+           self.performance !== undefined &&
+  		 self.performance.now !== undefined) {
+  	Time.now = self.performance.now.bind(self.performance);
+  }
+  var Tick = 0;
+  var Ticker = function (time) {
+    var i = 0;
+    while ( i < Tweens.length ) {
+      if ( Tweens[i].update(time) ) {
+        i++;
+      } else {
+        Tweens.splice(i, 1);
+      }
+    }
+    Tick = requestAnimationFrame(Ticker);
+  };
+  function stop() {
+    setTimeout(function () {
+      if (!Tweens.length && Tick) {
+        cancelAnimationFrame(Tick);
+        Tick = null;
+        for (var obj in onStart) {
+          if (typeof (onStart[obj]) === 'function') {
+            KUTE[obj] && (delete KUTE[obj]);
+          } else {
+            for (var prop in onStart[obj]) {
+              KUTE[prop] && (delete KUTE[prop]);
+            }
+          }
+        }
+        for (var i in Interpolate) {
+          KUTE[i] && (delete KUTE[i]);
+        }
+      }
+    },64);
+  }
+  var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
+  for ( var blob in Render ) {
+    if (!KUTE[blob]) {
+      KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
+    }
+  }
+  globalObject["_KUTE"] = KUTE;
+
   var supportedProperties = {};
 
   var defaultValues = {};
@@ -27,8 +107,6 @@
 
   var crossCheck = {};
 
-  var onStart = {};
-
   var onComplete = {};
 
   var linkProperty = {};
@@ -49,23 +127,55 @@
 
   var Components = {};
 
-  function numbers(a, b, v) {
-    a = +a; b -= a; return a + b * v;
+  function add (tw) { return Tweens.push(tw); }
+
+  function remove (tw) {
+    var i = Tweens.indexOf(tw);
+    i !== -1 && Tweens.splice(i, 1);
   }
-  function units(a, b, u, v) {
-    a = +a; b -= a; return ( a + b * v ) + u;
+
+  function getAll () { return Tweens; }
+
+  function removeAll () { Tweens.length = 0; }
+
+  function linkInterpolation() {
+    var this$1 = this;
+    var loop = function ( component ) {
+      var componentLink = linkProperty[component];
+      var componentProps = supportedProperties[component];
+      for ( var fnObj in componentLink ) {
+        if ( typeof(componentLink[fnObj]) === 'function'
+            && Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
+            || i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
+        {
+          !KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
+        } else {
+          for ( var prop in this$1.valuesEnd ) {
+            for ( var i in this$1.valuesEnd[prop] ) {
+              if ( typeof(componentLink[i]) === 'function' ) {
+                !KUTE[i] && (KUTE[i] = componentLink[i]);
+              } else {
+                for (var j in componentLink[fnObj]){
+                  if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
+                    !KUTE[j] && (KUTE[j] = componentLink[i][j]);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+    for (var component in linkProperty)loop( component );
   }
-  function arrays(a,b,v){
-    var result = [];
-    for ( var i=0, l=b.length; i> 0 ) / 1000;
-    }
-    return result
-  }
-  var Interpolate = {
-    numbers: numbers,
-    units: units,
-    arrays: arrays
+
+  var Internals = {
+    add: add,
+    remove: remove,
+    getAll: getAll,
+    removeAll: removeAll,
+    stop: stop,
+    linkInterpolation: linkInterpolation
   };
 
   function getInlineStyle(el) {
@@ -152,116 +262,6 @@
     prepareObject: prepareObject
   };
 
-  var Tweens = [];
-
-  function add (tw) { return Tweens.push(tw); }
-
-  function remove (tw) {
-    var i = Tweens.indexOf(tw);
-    i !== -1 && Tweens.splice(i, 1);
-  }
-
-  function getAll () { return Tweens; }
-
-  function removeAll () { Tweens.length = 0; }
-
-  var KUTE = {};
-
-  var globalObject = typeof (global) !== 'undefined' ? global
-                    : typeof(self) !== 'undefined' ? self
-                    : typeof(window) !== 'undefined' ? window : {};
-
-  var Time = {};
-  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
-  	Time.now = function () {
-  		var time = process.hrtime();
-  		return time[0] * 1000 + time[1] / 1000000;
-  	};
-  } else if (typeof (self) !== 'undefined' &&
-           self.performance !== undefined &&
-  		 self.performance.now !== undefined) {
-  	Time.now = self.performance.now.bind(self.performance);
-  }
-  var Tick = 0;
-  var Ticker = function (time) {
-    var i = 0;
-    while ( i < Tweens.length ) {
-      if ( Tweens[i].update(time) ) {
-        i++;
-      } else {
-        Tweens.splice(i, 1);
-      }
-    }
-    Tick = requestAnimationFrame(Ticker);
-  };
-  function stop() {
-    setTimeout(function () {
-      if (!Tweens.length && Tick) {
-        cancelAnimationFrame(Tick);
-        Tick = null;
-        for (var obj in onStart) {
-          if (typeof (onStart[obj]) === 'function') {
-            KUTE[obj] && (delete KUTE[obj]);
-          } else {
-            for (var prop in onStart[obj]) {
-              KUTE[prop] && (delete KUTE[prop]);
-            }
-          }
-        }
-        for (var i in Interpolate) {
-          KUTE[i] && (delete KUTE[i]);
-        }
-      }
-    },64);
-  }
-  var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
-  for ( var blob in Render ) {
-    if (!KUTE[blob]) {
-      KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
-    }
-  }
-  globalObject["_KUTE"] = KUTE;
-
-  function linkInterpolation() {
-    var this$1 = this;
-    var loop = function ( component ) {
-      var componentLink = linkProperty[component];
-      var componentProps = supportedProperties[component];
-      for ( var fnObj in componentLink ) {
-        if ( typeof(componentLink[fnObj]) === 'function'
-            && Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
-            || i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
-        {
-          !KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
-        } else {
-          for ( var prop in this$1.valuesEnd ) {
-            for ( var i in this$1.valuesEnd[prop] ) {
-              if ( typeof(componentLink[i]) === 'function' ) {
-                !KUTE[i] && (KUTE[i] = componentLink[i]);
-              } else {
-                for (var j in componentLink[fnObj]){
-                  if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
-                    !KUTE[j] && (KUTE[j] = componentLink[i][j]);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    };
-    for (var component in linkProperty)loop( component );
-  }
-
-  var Internals = {
-    add: add,
-    remove: remove,
-    getAll: getAll,
-    removeAll: removeAll,
-    stop: stop,
-    linkInterpolation: linkInterpolation
-  };
-
   var CubicBezier = function CubicBezier(p1x, p1y, p2x, p2y, functionName) {
     var this$1 = this;
     this.cx = 3.0 * p1x;
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index 0e7eb1f..e76c248 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Extra v2.0.3 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},n={duration:700,delay:0,easing:"linear"},r={},i={},a={},s={},o={},l={},u={supportedProperties:t,defaultValues:e,defaultOptions:n,prepareProperty:r,prepareStart:i,crossCheck:a,onStart:s,onComplete:o,linkProperty:l},p={},c={};function h(t,e,n){return(t=+t)+(e-=t)*n}function f(t,e,n,r){return(t=+t)+(e-=t)*r+n}function d(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var v={numbers:h,units:f,arrays:d};function g(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(n[i]=r.includes(i)?a.split(","):a)}))})),n}}function m(t,n){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[n];if("transform"!==n&&(n in i||n in r))return a||e[n]}function y(n,i){var a="start"===i?this.valuesStart:this.valuesEnd;for(var s in r){var o=r[s],l=t[s];for(var u in o){var p={};for(var c in n)e[c]&&o[c]?a[c]=o[c].call(this,c,n[c]):!e[u]&&"transform"===u&&l.includes(c)?p[c]=n[c]:!e[u]&&l&&l.includes(c)&&(a[c]=o[u].call(this,c,n[c]));Object.keys&&Object.keys(p).length&&(a[u]=o[u].call(this,u,p))}}}function b(){var n={},r=g(this.element);for(var a in this.valuesStart)for(var s in i){var o=i[s];for(var l in o)(l===a&&o[a]||t[s]&&t[s].includes(a))&&(n[a]=o[l].call(this,a,this.valuesStart[a]))}for(var u in r)u in this.valuesStart||(n[u]=r[u]||e[u]);this.valuesStart={},y.call(this,n,"start")}var w={getInlineStyle:g,getStyleForProperty:m,getStartValues:b,prepareObject:y},x=[];function S(t){return x.push(t)}function M(t){var e=x.indexOf(t);-1!==e&&x.splice(e,1)}var T={},E="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var C=0,k=function(t){for(var e=0;e(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}p.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(t,e,r,i){for(var a in this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=e,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:p.processEasing(i.easing),this._duration=i.duration||n.duration,this._delay=i.delay||n.delay,i){var o="_"+a;o in this||(this[o]=i[a])}var l=this._easing.name;return s[l]||(s[l]=function(t){!T[t]&&t===this._easing.name&&(T[t]=this._easing)}),this};R.prototype.start=function(t){if(S(this),this.playing=!0,this._startTime=t||T.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),s)if("function"==typeof s[e])s[e].call(this,e);else for(var n in s[e])s[e][n].call(this,n);A.call(this),this._startFired=!0}return!C&&k(),this},R.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in o)for(var e in o[t])o[t][e].call(this,e);this._startFired=!1,I.call(this)},R.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,n.repeat=0,n.repeatDelay=0,n.yoyo=!1,n.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var i=e[1],s=e[2];if(y.call(this,s,"end"),this._resetStart?this.valuesStart=i:y.call(this,i,"start"),!this._resetStart)for(var o in a)for(var l in a[o])a[o][l].call(this,l);this.paused=!1,this._pauseTime=null;var u=e[3];return this._repeat=u.repeat||n.repeat,this._repeatDelay=u.repeatDelay||n.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=u.yoyo||n.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,b.call(this),a)for(var r in a[n])a[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=T.Time()-this._pauseTime,S(this),!C&&k()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=T.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,n;if((t=void 0!==t?t:T.Time())1?1:e,n=this._easing(e),this.valuesEnd)T[r](this.element,this.valuesStart[r],this.valuesEnd[r],n);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,B=function(t,e,r,i){var a=this;this.tweens=[],!("offset"in n)&&(n.offset=0),(i=i||{}).delay=i.delay||n.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=i||{},s[o].delay=o>0?i.delay+(i.offset||n.offset):i.delay,t instanceof Element?a.tweens.push(new q(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};B.prototype.start=function(t){return t=void 0===t?T.Time():t,this.tweens.map((function(e){return e.start(t)})),this},B.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},B.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},B.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},B.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof B)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},B.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},B.prototype.removeTweens=function(){this.tweens=[]},B.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};D.prototype.updateBar=function(){var t=this.toolbar.output,e=this.paused?this.toolbar.value:(T.Time()-this._startTime)/this._duration;e=e>.9999?1:e<.01?0:e;var n=this._reversed?1-e:e;this.toolbar.value=n,t&&(t.value=(100*n).toFixed(2)+"%")},D.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},D.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},D.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},D.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),T.Tick=cancelAnimationFrame(T.Ticker))},D.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=T.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),T.Tick=requestAnimationFrame(T.Ticker))};var X=function(n){try{n.component in t?console.error("KUTE.js - "+n.component+" already registered"):n.property in e?console.error("KUTE.js - "+n.property+" already registered"):this.setComponent(n)}catch(t){console.error(t)}};X.prototype.setComponent=function(u){var c=u.component,h={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},f=u.category,d=u.property,g=u.properties&&u.properties.length||u.subProperties&&u.subProperties.length;if(t[c]=u.properties||u.subProperties||u.property,"defaultValue"in u)e[d]=u.defaultValue,this.supports=d+" property";else if(u.defaultValues){for(var m in u.defaultValues)e[m]=u.defaultValues[m];this.supports=(g||d)+" "+(d||f)+" properties"}if(u.defaultOptions)for(var y in u.defaultOptions)n[y]=u.defaultOptions[y];if(u.functions)for(var b in h)if(b in u.functions)if("function"==typeof u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][f||d]&&(h[b][c][f||d]=u.functions[b]);else for(var w in u.functions[b])!h[b][c]&&(h[b][c]={}),!h[b][c][w]&&(h[b][c][w]=u.functions[b][w]);if(u.Interpolate){for(var x in u.Interpolate){var S=u.Interpolate[x];if("function"!=typeof S||v[x])for(var M in S)"function"!=typeof S[M]||v[x]||(v[x]=S[M]);else v[x]=S}l[c]=u.Interpolate}if(u.Util)for(var T in u.Util)!p[T]&&(p[T]=u.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:r,prepareStart:i,onStart:s,onComplete:o,crossCheck:a},l=e.category,u=e.property,p=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=u+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(p||u)+" "+(u||l)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===p?"YES":"Not set or incomplete"),e.defaultOptions){for(var c in this.extends=[],e.defaultOptions)this.extends.push(c);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var h in this.interface=[],this.render=[],this.warning=[],n)h in e.functions?("prepareProperty"===h&&this.interface.push("fromTo()"),"prepareStart"===h&&this.interface.push("to()"),"onStart"===h&&(this.render="can render update")):("prepareProperty"===h&&this.warning.push("fromTo()"),"prepareStart"===h&&this.warning.push("to()"),"onStart"===h&&(this.render="no function to render update"));this.interface.length?this.interface=(l||u)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(l||u)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var f in this.uses=[],this.adds=[],e.Interpolate){var d=e.Interpolate[f];if("function"==typeof d)v[f]||this.adds.push(""+f),this.uses.push(""+f);else for(var g in d)"function"!=typeof d[g]||v[f]||this.adds.push(""+g),this.uses.push(""+g)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(u||l)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*h(n[1],r[1],i)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:h},functions:Q,Util:{trueDimension:Y}};c.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};c.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(i>.99||i<.01?(10*h(n,r,i)>>0)/10:h(n,r,i)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:h},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};c.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=m(this.element,t),r=m(this.element,"width"),i=m(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*h(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:h},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?h(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*h(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}c.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};c.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,n){var r={};for(var i in n){var a=gt(i),o=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},r[a]=ot(n[i])||e.htmlAttributes[i];else if(null!==l&&o.test(l)){var u=Y(l).u||Y(n[i]).u,p=/%/.test(u)?"_percent":"_"+u;s.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*h(n.v,r.v,i)>>0)/1e3+r.u)})},r[a+p]=Y(n[i])}else o.test(n[i])&&null!==l&&(null===l||o.test(l))||(s.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*h(n,r,i)>>0)/1e3)})},r[a]=parseFloat(n[i]))}return r},onStart:{attr:function(t){!T[t]&&this.valuesEnd[t]&&(T[t]=function(t,e,n,r){for(var i in n)T.attributes[i](t,i,e[i],n[i],r)})},attributes:function(t){!T[t]&&this.valuesEnd.attr&&(T[t]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:h,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*h(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*h(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*h(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*h(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*h(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*h(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*h(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*h(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*h(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?bt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:h,blur:h,saturate:h,grayscale:h,brightness:h,contrast:h,sepia:h,invert:h,hueRotate:h,dropShadow:{numbers:h,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};c.FilterEffects=Tt;var Et={prepareStart:function(t){return m(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=(1e3*h(n,r,i)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:h},functions:Et};c.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*h(e.s,n.s,r)>>0)/100,s=(100*h(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},jt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:h},functions:Ft,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};c.SVGDraw=jt;function Vt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Rt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Ht(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Nt(t){if(!(t=Ht(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Dt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,B=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Qt(t,e){for(var n=Nt(t),r=e&&Nt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function $t(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Zt(t){var e=Kt(t),n=[];return e.map((function(t,r){n[r]=$t(e,r)})),n}function Jt(t,e){var n=Kt(t),r=Kt(e),i=n.length-1,a=[],s=[],o=Zt(t);return o.map((function(t,e){for(var o=0,l=Wt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:te(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Qt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Gt.call(this,r[0]):r[0],a=this._reverseSecondPath?Gt.call(this,r[1]):r[1];i=Jt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ne={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:h,toPathString:te},functions:ee,Util:{l2c:qt,q2c:Bt,a2c:Dt,catmullRom2bezier:Vt,ellipsePath:Rt,path2curve:Qt,pathToAbsolute:Nt,toPathString:te,parsePathString:Ht,getRotatedCurve:Jt,getRotations:Zt,getRotationSegments:$t,reverseCurve:Gt,getSegments:Kt,createPath:Wt}};function re(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ie(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=ae.call(this,t,ie(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},oe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:h},functions:se,Util:{parseStringOrigin:re,parseTransformString:ie,parseTransformSVG:ae}};function le(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ue(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}c.SVGTransformProperty=oe;var pe=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},le(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ue(t,e,i,r))}),r=a)}catch(t){}return i}(),ce="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],he="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",fe=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,de=!!pe&&{passive:!1};function ve(t){this.scrolling&&t.preventDefault()}function ge(){var t=this.element;return t===fe?{el:document,st:document.body}:{el:t,st:t}}function me(){var t=ge.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,le(t.el,ce[0],ve,de),le(t.el,he,ve,de),t.st.style.pointerEvents="none")}function ye(){var t=ge.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ue(t.el,ce[0],ve,de),ue(t.el,he,ve,de),t.st.style.pointerEvents="")}var be={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:fe,me.call(this),this.element===fe?window.pageYOffset||fe.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.scrollTop=h(e,n,r)>>0})},onComplete:function(t){ye.call(this)}},we={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:h},functions:be,Util:{preventScroll:ve,scrollIn:me,scrollOut:ye,scrollContainer:fe,passiveHandler:de,getScrollTargets:ge}};c.ScrollProperty=we;var xe=["boxShadow","textShadow"];function Se(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Me(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){for(var a=[],s="textShadow"===t?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");e.style[t]=u?lt(o,l,i)+a.join(" ")+u:lt(o,l,i)+a.join(" ")})}var Te={};xe.map((function(t){return Te[t]=Me}));var Ee={component:"shadowProperties",properties:xe,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:h,colors:lt},functions:{prepareStart:function(t,n){var r=m(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(r)?e[t]:r},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Se(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Se(e,t));return e},onStart:Te},Util:{processShadowArray:Se,trueColor:ot}};c.ShadowProperties=Ee;var _e=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ce={};function ke(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){e.style[t]=f(n.v,r.v,r.u,i)})}_e.forEach((function(t){Ce[t]=ke}));var Ie={component:"textProperties",category:"textProps",properties:_e,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:f},functions:{prepareStart:function(t){return m(this.element,t)||e[t]},prepareProperty:function(t,e){return Y(e)},onStart:Ce},Util:{trueDimension:Y}};function Pe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Oe(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),Fe=String("0123456789").split(""),je=Ae.concat(Le,Fe),Ve=je.concat(Ue),Re={alpha:Ae,upper:Le,symbols:Ue,numeric:Fe,alphanumeric:je,all:Ve};var He={text:function(t){if(!T[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in Re?Re[e]:e&&e.length?e:Re[n.textChars];T[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!T[t]&&(T[t]=function(t,e,n,r){t.innerHTML=h(e,n,r)>>0})}},Ne={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:h},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:He},Util:{charSet:Re,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=Oe(t,"text-part"),r=Oe(Pe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=u,n.onComplete=null,u+=n.duration,new q(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=u,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=n.duration,new q(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};c.TextWriteProperties=Ne;var qe="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,n){var r={};if(this.element.transformMatrix){var i=this.element.transformMatrix;for(var a in i)r[a]=i[a]}else for(var s in n)r[s]="perspective"===s?n[s]:e.transform[s];return r},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){this.valuesEnd[t]&&!T[t]&&(T[t]=function(e,n,r,i){var a=new qe,s={};for(var o in r)s[o]="perspective"===o?h(n[o],r[o],i):d(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,e.style[t]=a.toString()})},CSS3Matrix:function(t){this.valuesEnd.transform&&!T[t]&&(T[t]=qe)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:h,translate3d:d,rotate3d:d,skew:d,scale3d:d}};for(var De in c.TransformMatrix=Be,c){var Xe=c[De];c[De]=new z(Xe)}return{Animation:z,Components:c,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new q(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t),e,e,n)},TweenCollection:B,ProgressBar:D,allFromTo:function(t,e,n,r){return r=r||{},new B(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new B(j(t,!0),e,e,n)},Objects:u,Util:p,Easing:F,CubicBezier:U,Render:P,Interpolate:v,Process:w,Internals:L,Selector:j,Version:"2.0.3"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}function i(t,e,n,r){return(t=+t)+(e-=t)*r+n}function a(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var s={numbers:r,units:i,arrays:a},o={},l={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?l.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(l.now=self.performance.now.bind(self.performance));var u=0,p=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}M.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(e,n,r,i){for(var a in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:M.processEasing(i.easing),this._duration=i.duration||g.duration,this._delay=i.delay||g.delay,i){var s="_"+a;s in this||(this[s]=i[a])}var l=this._easing.name;return o[l]||(o[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};R.prototype.start=function(e){if(E(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),o)if("function"==typeof o[n])o[n].call(this,n);else for(var r in o[n])o[n][r].call(this,r);C.call(this),this._startFired=!0}return!u&&p(),this},R.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in w)for(var e in w[t])w[t][e].call(this,e);this._startFired=!1,c.call(this)},R.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,g.repeat=0,g.repeatDelay=0,g.yoyo=!1,g.resetStart=!1;var H=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(O.call(this,i,"end"),this._resetStart?this.valuesStart=r:O.call(this,r,"start"),!this._resetStart)for(var a in b)for(var s in b[a])b[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||g.repeat,this._repeatDelay=o.repeatDelay||g.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||g.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,A.call(this),b)for(var r in b[n])b[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,E(this),!u&&p()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(_(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},n.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,B=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in g)&&(g.offset=0),(r=r||{}).delay=r.delay||g.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||g.offset):r.delay,t instanceof Element?i.tweens.push(new q(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};B.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},B.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},B.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},B.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},B.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof B)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},B.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},B.prototype.removeTweens=function(){this.tweens=[]},B.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};D.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},D.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},D.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},D.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},D.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},D.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var X=function(t){try{t.component in d?console.error("KUTE.js - "+t.component+" already registered"):t.property in v?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};X.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:m,prepareStart:y,onStart:o,onComplete:w,crossCheck:b},r=t.category,i=t.property,a=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(d[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)v[i]=t.defaultValue,this.supports=i+" property";else if(t.defaultValues){for(var l in t.defaultValues)v[l]=t.defaultValues[l];this.supports=(a||i)+" "+(i||r)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)g[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][r||i]&&(n[p][e][r||i]=t.functions[p]);else for(var c in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][c]&&(n[p][e][c]=t.functions[p][c]);if(t.Interpolate){for(var h in t.Interpolate){var f=t.Interpolate[h];if("function"!=typeof f||s[h])for(var S in f)"function"!=typeof f[S]||s[h]||(s[h]=f[S]);else s[h]=f}x[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!M[T]&&(M[T]=t.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:m,prepareStart:y,onStart:o,onComplete:w,crossCheck:b},r=e.category,i=e.property,a=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=i+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(a||i)+" "+(i||r)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===a?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(r||i)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(r||i)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)s[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||s[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(i||r)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*r(n[1],i[1],a)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:r},functions:Q,Util:{trueDimension:Y}};T.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=i(n.v,r.v,r.u,a)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:i},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};T.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(a>.99||a<.01?(10*r(n,i,a)>>0)/10:r(n,i,a)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:r},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};T.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=P(this.element,t),r=P(this.element,"width"),i=P(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,i){for(var a=0,s=[];a<4;a++){var o=e[a].v,l=n[a].v,u=n[a].u||"px";s[a]=(100*r(o,l,i)>>0)/100+u}t.style.clip="rect("+s+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:r},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var i,a={};for(i in e)a[i]="a"!==i?r(t[i],e[i],n)>>0||0:t[i]&&e[i]?(100*r(t[i],e[i],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}T.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:r,colors:lt},functions:{prepareStart:function(t,e){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};T.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var i in e){var a=gt(i),s=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},n[a]=ot(e[i])||v.htmlAttributes[i];else if(null!==l&&s.test(l)){var u=Y(l).u||Y(e[i]).u,p=/%/.test(u)?"_percent":"_"+u;o.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,i,a){var s=e.replace(p,"");t.setAttribute(s,(1e3*r(n.v,i.v,a)>>0)/1e3+i.u)})},n[a+p]=Y(e[i])}else s.test(e[i])&&null!==l&&(null===l||s.test(l))||(o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,i,a){t.setAttribute(e,(1e3*r(n,i,a)>>0)/1e3)})},n[a]=parseFloat(e[i]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:r,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var i=[],a=0;a<3;a++)i[a]=(100*r(t[a],e[a],n)>>0)/100+"px";return"drop-shadow("+i.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||i.blur?"blur("+(100*r(n.blur,i.blur,a)>>0)/100+"em)":"")+(n.saturate||i.saturate?"saturate("+(100*r(n.saturate,i.saturate,a)>>0)/100+"%)":"")+(n.invert||i.invert?"invert("+(100*r(n.invert,i.invert,a)>>0)/100+"%)":"")+(n.grayscale||i.grayscale?"grayscale("+(100*r(n.grayscale,i.grayscale,a)>>0)/100+"%)":"")+(n.hueRotate||i.hueRotate?"hue-rotate("+(100*r(n.hueRotate,i.hueRotate,a)>>0)/100+"deg)":"")+(n.sepia||i.sepia?"sepia("+(100*r(n.sepia,i.sepia,a)>>0)/100+"%)":"")+(n.brightness||i.brightness?"brightness("+(100*r(n.brightness,i.brightness,a)>>0)/100+"%)":"")+(n.contrast||i.contrast?"contrast("+(100*r(n.contrast,i.contrast,a)>>0)/100+"%)":"")+(n.dropShadow||i.dropShadow?bt(n.dropShadow,i.dropShadow,a):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:r,blur:r,saturate:r,grayscale:r,brightness:r,contrast:r,sepia:r,invert:r,hueRotate:r,dropShadow:{numbers:r,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};T.FilterEffects=Tt;var Et={prepareStart:function(t){return P(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(1e3*r(n,i,a)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:Et};T.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*r(e.s,n.s,i)>>0)/100,o=(100*r(e.e,n.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},jt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},functions:Ft,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};T.SVGDraw=jt;function Vt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Rt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Ht(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Nt(t){if(!(t=Ht(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Dt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,B=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Qt(t,e){for(var n=Nt(t),r=e&&Nt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function $t(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Zt(t){var e=Kt(t),n=[];return e.map((function(t,r){n[r]=$t(e,r)})),n}function Jt(t,e){var n=Kt(t),r=Kt(e),i=n.length-1,a=[],s=[],o=Zt(t);return o.map((function(t,e){for(var o=0,l=Wt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===i?n.original:te(a))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Qt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Gt.call(this,r[0]):r[0],a=this._reverseSecondPath?Gt.call(this,r[1]):r[1];i=Jt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ne={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:r,toPathString:te},functions:ee,Util:{l2c:qt,q2c:Bt,a2c:Dt,catmullRom2bezier:Vt,ellipsePath:Rt,path2curve:Qt,pathToAbsolute:Nt,toPathString:te,parsePathString:Ht,getRotatedCurve:Jt,getRotations:Zt,getRotationSegments:$t,reverseCurve:Gt,getSegments:Kt,createPath:Wt}};function re(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ie(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=ae.call(this,t,ie(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},oe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:r},functions:se,Util:{parseStringOrigin:re,parseTransformString:ie,parseTransformSVG:ae}};function le(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ue(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}T.SVGTransformProperty=oe;var pe=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},le(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ue(t,e,i,r))}),r=a)}catch(t){}return i}(),ce="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],he="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",fe=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,de=!!pe&&{passive:!1};function ve(t){this.scrolling&&t.preventDefault()}function ge(){var t=this.element;return t===fe?{el:document,st:document.body}:{el:t,st:t}}function me(){var t=ge.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,le(t.el,ce[0],ve,de),le(t.el,he,ve,de),t.st.style.pointerEvents="none")}function ye(){var t=ge.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ue(t.el,ce[0],ve,de),ue(t.el,he,ve,de),t.st.style.pointerEvents="")}var be={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:fe,me.call(this),this.element===fe?window.pageYOffset||fe.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.scrollTop=r(e,n,i)>>0})},onComplete:function(t){ye.call(this)}},we={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:r},functions:be,Util:{preventScroll:ve,scrollIn:me,scrollOut:ye,scrollContainer:fe,passiveHandler:de,getScrollTargets:ge}};T.ScrollProperty=we;var xe=["boxShadow","textShadow"];function Se(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,i,a){for(var s=[],o="textShadow"===e?3:4,l=3===o?n[3]:n[4],u=3===o?i[3]:i[4],p=!!(n[5]&&"none"!==n[5]||i[5]&&"none"!==i[5])&&" inset",c=0;c>0)/1e3+"px");t.style[e]=p?lt(l,u,a)+s.join(" ")+p:lt(l,u,a)+s.join(" ")})}var Te={};xe.map((function(t){return Te[t]=Me}));var Ee={component:"shadowProperties",properties:xe,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:r,colors:lt},functions:{prepareStart:function(t,e){var n=P(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?v[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Se(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Se(e,t));return e},onStart:Te},Util:{processShadowArray:Se,trueColor:ot}};T.ShadowProperties=Ee;var _e=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ce={};function ke(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=i(n.v,r.v,r.u,a)})}_e.forEach((function(t){Ce[t]=ke}));var Ie={component:"textProperties",category:"textProps",properties:_e,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:i},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return Y(e)},onStart:Ce},Util:{trueDimension:Y}};function Pe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Oe(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),Fe=String("0123456789").split(""),je=Ae.concat(Le,Fe),Ve=je.concat(Ue),Re={alpha:Ae,upper:Le,symbols:Ue,numeric:Fe,alphanumeric:je,all:Ve};var He={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Re?Re[n]:n&&n.length?n:Re[g.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.innerHTML=r(e,n,i)>>0})}},Ne={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:r},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:He},Util:{charSet:Re,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=Oe(t,"text-part"),r=Oe(Pe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=u,n.onComplete=null,u+=n.duration,new q(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=u,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=n.duration,new q(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};T.TextWriteProperties=Ne;var qe="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:v.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,i,s){var o=new qe,l={};for(var u in i)l[u]="perspective"===u?r(n[u],i[u],s):a(n[u],i[u],s);l.perspective&&(o.m34=-1/l.perspective),o=l.translate3d?o.translate(l.translate3d[0],l.translate3d[1],l.translate3d[2]):o,o=l.rotate3d?o.rotate(l.rotate3d[0],l.rotate3d[1],l.rotate3d[2]):o,l.skew&&(o=l.skew[0]?o.skewX(l.skew[0]):o,o=l.skew[1]?o.skewY(l.skew[1]):o),o=l.scale3d?o.scale(l.scale3d[0],l.scale3d[1],l.scale3d[2]):o,t.style[e]=o.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=qe)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:r,translate3d:a,rotate3d:a,skew:a,scale3d:a}};for(var De in T.TransformMatrix=Be,T){var Xe=T[De];T[De]=new z(Xe)}return{Animation:z,Components:T,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new q(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t),e,e,n)},TweenCollection:B,ProgressBar:D,allFromTo:function(t,e,n,r){return r=r||{},new B(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new B(j(t,!0),e,e,n)},Objects:S,Util:M,Easing:F,CubicBezier:U,Render:h,Interpolate:s,Process:L,Internals:k,Selector:j,Version:"2.0.3"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index 9503ae1..6bf1f6f 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e={},r={},n={},i={duration:700,delay:0,easing:"linear"},a={},s={},o={},u={},l={},p={},c={supportedProperties:r,defaultValues:n,defaultOptions:i,prepareProperty:a,prepareStart:s,crossCheck:o,onStart:u,onComplete:l,linkProperty:p};function h(t){if(t.style){var e=t.style.cssText.replace(/\s/g,"").split(";"),r={},n=["translate3d","translate","scale3d","skew"];return e.map((function(t){/transform/i.test(t)&&t.split(":")[1].split(")").map((function(t){var e=t.split("("),i=e[0],a=e[1];/matrix/.test(i)||(r[i]=n.includes(i)?a.split(","):a)}))})),r}}function f(t,e){var r=t.style,i=getComputedStyle(t)||t.currentStyle,a=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:i[e];if("transform"!==e&&(e in i||e in r))return a||n[e]}function d(t,e){var i="start"===e?this.valuesStart:this.valuesEnd;for(var s in a){var o=a[s],u=r[s];for(var l in o){var p={};for(var c in t)n[c]&&o[c]?i[c]=o[c].call(this,c,t[c]):!n[l]&&"transform"===l&&u.includes(c)?p[c]=t[c]:!n[l]&&u&&u.includes(c)&&(i[c]=o[l].call(this,c,t[c]));Object.keys&&Object.keys(p).length&&(i[l]=o[l].call(this,l,p))}}}function v(){var t={},e=h(this.element);for(var i in this.valuesStart)for(var a in s){var o=s[a];for(var u in o)(u===i&&o[i]||r[a]&&r[a].includes(i))&&(t[i]=o[u].call(this,i,this.valuesStart[i]))}for(var l in e)l in this.valuesStart||(t[l]=e[l]||n[l]);this.valuesStart={},d.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:v,prepareObject:d},m=[];function y(t){return m.push(t)}function b(t){var e=m.indexOf(t);-1!==e&&m.splice(e,1)}var w={},x="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function T(t,e,r){return(t=+t)+(e-=t)*r}var S={numbers:T,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},_={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?_.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(_.now=self.performance.now.bind(self.performance));var E=0,C=function(t){for(var e=0;e(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}t.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,r,n,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:t.processEasing(a.easing),this._duration=a.duration||i.duration,this._delay=a.delay||i.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return u[l]||(u[l]=function(t){!w[t]&&t===this._easing.name&&(w[t]=this._easing)}),this};F.prototype.start=function(t){if(y(this),this.playing=!0,this._startTime=t||w.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),u)if("function"==typeof u[e])u[e].call(this,e);else for(var r in u[e])u[e][r].call(this,r);M.call(this),this._startFired=!0}return!E&&C(),this},F.prototype.stop=function(){return this.playing&&(b(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in l)for(var e in l[t])l[t][e].call(this,e);this._startFired=!1,A.call(this)},F.prototype.update=function(t){var e,r;if((t=void 0!==t?t:w.Time())1?1:e,r=this._easing(e),this.valuesEnd)w[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,i.repeat=0,i.repeatDelay=0,i.yoyo=!1,i.resetStart=!1;var H=function(t){function e(){for(var e=[],r=arguments.length;r--;)e[r]=arguments[r];t.apply(this,e),this.valuesStart={},this.valuesEnd={};var n=e[1],a=e[2];if(d.call(this,a,"end"),this._resetStart?this.valuesStart=n:d.call(this,n,"start"),!this._resetStart)for(var s in o)for(var u in o[s])o[s][u].call(this,u);this.paused=!1,this._pauseTime=null;var l=e[3];return this._repeat=l.repeat||i.repeat,this._repeatDelay=l.repeatDelay||i.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=l.yoyo||i.yoyo,this._reversed=!1,this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.start=function(e){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,v.call(this),o)for(var n in o[r])o[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return t.prototype.start.call(this,e),this},e.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},e.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},e.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=w.Time()-this._pauseTime,y(this),!E&&C()),this},e.prototype.pause=function(){return!this.paused&&this.playing&&(b(this),this.paused=!0,this._pauseTime=w.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},e.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},e.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},e.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},e.prototype.update=function(t){var e,r;if((t=void 0!==t?t:w.Time())1?1:e,r=this._easing(e),this.valuesEnd)w[n](this.element,this.valuesStart[n],this.valuesEnd[n],r);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?t+this._repeatDelay:t,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},e}(F);U.Tween=H;var N=U.Tween,V=function(t,e,r,n){var a=this;this.tweens=[],!("offset"in i)&&(i.offset=0),(n=n||{}).delay=n.delay||i.delay;var s=[];return Array.from(t).map((function(t,o){s[o]=n||{},s[o].delay=o>0?n.delay+(n.offset||i.offset):n.delay,t instanceof Element?a.tweens.push(new N(t,e,r,s[o])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(t){return t=void 0===t?w.Time():t,this.tweens.map((function(e){return e.start(t)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var X=function(t){try{t.component in r?console.error("KUTE.js - "+t.component+" already registered"):t.property in n?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function z(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*T(r,n,i)>>0)/10:T(r,n,i)>>0)+"px"})}B.map((function(t){return R[t]=0}));var D={};B.map((function(t){return D[t]=Y}));var Q={component:"boxModelProps",category:"boxModel",properties:B,defaultValues:R,Interpolate:{numbers:T},functions:{prepareStart:function(t){return f(this.element,t)||n[t]},prepareProperty:function(t,e){var r=z(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:D}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Z(t,e,r){var n,i={};for(n in e)i[n]="a"!==n?T(t[n],e[n],r)>>0||0:t[n]&&e[n]?(100*T(t[n],e[n],r)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}e.BoxModelProperties=Q;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};function G(t){this.valuesEnd[t]&&!w[t]&&(w[t]=function(e,r,n,i){e.style[t]=Z(r,n,i)})}q.forEach((function(t){W[t]="#000"}));var $={};q.map((function(t){return $[t]=G}));var J={component:"colorProps",category:"colors",properties:q,defaultValues:W,Interpolate:{numbers:T,colors:Z},functions:{prepareStart:function(t,e){return f(this.element,t)||n[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};e.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var a=rt(i),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(tt.includes(a))u.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,Z(r,n,i))})},r[a]=K(e[i])||n.htmlAttributes[i];else if(null!==o&&s.test(o)){var l=z(o).u||z(e[i]).u,p=/%/.test(l)?"_percent":"_"+l;u.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){var a=e.replace(p,"");t.setAttribute(a,(1e3*T(r.v,n.v,i)>>0)/1e3+n.u)})},r[a+p]=z(e[i])}else s.test(e[i])&&null!==o&&(null===o||s.test(o))||(u.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,(1e3*T(r,n,i)>>0)/1e3)})},r[a]=parseFloat(e[i]))}return r},onStart:{attr:function(t){!w[t]&&this.valuesEnd[t]&&(w[t]=function(t,e,r,n){for(var i in r)w.attributes[i](t,i,e[i],r[i],n)})},attributes:function(t){!w[t]&&this.valuesEnd.attr&&(w[t]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:T,colors:Z},functions:nt,Util:{replaceUppercase:rt,trueColor:K,trueDimension:z}};e.HTMLAttributes=it;var at={prepareStart:function(t){return f(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!w[t]&&(w[t]=function(e,r,n,i){e.style[t]=(1e3*T(r,n,i)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:T},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function ut(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=lt.concat(pt,ht),dt=ft.concat(ct),vt={alpha:lt,upper:pt,symbols:ct,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(t){if(!w[t]&&this.valuesEnd[t]){var e=this._textChars,r=e in vt?vt[e]:e&&e.length?e:vt[i.textChars];w[t]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(t){t in this.valuesEnd&&!w[t]&&(w[t]=function(t,e,r,n){t.innerHTML=T(e,r,n)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:T},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var n=function(t,e){var r=ut(t,"text-part"),n=ut(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),i=n[0],a=n[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),u=[],l=0;return(u=(u=u.concat(s.map((function(t,e){return r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=l,r.onComplete=null,l+=r.duration,new N(t,{text:t.innerHTML},{text:""},r)})))).concat(o.map((function(n,i){return r.duration="auto"===r.duration?75*a[i].innerHTML.length:r.duration,r.delay=l,r.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,l+=r.duration,new N(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function bt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function wt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function Tt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function St(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function _t(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}e.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=h(this.element);return r[t]?r[t]:n[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="translate"===p?n:"rotate"===p?i:"skew"===p?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+p+d in e?parseInt(e[""+p+d]):0}s[c]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(t){!w[t]&&this.valuesEnd[t]&&(w[t]=function(e,r,n,i){e.style[t]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?bt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?xt(r.translate,n.translate,"px",i):"")+(r.rotate3d?wt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?Tt(r.rotate,n.rotate,"deg",i):"")+(r.skew?St(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?_t(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:bt,rotate3d:wt,translate:xt,rotate:Tt,scale:_t,skew:St}};e.TransformFunctions=Et;var Ct=function(t,e){return parseFloat(t)/100*e},At=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*T(e.s,r.s,n)>>0)/100,s=(100*T(e.e,r.e,n)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:T},functions:jt,Util:{getRectLength:At,getPolyLength:It,getLineLength:kt,getCircleLength:Mt,getEllipseLength:Ot,getTotalLength:Pt,getDraw:Lt,percent:Ct}};function Ft(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=Ut;var Ht="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Vt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Xt(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function zt(t,e){return Vt(t,e)<1e-9}var Bt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Rt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Yt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Rt.indexOf(t)>=0}function Dt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Qt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function Zt(t){return t>=48&&t<=57||43===t||45===t||46===t}function qt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Wt(t){for(;t.index=i)t.err="KUTE.js - "+Ht;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=Bt[r]&&(t.result.push([e].concat(n.splice(0,Bt[r]))),Bt[r]););}function te(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=Qt(e=t.path.charCodeAt(t.index)),Dt(e))if(i=Bt[t.path[t.index].toLowerCase()],t.index++,Wt(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?$t(t):Gt(t),t.err.length)return;t.data.push(t.param),Wt(t),n=!1,t.index=t.max)break;if(!Zt(t.path.charCodeAt(t.index)))break}}Jt(t)}else Jt(t);else t.err="KUTE.js - "+Ht}function ee(t){var e=new qt(t),r=e.max;for(Wt(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Xt(n,i,.5),t.splice(r+1,0,i)}function fe(t,e){var r,n;if("string"==typeof t){var i=ie(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ht);if(!de(r=t.slice(0)))throw new TypeError(Ht);return r.length>1&&zt(r[0],r[r.length-1])&&r.pop(),pe(r)>0&&r.reverse(),!n&&e&&Nt(e)&&e>0&&he(r,e),r}function de(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Nt(t[0])&&Nt(t[1])}))}function ve(t,e,r){var n=fe(t,r=r||i.morphPrecision),a=fe(e,r),s=n.length-a.length;return ce(n,s<0?-1*s:0),ce(a,s>0?s:0),ue(n,a),[n,a]}re.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,u=0;return r.map((function(e,r){var l=t(e,r,a,s);Array.isArray(l)&&(n[r]=l,i=!0);var p=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(p?a:0),s=e[2]+(p?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(p?a:0));case"v":case"V":return void(s=e[1]+(p?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(p?a:0),s=e[e.length-1]+(p?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},re.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ge={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(t){!w[t]&&this.valuesEnd[t]&&(w[t]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Ft(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=ve(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):i.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},me={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ft,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ge,Util:{INVALID_INPUT:Ht,isFiniteNumber:Nt,distance:Vt,pointAlong:Xt,samePoint:zt,paramCounts:Bt,SPECIAL_SPACES:Rt,isSpace:Yt,isCommand:Dt,isArc:Qt,isDigit:Kt,isDigitStart:Zt,State:qt,skipSpaces:Wt,scanFlag:Gt,scanParam:$t,finalizeSegment:Jt,scanSegment:te,pathParse:ee,SvgPath:re,split:ne,pathStringToRing:ie,exactRing:ae,approximateRing:se,measure:oe,rotateRing:ue,polygonLength:le,polygonArea:pe,addPoints:ce,bisect:he,normalizeRing:fe,validRing:de,getInterpolationPoints:ve}};function ye(t,e){var r=e.x,n=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?r+parseFloat(t)*n/100:parseFloat(t)}function be(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",r={};if(e instanceof Array)for(var n=0,i=e.length;n>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(l?"rotate("+(1e3*l>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],r=this.valuesEnd[t],n=we.call(this,t,be(this.element.getAttribute("transform")));for(var i in n)e[i]=n[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in r&&"origin"!==o||(r[o]=e[o])}}},Te={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:T},functions:xe,Util:{parseStringOrigin:ye,parseTransformString:be,parseTransformSVG:we}};for(var Se in e.SVGTransformProperty=Te,e){var _e=e[Se];e[Se]=new X(_e)}return{Animation:X,Components:e,Tween:H,fromTo:function(t,e,r,n){return n=n||{},new N(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:c,Util:t,Easing:L,CubicBezier:P,Render:I,Interpolate:S,Process:g,Internals:O,Selector:j,Version:"2.0.3"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],r="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function n(t,e,r){return(t=+t)+(e-=t)*r}var i={numbers:n,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},a={},s={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?s.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(s.now=self.performance.now.bind(self.performance));var o=0,u=function(t){for(var r=0;r(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var P={linear:new L(0,0,1,1,"linear"),easingSinusoidalIn:new L(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new L(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new L(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new L(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new L(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new L(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new L(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new L(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new L(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new L(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new L(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new L(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new L(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new L(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new L(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new L(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new L(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new L(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new L(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new L(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new L(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new L(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new L(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new L(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}_.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new L(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U={},H=function(e,r,n,i){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:_.processEasing(i.easing),this._duration=i.duration||d.duration,this._delay=i.delay||d.delay,i){var o="_"+s;o in this||(this[o]=i[s])}var u=this._easing.name;return a[u]||(a[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};H.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var r in this._onStart&&this._onStart.call(this),a)if("function"==typeof a[r])a[r].call(this,r);else for(var n in a[r])a[r][n].call(this,n);E.call(this),this._startFired=!0}return!o&&u(),this},H.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},H.prototype.close=function(){for(var t in y)for(var e in y[t])y[t][e].call(this,e);this._startFired=!1,l.call(this)},H.prototype.update=function(e){var r,n;if((e=void 0!==e?e:t.Time())1?1:r,n=this._easing(r),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],n);return this._onUpdate&&this._onUpdate.call(this),1!==r||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=H,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var F=function(e){function r(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var n=t[1],i=t[2];if(M.call(this,i,"end"),this._resetStart?this.valuesStart=n:M.call(this,n,"start"),!this._resetStart)for(var a in m)for(var s in m[a])m[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||d.repeat,this._repeatDelay=o.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||d.yoyo,this._reversed=!1,this}return e&&(r.__proto__=e),r.prototype=Object.create(e&&e.prototype),r.prototype.constructor=r,r.prototype.start=function(t){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,k.call(this),m)for(var n in m[r])m[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},r.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},r.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},r.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!o&&u()),this},r.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},r.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},r.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},r.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},r.prototype.update=function(e){var r,n;if((e=void 0!==e?e:t.Time())1?1:r,n=this._easing(r),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],n);return this._onUpdate&&this._onUpdate.call(this),1!==r||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},r}(H);U.Tween=F;var N=U.Tween,V=function(t,e,r,n){var i=this;this.tweens=[],!("offset"in d)&&(d.offset=0),(n=n||{}).delay=n.delay||d.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=n||{},a[s].delay=s>0?n.delay+(n.offset||d.offset):n.delay,t instanceof Element?i.tweens.push(new N(t,e,r,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var R=function(t){try{t.component in h?console.error("KUTE.js - "+t.component+" already registered"):t.property in f?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function z(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||a<.01?(10*n(r,i,a)>>0)/10:n(r,i,a)>>0)+"px"})}B.map((function(t){return D[t]=0}));var X={};B.map((function(t){return X[t]=Q}));var K={component:"boxModelProps",category:"boxModel",properties:B,defaultValues:D,Interpolate:{numbers:n},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var r=z(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:X}};function q(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function W(t,e,r){var i,a={};for(i in e)a[i]="a"!==i?n(t[i],e[i],r)>>0||0:t[i]&&e[i]?(100*n(t[i],e[i],r)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}T.BoxModelProperties=K;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};function $(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,r,n,i){t.style[e]=W(r,n,i)})}Y.forEach((function(t){Z[t]="#000"}));var G={};Y.map((function(t){return G[t]=$}));var J={component:"colorProps",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:n,colors:W},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return q(e)},onStart:G},Util:{trueColor:q}};T.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var s=rt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(tt.includes(s))a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,W(r,n,i))})},r[s]=q(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=z(u).u||z(e[i]).u,p=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,i,a){var s=e.replace(p,"");t.setAttribute(s,(1e3*n(r.v,i.v,a)>>0)/1e3+i.u)})},r[s+p]=z(e[i])}else o.test(e[i])&&null!==u&&(null===u||o.test(u))||(a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,i,a){t.setAttribute(e,(1e3*n(r,i,a)>>0)/1e3)})},r[s]=parseFloat(e[i]))}return r},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,r,n,i){for(var a in n)t.attributes[a](e,a,r[a],n[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:n,colors:W},functions:nt,Util:{replaceUppercase:rt,trueColor:q,trueDimension:z}};T.HTMLAttributes=it;var at={prepareStart:function(t){return A(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,r,i,a){t.style[e]=(1e3*n(r,i,a)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:n},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function ut(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=lt.concat(pt,ht),dt=ft.concat(ct),vt={alpha:lt,upper:pt,symbols:ct,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(e){if(!t[e]&&this.valuesEnd[e]){var r=this._textChars,n=r in vt?vt[r]:r&&r.length?r:vt[d.textChars];t[e]=function(t,e,r,i){var a="",s="",o=e.substring(0),u=r.substring(0),l=n[Math.random()*n.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===r?" ":r):" "===r?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===r?" ":r):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===r?" ":r)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,r,i){t.innerHTML=n(e,r,i)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:n},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var n=function(t,e){var r=ut(t,"text-part"),n=ut(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),i=n[0],a=n[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),u=[],l=0;return(u=(u=u.concat(s.map((function(t,e){return r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=l,r.onComplete=null,l+=r.duration,new N(t,{text:t.innerHTML},{text:""},r)})))).concat(o.map((function(n,i){return r.duration="auto"===r.duration?75*a[i].innerHTML.length:r.duration,r.delay=l,r.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,l+=r.duration,new N(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function bt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function wt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function _t(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function Tt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function St(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}T.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=I(this.element);return r[t]?r[t]:f[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="translate"===p?n:"rotate"===p?i:"skew"===p?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+p+d in e?parseInt(e[""+p+d]):0}s[c]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,r,n,i){t.style[e]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?bt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?_t(r.translate,n.translate,"px",i):"")+(r.rotate3d?wt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?Tt(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?St(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:bt,rotate3d:wt,translate:_t,rotate:Tt,scale:St,skew:xt}};T.TransformFunctions=Et;var Ct=function(t,e){return parseFloat(t)/100*e},It=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},At=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*n(e.s,r.s,i)>>0)/100,o=(100*n(e.e,r.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:n},functions:jt,Util:{getRectLength:It,getPolyLength:At,getLineLength:Mt,getCircleLength:kt,getEllipseLength:Ot,getTotalLength:Lt,getDraw:Pt,percent:Ct}};function Ht(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}T.SVGDraw=Ut;var Ft="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Vt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Rt(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function zt(t,e){return Vt(t,e)<1e-9}var Bt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Dt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Qt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Dt.indexOf(t)>=0}function Xt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Kt(t){return 97==(32|t)}function qt(t){return t>=48&&t<=57}function Wt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Yt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Zt(t){for(;t.index=i)t.err="KUTE.js - "+Ft;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=Bt[r]&&(t.result.push([e].concat(n.splice(0,Bt[r]))),Bt[r]););}function te(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=Kt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=Bt[t.path[t.index].toLowerCase()],t.index++,Zt(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?Gt(t):$t(t),t.err.length)return;t.data.push(t.param),Zt(t),n=!1,t.index=t.max)break;if(!Wt(t.path.charCodeAt(t.index)))break}}Jt(t)}else Jt(t);else t.err="KUTE.js - "+Ft}function ee(t){var e=new Yt(t),r=e.max;for(Zt(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Rt(n,i,.5),t.splice(r+1,0,i)}function fe(t,e){var r,n;if("string"==typeof t){var i=ie(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ft);if(!de(r=t.slice(0)))throw new TypeError(Ft);return r.length>1&&zt(r[0],r[r.length-1])&&r.pop(),pe(r)>0&&r.reverse(),!n&&e&&Nt(e)&&e>0&&he(r,e),r}function de(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Nt(t[0])&&Nt(t[1])}))}function ve(t,e,r){var n=fe(t,r=r||d.morphPrecision),i=fe(e,r),a=n.length-i.length;return ce(n,a<0?-1*a:0),ce(i,a>0?a:0),ue(n,i),[n,i]}re.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,u=0;return r.map((function(e,r){var l=t(e,r,a,s);Array.isArray(l)&&(n[r]=l,i=!0);var p=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(p?a:0),s=e[2]+(p?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(p?a:0));case"v":case"V":return void(s=e[1]+(p?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(p?a:0),s=e[e.length-1]+(p?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},re.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ge={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Ht(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=ve(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):d.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},me={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ht,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ge,Util:{INVALID_INPUT:Ft,isFiniteNumber:Nt,distance:Vt,pointAlong:Rt,samePoint:zt,paramCounts:Bt,SPECIAL_SPACES:Dt,isSpace:Qt,isCommand:Xt,isArc:Kt,isDigit:qt,isDigitStart:Wt,State:Yt,skipSpaces:Zt,scanFlag:$t,scanParam:Gt,finalizeSegment:Jt,scanSegment:te,pathParse:ee,SvgPath:re,split:ne,pathStringToRing:ie,exactRing:ae,approximateRing:se,measure:oe,rotateRing:ue,polygonLength:le,polygonArea:pe,addPoints:ce,bisect:he,normalizeRing:fe,validRing:de,getInterpolationPoints:ve}};for(var ye in T.SVGMorph=me,T){var be=T[ye];T[ye]=new R(be)}return{Animation:R,Components:T,Tween:F,fromTo:function(t,e,r,n){return n=n||{},new N(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:w,Util:_,Easing:P,CubicBezier:L,Render:p,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"}}));
diff --git a/svgTransform.html b/svgTransform.html
index e898223..0809c8a 100644
--- a/svgTransform.html
+++ b/svgTransform.html
@@ -148,29 +148,29 @@
 
 
    // using the svgTransform property works in all SVG enabled browsers
 var tween2 = KUTE.to(
-    'shape',                // target
-    {                       // to
-        svgTransform: { 
-            translate: [150,100], 
-            rotate: 45, 
-            skewX: 15, skewY: 20, 
-            scale: 1.5 
-        }
+  'shape',                // target
+  {                       // to
+    svgTransform: { 
+      translate: [150,100], 
+      rotate: 45, 
+      skewX: 15, skewY: 20, 
+      scale: 1.5 
     }
+  }
 );
 
 // transformMatrix can animate SVGElement targets on modern browsers
 // requires adding styling like `transform-origin:50% 50%` to the target element
 var tween1 = KUTE.to(
-    'shape',            // target
-    {                   // to
-        transform: { 
-            translate3d: [150,100,0], 
-            rotate3d: [0,0,45], 
-            skew: [15,20], 
-            scale3d: [1.5,1.5,1] 
-        } 
-    }
+  'shape',            // target
+  {                   // to
+    transform: { 
+      translate3d: [150,100,0], 
+      rotate3d: [0,0,45], 
+      skew: [15,20], 
+      scale3d: [1.5,1.5,1] 
+    } 
+  }
 );
 
    
 
@@ -356,7 +356,7 @@ KUTE.fromTo(element,
             
  • While you can still use regular CSS3 transforms for SVG elements, everything is fine with Google Chrome, Opera and other webkit browsers, but older Firefox versions struggle with the percentage based 
                 transformOrigin values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements, which means that the SVG Transform component will become a fallback 
                 component to handle legacy browsers in the future. Guess who's taking over :)
    • 
-            
  • This component is bundled with the standard kute.js distribution file and the demo/src/kute-extra.js file.
    • 
+            
  • This component is bundled with the demo/src/kute-extra.js file.
    • 
 
         
 

From dab615ea54673e70d11dae233dae1e649baf43a9 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 12 Jun 2020 08:03:08 +0000
Subject: [PATCH 155/187]

---
 assets/css/kute.css |  1 +
 scrollProperty.html | 16 ++++++++++------
 src/kute.min.js     |  2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/assets/css/kute.css b/assets/css/kute.css
index 064ecd0..4ae05ba 100644
--- a/assets/css/kute.css
+++ b/assets/css/kute.css
@@ -183,6 +183,7 @@ svg.example-box { width: auto; height: auto; }*/
 
 .easing-example {float: none; font-size: 24px; width: 320px}
 .example-buttons {position: absolute; top: 18px; right:0}
+.example-buttons + .example-buttons { top: auto; bottom: 18px}
 
 /* text properties example */
 h1.example-item {
diff --git a/scrollProperty.html b/scrollProperty.html
index 2ab83c3..d17f6d2 100644
--- a/scrollProperty.html
+++ b/scrollProperty.html
@@ -120,7 +120,7 @@ KUTE.to('#myElement',{scroll: 0 }).start()
 
       
    
         
    
-          
    KUTE.js works here
    
+          
    KUTE.js Scroll Property
    
           
    Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy 
             foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive 
             innovation via workplace diversity and empowerment.
    
@@ -146,10 +146,9 @@ KUTE.to('#myElement',{scroll: 0 }).start()
       
    
 
       
    
-        
    
-          
    Scroll Behavior Works here
    
-          
    Click to scroll to bottom, 
-            leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy 
+        
    
+          
    scroll-behavior: smooth
    
+          
    Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy 
             foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive 
             innovation via workplace diversity and empowerment.
    
 
@@ -170,7 +169,12 @@ KUTE.to('#myElement',{scroll: 0 }).start()
           
    Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed 
             base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
    
         
    
-        
    Top
    
+        
    
+          Bottom
+        
    
+        
    
+          Top
+        
    
       
    
       
    The above shows a comparison of the Scroll Property component with the scroll-behavior: smooth CSS; while this browser 
         feature shows excellent performance it lacks the flexibility and support for legacy browsers.
    
diff --git a/src/kute.min.js b/src/kute.min.js
index 6bf1f6f..8356fe8 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],r="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function n(t,e,r){return(t=+t)+(e-=t)*r}var i={numbers:n,units:function(t,e,r,n){return(t=+t)+(e-=t)*n+r},arrays:function(t,e,r){for(var n=[],i=0,a=e.length;i>0)/1e3;return n}},a={},s={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?s.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(s.now=self.performance.now.bind(self.performance));var o=0,u=function(t){for(var r=0;r(r=1))return r;for(;ei?e=n:r=n,n=.5*(r-e)+e}return n};var P={linear:new L(0,0,1,1,"linear"),easingSinusoidalIn:new L(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new L(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new L(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new L(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new L(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new L(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new L(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new L(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new L(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new L(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new L(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new L(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new L(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new L(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new L(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new L(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new L(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new L(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new L(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new L(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new L(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new L(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new L(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new L(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}_.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new L(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U={},H=function(e,r,n,i){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=n,this.valuesStart=r,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:_.processEasing(i.easing),this._duration=i.duration||d.duration,this._delay=i.delay||d.delay,i){var o="_"+s;o in this||(this[o]=i[s])}var u=this._easing.name;return a[u]||(a[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};H.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var r in this._onStart&&this._onStart.call(this),a)if("function"==typeof a[r])a[r].call(this,r);else for(var n in a[r])a[r][n].call(this,n);E.call(this),this._startFired=!0}return!o&&u(),this},H.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},H.prototype.close=function(){for(var t in y)for(var e in y[t])y[t][e].call(this,e);this._startFired=!1,l.call(this)},H.prototype.update=function(e){var r,n;if((e=void 0!==e?e:t.Time())1?1:r,n=this._easing(r),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],n);return this._onUpdate&&this._onUpdate.call(this),1!==r||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=H,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var F=function(e){function r(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var n=t[1],i=t[2];if(M.call(this,i,"end"),this._resetStart?this.valuesStart=n:M.call(this,n,"start"),!this._resetStart)for(var a in m)for(var s in m[a])m[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||d.repeat,this._repeatDelay=o.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||d.yoyo,this._reversed=!1,this}return e&&(r.__proto__=e),r.prototype=Object.create(e&&e.prototype),r.prototype.constructor=r,r.prototype.start=function(t){if(this._resetStart)for(var r in this.valuesStart=this._resetStart,k.call(this),m)for(var n in m[r])m[r][n].call(this,n);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},r.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},r.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},r.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!o&&u()),this},r.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},r.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},r.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},r.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},r.prototype.update=function(e){var r,n;if((e=void 0!==e?e:t.Time())1?1:r,n=this._easing(r),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],n);return this._onUpdate&&this._onUpdate.call(this),1!==r||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},r}(H);U.Tween=F;var N=U.Tween,V=function(t,e,r,n){var i=this;this.tweens=[],!("offset"in d)&&(d.offset=0),(n=n||{}).delay=n.delay||d.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=n||{},a[s].delay=s>0?n.delay+(n.offset||d.offset):n.delay,t instanceof Element?i.tweens.push(new N(t,e,r,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof N))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var R=function(t){try{t.component in h?console.error("KUTE.js - "+t.component+" already registered"):t.property in f?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function z(t,e){for(var r,n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||a<.01?(10*n(r,i,a)>>0)/10:n(r,i,a)>>0)+"px"})}B.map((function(t){return D[t]=0}));var X={};B.map((function(t){return X[t]=Q}));var K={component:"boxModelProps",category:"boxModel",properties:B,defaultValues:D,Interpolate:{numbers:n},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var r=z(e),n="height"===t?"offsetHeight":"offsetWidth";return"%"===r.u?r.v*this.element[n]/100:r.v},onStart:X}};function q(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),r=e[3]?e[3]:null;return r?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(r)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var n=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,r,n){return e+e+r+r+n+n}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function W(t,e,r){var i,a={};for(i in e)a[i]="a"!==i?n(t[i],e[i],r)>>0||0:t[i]&&e[i]?(100*n(t[i],e[i],r)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}T.BoxModelProperties=K;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};function $(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,r,n,i){t.style[e]=W(r,n,i)})}Y.forEach((function(t){Z[t]="#000"}));var G={};Y.map((function(t){return G[t]=$}));var J={component:"colorProps",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:n,colors:W},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return q(e)},onStart:G},Util:{trueColor:q}};T.ColorProperties=J;var tt=["fill","stroke","stop-color"],et={};function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var r={};for(var n in e){var i=rt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=tt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(n)?1:0)}return r},prepareProperty:function(t,e){var r={};for(var i in e){var s=rt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(tt.includes(s))a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,n,i){t.setAttribute(e,W(r,n,i))})},r[s]=q(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=z(u).u||z(e[i]).u,p=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,i,a){var s=e.replace(p,"");t.setAttribute(s,(1e3*n(r.v,i.v,a)>>0)/1e3+i.u)})},r[s+p]=z(e[i])}else o.test(e[i])&&null!==u&&(null===u||o.test(u))||(a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in et)&&(et[e]=function(t,e,r,i,a){t.setAttribute(e,(1e3*n(r,i,a)>>0)/1e3)})},r[s]=parseFloat(e[i]))}return r},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,r,n,i){for(var a in n)t.attributes[a](e,a,r[a],n[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=et)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:n,colors:W},functions:nt,Util:{replaceUppercase:rt,trueColor:q,trueDimension:z}};T.HTMLAttributes=it;var at={prepareStart:function(t){return A(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,r,i,a){t.style[e]=(1e3*n(r,i,a)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:n},functions:at};function ot(t,e){var r,n;if("string"==typeof t)return(n=document.createElement("SPAN")).innerHTML=t,n.className=e,n;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(r=document.createElement("SPAN")).className=e,r.innerHTML=i,t.appendChild(r),t.innerHTML=r.outerHTML}else t.children.length&&t.children[0].className===e&&(r=t.children[0]);return r}function ut(t,e){var r=[];if(t.children.length){for(var n,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s,./?=-").split(""),ht=String("0123456789").split(""),ft=lt.concat(pt,ht),dt=ft.concat(ct),vt={alpha:lt,upper:pt,symbols:ct,numeric:ht,alphanumeric:ft,all:dt};var gt={text:function(e){if(!t[e]&&this.valuesEnd[e]){var r=this._textChars,n=r in vt?vt[r]:r&&r.length?r:vt[d.textChars];t[e]=function(t,e,r,i){var a="",s="",o=e.substring(0),u=r.substring(0),l=n[Math.random()*n.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===r?" ":r):" "===r?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===r?" ":r):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===r?" ":r)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,r,i){t.innerHTML=n(e,r,i)>>0})}},mt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:n},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:vt,createTextTweens:function(t,e,r){if(!t.playing){(r=r||{}).duration="auto"===r.duration?"auto":isFinite(1*r.duration)?1*r.duration:1e3;var n=function(t,e){var r=ut(t,"text-part"),n=ut(ot(e),"text-part");return t.innerHTML="",t.innerHTML+=r.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=n.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[r,n]}(t,e),i=n[0],a=n[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),u=[],l=0;return(u=(u=u.concat(s.map((function(t,e){return r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=l,r.onComplete=null,l+=r.duration,new N(t,{text:t.innerHTML},{text:""},r)})))).concat(o.map((function(n,i){return r.duration="auto"===r.duration?75*a[i].innerHTML.length:r.duration,r.delay=l,r.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,l+=r.duration,new N(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function yt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function bt(t,e,r,n){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*n)>>0)/1e3:0)+r;return"translate3d("+i.join(",")+")"}function wt(t,e,r,n){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3+r+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3+r+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*n)>>0)/1e3+r+")":""}function _t(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","translate("+i.join(",")+")"}function Tt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function xt(t,e,r,n){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*n)>>0)/1e3)+r,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*n)>>0)/1e3)+r:"0","skew("+i.join(",")+")"}function St(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}T.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var r=I(this.element);return r[t]?r[t]:f[t]},prepareProperty:function(t,e){var r=["X","Y","Z"],n=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="translate"===p?n:"rotate"===p?i:"skew"===p?a:{},f=0;f<3;f++){var d=r[f];h[f]=""+p+d in e?parseInt(e[""+p+d]):0}s[c]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,r,n,i){t.style[e]=(r.perspective||n.perspective?yt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?bt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?_t(r.translate,n.translate,"px",i):"")+(r.rotate3d?wt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?Tt(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?St(r.scale,n.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:bt,rotate3d:wt,translate:_t,rotate:Tt,scale:St,skew:xt}};T.TransformFunctions=Et;var Ct=function(t,e){return parseFloat(t)/100*e},It=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},At=function(t){var e=t.getAttribute("points").split(" "),r=0;if(e.length>1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*n(e.s,r.s,i)>>0)/100,o=(100*n(e.e,r.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:n},functions:jt,Util:{getRectLength:It,getPolyLength:At,getLineLength:Mt,getCircleLength:kt,getEllipseLength:Ot,getTotalLength:Lt,getDraw:Pt,percent:Ct}};function Ht(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}T.SVGDraw=Ut;var Ft="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Vt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Rt(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function zt(t,e){return Vt(t,e)<1e-9}var Bt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Dt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Qt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Dt.indexOf(t)>=0}function Xt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Kt(t){return 97==(32|t)}function qt(t){return t>=48&&t<=57}function Wt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Yt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Zt(t){for(;t.index=i)t.err="KUTE.js - "+Ft;else if(43!==(e=t.path.charCodeAt(n))&&45!==e||(e=++n2&&(t.result.push([e,n[0],n[1]]),n=n.slice(2),r="l",e="m"===e?"l":"L"),"r"===r)t.result.push([e].concat(n));else for(;n.length>=Bt[r]&&(t.result.push([e].concat(n.splice(0,Bt[r]))),Bt[r]););}function te(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=Kt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=Bt[t.path[t.index].toLowerCase()],t.index++,Zt(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?Gt(t):$t(t),t.err.length)return;t.data.push(t.param),Zt(t),n=!1,t.index=t.max)break;if(!Wt(t.path.charCodeAt(t.index)))break}}Jt(t)}else Jt(t);else t.err="KUTE.js - "+Ft}function ee(t){var e=new Yt(t),r=e.max;for(Zt(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Rt(n,i,.5),t.splice(r+1,0,i)}function fe(t,e){var r,n;if("string"==typeof t){var i=ie(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ft);if(!de(r=t.slice(0)))throw new TypeError(Ft);return r.length>1&&zt(r[0],r[r.length-1])&&r.pop(),pe(r)>0&&r.reverse(),!n&&e&&Nt(e)&&e>0&&he(r,e),r}function de(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Nt(t[0])&&Nt(t[1])}))}function ve(t,e,r){var n=fe(t,r=r||d.morphPrecision),i=fe(e,r),a=n.length-i.length;return ce(n,a<0?-1*a:0),ce(i,a>0?a:0),ue(n,i),[n,i]}re.prototype.iterate=function(t){var e,r=this.segments,n={},i=!1,a=0,s=0,o=0,u=0;return r.map((function(e,r){var l=t(e,r,a,s);Array.isArray(l)&&(n[r]=l,i=!0);var p=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(p?a:0),s=e[2]+(p?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(p?a:0));case"v":case"V":return void(s=e[1]+(p?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(p?a:0),s=e[e.length-1]+(p?s:0)}})),i?(e=[],r.map((function(t,r){void 0!==n[r]?n[r].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},re.prototype.abs=function(){return this.iterate((function(t,e,r,n){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=n);case"a":return t[6]+=r,void(t[7]+=n);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===r.segments[a-1][0],n=n.concat(t?i.slice(1):i)})),n.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ge={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var r={},n=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(n&&/path|glyph/.test(n.tagName)?r.original=n.getAttribute("d").replace(i,""):!n&&/[a-z][^a-z]*/gi.test(e)&&(r.original=e.replace(i,"")),r)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,r,n){var i,a=e.pathArray,s=r.pathArray,o=s.length;i=1===n?r.original:"M"+Ht(a,s,o,n).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,r=this.valuesEnd[t].pathArray;if(!e||!r||e&&r&&e.length!==r.length){var n=ve(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):d.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},me={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ht,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ge,Util:{INVALID_INPUT:Ft,isFiniteNumber:Nt,distance:Vt,pointAlong:Rt,samePoint:zt,paramCounts:Bt,SPECIAL_SPACES:Dt,isSpace:Qt,isCommand:Xt,isArc:Kt,isDigit:qt,isDigitStart:Wt,State:Yt,skipSpaces:Zt,scanFlag:$t,scanParam:Gt,finalizeSegment:Jt,scanSegment:te,pathParse:ee,SvgPath:re,split:ne,pathStringToRing:ie,exactRing:ae,approximateRing:se,measure:oe,rotateRing:ue,polygonLength:le,polygonArea:pe,addPoints:ce,bisect:he,normalizeRing:fe,validRing:de,getInterpolationPoints:ve}};for(var ye in T.SVGMorph=me,T){var be=T[ye];T[ye]=new R(be)}return{Animation:R,Components:T,Tween:F,fromTo:function(t,e,r,n){return n=n||{},new N(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new N(j(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,r,n){return n=n||{},new V(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new V(j(t,!0),e,e,r)},Objects:w,Util:_,Easing:P,CubicBezier:L,Render:p,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}var i={numbers:r,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}},a={},s={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?s.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(s.now=self.performance.now.bind(self.performance));var o=0,u=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}_.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,n,r,i){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:_.processEasing(i.easing),this._duration=i.duration||d.duration,this._delay=i.delay||d.delay,i){var o="_"+s;o in this||(this[o]=i[s])}var u=this._easing.name;return a[u]||(a[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(T(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),a)if("function"==typeof a[n])a[n].call(this,n);else for(var r in a[n])a[n][r].call(this,r);E.call(this),this._startFired=!0}return!o&&u(),this},F.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in y)for(var e in y[t])y[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var N=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(M.call(this,i,"end"),this._resetStart?this.valuesStart=r:M.call(this,r,"start"),!this._resetStart)for(var a in m)for(var s in m[a])m[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||d.repeat,this._repeatDelay=o.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||d.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,k.call(this),m)for(var r in m[n])m[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,T(this),!o&&u()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},n.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);U.Tween=N;var H=U.Tween,V=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in d)&&(d.offset=0),(r=r||{}).delay=r.delay||d.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||d.offset):r.delay,t instanceof Element?i.tweens.push(new H(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof H))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var z=function(t){try{t.component in h?console.error("KUTE.js - "+t.component+" already registered"):t.property in f?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||a<.01?(10*r(n,i,a)>>0)/10:r(n,i,a)>>0)+"px"})}z.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:v,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},r=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(h[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)f[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)f[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||r)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)d[l]=t.defaultOptions[l];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][r||s]&&(n[p][e][r||s]=t.functions[p]);else for(var c in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][c]&&(n[p][e][c]=t.functions[p][c]);if(t.Interpolate){for(var w in t.Interpolate){var x=t.Interpolate[w];if("function"!=typeof x||i[w])for(var T in x)"function"!=typeof x[T]||i[w]||(i[w]=x[T]);else i[w]=x}b[e]=t.Interpolate}if(t.Util)for(var S in t.Util)!_[S]&&(_[S]=t.Util[S]);return this};var R={};["top","left","width","height"].map((function(t){return R[t]=Q}));var X={component:"boxModelProps",category:"boxModel",properties:["top","left","width","height"],defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:r},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function B(t,e,n){var i,a={};for(i in e)a[i]="a"!==i?r(t[i],e[i],n)>>0||0:t[i]&&e[i]?(100*r(t[i],e[i],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}x.BoxModelEssentialProperties=X;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Y={};function Z(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=B(n,r,i)})}q.forEach((function(t){Y[t]="#000"}));var $={};q.map((function(t){return $[t]=Z}));var W={component:"colorProps",category:"colors",properties:q,defaultValues:Y,Interpolate:{numbers:r,colors:B},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};x.ColorProperties=W;var G=["fill","stroke","stop-color"],J={};function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=G.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var i in e){var s=tt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(G.includes(s))a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,B(n,r,i))})},n[s]=K(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=D(u).u||D(e[i]).u,p=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,i,a){var s=e.replace(p,"");t.setAttribute(s,(1e3*r(n.v,i.v,a)>>0)/1e3+i.u)})},n[s+p]=D(e[i])}else o.test(e[i])&&null!==u&&(null===u||o.test(u))||(a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,i,a){t.setAttribute(e,(1e3*r(n,i,a)>>0)/1e3)})},n[s]=parseFloat(e[i]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=J)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:r,colors:B},functions:et,Util:{replaceUppercase:tt,trueColor:K,trueDimension:D}};x.HTMLAttributes=nt;var rt={prepareStart:function(t){return A(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(1e3*r(n,i,a)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:rt};function at(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function st(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s,./?=-").split(""),pt=String("0123456789").split(""),ct=ot.concat(ut,pt),ht=ct.concat(lt),ft={alpha:ot,upper:ut,symbols:lt,numeric:pt,alphanumeric:ct,all:ht};var dt={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ft?ft[n]:n&&n.length?n:ft[d.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.innerHTML=r(e,n,i)>>0})}},vt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:r},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:dt},Util:{charSet:ft,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=st(t,"text-part"),r=st(at(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),u=[],l=0;return(u=(u=u.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=l,n.onComplete=null,l+=n.duration,new H(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=l,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,l+=n.duration,new H(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function gt(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function wt(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function _t(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}function xt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}x.TextWriteProperties=vt;var Tt={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=I(this.element);return n[t]?n[t]:f[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="translate"===p?r:"rotate"===p?i:"skew"===p?a:{},f=0;f<3;f++){var d=n[f];h[f]=""+p+d in e?parseInt(e[""+p+d]):0}s[c]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?gt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?mt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?bt(n.translate,r.translate,"px",i):"")+(n.rotate3d?yt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?wt(n.rotate,r.rotate,"deg",i):"")+(n.skew?_t(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?xt(n.scale,r.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:gt,translate3d:mt,rotate3d:yt,translate:bt,rotate:wt,scale:xt,skew:_t}};x.TransformFunctions=Tt;var St=function(t,e){return parseFloat(t)/100*e},Et=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Ct=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*r(e.s,n.s,i)>>0)/100,o=(100*r(e.e,n.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Lt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},functions:Pt,Util:{getRectLength:Et,getPolyLength:Ct,getLineLength:It,getCircleLength:At,getEllipseLength:Mt,getTotalLength:kt,getDraw:Ot,percent:St}};function jt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Lt;var Ut="Invalid path value";function Ft(t){return"number"==typeof t&&isFinite(t)}function Nt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ht(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Vt(t,e){return Nt(t,e)<1e-9}var zt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Dt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Qt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Dt.indexOf(t)>=0}function Rt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Xt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function Bt(t){return t>=48&&t<=57||43===t||45===t||46===t}function qt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Yt(t){for(;t.index=i)t.err="KUTE.js - "+Ut;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=zt[n]&&(t.result.push([e].concat(r.splice(0,zt[n]))),zt[n]););}function Gt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Xt(e=t.path.charCodeAt(t.index)),Rt(e))if(i=zt[t.path[t.index].toLowerCase()],t.index++,Yt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?$t(t):Zt(t),t.err.length)return;t.data.push(t.param),Yt(t),r=!1,t.index=t.max)break;if(!Bt(t.path.charCodeAt(t.index)))break}}Wt(t)}else Wt(t);else t.err="KUTE.js - "+Ut}function Jt(t){var e=new qt(t),n=e.max;for(Yt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ht(r,i,.5),t.splice(n+1,0,i)}function ce(t,e){var n,r;if("string"==typeof t){var i=ne(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ut);if(!he(n=t.slice(0)))throw new TypeError(Ut);return n.length>1&&Vt(n[0],n[n.length-1])&&n.pop(),ue(n)>0&&n.reverse(),!r&&e&&Ft(e)&&e>0&&pe(n,e),n}function he(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Ft(t[0])&&Ft(t[1])}))}function fe(t,e,n){var r=ce(t,n=n||d.morphPrecision),i=ce(e,n),a=r.length-i.length;return le(r,a<0?-1*a:0),le(i,a>0?a:0),se(r,i),[r,i]}te.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var p=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(p?a:0),s=e[2]+(p?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(p?a:0));case"v":case"V":return void(s=e[1]+(p?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(p?a:0),s=e[e.length-1]+(p?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},te.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var de={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+jt(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=fe(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):d.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},ve={component:"svgMorph",property:"path",defaultValue:[],Interpolate:jt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:de,Util:{INVALID_INPUT:Ut,isFiniteNumber:Ft,distance:Nt,pointAlong:Ht,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Dt,isSpace:Qt,isCommand:Rt,isArc:Xt,isDigit:Kt,isDigitStart:Bt,State:qt,skipSpaces:Yt,scanFlag:Zt,scanParam:$t,finalizeSegment:Wt,scanSegment:Gt,pathParse:Jt,SvgPath:te,split:ee,pathStringToRing:ne,exactRing:re,approximateRing:ie,measure:ae,rotateRing:se,polygonLength:oe,polygonArea:ue,addPoints:le,bisect:pe,normalizeRing:ce,validRing:he,getInterpolationPoints:fe}};for(var ge in x.SVGMorph=ve,x){var me=x[ge];x[ge]=new z(me)}return{Animation:z,Components:x,Tween:N,fromTo:function(t,e,n,r){return r=r||{},new H(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new H(j(t),e,e,n)},TweenCollection:V,allFromTo:function(t,e,n,r){return r=r||{},new V(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new V(j(t,!0),e,e,n)},Objects:w,Util:_,Easing:L,CubicBezier:P,Render:p,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"}}));

From a8c06c1dad84051628023b19eb06e03ead2faeb6 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 16 Jun 2020 14:37:41 +0000
Subject: [PATCH 156/187]

---
 backgroundPosition.html    |   3 +-
 borderRadius.html          |   3 +-
 boxModel.html              |   3 +-
 clipProperty.html          |   4 +-
 colorProperties.html       |   3 +-
 filterEffects.html         |   3 +-
 htmlAttributes.html        |   3 +-
 index.html                 |   3 +-
 opacityProperty.html       |   3 +-
 performance-matrix.html    |   4 +-
 performance-transform.html |   7 +-
 performance.html           |   8 +-
 progress.html              |   5 +-
 scrollProperty.html        |   3 +-
 shadowProperties.html      |   5 +-
 src/kute-base.js           | 169 +++++-----
 src/kute-base.min.js       |   2 +-
 src/kute-extra.js          | 676 +++++++++++++++++++------------------
 src/kute-extra.min.js      |   2 +-
 src/kute.min.js            |   2 +-
 svgCubicMorph.html         |   4 +-
 svgDraw.html               |   3 +-
 svgMorph.html              |   6 +-
 svgTransform.html          |   3 +-
 textProperties.html        |   3 +-
 textWrite.html             |   5 +-
 transformFunctions.html    |   5 +-
 transformMatrix.html       |   5 +-
 28 files changed, 465 insertions(+), 480 deletions(-)

diff --git a/backgroundPosition.html b/backgroundPosition.html
index 26586c9..379d0fb 100644
--- a/backgroundPosition.html
+++ b/backgroundPosition.html
@@ -145,8 +145,7 @@ let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start()
 
 
 
-    
+    
     
     
     
diff --git a/borderRadius.html b/borderRadius.html
index 2305fcd..729bd96 100644
--- a/borderRadius.html
+++ b/borderRadius.html
@@ -157,8 +157,7 @@ KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start();
 
 
 
-    
+    
     
 
     
diff --git a/boxModel.html b/boxModel.html
index ef34c1e..913e436 100644
--- a/boxModel.html
+++ b/boxModel.html
@@ -165,8 +165,7 @@ let tween8 = KUTE.to('selector1',{margin:'5px'})
 
 
 
-    
+    
     
 
     
diff --git a/clipProperty.html b/clipProperty.html
index 38df1cc..d5bd540 100644
--- a/clipProperty.html
+++ b/clipProperty.html
@@ -140,10 +140,8 @@
     
    
     
 
-    
+    
     
-
     
     
     
diff --git a/colorProperties.html b/colorProperties.html
index ec187b8..79bf27a 100644
--- a/colorProperties.html
+++ b/colorProperties.html
@@ -156,8 +156,7 @@ KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+
 
 
 
-    
+    
     
 
     
diff --git a/filterEffects.html b/filterEffects.html
index 23bb722..269f356 100644
--- a/filterEffects.html
+++ b/filterEffects.html
@@ -177,8 +177,7 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop
     
 
 
-    
+    
     
 
     
diff --git a/htmlAttributes.html b/htmlAttributes.html
index be6fced..069cdb8 100644
--- a/htmlAttributes.html
+++ b/htmlAttributes.html
@@ -220,8 +220,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
       
     
    
 
-    
+    
     
     
     
diff --git a/index.html b/index.html
index 9f1496d..db78484 100644
--- a/index.html
+++ b/index.html
@@ -219,8 +219,7 @@
 
 
 
-  
+  
   
 
   
diff --git a/opacityProperty.html b/opacityProperty.html
index 920d9e5..363efcb 100644
--- a/opacityProperty.html
+++ b/opacityProperty.html
@@ -138,8 +138,7 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
     
     
 
-    
+    
     
     
     
diff --git a/performance-matrix.html b/performance-matrix.html
index 8fefb2c..59271ce 100644
--- a/performance-matrix.html
+++ b/performance-matrix.html
@@ -199,10 +199,8 @@
 
     
    
 
-    
+    
     
-    
 
     
     
diff --git a/performance-transform.html b/performance-transform.html
index 1ccd009..ae26364 100644
--- a/performance-transform.html
+++ b/performance-transform.html
@@ -202,13 +202,8 @@
 
     
    
 
-
-
-
-    
+    
     
-    
 
     
     
diff --git a/performance.html b/performance.html
index 81dcc03..f8ddaeb 100644
--- a/performance.html
+++ b/performance.html
@@ -228,15 +228,11 @@
 
 
 
-    
+    
     
-    
 
     
-    
-
-    
+    
     
     
     
diff --git a/progress.html b/progress.html
index 52f3bc4..c517f51 100644
--- a/progress.html
+++ b/progress.html
@@ -206,10 +206,7 @@ document.getElementById('rectangle').addEventListener('click',function(){
     
     
 
-
-
-    
+    
     
     
     
diff --git a/scrollProperty.html b/scrollProperty.html
index d17f6d2..9d61a44 100644
--- a/scrollProperty.html
+++ b/scrollProperty.html
@@ -205,8 +205,7 @@ KUTE.to('#myElement',{scroll: 0 }).start()
   
   
 
-  
+  
   
 
   
diff --git a/shadowProperties.html b/shadowProperties.html
index 3a09b6a..056475f 100644
--- a/shadowProperties.html
+++ b/shadowProperties.html
@@ -179,9 +179,8 @@ var myTSTween2 = KUTE.fromTo(
     
 
 
-    
-    
+  
+  
 
   
   
diff --git a/src/kute-base.js b/src/kute-base.js
index 484b17e..51535fc 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -101,14 +101,11 @@
 
   var onComplete = {};
 
-  var supportedProperties = {};
-
   var Objects = {
     defaultOptions: defaultOptions,
     linkProperty: linkProperty,
     onStart: onStart,
     onComplete: onComplete,
-    supportedProperties: supportedProperties
   };
 
   var Util = {};
@@ -163,6 +160,8 @@
 
   function removeAll () { Tweens.length = 0; }
 
+  var supportedProperties = {};
+
   function linkInterpolation() {
     var this$1 = this;
     var loop = function ( component ) {
@@ -209,7 +208,7 @@
       if (multi){
         requestedElem = el instanceof HTMLCollection
                      || el instanceof NodeList
-                     || el instanceof Array && el[0] instanceof Element
+                     || el instanceof Array && el.every(function (x) { return x instanceof Element; })
                       ? el : document.querySelectorAll(el);
       } else {
         requestedElem = el instanceof Element
@@ -222,16 +221,12 @@
     }
   }
 
-  var crossCheck = {};
-
   var AnimationBase = function AnimationBase(Component){
-    this.Component = Component;
-    return this.setComponent()
+    return this.setComponent(Component)
   };
-  AnimationBase.prototype.setComponent = function setComponent (){
-    var Component = this.Component;
+  AnimationBase.prototype.setComponent = function setComponent (Component){
     var ComponentName = Component.component;
-    var Functions = { onStart: onStart, onComplete: onComplete, crossCheck: crossCheck };
+    var Functions = { onStart: onStart, onComplete: onComplete };
     var Category = Component.category;
     var Property = Component.property;
     supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property;
@@ -242,8 +237,8 @@
     }
     if (Component.functions) {
       for (var fn in Functions) {
-        if (fn in Component.functions && ['onStart','onComplete'].includes(fn)) {
-          if (typeof (Component.functions[fn]) === 'function' ) {
+        if (fn in Component.functions) {
+          if ( typeof (Component.functions[fn]) === 'function') {
             !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
             !Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn]);
           } else {
@@ -257,8 +252,15 @@
     }
     if (Component.Interpolate) {
       for (var fn$1 in Component.Interpolate) {
-        if (!Interpolate[fn$1]) {
-          Interpolate[fn$1] = Component.Interpolate[fn$1];
+        var compIntObj = Component.Interpolate[fn$1];
+        if ( typeof(compIntObj) === 'function' && !Interpolate[fn$1] ) {
+          Interpolate[fn$1] = compIntObj;
+        } else {
+          for ( var sfn in compIntObj ) {
+            if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn$1] ) {
+              Interpolate[fn$1] = compIntObj[sfn];
+            }
+          }
         }
       }
       linkProperty[ComponentName] = Component.Interpolate;
@@ -341,6 +343,14 @@
     this._startFired = false;
     stop.call(this);
   };
+  TweenBase.prototype.chain = function chain (args) {
+    this._chain = [];
+    this._chain = args.length ? args : this._chain.concat(args);
+    return this;
+  };
+  TweenBase.prototype.stopChainedTweens = function stopChainedTweens () {
+    this._chain && this._chain.length && this._chain.map(function (tw){ return tw.stop(); });
+  };
   TweenBase.prototype.update = function update (time) {
     time = time !== undefined ? time : KUTE.Time();
     var elapsed, progress;
@@ -360,6 +370,9 @@
       }
       this.playing = false;
       this.close();
+      if (this._chain !== undefined && this._chain.length){
+        this._chain.map(function (tw){ return tw.start(); });
+      }
       return false;
     }
     return true;
@@ -373,73 +386,49 @@
     return new TC(selector(element), startObject, endObject, optionsObj)
   }
 
-  function perspective(a, b, u, v) {
-    return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
-  }
-  function translate3d(a, b, u, v) {
-    var translateArray = [];
-    for (var ax=0; ax<3; ax++){
-      translateArray[ax] = ( a[ax]||b[ax] ? ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 : 0 ) + u;
-    }
-    return ("translate3d(" + (translateArray.join(',')) + ")");
-  }
-  function rotate3d(a, b, u, v) {
-    var rotateStr = '';
-    rotateStr += a[0]||b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
-    rotateStr += a[1]||b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
-    rotateStr += a[2]||b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0 ) / 1000) + u + ")") : '';
-    return rotateStr
-  }
-  function translate(a, b, u, v) {
-    var translateArray = [];
-    translateArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
-    translateArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0';
-    return ("translate(" + (translateArray.join(',')) + ")");
-  }
-  function rotate(a, b, u, v) {
-    return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")")
-  }
-  function skew(a, b, u, v) {
-    var skewArray = [];
-    skewArray[0] = ( a[0]===b[0] ? b[0] : ( (a[0] + ( b[0] - a[0] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
-    skewArray[1] = a[1]||b[1] ? (( a[1]===b[1] ? b[1] : ( (a[1] + ( b[1] - a[1] ) * v ) * 1000 >> 0 ) / 1000 ) + u) : '0';
-    return ("skew(" + (skewArray.join(',')) + ")");
-  }
-  function scale (a, b, v) {
-    return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")");
-  }
-  function onStartTransform(tweenProp){
-    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
-      KUTE[tweenProp] = function (elem, a, b, v) {
-        elem.style[tweenProp] =
-            (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '')
-          + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
-          + (a.translate ? translate(a.translate,b.translate,'px',v):'')
-          + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
-          + (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
-          + (a.skew ? skew(a.skew,b.skew,'deg',v):'')
-          + (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
-      };
-    }
-  }
-  var supportedTransformProperties = [
-    'perspective',
-    'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
-    'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
-    'skewX', 'skewY', 'skew',
-    'scale'
-  ];
-  var baseTransformOps = {
-    component: 'transformFunctions',
+  var matrixComponent = 'transformMatrix';
+  var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
+                   : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
+                   : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
+                   : typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
+                   : null;
+  var onStartTransform = {
+    transform : function(tweenProp) {
+      if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+        KUTE[tweenProp] = function (elem, a, b, v) {
+          var matrix = new CSS3Matrix(), transformObject = {};
+          for ( var p in b ) {
+            transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v);
+          }
+          transformObject.perspective && (matrix.m34 = -1/transformObject.perspective);
+          matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix;
+          matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix;
+          if (transformObject.skew) {
+            matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix;
+            matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix;
+          }
+          matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix;
+          elem.style[tweenProp] = matrix.toString();
+        };
+      }
+    },
+    CSS3Matrix: function(prop) {
+      if (this.valuesEnd.transform){
+        !KUTE[prop] && (KUTE[prop] = CSS3Matrix);
+      }
+    },
+  };
+  var baseMatrixTransform = {
+    component: matrixComponent,
     property: 'transform',
-    subProperties: supportedTransformProperties,
     functions: {onStart: onStartTransform},
     Interpolate: {
-      perspective: perspective,
-      translate3d: translate3d,
-      rotate3d: rotate3d,
-      translate: translate, rotate: rotate, scale: scale, skew: skew
-    },
+      perspective: numbers,
+      translate3d: arrays,
+      rotate3d: arrays,
+      skew: arrays,
+      scale3d: arrays
+    }
   };
 
   function boxModelOnStart(tweenProp){
@@ -452,10 +441,9 @@
   var baseBoxProps = ['top','left','width','height'];
   var baseBoxOnStart = {};
   baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
-  var baseBoxModelOps = {
-    component: 'boxModelProps',
+  var baseBoxModel = {
+    component: 'baseBoxModel',
     category: 'boxModel',
-    properties: baseBoxProps,
     Interpolate: {numbers: numbers},
     functions: {onStart: baseBoxOnStart}
   };
@@ -467,23 +455,22 @@
       };
     }
   }
-  var baseOpacityOps = {
-    component: 'opacityProperty',
+  var baseOpacity = {
+    component: 'baseOpacity',
     property: 'opacity',
     Interpolate: {numbers: numbers},
     functions: {onStart: onStartOpacity}
   };
 
-  var BaseTransform = new AnimationBase(baseTransformOps);
-  var BaseBoxModel = new AnimationBase(baseBoxModelOps);
-  var BaseOpacity = new AnimationBase(baseOpacityOps);
+  var Transform = new AnimationBase(baseMatrixTransform);
+  var BoxModel = new AnimationBase(baseBoxModel);
+  var Opacity = new AnimationBase(baseOpacity);
   var indexBase = {
     Animation: AnimationBase,
     Components: {
-      BaseTransform: BaseTransform,
-      BaseBoxModel: BaseBoxModel,
-      BaseScroll: BaseScroll,
-      BaseOpacity: BaseOpacity,
+      Transform: Transform,
+      BoxModel: BoxModel,
+      Opacity: Opacity,
     },
     TweenBase: TweenBase,
     fromTo: fromTo,
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index 8bd9b41..f1b1b6b 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Base v2.0.3 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}var i={numbers:r,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],i=0,o=e.length;i>0)/1e3;return r}},o={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,u=function(t){for(var n=0;n1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},I.Tween=b;var O=I.Tween;function x(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function B(t,e,n,r){for(var i=[],o=0;o<3;o++)i[o]=(t[o]||e[o]?(1e3*(t[o]+(e[o]-t[o])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function U(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function j(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function M(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function q(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}function A(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}var F={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],functions:{onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?x(n.perspective,r.perspective,"px",i):"")+(n.translate3d?B(n.translate3d,r.translate3d,"px",i):"")+(n.translate?j(n.translate,r.translate,"px",i):"")+(n.rotate3d?U(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?M(n.rotate,r.rotate,"deg",i):"")+(n.skew?q(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?A(n.scale,r.scale,i):"")})}},Interpolate:{perspective:x,translate3d:B,rotate3d:U,translate:j,rotate:M,scale:A,skew:q}};function P(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(o>.99||o<.01?(10*r(n,i,o)>>0)/10:r(n,i,o)>>0)+"px"})}var X=["top","left","width","height"],Y={};X.map((function(t){return Y[t]=P}));var K={component:"boxModelProps",category:"boxModel",properties:X,Interpolate:{numbers:r},functions:{onStart:Y}};var Q={component:"opacityProperty",property:"opacity",Interpolate:{numbers:r},functions:{onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(1e3*r(n,i,o)>>0)/1e3})}}},Z=new C(F),L=new C(K),H=new C(Q);return{Animation:C,Components:{BaseTransform:Z,BaseBoxModel:L,BaseScroll:BaseScroll,BaseOpacity:H},TweenBase:b,fromTo:function(t,e,n,r){return r=r||{},new O(S(t),e,n,r)},Objects:m,Easing:g,Util:y,Render:c,Interpolate:i,Internals:E,Selector:S,Version:"2.0.3"}}));
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function i(t,n,e){return(t=+t)+(n-=t)*e}function r(t,n,e){for(var i=[],r=0,o=n.length;r>0)/1e3;return i}var o={numbers:i,units:function(t,n,e,i){return(t=+t)+(n-=t)*i+e},arrays:r},a={},s={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?s.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(s.now=self.performance.now.bind(self.performance));var u=0,f=function(t){for(var e=0;e1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},O.Tween=b;var I=O.Tween;var k="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,x={component:"transformMatrix",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,o,a){var s=new k,u={};for(var f in o)u[f]="perspective"===f?i(e[f],o[f],a):r(e[f],o[f],a);u.perspective&&(s.m34=-1/u.perspective),s=u.translate3d?s.translate(u.translate3d[0],u.translate3d[1],u.translate3d[2]):s,s=u.rotate3d?s.rotate(u.rotate3d[0],u.rotate3d[1],u.rotate3d[2]):s,u.skew&&(s=u.skew[0]?s.skewX(u.skew[0]):s,s=u.skew[1]?s.skewY(u.skew[1]):s),s=u.scale3d?s.scale(u.scale3d[0],u.scale3d[1],u.scale3d[2]):s,t.style[n]=s.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=k)}}},Interpolate:{perspective:i,translate3d:r,rotate3d:r,skew:r,scale3d:r}};function U(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,r,o){t.style[n]=(o>.99||o<.01?(10*i(e,r,o)>>0)/10:i(e,r,o)>>0)+"px"})}var q={};["top","left","width","height"].map((function(t){return q[t]=U}));var A={component:"baseBoxModel",category:"boxModel",Interpolate:{numbers:i},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:i},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,r,o){t.style[n]=(1e3*i(e,r,o)>>0)/1e3})}}},F=new E(x),j=new E(A),K=new E(B);return{Animation:E,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:b,fromTo:function(t,n,e,i){return i=i||{},new I(M(t),n,e,i)},Objects:y,Easing:g,Util:m,Render:l,Interpolate:o,Internals:C,Selector:M,Version:"2.0.3"}}));
diff --git a/src/kute-extra.js b/src/kute-extra.js
index 89ca9c1..af1177a 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -361,7 +361,7 @@
       if (multi){
         requestedElem = el instanceof HTMLCollection
                      || el instanceof NodeList
-                     || el instanceof Array && el[0] instanceof Element
+                     || el instanceof Array && el.every(function (x) { return x instanceof Element; })
                       ? el : document.querySelectorAll(el);
       } else {
         requestedElem = el instanceof Element
@@ -444,6 +444,14 @@
     this._startFired = false;
     stop.call(this);
   };
+  TweenBase.prototype.chain = function chain (args) {
+    this._chain = [];
+    this._chain = args.length ? args : this._chain.concat(args);
+    return this;
+  };
+  TweenBase.prototype.stopChainedTweens = function stopChainedTweens () {
+    this._chain && this._chain.length && this._chain.map(function (tw){ return tw.stop(); });
+  };
   TweenBase.prototype.update = function update (time) {
     time = time !== undefined ? time : KUTE.Time();
     var elapsed, progress;
@@ -463,6 +471,9 @@
       }
       this.playing = false;
       this.close();
+      if (this._chain !== undefined && this._chain.length){
+        this._chain.map(function (tw){ return tw.start(); });
+      }
       return false;
     }
     return true;
@@ -578,14 +589,6 @@
           this.valuesStart[reverseProp] = this.valuesRepeat[reverseProp];
         }
     };
-    Tween.prototype.chain = function chain (args) {
-      this._chain = [];
-      this._chain = args.length ? args : this._chain.concat(args);
-      return this;
-    };
-    Tween.prototype.stopChainedTweens = function stopChainedTweens () {
-      this._chain && this._chain.length && this._chain.map(function (tw){ return tw.stop(); });
-    };
     Tween.prototype.update = function update (time) {
       time = time !== undefined ? time : KUTE.Time();
       var elapsed, progress;
@@ -642,7 +645,7 @@
     };
     TweenExtra.prototype.getTotalDuration = function getTotalDuration (){
     };
-    TweenExtra.prototype.callback = function callback (name,fn){
+    TweenExtra.prototype.on = function on (name,fn){
       if ( ['start','stop','update','complete','pause','resume'].indexOf(name) >-1 ) {
         this[("_on" + (name.charAt(0).toUpperCase() + name.slice(1)))] = fn;
       }
@@ -962,6 +965,14 @@
     return { v: intValue, u: theUnit };
   }
 
+  function onStartBgPos(prop){
+    if ( this.valuesEnd[prop] && !KUTE[prop]) {
+      KUTE[prop] = function (elem, a, b, v) {
+        elem.style[prop] = ((numbers(a[0],b[0],v)*100>>0)/100) + "%  " + (((numbers(a[1],b[1],v)*100>>0)/100)) + "%";
+      };
+    }
+  }
+
   function getBgPos(prop){
     return getStyleForProperty(this.element,prop) || defaultValues[prop];
   }
@@ -977,31 +988,21 @@
       return [ trueDimension(posxy[0]).v, trueDimension(posxy[1]).v ];
     }
   }
-  function onStartBgPos(prop){
-    if ( this.valuesEnd[prop] && !KUTE[prop]) {
-      KUTE[prop] = function (elem, a, b, v) {
-        elem.style[prop] = ((numbers(a[0],b[0],v)*100>>0)/100) + "%  " + (((numbers(a[1],b[1],v)*100>>0)/100)) + "%";
-      };
-    }
-  }
   var bgPositionFunctions = {
     prepareStart: getBgPos,
     prepareProperty: prepareBgPos,
     onStart: onStartBgPos
   };
-  var bgPosOps = {
-    component: 'BgPositionProp',
+  var BackgroundPosition = {
+    component: 'backgroundPositionProp',
     property: 'backgroundPosition',
     defaultValue: [50,50],
     Interpolate: {numbers: numbers},
     functions: bgPositionFunctions,
     Util: {trueDimension: trueDimension}
   };
-  Components.BackgroundPositionProperty = bgPosOps;
+  Components.BackgroundPosition = BackgroundPosition;
 
-  var radiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'];
-  var radiusValues = {};
-  radiusProps.map(function (x) { return radiusValues[x] = 0; });
   function radiusOnStartFn(tweenProp){
     if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
       KUTE[tweenProp] = function (elem, a, b, v) {
@@ -1009,6 +1010,10 @@
       };
     }
   }
+
+  var radiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'];
+  var radiusValues = {};
+  radiusProps.map(function (x) { return radiusValues[x] = 0; });
   var radiusOnStart = {};
   radiusProps.forEach(function (tweenProp) {
     radiusOnStart[tweenProp] = radiusOnStartFn;
@@ -1024,8 +1029,8 @@
     prepareProperty: prepareRadius,
     onStart: radiusOnStart
   };
-  var radiusOps = {
-    component: 'borderRadiusProps',
+  var BorderRadius = {
+    component: 'borderRadiusProperties',
     category: 'borderRadius',
     properties: radiusProps,
     defaultValues: radiusValues,
@@ -1033,14 +1038,8 @@
     functions: radiusFunctions,
     Util: {trueDimension: trueDimension}
   };
-  Components.BorderRadiusProperties = radiusOps;
+  Components.BorderRadiusProperties = BorderRadius;
 
-  var boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
-                            'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
-                            'margin', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
-                            'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'];
-  var boxModelValues = {};
-  boxModelProperties.map(function (x) { return boxModelValues[x] = 0; });
   function boxModelOnStart(tweenProp){
     if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
       KUTE[tweenProp] = function (elem, a, b, v) {
@@ -1048,6 +1047,23 @@
       };
     }
   }
+  var baseBoxProps = ['top','left','width','height'];
+  var baseBoxOnStart = {};
+  baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
+  var baseBoxModel = {
+    component: 'baseBoxModel',
+    category: 'boxModel',
+    Interpolate: {numbers: numbers},
+    functions: {onStart: baseBoxOnStart}
+  };
+  Components.BoxModelProperties = baseBoxModel;
+
+  var boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
+                            'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
+                            'margin', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
+                            'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'];
+  var boxModelValues = {};
+  boxModelProperties.map(function (x) { return boxModelValues[x] = 0; });
   function getBoxModel(tweenProp){
     return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
   }
@@ -1062,15 +1078,28 @@
     prepareProperty: prepareBoxModel,
     onStart: boxPropsOnStart
   };
-  var boxModelOps = {
-    component: 'boxModelProps',
+  var boxModel = {
+    component: 'boxModelProperties',
     category: 'boxModel',
     properties: boxModelProperties,
     defaultValues: boxModelValues,
     Interpolate: {numbers: numbers},
     functions: boxModelFunctions
   };
-  Components.BoxModelProperties = boxModelOps;
+  Components.BoxModelProperties = boxModel;
+
+  function onStartClip(tweenProp) {
+    if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        var h = 0, cl = [];
+        for (h;h<4;h++){
+          var c1 = a[h].v, c2 = b[h].v, cu = b[h].u || 'px';
+          cl[h] = ((numbers(c1,c2,v)*100 >> 0)/100) + cu;
+        }
+        elem.style.clip = "rect(" + cl + ")";
+      };
+    }
+  }
 
   function getClip(tweenProp,v){
     var currentClip = getStyleForProperty(this.element,tweenProp),
@@ -1087,24 +1116,12 @@
       return [ trueDimension(clipValue[0]),  trueDimension(clipValue[1]), trueDimension(clipValue[2]),  trueDimension(clipValue[3]) ];
     }
   }
-  function onStartClip(tweenProp) {
-    if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
-      KUTE[tweenProp] = function (elem, a, b, v) {
-        var h = 0, cl = [];
-        for (h;h<4;h++){
-          var c1 = a[h].v, c2 = b[h].v, cu = b[h].u || 'px';
-          cl[h] = ((numbers(c1,c2,v)*100 >> 0)/100) + cu;
-        }
-        elem.style.clip = "rect(" + cl + ")";
-      };
-    }
-  }
   var clipFunctions = {
     prepareStart: getClip,
     prepareProperty: prepareClip,
     onStart: onStartClip
   };
-  var clipOps = {
+   var clipProperty = {
     component: 'clipProperty',
     property: 'clip',
     defaultValue: [0,0,0,0],
@@ -1112,7 +1129,7 @@
     functions: clipFunctions,
     Util: {trueDimension: trueDimension}
   };
-  Components.ClipProperty = clipOps;
+  Components.ClipProperty = clipProperty;
 
   function hexToRGB (hex) {
     var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -1155,11 +1172,6 @@
     for (c in b) { _c[c] = c !== 'a' ? (numbers(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (numbers(a[c],b[c],v) * 100 >> 0 )/100 : null; }
     return !_c.a ? rgb + _c.r + cm + _c.g + cm + _c.b + ep : rgba + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
   }
-  var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
-  var defaultColors = {};
-  supportedColors.forEach(function (tweenProp) {
-    defaultColors[tweenProp] = '#000';
-  });
   function onStartColors(tweenProp){
     if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
       KUTE[tweenProp] = function (elem, a, b, v) {
@@ -1167,6 +1179,12 @@
       };
     }
   }
+
+  var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
+  var defaultColors = {};
+  supportedColors.forEach(function (tweenProp) {
+    defaultColors[tweenProp] = '#000';
+  });
   var colorsOnStart = {};
   supportedColors.map(function (x) { return colorsOnStart[x] = onStartColors; });
   function getColor(prop,value) {
@@ -1175,25 +1193,42 @@
   function prepareColor(prop,value) {
     return trueColor(value);
   }
-  var colorsFunctions = {
+  var colorFunctions = {
     prepareStart: getColor,
     prepareProperty: prepareColor,
     onStart: colorsOnStart
   };
-  var colorsOps = {
-    component: 'colorProps',
+  var colorProperties = {
+    component: 'colorProperties',
     category: 'colors',
     properties: supportedColors,
     defaultValues: defaultColors,
     Interpolate: {numbers: numbers,colors: colors},
-    functions: colorsFunctions,
+    functions: colorFunctions,
     Util: {trueColor: trueColor}
   };
-  Components.ColorProperties = colorsOps;
+  Components.ColorProperties = colorProperties;
+
+  var attributes = {};
+  var onStartAttr = {
+    attr : function(tweenProp){
+      if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+        KUTE[tweenProp] = function (elem, vS, vE, v) {
+          for ( var oneAttr in vE ){
+            KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
+          }
+        };
+      }
+    },
+    attributes : function(tweenProp){
+      if (!KUTE[tweenProp] && this.valuesEnd.attr) {
+        KUTE[tweenProp] = attributes;
+      }
+    }
+  };
 
   var ComponentName = 'htmlAttributes';
   var svgColors = ['fill','stroke','stop-color'];
-  var attributes = {};
   function replaceUppercase (a) { return a.replace(/[A-Z]/g, "-$&").toLowerCase(); }
   function getAttr(tweenProp,value){
     var attrStartValues = {};
@@ -1246,28 +1281,12 @@
     }
     return attributesObject;
   }
-  var onStartAttr = {
-    attr : function(tweenProp){
-      if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
-        KUTE[tweenProp] = function (elem, vS, vE, v) {
-          for ( var oneAttr in vE ){
-            KUTE.attributes[oneAttr](elem,oneAttr,vS[oneAttr],vE[oneAttr],v);
-          }
-        };
-      }
-    },
-    attributes : function(tweenProp){
-      if (!KUTE[tweenProp] && this.valuesEnd.attr) {
-        KUTE[tweenProp] = attributes;
-      }
-    }
-  };
   var attrFunctions = {
     prepareStart: getAttr,
     prepareProperty: prepareAttr,
     onStart: onStartAttr
   };
-  var attrOps = {
+  var htmlAttributes = {
     component: ComponentName,
     property: 'attr',
     subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'],
@@ -1276,7 +1295,7 @@
     functions: attrFunctions,
     Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension }
   };
-  Components.HTMLAttributes = attrOps;
+  Components.HTMLAttributes = htmlAttributes;
 
   function dropShadow(a,b,v){
     var params = [], unit = 'px';
@@ -1285,6 +1304,25 @@
     }
     return ("drop-shadow(" + (params.concat( colors(a[3],b[3],v) ).join(' ')) + ")")
   }
+  function onStartFilter(tweenProp) {
+    if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        a.dropShadow||b.dropShadow && console.log(dropShadow(a.dropShadow,b.dropShadow,v));
+        elem.style[tweenProp] = (b.url                      ? ("url(" + (b.url) + ")") : '')
+                              + (a.opacity||b.opacity       ? ("opacity(" + (((numbers(a.opacity,b.opacity,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.blur||b.blur             ? ("blur(" + (((numbers(a.blur,b.blur,v) * 100)>>0)/100) + "em)") : '')
+                              + (a.saturate||b.saturate     ? ("saturate(" + (((numbers(a.saturate,b.saturate,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.invert||b.invert         ? ("invert(" + (((numbers(a.invert,b.invert,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.grayscale||b.grayscale   ? ("grayscale(" + (((numbers(a.grayscale,b.grayscale,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.hueRotate||b.hueRotate   ? ("hue-rotate(" + (((numbers(a.hueRotate,b.hueRotate,v) * 100)>>0)/100) + "deg)") : '')
+                              + (a.sepia||b.sepia           ? ("sepia(" + (((numbers(a.sepia,b.sepia,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.brightness||b.brightness ? ("brightness(" + (((numbers(a.brightness,b.brightness,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.contrast||b.contrast     ? ("contrast(" + (((numbers(a.contrast,b.contrast,v) * 100)>>0)/100) + "%)") : '')
+                              + (a.dropShadow||b.dropShadow ? dropShadow(a.dropShadow,b.dropShadow,v) : '');
+      };
+    }
+  }
+
   function replaceDashNamespace(str){
     return str.replace('-r','R').replace('-s','S')
   }
@@ -1348,24 +1386,6 @@
     }
     return filterObject;
   }
-  function onStartFilter(tweenProp) {
-    if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
-      KUTE[tweenProp] = function (elem, a, b, v) {
-        a.dropShadow||b.dropShadow && console.log(dropShadow(a.dropShadow,b.dropShadow,v));
-        elem.style[tweenProp] = (b.url                      ? ("url(" + (b.url) + ")") : '')
-                              + (a.opacity||b.opacity       ? ("opacity(" + (((numbers(a.opacity,b.opacity,v) * 100)>>0)/100) + "%)") : '')
-                              + (a.blur||b.blur             ? ("blur(" + (((numbers(a.blur,b.blur,v) * 100)>>0)/100) + "em)") : '')
-                              + (a.saturate||b.saturate     ? ("saturate(" + (((numbers(a.saturate,b.saturate,v) * 100)>>0)/100) + "%)") : '')
-                              + (a.invert||b.invert         ? ("invert(" + (((numbers(a.invert,b.invert,v) * 100)>>0)/100) + "%)") : '')
-                              + (a.grayscale||b.grayscale   ? ("grayscale(" + (((numbers(a.grayscale,b.grayscale,v) * 100)>>0)/100) + "%)") : '')
-                              + (a.hueRotate||b.hueRotate   ? ("hue-rotate(" + (((numbers(a.hueRotate,b.hueRotate,v) * 100)>>0)/100) + "deg)") : '')
-                              + (a.sepia||b.sepia           ? ("sepia(" + (((numbers(a.sepia,b.sepia,v) * 100)>>0)/100) + "%)") : '')
-                              + (a.brightness||b.brightness ? ("brightness(" + (((numbers(a.brightness,b.brightness,v) * 100)>>0)/100) + "%)") : '')
-                              + (a.contrast||b.contrast     ? ("contrast(" + (((numbers(a.contrast,b.contrast,v) * 100)>>0)/100) + "%)") : '')
-                              + (a.dropShadow||b.dropShadow ? dropShadow(a.dropShadow,b.dropShadow,v) : '');
-      };
-    }
-  }
   function crossCheckFilter(tweenProp){
     if ( this.valuesEnd[tweenProp] ) {
       for (var fn in this.valuesStart[tweenProp]){
@@ -1381,7 +1401,7 @@
     onStart: onStartFilter,
     crossCheck: crossCheckFilter
   };
-  var filterOps = {
+  var filterEffects = {
     component: 'filterEffects',
     property: 'filter',
     defaultValue: {opacity: 100, blur: 0, saturate: 100, grayscale: 0, brightness: 100, contrast: 100, sepia: 0, invert: 0, hueRotate:0, dropShadow: [0,0,0,{r:0,g:0,b:0}], url:''},
@@ -1400,14 +1420,8 @@
     functions: filterFunctions,
     Util: {parseDropShadow: parseDropShadow,parseFilterString: parseFilterString,replaceDashNamespace: replaceDashNamespace,trueColor: trueColor}
   };
-  Components.FilterEffects = filterOps;
+  Components.FilterEffects = filterEffects;
 
-  function getOpacity(tweenProp){
-    return getStyleForProperty(this.element,tweenProp)
-  }
-  function prepareOpacity(tweenProp,value){
-    return parseFloat(value);
-  }
   function onStartOpacity(tweenProp){
     if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
       KUTE[tweenProp] = function (elem, a, b, v) {
@@ -1415,27 +1429,50 @@
       };
     }
   }
+
+  function getOpacity(tweenProp){
+    return getStyleForProperty(this.element,tweenProp)
+  }
+  function prepareOpacity(tweenProp,value){
+    return parseFloat(value);
+  }
   var opacityFunctions = {
     prepareStart: getOpacity,
     prepareProperty: prepareOpacity,
     onStart: onStartOpacity
   };
-  var opacityOps = {
+  var opacityProperty = {
     component: 'opacityProperty',
     property: 'opacity',
     defaultValue: 1,
     Interpolate: {numbers: numbers},
     functions: opacityFunctions
   };
-  Components.OpacityProperty = opacityOps;
+  Components.OpacityProperty = opacityProperty;
 
-  var percent = function (v, l) { return parseFloat(v) / 100 * l; };
-  var getRectLength = function (el) {
+  function onStartDraw(tweenProp){
+    if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem,a,b,v) {
+        var pathLength = (a.l*100>>0)/100,
+          start = (numbers(a.s,b.s,v)*100>>0)/100,
+          end = (numbers(a.e,b.e,v)*100>>0)/100,
+          offset = 0 - start,
+          dashOne = end+offset;
+        elem.style.strokeDashoffset = offset + "px";
+        elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
+      };
+    }
+  }
+
+  function percent (v,l) {
+    return parseFloat(v) / 100 * l
+  }
+  function getRectLength(el) {
     var w = el.getAttribute('width'),
         h = el.getAttribute('height');
     return (w*2)+(h*2);
-  };
-  var getPolyLength = function (el) {
+  }
+  function getPolyLength(el) {
     var points = el.getAttribute('points').split(' ');
     var len = 0;
     if (points.length > 1) {
@@ -1459,23 +1496,23 @@
       len += el.tagName === 'polygon' ? dist(coord(points[0]), coord(points[points.length - 1])) : 0;
     }
     return len;
-  };
-  var getLineLength = function (el) {
+  }
+  function getLineLength(el) {
     var x1 = el.getAttribute('x1');
     var x2 = el.getAttribute('x2');
     var y1 = el.getAttribute('y1');
     var y2 = el.getAttribute('y2');
     return Math.sqrt(Math.pow( (x2 - x1), 2 )+Math.pow( (y2 - y1), 2 ));
-  };
-  var getCircleLength = function (el) {
+  }
+  function getCircleLength(el) {
     var r = el.getAttribute('r');
     return 2 * Math.PI * r;
-  };
-  var getEllipseLength = function (el) {
+  }
+  function getEllipseLength(el) {
     var rx = el.getAttribute('rx'), ry = el.getAttribute('ry'), len = 2*rx, wid = 2*ry;
     return ((Math.sqrt(.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2;
-  };
-  var getTotalLength = function (el) {
+  }
+  function getTotalLength(el) {
     if (/rect/.test(el.tagName)) {
       return getRectLength(el);
     } else if (/circle/.test(el.tagName)) {
@@ -1487,8 +1524,8 @@
     } else if (/line/.test(el.tagName)) {
       return getLineLength(el);
     }
-  };
-  var getDraw = function (e, v) {
+  }
+  function getDraw(e,v) {
     var length = /path|glyph/.test(e.tagName) ? e.getTotalLength() : getTotalLength(e),
         start, end, d, o;
     if ( v instanceof Object ) {
@@ -1504,32 +1541,23 @@
       end = parseFloat(d[0]) + start || length;
     }
     return { s: start, e: end, l: length };
-  };
+  }
+  function resetDraw(elem) {
+    elem.style.strokeDashoffset = "";
+    elem.style.strokeDasharray = "";
+  }
   function getDrawValue(){
     return getDraw(this.element);
   }
   function prepareDraw(a,o){
     return getDraw(this.element,o);
   }
-  function onStartDraw(tweenProp){
-    if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
-      KUTE[tweenProp] = function (elem,a,b,v) {
-        var pathLength = (a.l*100>>0)/100,
-          start = (numbers(a.s,b.s,v)*100>>0)/100,
-          end = (numbers(a.e,b.e,v)*100>>0)/100,
-          offset = 0 - start,
-          dashOne = end+offset;
-        elem.style.strokeDashoffset = offset + "px";
-        elem.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + "px, " + pathLength + "px";
-      };
-    }
-  }
   var svgDrawFunctions = {
     prepareStart: getDrawValue,
     prepareProperty: prepareDraw,
     onStart: onStartDraw
   };
-  var svgDrawOps = {
+  var svgDraw = {
     component: 'svgDraw',
     property: 'draw',
     defaultValue: '0% 0%',
@@ -1542,11 +1570,38 @@
       getCircleLength: getCircleLength,
       getEllipseLength: getEllipseLength,
       getTotalLength: getTotalLength,
+      resetDraw: resetDraw,
       getDraw: getDraw,
       percent: percent
     }
   };
-  Components.SVGDraw = svgDrawOps;
+  Components.SVGDraw = svgDraw;
+
+  function toPathString(pathArray) {
+    var newPath = pathArray.map( function (c) {
+      if (typeof(c) === 'string') {
+        return c
+      } else {
+        var c0 = c.shift();
+        return c0 + c.join(',')
+      }
+    });
+    return newPath.join('');
+  }
+  function onStartCubicMorph(tweenProp){
+    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+      KUTE[tweenProp] = function(elem,a,b,v){
+        var curve = [], path1 = a.curve, path2 = b.curve;
+        for(var i=0, l=path2.length; i>0)/1000 );
+          }
+        }
+        elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) );
+      };
+    }
+  }
 
   var INVALID_INPUT = 'Invalid path value';
   function catmullRom2bezier(crp, z) {
@@ -2057,17 +2112,6 @@
         newPath = rotations[computedIndex];
     return newPath
   }
-  function toPathString(pathArray) {
-    var newPath = pathArray.map( function (c) {
-      if (typeof(c) === 'string') {
-        return c
-      } else {
-        var c0 = c.shift();
-        return c0 + c.join(',')
-      }
-    });
-    return newPath.join('');
-  }
   function getCubicMorph(tweenProp){
     return this.element.getAttribute('d');
   }
@@ -2105,27 +2149,13 @@
       }
     }
   }
-  function onStartCubicMorph(tweenProp){
-    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
-      KUTE[tweenProp] = function(elem,a,b,v){
-        var curve = [], path1 = a.curve, path2 = b.curve;
-        for(var i=0, l=path2.length; i>0)/1000 );
-          }
-        }
-        elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) );
-      };
-    }
-  }
   var svgCubicMorphFunctions = {
     prepareStart: getCubicMorph,
     prepareProperty: prepareCubicMorph,
     onStart: onStartCubicMorph,
     crossCheck: crossCheckCubicMorph
   };
-  var svgCubicMorphOps = {
+  var svgCubicMorph = {
     component: 'svgCubicMorph',
     property: 'path',
     defaultValue: [],
@@ -2138,7 +2168,38 @@
       getRotationSegments: getRotationSegments, reverseCurve: reverseCurve, getSegments: getSegments, createPath: createPath
     }
   };
-  Components.SVGCubicMorph = svgCubicMorphOps;
+  Components.SVGCubicMorph = svgCubicMorph;
+
+  function svgTransformOnStart (tweenProp){
+    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+      KUTE[tweenProp] = function (l, a, b, v) {
+        var x = 0;
+        var y = 0;
+        var tmp;
+        var deg = Math.PI/180;
+        var scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1;
+        var rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0;
+        var sin = Math.sin(rotate*deg);
+        var cos = Math.cos(rotate*deg);
+        var skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0;
+        var skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0;
+        var complex = rotate||skewX||skewY||scale!==1 || 0;
+        x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0;
+        x *= scale;y *= scale;
+        y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0;
+        tmp = cos*x - sin*y;
+        y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x;
+        x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0;
+        y += 'translate' in b ? numbers(a.translate[1],b.translate[1],v) : 0;
+        x += complex ? b.origin[0] : 0;y += complex ? b.origin[1] : 0;
+        l.setAttribute('transform', ( x||y ? (("translate(" + ((x*1000>>0)/1000) + (y ? (("," + ((y*1000>>0)/1000))) : '') + ")")) : '' )
+                                   +( rotate ? ("rotate(" + ((rotate*1000>>0)/1000) + ")") : '' )
+                                   +( skewX ? ("skewX(" + ((skewX*1000>>0)/1000) + ")") : '' )
+                                   +( skewY ? ("skewY(" + ((skewY*1000>>0)/1000) + ")") : '' )
+                                   +( scale !== 1 ? ("scale(" + ((scale*1000>>0)/1000) + ")") : '' ) );
+      };
+    }
+  }
 
   function parseStringOrigin (origin, ref) {
     var x = ref.x;
@@ -2182,36 +2243,6 @@
     }
     return svgTransformObject;
   }
-  function svgTransformOnStart (tweenProp){
-    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
-      KUTE[tweenProp] = function (l, a, b, v) {
-        var x = 0;
-        var y = 0;
-        var tmp;
-        var deg = Math.PI/180;
-        var scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1;
-        var rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0;
-        var sin = Math.sin(rotate*deg);
-        var cos = Math.cos(rotate*deg);
-        var skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0;
-        var skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0;
-        var complex = rotate||skewX||skewY||scale!==1 || 0;
-        x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0;
-        x *= scale;y *= scale;
-        y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0;
-        tmp = cos*x - sin*y;
-        y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x;
-        x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0;
-        y += 'translate' in b ? numbers(a.translate[1],b.translate[1],v) : 0;
-        x += complex ? b.origin[0] : 0;y += complex ? b.origin[1] : 0;
-        l.setAttribute('transform', ( x||y ? (("translate(" + ((x*1000>>0)/1000) + (y ? (("," + ((y*1000>>0)/1000))) : '') + ")")) : '' )
-                                   +( rotate ? ("rotate(" + ((rotate*1000>>0)/1000) + ")") : '' )
-                                   +( skewX ? ("skewX(" + ((skewX*1000>>0)/1000) + ")") : '' )
-                                   +( skewY ? ("skewY(" + ((skewY*1000>>0)/1000) + ")") : '' )
-                                   +( scale !== 1 ? ("scale(" + ((scale*1000>>0)/1000) + ")") : '' ) );
-      };
-    }
-  }
   function prepareSvgTransform(p,v){
     return parseTransformSVG.call(this,p,v);
   }
@@ -2254,7 +2285,7 @@
     onStart: svgTransformOnStart,
     crossCheck: svgTransformCrossCheck
   };
-  var svgTransformOps = {
+  var svgTransform = {
     component: 'svgTransformProperty',
     property: 'svgTransform',
     defaultOptions: {transformOrigin:'50% 50%'},
@@ -2263,7 +2294,7 @@
     functions: svgTransformFunctions,
     Util: { parseStringOrigin: parseStringOrigin, parseTransformString: parseTransformString, parseTransformSVG: parseTransformSVG }
   };
-  Components.SVGTransformProperty = svgTransformOps;
+  Components.SVGTransformProperty = svgTransform;
 
   function on (element, event, handler, options) {
     options = options || false;
@@ -2329,16 +2360,10 @@
       targets.st.style.pointerEvents = '';
     }
   }
-  function getScroll(){
-    this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
-    scrollIn.call(this);
-    return this.element === scrollContainer ? (window.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
-  }
-  function prepareScroll(prop,value){
-    return parseInt(value);
-  }
   function onStartScroll(tweenProp){
     if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+      this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
+      scrollIn.call(this);
       KUTE[tweenProp] = function (elem, a, b, v) {
         elem.scrollTop = (numbers(a,b,v))>>0;
       };
@@ -2347,21 +2372,44 @@
   function onCompleteScroll(tweenProp){
     scrollOut.call(this);
   }
+
+  function getScroll(){
+    this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element;
+    return this.element === scrollContainer ? (window.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
+  }
+  function prepareScroll(prop,value){
+    return parseInt(value);
+  }
   var scrollFunctions = {
     prepareStart: getScroll,
     prepareProperty: prepareScroll,
     onStart: onStartScroll,
     onComplete: onCompleteScroll
   };
-  var scrollOps = {
+  var scrollProperty = {
     component: 'scrollProperty',
     property: 'scroll',
     defaultValue: 0,
     Interpolate: {numbers: numbers},
     functions: scrollFunctions,
-    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, scrollContainer: scrollContainer, passiveHandler: passiveHandler, getScrollTargets: getScrollTargets }
+    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, getScrollTargets: getScrollTargets }
   };
-  Components.ScrollProperty = scrollOps;
+  Components.ScrollProperty = scrollProperty;
+
+  function onStartShadow(tweenProp) {
+    if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        var params = [], unit = 'px', sl = tweenProp === 'textShadow' ? 3 : 4,
+            colA = sl === 3 ? a[3] : a[4], colB = sl === 3 ? b[3] : b[4],
+            inset = a[5] && a[5] !== 'none' || b[5] && b[5] !== 'none' ? ' inset' : false;
+        for (var i=0; i> 0) / 1000) + unit );
+        }
+        elem.style[tweenProp] = inset ? colors(colA,colB,v) + params.join(' ') + inset
+                                      : colors(colA,colB,v) + params.join(' ');
+      };
+    }
+  }
 
   var shadowProps = ['boxShadow','textShadow'];
   function processShadowArray (shadow,tweenProp){
@@ -2400,20 +2448,6 @@
     }
     return value;
   }
-  function onStartShadow(tweenProp) {
-    if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
-      KUTE[tweenProp] = function (elem, a, b, v) {
-        var params = [], unit = 'px', sl = tweenProp === 'textShadow' ? 3 : 4,
-            colA = sl === 3 ? a[3] : a[4], colB = sl === 3 ? b[3] : b[4],
-            inset = a[5] && a[5] !== 'none' || b[5] && b[5] !== 'none' ? ' inset' : false;
-        for (var i=0; i> 0) / 1000) + unit );
-        }
-        elem.style[tweenProp] = inset ? colors(colA,colB,v) + params.join(' ') + inset
-                                      : colors(colA,colB,v) + params.join(' ');
-      };
-    }
-  }
   var shadowPropOnStart = {};
   shadowProps.map(function (x){ return shadowPropOnStart[x]=onStartShadow; });
   var shadowFunctions = {
@@ -2421,7 +2455,7 @@
     prepareProperty: prepareShadow,
     onStart: shadowPropOnStart
   };
-  var shadowOps = {
+  var shadowProperties = {
     component: 'shadowProperties',
     properties: shadowProps,
     defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px rgb(0,0,0)'},
@@ -2429,18 +2463,19 @@
     functions: shadowFunctions,
     Util: { processShadowArray: processShadowArray, trueColor: trueColor }
   };
-  Components.ShadowProperties = shadowOps;
+  Components.ShadowProperties = shadowProperties;
 
-  var textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing'];
-  var textOnStart = {};
   function textPropOnStart(tweenProp){
     if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
-      KUTE[tweenProp] = function (elem, a, b, v) {
+      KUTE[tweenProp] = function (elem,a,b,v) {
         elem.style[tweenProp] = units(a.v,b.v,b.u,v);
       };
     }
   }
-  textProperties.forEach(function (tweenProp) {
+
+  var textProps = ['fontSize','lineHeight','letterSpacing','wordSpacing'];
+  var textOnStart = {};
+  textProps.forEach(function (tweenProp) {
     textOnStart[tweenProp] = textPropOnStart;
   });
   function getTextProp(prop) {
@@ -2454,16 +2489,66 @@
     prepareProperty: prepareTextProp,
     onStart: textOnStart
   };
-  var textOps = {
+  var textProperties = {
     component: 'textProperties',
-    category: 'textProps',
-    properties: textProperties,
+    category: 'textProperties',
+    properties: textProps,
     defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},
     Interpolate: {units: units},
     functions: textPropFunctions,
     Util: {trueDimension: trueDimension}
   };
-  Components.TextProperties = textOps;
+  Components.TextProperties = textProperties;
+
+  var lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""),
+      upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),
+      nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""),
+      numeric = String("0123456789").split(""),
+      alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric),
+      allTypes = alphaNumeric.concat(nonAlpha);
+  var charSet = {
+    alpha: lowerCaseAlpha,
+    upper: upperCaseAlpha,
+    symbols: nonAlpha,
+    numeric: numeric,
+    alphanumeric: alphaNumeric,
+    all: allTypes,
+  };
+  var onStartWrite = {
+    text: function(tweenProp){
+      if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
+        var chars = this._textChars,
+            charsets = chars in charSet ? charSet[chars]
+                    : chars && chars.length ? chars
+                    : charSet[defaultOptions.textChars];
+        KUTE[tweenProp] = function(elem,a,b,v) {
+          var initialText = '',
+              endText = '',
+              firstLetterA = a.substring(0),
+              firstLetterB = b.substring(0),
+              pointer = charsets[(Math.random() * charsets.length)>>0];
+          if (a === ' ') {
+            endText         = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
+            elem.innerHTML = v < 1 ? ( ( endText + pointer  ) ) : (b === '' ? ' ' : b);
+          } else if (b === ' ') {
+            initialText     = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
+            elem.innerHTML = v < 1 ? ( ( initialText + pointer  ) ) : (b === '' ? ' ' : b);
+          } else {
+            initialText     = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
+            endText         = firstLetterB.substring(0,                   Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
+            elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
+          }
+        };
+      }
+    },
+    number: function(tweenProp) {
+      if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+        KUTE[tweenProp] = function (elem, a, b, v) {
+          elem.innerHTML = numbers(a, b, v)>>0;
+        };
+      }
+    }
+  };
 
   function wrapContentsSpan(el,classNAME){
     var textWriteWrapper;
@@ -2556,20 +2641,6 @@
     };
     return textTween
   }
-  var lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""),
-      upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),
-      nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""),
-      numeric = String("0123456789").split(""),
-      alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric),
-      allTypes = alphaNumeric.concat(nonAlpha);
-  var charSet = {
-    alpha: lowerCaseAlpha,
-    upper: upperCaseAlpha,
-    symbols: nonAlpha,
-    numeric: numeric,
-    alphanumeric: alphaNumeric,
-    all: allTypes,
-  };
   function getWrite(tweenProp,value){
     return this.element.innerHTML;
   }
@@ -2580,47 +2651,12 @@
       return value === '' ? ' ' : value
     }
   }
-  var onStartWrite = {
-    text: function(tweenProp){
-      if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
-        var chars = this._textChars,
-            charsets = chars in charSet ? charSet[chars]
-                    : chars && chars.length ? chars
-                    : charSet[defaultOptions.textChars];
-        KUTE[tweenProp] = function(elem,a,b,v) {
-          var initialText = '',
-              endText = '',
-              firstLetterA = a.substring(0),
-              firstLetterB = b.substring(0),
-              pointer = charsets[(Math.random() * charsets.length)>>0];
-          if (a === ' ') {
-            endText         = firstLetterB.substring(Math.min(v * firstLetterB.length, firstLetterB.length)>>0, 0 );
-            elem.innerHTML = v < 1 ? ( ( endText + pointer  ) ) : (b === '' ? ' ' : b);
-          } else if (b === ' ') {
-            initialText     = firstLetterA.substring(0, Math.min((1-v) * firstLetterA.length, firstLetterA.length)>>0 );
-            elem.innerHTML = v < 1 ? ( ( initialText + pointer  ) ) : (b === '' ? ' ' : b);
-          } else {
-            initialText     = firstLetterA.substring(firstLetterA.length, Math.min(v * firstLetterA.length, firstLetterA.length)>>0 );
-            endText         = firstLetterB.substring(0,                   Math.min(v * firstLetterB.length, firstLetterB.length)>>0 );
-            elem.innerHTML = v < 1 ? ( (endText + pointer + initialText) ) : (b === '' ? ' ' : b);
-          }
-        };
-      }
-    },
-    number: function(tweenProp) {
-      if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
-        KUTE[tweenProp] = function (elem, a, b, v) {
-          elem.innerHTML = numbers(a, b, v)>>0;
-        };
-      }
-    }
-  };
   var textWriteFunctions = {
     prepareStart: getWrite,
     prepareProperty: prepareText,
     onStart: onStartWrite
   };
-  var textWriteOps = {
+  var textWrite = {
     component: 'textWriteProperties',
     category: 'textWrite',
     properties: ['text','number'],
@@ -2630,18 +2666,45 @@
     functions: textWriteFunctions,
     Util: { charSet: charSet, createTextTweens: createTextTweens }
   };
-  Components.TextWriteProperties = textWriteOps;
+  Components.TextWriteProperties = textWrite;
 
-  var componentName = 'transformMatrix';
   var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
-                          : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
-                          : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
-                          : typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
-                          : null;
+                   : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
+                   : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
+                   : typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
+                   : null;
+  var onStartTransform = {
+    transform : function(tweenProp) {
+      if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+        KUTE[tweenProp] = function (elem, a, b, v) {
+          var matrix = new CSS3Matrix(), transformObject = {};
+          for ( var p in b ) {
+            transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v);
+          }
+          transformObject.perspective && (matrix.m34 = -1/transformObject.perspective);
+          matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix;
+          matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix;
+          if (transformObject.skew) {
+            matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix;
+            matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix;
+          }
+          matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix;
+          elem.style[tweenProp] = matrix.toString();
+        };
+      }
+    },
+    CSS3Matrix: function(prop) {
+      if (this.valuesEnd.transform){
+        !KUTE[prop] && (KUTE[prop] = CSS3Matrix);
+      }
+    },
+  };
+
+  var matrixComponent = 'transformMatrix';
   function getTransform(tweenProp, value){
     var transformObject = {};
-    if (this.element[componentName]) {
-      var currentValue = this.element[componentName];
+    if (this.element[matrixComponent]) {
+      var currentValue = this.element[matrixComponent];
       for (var vS in currentValue) {
         transformObject[vS] = currentValue[vS];
       }
@@ -2693,38 +2756,11 @@
       console.error(("KUTE.js - \"" + value + "\" is not valid/supported transform function"));
     }
   }
-  var onStartTransform = {
-    transform : function(tweenProp) {
-      if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
-        KUTE[tweenProp] = function (elem, a, b, v) {
-          var matrix = new CSS3Matrix();
-          var transformObject = {};
-          for ( var p in b ) {
-            transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v);
-          }
-          transformObject.perspective && (matrix.m34 = -1/transformObject.perspective);
-          matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix;
-          matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix;
-          if (transformObject.skew) {
-            matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix;
-            matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix;
-          }
-          matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix;
-          elem.style[tweenProp] = matrix.toString();
-        };
-      }
-    },
-    CSS3Matrix: function(prop) {
-      if (this.valuesEnd.transform){
-        !KUTE[prop] && (KUTE[prop] = CSS3Matrix);
-      }
-    },
-  };
   function onCompleteTransform(tweenProp){
     if (this.valuesEnd[tweenProp]) {
-      this.element[componentName] = {};
+      this.element[matrixComponent] = {};
       for (var tf in this.valuesEnd[tweenProp]){
-        this.element[componentName][tf] = this.valuesEnd[tweenProp][tf];
+        this.element[matrixComponent][tf] = this.valuesEnd[tweenProp][tf];
       }
     }
   }
@@ -2742,8 +2778,8 @@
     onComplete: onCompleteTransform,
     crossCheck: crossCheckTransform
   };
-  var matrixTransformOps = {
-    component: componentName,
+  var matrixTransform = {
+    component: matrixComponent,
     property: 'transform',
     defaultValue: {perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},
     functions: matrixFunctions,
@@ -2755,7 +2791,7 @@
       scale3d: arrays
     }
   };
-  Components.TransformMatrix = matrixTransformOps;
+  Components.TransformMatrix = matrixTransform;
 
   for (var component in Components) {
     var compOps = Components[component];
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index e76c248..6dccc28 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Extra v2.0.3 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}function i(t,e,n,r){return(t=+t)+(e-=t)*r+n}function a(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var s={numbers:r,units:i,arrays:a},o={},l={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?l.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(l.now=self.performance.now.bind(self.performance));var u=0,p=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}M.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(e,n,r,i){for(var a in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:M.processEasing(i.easing),this._duration=i.duration||g.duration,this._delay=i.delay||g.delay,i){var s="_"+a;s in this||(this[s]=i[a])}var l=this._easing.name;return o[l]||(o[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};R.prototype.start=function(e){if(E(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),o)if("function"==typeof o[n])o[n].call(this,n);else for(var r in o[n])o[n][r].call(this,r);C.call(this),this._startFired=!0}return!u&&p(),this},R.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in w)for(var e in w[t])w[t][e].call(this,e);this._startFired=!1,c.call(this)},R.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},V.Tween=R,g.repeat=0,g.repeatDelay=0,g.yoyo=!1,g.resetStart=!1;var H=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(O.call(this,i,"end"),this._resetStart?this.valuesStart=r:O.call(this,r,"start"),!this._resetStart)for(var a in b)for(var s in b[a])b[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||g.repeat,this._repeatDelay=o.repeatDelay||g.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||g.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,A.call(this),b)for(var r in b[n])b[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,E(this),!u&&p()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(_(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},n.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.callback=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var q=V.Tween,B=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in g)&&(g.offset=0),(r=r||{}).delay=r.delay||g.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||g.offset):r.delay,t instanceof Element?i.tweens.push(new q(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};B.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},B.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},B.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},B.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},B.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof B)e.chain(t.tweens);else{if(!(t instanceof q))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},B.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},B.prototype.removeTweens=function(){this.tweens=[]},B.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var D=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};D.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},D.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},D.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},D.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},D.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},D.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var X=function(t){try{t.component in d?console.error("KUTE.js - "+t.component+" already registered"):t.property in v?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};X.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:m,prepareStart:y,onStart:o,onComplete:w,crossCheck:b},r=t.category,i=t.property,a=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(d[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)v[i]=t.defaultValue,this.supports=i+" property";else if(t.defaultValues){for(var l in t.defaultValues)v[l]=t.defaultValues[l];this.supports=(a||i)+" "+(i||r)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)g[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][r||i]&&(n[p][e][r||i]=t.functions[p]);else for(var c in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][c]&&(n[p][e][c]=t.functions[p][c]);if(t.Interpolate){for(var h in t.Interpolate){var f=t.Interpolate[h];if("function"!=typeof f||s[h])for(var S in f)"function"!=typeof f[S]||s[h]||(s[h]=f[S]);else s[h]=f}x[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!M[T]&&(M[T]=t.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:m,prepareStart:y,onStart:o,onComplete:w,crossCheck:b},r=e.category,i=e.property,a=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=i+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(a||i)+" "+(i||r)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===a?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(r||i)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(r||i)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)s[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||s[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(i||r)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*r(n[1],i[1],a)>>0)/100+"%"})}},W={component:"BgPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:r},functions:Q,Util:{trueDimension:Y}};T.BackgroundPositionProperty=W;var K=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};function $(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=i(n.v,r.v,r.u,a)})}K.map((function(t){return G[t]=0}));var Z={};K.forEach((function(t){Z[t]=$}));var J={component:"borderRadiusProps",category:"borderRadius",properties:K,defaultValues:G,Interpolate:{units:i},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};T.BorderRadiusProperties=J;var tt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],et={};function nt(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(a>.99||a<.01?(10*r(n,i,a)>>0)/10:r(n,i,a)>>0)+"px"})}tt.map((function(t){return et[t]=0}));var rt={};tt.map((function(t){return rt[t]=nt}));var it={component:"boxModelProps",category:"boxModel",properties:tt,defaultValues:et,Interpolate:{numbers:r},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};T.BoxModelProperties=it;var at={prepareStart:function(t,e){var n=P(this.element,t),r=P(this.element,"width"),i=P(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,i){for(var a=0,s=[];a<4;a++){var o=e[a].v,l=n[a].v,u=n[a].u||"px";s[a]=(100*r(o,l,i)>>0)/100+u}t.style.clip="rect("+s+")"})}},st={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:r},functions:at,Util:{trueDimension:Y}};function ot(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function lt(t,e,n){var i,a={};for(i in e)a[i]="a"!==i?r(t[i],e[i],n)>>0||0:t[i]&&e[i]?(100*r(t[i],e[i],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}T.ClipProperty=st;var ut=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],pt={};function ct(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=lt(n,r,i)})}ut.forEach((function(t){pt[t]="#000"}));var ht={};ut.map((function(t){return ht[t]=ct}));var ft={component:"colorProps",category:"colors",properties:ut,defaultValues:pt,Interpolate:{numbers:r,colors:lt},functions:{prepareStart:function(t,e){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return ot(e)},onStart:ht},Util:{trueColor:ot}};T.ColorProperties=ft;var dt=["fill","stroke","stop-color"],vt={};function gt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var mt={prepareStart:function(t,e){var n={};for(var r in e){var i=gt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=dt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var i in e){var a=gt(i),s=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(dt.includes(a))o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,r,i){t.setAttribute(e,lt(n,r,i))})},n[a]=ot(e[i])||v.htmlAttributes[i];else if(null!==l&&s.test(l)){var u=Y(l).u||Y(e[i]).u,p=/%/.test(u)?"_percent":"_"+u;o.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,i,a){var s=e.replace(p,"");t.setAttribute(s,(1e3*r(n.v,i.v,a)>>0)/1e3+i.u)})},n[a+p]=Y(e[i])}else s.test(e[i])&&null!==l&&(null===l||s.test(l))||(o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in vt)&&(vt[e]=function(t,e,n,i,a){t.setAttribute(e,(1e3*r(n,i,a)>>0)/1e3)})},n[a]=parseFloat(e[i]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=vt)}}},yt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:r,colors:lt},functions:mt,Util:{replaceUppercase:gt,trueColor:ot,trueDimension:Y}};function bt(t,e,n){for(var i=[],a=0;a<3;a++)i[a]=(100*r(t[a],e[a],n)>>0)/100+"px";return"drop-shadow("+i.concat(lt(t[3],e[3],n)).join(" ")+")"}function wt(t){return t.replace("-r","R").replace("-s","S")}function xt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ot(e[3]),e}function St(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||i.blur?"blur("+(100*r(n.blur,i.blur,a)>>0)/100+"em)":"")+(n.saturate||i.saturate?"saturate("+(100*r(n.saturate,i.saturate,a)>>0)/100+"%)":"")+(n.invert||i.invert?"invert("+(100*r(n.invert,i.invert,a)>>0)/100+"%)":"")+(n.grayscale||i.grayscale?"grayscale("+(100*r(n.grayscale,i.grayscale,a)>>0)/100+"%)":"")+(n.hueRotate||i.hueRotate?"hue-rotate("+(100*r(n.hueRotate,i.hueRotate,a)>>0)/100+"deg)":"")+(n.sepia||i.sepia?"sepia("+(100*r(n.sepia,i.sepia,a)>>0)/100+"%)":"")+(n.brightness||i.brightness?"brightness("+(100*r(n.brightness,i.brightness,a)>>0)/100+"%)":"")+(n.contrast||i.contrast?"contrast("+(100*r(n.contrast,i.contrast,a)>>0)/100+"%)":"")+(n.dropShadow||i.dropShadow?bt(n.dropShadow,i.dropShadow,a):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},Tt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:r,blur:r,saturate:r,grayscale:r,brightness:r,contrast:r,sepia:r,invert:r,hueRotate:r,dropShadow:{numbers:r,colors:lt,dropShadow:bt}},functions:Mt,Util:{parseDropShadow:xt,parseFilterString:St,replaceDashNamespace:wt,trueColor:ot}};T.FilterEffects=Tt;var Et={prepareStart:function(t){return P(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(1e3*r(n,i,a)>>0)/1e3})}},_t={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:Et};T.OpacityProperty=_t;var Ct=function(t,e){return parseFloat(t)/100*e},kt=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},It=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*r(e.s,n.s,i)>>0)/100,o=(100*r(e.e,n.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},jt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},functions:Ft,Util:{getRectLength:kt,getPolyLength:It,getLineLength:Pt,getCircleLength:Ot,getEllipseLength:At,getTotalLength:Lt,getDraw:Ut,percent:Ct}};T.SVGDraw=jt;function Vt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Rt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Ht(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Nt(t){if(!(t=Ht(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Dt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],q=0,B=(m=[V,R,H].concat(m).join().split(",")).length;q7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Qt(t,e){for(var n=Nt(t),r=e&&Nt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function $t(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function Zt(t){var e=Kt(t),n=[];return e.map((function(t,r){n[r]=$t(e,r)})),n}function Jt(t,e){var n=Kt(t),r=Kt(e),i=n.length-1,a=[],s=[],o=Zt(t);return o.map((function(t,e){for(var o=0,l=Wt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===i?n.original:te(a))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Qt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Gt.call(this,r[0]):r[0],a=this._reverseSecondPath?Gt.call(this,r[1]):r[1];i=Jt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ne={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:r,toPathString:te},functions:ee,Util:{l2c:qt,q2c:Bt,a2c:Dt,catmullRom2bezier:Vt,ellipsePath:Rt,path2curve:Qt,pathToAbsolute:Nt,toPathString:te,parsePathString:Ht,getRotatedCurve:Jt,getRotations:Zt,getRotationSegments:$t,reverseCurve:Gt,getSegments:Kt,createPath:Wt}};function re(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ie(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=ae.call(this,t,ie(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},oe={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:r},functions:se,Util:{parseStringOrigin:re,parseTransformString:ie,parseTransformSVG:ae}};function le(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ue(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}T.SVGTransformProperty=oe;var pe=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},le(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ue(t,e,i,r))}),r=a)}catch(t){}return i}(),ce="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],he="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",fe=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,de=!!pe&&{passive:!1};function ve(t){this.scrolling&&t.preventDefault()}function ge(){var t=this.element;return t===fe?{el:document,st:document.body}:{el:t,st:t}}function me(){var t=ge.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,le(t.el,ce[0],ve,de),le(t.el,he,ve,de),t.st.style.pointerEvents="none")}function ye(){var t=ge.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ue(t.el,ce[0],ve,de),ue(t.el,he,ve,de),t.st.style.pointerEvents="")}var be={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:fe,me.call(this),this.element===fe?window.pageYOffset||fe.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.scrollTop=r(e,n,i)>>0})},onComplete:function(t){ye.call(this)}},we={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:r},functions:be,Util:{preventScroll:ve,scrollIn:me,scrollOut:ye,scrollContainer:fe,passiveHandler:de,getScrollTargets:ge}};T.ScrollProperty=we;var xe=["boxShadow","textShadow"];function Se(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ot(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,i,a){for(var s=[],o="textShadow"===e?3:4,l=3===o?n[3]:n[4],u=3===o?i[3]:i[4],p=!!(n[5]&&"none"!==n[5]||i[5]&&"none"!==i[5])&&" inset",c=0;c>0)/1e3+"px");t.style[e]=p?lt(l,u,a)+s.join(" ")+p:lt(l,u,a)+s.join(" ")})}var Te={};xe.map((function(t){return Te[t]=Me}));var Ee={component:"shadowProperties",properties:xe,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:r,colors:lt},functions:{prepareStart:function(t,e){var n=P(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?v[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Se(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Se(e,t));return e},onStart:Te},Util:{processShadowArray:Se,trueColor:ot}};T.ShadowProperties=Ee;var _e=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ce={};function ke(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=i(n.v,r.v,r.u,a)})}_e.forEach((function(t){Ce[t]=ke}));var Ie={component:"textProperties",category:"textProps",properties:_e,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:i},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return Y(e)},onStart:Ce},Util:{trueDimension:Y}};function Pe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function Oe(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s,./?=-").split(""),Fe=String("0123456789").split(""),je=Ae.concat(Le,Fe),Ve=je.concat(Ue),Re={alpha:Ae,upper:Le,symbols:Ue,numeric:Fe,alphanumeric:je,all:Ve};var He={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Re?Re[n]:n&&n.length?n:Re[g.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.innerHTML=r(e,n,i)>>0})}},Ne={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:r},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:He},Util:{charSet:Re,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=Oe(t,"text-part"),r=Oe(Pe(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),l=[],u=0;return(l=(l=l.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=u,n.onComplete=null,u+=n.duration,new q(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=u,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,u+=n.duration,new q(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&l.map((function(t){return t.start()}))&&(t.playing=!0)},l}}}};T.TextWriteProperties=Ne;var qe="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Be={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:v.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,i,s){var o=new qe,l={};for(var u in i)l[u]="perspective"===u?r(n[u],i[u],s):a(n[u],i[u],s);l.perspective&&(o.m34=-1/l.perspective),o=l.translate3d?o.translate(l.translate3d[0],l.translate3d[1],l.translate3d[2]):o,o=l.rotate3d?o.rotate(l.rotate3d[0],l.rotate3d[1],l.rotate3d[2]):o,l.skew&&(o=l.skew[0]?o.skewX(l.skew[0]):o,o=l.skew[1]?o.skewY(l.skew[1]):o),o=l.scale3d?o.scale(l.scale3d[0],l.scale3d[1],l.scale3d[2]):o,t.style[e]=o.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=qe)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:r,translate3d:a,rotate3d:a,skew:a,scale3d:a}};for(var De in T.TransformMatrix=Be,T){var Xe=T[De];T[De]=new z(Xe)}return{Animation:z,Components:T,TweenExtra:N,fromTo:function(t,e,n,r){return r=r||{},new q(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new q(j(t),e,e,n)},TweenCollection:B,ProgressBar:D,allFromTo:function(t,e,n,r){return r=r||{},new B(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new B(j(t,!0),e,e,n)},Objects:S,Util:M,Easing:F,CubicBezier:U,Render:h,Interpolate:s,Process:L,Internals:k,Selector:j,Version:"2.0.3"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}function i(t,e,n,r){return(t=+t)+(e-=t)*r+n}function a(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var s={numbers:r,units:i,arrays:a},o={},l={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?l.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(l.now=self.performance.now.bind(self.performance));var u=0,p=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}M.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(e,n,r,i){for(var a in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:M.processEasing(i.easing),this._duration=i.duration||g.duration,this._delay=i.delay||g.delay,i){var s="_"+a;s in this||(this[s]=i[a])}var l=this._easing.name;return o[l]||(o[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};R.prototype.start=function(e){if(E(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),o)if("function"==typeof o[n])o[n].call(this,n);else for(var r in o[n])o[n][r].call(this,r);C.call(this),this._startFired=!0}return!u&&p(),this},R.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in w)for(var e in w[t])w[t][e].call(this,e);this._startFired=!1,c.call(this)},R.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},R.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},R.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},V.Tween=R,g.repeat=0,g.repeatDelay=0,g.yoyo=!1,g.resetStart=!1;var H=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(O.call(this,i,"end"),this._resetStart?this.valuesStart=r:O.call(this,r,"start"),!this._resetStart)for(var a in b)for(var s in b[a])b[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||g.repeat,this._repeatDelay=o.repeatDelay||g.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||g.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,A.call(this),b)for(var r in b[n])b[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,E(this),!u&&p()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(_(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var D=V.Tween,q=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in g)&&(g.offset=0),(r=r||{}).delay=r.delay||g.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||g.offset):r.delay,t instanceof Element?i.tweens.push(new D(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};q.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},q.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},q.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},q.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},q.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof q)e.chain(t.tweens);else{if(!(t instanceof D))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},q.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},q.prototype.removeTweens=function(){this.tweens=[]},q.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var B=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};B.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},B.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},B.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},B.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},B.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},B.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var X=function(t){try{t.component in d?console.error("KUTE.js - "+t.component+" already registered"):t.property in v?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};X.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:m,prepareStart:y,onStart:o,onComplete:w,crossCheck:b},r=t.category,i=t.property,a=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(d[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)v[i]=t.defaultValue,this.supports=i+" property";else if(t.defaultValues){for(var l in t.defaultValues)v[l]=t.defaultValues[l];this.supports=(a||i)+" "+(i||r)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)g[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][r||i]&&(n[p][e][r||i]=t.functions[p]);else for(var c in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][c]&&(n[p][e][c]=t.functions[p][c]);if(t.Interpolate){for(var h in t.Interpolate){var f=t.Interpolate[h];if("function"!=typeof f||s[h])for(var S in f)"function"!=typeof f[S]||s[h]||(s[h]=f[S]);else s[h]=f}x[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!M[T]&&(M[T]=t.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:m,prepareStart:y,onStart:o,onComplete:w,crossCheck:b},r=e.category,i=e.property,a=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=i+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(a||i)+" "+(i||r)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===a?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(r||i)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(r||i)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)s[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||s[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(i||r)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*r(n[1],i[1],a)>>0)/100+"%"})}},W={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:r},functions:Q,Util:{trueDimension:Y}};function K(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=i(n.v,r.v,r.u,a)})}T.BackgroundPosition=W;var G=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],$={};G.map((function(t){return $[t]=0}));var Z={};G.forEach((function(t){Z[t]=K}));var J={component:"borderRadiusProperties",category:"borderRadius",properties:G,defaultValues:$,Interpolate:{units:i},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};function tt(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(a>.99||a<.01?(10*r(n,i,a)>>0)/10:r(n,i,a)>>0)+"px"})}T.BorderRadiusProperties=J;var et={};["top","left","width","height"].map((function(t){return et[t]=tt}));var nt={component:"baseBoxModel",category:"boxModel",Interpolate:{numbers:r},functions:{onStart:et}};T.BoxModelProperties=nt;var rt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],it={};rt.map((function(t){return it[t]=0}));var at={};rt.map((function(t){return at[t]=tt}));var st={component:"boxModelProperties",category:"boxModel",properties:rt,defaultValues:it,Interpolate:{numbers:r},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:at}};T.BoxModelProperties=st;var ot={prepareStart:function(t,e){var n=P(this.element,t),r=P(this.element,"width"),i=P(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,i){for(var a=0,s=[];a<4;a++){var o=e[a].v,l=n[a].v,u=n[a].u||"px";s[a]=(100*r(o,l,i)>>0)/100+u}t.style.clip="rect("+s+")"})}},lt={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:r},functions:ot,Util:{trueDimension:Y}};function ut(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function pt(t,e,n){var i,a={};for(i in e)a[i]="a"!==i?r(t[i],e[i],n)>>0||0:t[i]&&e[i]?(100*r(t[i],e[i],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}function ct(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=pt(n,r,i)})}T.ClipProperty=lt;var ht=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ft={};ht.forEach((function(t){ft[t]="#000"}));var dt={};ht.map((function(t){return dt[t]=ct}));var vt={component:"colorProperties",category:"colors",properties:ht,defaultValues:ft,Interpolate:{numbers:r,colors:pt},functions:{prepareStart:function(t,e){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return ut(e)},onStart:dt},Util:{trueColor:ut}};T.ColorProperties=vt;var gt={},mt=["fill","stroke","stop-color"];function yt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var bt={prepareStart:function(t,e){var n={};for(var r in e){var i=yt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=mt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var i in e){var a=yt(i),s=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(mt.includes(a))o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,r,i){t.setAttribute(e,pt(n,r,i))})},n[a]=ut(e[i])||v.htmlAttributes[i];else if(null!==l&&s.test(l)){var u=Y(l).u||Y(e[i]).u,p=/%/.test(u)?"_percent":"_"+u;o.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,i,a){var s=e.replace(p,"");t.setAttribute(s,(1e3*r(n.v,i.v,a)>>0)/1e3+i.u)})},n[a+p]=Y(e[i])}else s.test(e[i])&&null!==l&&(null===l||s.test(l))||(o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,i,a){t.setAttribute(e,(1e3*r(n,i,a)>>0)/1e3)})},n[a]=parseFloat(e[i]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=gt)}}},wt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:r,colors:pt},functions:bt,Util:{replaceUppercase:yt,trueColor:ut,trueDimension:Y}};function xt(t,e,n){for(var i=[],a=0;a<3;a++)i[a]=(100*r(t[a],e[a],n)>>0)/100+"px";return"drop-shadow("+i.concat(pt(t[3],e[3],n)).join(" ")+")"}function St(t){return t.replace("-r","R").replace("-s","S")}function Mt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ut(e[3]),e}function Tt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||i.blur?"blur("+(100*r(n.blur,i.blur,a)>>0)/100+"em)":"")+(n.saturate||i.saturate?"saturate("+(100*r(n.saturate,i.saturate,a)>>0)/100+"%)":"")+(n.invert||i.invert?"invert("+(100*r(n.invert,i.invert,a)>>0)/100+"%)":"")+(n.grayscale||i.grayscale?"grayscale("+(100*r(n.grayscale,i.grayscale,a)>>0)/100+"%)":"")+(n.hueRotate||i.hueRotate?"hue-rotate("+(100*r(n.hueRotate,i.hueRotate,a)>>0)/100+"deg)":"")+(n.sepia||i.sepia?"sepia("+(100*r(n.sepia,i.sepia,a)>>0)/100+"%)":"")+(n.brightness||i.brightness?"brightness("+(100*r(n.brightness,i.brightness,a)>>0)/100+"%)":"")+(n.contrast||i.contrast?"contrast("+(100*r(n.contrast,i.contrast,a)>>0)/100+"%)":"")+(n.dropShadow||i.dropShadow?xt(n.dropShadow,i.dropShadow,a):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},_t={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:r,blur:r,saturate:r,grayscale:r,brightness:r,contrast:r,sepia:r,invert:r,hueRotate:r,dropShadow:{numbers:r,colors:pt,dropShadow:xt}},functions:Et,Util:{parseDropShadow:Mt,parseFilterString:Tt,replaceDashNamespace:St,trueColor:ut}};T.FilterEffects=_t;var Ct={prepareStart:function(t){return P(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(1e3*r(n,i,a)>>0)/1e3})}},kt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:Ct};function It(t,e){return parseFloat(t)/100*e}function Pt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ot(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*r(e.s,n.s,i)>>0)/100,o=(100*r(e.e,n.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Rt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},functions:Vt,Util:{getRectLength:Pt,getPolyLength:Ot,getLineLength:At,getCircleLength:Lt,getEllipseLength:Ut,getTotalLength:Ft,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:jt,percent:It}};function Ht(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}T.SVGDraw=Rt;function Nt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Dt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function qt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Bt(t){if(!(t=qt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Yt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Gt(t,e){for(var n=Bt(t),r=e&&Bt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function te(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function ee(t){var e=Zt(t),n=[];return e.map((function(t,r){n[r]=te(e,r)})),n}function ne(t,e){var n=Zt(t),r=Zt(e),i=n.length-1,a=[],s=[],o=ee(t);return o.map((function(t,e){for(var o=0,l=$t("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===i?n.original:Ht(a))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Gt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Jt.call(this,r[0]):r[0],a=this._reverseSecondPath?Jt.call(this,r[1]):r[1];i=ne.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ie={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:r,toPathString:Ht},functions:re,Util:{l2c:Xt,q2c:zt,a2c:Yt,catmullRom2bezier:Nt,ellipsePath:Dt,path2curve:Gt,pathToAbsolute:Bt,toPathString:Ht,parsePathString:qt,getRotatedCurve:ne,getRotations:ee,getRotationSegments:te,reverseCurve:Jt,getSegments:Zt,createPath:$t}};function ae(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function se(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=oe.call(this,t,se(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ue={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:r},functions:le,Util:{parseStringOrigin:ae,parseTransformString:se,parseTransformSVG:oe}};function pe(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ce(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}T.SVGTransformProperty=ue;var he=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},pe(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ce(t,e,i,r))}),r=a)}catch(t){}return i}(),fe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],de="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ve=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,ge=!!he&&{passive:!1};function me(t){this.scrolling&&t.preventDefault()}function ye(){var t=this.element;return t===ve?{el:document,st:document.body}:{el:t,st:t}}function be(){var t=ye.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,pe(t.el,fe[0],me,ge),pe(t.el,de,me,ge),t.st.style.pointerEvents="none")}function we(){var t=ye.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ce(t.el,fe[0],me,ge),ce(t.el,de,me,ge),t.st.style.pointerEvents="")}var xe={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ve,this.element===ve?window.pageYOffset||ve.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ve,be.call(this),t[e]=function(t,e,n,i){t.scrollTop=r(e,n,i)>>0})},onComplete:function(t){we.call(this)}},Se={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:r},functions:xe,Util:{preventScroll:me,scrollIn:be,scrollOut:we,getScrollTargets:ye}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,i,a){for(var s=[],o="textShadow"===e?3:4,l=3===o?n[3]:n[4],u=3===o?i[3]:i[4],p=!!(n[5]&&"none"!==n[5]||i[5]&&"none"!==i[5])&&" inset",c=0;c>0)/1e3+"px");t.style[e]=p?pt(l,u,a)+s.join(" ")+p:pt(l,u,a)+s.join(" ")})}T.ScrollProperty=Se;var Te=["boxShadow","textShadow"];function Ee(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ut(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var _e={};Te.map((function(t){return _e[t]=Me}));var Ce={component:"shadowProperties",properties:Te,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:r,colors:pt},functions:{prepareStart:function(t,e){var n=P(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?v[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Ee(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Ee(e,t));return e},onStart:_e},Util:{processShadowArray:Ee,trueColor:ut}};function ke(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=i(n.v,r.v,r.u,a)})}T.ShadowProperties=Ce;var Ie=["fontSize","lineHeight","letterSpacing","wordSpacing"],Pe={};Ie.forEach((function(t){Pe[t]=ke}));var Oe={component:"textProperties",category:"textProperties",properties:Ie,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:i},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return Y(e)},onStart:Pe},Util:{trueDimension:Y}};T.TextProperties=Oe;var Ae=String("abcdefghijklmnopqrstuvwxyz").split(""),Le=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ue=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Fe=String("0123456789").split(""),je=Ae.concat(Le,Fe),Ve=je.concat(Ue),Re={alpha:Ae,upper:Le,symbols:Ue,numeric:Fe,alphanumeric:je,all:Ve},He={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Re?Re[n]:n&&n.length?n:Re[g.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.innerHTML=r(e,n,i)>>0})}};function Ne(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function De(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}},a={},s={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?s.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(s.now=self.performance.now.bind(self.performance));var o=0,u=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={linear:new P(0,0,1,1,"linear"),easingSinusoidalIn:new P(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new P(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new P(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new P(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new P(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new P(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new P(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new P(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new P(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new P(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new P(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new P(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new P(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new P(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new P(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new P(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new P(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new P(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new P(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new P(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new P(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new P(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new P(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new P(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t[0]instanceof Element?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}_.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new P(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var U={},F=function(e,n,r,i){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:_.processEasing(i.easing),this._duration=i.duration||d.duration,this._delay=i.delay||d.delay,i){var o="_"+s;o in this||(this[o]=i[s])}var u=this._easing.name;return a[u]||(a[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(T(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),a)if("function"==typeof a[n])a[n].call(this,n);else for(var r in a[n])a[n][r].call(this,r);E.call(this),this._startFired=!0}return!o&&u(),this},F.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in y)for(var e in y[t])y[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),!1)},U.Tween=F,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var N=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(M.call(this,i,"end"),this._resetStart?this.valuesStart=r:M.call(this,r,"start"),!this._resetStart)for(var a in m)for(var s in m[a])m[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||d.repeat,this._repeatDelay=o.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||d.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,k.call(this),m)for(var r in m[n])m[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,T(this),!o&&u()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},n.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);U.Tween=N;var H=U.Tween,V=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in d)&&(d.offset=0),(r=r||{}).delay=r.delay||d.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||d.offset):r.delay,t instanceof Element?i.tweens.push(new H(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};V.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},V.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},V.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},V.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},V.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof H))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},V.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},V.prototype.removeTweens=function(){this.tweens=[]},V.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var z=function(t){try{t.component in h?console.error("KUTE.js - "+t.component+" already registered"):t.property in f?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||a<.01?(10*r(n,i,a)>>0)/10:r(n,i,a)>>0)+"px"})}z.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:v,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},r=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(h[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)f[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)f[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||r)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)d[l]=t.defaultOptions[l];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][r||s]&&(n[p][e][r||s]=t.functions[p]);else for(var c in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][c]&&(n[p][e][c]=t.functions[p][c]);if(t.Interpolate){for(var w in t.Interpolate){var x=t.Interpolate[w];if("function"!=typeof x||i[w])for(var T in x)"function"!=typeof x[T]||i[w]||(i[w]=x[T]);else i[w]=x}b[e]=t.Interpolate}if(t.Util)for(var S in t.Util)!_[S]&&(_[S]=t.Util[S]);return this};var R={};["top","left","width","height"].map((function(t){return R[t]=Q}));var X={component:"boxModelProps",category:"boxModel",properties:["top","left","width","height"],defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:r},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function K(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function B(t,e,n){var i,a={};for(i in e)a[i]="a"!==i?r(t[i],e[i],n)>>0||0:t[i]&&e[i]?(100*r(t[i],e[i],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}x.BoxModelEssentialProperties=X;var q=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Y={};function Z(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=B(n,r,i)})}q.forEach((function(t){Y[t]="#000"}));var $={};q.map((function(t){return $[t]=Z}));var W={component:"colorProps",category:"colors",properties:q,defaultValues:Y,Interpolate:{numbers:r,colors:B},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return K(e)},onStart:$},Util:{trueColor:K}};x.ColorProperties=W;var G=["fill","stroke","stop-color"],J={};function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=G.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var i in e){var s=tt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(G.includes(s))a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,B(n,r,i))})},n[s]=K(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=D(u).u||D(e[i]).u,p=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,i,a){var s=e.replace(p,"");t.setAttribute(s,(1e3*r(n.v,i.v,a)>>0)/1e3+i.u)})},n[s+p]=D(e[i])}else o.test(e[i])&&null!==u&&(null===u||o.test(u))||(a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in J)&&(J[e]=function(t,e,n,i,a){t.setAttribute(e,(1e3*r(n,i,a)>>0)/1e3)})},n[s]=parseFloat(e[i]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=J)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:r,colors:B},functions:et,Util:{replaceUppercase:tt,trueColor:K,trueDimension:D}};x.HTMLAttributes=nt;var rt={prepareStart:function(t){return A(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(1e3*r(n,i,a)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:rt};function at(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function st(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,p=void 0;s,./?=-").split(""),pt=String("0123456789").split(""),ct=ot.concat(ut,pt),ht=ct.concat(lt),ft={alpha:ot,upper:ut,symbols:lt,numeric:pt,alphanumeric:ct,all:ht};var dt={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ft?ft[n]:n&&n.length?n:ft[d.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.innerHTML=r(e,n,i)>>0})}},vt={component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",numbers:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:r},functions:{prepareStart:function(t,e){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:dt},Util:{charSet:ft,createTextTweens:function(t,e,n){if(!t.playing){(n=n||{}).duration="auto"===n.duration?"auto":isFinite(1*n.duration)?1*n.duration:1e3;var r=function(t,e){var n=st(t,"text-part"),r=st(at(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),i=r[0],a=r[1],s=[].slice.call(t.getElementsByClassName("oldText")).reverse(),o=[].slice.call(t.getElementsByClassName("newText")),u=[],l=0;return(u=(u=u.concat(s.map((function(t,e){return n.duration="auto"===n.duration?75*i[e].innerHTML.length:n.duration,n.delay=l,n.onComplete=null,l+=n.duration,new H(t,{text:t.innerHTML},{text:""},n)})))).concat(o.map((function(r,i){return n.duration="auto"===n.duration?75*a[i].innerHTML.length:n.duration,n.delay=l,n.onComplete=i===a.length-1?function(){t.innerHTML=e,t.playing=!1}:null,l+=n.duration,new H(r,{text:""},{text:a[i].innerHTML},n)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function gt(t,e,n,r){return"perspective("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function wt(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function _t(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}function xt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}x.TextWriteProperties=vt;var Tt={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=I(this.element);return n[t]?n[t]:f[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var p=u.replace(/[XYZ]/,""),c="skew"===p?p:p+"3d",h="translate"===p?r:"rotate"===p?i:"skew"===p?a:{},f=0;f<3;f++){var d=n[f];h[f]=""+p+d in e?parseInt(e[""+p+d]):0}s[c]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?gt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?mt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?bt(n.translate,r.translate,"px",i):"")+(n.rotate3d?yt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?wt(n.rotate,r.rotate,"deg",i):"")+(n.skew?_t(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?xt(n.scale,r.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:gt,translate3d:mt,rotate3d:yt,translate:bt,rotate:wt,scale:xt,skew:_t}};x.TransformFunctions=Tt;var St=function(t,e){return parseFloat(t)/100*e},Et=function(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")},Ct=function(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*r(e.s,n.s,i)>>0)/100,o=(100*r(e.e,n.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Lt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},functions:Pt,Util:{getRectLength:Et,getPolyLength:Ct,getLineLength:It,getCircleLength:At,getEllipseLength:Mt,getTotalLength:kt,getDraw:Ot,percent:St}};function jt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Lt;var Ut="Invalid path value";function Ft(t){return"number"==typeof t&&isFinite(t)}function Nt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ht(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Vt(t,e){return Nt(t,e)<1e-9}var zt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Dt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Qt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Dt.indexOf(t)>=0}function Rt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Xt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function Bt(t){return t>=48&&t<=57||43===t||45===t||46===t}function qt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Yt(t){for(;t.index=i)t.err="KUTE.js - "+Ut;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=zt[n]&&(t.result.push([e].concat(r.splice(0,zt[n]))),zt[n]););}function Gt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Xt(e=t.path.charCodeAt(t.index)),Rt(e))if(i=zt[t.path[t.index].toLowerCase()],t.index++,Yt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?$t(t):Zt(t),t.err.length)return;t.data.push(t.param),Yt(t),r=!1,t.index=t.max)break;if(!Bt(t.path.charCodeAt(t.index)))break}}Wt(t)}else Wt(t);else t.err="KUTE.js - "+Ut}function Jt(t){var e=new qt(t),n=e.max;for(Yt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ht(r,i,.5),t.splice(n+1,0,i)}function ce(t,e){var n,r;if("string"==typeof t){var i=ne(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ut);if(!he(n=t.slice(0)))throw new TypeError(Ut);return n.length>1&&Vt(n[0],n[n.length-1])&&n.pop(),ue(n)>0&&n.reverse(),!r&&e&&Ft(e)&&e>0&&pe(n,e),n}function he(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Ft(t[0])&&Ft(t[1])}))}function fe(t,e,n){var r=ce(t,n=n||d.morphPrecision),i=ce(e,n),a=r.length-i.length;return le(r,a<0?-1*a:0),le(i,a>0?a:0),se(r,i),[r,i]}te.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var p=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(p?a:0),s=e[2]+(p?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(p?a:0));case"v":case"V":return void(s=e[1]+(p?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(p?a:0),s=e[e.length-1]+(p?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},te.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var de={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+jt(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=fe(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):d.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},ve={component:"svgMorph",property:"path",defaultValue:[],Interpolate:jt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:de,Util:{INVALID_INPUT:Ut,isFiniteNumber:Ft,distance:Nt,pointAlong:Ht,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Dt,isSpace:Qt,isCommand:Rt,isArc:Xt,isDigit:Kt,isDigitStart:Bt,State:qt,skipSpaces:Yt,scanFlag:Zt,scanParam:$t,finalizeSegment:Wt,scanSegment:Gt,pathParse:Jt,SvgPath:te,split:ee,pathStringToRing:ne,exactRing:re,approximateRing:ie,measure:ae,rotateRing:se,polygonLength:oe,polygonArea:ue,addPoints:le,bisect:pe,normalizeRing:ce,validRing:he,getInterpolationPoints:fe}};for(var ge in x.SVGMorph=ve,x){var me=x[ge];x[ge]=new z(me)}return{Animation:z,Components:x,Tween:N,fromTo:function(t,e,n,r){return r=r||{},new H(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new H(j(t),e,e,n)},TweenCollection:V,allFromTo:function(t,e,n,r){return r=r||{},new V(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new V(j(t,!0),e,e,n)},Objects:w,Util:_,Easing:L,CubicBezier:P,Render:p,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}var i={numbers:r,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}},a={},s={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?s.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(s.now=self.performance.now.bind(self.performance));var o=0,u=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var P={linear:new L(0,0,1,1,"linear"),easingSinusoidalIn:new L(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new L(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new L(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new L(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new L(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new L(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new L(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new L(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new L(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new L(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new L(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new L(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new L(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new L(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new L(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new L(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new L(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new L(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new L(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new L(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new L(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new L(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new L(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new L(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}_.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new L(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U={},F=function(e,n,r,i){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:_.processEasing(i.easing),this._duration=i.duration||d.duration,this._delay=i.delay||d.delay,i){var o="_"+s;o in this||(this[o]=i[s])}var u=this._easing.name;return a[u]||(a[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(T(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),a)if("function"==typeof a[n])a[n].call(this,n);else for(var r in a[n])a[n][r].call(this,r);E.call(this),this._startFired=!0}return!o&&u(),this},F.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in y)for(var e in y[t])y[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},U.Tween=F,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var N=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(M.call(this,i,"end"),this._resetStart?this.valuesStart=r:M.call(this,r,"start"),!this._resetStart)for(var a in m)for(var s in m[a])m[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||d.repeat,this._repeatDelay=o.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||d.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,k.call(this),m)for(var r in m[n])m[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,T(this),!o&&u()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);U.Tween=N;var H=U.Tween,D=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in d)&&(d.offset=0),(r=r||{}).delay=r.delay||d.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||d.offset):r.delay,t instanceof Element?i.tweens.push(new H(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};D.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},D.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},D.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},D.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},D.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof D)e.chain(t.tweens);else{if(!(t instanceof H))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},D.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},D.prototype.removeTweens=function(){this.tweens=[]},D.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var V=function(t){try{t.component in h?console.error("KUTE.js - "+t.component+" already registered"):t.property in f?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function z(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||a<.01?(10*r(n,i,a)>>0)/10:r(n,i,a)>>0)+"px"})}V.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:v,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},r=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(h[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)f[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)f[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||r)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)d[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][r||s]&&(n[c][e][r||s]=t.functions[c]);else for(var p in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][p]&&(n[c][e][p]=t.functions[c][p]);if(t.Interpolate){for(var w in t.Interpolate){var x=t.Interpolate[w];if("function"!=typeof x||i[w])for(var T in x)"function"!=typeof x[T]||i[w]||(i[w]=x[T]);else i[w]=x}b[e]=t.Interpolate}if(t.Util)for(var S in t.Util)!_[S]&&(_[S]=t.Util[S]);return this};var Q={};["top","left","width","height"].map((function(t){return Q[t]=B}));var R={component:"baseBoxModel",category:"boxModel",Interpolate:{numbers:r},functions:{onStart:Q}};x.BoxModelProperties=R;var X={};["top","left","width","height"].map((function(t){return X[t]=B}));var K={component:"essentialBoxModel",category:"boxModel",properties:["top","left","width","height"],defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:r},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var n=z(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:X},Util:{trueDimension:z}};function q(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Y(t,e,n){var i,a={};for(i in e)a[i]="a"!==i?r(t[i],e[i],n)>>0||0:t[i]&&e[i]?(100*r(t[i],e[i],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}function Z(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n,r,i)})}x.BoxModelEssential=K;var $=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};$.forEach((function(t){W[t]="#000"}));var G={};$.map((function(t){return G[t]=Z}));var J={component:"colorProperties",category:"colors",properties:$,defaultValues:W,Interpolate:{numbers:r,colors:Y},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return q(e)},onStart:G},Util:{trueColor:q}};x.ColorProperties=J;var tt={},et=["fill","stroke","stop-color"];function nt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var rt={prepareStart:function(t,e){var n={};for(var r in e){var i=nt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=et.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var i in e){var s=nt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(et.includes(s))a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,r,i){t.setAttribute(e,Y(n,r,i))})},n[s]=q(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=z(u).u||z(e[i]).u,c=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,i,a){var s=e.replace(c,"");t.setAttribute(s,(1e3*r(n.v,i.v,a)>>0)/1e3+i.u)})},n[s+c]=z(e[i])}else o.test(e[i])&&null!==u&&(null===u||o.test(u))||(a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,i,a){t.setAttribute(e,(1e3*r(n,i,a)>>0)/1e3)})},n[s]=parseFloat(e[i]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=tt)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:r,colors:Y},functions:rt,Util:{replaceUppercase:nt,trueColor:q,trueDimension:z}};x.HTMLAttributes=it;var at={prepareStart:function(t){return A(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(1e3*r(n,i,a)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:at};x.OpacityProperty=st;var ot=String("abcdefghijklmnopqrstuvwxyz").split(""),ut=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),lt=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ct=String("0123456789").split(""),pt=ot.concat(ut,ct),ht=pt.concat(lt),ft={alpha:ot,upper:ut,symbols:lt,numeric:ct,alphanumeric:pt,all:ht},dt={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ft?ft[n]:n&&n.length?n:ft[d.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.innerHTML=r(e,n,i)>>0})}};function vt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function gt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function bt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function wt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function _t(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function xt(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function Tt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}function St(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}x.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=I(this.element);return n[t]?n[t]:f[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?r:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=n[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?yt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?bt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?_t(n.translate,r.translate,"px",i):"")+(n.rotate3d?wt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?xt(n.rotate,r.rotate,"deg",i):"")+(n.skew?Tt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?St(n.scale,r.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:bt,rotate3d:wt,translate:_t,rotate:xt,scale:St,skew:Tt}};function Ct(t,e){return parseFloat(t)/100*e}function It(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function At(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*r(e.s,n.s,i)>>0)/100,o=(100*r(e.e,n.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},functions:jt,Util:{getRectLength:It,getPolyLength:At,getLineLength:Mt,getCircleLength:kt,getEllipseLength:Ot,getTotalLength:Lt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Pt,percent:Ct}};function Ft(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Ut;var Nt="Invalid path value";function Ht(t){return"number"==typeof t&&isFinite(t)}function Dt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Vt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function zt(t,e){return Dt(t,e)<1e-9}var Bt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Qt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Rt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Qt.indexOf(t)>=0}function Xt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Kt(t){return 97==(32|t)}function qt(t){return t>=48&&t<=57}function Yt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Zt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function $t(t){for(;t.index=i)t.err="KUTE.js - "+Nt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Bt[n]&&(t.result.push([e].concat(r.splice(0,Bt[n]))),Bt[n]););}function te(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Kt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=Bt[t.path[t.index].toLowerCase()],t.index++,$t(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Gt(t):Wt(t),t.err.length)return;t.data.push(t.param),$t(t),r=!1,t.index=t.max)break;if(!Yt(t.path.charCodeAt(t.index)))break}}Jt(t)}else Jt(t);else t.err="KUTE.js - "+Nt}function ee(t){var e=new Zt(t),n=e.max;for($t(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Vt(r,i,.5),t.splice(n+1,0,i)}function fe(t,e){var n,r;if("string"==typeof t){var i=ie(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Nt);if(!de(n=t.slice(0)))throw new TypeError(Nt);return n.length>1&&zt(n[0],n[n.length-1])&&n.pop(),ce(n)>0&&n.reverse(),!r&&e&&Ht(e)&&e>0&&he(n,e),n}function de(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Ht(t[0])&&Ht(t[1])}))}function ve(t,e,n){var r=fe(t,n=n||d.morphPrecision),i=fe(e,n),a=r.length-i.length;return pe(r,a<0?-1*a:0),pe(i,a>0?a:0),ue(r,i),[r,i]}ne.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},ne.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ge={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+Ft(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ve(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):d.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},me={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ft,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ge,Util:{INVALID_INPUT:Nt,isFiniteNumber:Ht,distance:Dt,pointAlong:Vt,samePoint:zt,paramCounts:Bt,SPECIAL_SPACES:Qt,isSpace:Rt,isCommand:Xt,isArc:Kt,isDigit:qt,isDigitStart:Yt,State:Zt,skipSpaces:$t,scanFlag:Wt,scanParam:Gt,finalizeSegment:Jt,scanSegment:te,pathParse:ee,SvgPath:ne,split:re,pathStringToRing:ie,exactRing:ae,approximateRing:se,measure:oe,rotateRing:ue,polygonLength:le,polygonArea:ce,addPoints:pe,bisect:he,normalizeRing:fe,validRing:de,getInterpolationPoints:ve}};for(var ye in x.SVGMorph=me,x){var be=x[ye];x[ye]=new V(be)}return{Animation:V,Components:x,Tween:N,fromTo:function(t,e,n,r){return r=r||{},new H(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new H(j(t),e,e,n)},TweenCollection:D,allFromTo:function(t,e,n,r){return r=r||{},new D(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new D(j(t,!0),e,e,n)},Objects:w,Util:_,Easing:P,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"}}));
diff --git a/svgCubicMorph.html b/svgCubicMorph.html
index 0ad0afb..b0a071f 100644
--- a/svgCubicMorph.html
+++ b/svgCubicMorph.html
@@ -22,6 +22,7 @@
 
   
   
+
 
 
 
@@ -342,8 +343,7 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
 
 
 
-    
+    
     
     
     
diff --git a/svgDraw.html b/svgDraw.html
index a0b2848..feb904e 100644
--- a/svgDraw.html
+++ b/svgDraw.html
@@ -151,8 +151,7 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
     
 
 
-    
+    
     
 
     
diff --git a/svgMorph.html b/svgMorph.html
index a07cc81..f339dbd 100644
--- a/svgMorph.html
+++ b/svgMorph.html
@@ -345,7 +345,8 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
         
  • In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or something like SVGPath tools to
           apply a scale transformation to your shapes' path commands.
    • 
         
  • The morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multi-paths instead of cloning shapes to have same number 
-          of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don.
    • 
+          of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don't do very much, regardless 
+          of the advertising.
         
  • Large displays would need best resolution possible so a small morphPrecision value (1-10) would be required, assuming performant hardware are powering the displays. For small displays 
           you can get quite comfortable with almost any value, including the default value.
    • 
         
  • Because you have the tools at hand, you can also try to use a morphPrecision value for every resolution. Take some time to experiement, you might find a better morphPrecision 
@@ -373,8 +374,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
 
 
 
-  
+  
   
 
   
diff --git a/svgTransform.html b/svgTransform.html
index 0809c8a..812829f 100644
--- a/svgTransform.html
+++ b/svgTransform.html
@@ -375,8 +375,7 @@ KUTE.fromTo(element,
 
 
 
-    
+    
     
 
     
diff --git a/textProperties.html b/textProperties.html
index c123026..693fad9 100644
--- a/textProperties.html
+++ b/textProperties.html
@@ -144,8 +144,7 @@ let tween3 = KUTE.to('selector1',{wordSpacing:50})
     
     
 
-    
+    
     
 
     
diff --git a/textWrite.html b/textWrite.html
index 479a115..15837c4 100644
--- a/textWrite.html
+++ b/textWrite.html
@@ -247,10 +247,7 @@ tweenObjects.start();
   
   
 
-
-
-  
+  
   
 
   
diff --git a/transformFunctions.html b/transformFunctions.html
index 038de76..4bc531b 100644
--- a/transformFunctions.html
+++ b/transformFunctions.html
@@ -280,10 +280,7 @@ var tween2 = KUTE.fromTo(
     
     
 
-
-
-    
+    
     
 
     
diff --git a/transformMatrix.html b/transformMatrix.html
index 07b864c..4e29255 100644
--- a/transformMatrix.html
+++ b/transformMatrix.html
@@ -199,10 +199,7 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
     
     
 
-
-
-    
+    
     
 
     

From 784e09296088d4eedce5c0bc3a1277d9c88b0c32 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 16 Jun 2020 15:18:29 +0000
Subject: [PATCH 157/187]

---
 index.html | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/index.html b/index.html
index db78484..2571666 100644
--- a/index.html
+++ b/index.html
@@ -216,14 +216,11 @@
   
   
 
-
-
-
   
   
 
   
-  
+  
   
   
 

From 88a28c8d19bba6dc2a85d6c853da6335c486e7be Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 16 Jun 2020 15:22:06 +0000
Subject: [PATCH 158/187]

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 2571666..125e949 100644
--- a/index.html
+++ b/index.html
@@ -220,7 +220,7 @@
   
 
   
-  
+  
   
   
 

From 18cfa78abba44b9d72c8c835bf48ac8447f920b1 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 20 Jun 2020 09:20:10 +0000
Subject: [PATCH 159/187]

---
 src/kute-base.js      |  97 +++++++++++++++-------------------
 src/kute-base.min.js  |   4 +-
 src/kute-extra.js     | 117 ++++++++++++++++--------------------------
 src/kute-extra.min.js |   4 +-
 src/kute.min.js       |   4 +-
 src/polyfill.min.js   |   1 +
 6 files changed, 93 insertions(+), 134 deletions(-)

diff --git a/src/kute-base.js b/src/kute-base.js
index 51535fc..9046cfb 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.3 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.6 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.3";
+  var version = "2.0.6";
 
   var KUTE = {};
 
@@ -19,24 +19,7 @@
                     : typeof(self) !== 'undefined' ? self
                     : typeof(window) !== 'undefined' ? window : {};
 
-  function numbers(a, b, v) {
-    a = +a; b -= a; return a + b * v;
-  }
-  function units(a, b, u, v) {
-    a = +a; b -= a; return ( a + b * v ) + u;
-  }
-  function arrays(a,b,v){
-    var result = [];
-    for ( var i=0, l=b.length; i> 0 ) / 1000;
-    }
-    return result
-  }
-  var Interpolate = {
-    numbers: numbers,
-    units: units,
-    arrays: arrays
-  };
+  var Interpolate = {};
 
   var onStart = {};
 
@@ -105,49 +88,42 @@
     defaultOptions: defaultOptions,
     linkProperty: linkProperty,
     onStart: onStart,
-    onComplete: onComplete,
+    onComplete: onComplete
   };
 
   var Util = {};
 
-  function linear (t) { return t; }
-  function easingQuadraticIn (t) { return t*t; }
-  function easingQuadraticOut (t) { return t*(2-t); }
-  function easingQuadraticInOut (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; }
-  function easingCubicIn (t) { return t*t*t; }
-  function easingCubicOut (t) { return (--t)*t*t+1; }
-  function easingCubicInOut (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }
-  function easingCircularIn (t) { return -(Math.sqrt(1 - (t * t)) - 1); }
-  function easingCircularOut (t) { return Math.sqrt(1 - (t = t - 1) * t); }
-  function easingCircularInOut (t) {  return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); }
-  function easingBackIn (t) { var s = 1.70158; return t * t * ((s + 1) * t - s); }
-  function easingBackOut (t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; }
-  function easingBackInOut (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); }
+  var connect = {};
+
   var Easing = {
-    linear : linear,
-    easingQuadraticIn : easingQuadraticIn,
-    easingQuadraticOut : easingQuadraticOut,
-    easingQuadraticInOut : easingQuadraticInOut,
-    easingCubicIn : easingCubicIn,
-    easingCubicOut : easingCubicOut,
-    easingCubicInOut : easingCubicInOut,
-    easingCircularIn : easingCircularIn,
-    easingCircularOut : easingCircularOut,
-    easingCircularInOut : easingCircularInOut,
-    easingBackIn : easingBackIn,
-    easingBackOut : easingBackOut,
-    easingBackInOut : easingBackInOut
+    linear : function (t) { return t; },
+    easingQuadraticIn : function (t) { return t*t; },
+    easingQuadraticOut : function (t) { return t*(2-t); },
+    easingQuadraticInOut : function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; },
+    easingCubicIn : function (t) { return t*t*t; },
+    easingCubicOut : function (t) { return (--t)*t*t+1; },
+    easingCubicInOut : function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; },
+    easingCircularIn : function (t) { return -(Math.sqrt(1 - (t * t)) - 1); },
+    easingCircularOut : function (t) { return Math.sqrt(1 - (t = t - 1) * t); },
+    easingCircularInOut : function (t) { return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); },
+    easingBackIn : function (t) { var s = 1.70158; return t * t * ((s + 1) * t - s) },
+    easingBackOut : function (t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1 },
+    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)
+    }
   };
   function processEasing(fn) {
     if ( typeof fn === 'function') {
       return fn;
-    } else if ( typeof fn === 'string' ) {
+    } else if ( typeof Easing[fn] === 'function' ) {
       return Easing[fn];
     } else {
       return Easing.linear
     }
   }
-  Util.processEasing = processEasing;
+  connect.processEasing = processEasing;
 
   function add (tw) { return Tweens.push(tw); }
 
@@ -273,8 +249,6 @@
     return {name:ComponentName}
   };
 
-  var TweenConstructor = {};
-
   var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
     this.element = targetElement;
     this.playing = false;
@@ -284,7 +258,7 @@
     this.valuesStart = startObject;
     options = options || {};
     this._resetStart = options.resetStart || 0;
-    this._easing = typeof (options.easing) === 'function' ? options.easing : Util.processEasing(options.easing);
+    this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing);
     this._duration = options.duration || defaultOptions.duration;
     this._delay = options.delay || defaultOptions.delay;
     for (var op in options) {
@@ -377,13 +351,23 @@
     }
     return true;
   };
-  TweenConstructor.Tween = TweenBase;
-
-  var TC = TweenConstructor.Tween;
+  connect.tween = TweenBase;
 
   function fromTo(element, startObject, endObject, optionsObj) {
     optionsObj = optionsObj || {};
-    return new TC(selector(element), startObject, endObject, optionsObj)
+    return new connect.tween(selector(element), startObject, endObject, optionsObj)
+  }
+
+  function numbers(a, b, v) {
+    a = +a; b -= a; return a + b * v;
+  }
+
+  function arrays(a,b,v){
+    var result = [];
+    for ( var i=0, l=b.length; i> 0 ) / 1000;
+    }
+    return result
   }
 
   var matrixComponent = 'transformMatrix';
@@ -444,6 +428,7 @@
   var baseBoxModel = {
     component: 'baseBoxModel',
     category: 'boxModel',
+    properties: baseBoxProps,
     Interpolate: {numbers: numbers},
     functions: {onStart: baseBoxOnStart}
   };
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index f1b1b6b..6d7686a 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Base v2.0.3 | thednp © 2020 | MIT-License
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function i(t,n,e){return(t=+t)+(n-=t)*e}function r(t,n,e){for(var i=[],r=0,o=n.length;r>0)/1e3;return i}var o={numbers:i,units:function(t,n,e,i){return(t=+t)+(n-=t)*i+e},arrays:r},a={},s={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?s.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(s.now=self.performance.now.bind(self.performance));var u=0,f=function(t){for(var e=0;e1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},O.Tween=b;var I=O.Tween;var k="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,x={component:"transformMatrix",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,o,a){var s=new k,u={};for(var f in o)u[f]="perspective"===f?i(e[f],o[f],a):r(e[f],o[f],a);u.perspective&&(s.m34=-1/u.perspective),s=u.translate3d?s.translate(u.translate3d[0],u.translate3d[1],u.translate3d[2]):s,s=u.rotate3d?s.rotate(u.rotate3d[0],u.rotate3d[1],u.rotate3d[2]):s,u.skew&&(s=u.skew[0]?s.skewX(u.skew[0]):s,s=u.skew[1]?s.skewY(u.skew[1]):s),s=u.scale3d?s.scale(u.scale3d[0],u.scale3d[1],u.scale3d[2]):s,t.style[n]=s.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=k)}}},Interpolate:{perspective:i,translate3d:r,rotate3d:r,skew:r,scale3d:r}};function U(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,r,o){t.style[n]=(o>.99||o<.01?(10*i(e,r,o)>>0)/10:i(e,r,o)>>0)+"px"})}var q={};["top","left","width","height"].map((function(t){return q[t]=U}));var A={component:"baseBoxModel",category:"boxModel",Interpolate:{numbers:i},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:i},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,r,o){t.style[n]=(1e3*i(e,r,o)>>0)/1e3})}}},F=new E(x),j=new E(A),K=new E(B);return{Animation:E,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:b,fromTo:function(t,n,e,i){return i=i||{},new I(M(t),n,e,i)},Objects:y,Easing:g,Util:m,Render:l,Interpolate:o,Internals:C,Selector:M,Version:"2.0.3"}}));
+// KUTE.js Base v2.0.6 | thednp © 2020 | MIT-License
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?o.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(o.now=self.performance.now.bind(self.performance));var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=n||t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in d)for(var n in d[t])d[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrix",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:h,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.6"}}));
diff --git a/src/kute-extra.js b/src/kute-extra.js
index af1177a..9d0b5ce 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Extra v2.0.3 (http://thednp.github.io/kute.js)
+* KUTE.js Extra v2.0.6 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.3";
+  var version = "2.0.6";
 
   var KUTE = {};
 
@@ -19,24 +19,7 @@
                     : typeof(self) !== 'undefined' ? self
                     : typeof(window) !== 'undefined' ? window : {};
 
-  function numbers(a, b, v) {
-    a = +a; b -= a; return a + b * v;
-  }
-  function units(a, b, u, v) {
-    a = +a; b -= a; return ( a + b * v ) + u;
-  }
-  function arrays(a,b,v){
-    var result = [];
-    for ( var i=0, l=b.length; i> 0 ) / 1000;
-    }
-    return result
-  }
-  var Interpolate = {
-    numbers: numbers,
-    units: units,
-    arrays: arrays
-  };
+  var Interpolate = {};
 
   var onStart = {};
 
@@ -311,6 +294,8 @@
     return t2;
   };
 
+  var connect = {};
+
   var Easing = {
     linear :  new CubicBezier(0, 0, 1, 1,'linear'),
     easingSinusoidalIn : new CubicBezier(0.47, 0, 0.745, 0.715,'easingSinusoidalIn'),
@@ -353,7 +338,7 @@
       return Easing.linear
     }
   }
-  Util.processEasing = processBezierEasing;
+  connect.processEasing = processBezierEasing;
 
   function selector(el, multi) {
     try{
@@ -374,8 +359,6 @@
     }
   }
 
-  var TweenConstructor = {};
-
   var TweenBase = function TweenBase(targetElement, startObject, endObject, options){
     this.element = targetElement;
     this.playing = false;
@@ -385,7 +368,7 @@
     this.valuesStart = startObject;
     options = options || {};
     this._resetStart = options.resetStart || 0;
-    this._easing = typeof (options.easing) === 'function' ? options.easing : Util.processEasing(options.easing);
+    this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing);
     this._duration = options.duration || defaultOptions.duration;
     this._delay = options.delay || defaultOptions.delay;
     for (var op in options) {
@@ -478,7 +461,7 @@
     }
     return true;
   };
-  TweenConstructor.Tween = TweenBase;
+  connect.tween = TweenBase;
 
   defaultOptions.repeat = 0;
   defaultOptions.repeatDelay = 0;
@@ -627,7 +610,7 @@
     };
     return Tween;
   }(TweenBase));
-  TweenConstructor.Tween = Tween;
+  connect.tween = Tween;
 
   var TweenExtra = (function (Tween) {
     function TweenExtra() {
@@ -655,9 +638,7 @@
     };
     return TweenExtra;
   }(Tween));
-  TweenConstructor.Tween = TweenExtra;
-
-  var TC = TweenConstructor.Tween;
+  connect.tween = TweenExtra;
 
   var TweenCollection = function TweenCollection(els,vS,vE,Ops){
     var this$1 = this;
@@ -670,7 +651,7 @@
       options[i] = Ops || {};
       options[i].delay = i > 0 ? Ops.delay + (Ops.offset||defaultOptions.offset) : Ops.delay;
       if (el instanceof Element) {
-        this$1.tweens.push( new TC(el, vS, vE, options[i]) );
+        this$1.tweens.push( new connect.tween(el, vS, vE, options[i]) );
       } else {
         console.error(("KUTE.js - " + el + " not instanceof [Element]"));
       }
@@ -699,7 +680,7 @@
     var lastTween = this.tweens[this.length-1];
     if (args instanceof TweenCollection){
       lastTween.chain(args.tweens);
-    } else if (args instanceof TC){
+    } else if (args instanceof connect.tween){
       lastTween.chain(args);
     } else {
       throw new TypeError('KUTE.js - invalid chain value')
@@ -728,7 +709,7 @@
     this.element.output = this.element.parentNode.getElementsByTagName('OUTPUT')[0];
     if (!(this.element instanceof HTMLInputElement)) { throw TypeError("Target element is not [HTMLInputElement]") }
     if (this.element.type !=='range') { throw TypeError("Target element is not a range input") }
-    if (!(tween instanceof TweenConstructor.Tween)) { throw TypeError(("tween parameter is not [" + TweenConstructor + "]")) }
+    if (!(tween instanceof connect.tween)) { throw TypeError(("tween parameter is not [" + (connect.tween) + "]")) }
     this.element.setAttribute('value',0);
     this.element.setAttribute('min',0);
     this.element.setAttribute('max',1);
@@ -780,12 +761,12 @@
   function to(element, endObject, optionsObj) {
     optionsObj = optionsObj || {};
     optionsObj.resetStart = endObject;
-    return new TC(selector(element), endObject, endObject, optionsObj)
+    return new connect.tween(selector(element), endObject, endObject, optionsObj)
   }
 
   function fromTo(element, startObject, endObject, optionsObj) {
     optionsObj = optionsObj || {};
-    return new TC(selector(element), startObject, endObject, optionsObj)
+    return new connect.tween(selector(element), startObject, endObject, optionsObj)
   }
 
   function allTo(elements, endObject, optionsObj) {
@@ -952,6 +933,10 @@
     return AnimationDevelopment;
   }(Animation));
 
+  function numbers(a, b, v) {
+    a = +a; b -= a; return a + b * v;
+  }
+
   function trueDimension (dimValue, isAngle) {
     var intValue = parseInt(dimValue) || 0;
     var mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
@@ -1003,6 +988,10 @@
   };
   Components.BackgroundPosition = BackgroundPosition;
 
+  function units(a, b, u, v) {
+    a = +a; b -= a; return ( a + b * v ) + u;
+  }
+
   function radiusOnStartFn(tweenProp){
     if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
       KUTE[tweenProp] = function (elem, a, b, v) {
@@ -1047,16 +1036,6 @@
       };
     }
   }
-  var baseBoxProps = ['top','left','width','height'];
-  var baseBoxOnStart = {};
-  baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
-  var baseBoxModel = {
-    component: 'baseBoxModel',
-    category: 'boxModel',
-    Interpolate: {numbers: numbers},
-    functions: {onStart: baseBoxOnStart}
-  };
-  Components.BoxModelProperties = baseBoxModel;
 
   var boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
                             'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
@@ -1172,6 +1151,7 @@
     for (c in b) { _c[c] = c !== 'a' ? (numbers(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (numbers(a[c],b[c],v) * 100 >> 0 )/100 : null; }
     return !_c.a ? rgb + _c.r + cm + _c.g + cm + _c.b + ep : rgba + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
   }
+
   function onStartColors(tweenProp){
     if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
       KUTE[tweenProp] = function (elem, a, b, v) {
@@ -2296,25 +2276,6 @@
   };
   Components.SVGTransformProperty = svgTransform;
 
-  function on (element, event, handler, options) {
-    options = options || false;
-    element.addEventListener(event, handler, options);
-  }
-
-  function off (element, event, handler, options) {
-    options = options || false;
-    element.removeEventListener(event, handler, options);
-  }
-
-  function one (element, event, handler, options) {
-    on(element, event, function handlerWrapper(e){
-      if (e.target === element) {
-        handler(e);
-        off(element, event, handlerWrapper, options);
-      }
-    }, options);
-  }
-
   var supportPassive = (function () {
     var result = false;
     try {
@@ -2323,14 +2284,16 @@
           result = true;
         }
       });
-      one(document, 'DOMContentLoaded', function (){}, opts);
+      document.addEventListener('DOMContentLoaded', function wrap(){
+        document.removeEventListener('DOMContentLoaded', wrap, opts);
+      }, opts);
     } catch (e) {}
     return result;
   })();
 
   var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
 
-  var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints)||false;
+  var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false;
 
   var touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel';
   var scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement;
@@ -2342,12 +2305,15 @@
     var el = this.element;
     return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
   }
+  function toggleScrollEvents(action,element){
+    element[action](  mouseHoverEvents[0], preventScroll, passiveHandler);
+    element[action](  touchOrWheel, preventScroll, passiveHandler);
+  }
   function scrollIn(){
     var targets = getScrollTargets.call(this);
     if ( 'scroll' in this.valuesEnd && !targets.el.scrolling) {
       targets.el.scrolling = 1;
-      on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
-      on( targets.el, touchOrWheel, preventScroll, passiveHandler);
+      toggleScrollEvents('addEventListener',targets.el);
       targets.st.style.pointerEvents = 'none';
     }
   }
@@ -2355,8 +2321,7 @@
     var targets = getScrollTargets.call(this);
     if ( 'scroll' in this.valuesEnd && targets.el.scrolling) {
       targets.el.scrolling = 0;
-      off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler);
-      off( targets.el, touchOrWheel, preventScroll, passiveHandler);
+      toggleScrollEvents('removeEventListener',targets.el);
       targets.st.style.pointerEvents = '';
     }
   }
@@ -2392,7 +2357,7 @@
     defaultValue: 0,
     Interpolate: {numbers: numbers},
     functions: scrollFunctions,
-    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, getScrollTargets: getScrollTargets }
+    Util: { preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, getScrollTargets: getScrollTargets, toggleScrollEvents: toggleScrollEvents, supportPassive: supportPassive }
   };
   Components.ScrollProperty = scrollProperty;
 
@@ -2626,7 +2591,7 @@
       options.delay = totalDelay;
       options.onComplete = null;
       totalDelay += options.duration;
-      return new TC(el, {text:el.innerHTML}, {text:''}, options );
+      return new connect.tween(el, {text:el.innerHTML}, {text:''}, options );
     }));
     textTween = textTween.concat(newTargets.map(function (el,i){
       var onComplete = function () {target.innerHTML = newText, target.playing = false;};
@@ -2634,7 +2599,7 @@
       options.delay = totalDelay;
       options.onComplete = i === newTargetSegs.length-1 ? onComplete : null;
       totalDelay += options.duration;
-      return new TC(el, {text:''}, {text:newTargetSegs[i].innerHTML}, options );
+      return new connect.tween(el, {text:''}, {text:newTargetSegs[i].innerHTML}, options );
     }));
     textTween.start = function(){
       !target.playing && textTween.map(function (tw){ return tw.start(); }) && (target.playing = true);
@@ -2668,6 +2633,14 @@
   };
   Components.TextWriteProperties = textWrite;
 
+  function arrays(a,b,v){
+    var result = [];
+    for ( var i=0, l=b.length; i> 0 ) / 1000;
+    }
+    return result
+  }
+
   var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
                    : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
                    : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index 6dccc28..87f5cb9 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Extra v2.0.3 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}function i(t,e,n,r){return(t=+t)+(e-=t)*r+n}function a(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}var s={numbers:r,units:i,arrays:a},o={},l={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?l.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(l.now=self.performance.now.bind(self.performance));var u=0,p=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var F={linear:new U(0,0,1,1,"linear"),easingSinusoidalIn:new U(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new U(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new U(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new U(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new U(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new U(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new U(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new U(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new U(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new U(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new U(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new U(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new U(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new U(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new U(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new U(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new U(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new U(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new U(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new U(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new U(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new U(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new U(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new U(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}M.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof F[t])return F[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new U(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),F.linear};var V={},R=function(e,n,r,i){for(var a in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:M.processEasing(i.easing),this._duration=i.duration||g.duration,this._delay=i.delay||g.delay,i){var s="_"+a;s in this||(this[s]=i[a])}var l=this._easing.name;return o[l]||(o[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};R.prototype.start=function(e){if(E(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),o)if("function"==typeof o[n])o[n].call(this,n);else for(var r in o[n])o[n][r].call(this,r);C.call(this),this._startFired=!0}return!u&&p(),this},R.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},R.prototype.close=function(){for(var t in w)for(var e in w[t])w[t][e].call(this,e);this._startFired=!1,c.call(this)},R.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},R.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},R.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},V.Tween=R,g.repeat=0,g.repeatDelay=0,g.yoyo=!1,g.resetStart=!1;var H=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(O.call(this,i,"end"),this._resetStart?this.valuesStart=r:O.call(this,r,"start"),!this._resetStart)for(var a in b)for(var s in b[a])b[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||g.repeat,this._repeatDelay=o.repeatDelay||g.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||g.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,A.call(this),b)for(var r in b[n])b[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,E(this),!u&&p()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(_(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(R);V.Tween=H;var N=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(H);V.Tween=N;var D=V.Tween,q=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in g)&&(g.offset=0),(r=r||{}).delay=r.delay||g.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||g.offset):r.delay,t instanceof Element?i.tweens.push(new D(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};q.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},q.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},q.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},q.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},q.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof q)e.chain(t.tweens);else{if(!(t instanceof D))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},q.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},q.prototype.removeTweens=function(){this.tweens=[]},q.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var B=function(t,e){if(this.element=j(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof V.Tween))throw TypeError("tween parameter is not ["+V+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};B.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},B.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},B.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},B.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},B.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},B.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var X=function(t){try{t.component in d?console.error("KUTE.js - "+t.component+" already registered"):t.property in v?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};X.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:m,prepareStart:y,onStart:o,onComplete:w,crossCheck:b},r=t.category,i=t.property,a=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(d[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)v[i]=t.defaultValue,this.supports=i+" property";else if(t.defaultValues){for(var l in t.defaultValues)v[l]=t.defaultValues[l];this.supports=(a||i)+" "+(i||r)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)g[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][r||i]&&(n[p][e][r||i]=t.functions[p]);else for(var c in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][c]&&(n[p][e][c]=t.functions[p][c]);if(t.Interpolate){for(var h in t.Interpolate){var f=t.Interpolate[h];if("function"!=typeof f||s[h])for(var S in f)"function"!=typeof f[S]||s[h]||(s[h]=f[S]);else s[h]=f}x[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!M[T]&&(M[T]=t.Util[T]);return this};var z=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:m,prepareStart:y,onStart:o,onComplete:w,crossCheck:b},r=e.category,i=e.property,a=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=i+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(a||i)+" "+(i||r)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===a?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(r||i)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(r||i)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)s[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||s[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(i||r)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(X);function Y(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*r(n[1],i[1],a)>>0)/100+"%"})}},W={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:r},functions:Q,Util:{trueDimension:Y}};function K(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=i(n.v,r.v,r.u,a)})}T.BackgroundPosition=W;var G=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],$={};G.map((function(t){return $[t]=0}));var Z={};G.forEach((function(t){Z[t]=K}));var J={component:"borderRadiusProperties",category:"borderRadius",properties:G,defaultValues:$,Interpolate:{units:i},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return Y(e)},onStart:Z},Util:{trueDimension:Y}};function tt(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(a>.99||a<.01?(10*r(n,i,a)>>0)/10:r(n,i,a)>>0)+"px"})}T.BorderRadiusProperties=J;var et={};["top","left","width","height"].map((function(t){return et[t]=tt}));var nt={component:"baseBoxModel",category:"boxModel",Interpolate:{numbers:r},functions:{onStart:et}};T.BoxModelProperties=nt;var rt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],it={};rt.map((function(t){return it[t]=0}));var at={};rt.map((function(t){return at[t]=tt}));var st={component:"boxModelProperties",category:"boxModel",properties:rt,defaultValues:it,Interpolate:{numbers:r},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){var n=Y(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:at}};T.BoxModelProperties=st;var ot={prepareStart:function(t,e){var n=P(this.element,t),r=P(this.element,"width"),i=P(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[Y(e[0]),Y(e[1]),Y(e[2]),Y(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[Y((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),Y(n[1]),Y(n[2]),Y(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,i){for(var a=0,s=[];a<4;a++){var o=e[a].v,l=n[a].v,u=n[a].u||"px";s[a]=(100*r(o,l,i)>>0)/100+u}t.style.clip="rect("+s+")"})}},lt={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:r},functions:ot,Util:{trueDimension:Y}};function ut(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function pt(t,e,n){var i,a={};for(i in e)a[i]="a"!==i?r(t[i],e[i],n)>>0||0:t[i]&&e[i]?(100*r(t[i],e[i],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}function ct(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=pt(n,r,i)})}T.ClipProperty=lt;var ht=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ft={};ht.forEach((function(t){ft[t]="#000"}));var dt={};ht.map((function(t){return dt[t]=ct}));var vt={component:"colorProperties",category:"colors",properties:ht,defaultValues:ft,Interpolate:{numbers:r,colors:pt},functions:{prepareStart:function(t,e){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return ut(e)},onStart:dt},Util:{trueColor:ut}};T.ColorProperties=vt;var gt={},mt=["fill","stroke","stop-color"];function yt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var bt={prepareStart:function(t,e){var n={};for(var r in e){var i=yt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=mt.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var i in e){var a=yt(i),s=/(%|[a-z]+)$/,l=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(mt.includes(a))o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,r,i){t.setAttribute(e,pt(n,r,i))})},n[a]=ut(e[i])||v.htmlAttributes[i];else if(null!==l&&s.test(l)){var u=Y(l).u||Y(e[i]).u,p=/%/.test(u)?"_percent":"_"+u;o.htmlAttributes[a+p]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,i,a){var s=e.replace(p,"");t.setAttribute(s,(1e3*r(n.v,i.v,a)>>0)/1e3+i.u)})},n[a+p]=Y(e[i])}else s.test(e[i])&&null!==l&&(null===l||s.test(l))||(o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in gt)&&(gt[e]=function(t,e,n,i,a){t.setAttribute(e,(1e3*r(n,i,a)>>0)/1e3)})},n[a]=parseFloat(e[i]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=gt)}}},wt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:r,colors:pt},functions:bt,Util:{replaceUppercase:yt,trueColor:ut,trueDimension:Y}};function xt(t,e,n){for(var i=[],a=0;a<3;a++)i[a]=(100*r(t[a],e[a],n)>>0)/100+"px";return"drop-shadow("+i.concat(pt(t[3],e[3],n)).join(" ")+")"}function St(t){return t.replace("-r","R").replace("-s","S")}function Mt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=ut(e[3]),e}function Tt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||i.blur?"blur("+(100*r(n.blur,i.blur,a)>>0)/100+"em)":"")+(n.saturate||i.saturate?"saturate("+(100*r(n.saturate,i.saturate,a)>>0)/100+"%)":"")+(n.invert||i.invert?"invert("+(100*r(n.invert,i.invert,a)>>0)/100+"%)":"")+(n.grayscale||i.grayscale?"grayscale("+(100*r(n.grayscale,i.grayscale,a)>>0)/100+"%)":"")+(n.hueRotate||i.hueRotate?"hue-rotate("+(100*r(n.hueRotate,i.hueRotate,a)>>0)/100+"deg)":"")+(n.sepia||i.sepia?"sepia("+(100*r(n.sepia,i.sepia,a)>>0)/100+"%)":"")+(n.brightness||i.brightness?"brightness("+(100*r(n.brightness,i.brightness,a)>>0)/100+"%)":"")+(n.contrast||i.contrast?"contrast("+(100*r(n.contrast,i.contrast,a)>>0)/100+"%)":"")+(n.dropShadow||i.dropShadow?xt(n.dropShadow,i.dropShadow,a):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},_t={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:r,blur:r,saturate:r,grayscale:r,brightness:r,contrast:r,sepia:r,invert:r,hueRotate:r,dropShadow:{numbers:r,colors:pt,dropShadow:xt}},functions:Et,Util:{parseDropShadow:Mt,parseFilterString:Tt,replaceDashNamespace:St,trueColor:ut}};T.FilterEffects=_t;var Ct={prepareStart:function(t){return P(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(1e3*r(n,i,a)>>0)/1e3})}},kt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:Ct};function It(t,e){return parseFloat(t)/100*e}function Pt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ot(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*r(e.s,n.s,i)>>0)/100,o=(100*r(e.e,n.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Rt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},functions:Vt,Util:{getRectLength:Pt,getPolyLength:Ot,getLineLength:At,getCircleLength:Lt,getEllipseLength:Ut,getTotalLength:Ft,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:jt,percent:It}};function Ht(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}T.SVGDraw=Rt;function Nt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Dt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function qt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Bt(t){if(!(t=qt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=Yt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Gt(t,e){for(var n=Bt(t),r=e&&Bt(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function te(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function ee(t){var e=Zt(t),n=[];return e.map((function(t,r){n[r]=te(e,r)})),n}function ne(t,e){var n=Zt(t),r=Zt(e),i=n.length-1,a=[],s=[],o=ee(t);return o.map((function(t,e){for(var o=0,l=$t("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===i?n.original:Ht(a))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Gt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Jt.call(this,r[0]):r[0],a=this._reverseSecondPath?Jt.call(this,r[1]):r[1];i=ne.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},ie={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:r,toPathString:Ht},functions:re,Util:{l2c:Xt,q2c:zt,a2c:Yt,catmullRom2bezier:Nt,ellipsePath:Dt,path2curve:Gt,pathToAbsolute:Bt,toPathString:Ht,parsePathString:qt,getRotatedCurve:ne,getRotations:ee,getRotationSegments:te,reverseCurve:Jt,getSegments:Zt,createPath:$t}};function ae(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function se(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(o?","+(1e3*o>>0)/1e3:"")+")":"")+(p?"rotate("+(1e3*p>>0)/1e3+")":"")+(f?"skewX("+(1e3*f>>0)/1e3+")":"")+(d?"skewY("+(1e3*d>>0)/1e3+")":"")+(1!==u?"scale("+(1e3*u>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=oe.call(this,t,se(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ue={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:r},functions:le,Util:{parseStringOrigin:ae,parseTransformString:se,parseTransformSVG:oe}};function pe(t,e,n,r){r=r||!1,t.addEventListener(e,n,r)}function ce(t,e,n,r){r=r||!1,t.removeEventListener(e,n,r)}T.SVGTransformProperty=ue;var he=function(){var t,e,n,r,i=!1;try{var a=Object.defineProperty({},"passive",{get:function(){i=!0}});t=document,n=function(){},pe(t,e="DOMContentLoaded",(function i(a){a.target===t&&(n(a),ce(t,e,i,r))}),r=a)}catch(t){}return i}(),fe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],de="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ve=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,ge=!!he&&{passive:!1};function me(t){this.scrolling&&t.preventDefault()}function ye(){var t=this.element;return t===ve?{el:document,st:document.body}:{el:t,st:t}}function be(){var t=ye.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,pe(t.el,fe[0],me,ge),pe(t.el,de,me,ge),t.st.style.pointerEvents="none")}function we(){var t=ye.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ce(t.el,fe[0],me,ge),ce(t.el,de,me,ge),t.st.style.pointerEvents="")}var xe={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ve,this.element===ve?window.pageYOffset||ve.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ve,be.call(this),t[e]=function(t,e,n,i){t.scrollTop=r(e,n,i)>>0})},onComplete:function(t){we.call(this)}},Se={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:r},functions:xe,Util:{preventScroll:me,scrollIn:be,scrollOut:we,getScrollTargets:ye}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,i,a){for(var s=[],o="textShadow"===e?3:4,l=3===o?n[3]:n[4],u=3===o?i[3]:i[4],p=!!(n[5]&&"none"!==n[5]||i[5]&&"none"!==i[5])&&" inset",c=0;c>0)/1e3+"px");t.style[e]=p?pt(l,u,a)+s.join(" ")+p:pt(l,u,a)+s.join(" ")})}T.ScrollProperty=Se;var Te=["boxShadow","textShadow"];function Ee(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=ut(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var _e={};Te.map((function(t){return _e[t]=Me}));var Ce={component:"shadowProperties",properties:Te,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:r,colors:pt},functions:{prepareStart:function(t,e){var n=P(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?v[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=Ee(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=Ee(e,t));return e},onStart:_e},Util:{processShadowArray:Ee,trueColor:ut}};function ke(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,a){t.style[e]=i(n.v,r.v,r.u,a)})}T.ShadowProperties=Ce;var Ie=["fontSize","lineHeight","letterSpacing","wordSpacing"],Pe={};Ie.forEach((function(t){Pe[t]=ke}));var Oe={component:"textProperties",category:"textProperties",properties:Ie,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:i},functions:{prepareStart:function(t){return P(this.element,t)||v[t]},prepareProperty:function(t,e){return Y(e)},onStart:Pe},Util:{trueDimension:Y}};T.TextProperties=Oe;var Ae=String("abcdefghijklmnopqrstuvwxyz").split(""),Le=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ue=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Fe=String("0123456789").split(""),je=Ae.concat(Le,Fe),Ve=je.concat(Ue),Re={alpha:Ae,upper:Le,symbols:Ue,numeric:Fe,alphanumeric:je,all:Ve},He={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Re?Re[n]:n&&n.length?n:Re[g.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.innerHTML=r(e,n,i)>>0})}};function Ne(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function De(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);E.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var E in t.Util)!w[E]&&(w[E]=t.Util[E]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.forEach((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Et={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Tt(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Tt}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,E=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=E*n*w/r+(t+o)/2,d=E*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var T=h-c;if(Math.abs(T)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}T=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(T/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Ee=["fontSize","lineHeight","letterSpacing","wordSpacing"],Te={};Ee.forEach((function(t){Te[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Ee,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Te},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:T,Selector:U,Version:"2.0.6"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index 57222a8..58142bc 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function r(t,e,n){return(t=+t)+(e-=t)*n}var i={numbers:r,units:function(t,e,n,r){return(t=+t)+(e-=t)*r+n},arrays:function(t,e,n){for(var r=[],i=0,a=e.length;i>0)/1e3;return r}},a={},s={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?s.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(s.now=self.performance.now.bind(self.performance));var o=0,u=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var P={linear:new L(0,0,1,1,"linear"),easingSinusoidalIn:new L(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new L(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new L(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new L(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new L(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new L(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new L(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new L(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new L(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new L(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new L(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new L(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new L(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new L(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new L(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new L(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new L(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new L(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new L(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new L(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new L(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new L(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new L(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new L(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}_.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new L(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U={},F=function(e,n,r,i){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,i=i||{},this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:_.processEasing(i.easing),this._duration=i.duration||d.duration,this._delay=i.delay||d.delay,i){var o="_"+s;o in this||(this[o]=i[s])}var u=this._easing.name;return a[u]||(a[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(T(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),a)if("function"==typeof a[n])a[n].call(this,n);else for(var r in a[n])a[n][r].call(this,r);E.call(this),this._startFired=!0}return!o&&u(),this},F.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in y)for(var e in y[t])y[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},U.Tween=F,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var N=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(M.call(this,i,"end"),this._resetStart?this.valuesStart=r:M.call(this,r,"start"),!this._resetStart)for(var a in m)for(var s in m[a])m[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||d.repeat,this._repeatDelay=o.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||d.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,k.call(this),m)for(var r in m[n])m[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,T(this),!o&&u()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);U.Tween=N;var H=U.Tween,D=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in d)&&(d.offset=0),(r=r||{}).delay=r.delay||d.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||d.offset):r.delay,t instanceof Element?i.tweens.push(new H(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};D.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},D.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},D.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},D.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},D.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof D)e.chain(t.tweens);else{if(!(t instanceof H))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},D.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},D.prototype.removeTweens=function(){this.tweens=[]},D.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var V=function(t){try{t.component in h?console.error("KUTE.js - "+t.component+" already registered"):t.property in f?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function z(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||a<.01?(10*r(n,i,a)>>0)/10:r(n,i,a)>>0)+"px"})}V.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:v,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},r=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(h[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)f[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)f[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||r)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)d[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][r||s]&&(n[c][e][r||s]=t.functions[c]);else for(var p in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][p]&&(n[c][e][p]=t.functions[c][p]);if(t.Interpolate){for(var w in t.Interpolate){var x=t.Interpolate[w];if("function"!=typeof x||i[w])for(var T in x)"function"!=typeof x[T]||i[w]||(i[w]=x[T]);else i[w]=x}b[e]=t.Interpolate}if(t.Util)for(var S in t.Util)!_[S]&&(_[S]=t.Util[S]);return this};var Q={};["top","left","width","height"].map((function(t){return Q[t]=B}));var R={component:"baseBoxModel",category:"boxModel",Interpolate:{numbers:r},functions:{onStart:Q}};x.BoxModelProperties=R;var X={};["top","left","width","height"].map((function(t){return X[t]=B}));var K={component:"essentialBoxModel",category:"boxModel",properties:["top","left","width","height"],defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:r},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var n=z(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:X},Util:{trueDimension:z}};function q(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function Y(t,e,n){var i,a={};for(i in e)a[i]="a"!==i?r(t[i],e[i],n)>>0||0:t[i]&&e[i]?(100*r(t[i],e[i],n)>>0)/100:null;return a.a?"rgba("+a.r+","+a.g+","+a.b+","+a.a+")":"rgb("+a.r+","+a.g+","+a.b+")"}function Z(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n,r,i)})}x.BoxModelEssential=K;var $=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};$.forEach((function(t){W[t]="#000"}));var G={};$.map((function(t){return G[t]=Z}));var J={component:"colorProperties",category:"colors",properties:$,defaultValues:W,Interpolate:{numbers:r,colors:Y},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return q(e)},onStart:G},Util:{trueColor:q}};x.ColorProperties=J;var tt={},et=["fill","stroke","stop-color"];function nt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var rt={prepareStart:function(t,e){var n={};for(var r in e){var i=nt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=et.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var i in e){var s=nt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(et.includes(s))a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,r,i){t.setAttribute(e,Y(n,r,i))})},n[s]=q(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=z(u).u||z(e[i]).u,c=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,i,a){var s=e.replace(c,"");t.setAttribute(s,(1e3*r(n.v,i.v,a)>>0)/1e3+i.u)})},n[s+c]=z(e[i])}else o.test(e[i])&&null!==u&&(null===u||o.test(u))||(a.htmlAttributes[s]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,i,a){t.setAttribute(e,(1e3*r(n,i,a)>>0)/1e3)})},n[s]=parseFloat(e[i]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=tt)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:r,colors:Y},functions:rt,Util:{replaceUppercase:nt,trueColor:q,trueDimension:z}};x.HTMLAttributes=it;var at={prepareStart:function(t){return A(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,a){t.style[e]=(1e3*r(n,i,a)>>0)/1e3})}},st={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:at};x.OpacityProperty=st;var ot=String("abcdefghijklmnopqrstuvwxyz").split(""),ut=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),lt=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ct=String("0123456789").split(""),pt=ot.concat(ut,ct),ht=pt.concat(lt),ft={alpha:ot,upper:ut,symbols:lt,numeric:ct,alphanumeric:pt,all:ht},dt={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ft?ft[n]:n&&n.length?n:ft[d.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,i){t.innerHTML=r(e,n,i)>>0})}};function vt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function gt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function bt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function wt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function _t(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function xt(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function Tt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}function St(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}x.TextWriteProperties=mt;var Et={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=I(this.element);return n[t]?n[t]:f[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?r:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=n[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?yt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?bt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?_t(n.translate,r.translate,"px",i):"")+(n.rotate3d?wt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?xt(n.rotate,r.rotate,"deg",i):"")+(n.skew?Tt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?St(n.scale,r.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:yt,translate3d:bt,rotate3d:wt,translate:_t,rotate:xt,scale:St,skew:Tt}};function Ct(t,e){return parseFloat(t)/100*e}function It(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function At(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,s=0-(100*r(e.s,n.s,i)>>0)/100,o=(100*r(e.e,n.e,i)>>0)/100+s;t.style.strokeDashoffset=s+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},functions:jt,Util:{getRectLength:It,getPolyLength:At,getLineLength:Mt,getCircleLength:kt,getEllipseLength:Ot,getTotalLength:Lt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Pt,percent:Ct}};function Ft(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Ut;var Nt="Invalid path value";function Ht(t){return"number"==typeof t&&isFinite(t)}function Dt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Vt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function zt(t,e){return Dt(t,e)<1e-9}var Bt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Qt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Rt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Qt.indexOf(t)>=0}function Xt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Kt(t){return 97==(32|t)}function qt(t){return t>=48&&t<=57}function Yt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Zt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function $t(t){for(;t.index=i)t.err="KUTE.js - "+Nt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Bt[n]&&(t.result.push([e].concat(r.splice(0,Bt[n]))),Bt[n]););}function te(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Kt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=Bt[t.path[t.index].toLowerCase()],t.index++,$t(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Gt(t):Wt(t),t.err.length)return;t.data.push(t.param),$t(t),r=!1,t.index=t.max)break;if(!Yt(t.path.charCodeAt(t.index)))break}}Jt(t)}else Jt(t);else t.err="KUTE.js - "+Nt}function ee(t){var e=new Zt(t),n=e.max;for($t(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Vt(r,i,.5),t.splice(n+1,0,i)}function fe(t,e){var n,r;if("string"==typeof t){var i=ie(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Nt);if(!de(n=t.slice(0)))throw new TypeError(Nt);return n.length>1&&zt(n[0],n[n.length-1])&&n.pop(),ce(n)>0&&n.reverse(),!r&&e&&Ht(e)&&e>0&&he(n,e),n}function de(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Ht(t[0])&&Ht(t[1])}))}function ve(t,e,n){var r=fe(t,n=n||d.morphPrecision),i=fe(e,n),a=r.length-i.length;return pe(r,a<0?-1*a:0),pe(i,a>0?a:0),ue(r,i),[r,i]}ne.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},ne.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var ge={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+Ft(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ve(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):d.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},me={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ft,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ge,Util:{INVALID_INPUT:Nt,isFiniteNumber:Ht,distance:Dt,pointAlong:Vt,samePoint:zt,paramCounts:Bt,SPECIAL_SPACES:Qt,isSpace:Rt,isCommand:Xt,isArc:Kt,isDigit:qt,isDigitStart:Yt,State:Zt,skipSpaces:$t,scanFlag:Wt,scanParam:Gt,finalizeSegment:Jt,scanSegment:te,pathParse:ee,SvgPath:ne,split:re,pathStringToRing:ie,exactRing:ae,approximateRing:se,measure:oe,rotateRing:ue,polygonLength:le,polygonArea:ce,addPoints:pe,bisect:he,normalizeRing:fe,validRing:de,getInterpolationPoints:ve}};for(var ye in x.SVGMorph=me,x){var be=x[ye];x[ye]=new V(be)}return{Animation:V,Components:x,Tween:N,fromTo:function(t,e,n,r){return r=r||{},new H(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new H(j(t),e,e,n)},TweenCollection:D,allFromTo:function(t,e,n,r){return r=r||{},new D(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new D(j(t,!0),e,e,n)},Objects:w,Util:_,Easing:P,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"}}));
+// KUTE.js Standard v2.0.6 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.forEach((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function bt(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function _t(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function xt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var St={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?r:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=n[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?gt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?mt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?wt(n.translate,r.translate,"px",i):"")+(n.rotate3d?yt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?bt(n.rotate,r.rotate,"deg",i):"")+(n.skew?xt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?_t(n.scale,r.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:gt,translate3d:mt,rotate3d:yt,translate:wt,rotate:bt,scale:_t,skew:xt}};function Tt(t,e){return parseFloat(t)/100*e}function Et(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:Lt,Util:{getRectLength:Et,getPolyLength:Ct,getLineLength:It,getCircleLength:At,getEllipseLength:Mt,getTotalLength:kt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Ot,percent:Tt}};_.SVGDraw=Pt;var jt="Invalid path value";function Ut(t){return"number"==typeof t&&isFinite(t)}function Ft(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Nt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ht(t,e){return Ft(t,e)<1e-9}var Dt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Vt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function zt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Vt.indexOf(t)>=0}function Qt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Rt(t){return 97==(32|t)}function Xt(t){return t>=48&&t<=57}function Bt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Kt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function qt(t){for(;t.index=i)t.err="KUTE.js - "+jt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Dt[n]&&(t.result.push([e].concat(r.splice(0,Dt[n]))),Dt[n]););}function Wt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Rt(e=t.path.charCodeAt(t.index)),Qt(e))if(i=Dt[t.path[t.index].toLowerCase()],t.index++,qt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Zt(t):Yt(t),t.err.length)return;t.data.push(t.param),qt(t),r=!1,t.index=t.max)break;if(!Bt(t.path.charCodeAt(t.index)))break}}$t(t)}else $t(t);else t.err="KUTE.js - "+jt}function Gt(t){var e=new Kt(t),n=e.max;for(qt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Nt(r,i,.5),t.splice(n+1,0,i)}function ce(t,e){var n,r;if("string"==typeof t){var i=ee(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(jt);if(!pe(n=t.slice(0)))throw new TypeError(jt);return n.length>1&&Ht(n[0],n[n.length-1])&&n.pop(),oe(n)>0&&n.reverse(),!r&&e&&Ut(e)&&e>0&&le(n,e),n}function pe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Ut(t[0])&&Ut(t[1])}))}function he(t,e,n){var r=ce(t,n=n||f.morphPrecision),i=ce(e,n),a=r.length-i.length;return ue(r,a<0?-1*a:0),ue(i,a>0?a:0),ae(r,i),[r,i]}Jt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Jt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=he(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:jt,isFiniteNumber:Ut,distance:Ft,pointAlong:Nt,samePoint:Ht,paramCounts:Dt,SPECIAL_SPACES:Vt,isSpace:zt,isCommand:Qt,isArc:Rt,isDigit:Xt,isDigitStart:Bt,State:Kt,skipSpaces:qt,scanFlag:Yt,scanParam:Zt,finalizeSegment:$t,scanSegment:Wt,pathParse:Gt,SvgPath:Jt,split:te,pathStringToRing:ee,exactRing:ne,approximateRing:re,measure:ie,rotateRing:ae,polygonLength:se,polygonArea:oe,addPoints:ue,bisect:le,normalizeRing:ce,validRing:pe,getInterpolationPoints:he}};for(var de in _.SVGMorph=fe,_){var ve=_[de];_[de]=new H(ve)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.6"}}));
diff --git a/src/polyfill.min.js b/src/polyfill.min.js
index 7c165cd..ff92dfc 100644
--- a/src/polyfill.min.js
+++ b/src/polyfill.min.js
@@ -1,2 +1,3 @@
+// KUTE.js Polyfill v2.0.6 | 2020 © thednp | MIT-License
 "use strict";
 var r,t,n,e;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=Math.pow(2,53)-1,e=function(r){var t=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p=0?e=i:(e=n+i)<0&&(e=0);e
Date: Sat, 20 Jun 2020 10:23:40 +0000
Subject: [PATCH 160/187]

---
 src/kute-base.js      | 4 ++--
 src/kute-base.min.js  | 4 ++--
 src/kute-extra.js     | 4 ++--
 src/kute-extra.min.js | 4 ++--
 src/kute.min.js       | 4 ++--
 src/polyfill.min.js   | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/kute-base.js b/src/kute-base.js
index 9046cfb..aff7481 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.6 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.7 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.6";
+  var version = "2.0.7";
 
   var KUTE = {};
 
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index 6d7686a..38889df 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Base v2.0.6 | thednp © 2020 | MIT-License
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?o.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(o.now=self.performance.now.bind(self.performance));var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=n||t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in d)for(var n in d[t])d[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrix",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:h,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.6"}}));
+// KUTE.js Base v2.0.7 | thednp © 2020 | MIT-License
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?o.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(o.now=self.performance.now.bind(self.performance));var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=n||t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in d)for(var n in d[t])d[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrix",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:h,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.7"}}));
diff --git a/src/kute-extra.js b/src/kute-extra.js
index 9d0b5ce..96129c9 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Extra v2.0.6 (http://thednp.github.io/kute.js)
+* KUTE.js Extra v2.0.7 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.6";
+  var version = "2.0.7";
 
   var KUTE = {};
 
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index 87f5cb9..5573924 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Extra v2.0.6 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);E.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var E in t.Util)!w[E]&&(w[E]=t.Util[E]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.forEach((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Et={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Tt(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Tt}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,E=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=E*n*w/r+(t+o)/2,d=E*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var T=h-c;if(Math.abs(T)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}T=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(T/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Ee=["fontSize","lineHeight","letterSpacing","wordSpacing"],Te={};Ee.forEach((function(t){Te[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Ee,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Te},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:T,Selector:U,Version:"2.0.6"}}));
+// KUTE.js Extra v2.0.7 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);E.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var E in t.Util)!w[E]&&(w[E]=t.Util[E]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.forEach((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Et={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Tt(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Tt}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,E=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=E*n*w/r+(t+o)/2,d=E*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var T=h-c;if(Math.abs(T)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}T=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(T/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Ee=["fontSize","lineHeight","letterSpacing","wordSpacing"],Te={};Ee.forEach((function(t){Te[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Ee,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Te},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:T,Selector:U,Version:"2.0.7"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index 58142bc..aa00c7d 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.6 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.forEach((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function bt(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function _t(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function xt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var St={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?r:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=n[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?gt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?mt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?wt(n.translate,r.translate,"px",i):"")+(n.rotate3d?yt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?bt(n.rotate,r.rotate,"deg",i):"")+(n.skew?xt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?_t(n.scale,r.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:gt,translate3d:mt,rotate3d:yt,translate:wt,rotate:bt,scale:_t,skew:xt}};function Tt(t,e){return parseFloat(t)/100*e}function Et(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:Lt,Util:{getRectLength:Et,getPolyLength:Ct,getLineLength:It,getCircleLength:At,getEllipseLength:Mt,getTotalLength:kt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Ot,percent:Tt}};_.SVGDraw=Pt;var jt="Invalid path value";function Ut(t){return"number"==typeof t&&isFinite(t)}function Ft(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Nt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ht(t,e){return Ft(t,e)<1e-9}var Dt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Vt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function zt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Vt.indexOf(t)>=0}function Qt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Rt(t){return 97==(32|t)}function Xt(t){return t>=48&&t<=57}function Bt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Kt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function qt(t){for(;t.index=i)t.err="KUTE.js - "+jt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Dt[n]&&(t.result.push([e].concat(r.splice(0,Dt[n]))),Dt[n]););}function Wt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Rt(e=t.path.charCodeAt(t.index)),Qt(e))if(i=Dt[t.path[t.index].toLowerCase()],t.index++,qt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Zt(t):Yt(t),t.err.length)return;t.data.push(t.param),qt(t),r=!1,t.index=t.max)break;if(!Bt(t.path.charCodeAt(t.index)))break}}$t(t)}else $t(t);else t.err="KUTE.js - "+jt}function Gt(t){var e=new Kt(t),n=e.max;for(qt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Nt(r,i,.5),t.splice(n+1,0,i)}function ce(t,e){var n,r;if("string"==typeof t){var i=ee(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(jt);if(!pe(n=t.slice(0)))throw new TypeError(jt);return n.length>1&&Ht(n[0],n[n.length-1])&&n.pop(),oe(n)>0&&n.reverse(),!r&&e&&Ut(e)&&e>0&&le(n,e),n}function pe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Ut(t[0])&&Ut(t[1])}))}function he(t,e,n){var r=ce(t,n=n||f.morphPrecision),i=ce(e,n),a=r.length-i.length;return ue(r,a<0?-1*a:0),ue(i,a>0?a:0),ae(r,i),[r,i]}Jt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Jt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=he(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:jt,isFiniteNumber:Ut,distance:Ft,pointAlong:Nt,samePoint:Ht,paramCounts:Dt,SPECIAL_SPACES:Vt,isSpace:zt,isCommand:Qt,isArc:Rt,isDigit:Xt,isDigitStart:Bt,State:Kt,skipSpaces:qt,scanFlag:Yt,scanParam:Zt,finalizeSegment:$t,scanSegment:Wt,pathParse:Gt,SvgPath:Jt,split:te,pathStringToRing:ee,exactRing:ne,approximateRing:re,measure:ie,rotateRing:ae,polygonLength:se,polygonArea:oe,addPoints:ue,bisect:le,normalizeRing:ce,validRing:pe,getInterpolationPoints:he}};for(var de in _.SVGMorph=fe,_){var ve=_[de];_[de]=new H(ve)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.6"}}));
+// KUTE.js Standard v2.0.7 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.forEach((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function bt(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function _t(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function xt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var St={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?r:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=n[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?gt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?mt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?wt(n.translate,r.translate,"px",i):"")+(n.rotate3d?yt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?bt(n.rotate,r.rotate,"deg",i):"")+(n.skew?xt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?_t(n.scale,r.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:gt,translate3d:mt,rotate3d:yt,translate:wt,rotate:bt,scale:_t,skew:xt}};function Tt(t,e){return parseFloat(t)/100*e}function Et(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:Lt,Util:{getRectLength:Et,getPolyLength:Ct,getLineLength:It,getCircleLength:At,getEllipseLength:Mt,getTotalLength:kt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Ot,percent:Tt}};_.SVGDraw=Pt;var jt="Invalid path value";function Ut(t){return"number"==typeof t&&isFinite(t)}function Ft(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Nt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ht(t,e){return Ft(t,e)<1e-9}var Dt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Vt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function zt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Vt.indexOf(t)>=0}function Qt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Rt(t){return 97==(32|t)}function Xt(t){return t>=48&&t<=57}function Bt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Kt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function qt(t){for(;t.index=i)t.err="KUTE.js - "+jt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Dt[n]&&(t.result.push([e].concat(r.splice(0,Dt[n]))),Dt[n]););}function Wt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Rt(e=t.path.charCodeAt(t.index)),Qt(e))if(i=Dt[t.path[t.index].toLowerCase()],t.index++,qt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Zt(t):Yt(t),t.err.length)return;t.data.push(t.param),qt(t),r=!1,t.index=t.max)break;if(!Bt(t.path.charCodeAt(t.index)))break}}$t(t)}else $t(t);else t.err="KUTE.js - "+jt}function Gt(t){var e=new Kt(t),n=e.max;for(qt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Nt(r,i,.5),t.splice(n+1,0,i)}function ce(t,e){var n,r;if("string"==typeof t){var i=ee(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(jt);if(!pe(n=t.slice(0)))throw new TypeError(jt);return n.length>1&&Ht(n[0],n[n.length-1])&&n.pop(),oe(n)>0&&n.reverse(),!r&&e&&Ut(e)&&e>0&&le(n,e),n}function pe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Ut(t[0])&&Ut(t[1])}))}function he(t,e,n){var r=ce(t,n=n||f.morphPrecision),i=ce(e,n),a=r.length-i.length;return ue(r,a<0?-1*a:0),ue(i,a>0?a:0),ae(r,i),[r,i]}Jt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Jt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=he(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:jt,isFiniteNumber:Ut,distance:Ft,pointAlong:Nt,samePoint:Ht,paramCounts:Dt,SPECIAL_SPACES:Vt,isSpace:zt,isCommand:Qt,isArc:Rt,isDigit:Xt,isDigitStart:Bt,State:Kt,skipSpaces:qt,scanFlag:Yt,scanParam:Zt,finalizeSegment:$t,scanSegment:Wt,pathParse:Gt,SvgPath:Jt,split:te,pathStringToRing:ee,exactRing:ne,approximateRing:re,measure:ie,rotateRing:ae,polygonLength:se,polygonArea:oe,addPoints:ue,bisect:le,normalizeRing:ce,validRing:pe,getInterpolationPoints:he}};for(var de in _.SVGMorph=fe,_){var ve=_[de];_[de]=new H(ve)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.7"}}));
diff --git a/src/polyfill.min.js b/src/polyfill.min.js
index ff92dfc..f710963 100644
--- a/src/polyfill.min.js
+++ b/src/polyfill.min.js
@@ -1,3 +1,3 @@
-// KUTE.js Polyfill v2.0.6 | 2020 © thednp | MIT-License
+// KUTE.js Polyfill v2.0.7 | 2020 © thednp | MIT-License
 "use strict";
 var r,t,n,e;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=Math.pow(2,53)-1,e=function(r){var t=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p=0?e=i:(e=n+i)<0&&(e=0);e
Date: Tue, 23 Jun 2020 16:37:54 +0000
Subject: [PATCH 161/187]

---
 opacityProperty.html       |  6 ++++--
 src/kute-base.js           | 17 ++++-------------
 src/kute-base.min.js       |  4 ++--
 src/kute-extra.js          | 19 +++++--------------
 src/kute-extra.min.js      |  4 ++--
 src/kute.min.js            |  4 ++--
 src/polyfill-legacy.min.js |  3 +++
 src/polyfill.min.js        |  2 +-
 transformFunctions.html    | 10 ++++++++--
 transformMatrix.html       | 29 +++++++++++++++--------------
 10 files changed, 46 insertions(+), 52 deletions(-)
 create mode 100644 src/polyfill-legacy.min.js

diff --git a/opacityProperty.html b/opacityProperty.html
index 363efcb..1a6206a 100644
--- a/opacityProperty.html
+++ b/opacityProperty.html
@@ -121,6 +121,7 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
           
           
    Notes
    
           
      
+            
    • This demo should work with IE9+ browsers.
      • 
             
    • Support for the specific IE8 filter:alpha(opacity=50) have been dropped.
      • 
             
    • Early implementations with vendor preffixes such as -o-opacity, -moz-opacity or -ms-opacity are not supported.
      • 
             
    • The component is an essential part in ALL KUTE.js distributions.
      • 
@@ -140,8 +141,9 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
 
     
     
-    
-    
+    
+    
+    
     
 
     
diff --git a/src/kute-base.js b/src/kute-base.js
index aff7481..d52ba3d 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.7 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.8 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.7";
+  var version = "2.0.8";
 
   var KUTE = {};
 
@@ -24,16 +24,7 @@
   var onStart = {};
 
   var Time = {};
-  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
-  	Time.now = function () {
-  		var time = process.hrtime();
-  		return time[0] * 1000 + time[1] / 1000000;
-  	};
-  } else if (typeof (self) !== 'undefined' &&
-           self.performance !== undefined &&
-  		 self.performance.now !== undefined) {
-  	Time.now = self.performance.now.bind(self.performance);
-  }
+  Time.now = self.performance.now.bind(self.performance);
   var Tick = 0;
   var Ticker = function (time) {
     var i = 0;
@@ -276,7 +267,7 @@
   TweenBase.prototype.start = function start (time) {
     add(this);
     this.playing = true;
-    this._startTime = time || KUTE.Time();
+    this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
     this._startTime += this._delay;
     if (!this._startFired) {
       if (this._onStart) {
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index 38889df..16b7088 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Base v2.0.7 | thednp © 2020 | MIT-License
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?o.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(o.now=self.performance.now.bind(self.performance));var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=n||t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in d)for(var n in d[t])d[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrix",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:h,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.7"}}));
+// KUTE.js Base v2.0.8 | thednp © 2020 | MIT-License
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};o.now=self.performance.now.bind(self.performance);var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=void 0!==n?n:t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in h)for(var n in h[t])h[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrix",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:d,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.8"}}));
diff --git a/src/kute-extra.js b/src/kute-extra.js
index 96129c9..23bf318 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Extra v2.0.7 (http://thednp.github.io/kute.js)
+* KUTE.js Extra v2.0.8 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.7";
+  var version = "2.0.8";
 
   var KUTE = {};
 
@@ -24,16 +24,7 @@
   var onStart = {};
 
   var Time = {};
-  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
-  	Time.now = function () {
-  		var time = process.hrtime();
-  		return time[0] * 1000 + time[1] / 1000000;
-  	};
-  } else if (typeof (self) !== 'undefined' &&
-           self.performance !== undefined &&
-  		 self.performance.now !== undefined) {
-  	Time.now = self.performance.now.bind(self.performance);
-  }
+  Time.now = self.performance.now.bind(self.performance);
   var Tick = 0;
   var Ticker = function (time) {
     var i = 0;
@@ -386,7 +377,7 @@
   TweenBase.prototype.start = function start (time) {
     add(this);
     this.playing = true;
-    this._startTime = time || KUTE.Time();
+    this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
     this._startTime += this._delay;
     if (!this._startFired) {
       if (this._onStart) {
@@ -1162,7 +1153,7 @@
 
   var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
   var defaultColors = {};
-  supportedColors.forEach(function (tweenProp) {
+  supportedColors.map(function (tweenProp) {
     defaultColors[tweenProp] = '#000';
   });
   var colorsOnStart = {};
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index 5573924..0c78553 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Extra v2.0.7 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);E.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var E in t.Util)!w[E]&&(w[E]=t.Util[E]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.forEach((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Et={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Tt(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Tt}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,E=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=E*n*w/r+(t+o)/2,d=E*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var T=h-c;if(Math.abs(T)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}T=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(T/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Ee=["fontSize","lineHeight","letterSpacing","wordSpacing"],Te={};Ee.forEach((function(t){Te[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Ee,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Te},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:T,Selector:U,Version:"2.0.7"}}));
+// KUTE.js Extra v2.0.8 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!w[T]&&(w[T]=t.Util[T]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.map((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Tt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Et(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Et}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Te=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ee={};Te.forEach((function(t){Ee[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Te,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Ee},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:E,Selector:U,Version:"2.0.8"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index aa00c7d..5c3793c 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.7 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};"undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?a.now=function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now&&(a.now=self.performance.now.bind(self.performance));var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=e||t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.forEach((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"}function bt(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}function _t(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function xt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var St={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r=[],i=[],a=[],s={},o=["translate3d","translate","rotate3d","skew"];for(var u in e)if(o.includes(u)){var l="object"==typeof e[u]?e[u].map((function(t){return parseInt(t)})):[parseInt(e[u]),0];s[u]="skew"===u||"translate"===u?[l[0]||0,l[1]||0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?r:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var d=n[f];h[f]=""+c+d in e?parseInt(e[""+c+d]):0}s[p]=h}else s[u]="scale"===u?parseFloat(e[u]):parseInt(e[u]);return s},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,r,i){t.style[e]=(n.perspective||r.perspective?gt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?mt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?wt(n.translate,r.translate,"px",i):"")+(n.rotate3d?yt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?bt(n.rotate,r.rotate,"deg",i):"")+(n.skew?xt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?_t(n.scale,r.scale,i):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:gt,translate3d:mt,rotate3d:yt,translate:wt,rotate:bt,scale:_t,skew:xt}};function Tt(t,e){return parseFloat(t)/100*e}function Et(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:Lt,Util:{getRectLength:Et,getPolyLength:Ct,getLineLength:It,getCircleLength:At,getEllipseLength:Mt,getTotalLength:kt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Ot,percent:Tt}};_.SVGDraw=Pt;var jt="Invalid path value";function Ut(t){return"number"==typeof t&&isFinite(t)}function Ft(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Nt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ht(t,e){return Ft(t,e)<1e-9}var Dt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Vt=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function zt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Vt.indexOf(t)>=0}function Qt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function Rt(t){return 97==(32|t)}function Xt(t){return t>=48&&t<=57}function Bt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Kt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function qt(t){for(;t.index=i)t.err="KUTE.js - "+jt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Dt[n]&&(t.result.push([e].concat(r.splice(0,Dt[n]))),Dt[n]););}function Wt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Rt(e=t.path.charCodeAt(t.index)),Qt(e))if(i=Dt[t.path[t.index].toLowerCase()],t.index++,qt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Zt(t):Yt(t),t.err.length)return;t.data.push(t.param),qt(t),r=!1,t.index=t.max)break;if(!Bt(t.path.charCodeAt(t.index)))break}}$t(t)}else $t(t);else t.err="KUTE.js - "+jt}function Gt(t){var e=new Kt(t),n=e.max;for(qt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Nt(r,i,.5),t.splice(n+1,0,i)}function ce(t,e){var n,r;if("string"==typeof t){var i=ee(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(jt);if(!pe(n=t.slice(0)))throw new TypeError(jt);return n.length>1&&Ht(n[0],n[n.length-1])&&n.pop(),oe(n)>0&&n.reverse(),!r&&e&&Ut(e)&&e>0&&le(n,e),n}function pe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Ut(t[0])&&Ut(t[1])}))}function he(t,e,n){var r=ce(t,n=n||f.morphPrecision),i=ce(e,n),a=r.length-i.length;return ue(r,a<0?-1*a:0),ue(i,a>0?a:0),ae(r,i),[r,i]}Jt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Jt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var fe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=he(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:jt,isFiniteNumber:Ut,distance:Ft,pointAlong:Nt,samePoint:Ht,paramCounts:Dt,SPECIAL_SPACES:Vt,isSpace:zt,isCommand:Qt,isArc:Rt,isDigit:Xt,isDigitStart:Bt,State:Kt,skipSpaces:qt,scanFlag:Yt,scanParam:Zt,finalizeSegment:$t,scanSegment:Wt,pathParse:Gt,SvgPath:Jt,split:te,pathStringToRing:ee,exactRing:ne,approximateRing:re,measure:ie,rotateRing:ae,polygonLength:se,polygonArea:oe,addPoints:ue,bisect:le,normalizeRing:ce,validRing:pe,getInterpolationPoints:he}};for(var de in _.SVGMorph=fe,_){var ve=_[de];_[de]=new H(ve)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.7"}}));
+// KUTE.js Standard v2.0.8 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.map((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="skew"===c?2:3,f="translate"===c?i:"rotate"===c?a:"skew"===c?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:bt}};function xt(t,e){return parseFloat(t)/100*e}function St(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ot={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:kt,Util:{getRectLength:St,getPolyLength:Tt,getLineLength:Et,getCircleLength:Ct,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Mt,percent:xt}};_.SVGDraw=Ot;var Lt="Invalid path value";function Pt(t){return"number"==typeof t&&isFinite(t)}function jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ut(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ft(t,e){return jt(t,e)<1e-9}var Nt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Ht=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Dt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Ht.indexOf(t)>=0}function Vt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function zt(t){return 97==(32|t)}function Qt(t){return t>=48&&t<=57}function Rt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Bt(t){for(;t.index=i)t.err="KUTE.js - "+Lt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Nt[n]&&(t.result.push([e].concat(r.splice(0,Nt[n]))),Nt[n]););}function Zt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=zt(e=t.path.charCodeAt(t.index)),Vt(e))if(i=Nt[t.path[t.index].toLowerCase()],t.index++,Bt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?qt(t):Kt(t),t.err.length)return;t.data.push(t.param),Bt(t),r=!1,t.index=t.max)break;if(!Rt(t.path.charCodeAt(t.index)))break}}Yt(t)}else Yt(t);else t.err="KUTE.js - "+Lt}function $t(t){var e=new Xt(t),n=e.max;for(Bt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ut(r,i,.5),t.splice(n+1,0,i)}function ue(t,e){var n,r;if("string"==typeof t){var i=Jt(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Lt);if(!le(n=t.slice(0)))throw new TypeError(Lt);return n.length>1&&Ft(n[0],n[n.length-1])&&n.pop(),ae(n)>0&&n.reverse(),!r&&e&&Pt(e)&&e>0&&oe(n,e),n}function le(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Pt(t[0])&&Pt(t[1])}))}function ce(t,e,n){var r=ue(t,n=n||f.morphPrecision),i=ue(e,n),a=r.length-i.length;return se(r,a<0?-1*a:0),se(i,a>0?a:0),re(r,i),[r,i]}Wt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Wt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ce(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:Lt,isFiniteNumber:Pt,distance:jt,pointAlong:Ut,samePoint:Ft,paramCounts:Nt,SPECIAL_SPACES:Ht,isSpace:Dt,isCommand:Vt,isArc:zt,isDigit:Qt,isDigitStart:Rt,State:Xt,skipSpaces:Bt,scanFlag:Kt,scanParam:qt,finalizeSegment:Yt,scanSegment:Zt,pathParse:$t,SvgPath:Wt,split:Gt,pathStringToRing:Jt,exactRing:te,approximateRing:ee,measure:ne,rotateRing:re,polygonLength:ie,polygonArea:ae,addPoints:se,bisect:oe,normalizeRing:ue,validRing:le,getInterpolationPoints:ce}};for(var he in _.SVGMorph=pe,_){var fe=_[he];_[he]=new H(fe)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.8"}}));
diff --git a/src/polyfill-legacy.min.js b/src/polyfill-legacy.min.js
new file mode 100644
index 0000000..79c0cbc
--- /dev/null
+++ b/src/polyfill-legacy.min.js
@@ -0,0 +1,3 @@
+// KUTE.js Polyfill v2.0.8 | 2020 © thednp | MIT-License
+"use strict";
+var r,n,t,e;if(Function.prototype.bind||(Function.prototype.bind=function(){var r=Array.prototype.slice,n=this,t=arguments[0],e=r.call(arguments,1);if("function"!=typeof n)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");return function(){var o=e.concat(r.call(arguments));return n.apply(t,o)}}),Array.from||(Array.from=(r=Object.prototype.toString,n=function(n){return"function"==typeof n||"[object Function]"===r.call(n)},t=Math.pow(2,53)-1,e=function(r){var n=function(r){var n=Number(r);return isNaN(n)?0:0!==n&&isFinite(n)?(n>0?1:-1)*Math.floor(Math.abs(n)):n}(r);return Math.min(Math.max(n,0),t)},function(r){var t=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!n(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var f,u=e(o.length),c=n(t)?Object(new t(u)):new Array(u),p=0;p>>0;if("function"!=typeof r)throw new TypeError(r+" is not a function");for(arguments.length>1&&(n=arguments[1]),t=new Array(i),e=0;e>>0,o=0;o>>0;if("function"!=typeof r&&"[object Function]"!==Object.prototype.toString.call(r))throw new TypeError;for(arguments.length>1&&(t=n),e=0;e=0?e=i:(e=t+i)<0&&(e=0);e0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p=0?e=i:(e=n+i)<0&&(e=0);eThe component to cover animation for most transform functions with improved performance and faster value processing.
      
               
               
      
-                
      The KUTE.js Transform Functions enables animation for the CSS3 transform style on Element targets on most modern browsers and specific legacy browsers.
      
+                
      The KUTE.js Transform Functions enables animation for the CSS3 transform style on Element targets on modern browsers. For specific legacy browsers there is another
+                  component called Transform Legacy you will find in the source folders.
      
                 
      Starting with KUTE.js version 2.0, you can set the perspective function as a tween property, while you can still rely on a parent's perspective but for less performance.
      
                 
      All the previous perspective related options have been removed. The transform CSS3 property itself no longer uses preffixes like webkit, moz or ms since all major 
                   browsers are standardized.
      
@@ -138,6 +139,8 @@
               
    • scale function will scale a target element on all axes. Eg. scale:1.5 will scale up a target element by 50%. IE9+
      • 
               
    • matrix is not supported by this component, but is implemented in the transformMatrix component.
      • 
             
    
+            
    As a quick note, all input values for translate, rotate or single axis translation, skew or rotation will be all stacked into translate3d,
+              skew and rotate3d respectivelly; this is to further improve performance on modern browsers.
    
 
             
    Translations
    
 
@@ -254,6 +257,7 @@ var tween2 = KUTE.fromTo(
 
           
    Notes
    
           
      
+            
    • This demo page should work with IE10+ browsers.
      • 
             
    • The order of the transform functions/properties is always the same: perspective, translation, rotation, skew, scale, this way we can prevent 
                 jumpy/janky animations; one of the reasons is consistency in all transform based components and another reason is the order of execution from the draft for 
                 matrix3d recomposition.
      • 
@@ -283,8 +287,10 @@ var tween2 = KUTE.fromTo(
     
     
 
+    
     
-    
+    
+    
     
 
     
diff --git a/transformMatrix.html b/transformMatrix.html
index 4e29255..6670644 100644
--- a/transformMatrix.html
+++ b/transformMatrix.html
@@ -171,20 +171,21 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
 
         
      Notes
      
         
        
-            
      • Why no support for the matrix3d function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees. 
-                As explained here, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify 
-                the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.
        • 
-            
      • The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable. 
-                Such a feature would allow us to kick start animations directly from matrix3d string/array values, but considering the size of this component, I let you draw the conclusions.
        • 
-            
      • Despite the "limitations", we have some tricks available: the fromTo() method will never fail and it's much better when performance and sync are a must, and for to() 
-                method we're storing the values from previous animations to have them ready and available for the next chained animation.
        • 
-            
      • The performance of this component is identical with the Transform Functions component, which is crazy and awesome, all that thanks to the DOMMatrix API built into our modern browsers. 
-                If that's not good enough, the API will automatically switch from matrix3d to matrix and vice-versa whenever needed to save power. Neat?
        • 
-            
      • The rotate3d property makes alot more sense for this component since the DOMMatrix rotate(angleX,angleY,angleZ) method works exactly the same, while the 
-                rotate3d(vectorX,vectorY,vectorZ,angle) function is a thing of the past, according to Chris Coyier nobody use it.
        • 
-            
      • Since the component fully utilize the DOMMatrix API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers 
-                like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.
        • 
-            
      • This component is bundled with the demo/src/kute-extra.js distribution file.
        •   
+          
      • This demo page should work with IE10+ browsers.
        • 
+          
      • Why no support for the matrix3d function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees. 
+              As explained here, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify 
+              the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.
        • 
+          
      • The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable. 
+              Such a feature would allow us to kick start animations directly from matrix3d string/array values, but considering the size of this component, I let you draw the conclusions.
        • 
+          
      • Despite the "limitations", we have some tricks available: the fromTo() method will never fail and it's much better when performance and sync are a must, and for to() 
+              method we're storing the values from previous animations to have them ready and available for the next chained animation.
        • 
+          
      • The performance of this component is identical with the Transform Functions component, which is crazy and awesome, all that thanks to the DOMMatrix API built into our modern browsers. 
+              If that's not good enough, the API will automatically switch from matrix3d to matrix and vice-versa whenever needed to save power. Neat?
        • 
+          
      • The rotate3d property makes alot more sense for this component since the DOMMatrix rotate(angleX,angleY,angleZ) method works exactly the same, while the 
+              rotate3d(vectorX,vectorY,vectorZ,angle) function is a thing of the past, according to Chris Coyier nobody use it.
        • 
+          
      • Since the component fully utilize the DOMMatrix API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers 
+              like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.
        • 
+          
      • This component is bundled with the demo/src/kute-extra.js distribution file.
        •   
         
      
       
 

From d6e9319dc32069bba75c8f95692fd0042e8666c1 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 23 Jun 2020 22:07:51 +0000
Subject: [PATCH 162/187]

---
 src/kute-base.js           | 6 +++---
 src/kute-base.min.js       | 4 ++--
 src/kute-extra.js          | 6 ++++--
 src/kute-extra.min.js      | 4 ++--
 src/kute.min.js            | 4 ++--
 src/polyfill-legacy.min.js | 4 ++--
 src/polyfill.min.js        | 2 +-
 7 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/kute-base.js b/src/kute-base.js
index d52ba3d..0cf4288 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.8 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.9 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.8";
+  var version = "2.0.9";
 
   var KUTE = {};
 
@@ -361,7 +361,7 @@
     return result
   }
 
-  var matrixComponent = 'transformMatrix';
+  var matrixComponent = 'transformMatrixBase';
   var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
                    : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
                    : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index 16b7088..cb593d9 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Base v2.0.8 | thednp © 2020 | MIT-License
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};o.now=self.performance.now.bind(self.performance);var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=void 0!==n?n:t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in h)for(var n in h[t])h[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrix",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:d,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.8"}}));
+// KUTE.js Base v2.0.9 | thednp © 2020 | MIT-License
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};o.now=self.performance.now.bind(self.performance);var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=void 0!==n?n:t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in h)for(var n in h[t])h[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrixBase",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:d,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.9"}}));
diff --git a/src/kute-extra.js b/src/kute-extra.js
index 23bf318..603b8ce 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Extra v2.0.8 (http://thednp.github.io/kute.js)
+* KUTE.js Extra v2.0.9 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.8";
+  var version = "2.0.9";
 
   var KUTE = {};
 
@@ -194,6 +194,8 @@
             propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]);
           } else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) {
             transformObject[tweenProp] = obj[tweenProp];
+          } else if (!defaultValues[tweenProp] && tweenProp === 'transform') {
+            propertiesObject[tweenProp] = obj[tweenProp];
           } else if ( !defaultValues[tweenCategory] && supportComponent && supportComponent.includes(tweenProp) ) {
             propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
           }
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index 0c78553..b5564bd 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Extra v2.0.8 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!w[T]&&(w[T]=t.Util[T]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.map((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Tt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Et(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Et}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Te=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ee={};Te.forEach((function(t){Ee[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Te,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Ee},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:E,Selector:U,Version:"2.0.8"}}));
+// KUTE.js Extra v2.0.9 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!w[T]&&(w[T]=t.Util[T]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.map((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Tt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Et(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Et}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Te=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ee={};Te.forEach((function(t){Ee[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Te,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Ee},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:E,Selector:U,Version:"2.0.9"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index 5c3793c..4e91c03 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.8 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.map((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="skew"===c?2:3,f="translate"===c?i:"rotate"===c?a:"skew"===c?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:bt}};function xt(t,e){return parseFloat(t)/100*e}function St(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ot={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:kt,Util:{getRectLength:St,getPolyLength:Tt,getLineLength:Et,getCircleLength:Ct,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Mt,percent:xt}};_.SVGDraw=Ot;var Lt="Invalid path value";function Pt(t){return"number"==typeof t&&isFinite(t)}function jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ut(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ft(t,e){return jt(t,e)<1e-9}var Nt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Ht=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Dt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Ht.indexOf(t)>=0}function Vt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function zt(t){return 97==(32|t)}function Qt(t){return t>=48&&t<=57}function Rt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Bt(t){for(;t.index=i)t.err="KUTE.js - "+Lt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Nt[n]&&(t.result.push([e].concat(r.splice(0,Nt[n]))),Nt[n]););}function Zt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=zt(e=t.path.charCodeAt(t.index)),Vt(e))if(i=Nt[t.path[t.index].toLowerCase()],t.index++,Bt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?qt(t):Kt(t),t.err.length)return;t.data.push(t.param),Bt(t),r=!1,t.index=t.max)break;if(!Rt(t.path.charCodeAt(t.index)))break}}Yt(t)}else Yt(t);else t.err="KUTE.js - "+Lt}function $t(t){var e=new Xt(t),n=e.max;for(Bt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ut(r,i,.5),t.splice(n+1,0,i)}function ue(t,e){var n,r;if("string"==typeof t){var i=Jt(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Lt);if(!le(n=t.slice(0)))throw new TypeError(Lt);return n.length>1&&Ft(n[0],n[n.length-1])&&n.pop(),ae(n)>0&&n.reverse(),!r&&e&&Pt(e)&&e>0&&oe(n,e),n}function le(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Pt(t[0])&&Pt(t[1])}))}function ce(t,e,n){var r=ue(t,n=n||f.morphPrecision),i=ue(e,n),a=r.length-i.length;return se(r,a<0?-1*a:0),se(i,a>0?a:0),re(r,i),[r,i]}Wt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Wt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ce(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:Lt,isFiniteNumber:Pt,distance:jt,pointAlong:Ut,samePoint:Ft,paramCounts:Nt,SPECIAL_SPACES:Ht,isSpace:Dt,isCommand:Vt,isArc:zt,isDigit:Qt,isDigitStart:Rt,State:Xt,skipSpaces:Bt,scanFlag:Kt,scanParam:qt,finalizeSegment:Yt,scanSegment:Zt,pathParse:$t,SvgPath:Wt,split:Gt,pathStringToRing:Jt,exactRing:te,approximateRing:ee,measure:ne,rotateRing:re,polygonLength:ie,polygonArea:ae,addPoints:se,bisect:oe,normalizeRing:ue,validRing:le,getInterpolationPoints:ce}};for(var he in _.SVGMorph=pe,_){var fe=_[he];_[he]=new H(fe)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.8"}}));
+// KUTE.js Standard v2.0.9 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.map((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="skew"===c?2:3,f="translate"===c?i:"rotate"===c?a:"skew"===c?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:bt}};function xt(t,e){return parseFloat(t)/100*e}function St(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ot={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:kt,Util:{getRectLength:St,getPolyLength:Tt,getLineLength:Et,getCircleLength:Ct,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Mt,percent:xt}};_.SVGDraw=Ot;var Lt="Invalid path value";function Pt(t){return"number"==typeof t&&isFinite(t)}function jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ut(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ft(t,e){return jt(t,e)<1e-9}var Nt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Ht=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Dt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Ht.indexOf(t)>=0}function Vt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function zt(t){return 97==(32|t)}function Qt(t){return t>=48&&t<=57}function Rt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Bt(t){for(;t.index=i)t.err="KUTE.js - "+Lt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Nt[n]&&(t.result.push([e].concat(r.splice(0,Nt[n]))),Nt[n]););}function Zt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=zt(e=t.path.charCodeAt(t.index)),Vt(e))if(i=Nt[t.path[t.index].toLowerCase()],t.index++,Bt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?qt(t):Kt(t),t.err.length)return;t.data.push(t.param),Bt(t),r=!1,t.index=t.max)break;if(!Rt(t.path.charCodeAt(t.index)))break}}Yt(t)}else Yt(t);else t.err="KUTE.js - "+Lt}function $t(t){var e=new Xt(t),n=e.max;for(Bt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ut(r,i,.5),t.splice(n+1,0,i)}function ue(t,e){var n,r;if("string"==typeof t){var i=Jt(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Lt);if(!le(n=t.slice(0)))throw new TypeError(Lt);return n.length>1&&Ft(n[0],n[n.length-1])&&n.pop(),ae(n)>0&&n.reverse(),!r&&e&&Pt(e)&&e>0&&oe(n,e),n}function le(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Pt(t[0])&&Pt(t[1])}))}function ce(t,e,n){var r=ue(t,n=n||f.morphPrecision),i=ue(e,n),a=r.length-i.length;return se(r,a<0?-1*a:0),se(i,a>0?a:0),re(r,i),[r,i]}Wt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Wt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ce(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:Lt,isFiniteNumber:Pt,distance:jt,pointAlong:Ut,samePoint:Ft,paramCounts:Nt,SPECIAL_SPACES:Ht,isSpace:Dt,isCommand:Vt,isArc:zt,isDigit:Qt,isDigitStart:Rt,State:Xt,skipSpaces:Bt,scanFlag:Kt,scanParam:qt,finalizeSegment:Yt,scanSegment:Zt,pathParse:$t,SvgPath:Wt,split:Gt,pathStringToRing:Jt,exactRing:te,approximateRing:ee,measure:ne,rotateRing:re,polygonLength:ie,polygonArea:ae,addPoints:se,bisect:oe,normalizeRing:ue,validRing:le,getInterpolationPoints:ce}};for(var he in _.SVGMorph=pe,_){var fe=_[he];_[he]=new H(fe)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.9"}}));
diff --git a/src/polyfill-legacy.min.js b/src/polyfill-legacy.min.js
index 79c0cbc..daea310 100644
--- a/src/polyfill-legacy.min.js
+++ b/src/polyfill-legacy.min.js
@@ -1,3 +1,3 @@
-// KUTE.js Polyfill v2.0.8 | 2020 © thednp | MIT-License
+// KUTE.js Polyfill v2.0.9 | 2020 © thednp | MIT-License
 "use strict";
-var r,n,t,e;if(Function.prototype.bind||(Function.prototype.bind=function(){var r=Array.prototype.slice,n=this,t=arguments[0],e=r.call(arguments,1);if("function"!=typeof n)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");return function(){var o=e.concat(r.call(arguments));return n.apply(t,o)}}),Array.from||(Array.from=(r=Object.prototype.toString,n=function(n){return"function"==typeof n||"[object Function]"===r.call(n)},t=Math.pow(2,53)-1,e=function(r){var n=function(r){var n=Number(r);return isNaN(n)?0:0!==n&&isFinite(n)?(n>0?1:-1)*Math.floor(Math.abs(n)):n}(r);return Math.min(Math.max(n,0),t)},function(r){var t=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!n(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var f,u=e(o.length),c=n(t)?Object(new t(u)):new Array(u),p=0;p>>0;if("function"!=typeof r)throw new TypeError(r+" is not a function");for(arguments.length>1&&(n=arguments[1]),t=new Array(i),e=0;e>>0,o=0;o>>0;if("function"!=typeof r&&"[object Function]"!==Object.prototype.toString.call(r))throw new TypeError;for(arguments.length>1&&(t=n),e=0;e=0?e=i:(e=t+i)<0&&(e=0);e0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var f,u=e(o.length),c=t(n)?Object(new n(u)):new Array(u),p=0;p>>0;if("function"!=typeof r)throw new TypeError(r+" is not a function");for(arguments.length>1&&(t=arguments[1]),n=new Array(i),e=0;e>>0,o=0;o>>0;if("function"!=typeof r&&"[object Function]"!==Object.prototype.toString.call(r))throw new TypeError;for(arguments.length>1&&(n=t),e=0;e=0?e=i:(e=n+i)<0&&(e=0);e0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p=0?e=i:(e=n+i)<0&&(e=0);e
Date: Wed, 24 Jun 2020 05:38:42 +0000
Subject: [PATCH 163/187]

---
 src/kute-base.js      | 4 ++--
 src/kute-base.min.js  | 4 ++--
 src/kute-extra.js     | 4 ++--
 src/kute-extra.min.js | 4 ++--
 src/kute.min.js       | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/kute-base.js b/src/kute-base.js
index 0cf4288..497e9fa 100644
--- a/src/kute-base.js
+++ b/src/kute-base.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.9 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.10 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.9";
+  var version = "2.0.10";
 
   var KUTE = {};
 
diff --git a/src/kute-base.min.js b/src/kute-base.min.js
index cb593d9..59f788b 100644
--- a/src/kute-base.min.js
+++ b/src/kute-base.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Base v2.0.9 | thednp © 2020 | MIT-License
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};o.now=self.performance.now.bind(self.performance);var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=void 0!==n?n:t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in h)for(var n in h[t])h[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrixBase",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:d,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.9"}}));
+// KUTE.js Base v2.0.10 | thednp © 2020 | MIT-License
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KUTE=n()}(this,(function(){"use strict";var t={},n=[],e="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},i={},r={},o={};o.now=self.performance.now.bind(self.performance);var a=0,s=function(t){for(var e=0;e>0)/1e3;return i}E.prototype.start=function(n){if(g(this),this.playing=!0,this._startTime=void 0!==n?n:t.Time(),this._startTime+=this._delay,!this._startFired){for(var e in this._onStart&&this._onStart.call(this),r)if("function"==typeof r[e])r[e].call(this,e);else for(var i in r[e])r[e][i].call(this,i);w.call(this),this._startFired=!0}return!a&&s(),this},E.prototype.stop=function(){return this.playing&&(_(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},E.prototype.close=function(){for(var t in h)for(var n in h[t])h[t][n].call(this,n);this._startFired=!1,u.call(this)},E.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},E.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},E.prototype.update=function(n){var e,i;if((n=void 0!==n?n:t.Time())1?1:e,i=this._easing(e),this.valuesEnd)t[r](this.element,this.valuesStart[r],this.valuesEnd[r],i);return this._onUpdate&&this._onUpdate.call(this),1!==e||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},y.tween=E;var I="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null,k={component:"transformMatrixBase",property:"transform",functions:{onStart:{transform:function(n){this.valuesEnd[n]&&!t[n]&&(t[n]=function(t,e,i,r){var o=new I,a={};for(var s in i)a[s]="perspective"===s?O(e[s],i[s],r):b(e[s],i[s],r);a.perspective&&(o.m34=-1/a.perspective),o=a.translate3d?o.translate(a.translate3d[0],a.translate3d[1],a.translate3d[2]):o,o=a.rotate3d?o.rotate(a.rotate3d[0],a.rotate3d[1],a.rotate3d[2]):o,a.skew&&(o=a.skew[0]?o.skewX(a.skew[0]):o,o=a.skew[1]?o.skewY(a.skew[1]):o),o=a.scale3d?o.scale(a.scale3d[0],a.scale3d[1],a.scale3d[2]):o,t.style[n]=o.toString()})},CSS3Matrix:function(n){this.valuesEnd.transform&&!t[n]&&(t[n]=I)}}},Interpolate:{perspective:O,translate3d:b,rotate3d:b,skew:b,scale3d:b}};function x(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(r>.99||r<.01?(10*O(e,i,r)>>0)/10:O(e,i,r)>>0)+"px"})}var U=["top","left","width","height"],q={};U.map((function(t){return q[t]=x}));var A={component:"baseBoxModel",category:"boxModel",properties:U,Interpolate:{numbers:O},functions:{onStart:q}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:O},functions:{onStart:function(n){n in this.valuesEnd&&!t[n]&&(t[n]=function(t,e,i,r){t.style[n]=(1e3*O(e,i,r)>>0)/1e3})}}},F=new T(k),j=new T(A),K=new T(B);return{Animation:T,Components:{Transform:F,BoxModel:j,Opacity:K},TweenBase:E,fromTo:function(t,n,e,i){return i=i||{},new y.tween(M(t),n,e,i)},Objects:d,Easing:m,Util:v,Render:f,Interpolate:i,Internals:C,Selector:M,Version:"2.0.10"}}));
diff --git a/src/kute-extra.js b/src/kute-extra.js
index 603b8ce..88cfaa6 100644
--- a/src/kute-extra.js
+++ b/src/kute-extra.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Extra v2.0.9 (http://thednp.github.io/kute.js)
+* KUTE.js Extra v2.0.10 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.9";
+  var version = "2.0.10";
 
   var KUTE = {};
 
diff --git a/src/kute-extra.min.js b/src/kute-extra.min.js
index b5564bd..52b6637 100644
--- a/src/kute-extra.min.js
+++ b/src/kute-extra.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Extra v2.0.9 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!w[T]&&(w[T]=t.Util[T]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.map((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Tt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Et(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Et}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Te=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ee={};Te.forEach((function(t){Ee[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Te,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Ee},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:E,Selector:U,Version:"2.0.9"}}));
+// KUTE.js Extra v2.0.10 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var A={},L={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function U(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}A.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof L[t])return L[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),L.linear};var F=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:A.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var l=this._easing.name;return i[l]||(i[l]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};F.prototype.start=function(e){if(S(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},F.prototype.stop=function(){return this.playing&&(M(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},F.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,l.call(this)},F.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},F.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},F.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=F,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var j=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(k.call(this,i,"end"),this._resetStart?this.valuesStart=r:k.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,I.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,S(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(F);A.tween=j;var V=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.to=function(t,e){},e.prototype.fromTo=function(t,e){},e.prototype.getTotalDuration=function(){},e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(j);A.tween=V;var R=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new A.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};R.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},R.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},R.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},R.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},R.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof R)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},R.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},R.prototype.removeTweens=function(){this.tweens=[]},R.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t,e){if(this.element=U(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,this.element.output=this.element.parentNode.getElementsByTagName("OUTPUT")[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof A.tween))throw TypeError("tween parameter is not ["+A.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};H.prototype.updateBar=function(){var e=this.toolbar.output,n=this.paused?this.toolbar.value:(t.Time()-this._startTime)/this._duration;n=n>.9999?1:n<.01?0:n;var r=this._reversed?1-n:n;this.toolbar.value=r,e&&(e.value=(100*r).toFixed(2)+"%")},H.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},H.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},H.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},H.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),t.Tick=cancelAnimationFrame(t.Ticker))},H.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=t.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),t.Tick=requestAnimationFrame(t.Ticker))};var N=function(t){try{t.component in c?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};N.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(c[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var l in t.defaultValues)h[l]=t.defaultValues[l];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var u in t.defaultOptions)f[u]=t.defaultOptions[u];if(t.functions)for(var p in n)if(p in t.functions)if("function"==typeof t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][a||s]&&(n[p][e][a||s]=t.functions[p]);else for(var b in t.functions[p])!n[p][e]&&(n[p][e]={}),!n[p][e][b]&&(n[p][e][b]=t.functions[p][b]);if(t.Interpolate){for(var x in t.Interpolate){var S=t.Interpolate[x];if("function"!=typeof S||r[x])for(var M in S)"function"!=typeof S[M]||r[x]||(r[x]=S[M]);else r[x]=S}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!w[T]&&(w[T]=t.Util[T]);return this};var D=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];t.apply(this,e)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=e.category,s=e.property,o=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;if("defaultValue"in e?(this.supports=s+" property",this.defaultValue=(e.defaultValue+"").length?"YES":"not set or incorrect"):e.defaultValues&&(this.supports=(o||s)+" "+(s||a)+" properties",this.defaultValues=Object.keys(e.defaultValues).length===o?"YES":"Not set or incomplete"),e.defaultOptions){for(var l in this.extends=[],e.defaultOptions)this.extends.push(l);this.extends.length?this.extends="with <"+this.extends.join(", ")+"> new option(s)":delete this.extends}if(e.functions){for(var u in this.interface=[],this.render=[],this.warning=[],n)u in e.functions?("prepareProperty"===u&&this.interface.push("fromTo()"),"prepareStart"===u&&this.interface.push("to()"),"onStart"===u&&(this.render="can render update")):("prepareProperty"===u&&this.warning.push("fromTo()"),"prepareStart"===u&&this.warning.push("to()"),"onStart"===u&&(this.render="no function to render update"));this.interface.length?this.interface=(a||s)+" can use ["+this.interface.join(", ")+"] method(s)":delete this.uses,this.warning.length?this.warning=(a||s)+" can't use ["+this.warning.join(", ")+"] method(s) because values aren't processed":delete this.warning}if(e.Interpolate){for(var p in this.uses=[],this.adds=[],e.Interpolate){var c=e.Interpolate[p];if("function"==typeof c)r[p]||this.adds.push(""+p),this.uses.push(""+p);else for(var h in c)"function"!=typeof c[h]||r[p]||this.adds.push(""+h),this.uses.push(""+h)}this.uses.length?this.uses="["+this.uses.join(", ")+"] interpolation function(s)":delete this.uses,this.adds.length?this.adds="new ["+this.adds.join(", ")+"] interpolation function(s)":delete this.adds}else this.critical="For "+(s||a)+" no interpolation function[s] is set";return e.Util&&(this.hasUtil=Object.keys(e.Util).join(",")),this},e}(N);function q(t,e,n){return(t=+t)+(e-=t)*n}function B(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a>0)/100+"%  "+(100*q(n[1],r[1],i)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:q},functions:X,Util:{trueDimension:B}};function Y(t,e,n,r){return(t=+t)+(e-=t)*r+n}function Q(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.BackgroundPosition=z;var W=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};W.map((function(t){return K[t]=0}));var G={};W.forEach((function(t){G[t]=Q}));var $={component:"borderRadiusProperties",category:"borderRadius",properties:W,defaultValues:K,Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:G},Util:{trueDimension:B}};function Z(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(i>.99||i<.01?(10*q(n,r,i)>>0)/10:q(n,r,i)>>0)+"px"})}x.BorderRadiusProperties=$;var J=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],tt={};J.map((function(t){return tt[t]=0}));var et={};J.map((function(t){return et[t]=Z}));var nt={component:"boxModelProperties",category:"boxModel",properties:J,defaultValues:tt,Interpolate:{numbers:q},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:et}};x.BoxModelProperties=nt;var rt={prepareStart:function(t,e){var n=C(this.element,t),r=C(this.element,"width"),i=C(this.element,"height");return/rect/.test(n)?n:[0,r,i,0]},prepareProperty:function(t,e){if(e instanceof Array)return[B(e[0]),B(e[1]),B(e[2]),B(e[3])];var n=e.replace(/rect|\(|\)/g,"");return[B((n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g))[0]),B(n[1]),B(n[2]),B(n[3])]},onStart:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,e,n,r){for(var i=0,a=[];i<4;i++){var s=e[i].v,o=n[i].v,l=n[i].u||"px";a[i]=(100*q(s,o,r)>>0)/100+l}t.style.clip="rect("+a+")"})}},it={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:q},functions:rt,Util:{trueDimension:B}};function at(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function st(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?q(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*q(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function ot(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=st(n,r,i)})}x.ClipProperty=it;var lt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ut={};lt.map((function(t){ut[t]="#000"}));var pt={};lt.map((function(t){return pt[t]=ot}));var ct={component:"colorProperties",category:"colors",properties:lt,defaultValues:ut,Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return at(e)},onStart:pt},Util:{trueColor:at}};x.ColorProperties=ct;var ht={},ft=["fill","stroke","stop-color"];function dt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var vt={prepareStart:function(t,e){var n={};for(var r in e){var i=dt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=ft.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=dt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(ft.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,st(n,r,i))})},n[a]=at(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var l=B(o).u||B(e[r]).u,u=/%/.test(l)?"_percent":"_"+l;i.htmlAttributes[a+u]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){var a=e.replace(u,"");t.setAttribute(a,(1e3*q(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+u]=B(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in ht)&&(ht[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*q(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=ht)}}},gt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:q,colors:st},functions:vt,Util:{replaceUppercase:dt,trueColor:at,trueDimension:B}};function mt(t,e,n){for(var r=[],i=0;i<3;i++)r[i]=(100*q(t[i],e[i],n)>>0)/100+"px";return"drop-shadow("+r.concat(st(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n++)e[n]=parseFloat(e[n]);return e[3]=at(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var i=0,a=r.length;i>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*q(n.blur,r.blur,i)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*q(n.saturate,r.saturate,i)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*q(n.invert,r.invert,i)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*q(n.grayscale,r.grayscale,i)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*q(n.hueRotate,r.hueRotate,i)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*q(n.sepia,r.sepia,i)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*q(n.brightness,r.brightness,i)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*q(n.contrast,r.contrast,i)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,i):"")})},crossCheck:function(t){if(this.valuesEnd[t])for(var e in this.valuesStart[t])this.valuesEnd[t][e]||(this.valuesEnd[t][e]=this.valuesStart[t][e])}},St={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:q,blur:q,saturate:q,grayscale:q,brightness:q,contrast:q,sepia:q,invert:q,hueRotate:q,dropShadow:{numbers:q,colors:st,dropShadow:mt}},functions:xt,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:at}};x.FilterEffects=St;var Mt={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*q(n,r,i)>>0)/1e3})}},Tt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:q},functions:Mt};function Et(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ct(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*q(e.s,n.s,r)>>0)/100,s=(100*q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:q},functions:Lt,Util:{getRectLength:_t,getPolyLength:Ct,getLineLength:kt,getCircleLength:It,getEllipseLength:Pt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Et}};function Ft(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}x.SVGDraw=Ut;function jt(t,e){for(var n=[],r=0,i=t.length;i-2*!e>r;r+=2){var a=[{x:+t[r-2],y:+t[r-1]},{x:+t[r],y:+t[r+1]},{x:+t[r+2],y:+t[r+3]},{x:+t[r+4],y:+t[r+5]}];e?r?i-4==r?a[3]={x:+t[0],y:+t[1]}:i-2==r&&(a[2]={x:+t[0],y:+t[1]},a[3]={x:+t[2],y:+t[3]}):a[0]={x:+t[i-2],y:+t[i-1]}:i-4==r?a[3]=a[2]:r||(a[0]={x:+t[r],y:+t[r+1]}),n.push(["C",(-a[0].x+6*a[1].x+a[2].x)/6,(-a[0].y+6*a[1].y+a[2].y)/6,(a[1].x+6*a[2].x-a[3].x)/6,(a[1].y+6*a[2].y-a[3].y)/6,a[2].x,a[2].y])}return n}function Vt(t,e,n,r,i){var a;if(null==i&&null==r&&(r=n),t=+t,e=+e,n=+n,r=+r,null!=i){var s=Math.PI/180,o=t+n*Math.cos(-r*s),l=t+n*Math.cos(-i*s);a=[["M",o,e+n*Math.sin(-r*s)],["A",n,n,0,+(i-r>180),0,l,e+n*Math.sin(-i*s)]]}else a=[["M",t,e],["m",0,-r],["a",n,r,0,1,1,0,2*r],["a",n,r,0,1,1,0,-2*r],["z"]];return a}function Rt(t){if(!t)return null;if(t instanceof Array)return t;var e="\\"+"x09|x0a|x0b|x0c|x0d|x20|xa0|u1680|u180e|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u202f|u205f|u3000|u2028|u2029".split("|").join("\\"),n=new RegExp("([a-z])["+e+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+e+"]*,?["+e+"]*)+)","ig"),r=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+e+"]*,?["+e+"]*","ig"),i={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},a=[];return t.replace(n,(function(t,e,n){var s=[],o=e.toLowerCase();if(n.replace(r,(function(t,e){e&&s.push(+e)})),"m"==o&&s.length>2&&(a.push([e].concat(s.splice(0,2))),o="l",e="m"==e?"l":"L"),"o"==o&&1==s.length&&a.push([e,s[0]]),"r"==o)a.push([e].concat(s));else for(;s.length>=i[o]&&(a.push([e].concat(s.splice(0,i[o]))),i[o]););})),a}function Ht(t){if(!(t=Rt(t))||!t.length)return[["M",0,0]];var e,n=[],r=0,i=0,a=0,s=0,o=0;"M"===t[0][0]&&(a=r=+t[0][1],s=i=+t[0][2],o++,n[0]=["M",r,i]);for(var l=3===t.length&&"M"===t[0][0]&&"R"===t[1][0].toUpperCase()&&"Z"===t[2][0].toUpperCase(),u=void 0,p=void 0,c=o,h=t.length;c1&&(n*=x=Math.sqrt(x),r*=x);var S=n*n,M=r*r,T=(a==s?-1:1)*Math.sqrt(Math.abs((S*M-S*w*w-M*b*b)/(S*w*w+M*b*b)));f=T*n*w/r+(t+o)/2,d=T*-r*b/n+(e+l)/2,c=Math.asin(((e-d)/r).toFixed(9)),h=Math.asin(((l-d)/r).toFixed(9)),c=th&&(c-=2*Math.PI),!s&&h>c&&(h-=2*Math.PI)}var E=h-c;if(Math.abs(E)>v){var _=h,C=o,k=l;h=c+v*(s&&h>c?1:-1),m=qt(o=f+n*Math.cos(h),l=d+r*Math.sin(h),n,r,i,0,s,C,k,[h,_,f,d])}E=h-c;var I=Math.cos(c),P=Math.sin(c),O=Math.cos(h),A=Math.sin(h),L=Math.tan(E/4),U=4/3*n*L,F=4/3*r*L,j=[t,e],V=[t+U*P,e-F*I],R=[o+U*A,l-F*O],H=[o,l];if(V[0]=2*j[0]-V[0],V[1]=2*j[1]-V[1],u)return[V,R,H].concat(m);for(var N=[],D=0,q=(m=[V,R,H].concat(m).join().split(",")).length;D7){t[i].shift();for(var a=t[i];a.length;)n[i]="A",e&&(r[i]="A"),t.splice(i++,0,["C"].concat(a.splice(0,6)));t.splice(i,1)}}function Yt(t,e){for(var n=Ht(t),r=e&&Ht(e),i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},a={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},s=[],o=[],l="",u="",p=0,c=Math.max(n.length,r&&r.length||0);p0?r-s:r].seg,e[s]=[a[0],a[5],a[6],a[3],a[4],a[1],a[2]])})),e}function Gt(t,e){var n=[],r=t.length,i=r-1;return t.map((function(a,s){var o=e+s;0===s||t[o]&&"M"===t[o].seg[0]?n[s]=["M",t[o].x,t[o].y]:(o>=r&&(o-=i),n[s]=t[o].seg)})),n}function $t(t){var e=Wt(t),n=[];return e.map((function(t,r){n[r]=Gt(e,r)})),n}function Zt(t,e){var n=Wt(t),r=Wt(e),i=n.length-1,a=[],s=[],o=$t(t);return o.map((function(t,e){for(var o=0,l=Qt("M0,0L0,0"),u=0;u>0)/1e3)}t.setAttribute("d",1===r?n.original:Ft(i))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Yt(this.valuesStart[t].original,this.valuesEnd[t].original),i=this._reverseFirstPath?Kt.call(this,r[0]):r[0],a=this._reverseSecondPath?Kt.call(this,r[1]):r[1];i=Zt.call(this,i,a),this.valuesStart[t].curve=i,this.valuesEnd[t].curve=a}}}},te={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:q,toPathString:Ft},functions:Jt,Util:{l2c:Nt,q2c:Dt,a2c:qt,catmullRom2bezier:jt,ellipsePath:Vt,path2curve:Yt,pathToAbsolute:Ht,toPathString:Ft,parsePathString:Rt,getRotatedCurve:Zt,getRotations:$t,getRotationSegments:Gt,reverseCurve:Kt,getSegments:Wt,createPath:Qt}};function ee(t,e){var n=e.x,r=e.width;return/[a-zA-Z]/.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function ne(t){var e=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none",n={};if(e instanceof Array)for(var r=0,i=e.length;r>0)/1e3+(s?","+(1e3*s>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(h?"skewX("+(1e3*h>>0)/1e3+")":"")+(f?"skewY("+(1e3*f>>0)/1e3+")":"")+(1!==l?"scale("+(1e3*l>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=re.call(this,t,ne(this.element.getAttribute("transform")));for(var i in r)e[i]=r[i];var a=this.element.ownerSVGElement,s=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));for(var o in e.translate=[s.matrix.e,s.matrix.f],e)o in n&&"origin"!==o||(n[o]=e[o])}}},ae={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:q},functions:ie,Util:{parseStringOrigin:ee,parseTransformString:ne,parseTransformSVG:re}};x.SVGTransformProperty=ae;var se=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){}return t}(),oe="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],le="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,pe=!!se&&{passive:!1};function ce(t){this.scrolling&&t.preventDefault()}function he(){var t=this.element;return t===ue?{el:document,st:document.body}:{el:t,st:t}}function fe(t,e){e[t](oe[0],ce,pe),e[t](le,ce,pe)}function de(){var t=he.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,fe("addEventListener",t.el),t.st.style.pointerEvents="none")}function ve(){var t=he.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,fe("removeEventListener",t.el),t.st.style.pointerEvents="")}var ge={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,this.element===ue?window.pageYOffset||ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ue,de.call(this),t[e]=function(t,e,n,r){t.scrollTop=q(e,n,r)>>0})},onComplete:function(t){ve.call(this)}},me={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:q},functions:ge,Util:{preventScroll:ce,scrollIn:de,scrollOut:ve,getScrollTargets:he,toggleScrollEvents:fe,supportPassive:se}};function ye(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){for(var a=[],s="textShadow"===e?3:4,o=3===s?n[3]:n[4],l=3===s?r[3]:r[4],u=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",p=0;p>0)/1e3+"px");t.style[e]=u?st(o,l,i)+a.join(" ")+u:st(o,l,i)+a.join(" ")})}x.ScrollProperty=me;var be=["boxShadow","textShadow"];function we(t,e){var n,r;for(3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t),r=0;r<4;r++)n[r]=parseFloat(n[r]);return n[4]=at(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].indexOf(e)>-1}))}var xe={};be.map((function(t){return xe[t]=ye}));var Se={component:"shadowProperties",properties:be,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:q,colors:st},functions:{prepareStart:function(t,e){var n=C(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(n)?h[t]:n},prepareProperty:function(t,e){if("string"==typeof e){var n,r="none";r=/inset/.test(e)?"inset":r,n=(e=/inset/.test(e)?e.replace(/(\s+inset|inset+\s)/g,""):e).match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi),e=we(e=e.replace(n[0],"").split(" ").concat([n[0].replace(/\s/g,"")],[r]),t)}else e instanceof Array&&(e=we(e,t));return e},onStart:xe},Util:{processShadowArray:we,trueColor:at}};function Me(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=Y(n.v,r.v,r.u,i)})}x.ShadowProperties=Se;var Te=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ee={};Te.forEach((function(t){Ee[t]=Me}));var _e={component:"textProperties",category:"textProperties",properties:Te,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:Y},functions:{prepareStart:function(t){return C(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:Ee},Util:{trueDimension:B}};x.TextProperties=_e;var Ce=String("abcdefghijklmnopqrstuvwxyz").split(""),ke=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Ie=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Pe=String("0123456789").split(""),Oe=Ce.concat(ke,Pe),Ae=Oe.concat(Ie),Le={alpha:Ce,upper:ke,symbols:Ie,numeric:Pe,alphanumeric:Oe,all:Ae},Ue={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Le?Le[n]:n&&n.length?n:Le[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),l=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(s=l.substring(Math.min(i*l.length,l.length)>>0,0),t.innerHTML=i<1?s+u:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+u:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=l.substring(0,Math.min(i*l.length,l.length)>>0),t.innerHTML=i<1?s+u+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=q(e,n,r)>>0})}};function Fe(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function je(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,l=void 0,u=void 0,p=void 0;s>0)/1e3;return r}x.TextWriteProperties=Ve;var He="undefined"!=typeof DOMMatrix?DOMMatrix:"undefined"!=typeof WebKitCSSMatrix?WebKitCSSMatrix:"undefined"!=typeof CSSMatrix?CSSMatrix:"undefined"!=typeof MSCSSMatrix?MSCSSMatrix:null;var Ne={component:"transformMatrix",property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={};if(this.element.transformMatrix){var r=this.element.transformMatrix;for(var i in r)n[i]=r[i]}else for(var a in e)n[a]="perspective"===a?e[a]:h.transform[a];return n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n={},r={},i={},a={},s={},o=[{translate3d:r},{rotate3d:i},{skew:s},{scale3d:a}],l=function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length){var o=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e)}));n[t]="scale3d"===t?[o[0]||1,o[1]||1,o[2]||1]:[o[0]||0,o[1]||0,o[2]||0]}else if(/[XYZ]/.test(t)){(/translate/.test(t)?r:/rotate/.test(t)?i:/scale/.test(t)?a:/skew/.test(t)?s:{})[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t])}else if("skew"===t){var l=e[t].map((function(t){return parseInt(t)||0}));n[t]=[l[0]||0,l[1]||0]}else n[t]=parseInt(e[t])};for(var u in e)l(u);return o.map((function(t){var e=Object.keys(t)[0],r=t[e];Object.keys(r).length&&!n[e]&&(n[e]="scale3d"===e?[r.x||1,r.y||1,r.z||1]:"skew"===e?[r.x||0,r.y||0]:[r.x||0,r.y||0,r.z||0])})),n}console.error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){var a=new He,s={};for(var o in r)s[o]="perspective"===o?q(n[o],r[o],i):Re(n[o],r[o],i);s.perspective&&(a.m34=-1/s.perspective),a=s.translate3d?a.translate(s.translate3d[0],s.translate3d[1],s.translate3d[2]):a,a=s.rotate3d?a.rotate(s.rotate3d[0],s.rotate3d[1],s.rotate3d[2]):a,s.skew&&(a=s.skew[0]?a.skewX(s.skew[0]):a,a=s.skew[1]?a.skewY(s.skew[1]):a),a=s.scale3d?a.scale(s.scale3d[0],s.scale3d[1],s.scale3d[2]):a,t.style[e]=a.toString()})},CSS3Matrix:function(e){this.valuesEnd.transform&&!t[e]&&(t[e]=He)}},onComplete:function(t){if(this.valuesEnd[t])for(var e in this.element.transformMatrix={},this.valuesEnd[t])this.element.transformMatrix[e]=this.valuesEnd[t][e]},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:q,translate3d:Re,rotate3d:Re,skew:Re,scale3d:Re}};for(var De in x.TransformMatrix=Ne,x){var qe=x[De];x[De]=new D(qe)}return{Animation:D,Components:x,TweenExtra:V,fromTo:function(t,e,n,r){return r=r||{},new A.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new A.tween(U(t),e,e,n)},TweenCollection:R,ProgressBar:H,allFromTo:function(t,e,n,r){return r=r||{},new R(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new R(U(t,!0),e,e,n)},Objects:b,Util:w,Easing:L,CubicBezier:O,Render:u,Interpolate:r,Process:P,Internals:E,Selector:U,Version:"2.0.10"}}));
diff --git a/src/kute.min.js b/src/kute.min.js
index 4e91c03..90a13e7 100644
--- a/src/kute.min.js
+++ b/src/kute.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.9 | thednp © 2020 | MIT-License
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.map((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="skew"===c?2:3,f="translate"===c?i:"rotate"===c?a:"skew"===c?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:bt}};function xt(t,e){return parseFloat(t)/100*e}function St(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ot={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:kt,Util:{getRectLength:St,getPolyLength:Tt,getLineLength:Et,getCircleLength:Ct,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Mt,percent:xt}};_.SVGDraw=Ot;var Lt="Invalid path value";function Pt(t){return"number"==typeof t&&isFinite(t)}function jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ut(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ft(t,e){return jt(t,e)<1e-9}var Nt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Ht=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Dt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Ht.indexOf(t)>=0}function Vt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function zt(t){return 97==(32|t)}function Qt(t){return t>=48&&t<=57}function Rt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Bt(t){for(;t.index=i)t.err="KUTE.js - "+Lt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Nt[n]&&(t.result.push([e].concat(r.splice(0,Nt[n]))),Nt[n]););}function Zt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=zt(e=t.path.charCodeAt(t.index)),Vt(e))if(i=Nt[t.path[t.index].toLowerCase()],t.index++,Bt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?qt(t):Kt(t),t.err.length)return;t.data.push(t.param),Bt(t),r=!1,t.index=t.max)break;if(!Rt(t.path.charCodeAt(t.index)))break}}Yt(t)}else Yt(t);else t.err="KUTE.js - "+Lt}function $t(t){var e=new Xt(t),n=e.max;for(Bt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ut(r,i,.5),t.splice(n+1,0,i)}function ue(t,e){var n,r;if("string"==typeof t){var i=Jt(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Lt);if(!le(n=t.slice(0)))throw new TypeError(Lt);return n.length>1&&Ft(n[0],n[n.length-1])&&n.pop(),ae(n)>0&&n.reverse(),!r&&e&&Pt(e)&&e>0&&oe(n,e),n}function le(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Pt(t[0])&&Pt(t[1])}))}function ce(t,e,n){var r=ue(t,n=n||f.morphPrecision),i=ue(e,n),a=r.length-i.length;return se(r,a<0?-1*a:0),se(i,a>0?a:0),re(r,i),[r,i]}Wt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Wt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ce(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:Lt,isFiniteNumber:Pt,distance:jt,pointAlong:Ut,samePoint:Ft,paramCounts:Nt,SPECIAL_SPACES:Ht,isSpace:Dt,isCommand:Vt,isArc:zt,isDigit:Qt,isDigitStart:Rt,State:Xt,skipSpaces:Bt,scanFlag:Kt,scanParam:qt,finalizeSegment:Yt,scanSegment:Zt,pathParse:$t,SvgPath:Wt,split:Gt,pathStringToRing:Jt,exactRing:te,approximateRing:ee,measure:ne,rotateRing:re,polygonLength:ie,polygonArea:ae,addPoints:se,bisect:oe,normalizeRing:ue,validRing:le,getInterpolationPoints:ce}};for(var he in _.SVGMorph=pe,_){var fe=_[he];_[he]=new H(fe)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.9"}}));
+// KUTE.js Standard v2.0.10 | thednp © 2020 | MIT-License
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},r={},i={},a={};a.now=self.performance.now.bind(self.performance);var s=0,o=function(t){for(var n=0;n(n=1))return n;for(;ei?e=r:n=r,r=.5*(n-e)+e}return r};var L={},P={linear:new O(0,0,1,1,"linear"),easingSinusoidalIn:new O(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new O(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new O(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new O(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new O(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new O(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new O(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new O(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new O(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new O(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new O(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new O(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new O(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new O(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new O(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new O(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new O(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new O(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new O(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new O(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new O(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new O(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new O(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new O(.68,-.55,.265,1.55,"easingBackInOut")};function j(t,e){try{return e?t instanceof HTMLCollection||t instanceof NodeList||t instanceof Array&&t.every((function(t){return t instanceof Element}))?t:document.querySelectorAll(t):t instanceof Element||t===window?t:document.querySelector(t)}catch(e){console.error("KUTE.js - Element(s) not found: "+t+".")}}L.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof P[t])return P[t];if(/bezier/.test(t)){var e=t.replace(/bezier|\s|\(|\)/g,"").split(",");return new O(1*e[0],1*e[1],1*e[2],1*e[3])}return/elastic|bounce/i.test(t)&&console.warn("KUTE.js - CubicBezier doesn't support "+t+" easing."),P.linear};var U=function(e,n,r,a){for(var s in this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n,a=a||{},this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||f.duration,this._delay=a.delay||f.delay,a){var o="_"+s;o in this||(this[o]=a[s])}var u=this._easing.name;return i[u]||(i[u]=function(e){!t[e]&&e===this._easing.name&&(t[e]=this._easing)}),this};U.prototype.start=function(e){if(x(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,!this._startFired){for(var n in this._onStart&&this._onStart.call(this),i)if("function"==typeof i[n])i[n].call(this,n);else for(var r in i[n])i[n][r].call(this,r);T.call(this),this._startFired=!0}return!s&&o(),this},U.prototype.stop=function(){return this.playing&&(S(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.prototype.close=function(){for(var t in m)for(var e in m[t])m[t][e].call(this,e);this._startFired=!1,u.call(this)},U.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},U.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.map((function(t){return t.stop()}))},U.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},L.tween=U,f.repeat=0,f.repeatDelay=0,f.yoyo=!1,f.resetStart=!1;var F=function(e){function n(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];e.apply(this,t),this.valuesStart={},this.valuesEnd={};var r=t[1],i=t[2];if(A.call(this,i,"end"),this._resetStart?this.valuesStart=r:A.call(this,r,"start"),!this._resetStart)for(var a in g)for(var s in g[a])g[a][s].call(this,s);this.paused=!1,this._pauseTime=null;var o=t[3];return this._repeat=o.repeat||f.repeat,this._repeatDelay=o.repeatDelay||f.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||f.yoyo,this._reversed=!1,this}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.start=function(t){if(this._resetStart)for(var n in this.valuesStart=this._resetStart,M.call(this),g)for(var r in g[n])g[n][r].call(this,r);if(this.paused=!1,this._yoyo)for(var i in this.valuesEnd)this.valuesRepeat[i]=this.valuesStart[i];return e.prototype.start.call(this,t),this},n.prototype.stop=function(){return e.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return e.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),this._startTime+=t.Time()-this._pauseTime,x(this),!s&&o()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=t.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){for(var t in this.valuesEnd){var e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}},n.prototype.update=function(e){var n,r;if((e=void 0!==e?e:t.Time())1?1:n,r=this._easing(n),this.valuesEnd)t[i](this.element,this.valuesStart[i],this.valuesEnd[i],r);return this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(isFinite(this._repeat)&&this._repeat--,this._startTime=isFinite(this._repeat)&&this._yoyo&&!this._reversed?e+this._repeatDelay:e,this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1))},n}(U);L.tween=F;var N=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in f)&&(f.offset=0),(r=r||{}).delay=r.delay||f.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||f.offset):r.delay,t instanceof Element?i.tweens.push(new L.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};N.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},N.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},N.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},N.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},N.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof N)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},N.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},N.prototype.removeTweens=function(){this.tweens=[]},N.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{t.component in p?console.error("KUTE.js - "+t.component+" already registered"):t.property in h?console.error("KUTE.js - "+t.property+" already registered"):this.setComponent(t)}catch(t){console.error(t)}};function D(t,e){for(var n,r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=0;a.99||i<.01?(10*V(n,r,i)>>0)/10:V(n,r,i)>>0)+"px"})}H.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,prepareStart:v,onStart:i,onComplete:m,crossCheck:g},a=t.category,s=t.property,o=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;if(p[e]=t.properties||t.subProperties||t.property,"defaultValue"in t)h[s]=t.defaultValue,this.supports=s+" property";else if(t.defaultValues){for(var u in t.defaultValues)h[u]=t.defaultValues[u];this.supports=(o||s)+" "+(s||a)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)f[l]=t.defaultOptions[l];if(t.functions)for(var c in n)if(c in t.functions)if("function"==typeof t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][a||s]&&(n[c][e][a||s]=t.functions[c]);else for(var w in t.functions[c])!n[c][e]&&(n[c][e]={}),!n[c][e][w]&&(n[c][e][w]=t.functions[c][w]);if(t.Interpolate){for(var _ in t.Interpolate){var x=t.Interpolate[_];if("function"!=typeof x||r[_])for(var S in x)"function"!=typeof x[S]||r[_]||(r[_]=x[S]);else r[_]=x}y[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!b[T]&&(b[T]=t.Util[T]);return this};var Q=["top","left","width","height"],R={};Q.map((function(t){return R[t]=z}));var X={component:"essentialBoxModel",category:"boxModel",properties:Q,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:V},functions:{prepareStart:function(t){return I(this.element,t)||h[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:D}};function B(t){if(/rgb|rgba/.test(t)){var e=t.replace(/\s|\)/,"").split("(")[1].split(","),n=e[3]?e[3]:null;return n?{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2]),a:parseFloat(n)}:{r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])}}if(/^#/.test(t)){var r=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r}));var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}(t);return{r:r.r,g:r.g,b:r.b}}if(/transparent|none|initial|inherit/.test(t))return{r:0,g:0,b:0,a:0};if(!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var a=getComputedStyle(i,null).color;return a=/rgb/.test(a)?a.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",{r:parseInt(a[0]),g:parseInt(a[1]),b:parseInt(a[2])}}}function K(t,e,n){var r,i={};for(r in e)i[r]="a"!==r?V(t[r],e[r],n)>>0||0:t[r]&&e[r]?(100*V(t[r],e[r],n)>>0)/100:null;return i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}function q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}_.BoxModelEssential=X;var Y=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],Z={};Y.map((function(t){Z[t]="#000"}));var $={};Y.map((function(t){return $[t]=q}));var W={component:"colorProperties",category:"colors",properties:Y,defaultValues:Z,Interpolate:{numbers:V,colors:K},functions:{prepareStart:function(t,e){return I(this.element,t)||h[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};_.ColorProperties=W;var G={},J=["fill","stroke","stop-color"];function tt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var et={prepareStart:function(t,e){var n={};for(var r in e){var i=tt(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=J.includes(i)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(r)?1:0)}return n},prepareProperty:function(t,e){var n={};for(var r in e){var a=tt(r),s=/(%|[a-z]+)$/,o=this.element.getAttribute(a.replace(/_+[a-z]+/,""));if(J.includes(a))i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,K(n,r,i))})},n[a]=B(e[r])||h.htmlAttributes[r];else if(null!==o&&s.test(o)){var u=D(o).u||D(e[r]).u,l=/%/.test(u)?"_percent":"_"+u;i.htmlAttributes[a+l]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){var a=e.replace(l,"");t.setAttribute(a,(1e3*V(n.v,r.v,i)>>0)/1e3+r.u)})},n[a+l]=D(e[r])}else s.test(e[r])&&null!==o&&(null===o||s.test(o))||(i.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[e]=function(t,e,n,r,i){t.setAttribute(e,(1e3*V(n,r,i)>>0)/1e3)})},n[a]=parseFloat(e[r]))}return n},onStart:{attr:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(e,n,r,i){for(var a in r)t.attributes[a](e,a,n[a],r[a],i)})},attributes:function(e){!t[e]&&this.valuesEnd.attr&&(t[e]=G)}}},nt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:V,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};_.HTMLAttributes=nt;var rt={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=(1e3*V(n,r,i)>>0)/1e3})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:V},functions:rt};_.OpacityProperty=it;var at=String("abcdefghijklmnopqrstuvwxyz").split(""),st=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ot=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ut=String("0123456789").split(""),lt=at.concat(st,ut),ct=lt.concat(ot),pt={alpha:at,upper:st,symbols:ot,numeric:ut,alphanumeric:lt,all:ct},ht={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in pt?pt[n]:n&&n.length?n:pt[f.textChars];t[e]=function(t,e,n,i){var a="",s="",o=e.substring(0),u=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=u.substring(Math.min(i*u.length,u.length)>>0,0),t.innerHTML=i<1?s+l:""===n?" ":n):" "===n?(a=o.substring(0,Math.min((1-i)*o.length,o.length)>>0),t.innerHTML=i<1?a+l:""===n?" ":n):(a=o.substring(o.length,Math.min(i*o.length,o.length)>>0),s=u.substring(0,Math.min(i*u.length,u.length)>>0),t.innerHTML=i<1?s+l+a:""===n?" ":n)}}},number:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,e,n,r){t.innerHTML=V(e,n,r)>>0})}};function ft(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var i=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=i,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function dt(t,e){var n=[];if(t.children.length){for(var r,i=[],a=t.innerHTML,s=0,o=t.children.length,u=void 0,l=void 0,c=void 0;s>0)/1e3+n+")"}function mt(t,e,n,r){for(var i=[],a=0;a<3;a++)i[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return"translate3d("+i.join(",")+")"}function yt(t,e,n,r){var i="";return i+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",i+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",i+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function bt(t,e,n,r){var i=[];return i[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+i.join(",")+")"}_.TextWriteProperties=vt;var _t={component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t,e){var n=C(this.element);return n[t]?n[t]:h[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},i=[],a=[],s=[],o=["translate3d","translate","rotate3d","skew"];for(var u in e){var l="object"==typeof e[u]&&e[u].length?e[u].map((function(t){return parseInt(t)})):parseInt(e[u]);if(o.includes(u))r["translate"===u||"rotate"===u?u+"3d":u]="skew"===u?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===u?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0];else if(/[XYZ]/.test(u)){for(var c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="skew"===c?2:3,f="translate"===c?i:"rotate"===c?a:"skew"===c?s:{},d=0;d>0)/1e3)+n,i[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+i.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:bt}};function xt(t,e){return parseFloat(t)/100*e}function St(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},i=function(t,e){return null!=t&&null!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var a=0;a>0)/100,a=0-(100*V(e.s,n.s,r)>>0)/100,s=(100*V(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=a+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+i+"px"})}},Ot={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:V},functions:kt,Util:{getRectLength:St,getPolyLength:Tt,getLineLength:Et,getCircleLength:Ct,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Mt,percent:xt}};_.SVGDraw=Ot;var Lt="Invalid path value";function Pt(t){return"number"==typeof t&&isFinite(t)}function jt(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Ut(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Ft(t,e){return jt(t,e)<1e-9}var Nt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},Ht=[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279];function Dt(t){return 10===t||13===t||8232===t||8233===t||32===t||9===t||11===t||12===t||160===t||t>=5760&&Ht.indexOf(t)>=0}function Vt(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0}return!1}function zt(t){return 97==(32|t)}function Qt(t){return t>=48&&t<=57}function Rt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){this.index=0,this.path=t,this.max=t.length,this.result=[],this.param=0,this.err="",this.segmentStart=0,this.data=[]}function Bt(t){for(;t.index=i)t.err="KUTE.js - "+Lt;else if(43!==(e=t.path.charCodeAt(r))&&45!==e||(e=++r2&&(t.result.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.result.push([e].concat(r));else for(;r.length>=Nt[n]&&(t.result.push([e].concat(r.splice(0,Nt[n]))),Nt[n]););}function Zt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=zt(e=t.path.charCodeAt(t.index)),Vt(e))if(i=Nt[t.path[t.index].toLowerCase()],t.index++,Bt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?qt(t):Kt(t),t.err.length)return;t.data.push(t.param),Bt(t),r=!1,t.index=t.max)break;if(!Rt(t.path.charCodeAt(t.index)))break}}Yt(t)}else Yt(t);else t.err="KUTE.js - "+Lt}function $t(t){var e=new Xt(t),n=e.max;for(Bt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Ut(r,i,.5),t.splice(n+1,0,i)}function ue(t,e){var n,r;if("string"==typeof t){var i=Jt(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Lt);if(!le(n=t.slice(0)))throw new TypeError(Lt);return n.length>1&&Ft(n[0],n[n.length-1])&&n.pop(),ae(n)>0&&n.reverse(),!r&&e&&Pt(e)&&e>0&&oe(n,e),n}function le(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Pt(t[0])&&Pt(t[1])}))}function ce(t,e,n){var r=ue(t,n=n||f.morphPrecision),i=ue(e,n),a=r.length-i.length;return se(r,a<0?-1*a:0),se(i,a>0?a:0),re(r,i),[r,i]}Wt.prototype.iterate=function(t){var e,n=this.segments,r={},i=!1,a=0,s=0,o=0,u=0;return n.map((function(e,n){var l=t(e,n,a,s);Array.isArray(l)&&(r[n]=l,i=!0);var c=e[0]===e[0].toLowerCase();switch(e[0]){case"m":case"M":return a=e[1]+(c?a:0),s=e[2]+(c?s:0),o=a,void(u=s);case"h":case"H":return void(a=e[1]+(c?a:0));case"v":case"V":return void(s=e[1]+(c?s:0));case"z":case"Z":return a=o,void(s=u);default:a=e[e.length-2]+(c?a:0),s=e[e.length-1]+(c?s:0)}})),i?(e=[],n.map((function(t,n){void 0!==r[n]?r[n].map((function(t){e.push(t)})):e.push(t)})),this.segments=e,this):this},Wt.prototype.abs=function(){return this.iterate((function(t,e,n,r){var i,a=t[0],s=a.toUpperCase();if(a!==s)switch(t[0]=s,a){case"v":return void(t[1]+=r);case"a":return t[6]+=n,void(t[7]+=r);default:for(i=1;i0&&"m"!==e&&"M"!==e&&e===n.segments[a-1][0],r=r.concat(t?i.slice(1):i)})),r.join(" ").replace(/ ?([achlmqrstvz]) ?/gi,"$1").replace(/ \-/g,"-").replace(/zm/g,"z m")};var pe={component:"svgMorph",property:"path",defaultValue:[],Interpolate:V,defaultOptions:{morphPrecision:10,morphIndex:0},functions:{prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?j(e):null,i=new RegExp("\\n","ig");return"object"==typeof e&&e.pathArray?e:(r&&/path|glyph/.test(r.tagName)?n.original=r.getAttribute("d").replace(i,""):!r&&/[a-z][^a-z]*/gi.test(e)&&(n.original=e.replace(i,"")),n)},onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,e,n,r){var i,a=e.pathArray,s=n.pathArray,o=s.length;i=1===r?n.original:"M"+function(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}(a,s,o,r).join("L")+"Z",t.setAttribute("d",i)})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=ce(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):f.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},Util:{INVALID_INPUT:Lt,isFiniteNumber:Pt,distance:jt,pointAlong:Ut,samePoint:Ft,paramCounts:Nt,SPECIAL_SPACES:Ht,isSpace:Dt,isCommand:Vt,isArc:zt,isDigit:Qt,isDigitStart:Rt,State:Xt,skipSpaces:Bt,scanFlag:Kt,scanParam:qt,finalizeSegment:Yt,scanSegment:Zt,pathParse:$t,SvgPath:Wt,split:Gt,pathStringToRing:Jt,exactRing:te,approximateRing:ee,measure:ne,rotateRing:re,polygonLength:ie,polygonArea:ae,addPoints:se,bisect:oe,normalizeRing:ue,validRing:le,getInterpolationPoints:ce}};for(var he in _.SVGMorph=pe,_){var fe=_[he];_[he]=new H(fe)}return{Animation:H,Components:_,Tween:F,fromTo:function(t,e,n,r){return r=r||{},new L.tween(j(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new L.tween(j(t),e,e,n)},TweenCollection:N,allFromTo:function(t,e,n,r){return r=r||{},new N(j(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new N(j(t,!0),e,e,n)},Objects:w,Util:b,Easing:P,CubicBezier:O,Render:l,Interpolate:r,Process:k,Internals:E,Selector:j,Version:"2.0.10"}}));

From 997972c35f6bd37aab4dff7725828c565c5efbd4 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 24 Jun 2020 05:44:51 +0000
Subject: [PATCH 164/187]

---
 transformFunctions.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/transformFunctions.html b/transformFunctions.html
index 7e920be..c5e6400 100644
--- a/transformFunctions.html
+++ b/transformFunctions.html
@@ -289,7 +289,7 @@ var tween2 = KUTE.fromTo(
 
     
     
-    
+    
     
     
 

From ca0b3c6a15b5a1828fd0fa6aac79564dd8f6cbd8 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 2 Jul 2020 10:49:06 +0000
Subject: [PATCH 165/187]

---
 assets/css/kute.css        | 820 ++++++++++++++++++++++++++++++++++---
 assets/css/reset.css       | 423 +++++++++++--------
 assets/css/spicr-theme.css | 162 ++++++++
 assets/js/home.js          |  74 +---
 backgroundPosition.html    |   2 +-
 borderRadius.html          |   2 +-
 boxModel.html              |   2 +-
 clipProperty.html          |   2 +-
 colorProperties.html       |   2 +-
 filterEffects.html         |   2 +-
 htmlAttributes.html        |   2 +-
 index.html                 | 198 ++++++---
 opacityProperty.html       |   2 +-
 progress.html              |   2 +-
 scrollProperty.html        |   2 +-
 shadowProperties.html      |   2 +-
 src/kute-base.js           |   4 +-
 src/kute-base.min.js       |   4 +-
 src/kute-extra.js          |   4 +-
 src/kute-extra.min.js      |   4 +-
 src/kute.min.js            |   4 +-
 svgCubicMorph.html         |   2 +-
 svgDraw.html               |   2 +-
 svgMorph.html              |   2 +-
 svgTransform.html          |   2 +-
 textProperties.html        |   2 +-
 textWrite.html             |   2 +-
 transformFunctions.html    |   2 +-
 transformMatrix.html       |   2 +-
 29 files changed, 1363 insertions(+), 372 deletions(-)
 create mode 100644 assets/css/spicr-theme.css

diff --git a/assets/css/kute.css b/assets/css/kute.css
index 4ae05ba..8aa85a0 100644
--- a/assets/css/kute.css
+++ b/assets/css/kute.css
@@ -6,16 +6,15 @@
 /* GLOBAL STYLES
 -------------------------------------------------- */
 body {
-  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-	line-height: 24px; /* ~25px */
-	letter-spacing: 0.02em;
   color: #ccc;
   background-color: #08263d;
   position: relative
 }
 
-.condensed { font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal !important;}
+.condensed { 
+	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; 
+	font-weight: normal !important
+}
 
 /* smooth scroll */
 html {
@@ -259,10 +258,9 @@ h1.example-item span {
 
 .media {float: left; margin: 5px 20px 0 0; height: auto; font-size: 64px; line-height: 64px; width: 64px; text-align: center}
 
-
 /* COLUMN STYLES
 -------------------------------------------------- */
-.columns { position: relative; width: auto; margin: 0 -20px; display:flex; flex-direction: column; }
+.columns { position: relative; width: 100%; margin: 0 -20px; display:flex; flex-wrap: wrap; }
 .columns > [class*="col"] { padding: 0 20px; position: relative }
 .columns.welcome {min-height:330px}
 
@@ -290,30 +288,6 @@ h1.example-item span {
 	}
 }
 
-/* welcome */
-.col3.bg { /*min-height: 120px;*/ width: 32%; margin: 1.3% 1.3% 0 0; float: left; padding: 0; 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; }*/
-
-.frontpage { margin-top: 30%; }
-
-.columns.welcome .col2:nth-child(2) { position: absolute; top: 0; z-index: -1; left: 20%; opacity: 0.5 }
-.kute-logo {
-	margin-top: 12%;
-}
-
-@media (min-width: 768px){
-	.columns.welcome .col2:nth-child(2) { position: relative; top: auto; left: auto; z-index: auto; opacity: 1 }
-}
 
 /* STYLING CONTENT
 -------------------------------------------------- */
@@ -336,24 +310,18 @@ a:focus {
 }
 
 hr {
-    border: 1px solid #444;
-    margin: 10px 0;	
+	border: 1px solid #444;
+	margin: 10px 0;	
 }
 
-
-.d-block {display: block;}
-.d-flex {display: flex;}
-.d-none {display: none;}
-
-.align-self-center {align-self: center;}
-.align-items-center {align-items: center;}
-.justify-content-space {justify-content: space-between;}
-.justify-content-even {justify-content: space-evenly;}
-
-
-
 /* buttons */
-.btns .btn { float: left; line-height: 1; margin: 0 3px 3px 0}
+.btns {
+	display: inline-flex;
+	flex: 1 1 auto;
+	justify-content: center;
+	text-align: center;
+}
+.btns .btn { display:inline; line-height: 1; margin: 0 3px 3px 0;}
 .btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; }
 .bg-gray { color:#fff; background-color: #555; fill: #555 }
 .btn.active { background-color: #2196F3 }
@@ -495,5 +463,761 @@ kbd {
 	font-weight: bold
 }
 
-.kute-logo,
-#rectangle {transform-origin: 50% 50%;}
\ No newline at end of file
+#rectangle {transform-origin: 50% 50%;}
+
+.w-20{
+	width:20% !important
+}
+.w-25{
+	width:25% !important
+}
+.w-33{
+	width:33.33% !important
+}
+.w-50{
+	width:50% !important
+}
+.w-66{
+	width:66.67% !important
+}
+.w-75{
+	width:75% !important
+}
+.w-80{
+	width:80% !important
+}
+.w-100{
+	width:100% !important
+}
+.w-auto{
+	width:auto !important
+}
+.h-20vh{
+	height:20vh !important
+}
+.h-25vh{
+	height:25vh !important
+}
+.h-33vh{
+	height:33.33vh !important
+}
+.h-50vh{
+	height:50vh !important
+}
+.h-66vh{
+	height:66.67vh !important
+}
+.h-75vh{
+	height:75vh !important
+}
+.h-80vh{
+	height:80vh !important
+}
+.h-100{
+	height:100% !important
+}
+.h-auto{
+	height:auto !important
+}
+@media(min-width: 768px){
+	.w-md-20{
+		width:20% !important
+	}
+	.w-md-25{
+		width:25% !important
+	}
+	.w-md-33{
+		width:33.33% !important
+	}
+	.w-md-50{
+		width:50% !important
+	}
+	.w-md-66{
+		width:66.67% !important
+	}
+	.w-md-75{
+		width:75% !important
+	}
+	.w-md-80{
+		width:80% !important
+	}
+	.w-md-100{
+		width:100% !important
+	}
+	.w-md-auto{
+		width:auto !important
+	}
+	.h-md-20vh{
+		height:20vh !important
+	}
+	.h-md-25vh{
+		height:25vh !important
+	}
+	.h-md-33vh{
+		height:33.33vh !important
+	}
+	.h-md-50vh{
+		height:50vh !important
+	}
+	.h-md-66vh{
+		height:66.67vh !important
+	}
+	.h-md-75vh{
+		height:75vh !important
+	}
+	.h-md-80vh{
+		height:80vh !important
+	}
+	.h-md-100{
+		height:100% !important
+	}
+	.h-md-auto{
+		height:auto !important
+	}
+}
+.d-none{
+	display:none
+}
+.d-inline{
+	display:inline
+}
+.d-flex{
+	display:flex
+}
+.d-block{
+	display:block
+}
+@media(min-width: 768px){
+	.d-md-none{
+		display:none
+	}
+	.d-md-inline{
+		display:inline
+	}
+	.d-md-flex{
+		display:flex
+	}
+	.d-md-block{
+		display:block
+	}
+}
+.flex-row{
+	flex-direction:row
+}
+.flex-row-reverse{
+	flex-direction:row-reverse
+}
+.flex-column{
+	flex-direction:column
+}
+.flex-column-reverse{
+	flex-direction:column-reverse
+}
+.align-items-start{
+	align-items:flex-start
+}
+.align-items-end{
+	align-items:flex-end
+}
+.align-items-center{
+	align-items:center
+}
+.align-items-baseline{
+	align-items:baseline
+}
+.align-items-stretch{
+	align-items:stretch
+}
+.align-self-start{
+	align-self:flex-start
+}
+.align-self-end{
+	align-self:flex-end
+}
+.align-self-center{
+	align-self:center
+}
+.align-self-baseline{
+	align-self:baseline
+}
+.align-self-stretch{
+	align-self:stretch
+}
+.justify-content-start{
+	justify-content:flex-start
+}
+.justify-content-end{
+	justify-content:flex-end
+}
+.justify-content-center{
+	justify-content:center
+}
+.justify-content-between{
+	justify-content:space-between
+}
+.justify-content-around{
+	justify-content:space-around
+}
+.align-content-start{
+	align-content:flex-start
+}
+.align-content-end{
+	align-content:flex-end
+}
+.align-content-center{
+	align-content:center
+}
+.align-content-around{
+	align-content:space-around
+}
+.align-content-stretch{
+	align-content:stretch
+}
+.flex-fill{
+	flex:1 1 auto !important
+}
+.flex-grow-1{
+	flex-grow:1
+}
+.flex-grow-0{
+	flex-grow:0
+}
+.flex-shrink-1{
+	flex-shrink:1
+}
+.flex-shrink-0{
+	flex-shrink:0
+}
+.flex-nowrap{
+	flex-wrap:nowrap
+}
+.flex-wrap{
+	flex-wrap:wrap
+}
+.flex-wrap-reverse{
+	flex-wrap:wrap-reverse
+}
+@media(min-width: 768px){
+	.flex-md-row{
+		flex-direction:row
+	}
+	.flex-md-row-reverse{
+		flex-direction:row-reverse
+	}
+	.flex-md-column{
+		flex-direction:column
+	}
+	.flex-md-column-reverse{
+		flex-direction:column-reverse
+	}
+	.align-items-md-start{
+		align-items:flex-start
+	}
+	.align-items-md-end{
+		align-items:flex-end
+	}
+	.align-items-md-center{
+		align-items:center
+	}
+	.align-items-md-baseline{
+		align-items:baseline
+	}
+	.align-items-md-stretch{
+		align-items:stretch
+	}
+	.align-self-md-start{
+		align-self:flex-start
+	}
+	.align-self-md-end{
+		align-self:flex-end
+	}
+	.align-self-md-center{
+		align-self:center
+	}
+	.align-self-md-baseline{
+		align-self:baseline
+	}
+	.align-self-md-stretch{
+		align-self:stretch
+	}
+	.justify-content-md-start{
+		justify-content:flex-start
+	}
+	.justify-content-md-end{
+		justify-content:flex-end
+	}
+	.justify-content-md-center{
+		justify-content:center
+	}
+	.justify-content-md-between{
+		justify-content:space-between
+	}
+	.justify-content-md-around{
+		justify-content:space-around
+	}
+	.flex-md-fill{
+		flex:1 1 auto !important
+	}
+	.flex-md-grow-1{
+		flex-grow:1
+	}
+	.flex-md-grow-0{
+		flex-grow:0
+	}
+	.flex-md-shrink-1{
+		flex-shrink:1
+	}
+	.flex-md-shrink-0{
+		flex-shrink:0
+	}
+	.flex-md-nowrap{
+		flex-wrap:nowrap
+	}
+	.flex-md-wrap{
+		flex-wrap:wrap
+	}
+	.flex-md-wrap-reverse{
+		flex-wrap:wrap-reverse
+	}
+}
+
+.overflow-visible{
+	overflow:visible
+}
+.overflow-hidden{
+	overflow:hidden
+}
+.perspective{
+	perspective:500px;
+	backface-visibility:hidden
+}
+.perspective-1000{
+	perspective:1000px;
+	backface-visibility:hidden
+}
+.perspective-1500{
+	perspective:1500px;
+	backface-visibility:hidden
+}
+.m-0{
+	margin:0 !important
+}
+.m-1{
+	margin:.25rem !important
+}
+.m-2{
+	margin:.5rem !important
+}
+.m-3{
+	margin:1rem !important
+}
+.m-4{
+	margin:1.5rem !important
+}
+.m-5{
+	margin:3rem !important
+}
+.m-auto{
+	margin:auto !important
+}
+.mx-0{
+	margin-right:0 !important;
+	margin-left:0 !important
+}
+.mx-1{
+	margin-right:.25rem !important;
+	margin-left:.25rem !important
+}
+.mx-2{
+	margin-right:.5rem !important;
+	margin-left:.5rem !important
+}
+.mx-3{
+	margin-right:1rem !important;
+	margin-left:1rem !important
+}
+.mx-4{
+	margin-right:1.5rem !important;
+	margin-left:1.5rem !important
+}
+.mx-5{
+	margin-right:3rem !important;
+	margin-left:3rem !important
+}
+.mx-auto{
+	margin-right:auto !important;
+	margin-left:auto !important
+}
+.my-0{
+	margin-top:0 !important;
+	margin-bottom:0 !important
+}
+.my-1{
+	margin-top:.25rem !important;
+	margin-bottom:.25rem !important
+}
+.my-2{
+	margin-top:.5rem !important;
+	margin-bottom:.5rem !important
+}
+.my-3{
+	margin-top:1rem !important;
+	margin-bottom:1rem !important
+}
+.my-4{
+	margin-top:1.5rem !important;
+	margin-bottom:1.5rem !important
+}
+.my-5{
+	margin-top:3rem !important;
+	margin-bottom:3rem !important
+}
+.my-auto{
+	margin-top:auto !important;
+	margin-bottom:auto !important
+}
+.mt-0{
+	margin-top:0 !important
+}
+.mt-1{
+	margin-top:.25rem !important
+}
+.mt-2{
+	margin-top:.5rem !important
+}
+.mt-3{
+	margin-top:1rem !important
+}
+.mt-4{
+	margin-top:1.5rem !important
+}
+.mt-5{
+	margin-top:3rem !important
+}
+.mt-auto{
+	margin-top:auto !important
+}
+.mr-0{
+	margin-right:0 !important
+}
+.mr-1{
+	margin-right:.25rem !important
+}
+.mr-2{
+	margin-right:.5rem !important
+}
+.mr-3{
+	margin-right:1rem !important
+}
+.mr-4{
+	margin-right:1.5rem !important
+}
+.mr-5{
+	margin-right:3rem !important
+}
+.mr-auto{
+	margin-right:auto !important
+}
+.mb-0{
+	margin-bottom:0 !important
+}
+.mb-1{
+	margin-bottom:.25rem !important
+}
+.mb-2{
+	margin-bottom:.5rem !important
+}
+.mb-3{
+	margin-bottom:1rem !important
+}
+.mb-4{
+	margin-bottom:1.5rem !important
+}
+.mb-5{
+	margin-bottom:3rem !important
+}
+.mb-auto{
+	margin-bottom:auto !important
+}
+.ml-0{
+	margin-left:0 !important
+}
+.ml-1{
+	margin-left:.25rem !important
+}
+.ml-2{
+	margin-left:.5rem !important
+}
+.ml-3{
+	margin-left:1rem !important
+}
+.ml-4{
+	margin-left:1.5rem !important
+}
+.ml-5{
+	margin-left:3rem !important
+}
+.ml-auto{
+	margin-left:auto !important
+}
+.p-0{
+	padding:0 !important
+}
+.p-1{
+	padding:.25rem !important
+}
+.p-2{
+	padding:.5rem !important
+}
+.p-3{
+	padding:1rem !important
+}
+.p-4{
+	padding:1.5rem !important
+}
+.p-5{
+	padding:3rem !important
+}
+.px-0{
+	padding-right:0 !important;
+	padding-left:0 !important
+}
+.px-1{
+	padding-right:.25rem !important;
+	padding-left:.25rem !important
+}
+.px-2{
+	padding-right:.5rem !important;
+	padding-left:.5rem !important
+}
+.px-3{
+	padding-right:1rem !important;
+	padding-left:1rem !important
+}
+.px-4{
+	padding-right:1.5rem !important;
+	padding-left:1.5rem !important
+}
+.px-5{
+	padding-right:3rem !important;
+	padding-left:3rem !important
+}
+.py-0{
+	padding-top:0 !important;
+	padding-bottom:0 !important
+}
+.py-1{
+	padding-top:.25rem !important;
+	padding-bottom:.25rem !important
+}
+.py-2{
+	padding-top:.5rem !important;
+	padding-bottom:.5rem !important
+}
+.py-3{
+	padding-top:1rem !important;
+	padding-bottom:1rem !important
+}
+.py-4{
+	padding-top:1.5rem !important;
+	padding-bottom:1.5rem !important
+}
+.py-5{
+	padding-top:3rem !important;
+	padding-bottom:3rem !important
+}
+.pt-0{
+	padding-top:0 !important
+}
+.pt-1{
+	padding-top:.25rem !important
+}
+.pt-2{
+	padding-top:.5rem !important
+}
+.pt-3{
+	padding-top:1rem !important
+}
+.pt-4{
+	padding-top:1.5rem !important
+}
+.pt-5{
+	padding-top:3rem !important
+}
+.pr-0{
+	padding-right:0 !important
+}
+.pr-1{
+	padding-right:.25rem !important
+}
+.pr-2{
+	padding-right:.5rem !important
+}
+.pr-3{
+	padding-right:1rem !important
+}
+.pr-4{
+	padding-right:1.5rem !important
+}
+.pr-5{
+	padding-right:3rem !important
+}
+.pb-0{
+	padding-bottom:0 !important
+}
+.pb-1{
+	padding-bottom:.25rem !important
+}
+.pb-2{
+	padding-bottom:.5rem !important
+}
+.pb-3{
+	padding-bottom:1rem !important
+}
+.pb-4{
+	padding-bottom:1.5rem !important
+}
+.pb-5{
+	padding-bottom:3rem !important
+}
+.pl-0{
+	padding-left:0 !important
+}
+.pl-1{
+	padding-left:.25rem !important
+}
+.pl-2{
+	padding-left:.5rem !important
+}
+.pl-3{
+	padding-left:1rem !important
+}
+.pl-4{
+	padding-left:1.5rem !important
+}
+.pl-5{
+	padding-left:3rem !important
+}
+.vertical-align-top{
+	vertical-align:top
+}
+.vertical-align-middle{
+	vertical-align:middle
+}
+.vertical-align-bottom{
+	vertical-align:bottom
+}
+.vertical-align-baseline{
+	vertical-align:baseline
+}
+.vertical-align-text-top{
+	vertical-align:text-top
+}
+.vertical-align-text-bottom{
+	vertical-align:text-bottom
+}
+@media(min-width: 768px){
+	.vertical-align-md-top{
+		vertical-align:top
+	}
+	.vertical-align-md-middle{
+		vertical-align:middle
+	}
+	.vertical-align-md-bottom{
+		vertical-align:bottom
+	}
+	.vertical-align-md-baseline{
+		vertical-align:baseline
+	}
+	.vertical-align-md-text-top{
+		vertical-align:text-top
+	}
+	.vertical-align-md-text-bottom{
+		vertical-align:text-bottom
+	}
+}
+.b-position-center-top{
+	background-position:center top !important
+}
+.b-position-center{
+	background-position:center center !important
+}
+.b-position-center-bottom{
+	background-position:center bottom !important
+}
+.b-position-left-top{
+	background-position:left top !important
+}
+.b-position-left-center{
+	background-position:left center !important
+}
+.b-position-left-bottom{
+	background-position:left bottom !important
+}
+.b-position-right-top{
+	background-position:right top !important
+}
+.b-position-right-center{
+	background-position:right center !important
+}
+.b-position-right-bottom{
+	background-position:right bottom !important
+}
+@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
+	.h-20vh{
+		height:216px !important
+	}
+	.h-25vh{
+		height:270px !important
+	}
+	.h-33vh{
+		height:359.964px !important
+	}
+	.h-50vh{
+		height:540px !important
+	}
+	.h-66vh{
+		height:720.036px !important
+	}
+	.h-75vh{
+		height:810px !important
+	}
+	.h-80vh{
+		height:864px !important
+	}
+	.h-100{
+		height:100% !important
+	}
+	.h-auto{
+		height:auto !important
+	}
+}
+@media screen and (-ms-high-contrast: active)and (min-width: 768px),(-ms-high-contrast: none)and (min-width: 768px){
+	.h-md-20vh{
+		height:216px !important
+	}
+	.h-md-25vh{
+		height:270px !important
+	}
+	.h-md-33vh{
+		height:359.964px !important
+	}
+	.h-md-50vh{
+		height:540px !important
+	}
+	.h-md-66vh{
+		height:720.036px !important
+	}
+	.h-md-75vh{
+		height:810px !important
+	}
+	.h-md-80vh{
+		height:864px !important
+	}
+	.h-md-100{
+		height:100% !important
+	}
+	.h-md-auto{
+		height:auto !important
+	}
+}
diff --git a/assets/css/reset.css b/assets/css/reset.css
index 827ab33..789f37e 100644
--- a/assets/css/reset.css
+++ b/assets/css/reset.css
@@ -1,210 +1,305 @@
-/*! 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%;
+*,*::before,*::after{
+  box-sizing:border-box
 }
-body {
-  margin: 0;
+body{
+  margin:0;
+  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+  font-size:1rem;
+  font-weight:400;
+  line-height:1.5;
+  color:#212529;
+  background-color:#fff;
+  -webkit-text-size-adjust:100%;
+  -webkit-tap-highlight-color:rgba(0,0,0,0)
 }
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
-  display: block;
+[tabindex="-1"]:focus:not(:focus-visible){
+  outline:0 !important
 }
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  vertical-align: baseline;
+hr{
+  margin:1rem 0;
+  color:inherit;
+  background-color:currentColor;
+  border:0;
+  opacity:.25
 }
-audio:not([controls]) {
-  display: none;
-  height: 0;
+hr:not([size]){
+  height:1px
 }
-[hidden],
-template {
-  display: none;
+h1,h2,h3,h4,h5,h6{
+  margin-top:0;
+  font-weight:500;
+  line-height:1.2
 }
-a {
-  background: transparent;
+h1{
+  font-size:calc(1.375rem + 1.5vw)
 }
-a:active,
-a:hover {
-  outline: 0;
+@media(min-width: 1200px){
+  h1{
+      font-size:2.5rem
+  }
 }
-abbr[title] {
-  border-bottom: 1px dotted;
+h2{
+  font-size:calc(1.325rem + 0.9vw)
 }
-b,
-strong {
-  font-weight: bold;
+@media(min-width: 1200px){
+  h2{
+      font-size:2rem
+  }
 }
-dfn {
-  font-style: italic;
+h3{
+  font-size:calc(1.3rem + 0.6vw)
 }
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+@media(min-width: 1200px){
+  h3{
+      font-size:1.75rem
+  }
 }
-mark {
-  background: #ff0;
-  color: #000;
+h4{
+  font-size:calc(1.275rem + 0.3vw)
 }
-small {
-  font-size: 80%;
+@media(min-width: 1200px){
+  h4{
+      font-size:1.5rem
+  }
 }
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+h5{
+  font-size:1.25rem
 }
-sup {
-  top: -0.5em;
+h6{
+  font-size:1rem
 }
-sub {
-  bottom: -0.25em;
+p{
+  margin-top:0;
+  margin-bottom:1rem
 }
-img {
-  border: 0;
+abbr[title],abbr[data-original-title]{
+  text-decoration:underline;
+  -webkit-text-decoration:underline dotted;
+  text-decoration:underline dotted;
+  cursor:help;
+  -webkit-text-decoration-skip-ink:none;
+  text-decoration-skip-ink:none
 }
-svg:not(:root) {
-  /*overflow: hidden;*/
-  overflow: visible;
+address{
+  margin-bottom:1rem;
+  font-style:normal;
+  line-height:inherit
 }
-figure {
-  margin: 1em 40px;
+ol,ul{
+  padding-left:2rem
 }
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
+ol,ul,dl{
+  margin-top:0;
+  margin-bottom:1rem
 }
-pre {
-  overflow: auto;
+ol ol,ul ul,ol ul,ul ol{
+  margin-bottom:0
 }
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
+dt{
+  font-weight:700
 }
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
+dd{
+  margin-bottom:.5rem;
+  margin-left:0
 }
-button {
-  overflow: visible;
+blockquote{
+  margin:0 0 1rem
 }
-button,
-select {
-  text-transform: none;
+b,strong{
+  font-weight:bolder
 }
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  cursor: pointer;
+small{
+  font-size:.875em
 }
-button[disabled],
-html input[disabled] {
-  cursor: default;
+mark{
+  padding:.2em;
+  background-color:#fcf8e3
 }
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
+sub,sup{
+  position:relative;
+  font-size:.75em;
+  line-height:0;
+  vertical-align:baseline
 }
-input {
-  line-height: normal;
+sub{
+  bottom:-0.25em
 }
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
+sup{
+  top:-0.5em
 }
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
+a{
+  color:#0d6efd;
+  text-decoration:underline
 }
-input[type="search"] {
-  -webkit-appearance: textfield;
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
+a:hover{
+  color:#024dbc
 }
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+a:not([href]):not([class]),a:not([href]):not([class]):hover{
+  color:inherit;
+  text-decoration:none
 }
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+pre,code,kbd,samp{
+  font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  font-size:1em
 }
-legend {
-  border: 0;
-  padding: 0;
+pre{
+  display:block;
+  margin-top:0;
+  margin-bottom:1rem;
+  overflow:auto;
+  font-size:.875em;
+  -ms-overflow-style:scrollbar
 }
-textarea {
-  overflow: auto;
+pre code{
+  font-size:inherit;
+  color:inherit;
+  word-break:normal
 }
-optgroup {
-  font-weight: bold;
+code{
+  font-size:.875em;
+  color:#d63384;
+  word-wrap:break-word
 }
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
+a>code{
+  color:inherit
 }
-td,
-th {
-  padding: 0;
+kbd{
+  padding:.2rem .4rem;
+  font-size:.875em;
+  color:#fff;
+  background-color:#212529;
+  border-radius:.2rem
 }
-* {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+kbd kbd{
+  padding:0;
+  font-size:1em;
+  font-weight:700
 }
-*:before,
-*:after {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+figure{
+  margin:0 0 1rem
 }
-html {
-  font-size: 10px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+img,svg{
+  vertical-align:middle
 }
-input,
-button,
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
+table{
+  caption-side:bottom;
+  border-collapse:collapse
 }
-figure {
-  margin: 0;
+caption{
+  padding-top:.5rem;
+  padding-bottom:.5rem;
+  color:#6c757d;
+  text-align:left
 }
-img {
-  /*vertical-align: middle;*/
+th{
+  text-align:inherit;
+  text-align:-webkit-match-parent
+}
+thead,tbody,tfoot,tr,td,th{
+  border-color:inherit;
+  border-style:solid;
+  border-width:0
+}
+label{
+  display:inline-block
+}
+button{
+  border-radius:0
+}
+button:focus{
+  outline:1px dotted;
+  outline:5px auto -webkit-focus-ring-color
+}
+input,button,select,optgroup,textarea{
+  margin:0;
+  font-family:inherit;
+  font-size:inherit;
+  line-height:inherit
+}
+button,input{
+  overflow:visible
+}
+button,select{
+  text-transform:none
+}
+[role=button]{
+  cursor:pointer
+}
+select{
+  word-wrap:normal
+}
+[list]::-webkit-calendar-picker-indicator{
+  display:none
+}
+button,[type=button],[type=reset],[type=submit]{
+  -webkit-appearance:button
+}
+button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){
+  cursor:pointer
+}
+::-moz-focus-inner{
+  padding:0;
+  border-style:none
+}
+textarea{
+  resize:vertical
+}
+fieldset{
+  min-width:0;
+  padding:0;
+  margin:0;
+  border:0
+}
+legend{
+  float:left;
+  width:100%;
+  padding:0;
+  margin-bottom:.5rem;
+  font-size:calc(1.275rem + 0.3vw);
+  line-height:inherit;
+  white-space:normal
+}
+@media(min-width: 1200px){
+  legend{
+      font-size:1.5rem
+  }
+}
+legend+*{
+  clear:left
+}
+::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{
+  padding:0
+}
+::-webkit-inner-spin-button{
+  height:auto
+}
+[type=search]{
+  outline-offset:-2px;
+  -webkit-appearance:textfield
+}
+::-webkit-search-decoration{
+  -webkit-appearance:none
+}
+::-webkit-color-swatch-wrapper{
+  padding:0
+}
+::-webkit-file-upload-button{
+  font:inherit;
+  -webkit-appearance:button
+}
+output{
+  display:inline-block
+}
+iframe{
+  border:0
+}
+summary{
+  display:list-item;
+  cursor:pointer
+}
+progress{
+  vertical-align:baseline
+}
+[hidden]{
+  display:none !important
 }
\ No newline at end of file
diff --git a/assets/css/spicr-theme.css b/assets/css/spicr-theme.css
new file mode 100644
index 0000000..2c7f1f9
--- /dev/null
+++ b/assets/css/spicr-theme.css
@@ -0,0 +1,162 @@
+/* Spicr theme | thednp © 2020 | MIT-License */
+
+.text-left{
+  text-align:left
+}
+.text-center{
+  text-align:center
+}
+.text-right{
+  text-align:right
+}
+@media(min-width: 768px){
+  .text-md-left{
+    text-align:left
+  }
+  .text-md-center{
+    text-align:center
+  }
+  .text-md-right{
+    text-align:right
+  }
+}
+.center-block{
+  display:block;
+  margin-left:auto;
+  margin-right:auto
+}
+.float-right{
+  float:right !important
+}
+.float-left{
+  float:left !important
+}
+.float-none{
+  float:none !important
+}
+.font-weight-normal{
+  font-weight:normal
+}
+.font-weight-bold{
+  font-weight:bold
+}
+
+#SpicrDemo{
+height:600px
+}
+.spicr .lead{
+  margin:0;
+  font-weight:bold;
+  text-transform:uppercase;
+  color:#fff
+}
+.overlay{
+  background:rgba(0,0,0,.45);
+  position:absolute;
+  top:0;
+  right:0;
+  width:100%;
+  height:100%
+}
+.spicr-carousel-navigation>*{
+  vertical-align:text-bottom
+}
+@media(min-width: 479px){
+  .spicr-control.long-shadows{
+    transition:opacity .3s ease-in
+  }
+  .spicr-control.long-shadows .arrow-prev{
+    margin-left:-280px;
+    padding:0px 5px 0px 250px;
+    transform:translate(-100%)
+  }
+  .spicr-control.long-shadows .arrow-next{
+    margin-right:-280px;
+    padding:0px 250px 0px 5px;
+    transform:translate(100%)
+  }
+  .spicr-control.long-shadows .arrow-prev,.spicr-control.long-shadows .arrow-next{
+    transition:all 1s ease-in
+  }
+  .spicr:hover .spicr-control.long-shadows .arrow-prev,.spicr:hover .spicr-control.long-shadows .arrow-next{
+    transition-duration:.3s;
+    transition-timing-function:ease-out
+  }
+  .spicr-control.long-shadows:focus .arrow-prev,.spicr-control.long-shadows:focus .arrow-next{
+    transform:translate(0%)
+  }
+  .spicr:hover .spicr-control.long-shadows .arrow-prev{
+    transform:translate(0%)
+  }
+  .spicr:hover .spicr-control.long-shadows .arrow-next{
+    transform:translate(0%)
+  }
+  .spicr-control.long-shadows .spicr-icon{
+    width:40px;
+    height:40px
+  }
+  .spicr-control.long-shadows .arrow-next,.spicr-control.long-shadows .arrow-prev{
+    border-radius:40px;
+    margin-top:-20px
+  }
+  .spicr-control.long-shadows:focus .arrow-prev{
+    transform:translate(0%)
+  }
+  .spicr-control.long-shadows:focus .arrow-next{
+    transform:translate(0%)
+  }
+  .spicr-control.long-shadows .arrow-prev,.spicr-control.long-shadows .arrow-next{
+    display:block;
+    width:auto;
+    height:auto;
+    background-color:#000;
+    background-color:rgba(0,0,0,.3)
+  }
+}
+.spicr-carousel h4{
+  margin-top:0
+}
+.spicr-slider{
+  font-size:calc(0.5rem + 1.5vw);
+  line-height:calc(0.6rem + 1.5vw)
+}
+.spicr-slider h1{
+  font-size:calc(1.375rem + 1.5vw);
+  letter-spacing:-1px;
+  margin:0
+}
+.spicr-slider h2{
+  font-size:calc(1.375rem + 0.9vw);
+  letter-spacing:0;
+  margin:0
+}
+.features-carousel .spicr-pages{
+  top:.5rem
+}
+.features-carousel .spicr-pages li{
+  line-height:1.5rem;
+  padding:.5rem 1rem
+}
+@media(min-width: 768px){
+  .featurette-heading span{
+    font-size:24px;
+    line-height:1;
+    letter-spacing:-1px
+  }
+  .spicr-slider{
+    font-size:1rem;
+    line-height:1.8rem
+  }
+  .spicr-slider h1{
+    font-size:42px;
+    line-height:1;
+    letter-spacing:-2px;
+    margin:0 0 1.5rem
+  }
+  .spicr-slider h2{
+    font-size:36px;
+    line-height:1;
+    letter-spacing:-1px;
+    margin:0 0 1.5rem
+  }
+}
\ No newline at end of file
diff --git a/assets/js/home.js b/assets/js/home.js
index ac2b551..f13b12a 100644
--- a/assets/js/home.js
+++ b/assets/js/home.js
@@ -1,68 +1,14 @@
-var frontpage = document.getElementsByClassName('frontpage'),
-		rectangle = document.getElementById('rectangle'),
-		star = document.getElementById('star'),
-		hexagon = document.getElementById('hexagon'),
-		cat = document.getElementById('cat'),
-		circle = document.getElementById('circle'),
-		head = document.getElementById('head'),
-		winkyFace = document.getElementById('winky-face'),
-		dropInitial = document.getElementById('drop-initial'),
-		drop = document.getElementById('drop'),
-		mouth = document.getElementById('mouth'),
-		eyeLeft = document.getElementById('eye-left'),
-		eyeRight = document.getElementById('eye-right'),
-		heading = document.querySelector('h2.nomargin'),
-		plead = document.querySelector('p.lead')
+var SpicrMainDemo = document.getElementById('SpicrDemo');
 
-var t0 = KUTE.to(rectangle,{translateX:0, opacity:1 }, { easing:'easingCubicOut'}),
-		t1 = KUTE.fromTo(rectangle,{path:rectangle, attr: {fill: rectangle.getAttribute('fill') }}, {path:star, attr: {fill: star.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
-		t2 = KUTE.fromTo(rectangle,{path:star, rotateZ: 0, attr: {fill: rectangle.getAttribute('fill') }}, {path:hexagon, rotateZ: 360, attr: {fill: hexagon.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
-		t3 = KUTE.fromTo(rectangle,{path:hexagon, attr: {fill: rectangle.getAttribute('fill') }}, {path:cat, attr: {fill: cat.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
-		t4 = KUTE.fromTo(rectangle,{path:cat, attr: {fill: rectangle.getAttribute('fill') }}, {path:circle, attr: {fill: circle.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
-		t5 = KUTE.fromTo(rectangle,{path:circle, attr: {fill: rectangle.getAttribute('fill') }}, {path:head, attr: {fill: head.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
-		t6 = KUTE.fromTo(dropInitial,{path: dropInitial,opacity:1},{path: drop,opacity:1}, {morphPrecision: 5, easing:'easingCubicOut', onComplete: mergeLogo}),
-		t7 = KUTE.to(mouth,{opacity:1}),
-		t8 = KUTE.to(eyeLeft,{opacity:1}),
-		t9 = KUTE.to(eyeRight,{opacity:1}),
-		t10 = KUTE.fromTo(winkyFace,{opacity:0,translateY:50},{opacity:1,translateY:0},{easing:'easingCubicOut'}),
-		t11 = KUTE.to(eyeLeft,{path:'#eye-left-closed'}, {morphPrecision: 5}, {easing:'easingCubicOut'}),
-		t12 = KUTE.to(eyeRight,{path:'#eye-right-closed'}, {morphPrecision: 5}, {easing:'easingCubicOut'}),
-		t13 = KUTE.to(mouth,{path:'#mouth-happy'}, {morphPrecision: 5, easing:'easingCubicOut', duration:3500}),
-		loop1 = KUTE.to(rectangle,{ attr: {fill: '#52aef7' }}, {duration: 1500}),
-		loop2 = KUTE.to(rectangle,{ attr: {fill: '#f98f6d' }}, {duration: 1500}),
-		loop3 = KUTE.to(rectangle,{ attr: {fill: '#f95054' }}, {duration: 1500}),
-		loop4 = KUTE.to(rectangle,{ attr: {fill: '#ffd626' }}, {duration: 1500}),
-		loop5 = KUTE.to(rectangle,{ attr: {fill: '#d661ea' }}, {duration: 1500}),
-		showText = KUTE.to(heading,{opacity: 1},{duration: 3000}),
-		showText1 = KUTE.fromTo(heading,{ text: ''},{ text:heading.getAttribute('data-text')},{duration: 1500}),
-		showText2 = KUTE.fromTo(plead,{ text:''}, { text:plead.getAttribute('data-text')},{duration: 3500, onComplete: textComplete}),
-		showBTNS = KUTE.allFromTo('.btns .btn',{opacity: 0, translate3d: [150,50,0]}, {opacity: 1, translate3d: [0,0,0]},{duration: 500, offset: 250, delay: 500, easing: 'easingBackOut'})
-
-function mergeLogo(){
-	rectangle.setAttribute('d', rectangle.getAttribute('d')+ drop.getAttribute('d') )
-	dropInitial.style.opacity = 0
-}
-function textComplete(){
-	heading.removeAttribute('data-text')
-	plead.removeAttribute('data-text')
-	showBTNS.start()
+function initMainSpicr(){
+	new Spicr(SpicrMainDemo);
 }
 
-t0.chain(t1)
-t1.chain(t2)
-t2.chain(t3)
-t3.chain(t4)
-t4.chain([t5,t6])
-t6.chain([t7,t8,t9])
-t9.chain([t10,t11,t12,t13])
+function loadCarouselMedia(){
+	new dll(SpicrMainDemo,initMainSpicr)
+}
 
-t8.chain([loop1,showText,showText1])
-showText1.chain(showText2)
-
-loop1.chain(loop2)
-loop2.chain(loop3)
-loop3.chain(loop4)
-loop4.chain(loop5)
-loop5.chain(loop1)
-
-t0.start()
\ No newline at end of file
+document.addEventListener('DOMContentLoaded', function loadWrapper(){
+	loadCarouselMedia();
+	document.removeEventListener('DOMContentLoaded', loadWrapper, false)
+}, false);
\ No newline at end of file
diff --git a/backgroundPosition.html b/backgroundPosition.html
index 379d0fb..18643ce 100644
--- a/backgroundPosition.html
+++ b/backgroundPosition.html
@@ -33,7 +33,7 @@