From 25cc86e1922bdb22d2a1234059b6f4da4e648a04 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 24 Apr 2015 21:03:31 +0300 Subject: [PATCH 001/471] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index afec5ec..f5d6491 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ $('selector'). Kute({ # Full distribution (12Kb min) It does most of the animation work you need. * size: width and height -* colors: text color and background-color (values ) +* colors: text color and background-color (accepts values as HEX, RGB, RGBA, but the color is always HEX ) * transform: translate3D, scale, rotateX, rotateY, rotateZ * position: top, left (ideal for IE9- translate3D(left,top,0) fallback) * zoom: for scale on IE8 fallback From 5d58a5bffdddbe98c85412c1c26c205ba49ea290 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 29 Apr 2015 03:28:14 +0300 Subject: [PATCH 002/471] Update kute.js Small typo fixed, also rearranged transform propertied by vendor to increase performance. --- kute.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/kute.js b/kute.js index 6ab5fe4..3afa991 100644 --- a/kute.js +++ b/kute.js @@ -338,11 +338,11 @@ KUTE.Animate = function( object, options ) { // process transform function tr(p,pp) { - el.style.webkitTransform = p; - el.style.MozTransform = p; + el.style.transform = p; el.style.msTransform = (cv(pp)?'perspective('+pp+'px) ':'') + p; - el.style.Transform = p; - } + el.style.MozTransform = p; + el.style.webkitTransform = p; + } }; KUTE.Tween = function ( object ) { From 9ca0ba1e75dd7dfe9be087fa9aecbef47e5b63b9 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 29 Apr 2015 03:28:44 +0300 Subject: [PATCH 003/471] Update kute.full.js --- kute.full.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/kute.full.js b/kute.full.js index 8e10ab5..f23db44 100644 --- a/kute.full.js +++ b/kute.full.js @@ -473,11 +473,11 @@ KUTE.Animate = function( object, options ) { // process transform function tr(p,pp) { - el.style.webkitTransform = p; - el.style.MozTransform = p; + el.style.transform = p; el.style.msTransform = (cv(pp)?'perspective('+pp+'px) ':'') + p; - el.style.Transform = p; - } + el.style.MozTransform = p; + el.style.webkitTransform = p; + } }; KUTE.Tween = function ( object ) { From 5e5e95108ce4c50222c79d2d6525dbaf8d980146 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 29 Apr 2015 03:29:54 +0300 Subject: [PATCH 004/471] Update kute.full.min.js --- dist/kute.full.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/kute.full.min.js b/dist/kute.full.min.js index e16eb93..093dd50 100644 --- a/dist/kute.full.min.js +++ b/dist/kute.full.min.js @@ -1,2 +1,2 @@ // 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()} +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()} From fa56bbfbf43c1d388299643ea7ee367b9dc6c6b3 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 29 Apr 2015 03:30:33 +0300 Subject: [PATCH 005/471] Update kute.min.js --- dist/kute.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/kute.min.js b/dist/kute.min.js index 7226418..c5fc3c8 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,2 @@ // 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()} +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()} From 587f4c0de2463acda2b759a0c53958312ebb1eeb Mon Sep 17 00:00:00 2001 From: Shavkatov Davlat Talatovich Date: Wed, 29 Apr 2015 11:57:57 +0500 Subject: [PATCH 006/471] Mini issue fix Mini issue fix for jQuery plug-in example --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f5d6491..88d0e9a 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ new KUTE.Animate(el, { ); //with jQuery plugin -$('selector'). Kute({ +$('selector').Kute({ //options from : {}, to : {}, From 9007ce79ed583050df95f88a6f7944d51a176549 Mon Sep 17 00:00:00 2001 From: Shavkatov Davlat Talatovich Date: Sun, 3 May 2015 06:29:22 +0500 Subject: [PATCH 007/471] Update kute.js --- kute.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/kute.js b/kute.js index 3afa991..e3fd73c 100644 --- a/kute.js +++ b/kute.js @@ -33,6 +33,10 @@ var KUTE = KUTE || ( function () { } } return true; + }, + process : function ( time ) { + requestAnimationFrame(KUTE.process); + KUTE.update( time ); } }; } )(); @@ -504,6 +508,8 @@ KUTE.Tween = function ( object ) { }; }; +KUTE.process(0); + KUTE.Easing = { Linear: { None: function ( k ) { From e1acdfd42d473d7fd7c8c531443c4c6ca5cfcdfc Mon Sep 17 00:00:00 2001 From: Shavkatov Davlat Talatovich Date: Sun, 3 May 2015 06:32:53 +0500 Subject: [PATCH 008/471] Update kute.full.js --- kute.full.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/kute.full.js b/kute.full.js index f23db44..4b04d56 100644 --- a/kute.full.js +++ b/kute.full.js @@ -34,6 +34,10 @@ var KUTE = KUTE || ( function () { } } return true; + }, + process : function ( time ) { + requestAnimationFrame(KUTE.process); + KUTE.update( time ); } }; } )(); @@ -639,6 +643,8 @@ KUTE.Tween = function ( object ) { }; }; +KUTE.process(0); + KUTE.Easing = { Linear: { None: function ( k ) { From ae8d72159eed465c8a845765322e3411e2f233ef Mon Sep 17 00:00:00 2001 From: Shavkatov Davlat Talatovich Date: Sun, 3 May 2015 06:40:25 +0500 Subject: [PATCH 009/471] Update kute.full.js --- kute.full.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/kute.full.js b/kute.full.js index 4b04d56..b4f34da 100644 --- a/kute.full.js +++ b/kute.full.js @@ -247,9 +247,7 @@ KUTE.Animate = function( object, options ) { var txu = cv( tx ) ? truD(ottx)[1] : ''; var tyu = cv( ty ) ? truD(otty)[1] : ''; - var tzu = cv( tz ) ? truD(ottz)[1] : ''; - - animateTween(); + var tzu = cv( tz ) ? truD(ottz)[1] : ''; 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 }; @@ -320,11 +318,6 @@ KUTE.Animate = function( object, options ) { .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") { From b052b7f2f45019482112971589da146807ae26c5 Mon Sep 17 00:00:00 2001 From: Shavkatov Davlat Talatovich Date: Sun, 3 May 2015 06:43:18 +0500 Subject: [PATCH 010/471] Update kute.js --- kute.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/kute.js b/kute.js index e3fd73c..5b69831 100644 --- a/kute.js +++ b/kute.js @@ -192,8 +192,6 @@ KUTE.Animate = function( object, options ) { 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 }; @@ -255,11 +253,6 @@ KUTE.Animate = function( object, options ) { .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") { From 5525e0774d9dcd7a63b8259115c93a71287787f7 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 3 May 2015 05:16:52 +0300 Subject: [PATCH 011/471] Update kute.full.min.js --- dist/kute.full.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/kute.full.min.js b/dist/kute.full.min.js index 093dd50..4348543 100644 --- a/dist/kute.full.min.js +++ b/dist/kute.full.min.js @@ -1,2 +1,2 @@ // 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()} +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.process(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()} From e0ea467152c9908b42337fead89784f3425b34a6 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 3 May 2015 05:17:44 +0300 Subject: [PATCH 012/471] Update kute.min.js --- dist/kute.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/kute.min.js b/dist/kute.min.js index c5fc3c8..e9865f3 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,2 @@ // 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()} +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)/a;o=o>1?1:o;var h=s(o);for(e in r){var E=i[e]||0,I=r[e];"string"==typeof I&&(I=E+parseFloat(I,10)),"number"==typeof I&&(n[e]=E+(I-E)*h)}return null!==f&&f.call(n,h),1==o?(null!==p&&p.call(n),!1):!0}},KUTE.process(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,r=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=r/4):n=r*Math.asin(1/i)/(2*Math.PI),-(i*Math.pow(2,10*(t-=1))*Math.sin(2*(t-n)*Math.PI/r)))},Out:function(t){var n,i=.1,r=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=r/4):n=r*Math.asin(1/i)/(2*Math.PI),i*Math.pow(2,-10*t)*Math.sin(2*(t-n)*Math.PI/r)+1)},InOut:function(t){var n,i=.1,r=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=r/4):n=r*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/r):i*Math.pow(2,-10*(t-=1))*Math.sin(2*(t-n)*Math.PI/r)*.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()} From dafded11c5e6e37a053fc012b2598eae371908c1 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 21 May 2015 18:30:41 +0300 Subject: [PATCH 013/471] Update README.md --- README.md | 81 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 48 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 88d0e9a..88bccd9 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,36 @@ # 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. +A minimal native Javascript tweening engine with jQuery plugin, 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, for simplicity and performance. +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. +Also worth noting that the script does it's job without any dependency like plugins or other functionality. # 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	: {}, 
+    from	: {
+      translate: {x:0},
+      opacity: 1
+    },
+    to	: {
+      translate: {x:150},
+      opacity: 0
+    }, 
     duration: 500,
     delay	: 0,
     easing	: 'exponentialInOut',
@@ -35,8 +43,14 @@ new KUTE.Animate(el, {
 //with jQuery plugin
 $('selector').Kute({
   //options
-    from	: {},
-    to	: {}, 
+    from	: {
+      translate: {x:0},
+      opacity: 1
+    },
+    to	: {
+      translate: {x:150},
+      opacity: 0
+    }, 
     duration: 500,
     delay	: 0,
     easing	: 'exponentialInOut',
@@ -45,43 +59,44 @@ $('selector').Kute({
     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 (accepts values as HEX, RGB, RGBA, but the color is always HEX ) -* 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 +It does most of the animation work you need. Supported properties: +* size: `width` and `height` +* colors: text `color` and `backgroundColor` (accepts values as HEX, RGB, RGBA, but the output color is always HEX ) +* transform: `translate3D`, `scale`, `rotateX`, `rotateY`, `rotateZ` (not using rotate3D because processing values are quite a hustle) +* position: `top`, `left` (ideal for IE9- translate3D(left,top,0) fallback, they require proper use of `position: relative` and/or `position: absolute`) +* zoom: for scale fallback on IE8 +* `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 +This distribution is slightly lighter and more suitable for most projects. It covers: +* size: `width` and `height` +* transform: `translate3D`, `scale`, `rotateX`, `rotateY`, `rotateZ` +* position: `top`, `left` (see above for more info on the properties) +* `zoom`: for `scale` fallback on IE8 +* 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. +That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/dist](https://github.com/thednp/kute.js/blob/master/dist/kute.jquery.js) folder. # 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 :) +* properly handles IE10+ 3D `transform` when elements have a `perspective`, else the animation won't run +* it converts `RGBA` & `HEX` colors to `RGB` and tweens the inner values, then ALWAYS updates color via `HEX`; no support for `RGBA` +* 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`, `special`, `finish`, and they can be set as tween options (so no more nested functions are invoked as object attributes) +* 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, safer easier and closer to 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. +* 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. +* generally it's using for `-webkit-` prefix for Safari and older webkit browsers for CSS powered transitions. # 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. +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.. From ef8b8d172625de8f23722c41970f663ad26058f2 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 21 May 2015 18:31:07 +0300 Subject: [PATCH 014/471] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 88bccd9..6888e2d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # kute.js -A minimal native Javascript tweening engine with jQuery plugin, 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, for simplicity and performance. +A minimal native Javascript tweening engine with jQuery plugin, 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, for simplicity and performance. + 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. + Also worth noting that the script does it's job without any dependency like plugins or other functionality. # CDN From 6d60e6d436384fe8f92bcddb9cac5853fd37d708 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 6 Jul 2015 16:17:38 +0300 Subject: [PATCH 015/471] Update kute.jquery.js --- dist/kute.jquery.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/kute.jquery.js b/dist/kute.jquery.js index 3ecaee5..8e965f5 100644 --- a/dist/kute.jquery.js +++ b/dist/kute.jquery.js @@ -1,10 +1,10 @@ // KUTE jQuery Plugin for kute.js | by dnp_theme | License - MIT -// $('selector').Kute(options); +// $('selector').Kute(method, options); (function($) { - $.fn.Kute = function( options ) { + $.fn.Kute = function( method, options ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), etc return this.each(function(){ - new KUTE.Animate( this, options ); + new KUTE[method]( this, options ); }); }; })(jQuery); From 65c14a6cce8d40b20eff0f9bad32cb9f1587ade6 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 3 Aug 2015 16:53:17 +0300 Subject: [PATCH 016/471] 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 017/471] 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 018/471] 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 019/471] 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 15df42234cf6fd50deb59401c1e4dc9e5707eef6 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 4 Aug 2015 05:56:16 +0300 Subject: [PATCH 020/471] Update kute.jquery.js --- dist/kute.jquery.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/dist/kute.jquery.js b/dist/kute.jquery.js index 8e965f5..5466d73 100644 --- a/dist/kute.jquery.js +++ b/dist/kute.jquery.js @@ -1,10 +1,18 @@ // KUTE jQuery Plugin for kute.js | by dnp_theme | License - MIT // $('selector').Kute(method, options); -(function($) { - $.fn.Kute = function( method, options ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), etc - return this.each(function(){ - new KUTE[method]( this, options ); - }); - }; -})(jQuery); +(function($) { + $.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause() + var mt = this[0][method], i, l = this.length; + if ( typeof mt === 'function' ) { + mt.apply(this[0]); + } + for (i=0;i Date: Fri, 18 Sep 2015 18:29:15 +0300 Subject: [PATCH 021/471] 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 022/471] 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 023/471] 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 024/471] 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 025/471] 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 026/471] 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 027/471] 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 028/471] 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 029/471] 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 030/471] 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 031/471] 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 032/471] 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 033/471] 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 034/471] 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 035/471] 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 036/471] 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 037/471] Added some more features, a changelog will come with the tagged release. --- README.md | 83 +- demo/about.html | 148 ++++ demo/api.html | 363 ++++++++ demo/assets/css/kute.css | 345 ++++++++ demo/assets/css/prism.css | 3 + demo/assets/css/reset.css | 209 +++++ demo/assets/img/favicon.png | Bin 0 -> 1456 bytes demo/assets/img/img-blank.gif | Bin 0 -> 1512 bytes demo/assets/img/loader.gif | Bin 0 -> 31313 bytes demo/assets/js/examples.js | 343 ++++++++ demo/assets/js/home.js | 97 +++ demo/assets/js/minifill.js | 376 +++++++++ demo/assets/js/perf.js | 178 ++++ demo/assets/js/prism.js | 6 + demo/assets/js/scripts.js | 14 + demo/assets/js/tween.min.js | 2 + demo/examples.html | 470 +++++++++++ demo/features.html | 217 +++++ demo/index.html | 189 +++++ demo/performance.html | 132 +++ demo/src/kute-bezier.js | 159 ++++ demo/src/kute-jquery.js | 26 + demo/src/kute-physics.js | 302 +++++++ demo/src/kute.js | 855 +++++++++++++++++++ dist/kute-bezier.min.js | 2 + dist/kute-jquery.min.js | 2 + dist/kute-physics.min.js | 2 + dist/kute.full.min.js | 2 - dist/kute.jquery.js | 18 - dist/kute.min.js | 4 +- kute-bezier.js | 159 ++++ kute-jquery.js | 26 + kute-physics.js | 302 +++++++ kute.full.js | 810 ------------------ kute.js | 1484 ++++++++++++++++++--------------- 35 files changed, 5780 insertions(+), 1548 deletions(-) create mode 100644 demo/about.html create mode 100644 demo/api.html create mode 100644 demo/assets/css/kute.css create mode 100644 demo/assets/css/prism.css create mode 100644 demo/assets/css/reset.css create mode 100644 demo/assets/img/favicon.png create mode 100644 demo/assets/img/img-blank.gif create mode 100644 demo/assets/img/loader.gif create mode 100644 demo/assets/js/examples.js create mode 100644 demo/assets/js/home.js create mode 100644 demo/assets/js/minifill.js create mode 100644 demo/assets/js/perf.js create mode 100644 demo/assets/js/prism.js create mode 100644 demo/assets/js/scripts.js create mode 100644 demo/assets/js/tween.min.js create mode 100644 demo/examples.html create mode 100644 demo/features.html create mode 100644 demo/index.html create mode 100644 demo/performance.html create mode 100644 demo/src/kute-bezier.js create mode 100644 demo/src/kute-jquery.js create mode 100644 demo/src/kute-physics.js create mode 100644 demo/src/kute.js create mode 100644 dist/kute-bezier.min.js create mode 100644 dist/kute-jquery.min.js create mode 100644 dist/kute-physics.min.js delete mode 100644 dist/kute.full.min.js delete mode 100644 dist/kute.jquery.js create mode 100644 kute-bezier.js create mode 100644 kute-jquery.js create mode 100644 kute-physics.js delete mode 100644 kute.full.js diff --git a/README.md b/README.md index 6888e2d..d059838 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # kute.js -A minimal native Javascript tweening engine with jQuery plugin, 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, for simplicity and performance. +A minimal native Javascript tweening engine with jQuery plugin, forked from tween.js with most essential options for web developers, designers and animators. Unlike the original script, KUTE.js delivers easy to use methods to set up high performance animations on the fly. 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. @@ -12,10 +12,10 @@ Thanks to jsdelivr, we have CDN link demo. #jQuery Plugin -That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/dist](https://github.com/thednp/kute.js/blob/master/dist/kute.jquery.js) folder. +That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/dist](https://github.com/thednp/kute.js/blob/master/dist/kute-jquery.min.js) folder. # What else it does * computes option values properly according to their measurement unit (px,%,deg,etc) @@ -90,18 +49,14 @@ That's right, there you have it, just a few bits of code to bridge the awesome ` * it converts `RGBA` & `HEX` colors to `RGB` and tweens the inner values, then ALWAYS updates color via `HEX`; no support for `RGBA` * 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`, `special`, `finish`, and they can be set as tween options (so no more nested functions are invoked as object attributes) +* allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options (so no more nested functions are invoked as object attributes) * 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, safer easier and closer to 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. -* generally it's using for `-webkit-` prefix for Safari and older webkit browsers for CSS powered transitions. +* uses 31 easing functions, all Robert Penner's easing equations and 2 more libraries +* generally it's doing browser prefixes for you as well. # 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.. +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. # License MIT License diff --git a/demo/about.html b/demo/about.html new file mode 100644 index 0000000..907e3f0 --- /dev/null +++ b/demo/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/demo/api.html b/demo/api.html new file mode 100644 index 0000000..08df62d --- /dev/null +++ b/demo/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/demo/assets/css/kute.css b/demo/assets/css/kute.css new file mode 100644 index 0000000..6689962 --- /dev/null +++ b/demo/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/demo/assets/css/prism.css b/demo/assets/css/prism.css new file mode 100644 index 0000000..c7ced87 --- /dev/null +++ b/demo/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/demo/assets/css/reset.css b/demo/assets/css/reset.css new file mode 100644 index 0000000..af84377 --- /dev/null +++ b/demo/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/demo/assets/img/favicon.png b/demo/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/demo/assets/img/img-blank.gif b/demo/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/demo/assets/js/examples.js b/demo/assets/js/examples.js new file mode 100644 index 0000000..5d3482c --- /dev/null +++ b/demo/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/demo/assets/js/perf.js b/demo/assets/js/perf.js new file mode 100644 index 0000000..4c7723d --- /dev/null +++ b/demo/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/demo/assets/js/prism.js b/demo/assets/js/prism.js new file mode 100644 index 0000000..8d21c08 --- /dev/null +++ b/demo/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/demo/assets/js/scripts.js b/demo/assets/js/scripts.js new file mode 100644 index 0000000..babe497 --- /dev/null +++ b/demo/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/demo/assets/js/tween.min.js b/demo/assets/js/tween.min.js new file mode 100644 index 0000000..299b67d --- /dev/null +++ b/demo/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/demo/examples.html b/demo/examples.html new file mode 100644 index 0000000..3a2c981 --- /dev/null +++ b/demo/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/demo/features.html b/demo/features.html new file mode 100644 index 0000000..3f62292 --- /dev/null +++ b/demo/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/demo/index.html b/demo/index.html new file mode 100644 index 0000000..1e931f4 --- /dev/null +++ b/demo/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/demo/performance.html b/demo/performance.html new file mode 100644 index 0000000..af5cc39 --- /dev/null +++ b/demo/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/demo/src/kute-bezier.js b/demo/src/kute-bezier.js new file mode 100644 index 0000000..44c23b9 --- /dev/null +++ b/demo/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/demo/src/kute-jquery.js b/demo/src/kute-jquery.js new file mode 100644 index 0000000..08b4ead --- /dev/null +++ b/demo/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/demo/src/kute.js b/demo/src/kute.js new file mode 100644 index 0000000..c9e5019 --- /dev/null +++ b/demo/src/kute.js @@ -0,0 +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;i0?t=b:e=b;while(Math.abs(s)>z&&++_u;++u){var b=_bz.gS(e,t,r);if(0===b)return e;var _=_bz.cB(e,t,r)-n;e-=_/b}return e},_bz.csv=function(n,e){var t=0,r=_bz.ksts;for(t;r>t;++t)_bz.msv[t]=_bz.cB(t*_bz.ksss,n,e)},_bz.gx=function(n,e,t){for(var r=0,u=1,s=_bz.ksts-1;u!=s&&_bz.msv[u]<=n;++u)r+=_bz.ksss;--u;var b=(n-_bz.msv[u])/(_bz.msv[u+1]-_bz.msv[u]),_=r+b*_bz.ksss,z=_bz.gS(_,e,t),a=r+_bz.ksss;return z>=_bz.nms?_bz.nri(n,_,e,t):0===z?_:_bz.bS(n,r,a,e,t)},_bz.pc=function(n,e,t,r){this._p=!0,(n!=t||e!=r)&&_bz.csv(n,e)},KUTE.Ease.easeIn=function(){return _bz.pB(.42,0,1,1)},KUTE.Ease.easeOut=function(){return _bz.pB(0,0,.58,1)},KUTE.Ease.easeInOut=function(){return _bz.pB(.5,.16,.49,.86)},KUTE.Ease.easeInSine=function(){return _bz.pB(.47,0,.745,.715)},KUTE.Ease.easeOutSine=function(){return _bz.pB(.39,.575,.565,1)},KUTE.Ease.easeInOutSine=function(){return _bz.pB(.445,.05,.55,.95)},KUTE.Ease.easeInQuad=function(){return _bz.pB(.55,.085,.68,.53)},KUTE.Ease.easeOutQuad=function(){return _bz.pB(.25,.46,.45,.94)},KUTE.Ease.easeInOutQuad=function(){return _bz.pB(.455,.03,.515,.955)},KUTE.Ease.easeInCubic=function(){return _bz.pB(.55,.055,.675,.19)},KUTE.Ease.easeOutCubic=function(){return _bz.pB(.215,.61,.355,1)},KUTE.Ease.easeInOutCubic=function(){return _bz.pB(.645,.045,.355,1)},KUTE.Ease.easeInQuart=function(){return _bz.pB(.895,.03,.685,.22)},KUTE.Ease.easeOutQuart=function(){return _bz.pB(.165,.84,.44,1)},KUTE.Ease.easeInOutQuart=function(){return _bz.pB(.77,0,.175,1)},KUTE.Ease.easeInQuint=function(){return _bz.pB(.755,.05,.855,.06)},KUTE.Ease.easeOutQuint=function(){return _bz.pB(.23,1,.32,1)},KUTE.Ease.easeInOutQuint=function(){return _bz.pB(.86,0,.07,1)},KUTE.Ease.easeInExpo=function(){return _bz.pB(.95,.05,.795,.035)},KUTE.Ease.easeOutExpo=function(){return _bz.pB(.19,1,.22,1)},KUTE.Ease.easeInOutExpo=function(){return _bz.pB(1,0,0,1)},KUTE.Ease.easeInCirc=function(){return _bz.pB(.6,.04,.98,.335)},KUTE.Ease.easeOutCirc=function(){return _bz.pB(.075,.82,.165,1)},KUTE.Ease.easeInOutCirc=function(){return _bz.pB(.785,.135,.15,.86)},KUTE.Ease.easeInBack=function(){return _bz.pB(.6,-.28,.735,.045)},KUTE.Ease.easeOutBack=function(){return _bz.pB(.175,.885,.32,1.275)},KUTE.Ease.easeInOutBack=function(){return _bz.pB(.68,-.55,.265,1.55)},KUTE.Ease.slowMo=function(){return _bz.pB(0,.5,1,.5)},KUTE.Ease.slowMo1=function(){return _bz.pB(0,.7,1,.3)},KUTE.Ease.slowMo2=function(){return _bz.pB(0,.9,1,.1)}; \ No newline at end of file diff --git a/dist/kute-jquery.min.js b/dist/kute-jquery.min.js new file mode 100644 index 0000000..4f9e775 --- /dev/null +++ b/dist/kute-jquery.min.js @@ -0,0 +1,2 @@ +// KUTE jQuery Plugin for KUTE.js | by dnp_theme | License - MIT +!function(t){t.fn.KUTE=function(t,n,i,h){var s,o=[],a=this.length;for(s=0;a>s;s++){var e=this[s][t];"function"==typeof e&&e.apply(this[s]),"to"===t?o.push(new KUTE[t](this[s],n,i)):"fromTo"===t||"Animate"===t?o.push(new KUTE[t](this[s],n,i,h)):"chain"===t&&this[s].chain.apply(this[s],n)}return o}}(jQuery); \ No newline at end of file diff --git a/dist/kute-physics.min.js b/dist/kute-physics.min.js new file mode 100644 index 0000000..8efe92a --- /dev/null +++ b/dist/kute-physics.min.js @@ -0,0 +1,2 @@ +// dynamics easings KUTE.js | dnp_theme | MIT License +KUTE.Physics={};var _kp=KUTE.Physics,_hPI=Math.PI/2;_kp.spring=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),t=Math.pow(20,(n.friction||200)/100),p=n.anticipationStrength||0,i=(n.anticipationSize||0)/1e3;return _kps.run=function(n){var o,e,a,u,c,k,_,y;return k=n/(1-i)-i/(1-i),i>n?(y=i/(1-i)-i/(1-i),_=0/(1-i)-i/(1-i),c=Math.acos(1/_kps.A1(n,y)),a=(Math.acos(1/_kps.A1(n,_))-c)/(r*-i),o=_kps.A1):(o=_kps.A2,c=0,a=1),e=o(k,i,p,t),u=r*(n-i)*a+c,1-e*Math.cos(u)},_kps.run};var _kps=_kp.spring.prototype;_kps.run={},_kps.A1=function(n,r,t){var p,i,o,e;return o=r/(1-r),e=0,i=(o-.8*e)/(o-e),p=(.8-i)/o,p*n*t/100+i},_kps.A2=function(n,r,t,p){return Math.pow(p/10,-n)*(1-n)},_kp.bounce=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),t=Math.pow(20,(n.friction||200)/100);return _kpo.run=function(n){var p=Math.pow(t/10,-n)*(1-n),i=r*n*1+_hPI;return p*Math.cos(i)},_kpo.run};var _kpo=_kp.bounce.prototype;_kpo.run={},_kp.gravity=function(n){var r,t,p,i,o;return n=n||{},r=(n.bounciness||400)/1250,p=(n.elasticity||200)/1e3,o=n.initialForce||!1,i=100,t=[],_kpg.L=function(){var n,t;for(n=Math.sqrt(2/i),t={a:-n,b:n,H:1},o&&(t.a=0,t.b=2*t.b);t.H>.001;)_kpg.L=t.b-t.a,t={a:t.b,b:t.b+_kpg.L*r,H:t.H*r*r};return t.b}(),function(){var n,e,a,u;for(e=Math.sqrt(2/(i*_kpg.L*_kpg.L)),a={a:-e,b:e,H:1},o&&(a.a=0,a.b=2*a.b),t.push(a),n=_kpg.L,u=[];a.b<1&&a.H>.001;)n=a.b-a.a,a={a:a.b,b:a.b+n*r,H:a.H*p},u.push(t.push(a));return u}(),_kpg.fn=function(r){var p,i,e;for(i=0,p=t[i];!(r>=p.a&&r<=p.b)&&(i+=1,p=t[i]););return e=p?_kpg.getPointInCurve(p.a,p.b,p.H,r,n,_kpg.L):o?0:1},_kpg.fn};var _kpg=_kp.gravity.prototype;_kpg.L={},_kpg.fn={},_kpg.getPointInCurve=function(n,r,t,p,i,o){var e,a;return o=r-n,a=2/o*p-1-2*n/o,e=a*a*t-t+1,i.initialForce&&(e=1-e),e},_kp.forceWithGravity=function(n){var r=n||{};return r.initialForce=!0,_kp.gravity(r)},_kp.bezier=function(n){n=n||{};var r=n.points,t=!1,p=[];return function(){var n,t;for(n in r){if(t=parseInt(n),t>=r.length-1)break;_kpb.fn(r[t],r[t+1],p)}return p}(),_kpb.run=function(n){return 0===n?0:1===n?1:_kpb.yForX(n,p,t)},_kpb.run};var _kpb=_kp.bezier.prototype;_kpb.B2={},_kpb.run={},_kpb.fn=function(n,r,t){var p=function(t){return _kpb.Bezier(t,n,n.cp[n.cp.length-1],r.cp[0],r)};return t.push(p)},_kpb.Bezier=function(n,r,t,p,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)*p.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)*p.y+Math.pow(n,3)*i.y}},_kpb.yForX=function(n,r,t){var p,i,o,e,a,u,c,k,_=0,y=r.length;for(p=null,_;y>_&&(i=r[_],n>=i(0).x&&n<=i(1).x&&(p=i),null===p);_++);if(!p)return t?0:1;for(k=1e-4,e=0,u=1,a=(u+e)/2,c=p(a).x,o=0;Math.abs(n-c)>k&&100>o;)n>c?e=a:u=a,a=(u+e)/2,c=p(a).x,o++;return p(a).y},_kp.physicsInOut=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},_kp.physicsIn=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},_kp.physicsOut=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},_kp.physicsBackOut=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+r/1e3,y:1.3}]}]})},_kp.physicsBackIn=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:.28-r/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},_kp.physicsBackInOut=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:.68-r/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+r/1e3,y:1.45}]}]})}; \ 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 4348543..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.process(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 5466d73..0000000 --- a/dist/kute.jquery.js +++ /dev/null @@ -1,18 +0,0 @@ -// KUTE jQuery Plugin for kute.js | by dnp_theme | License - MIT -// $('selector').Kute(method, options); - -(function($) { - $.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause() - var mt = this[0][method], i, l = this.length; - if ( typeof mt === 'function' ) { - mt.apply(this[0]); - } - for (i=0;it)return!0;l===!1&&(null!==c&&c.call(n),l=!0);var o=(t-u)/a;o=o>1?1:o;var h=s(o);for(e in r){var E=i[e]||0,I=r[e];"string"==typeof I&&(I=E+parseFloat(I,10)),"number"==typeof I&&(n[e]=E+(I-E)*h)}return null!==f&&f.call(n,h),1==o?(null!==p&&p.call(n),!1):!0}},KUTE.process(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,r=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=r/4):n=r*Math.asin(1/i)/(2*Math.PI),-(i*Math.pow(2,10*(t-=1))*Math.sin(2*(t-n)*Math.PI/r)))},Out:function(t){var n,i=.1,r=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=r/4):n=r*Math.asin(1/i)/(2*Math.PI),i*Math.pow(2,-10*t)*Math.sin(2*(t-n)*Math.PI/r)+1)},InOut:function(t){var n,i=.1,r=.4;return 0===t?0:1===t?1:(!i||1>i?(i=1,n=r/4):n=r*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/r):i*Math.pow(2,-10*(t-=1))*Math.sin(2*(t-n)*Math.PI/r)*.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()} +// 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/kute-bezier.js b/kute-bezier.js new file mode 100644 index 0000000..44c23b9 --- /dev/null +++ b/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/kute-jquery.js b/kute-jquery.js new file mode 100644 index 0000000..153a26a --- /dev/null +++ b/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.full.js b/kute.full.js deleted file mode 100644 index b4f34da..0000000 --- a/kute.full.js +++ /dev/null @@ -1,810 +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; - }, - process : function ( time ) { - requestAnimationFrame(KUTE.process); - KUTE.update( time ); - } - }; -} )(); - -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] : ''; - - 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(); - - //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.transform = p; - el.style.msTransform = (cv(pp)?'perspective('+pp+'px) ':'') + p; - el.style.MozTransform = p; - el.style.webkitTransform = 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.process(0); - -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 index 5b69831..d20c73e 100644 --- a/kute.js +++ b/kute.js @@ -1,675 +1,855 @@ -// 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 ); +/* 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); } - }, - 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++; + } + _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 { - _tweens.splice( i, 1 ); + 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 + } + } + } + } } } - return true; - }, - process : function ( time ) { - requestAnimationFrame(KUTE.process); - KUTE.update( time ); } + + 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; } -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 - }; + if (!this._sCF) { + if (this._sC) { this._sC.call(); } + this._sCF = true; + } - //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]; - } - } + 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(); } - //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] : ''; - - 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 () { + if (e === 1) { + if (this._r > 0) { + if ( this._r !== Infinity ) { this._r--; } - //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 + ')' : ''; + 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 { - //do a zoom for IE8 - if (isIE8 && cv(sa)) { - el.style.zoom = this.scale; + 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); } - //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(); } + //stop ticking when finished + this.close(); + return false; } - ) - .onComplete( runFinished ) - .start(); - - //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.transform = p; - el.style.msTransform = (cv(pp)?'perspective('+pp+'px) ':'') + p; - el.style.MozTransform = p; - el.style.webkitTransform = 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; }; -}; + + 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; + }; -KUTE.process(0); - -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; + 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(); } - }, - 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; } - } -}; + 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; + }; -// 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(); + 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:40:11 +0300 Subject: [PATCH 038/471] 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 039/471] --- demo/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/index.html b/demo/index.html index 1e931f4..175c3c2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,7 +3,7 @@ - + @@ -182,7 +182,7 @@ - + From 9e693955ed00ad5ae5f34aa2e9c2121aba061c51 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 18 Oct 2015 09:42:40 +0300 Subject: [PATCH 040/471] --- 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 b8e7af39fa59dd7a6b5ba07819be357051988b53 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 18 Oct 2015 10:19:08 +0300 Subject: [PATCH 041/471] --- demo/assets/js/minifill.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/demo/assets/js/minifill.js b/demo/assets/js/minifill.js index 2d18656..917965b 100644 --- a/demo/assets/js/minifill.js +++ b/demo/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 26f03f6134dfe895a907574ece6b5ef762ec0f0e Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 18 Oct 2015 10:19:08 +0300 Subject: [PATCH 042/471] --- 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 69f7757ce0cd38beaae054ce101c30ae2b4ca125 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 18 Oct 2015 18:52:36 +0300 Subject: [PATCH 043/471] --- README.md | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index d059838..1a1003d 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,6 @@ A minimal native Javascript tweening engine with jQuery plugin, fo 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. -Also worth noting that the script does it's job without any dependency like plugins or other functionality. - # CDN Thanks to jsdelivr, we have CDN link here. @@ -29,9 +27,12 @@ KUTE.fromTo(el, { { translate: 150}, opacity: 0 }, { duration: 500, delay: 0, easing : 'exponentialInOut', - start : functionOne, // run function when tween starts - complete : functionTwo, // run function when tween animation is finished - update : functionThree // run function while tween runing + start: functionOne, // run function when tween starts + complete: functionTwo, // run function when tween animation is finished + update: functionThree // run function while tween running + stop: functionThree // run function when tween stopped + pause: functionThree // run function when tween paused + resume: functionThree // run function when resuming tween } } ); @@ -44,16 +45,16 @@ For documentation, examples and other cool tips, check the 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. From ecd63491e369b19acf806a350c75114fbc96e87b Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 18 Oct 2015 20:38:49 +0300 Subject: [PATCH 044/471] fixed tween.min.js file --- demo/assets/js/tween.min.js | 4 ++-- demo/performance.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/assets/js/tween.min.js b/demo/assets/js/tween.min.js index 299b67d..9c2a893 100644 --- a/demo/assets/js/tween.min.js +++ b/demo/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/demo/performance.html b/demo/performance.html index af5cc39..ef52f85 100644 --- a/demo/performance.html +++ b/demo/performance.html @@ -125,7 +125,7 @@ - + From 7808f9760fd84a5928ba9b611ef910749b470717 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 18 Oct 2015 20:38:49 +0300 Subject: [PATCH 045/471] 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 a6dc3fd33929c5ad1d049070baef45ae366829ae Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 21 Oct 2015 11:19:04 +0300 Subject: [PATCH 046/471] Update README.md --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1a1003d..886b12a 100644 --- a/README.md +++ b/README.md @@ -23,10 +23,9 @@ Quite easily, you can write 'bit more lines and you're making the earth go round //vanilla js KUTE.fromTo(el, { //options - { translate: 0}, opacity: 1 }, // fromValues - { translate: 150}, opacity: 0 }, - { duration: 500, delay: 0, - easing : 'exponentialInOut', + { translate: 0, opacity: 1 }, // fromValues + { translate: 150, opacity: 0 }, + { duration: 500, delay: 0, easing : 'exponentialInOut', start: functionOne, // run function when tween starts complete: functionTwo, // run function when tween animation is finished update: functionThree // run function while tween running From ef92d0938bae1cefc17fb792d2efad015abb8951 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 26 Oct 2015 08:36:48 +0200 Subject: [PATCH 047/471] --- demo/examples.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/examples.html b/demo/examples.html index 3a2c981..4a5e09a 100644 --- a/demo/examples.html +++ b/demo/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 74f35db07ccab2efd01e7253e81d4290475f6ef6 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 26 Oct 2015 08:36:48 +0200
Subject: [PATCH 048/471]

---
 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 8e21120720e226e190983be17d9abf506f959c11 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 26 Oct 2015 11:19:10 +0200
Subject: [PATCH 049/471] Update kute.js

Added better legacy browser detection, without `documentdocumentElement.className`
---
 kute.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/kute.js b/kute.js
index d20c73e..04a78fa 100644
--- a/kute.js
+++ b/kute.js
@@ -25,8 +25,8 @@
 		_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),
+		_isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
+		_isIE8 = _isIE === 8,
 
 		//assign preffix to DOM properties
 		_pfp = _pfp || _pfT ? _pf + 'Perspective' : 'perspective',
@@ -852,4 +852,4 @@
 	}
 	
 	return K;
-}));
\ No newline at end of file
+}));

From 3c7d277ca140860b98266661d8127458070d9589 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 26 Oct 2015 11:19:53 +0200
Subject: [PATCH 050/471] Update kute.min.js

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

diff --git a/dist/kute.min.js b/dist/kute.min.js
index 15566a5..f7ddc32 100644
--- a/dist/kute.min.js
+++ b/dist/kute.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
+!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),p=p||(l?"touchstart":"mousewheel"),f=document.body,h=document.getElementsByTagName("HTML")[0],c=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?f:h,d=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,v=8===d,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",x=x||u?s+"BorderBottomRightRadius":"borderBottomRightRadius",O=O||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||{},H=0;P>H;H++){var N=F[H];-1!==C.indexOf(N)?W[N]="rgba(0,0,0,0)":-1!==D.indexOf(N)||-1!==M.indexOf(N)||-1!==B.indexOf(N)?W[N]=0:-1!==k.indexOf(N)?W[N]=[50,50]:"clip"===N?W[N]=[0,0,0,0]:"translate3d"===N?W[N]=[0,0,0]:"translate"===N?W[N]=[0,0]:"rotate"===N||/X|Y|Z/.test(N)?W[N]=0:("scale"===N||"opacity"===N)&&(W[N]=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=O(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,p=u.value,f=l+(p-l)*e,h=u.unit,g=-1!==C.indexOf(i),_=-1!==B.indexOf(i)||-1!==M.indexOf(i),O=-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(O)"borderRadius"===i?n[E]=f+h:"borderTopLeftRadius"===i?n[y]=f+h:"borderTopRightRadius"===i?n[b]=f+h:"borderBottomLeftRadius"===i?n[w]=f+h:"borderBottomRightRadius"===i&&(n[x]=f+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 H,N="",j={};for(H in W){var K=Q[H].value||0,U=W[H].value||0,$=W[H].unit||"px";j[H]=K===U?U+$:K+(U-K)*e+$}N=W.x?"translate("+j.x+","+j.y+")":"translate3d("+j.translateX+","+j.translateY+","+j.translateZ+")",z=""===z?N:N+" "+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",pe=oe+(ue-oe)*e;se[ae]=ae+"("+pe+le+") "}ne=(se.skewX||"")+(se.skewY||""),z=""===z?ne:z+" "+ne}else if("scale"===X){var fe=Q.value,he=W.value,ce=fe+(he-fe)*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 p)ge[ve]="a"!==ve?parseInt(l[ve]+(p[ve]-l[ve])*e)||0:l[ve]&&p[ve]?parseFloat(l[ve]+(p[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]=f+h;else if(T)a.scrollTop=l+(p-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="%",xe=Ee+(ye-Ee)*e,Oe="%";n[i]=be+we+" "+xe+Oe}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*f)+")":f)}},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(N in this._vS)if("transform"===N&&N in this._vE)for(var n in this._vS[N]){n in this._vE[N]||(this._vE[N][n]={});for(var s in this._vS[N][n])if(void 0!==this._vS[N][n][s].value){s in this._vE[N][n]||(this._vE[N][n][s]={});for(var a in this._vS[N][n][s])a in this._vE[N][n][s]||(this._vE[N][n][s][a]=this._vS[N][n][s][a])}if("value"in this._vS[N][n]&&!("value"in this._vE[N][n]))for(var s in this._vS[N][n])s in this._vE[N][n]||(this._vE[N][n][s]=this._vS[N][n][s])}}for(N in this._vE)this._vSR[N]=this._vS[N];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(p,r.preventScroll,!1)},j.removeListeners=function(){document.removeEventListener(p,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 p=n[u]+s[l];-1!==A.indexOf(p)&&p in r&&(t[p]=i[p]||W[p])}}else if(-1===I.indexOf(a))if("opacity"===a&&v){var f=this.gCS("filter");t.opacity="number"==typeof f?f: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 p=u[l];s["translate"+p]=/3d/.test(o)?r.pp("translate"+p,t[o][l]):"translate"+p in t?r.pp("translate"+p,t["translate"+p]):{value:0,unit:"px"}}n.translate=s}else if("rotate"!==o&&/rotate|skew/.test(o)){var f=/rotate/.test(o)?"rotate":"skew",h=["X","Y","Z"],c=0,d={},v={},a="rotate"===f?d:v;for(c;3>c;c++){var g=h[c];void 0!==t[f+g]&&"skewZ"!==o&&(a[f+g]=r.pp(f+g,t[f+g]))}n[f]=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]),p=r.truD(u[1]);return{x:l,y:p}}if(-1!==D.indexOf(t)){var f=r.truD(e);return{value:f.v,unit:f.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});

From 402edc2b35f647015dd1474ae9edaf3070c3fa41 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 26 Oct 2015 12:04:54 +0200
Subject: [PATCH 051/471]

---
 README.md                  |    4 +-
 demo/about.html            |    3 +-
 demo/api.html              |   29 +-
 demo/assets/js/examples.js |    9 +-
 demo/examples.html         |   16 +-
 demo/features.html         |    6 +-
 demo/index.html            |    2 +-
 demo/performance.html      |   17 +-
 demo/src/kute.js           | 1710 ++++++++++++++++++------------------
 9 files changed, 893 insertions(+), 903 deletions(-)

diff --git a/README.md b/README.md
index 886b12a..c50cca5 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ A minimal native Javascript tweening engine with jQuery plugin, fo
 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.
+Thanks to jsdelivr, we have CDN link here.
 
 # Basic Usage
 At a glance, you can write one line and you're done.
@@ -56,7 +56,7 @@ That's right, there you have it, just a few bits of code to bridge the awesome `
 * handles browser prefixes for you as well.
 
 # 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.
+Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills.io.
 
 # License
 MIT License
diff --git a/demo/about.html b/demo/about.html
index 907e3f0..14260ed 100644
--- a/demo/about.html
+++ b/demo/about.html
@@ -24,8 +24,7 @@
 
 	
     
-	
-	
+
 
 
 
diff --git a/demo/api.html b/demo/api.html
index 08df62d..669f026 100644
--- a/demo/api.html
+++ b/demo/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/demo/assets/js/examples.js b/demo/assets/js/examples.js
index 5d3482c..731ec99 100644
--- a/demo/assets/js/examples.js
+++ b/demo/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/demo/examples.html b/demo/examples.html
index 4a5e09a..c9f4ba3 100644
--- a/demo/examples.html
+++ b/demo/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/demo/features.html b/demo/features.html
index 3f62292..a18b726 100644
--- a/demo/features.html
+++ b/demo/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/demo/index.html b/demo/index.html
index 175c3c2..451c67a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -28,7 +28,7 @@
 	
 	
 	
diff --git a/demo/performance.html b/demo/performance.html
index ef52f85..af3238a 100644
--- a/demo/performance.html
+++ b/demo/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/demo/src/kute.js b/demo/src/kute.js
index c9e5019..04a78fa 100644
--- a/demo/src/kute.js
+++ b/demo/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 12:04:54 +0200
Subject: [PATCH 052/471]

---
 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 053/471] --- demo/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/index.html b/demo/index.html index 451c67a..7bace66 100644 --- a/demo/index.html +++ b/demo/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 f00ef2dcd60606281e9f4c35f2f950cd1fd122c9 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 26 Oct 2015 13:04:58 +0200 Subject: [PATCH 054/471] --- 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 03b1511580b92e6f12da1941493ab9a1f494e954 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 30 Oct 2015 08:04:38 +0200 Subject: [PATCH 055/471] Update README.md --- README.md | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index c50cca5..0258633 100644 --- a/README.md +++ b/README.md @@ -24,8 +24,10 @@ Quite easily, you can write 'bit more lines and you're making the earth go round KUTE.fromTo(el, { //options { translate: 0, opacity: 1 }, // fromValues - { translate: 150, opacity: 0 }, - { duration: 500, delay: 0, easing : 'exponentialInOut', + { translate: 150, opacity: 0 }, // toValues + { duration: 500, delay: 0, easing : 'exponentialInOut', // basic options + + //callbacks start: functionOne, // run function when tween starts complete: functionTwo, // run function when tween animation is finished update: functionThree // run function while tween running @@ -41,22 +43,29 @@ KUTE.fromTo(el, { For documentation, examples and other cool tips, check the demo. #jQuery Plugin -That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/dist](https://github.com/thednp/kute.js/blob/master/dist/kute-jquery.min.js) folder. +That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/master](https://github.com/thednp/kute.js/blob/master/kute-jquery.js) folder. # What else it does -* computes properties values properly according to their measurement unit (px,%,deg,etc) -* properly handles cross browser 3D `transform` when elements have a `perspective`, else the animation won't run -* it converts `HEX` colors to `RGB` and tweens the inner values, then ALWAYS updates color via `RGB` +* handles all kinds of `transform` properties and makes sure to always use the same order of the `transform functions` (`translate`, `rotate`, `skew`, `scale`) +* computes properties' values properly according to their measurement unit (px,%,deg,etc) +* properly handles cross browser 3D `transform` with `perspective` and `perspective` for element or it's parent +* converts `HEX` colors to `RGB` and tweens the inner values, then ALWAYS updates color via `RGB` * properly replaces `top`, `centered` or any other background position with proper value to be able to tween * for most supported properties it reads the current element computed style property value as initial value (via `currentStyle || getComputedStyle`) * allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options -* since `translate3D` is best for performance, `kute.js` will always uses it +* since `translate3D` is best for performance, `kute.js` will always use it * accepts "nice & easy string" easing functions, like `linear` or `easingExponentialOut` (removes the use of the evil `eval`, making development safer easier and closer to standards :) -* uses 31 easing functions, all Robert Penner's easing equations and 2 more libraries -* handles browser prefixes for you as well. +* uses all 31 Robert Penner's easing functions, as well as bezier and physics easing functions +* handles browser prefixes for you for `transform`, `perspective`, `perspective-origin`, `border-radius` and `requestAnimationFrame` +* all this is possible with a core script of less than 20k size! # Browser Support Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills.io. +# Contributions +* Dav aka @dalisoft contributed a great deal for the performance and functinality of KUTE.js +* [Ingwie Phoenix](https://github.com/IngwiePhoenix): RequireJS/CommonJS compatibility and usability with common package managers +* Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project + # License MIT License From 0bde518b4fae3e321e4e8a1b4e9a9beba489387c Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 30 Oct 2015 08:06:11 +0200 Subject: [PATCH 056/471] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0258633..b17e2f7 100644 --- a/README.md +++ b/README.md @@ -8,18 +8,18 @@ Thanks to jsdelivr, we have CDN link polyfills.io. # Contributions -* Dav aka @dalisoft contributed a great deal for the performance and functinality of KUTE.js +* Dav aka [@dalisoft](https://github.com/dalisoft) contributed a great deal for the performance and functinality of KUTE.js * [Ingwie Phoenix](https://github.com/IngwiePhoenix): RequireJS/CommonJS compatibility and usability with common package managers * Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project From 5c80b15fb7fae3afdc33ccf62befd97f979b7cb2 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 30 Oct 2015 08:18:39 +0200 Subject: [PATCH 058/471] Update README.md --- README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index fe5b36d..6f43395 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# kute.js +# KUTE.js A minimal native Javascript tweening engine with jQuery plugin, forked from tween.js with most essential options for web developers, designers and animators. Unlike the original script, KUTE.js delivers easy to use methods to set up high performance animations on the fly. -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. +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. @@ -20,7 +20,7 @@ $('selector').KUTE('fromTo', fromValues, toValues, options); # Advanced Usage Quite easily, you can write 'bit more lines and you're making the earth go round. ```javascript -//vanilla js +//vanilla js is always the coolest KUTE.fromTo(el, { //options { translate: 0, opacity: 1 }, // fromValues @@ -46,24 +46,26 @@ For documentation, examples and other cool tips, check the polyfills.io. +Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills. I also packed a small polyfill set with most essential features required by KUTE.js to work, it's called [minifill](https://github.com/thednp/minifill), try it. # Contributions -* Dav aka [@dalisoft](https://github.com/dalisoft) contributed a great deal for the performance and functinality of KUTE.js +* Dav aka [@dalisoft](https://github.com/dalisoft) contributed a great deal for the performance and functionality of KUTE.js * [Ingwie Phoenix](https://github.com/IngwiePhoenix): RequireJS/CommonJS compatibility and usability with common package managers * Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project From 37348c36095a1a36e144a3ca394ca52b051d7936 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 30 Oct 2015 08:28:08 +0200 Subject: [PATCH 059/471] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6f43395..48127e9 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ That's right, there you have it, just a few bits of code to bridge the awesome ` * converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB` * properly replaces `top`, `centered` or any other background position with proper value to be able to tween * for most supported properties it reads the current element computed style property value as initial value (via `currentStyle || getComputedStyle`) -* because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's method +* because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's `.to()` method * allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options * since `translate3D` is best for movement animation performance, `kute.js` will always use it * accepts "nice & easy string" easing functions, like `linear` or `easingExponentialOut` (removes the use of the evil `eval`, making development safer easier and closer to standards :) From e2aa72e14b58fcfb4e6f74a494ee430739495888 Mon Sep 17 00:00:00 2001 From: Ingwie Phoenix Date: Sun, 1 Nov 2015 21:51:51 +0100 Subject: [PATCH 060/471] NPM/Bower and UMD support. - Supports `require()` and `define()` style loading. - Is available on Bower through Git tags. Not yet via NPM. (run `npm publish` inside the project to do so) - README updated with hint of usability with module loaders In the code: - Implemented UMD method, using AMD in first instance. - Error is thrown is the root KuteJS could not be found. What is missing: - Sub-modules should export their factory rather than doing this on their own. --- README.md | 32 ++- bower.json | 30 +++ kute-bezier.js | 301 ++++++++++++++------------ kute-jquery.js | 35 ++- kute-physics.js | 555 +++++++++++++++++++++++++----------------------- kute.js | 320 ++++++++++++++-------------- package.json | 25 +++ 7 files changed, 718 insertions(+), 580 deletions(-) create mode 100644 bower.json create mode 100644 package.json diff --git a/README.md b/README.md index 48127e9..c078e44 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,13 @@ A minimal native Javascript tweening engine with jQuery plugin, fo # CDN Thanks to jsdelivr, we have CDN link here. +# NPM/Bower +You can install this through NPM or bower respectively: + + $ npm install kute.js + # or + $ bower install kute.js + # Basic Usage At a glance, you can write one line and you're done. ```javascript @@ -16,6 +23,23 @@ new KUTE.fromTo('selector', fromValues, toValues, options); $('selector').KUTE('fromTo', fromValues, toValues, options); ``` +# CommonJS/AMD support +You can use this module through any of the common javascript module systems. For instance: + +```javascript +// NodeJS/CommonJS style +var kute = require("kute.js"); +// Add Bezier/Easing... +require("kute.js/kute-bezier"); + +// AMD +define([ + "kute.js", + "kute.js/kute-bezier.js" +], function(KUTE){ + // ... +}); +``` # Advanced Usage Quite easily, you can write 'bit more lines and you're making the earth go round. @@ -26,9 +50,9 @@ KUTE.fromTo(el, { { translate: 0, opacity: 1 }, // fromValues { translate: 150, opacity: 0 }, // toValues { duration: 500, delay: 0, easing : 'exponentialInOut', // basic options - + //callbacks - start: functionOne, // run function when tween starts + start: functionOne, // run function when tween starts complete: functionTwo, // run function when tween animation is finished update: functionThree // run function while tween running stop: functionThree // run function when tween stopped @@ -39,7 +63,7 @@ KUTE.fromTo(el, { ); ``` -# Demo +# Demo For documentation, examples and other cool tips, check the demo. #jQuery Plugin @@ -51,7 +75,7 @@ That's right, there you have it, just a few bits of code to bridge the awesome ` * computes properties' values properly according to their measurement unit (px,%,deg,etc) * properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent * converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB` -* properly replaces `top`, `centered` or any other background position with proper value to be able to tween +* properly replaces `top`, `centered` or any other background position with proper value to be able to tween * for most supported properties it reads the current element computed style property value as initial value (via `currentStyle || getComputedStyle`) * because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's `.to()` method * allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..2b6bdd6 --- /dev/null +++ b/bower.json @@ -0,0 +1,30 @@ +{ + "name": "KUTE.js", + "version": "0.9.4", + "homepage": "http://thednp.github.io/kute.js", + "authors": [ + "thednp" + ], + "description": "A minimal Native Javascript animation engine with jQuery plugin.", + "main": "kute.js", + "moduleType": [ + "amd", + "globals", + "node" + ], + "keywords": [ + "animations", + "native-javascript", + "kute.js", + "tweening", + "engine" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/kute-bezier.js b/kute-bezier.js index 44c23b9..64faa5b 100644 --- a/kute-bezier.js +++ b/kute-bezier.js @@ -6,154 +6,173 @@ * 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; +(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 root.KUTE != "undefined") { + kute_ea(root.KUTE); } else { - return _bz.bS(aX, iS, fiS, mX1, mX2); + throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.") } -}; +})(function(KUTE){ + KUTE.Ease = {}; -_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.bezier = function(mX1, mY1, mX2, mY2) { + return _bz.pB(mX1, mY1, mX2, mY2); + }; -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); }; + var _bz = KUTE.Ease.bezier.prototype; -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); }; + // 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 -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); }; + _bz.ksts = 11; // k Spline Table Size + _bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size -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); }; + _bz.f32as = 'Float32Array' in window; // float32ArraySupported + _bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values -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); }; + _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; }; -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); }; + _bz.r = {}; + _bz.pB = function (mX1, mY1, mX2, mY2) { + this._p = false; var self = this; -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 + _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); }; +}); diff --git a/kute-jquery.js b/kute-jquery.js index 153a26a..1526e0f 100644 --- a/kute-jquery.js +++ b/kute-jquery.js @@ -4,23 +4,44 @@ * Licensed under MIT-License */ -(function($) { - $.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause() + (function(kutejQuery){ + // We need to require the root KUTE and jQuery. + if(define == "function") { + define(["./kute.js", "jQuery"], function(KUTE, $){ + kutejQuery($, KUTE); + return KUTE; + }); + } else if(typeof module == "object" && typeof require == "function") { + // We assume, that require() is sync. + var KUTE = require("./kute.js"); + var $ = require("jQuery"); + kutejQuery($, KUTE); + // Export the modified one. Not really required, but convenient. + module.exports = $; + } else if(typeof root.KUTE != "undefined") { + // jQuery always has two ways of existing... Find one, and pass. + var $ = root.jQuery || root.$; + kutejQuery($, root.KUTE); + } else { + throw new Error("KUTE.js jQuery depends on KUTE.js and jQuery. Read the docs for more info.") + } + })(function($, KUTE) { + $.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 + frictionT = (t / (1 - aS)) - (aS / (1 - aS)); + if (t < aS) { + yS = (aS / (1 - aS)) - (aS / (1 - aS)); + y0 = (0 / (1 - aS)) - (aS / (1 - aS)); + b = Math.acos(1 / _kps.A1(t,yS)); + a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS)); + A = _kps.A1; + } else { + A = _kps.A2; + b = 0; + a = 1; + } + At = A(frictionT,aS,aSt,fc); + angle = fq * (t - aS) * a + b; + return 1 - (At * Math.cos(angle)); }; - } - return curve.b; - })(); - (function() { - var L2, b, curve, _results; - b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L)); - curve = { - a: -b, - b: b, - H: 1 + return _kps.run; }; - 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 + + var _kps = _kp.spring.prototype; + _kps.run = {}; + _kps.A1 = function(t,aS,aSt) { + var a, b, x0, x1; + x0 = aS / (1 - aS); + x1 = 0; + b = (x0 - (0.8 * x1)) / (x0 - x1); + a = (0.8 - b) / x0; + return (a * t * aSt / 100) + b; + }; + _kps.A2 = function(t,aS,aSt,f) { + return Math.pow(f / 10, -t) * (1 - t); + }; + + + // bounce + _kp.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); }; - _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; + return _kpo.run; + }; + + var _kpo = _kp.bounce.prototype; + _kpo.run = {}; + + + // gravity + _kp.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 = _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; } - } - if (!curve) { - v = initialForce ? 0 : 1; - } else { - v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L); - } - return v; - }; + return c; + }; - 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); -}; + //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 = []; + // multi point bezier + _kp.bezier = function(options) { + options = options || {}; + var points = options.points, + returnsToSelf = false, Bs = []; - (function() { - var i, k; + (function() { + var i, k; - for (i in points) { - k = parseInt(i); - if (k >= points.length - 1) { + 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; } - _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); + 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; }; - return _kpb.run; -}; -var _kpb = _kp.bezier.prototype; -_kpb.B2 = {}; -_kpb.run = {}; + _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 } ] } ] }); + }; -_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); -}; + _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 } ] } ] }); + }; -_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 - }; -}; + _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 } ] }] }); + }; -_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.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.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.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.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 + _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}]}] }); + }; +}); diff --git a/kute.js b/kute.js index 04a78fa..9541f85 100644 --- a/kute.js +++ b/kute.js @@ -4,23 +4,23 @@ */ (function (root, factory) { - if (typeof define === 'function' && define.amd) { - define(['KUTE'], factory); // AMD. Register as an anonymous module. + 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 + // Browser globals root.KUTE = root.KUTE || factory(); } }(this, function () { - var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick, + 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), @@ -39,16 +39,16 @@ _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', + _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 @@ -64,22 +64,22 @@ 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; + _d[p] = 0; } else if ( _bg.indexOf(p) !== -1 ){ _d[p] = [50,50]; } else if ( p === 'clip' ){ - _d[p] = [0,0,0,0]; + _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; + _d[p] = 0; } else if ( p === 'scale' || p === 'opacity' ){ - _d[p] = 1; + _d[p] = 1; } } - + //more internals K.getAll = function () { return _tws; }; K.removeAll = function () { _tws = []; }; @@ -106,16 +106,16 @@ _stk = false; return true; }; - + // internal stopTick - K.s = function () { + K.s = function () { if ( _stk === false ) { _caf(_t); _stk = true; _t = null; } }; - + //main methods K.to = function (el, to, o) { if ( o === undefined ) { o = {}; } @@ -136,8 +136,8 @@ var _o = o; _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; - - var _vS = K.prP(f, false), + + var _vS = K.prP(f, false), _vE = K.prP(to, true), _tw = new K.Tween(_el, _vS, _vE, _o); return _tw; @@ -160,7 +160,7 @@ 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, + 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, @@ -168,7 +168,7 @@ 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') { @@ -181,53 +181,53 @@ 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; + 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; + 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); + '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', + 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); + + _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', + 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); + _tS = (_tS === '') ? sk : (_tS + ' ' + sk); } else if (tP === 'scale') { var sc1 = t1.value, sc2 = t2.value, - s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')'; + s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')'; _tS = (_tS === '') ? scS : (_tS + ' ' + scS); } } @@ -237,45 +237,45 @@ for (c in v2) { if ( c !== 'a' ){ - _c[c] = parseInt(v1[c] + (v2[c] - v1[c]) * v)||0; + _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 + ')'; + 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 ) { + } else if ( sc ) { ets.scrollTop = v1 + ( v2 - v1 ) * v; - } else if ( bg ) { + } 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 = '%'; + 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._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 @@ -290,11 +290,11 @@ 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._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 @@ -305,23 +305,23 @@ 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._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]) { @@ -336,10 +336,10 @@ } } } - if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level + 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 + this._vE[p][sp][spp] = this._vS[p][sp][spp]; // spp = unit | value } } } @@ -347,12 +347,12 @@ } } } - + for ( p in this._vE ) { - this._vSR[p] = this._vS[p]; + this._vSR[p] = this._vS[p]; } - // now it's a good time to start + // now it's a good time to start K.add(this); this.playing = true; this.paused = false; @@ -362,7 +362,7 @@ if (!_t) K.t(); return this; }; - + //main worker, doing update on tick w.u = function(t) { t = t || window.performance.now(); @@ -375,49 +375,49 @@ 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 (e === 1) { if (this._r > 0) { - if ( this._r !== Infinity ) { this._r--; } - + 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; + return true; } else { - + if (this._cC) { this._cC.call(); } - - //stop preventing scroll when scroll tween finished + + //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(); + 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(); } @@ -427,8 +427,8 @@ w.pause = function() { if (!this.paused && this.playing) { K.remove(this); - this.paused = true; - this._pST = window.performance.now(); + this.paused = true; + this._pST = window.performance.now(); if (this._pC !== null) { this._pC.call(); } @@ -436,13 +436,13 @@ return this; }; - w.play = function () { + 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; + } + this._sT += window.performance.now() - this._pST; K.add(this); if (!_t) K.t(); // restart ticking if stopped } @@ -456,13 +456,13 @@ 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]; + this._vE[p] = tmp; + this._vS[p] = this._vSR[p]; } } - return this; + return this; }; - + w.chain = function () { this._cT = arguments; return this; }; w.stopChainedTweens = function () { @@ -471,14 +471,14 @@ this._cT[i].stop(); } }; - - w.scrollOut = function(){ //prevent scroll when tweening scroll + + 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') ) { @@ -487,7 +487,7 @@ } } }; - + w.addListeners = function () { document.addEventListener(_ev, K.preventScroll, false); }; @@ -495,57 +495,57 @@ 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]; + f['translate3d'] = cs['translate3d'] || _d[p]; } else if ( r2d ) { // 2d transforms - f[p] = cs[p] || _d[p]; + 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]; + 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'); + 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 + 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]; - } + f[p] = cs[p] || _d[p]; + } } - return f; - }; - + 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 + 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 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 + K.prP = function (t, e) { // process tween properties for .fromTo() method var _st = {}, tr = e === true ? _tfE : _tfS, tl = e === true ? _tlE : _tlS, @@ -598,14 +598,14 @@ 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++) { + 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]); + 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' }; } @@ -613,15 +613,15 @@ 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; + 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]); @@ -635,13 +635,13 @@ } return _st; }; - - // _cls _sc _op _bm _tp _bg _tf + + // _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(','); + 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 }, @@ -658,7 +658,7 @@ 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' } + t2d.y = { value: 0, unit: 'px' } } return t2d; } else if (p === 'rotate') { @@ -681,36 +681,36 @@ 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 { + } else { var ci; if ( /rect/.test(v) ) { - ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/); + ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/); } else if ( /auto|none|initial/.test(v) ){ - ci = _d[p]; - } + 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 ){ + 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, + var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length, y = getU(); function getU() { var u,i=0; @@ -720,14 +720,14 @@ } return { v: x, u: y }; }; - + K.preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll var data = document.body.getAttribute('data-tweening'); if (data && data === 'scroll') { e.preventDefault(); } }; - + K.truC = function (v) { // replace transparent and transform any color to rgba()/rgb() var vrgb, y; if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized @@ -745,7 +745,7 @@ return { r: 0, g: 0, b: 0, a: 0 }; } }; - + K.rth = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }; @@ -762,34 +762,34 @@ g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; - }; - + }; + K.pe = function (es) { //process easing if ( typeof es === 'function') { return es; } else if ( typeof es === 'string' ) { if ( /easing|linear/.test(es) ) { return K.Easing[es]; //regular Robert Penner Easing Functions - } else if ( /bezier/.test(es) ) { + } else if ( /bezier/.test(es) ) { var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','), i = 0, l = bz.length; for (i; i Date: Sun, 1 Nov 2015 21:55:32 +0100 Subject: [PATCH 061/471] jQuery added as dependency. --- bower.json | 5 ++++- package.json | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 2b6bdd6..2eb2cfa 100644 --- a/bower.json +++ b/bower.json @@ -26,5 +26,8 @@ "bower_components", "test", "tests" - ] + ], + "dependencies": { + "jquery": "~2.1.4" + } } diff --git a/package.json b/package.json index c69c9d7..ae1256e 100644 --- a/package.json +++ b/package.json @@ -21,5 +21,8 @@ "bugs": { "url": "https://github.com/thednp/kute.js/issues" }, - "homepage": "https://github.com/thednp/kute.js#readme" + "homepage": "https://github.com/thednp/kute.js#readme", + "dependencies": { + "jquery": "^2.1.4" + } } From 462a4d254bff38a74ebd2ee1841ec9de03bffdc6 Mon Sep 17 00:00:00 2001 From: Ingwie Phoenix Date: Sun, 1 Nov 2015 21:55:45 +0100 Subject: [PATCH 062/471] Ignoring PKM files. --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..68b9e27 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +bower_components/ From e9a4daa8be2dd579faa79ab29e7506de18f40eb7 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 2 Nov 2015 01:24:55 +0200 Subject: [PATCH 063/471] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ae1256e..b2f8ee2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kute.js", - "version": "0.9.4", + "version": "0.9.5", "description": "A minimal Native Javascript animation engine with jQuery plugin.", "main": "kute.js", "scripts": { @@ -12,7 +12,7 @@ }, "keywords": [ "kute.js", - "animation", + "animation engine", "animations", "native-javascript" ], From 6181d456898607bf87dc8971c4cdbf4cf30395ff Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 2 Nov 2015 01:25:45 +0200 Subject: [PATCH 064/471] Update bower.json --- bower.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 2eb2cfa..ea1cd6c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KUTE.js", - "version": "0.9.4", + "version": "0.9.5", "homepage": "http://thednp.github.io/kute.js", "authors": [ "thednp" @@ -14,6 +14,7 @@ ], "keywords": [ "animations", + "animation engine", "native-javascript", "kute.js", "tweening", From 976fc3049324956d8e906456e9714b496b8d34d9 Mon Sep 17 00:00:00 2001 From: thednp Date: Mon, 2 Nov 2015 11:58:02 +0200 Subject: [PATCH 065/471] Update README.md --- README.md | 42 +++++++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index c078e44..7087aab 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,32 @@ Thanks to jsdelivr, we have CDN link Date: Thu, 19 Nov 2015 11:40:13 +0200 Subject: [PATCH 066/471] Update kute.js Improvements according to Dav's suggestion https://github.com/thednp/kute.js/pull/11 --- kute.js | 342 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 169 insertions(+), 173 deletions(-) diff --git a/kute.js b/kute.js index 9541f85..aafef25 100644 --- a/kute.js +++ b/kute.js @@ -4,23 +4,24 @@ */ (function (root, factory) { - if (typeof define === 'function' && define.amd) { + 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 + } 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, + "use strict"; + var K = K || {}, _tws = [], _t, // _tweens // KUTE, _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), @@ -39,16 +40,16 @@ _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', + _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 @@ -64,22 +65,22 @@ 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; + _d[p] = 0; } else if ( _bg.indexOf(p) !== -1 ){ _d[p] = [50,50]; } else if ( p === 'clip' ){ - _d[p] = [0,0,0,0]; + _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; + _d[p] = 0; } else if ( p === 'scale' || p === 'opacity' ){ - _d[p] = 1; + _d[p] = 1; } } - + //more internals K.getAll = function () { return _tws; }; K.removeAll = function () { _tws = []; }; @@ -94,28 +95,23 @@ // internal ticker K.t = function (t) { _t = _raf(K.t); - var i = 0, l = _tws.length; - while ( i < l ) { - if (!_tws[i]) { return false; } + var i = 0; + while ( i < _tws.length ) { 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; - } + K.s = function () { + _caf(_t); + _t = null; }; - + //main methods K.to = function (el, to, o) { if ( o === undefined ) { o = {}; } @@ -136,8 +132,8 @@ var _o = o; _o.easing = _o && K.pe(_o.easing) || K.Easing.linear; - - var _vS = K.prP(f, false), + + var _vS = K.prP(f, false), _vE = K.prP(to, true), _tw = new K.Tween(_el, _vS, _vE, _o); return _tw; @@ -155,12 +151,12 @@ var _start = w._vS[p], _end = w._vE[p], - v1 = _start.value, - v2 = _end.value, + v1 = w._vS[p].value, + v2 = w._vE[p].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, + 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, @@ -168,7 +164,7 @@ 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') { @@ -182,52 +178,52 @@ } 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; + 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; + 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); + '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', + 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); + + _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', + 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); + _tS = (_tS === '') ? sk : (_tS + ' ' + sk); } else if (tP === 'scale') { var sc1 = t1.value, sc2 = t2.value, - s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')'; + s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')'; _tS = (_tS === '') ? scS : (_tS + ' ' + scS); } } @@ -237,45 +233,45 @@ for (c in v2) { if ( c !== 'a' ){ - _c[c] = parseInt(v1[c] + (v2[c] - v1[c]) * v)||0; + _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 + ')'; + 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 ) { + } else if ( sc ) { ets.scrollTop = v1 + ( v2 - v1 ) * v; - } else if ( bg ) { + } 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 = '%'; + 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._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 @@ -290,11 +286,11 @@ 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._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 @@ -305,23 +301,23 @@ 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._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]) { @@ -336,10 +332,10 @@ } } } - 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 + if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level + for ( var spp1 in this._vS[p][sp] ) { // scale + if (!(spp1 in this._vE[p][sp])) { + this._vE[p][sp][spp1] = this._vS[p][sp][spp1]; // spp = unit | value } } } @@ -347,12 +343,12 @@ } } } - + for ( p in this._vE ) { - this._vSR[p] = this._vS[p]; + this._vSR[p] = this._vS[p]; } - // now it's a good time to start + // now it's a good time to start K.add(this); this.playing = true; this.paused = false; @@ -362,7 +358,7 @@ if (!_t) K.t(); return this; }; - + //main worker, doing update on tick w.u = function(t) { t = t || window.performance.now(); @@ -375,49 +371,49 @@ 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 (e === 1) { if (this._r > 0) { - if ( this._r !== Infinity ) { this._r--; } - + 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; + return true; } else { - + if (this._cC) { this._cC.call(); } - - //stop preventing scroll when scroll tween finished + + //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(); + 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(); } @@ -427,8 +423,8 @@ w.pause = function() { if (!this.paused && this.playing) { K.remove(this); - this.paused = true; - this._pST = window.performance.now(); + this.paused = true; + this._pST = window.performance.now(); if (this._pC !== null) { this._pC.call(); } @@ -436,13 +432,13 @@ return this; }; - w.play = function () { + 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; + } + this._sT += window.performance.now() - this._pST; K.add(this); if (!_t) K.t(); // restart ticking if stopped } @@ -456,13 +452,13 @@ 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]; + this._vE[p] = tmp; + this._vS[p] = this._vSR[p]; } } - return this; + return this; }; - + w.chain = function () { this._cT = arguments; return this; }; w.stopChainedTweens = function () { @@ -471,14 +467,14 @@ this._cT[i].stop(); } }; - - w.scrollOut = function(){ //prevent scroll when tweening scroll + + 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') ) { @@ -487,7 +483,7 @@ } } }; - + w.addListeners = function () { document.addEventListener(_ev, K.preventScroll, false); }; @@ -495,57 +491,57 @@ 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]; + f['translate3d'] = cs['translate3d'] || _d[p]; } else if ( r2d ) { // 2d transforms - f[p] = cs[p] || _d[p]; + 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]; + 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'); + 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 + 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]; - } + f[p] = cs[p] || _d[p]; + } } - return f; - }; - + 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 + 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 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 + K.prP = function (t, e) { // process tween properties for .fromTo() method var _st = {}, tr = e === true ? _tfE : _tfS, tl = e === true ? _tlE : _tlS, @@ -598,14 +594,14 @@ 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]); + var ta = ['X', 'Y', 'Z'], f = 0; //coordinates // translate[x] = pp(x, t[x]); - for (f; f < 3; f++) { + for (f; f < 3; f++) { var a = ta[f]; if ( /3d/.test(x) ) { - tl['translate' + a] = K.pp('translate' + a, t[x][f]); + 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' }; } @@ -613,15 +609,15 @@ 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; + 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]); @@ -635,13 +631,13 @@ } return _st; }; - - // _cls _sc _op _bm _tp _bg _tf + + // _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(','); + 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 }, @@ -658,7 +654,7 @@ 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' } + t2d.y = { value: 0, unit: 'px' } } return t2d; } else if (p === 'rotate') { @@ -681,36 +677,36 @@ 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 { + } else { var ci; if ( /rect/.test(v) ) { - ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/); + ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/); } else if ( /auto|none|initial/.test(v) ){ - ci = _d[p]; - } + 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 ){ + 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, + var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length, y = getU(); function getU() { var u,i=0; @@ -720,14 +716,14 @@ } return { v: x, u: y }; }; - + K.preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll var data = document.body.getAttribute('data-tweening'); if (data && data === 'scroll') { e.preventDefault(); } }; - + K.truC = function (v) { // replace transparent and transform any color to rgba()/rgb() var vrgb, y; if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized @@ -745,7 +741,7 @@ return { r: 0, g: 0, b: 0, a: 0 }; } }; - + K.rth = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }; @@ -762,34 +758,34 @@ g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; - }; - + }; + K.pe = function (es) { //process easing if ( typeof es === 'function') { return es; } else if ( typeof es === 'string' ) { if ( /easing|linear/.test(es) ) { return K.Easing[es]; //regular Robert Penner Easing Functions - } else if ( /bezier/.test(es) ) { + } else if ( /bezier/.test(es) ) { var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','), i = 0, l = bz.length; for (i; i Date: Thu, 19 Nov 2015 12:30:34 +0200 Subject: [PATCH 067/471] Update kute.js --- demo/src/kute.js | 40 ++++++++++++++++++---------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/demo/src/kute.js b/demo/src/kute.js index 04a78fa..aafef25 100644 --- a/demo/src/kute.js +++ b/demo/src/kute.js @@ -4,16 +4,17 @@ */ (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 + 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 root.KUTE = root.KUTE || factory(); } }(this, function () { - var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick, + "use strict"; + var K = K || {}, _tws = [], _t, // _tweens // KUTE, _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 @@ -94,26 +95,21 @@ // internal ticker K.t = function (t) { _t = _raf(K.t); - var i = 0, l = _tws.length; - while ( i < l ) { - if (!_tws[i]) { return false; } + var i = 0; + while ( i < _tws.length ) { 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; - } + _caf(_t); + _t = null; }; //main methods @@ -155,8 +151,8 @@ var _start = w._vS[p], _end = w._vE[p], - v1 = _start.value, - v2 = _end.value, + v1 = w._vS[p].value, + v2 = w._vE[p].value, tv = v1 + (v2 - v1) * v, u = _end.unit, // checking array on every frame takes time so let's cache these @@ -181,7 +177,7 @@ 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 @@ -337,9 +333,9 @@ } } 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 ( var spp1 in this._vS[p][sp] ) { // scale + if (!(spp1 in this._vE[p][sp])) { + this._vE[p][sp][spp1] = this._vS[p][sp][spp1]; // spp = unit | value } } } From 687292304665e2988a9a5797543f09520415cc51 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 20 Dec 2015 23:02:22 +0200 Subject: [PATCH 068/471] Update kute.min.js --- dist/kute.min.js | 64 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/dist/kute.min.js b/dist/kute.min.js index f7ddc32..02db40e 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,64 @@ // 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),p=p||(l?"touchstart":"mousewheel"),f=document.body,h=document.getElementsByTagName("HTML")[0],c=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?f:h,d=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,v=8===d,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",x=x||u?s+"BorderBottomRightRadius":"borderBottomRightRadius",O=O||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||{},H=0;P>H;H++){var N=F[H];-1!==C.indexOf(N)?W[N]="rgba(0,0,0,0)":-1!==D.indexOf(N)||-1!==M.indexOf(N)||-1!==B.indexOf(N)?W[N]=0:-1!==k.indexOf(N)?W[N]=[50,50]:"clip"===N?W[N]=[0,0,0,0]:"translate3d"===N?W[N]=[0,0,0]:"translate"===N?W[N]=[0,0]:"rotate"===N||/X|Y|Z/.test(N)?W[N]=0:("scale"===N||"opacity"===N)&&(W[N]=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=O(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,p=u.value,f=l+(p-l)*e,h=u.unit,g=-1!==C.indexOf(i),_=-1!==B.indexOf(i)||-1!==M.indexOf(i),O=-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(O)"borderRadius"===i?n[E]=f+h:"borderTopLeftRadius"===i?n[y]=f+h:"borderTopRightRadius"===i?n[b]=f+h:"borderBottomLeftRadius"===i?n[w]=f+h:"borderBottomRightRadius"===i&&(n[x]=f+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 H,N="",j={};for(H in W){var K=Q[H].value||0,U=W[H].value||0,$=W[H].unit||"px";j[H]=K===U?U+$:K+(U-K)*e+$}N=W.x?"translate("+j.x+","+j.y+")":"translate3d("+j.translateX+","+j.translateY+","+j.translateZ+")",z=""===z?N:N+" "+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",pe=oe+(ue-oe)*e;se[ae]=ae+"("+pe+le+") "}ne=(se.skewX||"")+(se.skewY||""),z=""===z?ne:z+" "+ne}else if("scale"===X){var fe=Q.value,he=W.value,ce=fe+(he-fe)*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 p)ge[ve]="a"!==ve?parseInt(l[ve]+(p[ve]-l[ve])*e)||0:l[ve]&&p[ve]?parseFloat(l[ve]+(p[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]=f+h;else if(T)a.scrollTop=l+(p-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="%",xe=Ee+(ye-Ee)*e,Oe="%";n[i]=be+we+" "+xe+Oe}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*f)+")":f)}},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(N in this._vS)if("transform"===N&&N in this._vE)for(var n in this._vS[N]){n in this._vE[N]||(this._vE[N][n]={});for(var s in this._vS[N][n])if(void 0!==this._vS[N][n][s].value){s in this._vE[N][n]||(this._vE[N][n][s]={});for(var a in this._vS[N][n][s])a in this._vE[N][n][s]||(this._vE[N][n][s][a]=this._vS[N][n][s][a])}if("value"in this._vS[N][n]&&!("value"in this._vE[N][n]))for(var s in this._vS[N][n])s in this._vE[N][n]||(this._vE[N][n][s]=this._vS[N][n][s])}}for(N in this._vE)this._vSR[N]=this._vS[N];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(p,r.preventScroll,!1)},j.removeListeners=function(){document.removeEventListener(p,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 p=n[u]+s[l];-1!==A.indexOf(p)&&p in r&&(t[p]=i[p]||W[p])}}else if(-1===I.indexOf(a))if("opacity"===a&&v){var f=this.gCS("filter");t.opacity="number"==typeof f?f: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 p=u[l];s["translate"+p]=/3d/.test(o)?r.pp("translate"+p,t[o][l]):"translate"+p in t?r.pp("translate"+p,t["translate"+p]):{value:0,unit:"px"}}n.translate=s}else if("rotate"!==o&&/rotate|skew/.test(o)){var f=/rotate/.test(o)?"rotate":"skew",h=["X","Y","Z"],c=0,d={},v={},a="rotate"===f?d:v;for(c;3>c;c++){var g=h[c];void 0!==t[f+g]&&"skewZ"!==o&&(a[f+g]=r.pp(f+g,t[f+g]))}n[f]=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]),p=r.truD(u[1]);return{x:l,y:p}}if(-1!==D.indexOf(t)){var f=r.truD(e);return{value:f.v,unit:f.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}); +(function(root,factory){if(typeof define==='function'&&define.amd){define([],factory);}else if(typeof exports=='object'){module.exports=factory();}else{root.KUTE=root.KUTE||factory();}}(this,function(){"use strict";var K=K||{},_tws=[],_t,_pf=getPrefix(),_rafR=_rafR||((!('requestAnimationFrame'in window))?true:false),_pfT=_pfT||((!('transform'in document.getElementsByTagName('div')[0].style))?true:false),_pfB=_pfB||((!('border-radius'in document.getElementsByTagName('div')[0].style))?true:false),_tch=_tch||(('ontouchstart'in window||navigator.msMaxTouchPoints)||false),_ev=_ev||(_tch?'touchstart':'mousewheel'),_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,_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'],_cls=['color','backgroundColor','borderColor','borderTopColor','borderRightColor','borderBottomColor','borderLeftColor'],_sc=['scrollTop','scroll'],_clp=['clip'],_op=['opacity'],_rd=['borderRadius','borderTopLeftRadius','borderTopRightRadius','borderBottomLeftRadius','borderBottomRightRadius'],_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'],_tp=['fontSize','lineHeight','letterSpacing'],_bg=['backgroundPosition'],_3d=['rotateX','rotateY','translateZ'],_tf=['translate3d','translateX','translateY','translateZ','rotate','translate','rotateX','rotateY','rotateZ','skewX','skewY','scale'],_all=_cls.concat(_sc,_clp,_op,_rd,_bm,_tp,_bg,_tf),al=_all.length,_tfS={},_tfE={},_tlS={},_tlE={},_rtS={},_rtE={},_d=_d||{};for(var i=0;i1?1:e;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();} +this._sT=(this._y&&!this.reversed)?t+this._rD:t;return true;}else{if(this._cC){this._cC.call();} +this.scrollOut();var i=0,ctl=this._cT.length;for(i;i0){self._r=self.repeat;} +if(self._y&&self.reversed===true){self.reverse();self.reversed=false;} +self.playing=false;},100)};K.prP=function(t,e){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)){var ta=['X','Y','Z'],f=0;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)){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'){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;};K.pp=function(p,v){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){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, 20 Dec 2015 23:06:08 +0200 Subject: [PATCH 069/471] Update kute.min.js --- dist/kute.min.js | 64 +----------------------------------------------- 1 file changed, 1 insertion(+), 63 deletions(-) diff --git a/dist/kute.min.js b/dist/kute.min.js index 02db40e..f7c7659 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,64 +1,2 @@ // KUTE.js | dnp_theme | MIT-License -(function(root,factory){if(typeof define==='function'&&define.amd){define([],factory);}else if(typeof exports=='object'){module.exports=factory();}else{root.KUTE=root.KUTE||factory();}}(this,function(){"use strict";var K=K||{},_tws=[],_t,_pf=getPrefix(),_rafR=_rafR||((!('requestAnimationFrame'in window))?true:false),_pfT=_pfT||((!('transform'in document.getElementsByTagName('div')[0].style))?true:false),_pfB=_pfB||((!('border-radius'in document.getElementsByTagName('div')[0].style))?true:false),_tch=_tch||(('ontouchstart'in window||navigator.msMaxTouchPoints)||false),_ev=_ev||(_tch?'touchstart':'mousewheel'),_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,_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'],_cls=['color','backgroundColor','borderColor','borderTopColor','borderRightColor','borderBottomColor','borderLeftColor'],_sc=['scrollTop','scroll'],_clp=['clip'],_op=['opacity'],_rd=['borderRadius','borderTopLeftRadius','borderTopRightRadius','borderBottomLeftRadius','borderBottomRightRadius'],_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'],_tp=['fontSize','lineHeight','letterSpacing'],_bg=['backgroundPosition'],_3d=['rotateX','rotateY','translateZ'],_tf=['translate3d','translateX','translateY','translateZ','rotate','translate','rotateX','rotateY','rotateZ','skewX','skewY','scale'],_all=_cls.concat(_sc,_clp,_op,_rd,_bm,_tp,_bg,_tf),al=_all.length,_tfS={},_tfE={},_tlS={},_tlE={},_rtS={},_rtE={},_d=_d||{};for(var i=0;i1?1:e;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();} -this._sT=(this._y&&!this.reversed)?t+this._rD:t;return true;}else{if(this._cC){this._cC.call();} -this.scrollOut();var i=0,ctl=this._cT.length;for(i;i0){self._r=self.repeat;} -if(self._y&&self.reversed===true){self.reverse();self.reversed=false;} -self.playing=false;},100)};K.prP=function(t,e){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)){var ta=['X','Y','Z'],f=0;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)){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'){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;};K.pp=function(p,v){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){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;ie;e++)if(n[e]in t.style)return r[e];t=null}for(var e,r=r||{},i=[],n=t(),s=(s||("requestAnimationFrame"in window?!1:!0)),a=(a||("transform"in document.getElementsByTagName("div")[0].style?!1:!0)),o=(o||("border-radius"in document.getElementsByTagName("div")[0].style?!1:!0)),u=(u||"ontouchstart"in window||navigator.msMaxTouchPoints||!1),l=l||(u?"touchstart":"mousewheel"),p=document.body,f=document.getElementsByTagName("HTML")[0],h=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?p:f,c=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,d=8===c,v=v||a?n+"Perspective":"perspective",g=g||a?n+"PerspectiveOrigin":"perspectiveOrigin",_=_||a?n+"Transform":"transform",m=m||o?n+"BorderRadius":"borderRadius",E=E||o?n+"BorderTopLeftRadius":"borderTopLeftRadius",y=y||o?n+"BorderTopRightRadius":"borderTopRightRadius",b=b||o?n+"BorderBottomLeftRadius":"borderBottomLeftRadius",w=w||o?n+"BorderBottomRightRadius":"borderBottomRightRadius",x=x||s?window[n+"RequestAnimationFrame"]:window.requestAnimationFrame,O=O||s?window[n+"CancelAnimationFrame"]:window.cancelAnimationFrame,T=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],C=["scrollTop","scroll"],I=["clip"],S=["opacity"],R=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],D=["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"],M=["fontSize","lineHeight","letterSpacing"],B=["backgroundPosition"],k=["rotateX","rotateY","translateZ"],L=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],A=T.concat(C,I,S,R,D,M,B,L),F=A.length,P={},Y={},X={},Z={},z={},q={},Q=Q||{},W=0;F>W;W++){var H=A[W];-1!==T.indexOf(H)?Q[H]="rgba(0,0,0,0)":-1!==R.indexOf(H)||-1!==D.indexOf(H)||-1!==M.indexOf(H)?Q[H]=0:-1!==B.indexOf(H)?Q[H]=[50,50]:"clip"===H?Q[H]=[0,0,0,0]:"translate3d"===H?Q[H]=[0,0,0]:"translate"===H?Q[H]=[0,0]:"rotate"===H||/X|Y|Z/.test(H)?Q[H]=0:("scale"===H||"opacity"===H)&&(Q[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 n=0;nTt;Tt++){var It=o[Tt].v,St=u[Tt].v,Rt=u[Tt].u||"px";Ct[Tt]=It+(St-It)*e+Rt}n[i]="rect("+Ct+")"}else P&&(n[s]=d?"alpha(opacity="+parseInt(100*f)+")":f)}},r.perspective=function(t,e){void 0!==e._ppo&&(t.style[g]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[v]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[g]=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 N=r.Tween.prototype;N.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 o in this._vS[H][n])o in this._vE[H][n]||(this._vE[H][n][o]=this._vS[H][n][o])}}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},N.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 this._r!==1/0&&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},N.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},N.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},N.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},N.resume=function(){return this.play(),this},N.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},N.chain=function(){return this._cT=arguments,this},N.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},N.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},N.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},N.addListeners=function(){document.addEventListener(l,r.preventScroll,!1)},N.removeListeners=function(){document.removeEventListener(l,r.preventScroll,!1)},N.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!==L.indexOf(a)){var o="rotate"===a||"translate"===a||"scale"===a;if(/translate/.test(a)&&"translate"!==a)t.translate3d=i.translate3d||Q[a];else if(o)t[a]=i[a]||Q[a];else if(!o&&/rotate|skew/.test(a))for(var u=0;2>u;u++)for(var l=0;3>l;l++){var p=n[u]+s[l];-1!==L.indexOf(p)&&p in r&&(t[p]=i[p]||Q[p])}}else if(-1===C.indexOf(a))if("opacity"===a&&d){var f=this.gCS("filter");t.opacity="number"==typeof f?f:Q.opacity}else t[a]=this.gCS(a)||Q[a];else t[a]=null===e||void 0===e?window.pageYOffset||h.scrollTop:e.scrollTop;for(var a in i)-1===L.indexOf(a)||a in r||(t[a]=i[a]||Q[a]);return t},N.gIS=function(t){if(this._el){var e=this._el,r=e.style.cssText,i={},n=r.replace(/\s/g,"").split(";"),s=0,a=n.length;for(s;a>s;s++)if(/transform/.test(n[s])){var o=n[s].split(":")[1].split(")"),u=0,l=o.length;for(u;l>u;u++){var p=o[u].split("(");""!==p[0]&&L.indexOf(p)&&(i[p[0]]=/translate3d/.test(p[0])?p[1].split(","):p[1])}}return i}},N.gCS=function(t){var e=this._el,r=window.getComputedStyle(e)||e.currentStyle,i=!d&&a&&/transform|Radius/.test(t)?"-"+n.toLowerCase()+"-"+t:t,s=a&&"transform"===t||a&&-1!==R.indexOf(t)?r[i]:r[t];if("transform"!==t&&i in r){if(s){if("filter"===i){var o=parseInt(s.split("=")[1].replace(")","")),u=parseFloat(o/100);return u}return s}return Q[t]}},N.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?Y:P,s=e===!0?Z:X,a=e===!0?q:z;s={},n={};for(var o in t)if(-1!==L.indexOf(o)){if("translate"!==o&&/translate/.test(o)){var u=["X","Y","Z"],l=0;for(l;3>l;l++){var p=u[l];/3d/.test(o)?s["translate"+p]=r.pp("translate"+p,t[o][l]):s["translate"+p]="translate"+p in t?r.pp("translate"+p,t["translate"+p]):{value:0,unit:"px"}}n.translate=s}else if("rotate"!==o&&/rotate|skew/.test(o)){var f=/rotate/.test(o)?"rotate":"skew",h=["X","Y","Z"],c=0,d={},v={},a="rotate"===f?d:v;for(c;3>c;c++){var g=h[c];void 0!==t[f+g]&&"skewZ"!==o&&(a[f+g]=r.pp(f+g,t[f+g]))}n[f]=a}else("translate"===o||"rotate"===o||"scale"===o)&&(n[o]=r.pp(o,t[o]));i.transform=n}else-1===L.indexOf(o)&&(i[o]=r.pp(o,t[o]));return i},r.pp=function(t,e){if(-1!==L.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!==M.indexOf(t)||-1!==D.indexOf(t))return{value:r.truD(e).v,unit:r.truD(e).u};if(-1!==S.indexOf(t))return{value:parseFloat(e,10)};if(-1!==C.indexOf(t))return{value:parseFloat(e,10)};if(-1!==I.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=Q[t]),[r.truD(o[0]),r.truD(o[1]),r.truD(o[2]),r.truD(o[3])]}if(-1!==T.indexOf(t))return{value:r.truC(e)};if(-1!==B.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]),p=r.truD(u[1]);return{x:l,y:p}}if(-1!==R.indexOf(t)){var f=r.truD(e);return{value:f.v,unit:f.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 j=Math.PI,$=2*Math.PI,K=Math.PI/2,U=.1,G=.4;return r.Easing.easingSinusoidalIn=function(t){return-Math.cos(t*K)+1},r.Easing.easingSinusoidalOut=function(t){return Math.sin(t*K)},r.Easing.easingSinusoidalInOut=function(t){return-.5*(Math.cos(j*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:(!U||1>U?(U=1,e=G/4):e=G*Math.asin(1/U)/$,-(U*Math.pow(2,10*(t-=1))*Math.sin((t-e)*$/G)))},r.Easing.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!U||1>U?(U=1,e=G/4):e=G*Math.asin(1/U)/$,U*Math.pow(2,-10*t)*Math.sin((t-e)*$/G)+1)},r.Easing.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!U||1>U?(U=1,e=G/4):e=G*Math.asin(1/U)/$,(t*=2)<1?-.5*(U*Math.pow(2,10*(t-=1))*Math.sin((t-e)*$/G)):U*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*$/G)*.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}) From 480ece6a9ccf0e693b9f5ce0970dd4a57387a4e0 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 30 Dec 2015 00:32:16 +0200 Subject: [PATCH 070/471] Update bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index ea1cd6c..758552b 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KUTE.js", - "version": "0.9.5", + "version": "1.0.0", "homepage": "http://thednp.github.io/kute.js", "authors": [ "thednp" From 32a741ab20b151546da33e9eace8bb91f9683130 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 30 Dec 2015 00:32:38 +0200 Subject: [PATCH 071/471] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b2f8ee2..ccaf6f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kute.js", - "version": "0.9.5", + "version": "1.0.0", "description": "A minimal Native Javascript animation engine with jQuery plugin.", "main": "kute.js", "scripts": { From e8e2698ea25822be6bcc41e37671efe8d4091314 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 30 Dec 2015 01:50:12 +0200 Subject: [PATCH 072/471] Update api.html --- demo/api.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/demo/api.html b/demo/api.html index 669f026..a8ce17e 100644 --- a/demo/api.html +++ b/demo/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 6943b0c7e8a36a86e97790664125b7c4439c520c Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 30 Dec 2015 01:51:22 +0200
Subject: [PATCH 073/471] 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 e18178836797c63d5a889172161d9ce193a8db83 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 30 Dec 2015 18:21:55 +0200
Subject: [PATCH 074/471] Update README.md

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 7087aab..aac8b96 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,9 @@ A minimal native Javascript tweening engine with jQuery plugin, fo
 # CDN
 Thanks to jsdelivr, we have CDN link here.
 
+# Demo
+For documentation, examples and other cool tips, check the demo.
+
 # NPM/Bower
 You can install this through NPM or bower respectively:
 ```
@@ -64,12 +67,9 @@ KUTE.fromTo(el, {
       resume: functionThree // run function when resuming tween    
     }
   }
-);
+).start();
 ```
 
-# Demo
-For documentation, examples and other cool tips, check the demo.
-
 #jQuery Plugin
 That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/master](https://github.com/thednp/kute.js/blob/master/kute-jquery.js) folder.
 

From eb73a1ba4fc454ebac08e99855485ccd9a20322c Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 30 Dec 2015 18:23:16 +0200
Subject: [PATCH 075/471] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index aac8b96..590e2ce 100644
--- a/README.md
+++ b/README.md
@@ -75,7 +75,7 @@ That's right, there you have it, just a few bits of code to bridge the awesome `
 
 # What else it does
 * it computes all the values before starting the animation, then caches them to avoid layout thrashing that could occur during animation
-* handles all kinds of `transform` properties and makes sure to always use the same order of the `transform functions` (`translate`, `rotate`, `skew`, `scale`)
+* handles all kinds of `transform` properties and makes sure to always use the same order of the `transform` properties (`translate`, `rotate`, `skew`, `scale`)
 * computes properties' values properly according to their measurement unit (px,%,deg,etc)
 * properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent
 * converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB`

From 20750844104dad051a57d2748a3c4169c1dff4ec Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 30 Dec 2015 22:32:35 +0200
Subject: [PATCH 076/471] Update README.md

some updates and fixes for the documentation.
---
 README.md | 67 +++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 53 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 590e2ce..863280e 100644
--- a/README.md
+++ b/README.md
@@ -3,8 +3,10 @@ A minimal native Javascript tweening engine with jQuery plugin, fo
 
 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.
 
+Important: starting with 0.9.5 version, KUTE.js changes the prototype structure for performance, usability and browser support, as well as extensibility. The documentation and examples no longer support old versions prior to 0.9.5 release.
+
 # CDN
-Thanks to jsdelivr, we have CDN link here.
+Thanks to jsdelivr, we have a CDN link here.
 
 # Demo
 For documentation, examples and other cool tips, check the demo.
@@ -31,8 +33,9 @@ require("kute.js/kute-physics");
 // AMD
 define([
     "kute.js",
-    "kute.js/kute-bezier.js",
-    "kute.js/kute-physics.js"
+    "kute.js/kute-jquery.js", // optional for jQuery apps
+    "kute.js/kute-bezier.js", // optional for more accurate easing functions
+    "kute.js/kute-physics.js" // optional for more flexible & accurate easing functions
 ], function(KUTE){
     // ...
 });
@@ -42,20 +45,48 @@ define([
 At a glance, you can write one line and you're done.
 ```javascript
 //vanilla js
-new KUTE.fromTo('selector', fromValues, toValues, options);
+KUTE.fromTo('selector', fromValues, toValues, options).start();
 
 //with jQuery plugin
-$('selector').KUTE('fromTo', fromValues, toValues, options);
+var tween = $('selector').KUTE('fromTo', fromValues, toValues, options);
+$(tween).KUTE('start');
 ```
 
 # Advanced Usage
 Quite easily, you can write 'bit more lines and you're making the earth go round.
 ```javascript
 //vanilla js is always the coolest
-KUTE.fromTo(el, {
-  //options
+KUTE.fromTo(el,
     { translate: 0, opacity: 1 }, // fromValues
     { translate: 150, opacity: 0 }, // toValues
+    
+    // tween options object
+    { duration: 500, delay: 0, easing	: 'exponentialInOut', // basic options
+
+      // callbacks
+      start: functionOne, // run function when tween starts
+      complete: functionTwo, // run function when tween animation is finished
+      update: functionThree // run function while tween running    
+      stop: functionThree // run function when tween stopped    
+      pause: functionThree // run function when tween paused    
+      resume: functionThree // run function when resuming tween    
+    }
+).start(); // this is to start animation right away
+```
+
+# jQuery Plugin
+This aims to make the KUTE.js script work native within other jQuery apps but it's not always really needed as we will see in the second subchapter here. The plugin is just a few bits of code to bridge all of the the awesome `kute.js` methods to your jQuery apps. The plugin can be found in the [/master](https://github.com/thednp/kute.js/blob/master/kute-jquery.js) folder. So let's have a look at the syntax.
+
+## Using the jQuery Plugin
+Here's a KUTE.js jQuery Plugin example that showcases most common usage in future apps:
+```javascript
+// first we define the object(s)
+var tween = $('selector').KUTE('fromTo', // apply fromTo() method to selector
+  
+    { translate: 0, opacity: 1 }, // fromValues
+    { translate: 150, opacity: 0 }, // toValues
+    
+    // tween options object
     { duration: 500, delay: 0, easing	: 'exponentialInOut', // basic options
 
       //callbacks
@@ -66,15 +97,23 @@ KUTE.fromTo(el, {
       pause: functionThree // run function when tween paused    
       resume: functionThree // run function when resuming tween    
     }
-  }
-).start();
+);
+
+// then we apply the tween control methods, like start
+$(tween).('start');
 ```
 
-#jQuery Plugin
-That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/master](https://github.com/thednp/kute.js/blob/master/kute-jquery.js) folder.
+## Alternative usage in jQuery powered applications
+In some cases you can handle animations inside jQuery applications even without the plugin. Here's how the code could look like:
+```javascript
+var tween = KUTE.fromTo($('selector')[0], fromValues, toValues, options);
+tween.start();
+```
+Pay attention to that `$('selector')[0]` as jQuery always creates an array of selected objects and not a single object, that is why we need to focus a tween object to a single HTML object and not a selection of objects. Selections of objects should be handled with `for() {}` loops if that is the case, while the jQuery Plugin handles this properly for your app, as you would expect it to.
 
-# What else it does
-* it computes all the values before starting the animation, then caches them to avoid layout thrashing that could occur during animation
+
+# How it works
+* it computes all the values before starting the animation, then caches them to avoid layout thrashing that occur during animation
 * handles all kinds of `transform` properties and makes sure to always use the same order of the `transform` properties (`translate`, `rotate`, `skew`, `scale`)
 * computes properties' values properly according to their measurement unit (px,%,deg,etc)
 * properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent
@@ -84,7 +123,7 @@ That's right, there you have it, just a few bits of code to bridge the awesome `
 * because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's `.to()` method
 * allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options
 * since `translate3D` is best for movement animation performance, `kute.js` will always use it
-* accepts "nice & easy string" easing functions, like `linear` or `easingExponentialOut` (removes the use of the evil `eval`, making development safer easier and closer to standards :)
+* accepts "nice & easy string" easing functions, like `linear` or `easingExponentialOut` (removes the use of the evil `eval`, making development safer, easier and closer to standards :)
 * uses all 31 Robert Penner's easing functions, as well as bezier and physics easing functions
 * handles browser prefixes for you for `transform`, `perspective`, `perspective-origin`, `border-radius` and `requestAnimationFrame`
 * all this is possible with a core script of less than 20k size!

From acfce66a5188a9567605807b8aa0d2b0048205ba Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 30 Dec 2015 23:04:39 +0200
Subject: [PATCH 077/471] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 863280e..9e976fd 100644
--- a/README.md
+++ b/README.md
@@ -115,6 +115,7 @@ Pay attention to that `$('selector')[0]` as jQuery always creates an array of se
 # How it works
 * it computes all the values before starting the animation, then caches them to avoid layout thrashing that occur during animation
 * handles all kinds of `transform` properties and makes sure to always use the same order of the `transform` properties (`translate`, `rotate`, `skew`, `scale`)
+* allows you to set `perspective` for an element or it's parent for 3D transforms
 * computes properties' values properly according to their measurement unit (px,%,deg,etc)
 * properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent
 * converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB`

From 36f97142feebcad93db9bcf563424cd1ee777a5b Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 15 Jan 2016 01:17:18 +0200
Subject: [PATCH 078/471] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9e976fd..e8206c0 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # KUTE.js
 A minimal native Javascript tweening engine with jQuery plugin, forked from tween.js with most essential options for web developers, designers and animators. Unlike the original script, KUTE.js delivers easy to use methods to set up high performance animations on the fly.
 
-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.
+KUTE.js is like a merge of on of my own scripting with tween.js, but generally it's a much better build. You link the script at your ending </body> tag and write one line to do just about any animation you can think of.
 
 Important: starting with 0.9.5 version, KUTE.js changes the prototype structure for performance, usability and browser support, as well as extensibility. The documentation and examples no longer support old versions prior to 0.9.5 release.
 

From 2ebb6df04794accb5c4719a1c94e6fc5b96b994d Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 22 Jan 2016 00:46:51 +0200
Subject: [PATCH 079/471] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e8206c0..e7ae42a 100644
--- a/README.md
+++ b/README.md
@@ -100,7 +100,7 @@ var tween = $('selector').KUTE('fromTo', // apply fromTo() method to selector
 );
 
 // then we apply the tween control methods, like start
-$(tween).('start');
+$(tween).KUTE('start');
 ```
 
 ## Alternative usage in jQuery powered applications

From 0276f0ef74cf1a7b23d403294c73d0c6da0ce9a9 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 1 Feb 2016 21:01:43 +0200
Subject: [PATCH 080/471] Update README.md

---
 README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e7ae42a..a4a39c1 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,5 @@
 # KUTE.js
-A minimal native Javascript tweening engine with jQuery plugin, forked from tween.js with most essential options for web developers, designers and animators. Unlike the original script, KUTE.js delivers easy to use methods to set up high performance animations on the fly.
-
-KUTE.js is like a merge of on of my own scripting with tween.js, but generally it's a much better build. You link the script at your ending </body> tag and write one line to do just about any animation you can think of.
+A minimal native Javascript tweening engine with jQuery plugin, with most essential options for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations.
 
 Important: starting with 0.9.5 version, KUTE.js changes the prototype structure for performance, usability and browser support, as well as extensibility. The documentation and examples no longer support old versions prior to 0.9.5 release.
 

From 057cabde2a6b441e5c72255c39dfceeb5a76223e Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 4 Feb 2016 15:29:27 +0200
Subject: [PATCH 081/471]

---
 demo/src/kute-bezier.js  | 301 +++++++++++----------
 demo/src/kute-jquery.js  |  73 +++--
 demo/src/kute-physics.js | 555 ++++++++++++++++++++-------------------
 3 files changed, 494 insertions(+), 435 deletions(-)

diff --git a/demo/src/kute-bezier.js b/demo/src/kute-bezier.js
index 44c23b9..64faa5b 100644
--- a/demo/src/kute-bezier.js
+++ b/demo/src/kute-bezier.js
@@ -6,154 +6,173 @@
  * 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;
+(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 root.KUTE != "undefined") {
+        kute_ea(root.KUTE);
     } else {
-        return _bz.bS(aX, iS, fiS, mX1, mX2);
+        throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
     }
-};
+})(function(KUTE){
+    KUTE.Ease = {};
 
-_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.bezier = function(mX1, mY1, mX2, mY2) {
+        return _bz.pB(mX1, mY1, mX2, mY2);
+    };
 
-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); };
+    var _bz = KUTE.Ease.bezier.prototype;
 
-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); };
+    // 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
 
-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); };	
+    _bz.ksts = 11; // k Spline Table Size
+    _bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
 
-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); };
+    _bz.f32as = 'Float32Array' in window; // float32ArraySupported
+    _bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
 
-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); };
+    _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; };
 
-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); };
+    _bz.r = {};
+    _bz.pB = function (mX1, mY1, mX2, mY2) {
+    this._p = false; var self = this;
 
-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
+    _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); };
+});
diff --git a/demo/src/kute-jquery.js b/demo/src/kute-jquery.js
index 08b4ead..1526e0f 100644
--- a/demo/src/kute-jquery.js
+++ b/demo/src/kute-jquery.js
@@ -1,26 +1,47 @@
-/* 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
+        frictionT = (t / (1 - aS)) - (aS / (1 - aS));
+        if (t < aS) {
+          yS = (aS / (1 - aS)) - (aS / (1 - aS));
+          y0 = (0 / (1 - aS)) - (aS / (1 - aS));
+          b = Math.acos(1 / _kps.A1(t,yS));
+          a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
+          A = _kps.A1;
+        } else {
+          A = _kps.A2;
+          b = 0;
+          a = 1;
+        }
+        At = A(frictionT,aS,aSt,fc);
+        angle = fq * (t - aS) * a + b;
+        return 1 - (At * Math.cos(angle));
       };
-    }
-    return curve.b;
-  })();
 
-  (function() {
-    var L2, b, curve, _results;
-    b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
-    curve = {
-      a: -b,
-      b: b,
-      H: 1
+      return _kps.run;
     };
-    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
+
+    var _kps = _kp.spring.prototype;
+    _kps.run = {};
+    _kps.A1 = function(t,aS,aSt) {
+      var a, b, x0, x1;
+      x0 = aS / (1 - aS);
+      x1 = 0;
+      b = (x0 - (0.8 * x1)) / (x0 - x1);
+      a = (0.8 - b) / x0;
+      return (a * t * aSt / 100) + b;
+    };
+    _kps.A2 = function(t,aS,aSt,f) {
+      return Math.pow(f / 10, -t) * (1 - t);
+    };
+
+
+    // bounce
+    _kp.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);
       };
-      _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;
+      return _kpo.run;
+    };
+
+    var _kpo = _kp.bounce.prototype;
+    _kpo.run = {};
+
+
+    // gravity
+    _kp.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 = _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;
       }
-    }
-    if (!curve) {
-      v = initialForce ? 0 : 1;
-    } else {
-      v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
-    }
-    return v;
-  };
+      return c;
+    };
 
-  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);
-};
+    //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 = [];
+    // multi point bezier
+    _kp.bezier = function(options) {
+      options = options || {};
+      var points = options.points,
+          returnsToSelf = false, Bs = [];
 
-    (function() {
-      var i, k;
+        (function() {
+          var i, k;
 
-      for (i in points) {
-        k = parseInt(i);
-        if (k >= points.length - 1) {
+          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;
         }
-        _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);
+      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;
     };
-    return _kpb.run;
-};
 
-var _kpb = _kp.bezier.prototype;
-_kpb.B2 = {};
-_kpb.run = {};
+    _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 } ] } ] });
+    };
 
-_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);
-};
+    _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 } ] } ] });
+    };
 
-_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
-  };
-};
+    _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 } ] }]  });
+    };
 
-_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.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.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.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.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
+    _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}]}]  });
+    };
+});

From 12512274aa5815ce21eed972f2ae438b1851cdd7 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 5 Feb 2016 23:19:34 +0200
Subject: [PATCH 082/471] 1.0.1 first commit

* new changes to the prototype to allow more flexibility and performance
* introducing 2 new methods .allTo() and .allFromTo for collections of elements
* added a new tween option for the new methods called offset to set a delay between animations of these collections of elements
* removed deprecated method .Animate()
* improved performance for the render functions
* added support for transformOrigin tween setting
* documentation updates
* 'fixed' the additional tools UMD scripting
---
 demo/about.html            |   11 +-
 demo/api.html              |   91 +-
 demo/assets/js/examples.js |   14 +-
 demo/examples.html         |   28 +-
 demo/src/kute-bezier.js    |  278 +++---
 demo/src/kute-jquery.js    |   78 +-
 demo/src/kute-physics.js   |  563 ++++++------
 demo/src/kute.js           | 1753 +++++++++++++++++++-----------------
 kute-bezier.js             |  278 +++---
 kute-jquery.js             |   78 +-
 kute-physics.js            |  563 ++++++------
 kute.js                    | 1753 +++++++++++++++++++-----------------
 12 files changed, 2860 insertions(+), 2628 deletions(-)

diff --git a/demo/about.html b/demo/about.html
index 14260ed..ced630b 100644
--- a/demo/about.html
+++ b/demo/about.html
@@ -68,12 +68,15 @@
 		
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.

+		
In all animation engines, GSAP is the only one that exports all it's methods and computed values to the global scope to help diminish the time to access/execute, but it will find soon that it's no longer the case because modern browsers continuously improve their Javascript engines to a point where the access speed is the same, blazing fast, no matter how deep Javascript animation scope goes.

+        
 		
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 +97,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.

 	
diff --git a/demo/api.html b/demo/api.html
index a8ce17e..03b9cde 100644
--- a/demo/api.html
+++ b/demo/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/1.0.0/kute.min.js"></script> <!-- core KUTE.js -->

+
<script src="https://cdn.jsdelivr.net/kute.js/1.0.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.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 -->
+
<script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
+<script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
 

 		
Your awesome animation coding would follow after these script links.
		
 		
@@ -84,14 +84,40 @@ $ bower install --save kute.js
 
 	

 		
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.

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

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

+
+		
Multiple Tween Object Construct

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

+
+        
Considering that the selector matches two DIV elements, the value for the above variable myDivsTweens is an object that only stores the two tweens, one for each element found:

+

+myDivsTweens = { // console.log(myDivsTweens);
+    tweens = [ Tween, Tween ] console.log(myDivsTweens.tweens);
+}
+

+        
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 +127,24 @@ $ 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();
 

 
-		
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 +168,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,9 +202,20 @@ 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}, {duration: 500});
+
+// considering the collection has 5 tweens,
+// the array is right here tweensCollection.tweens, so
+// let's grab the second and chain another tween to it
+tweensCollection.tweens[1].chain(tween2);
 

 		
 
@@ -186,7 +227,8 @@ tween.chain(tween1,tween2);
 		
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 +239,7 @@ 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.

 
 		
Callback Options

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

diff --git a/demo/assets/js/examples.js b/demo/assets/js/examples.js
index 731ec99..37c5f2c 100644
--- a/demo/assets/js/examples.js
+++ b/demo/assets/js/examples.js
@@ -341,4 +341,16 @@ playPauseButton.addEventListener('click', function(e){
 	}  
 }, false);
 
-/* CROSS BROWSER EXAMPLE */
\ No newline at end of file
+/* CROSS BROWSER EXAMPLE */
+
+
+/* MULTI TWEENS EXAMPLE */
+var tweenMulti = KUTE.allFromTo('.example-multi',
+    {translate:[0,0], rotate: 0}, 
+    {translate:[0,-50], rotate: 360}, 
+    {transformOrigin: '10% 10%', offset: 300, duration: 1000, easing: 'easingCubicOut', repeat: 1, repeatDelay: 1000, yoyo: true}
+);
+function startMultiTween() {
+    tweenMulti.start();
+}
+/* MULTI TWEENS EXAMPLE */
\ No newline at end of file
diff --git a/demo/examples.html b/demo/examples.html
index c9f4ba3..51daf68 100644
--- a/demo/examples.html
+++ b/demo/examples.html
@@ -437,6 +437,33 @@ 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.
    • 			
 		
+        
+		
    Multi Tweens
    
+		
    With KUTE.js 1.0.1 we introduced new tween object constructor methods, 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 example with the two new options
+
+var myMultiTween2 = KUTE.allFromTo(
+    'selector1',
+    {translate:[0,0], rotate: 0}, 
+    {translate:[0,150], rotate: 360}, 
+    {transformOrigin: '100% 100%', offset: 200 }
+);
+
+
    
+		
    And should looks like this:
    
+		
    
+			
    K
    
+			
    U
    
+			
    T
    
+			
    E
    
+				
+			
    
+				Start	
+			
    
+		
    
 		
 		
         
-		
    Multi Tweens
    
-		
    With KUTE.js 1.0.1 we introduced new tween object constructor methods, let's have a little fun.
    
+		
    Tween Object Collections
    
+		
    With KUTE.js 1.0.1 we introduced new tween object constructor methods, they allow you to create a tween object for each element in a collection, a very handy way to ease and speed up the animation programing workflow. Let's have a little fun.
    
 
    // a simple .to() for a collection of elements would look like this
 var myMultiTween1 = KUTE.allTo('selector1',{translate:[0,150]});
 
-// or a more complex example with the two new options
-
+// or a more complex .fromTo() example with the two new options
 var myMultiTween2 = KUTE.allFromTo(
-    'selector1',
+    'selector2',
     {translate:[0,0], rotate: 0}, 
     {translate:[0,150], rotate: 360}, 
-    {transformOrigin: '100% 100%', offset: 200 }
+    {transformOrigin: '10% 10%', offset: 200 }
 );
 
 
    
diff --git a/dist/kute-bezier.min.js b/dist/kute-bezier.min.js
index 9f8e293..7d2686d 100644
--- a/dist/kute-bezier.min.js
+++ b/dist/kute-bezier.min.js
@@ -1,2 +1,2 @@
 // bezier easing for KUTE.js | dnp_theme | MIT License
-KUTE.Ease={},KUTE.Ease.bezier=function(n,e,t,r){return _bz.pB(n,e,t,r)};var _bz=KUTE.Ease.bezier.prototype;_bz.ni=4,_bz.nms=.001,_bz.sp=1e-7,_bz.smi=10,_bz.ksts=11,_bz.ksss=1/(_bz.ksts-1),_bz.f32as="Float32Array"in window,_bz.msv=_bz.f32as?new Float32Array(_bz.ksts):new Array(_bz.ksts),_bz.A=function(n,e){return 1-3*e+3*n},_bz.B=function(n,e){return 3*e-6*n},_bz.C=function(n){return 3*n},_bz.r={},_bz.pB=function(n,e,t,r){this._p=!1;var u=this;return _bz.r=function(s){return u._p||_bz.pc(n,t,e,r),n===e&&t===r?s:0===s?0:1===s?1:_bz.cB(_bz.gx(s,n,t),e,r)},_bz.r},_bz.cB=function(n,e,t){return((_bz.A(e,t)*n+_bz.B(e,t))*n+_bz.C(e))*n},_bz.gS=function(n,e,t){return 3*_bz.A(e,t)*n*n+2*_bz.B(e,t)*n+_bz.C(e)},_bz.bS=function(n,e,t,r,u){var s,b,_=0,z=_bz.sp,a=_bz.smi;do b=e+(t-e)/2,s=_bz.cB(b,r,u)-n,s>0?t=b:e=b;while(Math.abs(s)>z&&++_u;++u){var b=_bz.gS(e,t,r);if(0===b)return e;var _=_bz.cB(e,t,r)-n;e-=_/b}return e},_bz.csv=function(n,e){var t=0,r=_bz.ksts;for(t;r>t;++t)_bz.msv[t]=_bz.cB(t*_bz.ksss,n,e)},_bz.gx=function(n,e,t){for(var r=0,u=1,s=_bz.ksts-1;u!=s&&_bz.msv[u]<=n;++u)r+=_bz.ksss;--u;var b=(n-_bz.msv[u])/(_bz.msv[u+1]-_bz.msv[u]),_=r+b*_bz.ksss,z=_bz.gS(_,e,t),a=r+_bz.ksss;return z>=_bz.nms?_bz.nri(n,_,e,t):0===z?_:_bz.bS(n,r,a,e,t)},_bz.pc=function(n,e,t,r){this._p=!0,(n!=t||e!=r)&&_bz.csv(n,e)},KUTE.Ease.easeIn=function(){return _bz.pB(.42,0,1,1)},KUTE.Ease.easeOut=function(){return _bz.pB(0,0,.58,1)},KUTE.Ease.easeInOut=function(){return _bz.pB(.5,.16,.49,.86)},KUTE.Ease.easeInSine=function(){return _bz.pB(.47,0,.745,.715)},KUTE.Ease.easeOutSine=function(){return _bz.pB(.39,.575,.565,1)},KUTE.Ease.easeInOutSine=function(){return _bz.pB(.445,.05,.55,.95)},KUTE.Ease.easeInQuad=function(){return _bz.pB(.55,.085,.68,.53)},KUTE.Ease.easeOutQuad=function(){return _bz.pB(.25,.46,.45,.94)},KUTE.Ease.easeInOutQuad=function(){return _bz.pB(.455,.03,.515,.955)},KUTE.Ease.easeInCubic=function(){return _bz.pB(.55,.055,.675,.19)},KUTE.Ease.easeOutCubic=function(){return _bz.pB(.215,.61,.355,1)},KUTE.Ease.easeInOutCubic=function(){return _bz.pB(.645,.045,.355,1)},KUTE.Ease.easeInQuart=function(){return _bz.pB(.895,.03,.685,.22)},KUTE.Ease.easeOutQuart=function(){return _bz.pB(.165,.84,.44,1)},KUTE.Ease.easeInOutQuart=function(){return _bz.pB(.77,0,.175,1)},KUTE.Ease.easeInQuint=function(){return _bz.pB(.755,.05,.855,.06)},KUTE.Ease.easeOutQuint=function(){return _bz.pB(.23,1,.32,1)},KUTE.Ease.easeInOutQuint=function(){return _bz.pB(.86,0,.07,1)},KUTE.Ease.easeInExpo=function(){return _bz.pB(.95,.05,.795,.035)},KUTE.Ease.easeOutExpo=function(){return _bz.pB(.19,1,.22,1)},KUTE.Ease.easeInOutExpo=function(){return _bz.pB(1,0,0,1)},KUTE.Ease.easeInCirc=function(){return _bz.pB(.6,.04,.98,.335)},KUTE.Ease.easeOutCirc=function(){return _bz.pB(.075,.82,.165,1)},KUTE.Ease.easeInOutCirc=function(){return _bz.pB(.785,.135,.15,.86)},KUTE.Ease.easeInBack=function(){return _bz.pB(.6,-.28,.735,.045)},KUTE.Ease.easeOutBack=function(){return _bz.pB(.175,.885,.32,1.275)},KUTE.Ease.easeInOutBack=function(){return _bz.pB(.68,-.55,.265,1.55)},KUTE.Ease.slowMo=function(){return _bz.pB(0,.5,1,.5)},KUTE.Ease.slowMo1=function(){return _bz.pB(0,.7,1,.3)},KUTE.Ease.slowMo2=function(){return _bz.pB(0,.9,1,.1)};
\ 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=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&&++ci;++i){var o=t.gS(e,r,u);if(0===o)return e;var c=t.cB(e,r,u)-n;e-=c/o}return e},t.csv=function(n,e){var r=0,u=t.ksts;for(r;u>r;++r)t.msv[r]=t.cB(r*t.ksss,n,e)},t.gx=function(n,e,r){for(var u=0,i=1,s=t.ksts-1;i!=s&&t.msv[i]<=n;++i)u+=t.ksss;--i;var o=(n-t.msv[i])/(t.msv[i+1]-t.msv[i]),c=u+o*t.ksss,f=t.gS(c,e,r),a=u+t.ksss;return f>=t.nms?t.nri(n,c,e,r):0===f?c:t.bS(n,u,a,e,r)},t.pc=function(n,e,r,u){this._p=!0,(n!=r||e!=u)&&t.csv(n,e)},e.easeIn=function(){return t.pB(.42,0,1,1)},e.easeOut=function(){return t.pB(0,0,.58,1)},e.easeInOut=function(){return t.pB(.5,.16,.49,.86)},e.easeInSine=function(){return t.pB(.47,0,.745,.715)},e.easeOutSine=function(){return t.pB(.39,.575,.565,1)},e.easeInOutSine=function(){return t.pB(.445,.05,.55,.95)},e.easeInQuad=function(){return t.pB(.55,.085,.68,.53)},e.easeOutQuad=function(){return t.pB(.25,.46,.45,.94)},e.easeInOutQuad=function(){return t.pB(.455,.03,.515,.955)},e.easeInCubic=function(){return t.pB(.55,.055,.675,.19)},e.easeOutCubic=function(){return t.pB(.215,.61,.355,1)},e.easeInOutCubic=function(){return t.pB(.645,.045,.355,1)},e.easeInQuart=function(){return t.pB(.895,.03,.685,.22)},e.easeOutQuart=function(){return t.pB(.165,.84,.44,1)},e.easeInOutQuart=function(){return t.pB(.77,0,.175,1)},e.easeInQuint=function(){return t.pB(.755,.05,.855,.06)},e.easeOutQuint=function(){return t.pB(.23,1,.32,1)},e.easeInOutQuint=function(){return t.pB(.86,0,.07,1)},e.easeInExpo=function(){return t.pB(.95,.05,.795,.035)},e.easeOutExpo=function(){return t.pB(.19,1,.22,1)},e.easeInOutExpo=function(){return t.pB(1,0,0,1)},e.easeInCirc=function(){return t.pB(.6,.04,.98,.335)},e.easeOutCirc=function(){return t.pB(.075,.82,.165,1)},e.easeInOutCirc=function(){return t.pB(.785,.135,.15,.86)},e.easeInBack=function(){return t.pB(.6,-.28,.735,.045)},e.easeOutBack=function(){return t.pB(.175,.885,.32,1.275)},e.easeInOutBack=function(){return t.pB(.68,-.55,.265,1.55)},e.slowMo=function(){return t.pB(0,.5,1,.5)},e.slowMo1=function(){return t.pB(0,.7,1,.3)},e.slowMo2=function(){return t.pB(0,.9,1,.1)},e});
\ No newline at end of file
diff --git a/dist/kute-jquery.min.js b/dist/kute-jquery.min.js
index 4f9e775..b10b48e 100644
--- a/dist/kute-jquery.min.js
+++ b/dist/kute-jquery.min.js
@@ -1,2 +1,2 @@
 // KUTE jQuery Plugin for KUTE.js | by dnp_theme | License - MIT
-!function(t){t.fn.KUTE=function(t,n,i,h){var s,o=[],a=this.length;for(s=0;a>s;s++){var e=this[s][t];"function"==typeof e&&e.apply(this[s]),"to"===t?o.push(new KUTE[t](this[s],n,i)):"fromTo"===t||"Animate"===t?o.push(new KUTE[t](this[s],n,i,h)):"chain"===t&&this[s].chain.apply(this[s],n)}return o}}(jQuery);
\ No newline at end of file
+!function(e){if("function"==typeof define&&define.amd)define(["./kute.js","jQuery"],function(n,i){return e(i,n),n});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),i=require("jQuery");module.exports=e(i,n)}else{if("undefined"==typeof window.KUTE||"undefined"==typeof window.$&&"undefined"==typeof window.jQuery)throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");var i=window.jQuery||window.$,n=window.KUTE;i.fn.KUTE=e(i,n)}}(function(e,n){"use strict";var i=function(e,i,o,t){var r,u=[],f=this.length;for(r=0;f>r;r++){var d=this[r][e];"function"==typeof d&&d.apply(this[r]),"to"===e?u.push(new n[e](this[r],i,o)):"fromTo"===e||"Animate"===e?u.push(new n[e](this[r],i,o,t)):"chain"===e&&this[r].chain.apply(this[r],i)}return u};return i});
\ No newline at end of file
diff --git a/dist/kute-physics.min.js b/dist/kute-physics.min.js
index 8efe92a..4c6e359 100644
--- a/dist/kute-physics.min.js
+++ b/dist/kute-physics.min.js
@@ -1,2 +1,2 @@
 // dynamics easings KUTE.js | dnp_theme | MIT License 
-KUTE.Physics={};var _kp=KUTE.Physics,_hPI=Math.PI/2;_kp.spring=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),t=Math.pow(20,(n.friction||200)/100),p=n.anticipationStrength||0,i=(n.anticipationSize||0)/1e3;return _kps.run=function(n){var o,e,a,u,c,k,_,y;return k=n/(1-i)-i/(1-i),i>n?(y=i/(1-i)-i/(1-i),_=0/(1-i)-i/(1-i),c=Math.acos(1/_kps.A1(n,y)),a=(Math.acos(1/_kps.A1(n,_))-c)/(r*-i),o=_kps.A1):(o=_kps.A2,c=0,a=1),e=o(k,i,p,t),u=r*(n-i)*a+c,1-e*Math.cos(u)},_kps.run};var _kps=_kp.spring.prototype;_kps.run={},_kps.A1=function(n,r,t){var p,i,o,e;return o=r/(1-r),e=0,i=(o-.8*e)/(o-e),p=(.8-i)/o,p*n*t/100+i},_kps.A2=function(n,r,t,p){return Math.pow(p/10,-n)*(1-n)},_kp.bounce=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),t=Math.pow(20,(n.friction||200)/100);return _kpo.run=function(n){var p=Math.pow(t/10,-n)*(1-n),i=r*n*1+_hPI;return p*Math.cos(i)},_kpo.run};var _kpo=_kp.bounce.prototype;_kpo.run={},_kp.gravity=function(n){var r,t,p,i,o;return n=n||{},r=(n.bounciness||400)/1250,p=(n.elasticity||200)/1e3,o=n.initialForce||!1,i=100,t=[],_kpg.L=function(){var n,t;for(n=Math.sqrt(2/i),t={a:-n,b:n,H:1},o&&(t.a=0,t.b=2*t.b);t.H>.001;)_kpg.L=t.b-t.a,t={a:t.b,b:t.b+_kpg.L*r,H:t.H*r*r};return t.b}(),function(){var n,e,a,u;for(e=Math.sqrt(2/(i*_kpg.L*_kpg.L)),a={a:-e,b:e,H:1},o&&(a.a=0,a.b=2*a.b),t.push(a),n=_kpg.L,u=[];a.b<1&&a.H>.001;)n=a.b-a.a,a={a:a.b,b:a.b+n*r,H:a.H*p},u.push(t.push(a));return u}(),_kpg.fn=function(r){var p,i,e;for(i=0,p=t[i];!(r>=p.a&&r<=p.b)&&(i+=1,p=t[i]););return e=p?_kpg.getPointInCurve(p.a,p.b,p.H,r,n,_kpg.L):o?0:1},_kpg.fn};var _kpg=_kp.gravity.prototype;_kpg.L={},_kpg.fn={},_kpg.getPointInCurve=function(n,r,t,p,i,o){var e,a;return o=r-n,a=2/o*p-1-2*n/o,e=a*a*t-t+1,i.initialForce&&(e=1-e),e},_kp.forceWithGravity=function(n){var r=n||{};return r.initialForce=!0,_kp.gravity(r)},_kp.bezier=function(n){n=n||{};var r=n.points,t=!1,p=[];return function(){var n,t;for(n in r){if(t=parseInt(n),t>=r.length-1)break;_kpb.fn(r[t],r[t+1],p)}return p}(),_kpb.run=function(n){return 0===n?0:1===n?1:_kpb.yForX(n,p,t)},_kpb.run};var _kpb=_kp.bezier.prototype;_kpb.B2={},_kpb.run={},_kpb.fn=function(n,r,t){var p=function(t){return _kpb.Bezier(t,n,n.cp[n.cp.length-1],r.cp[0],r)};return t.push(p)},_kpb.Bezier=function(n,r,t,p,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)*p.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)*p.y+Math.pow(n,3)*i.y}},_kpb.yForX=function(n,r,t){var p,i,o,e,a,u,c,k,_=0,y=r.length;for(p=null,_;y>_&&(i=r[_],n>=i(0).x&&n<=i(1).x&&(p=i),null===p);_++);if(!p)return t?0:1;for(k=1e-4,e=0,u=1,a=(u+e)/2,c=p(a).x,o=0;Math.abs(n-c)>k&&100>o;)n>c?e=a:u=a,a=(u+e)/2,c=p(a).x,o++;return p(a).y},_kp.physicsInOut=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},_kp.physicsIn=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},_kp.physicsOut=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},_kp.physicsBackOut=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+r/1e3,y:1.3}]}]})},_kp.physicsBackIn=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:.28-r/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},_kp.physicsBackInOut=function(n){var r;return n=n||{},r=n.friction||500,_kp.bezier({points:[{x:0,y:0,cp:[{x:.68-r/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+r/1e3,y:1.45}]}]})};
\ No newline at end of file
+!function(n){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return n(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=n(r)}else{if("undefined"==typeof window.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.");window.KUTE.Physics=window.KUTE.Physics||n(r)}}(function(n){"use strict";var r=r||{},t=Math.PI/2;r.spring=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),t=Math.pow(20,(n.friction||200)/100),i=n.anticipationStrength||0,o=(n.anticipationSize||0)/1e3;return e.run=function(n){var u,c,a,f,p,y,s,h;return y=n/(1-o)-o/(1-o),o>n?(h=o/(1-o)-o/(1-o),s=0/(1-o)-o/(1-o),p=Math.acos(1/e.A1(n,h)),a=(Math.acos(1/e.A1(n,s))-p)/(r*-o),u=e.A1):(u=e.A2,p=0,a=1),c=u(y,o,i,t),f=r*(n-o)*a+p,1-c*Math.cos(f)},e.run};var e=r.spring.prototype;e.run={},e.A1=function(n,r,t){var e,i,o,u;return o=r/(1-r),u=0,i=(o-.8*u)/(o-u),e=(.8-i)/o,e*n*t/100+i},e.A2=function(n,r,t,e){return Math.pow(e/10,-n)*(1-n)},r.bounce=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),e=Math.pow(20,(n.friction||200)/100);return i.run=function(n){var i=Math.pow(e/10,-n)*(1-n),o=r*n*1+t;return i*Math.cos(o)},i.run};var i=r.bounce.prototype;i.run={},r.gravity=function(n){var r,t,e,i,u;return n=n||{},r=(n.bounciness||400)/1250,e=(n.elasticity||200)/1e3,u=n.initialForce||!1,i=100,t=[],o.L=function(){var n,t;for(n=Math.sqrt(2/i),t={a:-n,b:n,H:1},u&&(t.a=0,t.b=2*t.b);t.H>.001;)o.L=t.b-t.a,t={a:t.b,b:t.b+o.L*r,H:t.H*r*r};return t.b}(),function(){var n,c,a,f;for(c=Math.sqrt(2/(i*o.L*o.L)),a={a:-c,b:c,H:1},u&&(a.a=0,a.b=2*a.b),t.push(a),n=o.L,f=[];a.b<1&&a.H>.001;)n=a.b-a.a,a={a:a.b,b:a.b+n*r,H:a.H*e},f.push(t.push(a));return f}(),o.fn=function(r){var e,i,c;for(i=0,e=t[i];!(r>=e.a&&r<=e.b)&&(i+=1,e=t[i]););return c=e?o.getPointInCurve(e.a,e.b,e.H,r,n,o.L):u?0:1},o.fn};var o=r.gravity.prototype;o.L={},o.fn={},o.getPointInCurve=function(n,r,t,e,i,o){var u,c;return o=r-n,c=2/o*e-1-2*n/o,u=c*c*t-t+1,i.initialForce&&(u=1-u),u},r.forceWithGravity=function(n){var t=n||{};return t.initialForce=!0,r.gravity(t)},r.bezier=function(n){n=n||{};var r=n.points,t=!1,e=[];return function(){var n,t;for(n in r){if(t=parseInt(n),t>=r.length-1)break;u.fn(r[t],r[t+1],e)}return e}(),u.run=function(n){return 0===n?0:1===n?1:u.yForX(n,e,t)},u.run};var u=r.bezier.prototype;return u.B2={},u.run={},u.fn=function(n,r,t){var e=function(t){return u.Bezier(t,n,n.cp[n.cp.length-1],r.cp[0],r)};return t.push(e)},u.Bezier=function(n,r,t,e,i){return{x:Math.pow(1-n,3)*r.x+3*Math.pow(1-n,2)*n*t.x+3*(1-n)*Math.pow(n,2)*e.x+Math.pow(n,3)*i.x,y:Math.pow(1-n,3)*r.y+3*Math.pow(1-n,2)*n*t.y+3*(1-n)*Math.pow(n,2)*e.y+Math.pow(n,3)*i.y}},u.yForX=function(n,r,t){var e,i,o,u,c,a,f,p,y=0,s=r.length;for(e=null,y;s>y&&(i=r[y],n>=i(0).x&&n<=i(1).x&&(e=i),null===e);y++);if(!e)return t?0:1;for(p=1e-4,u=0,a=1,c=(a+u)/2,f=e(c).x,o=0;Math.abs(n-f)>p&&100>o;)n>f?u=c:a=c,c=(a+u)/2,f=e(c).x,o++;return e(c).y},r.physicsInOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.92-t/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+t/1e3,y:1}]}]})},r.physicsIn=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.92-t/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},r.physicsOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+t/1e3,y:1}]}]})},r.physicsBackOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+t/1e3,y:1.3}]}]})},r.physicsBackIn=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.28-t/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},r.physicsBackInOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.68-t/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+t/1e3,y:1.45}]}]})},r});
\ No newline at end of file
diff --git a/dist/kute.min.js b/dist/kute.min.js
index f7c7659..02e636b 100644
--- a/dist/kute.min.js
+++ b/dist/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js | dnp_theme | MIT-License
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=t.KUTE||e()}(this,function(){"use strict";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=t(),s=(s||("requestAnimationFrame"in window?!1:!0)),a=(a||("transform"in document.getElementsByTagName("div")[0].style?!1:!0)),o=(o||("border-radius"in document.getElementsByTagName("div")[0].style?!1:!0)),u=(u||"ontouchstart"in window||navigator.msMaxTouchPoints||!1),l=l||(u?"touchstart":"mousewheel"),p=document.body,f=document.getElementsByTagName("HTML")[0],h=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?p:f,c=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,d=8===c,v=v||a?n+"Perspective":"perspective",g=g||a?n+"PerspectiveOrigin":"perspectiveOrigin",_=_||a?n+"Transform":"transform",m=m||o?n+"BorderRadius":"borderRadius",E=E||o?n+"BorderTopLeftRadius":"borderTopLeftRadius",y=y||o?n+"BorderTopRightRadius":"borderTopRightRadius",b=b||o?n+"BorderBottomLeftRadius":"borderBottomLeftRadius",w=w||o?n+"BorderBottomRightRadius":"borderBottomRightRadius",x=x||s?window[n+"RequestAnimationFrame"]:window.requestAnimationFrame,O=O||s?window[n+"CancelAnimationFrame"]:window.cancelAnimationFrame,T=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],C=["scrollTop","scroll"],I=["clip"],S=["opacity"],R=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],D=["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"],M=["fontSize","lineHeight","letterSpacing"],B=["backgroundPosition"],k=["rotateX","rotateY","translateZ"],L=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],A=T.concat(C,I,S,R,D,M,B,L),F=A.length,P={},Y={},X={},Z={},z={},q={},Q=Q||{},W=0;F>W;W++){var H=A[W];-1!==T.indexOf(H)?Q[H]="rgba(0,0,0,0)":-1!==R.indexOf(H)||-1!==D.indexOf(H)||-1!==M.indexOf(H)?Q[H]=0:-1!==B.indexOf(H)?Q[H]=[50,50]:"clip"===H?Q[H]=[0,0,0,0]:"translate3d"===H?Q[H]=[0,0,0]:"translate"===H?Q[H]=[0,0]:"rotate"===H||/X|Y|Z/.test(H)?Q[H]=0:("scale"===H||"opacity"===H)&&(Q[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 n=0;nTt;Tt++){var It=o[Tt].v,St=u[Tt].v,Rt=u[Tt].u||"px";Ct[Tt]=It+(St-It)*e+Rt}n[i]="rect("+Ct+")"}else P&&(n[s]=d?"alpha(opacity="+parseInt(100*f)+")":f)}},r.perspective=function(t,e){void 0!==e._ppo&&(t.style[g]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[v]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[g]=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 N=r.Tween.prototype;N.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 o in this._vS[H][n])o in this._vE[H][n]||(this._vE[H][n][o]=this._vS[H][n][o])}}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},N.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 this._r!==1/0&&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},N.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},N.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},N.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},N.resume=function(){return this.play(),this},N.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},N.chain=function(){return this._cT=arguments,this},N.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},N.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},N.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},N.addListeners=function(){document.addEventListener(l,r.preventScroll,!1)},N.removeListeners=function(){document.removeEventListener(l,r.preventScroll,!1)},N.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!==L.indexOf(a)){var o="rotate"===a||"translate"===a||"scale"===a;if(/translate/.test(a)&&"translate"!==a)t.translate3d=i.translate3d||Q[a];else if(o)t[a]=i[a]||Q[a];else if(!o&&/rotate|skew/.test(a))for(var u=0;2>u;u++)for(var l=0;3>l;l++){var p=n[u]+s[l];-1!==L.indexOf(p)&&p in r&&(t[p]=i[p]||Q[p])}}else if(-1===C.indexOf(a))if("opacity"===a&&d){var f=this.gCS("filter");t.opacity="number"==typeof f?f:Q.opacity}else t[a]=this.gCS(a)||Q[a];else t[a]=null===e||void 0===e?window.pageYOffset||h.scrollTop:e.scrollTop;for(var a in i)-1===L.indexOf(a)||a in r||(t[a]=i[a]||Q[a]);return t},N.gIS=function(t){if(this._el){var e=this._el,r=e.style.cssText,i={},n=r.replace(/\s/g,"").split(";"),s=0,a=n.length;for(s;a>s;s++)if(/transform/.test(n[s])){var o=n[s].split(":")[1].split(")"),u=0,l=o.length;for(u;l>u;u++){var p=o[u].split("(");""!==p[0]&&L.indexOf(p)&&(i[p[0]]=/translate3d/.test(p[0])?p[1].split(","):p[1])}}return i}},N.gCS=function(t){var e=this._el,r=window.getComputedStyle(e)||e.currentStyle,i=!d&&a&&/transform|Radius/.test(t)?"-"+n.toLowerCase()+"-"+t:t,s=a&&"transform"===t||a&&-1!==R.indexOf(t)?r[i]:r[t];if("transform"!==t&&i in r){if(s){if("filter"===i){var o=parseInt(s.split("=")[1].replace(")","")),u=parseFloat(o/100);return u}return s}return Q[t]}},N.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?Y:P,s=e===!0?Z:X,a=e===!0?q:z;s={},n={};for(var o in t)if(-1!==L.indexOf(o)){if("translate"!==o&&/translate/.test(o)){var u=["X","Y","Z"],l=0;for(l;3>l;l++){var p=u[l];/3d/.test(o)?s["translate"+p]=r.pp("translate"+p,t[o][l]):s["translate"+p]="translate"+p in t?r.pp("translate"+p,t["translate"+p]):{value:0,unit:"px"}}n.translate=s}else if("rotate"!==o&&/rotate|skew/.test(o)){var f=/rotate/.test(o)?"rotate":"skew",h=["X","Y","Z"],c=0,d={},v={},a="rotate"===f?d:v;for(c;3>c;c++){var g=h[c];void 0!==t[f+g]&&"skewZ"!==o&&(a[f+g]=r.pp(f+g,t[f+g]))}n[f]=a}else("translate"===o||"rotate"===o||"scale"===o)&&(n[o]=r.pp(o,t[o]));i.transform=n}else-1===L.indexOf(o)&&(i[o]=r.pp(o,t[o]));return i},r.pp=function(t,e){if(-1!==L.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!==M.indexOf(t)||-1!==D.indexOf(t))return{value:r.truD(e).v,unit:r.truD(e).u};if(-1!==S.indexOf(t))return{value:parseFloat(e,10)};if(-1!==C.indexOf(t))return{value:parseFloat(e,10)};if(-1!==I.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=Q[t]),[r.truD(o[0]),r.truD(o[1]),r.truD(o[2]),r.truD(o[3])]}if(-1!==T.indexOf(t))return{value:r.truC(e)};if(-1!==B.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]),p=r.truD(u[1]);return{x:l,y:p}}if(-1!==R.indexOf(t)){var f=r.truD(e);return{value:f.v,unit:f.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 j=Math.PI,$=2*Math.PI,K=Math.PI/2,U=.1,G=.4;return r.Easing.easingSinusoidalIn=function(t){return-Math.cos(t*K)+1},r.Easing.easingSinusoidalOut=function(t){return Math.sin(t*K)},r.Easing.easingSinusoidalInOut=function(t){return-.5*(Math.cos(j*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:(!U||1>U?(U=1,e=G/4):e=G*Math.asin(1/U)/$,-(U*Math.pow(2,10*(t-=1))*Math.sin((t-e)*$/G)))},r.Easing.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!U||1>U?(U=1,e=G/4):e=G*Math.asin(1/U)/$,U*Math.pow(2,-10*t)*Math.sin((t-e)*$/G)+1)},r.Easing.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!U||1>U?(U=1,e=G/4):e=G*Math.asin(1/U)/$,(t*=2)<1?-.5*(U*Math.pow(2,10*(t-=1))*Math.sin((t-e)*$/G)):U*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*$/G)*.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})
+!function(t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():window.KUTE=window.KUTE||t()}(function(){"use strict";function t(){var t=document.createElement("div"),e=0,r=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=r.length,i=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(e;n>e;e++)if(i[e]in t.style)return r[e];t=null}for(var e=e||{},r=[],n=null,i=t(),a=("requestAnimationFrame"in window?!1:!0),s=("transform"in document.getElementsByTagName("div")[0].style?!1:!0),o=("border-radius"in document.getElementsByTagName("div")[0].style?!1:!0),u=("ontouchstart"in window||navigator.msMaxTouchPoints||!1),l=u?"touchstart":"mousewheel",v=document.body,f=document.getElementsByTagName("HTML")[0],p=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?v:f,c=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,d=8===c,h=s?i+"TransformOrigin":"transformOrigin",_=s?i+"Perspective":"perspective",g=s?i+"PerspectiveOrigin":"perspectiveOrigin",m=s?i+"Transform":"transform",y=o?i+"BorderRadius":"borderRadius",w=o?i+"BorderTopLeftRadius":"borderTopLeftRadius",T=o?i+"BorderTopRightRadius":"borderTopRightRadius",S=o?i+"BorderBottomLeftRadius":"borderBottomLeftRadius",b=o?i+"BorderBottomRightRadius":"borderBottomRightRadius",O=a?window[i+"RequestAnimationFrame"]:window.requestAnimationFrame,E=a?window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]:window.cancelAnimationFrame,x=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],C=["scrollTop","scroll"],I=["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"],A=["rotateX","rotateY","translateZ"],F=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],L=x.concat(C,I,R,D,M,B,k,F),P=L.length,q={},Y={},X={},Z={},z={},Q={},W=W||{},j=0;P>j;j++){var H=L[j];-1!==x.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)}e.to=function(t,r,n){var i="object"==typeof t?t:document.querySelector(t),a=r,s=e.prP(r,!0);return n=n||{},n.rpr=!0,new e.Tween(i,a,s,n)},e.fromTo=function(t,r,n,i){var a="object"==typeof t?t:document.querySelector(t),s=e.prP(r,!1),o=e.prP(n,!0);return i=i||{},new e.Tween(a,s,o,i)},e.allTo=function(t,r,n){var i="object"==typeof t&&t.length?t:document.querySelectorAll(t);return new e.TweensAT(i,r,n)},e.allFromTo=function(t,r,n,i){var a="object"==typeof t&&t.length?t:document.querySelectorAll(t);return new e.TweensFT(a,r,n,i)},e._r={};var N=e._r;e._u=function(t,e){if(e=e||window.performance.now(),e1?1:a;for(r in s)N[r](t,r,o(a));if(t._uC&&t._uC.call(),1===a){if(t._r>0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.reverse()),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),t.scrollOut();var u=0,l=t._cT.length;for(u;l>u;u++)t._cT[u].start(t._sT+t._dr);return t.close(),!1}return!0};var $=e._u;e._t=function(t){var i,a=0;for(n=O(e._t);a<(i=r.length);)$(r[a],t)?a++:r.splice(a,1);return!0},e.perspective=function(t,e){void 0!==e._to&&(t.style[h]=e._to),void 0!==e._ppo&&(t.style[g]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[_]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[g]=e._pppo)},e.getAll=function(){return r},e.removeAll=function(){r=[]},e.add=function(t){r.push(t)},e.remove=function(t){var e=r.indexOf(t);-1!==e&&r.splice(e,1)},e.s=function(){E(n),n=null},e._queue=function(t){for(var r in t._vE){var n=-1!==x.indexOf(r),i=-1!==B.indexOf(r)||-1!==M.indexOf(r),a=-1!==D.indexOf(r),s=-1!==C.indexOf(r),o=-1!==k.indexOf(r),u=-1!==I.indexOf(r),l=-1!==R.indexOf(r),v="transform"===r;!i||r in e._r?!a||r in e._r?!v||r in e._r?!n||r in e._r?!s||r in e._r?!o||r in e._r?!u||r in e._r?!l||r in e._r||(d?e._r[r]=function(t,e,r){t._el.style.filter="alpha(opacity="+100*(t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r)+")"}:e._r[r]=function(t,e,r){t._el.style.opacity=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r}):e._r[r]=function(t,e,r){var n=0,i=[];for(n;4>n;n++){var a=t._vS[e][n].v,s=t._vE[e][n].v,o=t._vE[e][n].u||"px";i[n]=a+(s-a)*r+o}t._el.style[e]="rect("+i+")"}:e._r[r]=function(t,e,r){var n=t._vS[e].x.v,i=t._vE[e].x.v,a=t._vS[e].y.v,s=t._vE[e].y.v,o=n+(i-n)*r,u="%",l=a+(s-a)*r,v="%";t._el.style[e]=o+u+" "+l+v}:e._r[r]=function(t,e,r){t._el=void 0===t._el||null===t._el?p:t._el,t._el.scrollTop=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r}:e._r[r]=function(t,r,n){var i={};for(var a in t._vE[r].value)"a"!==a?i[a]=parseInt(t._vS[r].value[a]+(t._vE[r].value[a]-t._vS[r].value[a])*n)||0:i[a]=t._vS[r].value[a]&&t._vE[r].value[a]?parseFloat(t._vS[r].value[a]+(t._vE[r].value[a]-t._vS[r].value[a])*n):null;t._hex?t._el.style[r]=e.rth(parseInt(i.r),parseInt(i.g),parseInt(i.b)):t._el.style[r]=!i.a||d?"rgb("+i.r+","+i.g+","+i.b+")":"rgba("+i.r+","+i.g+","+i.b+","+i.a+")"}:e._r[r]=function(t,e,r){var n,i,a="",s="perspective("+t._pp+"px) ";for(n in t._vE[e]){var o=t._vS[e][n],u=t._vE[e][n];if(i=i||-1!==A.indexOf(n)&&!c,"translate"===n){var l,v="",f={};for(l in u){var p=o[l].value||0,d=u[l].value||0,h=u[l].unit||"px";f[l]=p===d?d+h:p+(d-p)*r+h}v=u.x?"translate("+f.x+","+f.y+")":"translate3d("+f.translateX+","+f.translateY+","+f.translateZ+")",a=""===a?v:v+" "+a}else if("rotate"===n){var _,g="",y={};for(_ in u)if(o[_]){var w=o[_].value,T=u[_].value,S=u[_].unit||"deg",b=w+(T-w)*r;y[_]="z"===_?"rotate("+b+S+")":_+"("+b+S+") "}g=u.z?y.z:(y.rotateX||"")+(y.rotateY||"")+(y.rotateZ||""),a=""===a?g:a+" "+g}else if("skew"===n){var O="",E={};for(var x in u)if(o[x]){var C=o[x].value,I=u[x].value,R=u[x].unit||"deg",D=C+(I-C)*r;E[x]=x+"("+D+R+") "}O=(E.skewX||"")+(E.skewY||""),a=""===a?O:a+" "+O}else if("scale"===n){var M=o.value,B=u.value,k=M+(B-M)*r,F=n+"("+k+")";a=""===a?F:a+" "+F}}t._el.style[m]=i||void 0!==t._pp&&0!==t._pp?s+a:a}:"borderRadius"===r?e._r[r]=function(t,e,r){t._el.style[y]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}:"borderTopLeftRadius"===r?e._r[r]=function(t,e,r){t._el.style[w]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}:"borderTopRightRadius"===r?e._r[r]=function(t,e,r){t._el.style[T]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}:"borderBottomLeftRadius"===r?e._r[r]=function(t,e,r){t._el.style[S]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}:"borderBottomRightRadius"===r&&(e._r[r]=function(t,e,r){t._el.style[b]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}):e._r[r]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}}},e.prP=function(t,r){var n={},i=r===!0?Y:q,a=r===!0?Z:X,s=r===!0?Q:z;a={},i={};for(var o in t)if(-1!==F.indexOf(o)){if("translate"!==o&&/translate/.test(o)){var u=["X","Y","Z"],l=0;for(l;3>l;l++){var v=u[l];/3d/.test(o)?a["translate"+v]=e.pp("translate"+v,t[o][l]):a["translate"+v]="translate"+v in t?e.pp("translate"+v,t["translate"+v]):{value:0,unit:"px"}}i.translate=a}else if("rotate"!==o&&/rotate|skew/.test(o)){var f=/rotate/.test(o)?"rotate":"skew",p=["X","Y","Z"],c=0,d={},h={},s="rotate"===f?d:h;for(c;3>c;c++){var _=p[c];void 0!==t[f+_]&&"skewZ"!==o&&(s[f+_]=e.pp(f+_,t[f+_]))}i[f]=s}else("translate"===o||"rotate"===o||"scale"===o)&&(i[o]=e.pp(o,t[o]));n.transform=i}else-1===F.indexOf(o)&&(n[o]=e.pp(o,t[o]));return n},e.pp=function(t,r){if(-1!==F.indexOf(t)){var n,i=t.replace(/X|Y|Z/,"");if("translate3d"===t)return n=r.split(","),{translateX:{value:e.truD(n[0]).v,unit:e.truD(n[0]).u},translateY:{value:e.truD(n[1]).v,unit:e.truD(n[1]).u},translateZ:{value:e.truD(n[2]).v,unit:e.truD(n[2]).u}};if("translate"!==t&&"translate"===i)return{value:e.truD(r).v,unit:e.truD(r).u||"px"};if("rotate"!==t&&("skew"===i||"rotate"===i)&&"skewZ"!==t)return{value:e.truD(r).v,unit:e.truD(r,t).u||"deg"};if("translate"===t){n="string"==typeof r?r.split(","):r;var a={};return n instanceof Array?(a.x={value:e.truD(n[0]).v,unit:e.truD(n[0]).u},a.y={value:e.truD(n[1]).v,unit:e.truD(n[1]).u}):(a.x={value:e.truD(n).v,unit:e.truD(n).u},a.y={value:0,unit:"px"}),a}if("rotate"===t){var s={};return s.z={value:parseInt(r,10),unit:e.truD(r,t).u||"deg"},s}if("scale"===t)return{value:parseFloat(r,10)}}if(-1!==B.indexOf(t)||-1!==M.indexOf(t))return{value:e.truD(r).v,unit:e.truD(r).u};if(-1!==R.indexOf(t))return{value:parseFloat(r,10)};if(-1!==C.indexOf(t))return{value:parseFloat(r,10)};if(-1!==I.indexOf(t)){if(r instanceof Array)return[e.truD(r[0]),e.truD(r[1]),e.truD(r[2]),e.truD(r[3])];var o;return/rect/.test(r)?o=r.replace(/rect|\(|\)/g,"").split(/\s|\,/):/auto|none|initial/.test(r)&&(o=W[t]),[e.truD(o[0]),e.truD(o[1]),e.truD(o[2]),e.truD(o[3])]}if(-1!==x.indexOf(t))return{value:e.truC(r)};if(-1!==k.indexOf(t)){if(r instanceof Array)return{x:e.truD(r[0])||{v:50,u:"%"},y:e.truD(r[1])||{v:50,u:"%"}};var u=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g),l=e.truD(u[0]),v=e.truD(u[1]);return{x:l,y:v}}if(-1!==D.indexOf(t)){var f=e.truD(r);return{value:f.v,unit:f.u}}},e.truD=function(t,e){function r(){var r,n=0;for(n;a>n;n++)"string"==typeof t&&-1!==t.indexOf(i[n])&&(r=i[n]);return r=void 0!==r?r:e?"deg":"px"}var n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=i.length,s=r();return{v:n,u:s}},e.preventScroll=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},e.truC=function(t){var r,n;return/rgb|rgba/.test(t)?(r=t.replace(/[^\d,]/g,"").split(","),n=r[3]?r[3]:null,n?{r:parseInt(r[0]),g:parseInt(r[1]),b:parseInt(r[2]),a:parseFloat(n)}:{r:parseInt(r[0]),g:parseInt(r[1]),b:parseInt(r[2])}):/#/.test(t)?{r:e.htr(t).r,g:e.htr(t).g,b:e.htr(t).b}:/transparent|none|initial|inherit/.test(t)?{r:0,g:0,b:0,a:0}:void 0},e.rth=function(t,e,r){return"#"+((1<<24)+(t<<16)+(e<<8)+r).toString(16).slice(1)},e.htr=function(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,r,n){return e+e+r+r+n+n});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},e.pe=function(t){if("function"==typeof t)return t;if("string"==typeof t){if(/easing|linear/.test(t))return e.Easing[t];if(/bezier/.test(t)){var r=t.replace(/bezier|\s|\(|\)/g,"").split(","),n=0,i=r.length;for(n;i>n;n++)r[n]=parseFloat(r[n]);return e.Ease.Bezier(r[0],r[1],r[2],r[3])}return/physics/.test(t)?e.Physics[t]():e.Ease[t]()}};var K=e.Easing={};K.linear=function(t){return t};var U=Math.PI,G=2*Math.PI,J=Math.PI/2,V=.1,tt=.4;K.easingSinusoidalIn=function(t){return-Math.cos(t*J)+1},K.easingSinusoidalOut=function(t){return Math.sin(t*J)},K.easingSinusoidalInOut=function(t){return-.5*(Math.cos(U*t)-1)},K.easingQuadraticIn=function(t){return t*t},K.easingQuadraticOut=function(t){return t*(2-t)},K.easingQuadraticInOut=function(t){return.5>t?2*t*t:-1+(4-2*t)*t},K.easingCubicIn=function(t){return t*t*t},K.easingCubicOut=function(t){return--t*t*t+1},K.easingCubicInOut=function(t){return.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},K.easingQuarticIn=function(t){return t*t*t*t},K.easingQuarticOut=function(t){return 1- --t*t*t*t},K.easingQuarticInOut=function(t){return.5>t?8*t*t*t*t:1-8*--t*t*t*t},K.easingQuinticIn=function(t){return t*t*t*t*t},K.easingQuinticOut=function(t){return 1+--t*t*t*t*t},K.easingQuinticInOut=function(t){return.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t},K.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},K.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},K.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},K.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},K.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},K.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},K.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},K.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},K.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)},K.easingElasticIn=function(t){var e;return 0===t?0:1===t?1:(!V||1>V?(V=1,e=tt/4):e=tt*Math.asin(1/V)/G,-(V*Math.pow(2,10*(t-=1))*Math.sin((t-e)*G/tt)))},K.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!V||1>V?(V=1,e=tt/4):e=tt*Math.asin(1/V)/G,V*Math.pow(2,-10*t)*Math.sin((t-e)*G/tt)+1)},K.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!V||1>V?(V=1,e=tt/4):e=tt*Math.asin(1/V)/G,(t*=2)<1?-.5*(V*Math.pow(2,10*(t-=1))*Math.sin((t-e)*G/tt)):V*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*G/tt)*.5+1)},K.easingBounceIn=function(t){return 1-K.easingBounceOut(1-t)},K.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},K.easingBounceInOut=function(t){return.5>t?.5*K.easingBounceIn(2*t):.5*K.easingBounceOut(2*t-1)+.5},e.Tween=function(t,r,n,i){this._el=t,this._dr=i&&i.duration||700,this._r=i&&i.repeat||0,this._vSR={},this._vS=r,this._vE=n,this._y=i&&i.yoyo||!1,this.playing=!1,this.reversed=!1,this._rD=i&&i.repeatDelay||0,this._dl=i&&i.delay||0,this._sT=null,this.paused=!1,this._pST=null,this._to=i.transformOrigin,this._pp=i.perspective,this._ppo=i.perspectiveOrigin,this._ppp=i.parentPerspective,this._pppo=i.parentPerspectiveOrigin,this._rpr=i.rpr||!1,this._hex=i.keepHex||!1,this._e=i&&i.easing?e.pe(i.easing):e.Easing.linear,this._cT=[],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,e._queue(this)};var et=e.Tween.prototype;et.start=function(t){this.scrollIn();var i={};if(e.perspective(this._el,this),this._rpr){i=this.prS(),this._vS={},this._vS=e.prP(i,!1);for(var a in this._vS)if("transform"===a&&a in this._vE)for(var s in this._vS[a]){s in this._vE[a]||(this._vE[a][s]={});for(var o in this._vS[a][s])if(void 0!==this._vS[a][s][o].value){o in this._vE[a][s]||(this._vE[a][s][o]={});for(var u in this._vS[a][s][o])u in this._vE[a][s][o]||(this._vE[a][s][o][u]=this._vS[a][s][o][u])}if("value"in this._vS[a][s]&&!("value"in this._vE[a][s]))for(var l in this._vS[a][s])l in this._vE[a][s]||(this._vE[a][s][l]=this._vS[a][s][l])}}for(var v in this._vE)this._vSR[v]=this._vS[v];return this._sCF||(this._sC&&this._sC.call(),this._sCF=!0),r.push(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=t||window.performance.now(),this._sT+=this._dl,n||e._t(),this},et.stop=function(){return!this.paused&&this.playing&&(e.remove(this),this.playing=!1,this.paused=!1,this.scrollOut(),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),this.close()),this},et.pause=function(){return!this.paused&&this.playing&&(e.remove(this),this.paused=!0,this._pST=window.performance.now(),null!==this._pC&&this._pC.call()),this},et.play=et.resume=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=window.performance.now()-this._pST,e.add(this),n||e._t()),this},et.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]}},et.chain=function(){return this._cT=arguments,this},et.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},et.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},et.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},et.addListeners=function(){document.addEventListener(l,e.preventScroll,!1)},et.removeListeners=function(){document.removeEventListener(l,e.preventScroll,!1)},et.prS=function(){var t={},e=this._el,r=this._vS,n=this.gIS("transform"),i=["rotate","skew"],a=["X","Y","Z"];for(var s in r)if(-1!==F.indexOf(s)){var o="rotate"===s||"translate"===s||"scale"===s;if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||W[s];else if(o)t[s]=n[s]||W[s];else if(!o&&/rotate|skew/.test(s))for(var u=0;2>u;u++)for(var l=0;3>l;l++){var v=i[u]+a[l];-1!==F.indexOf(v)&&v in r&&(t[v]=n[v]||W[v])}}else if(-1===C.indexOf(s))if("opacity"===s&&d){var f=this.gCS("filter");t.opacity="number"==typeof f?f:W.opacity}else t[s]=this.gCS(s)||W[s];else t[s]=null===e||void 0===e?window.pageYOffset||p.scrollTop:e.scrollTop;for(var s in n)-1===F.indexOf(s)||s in r||(t[s]=n[s]||W[s]);return t},et.gIS=function(t){if(this._el){var e=this._el,r=e.style.cssText,n={},i=r.replace(/\s/g,"").split(";"),a=0,s=i.length;for(a;s>a;a++)if(/transform/.test(i[a])){var o=i[a].split(":")[1].split(")"),u=0,l=o.length;for(u;l>u;u++){var v=o[u].split("(");""!==v[0]&&F.indexOf(v)&&(n[v[0]]=/translate3d/.test(v[0])?v[1].split(","):v[1])}}return n}},et.gCS=function(t){var e=this._el,r=window.getComputedStyle(e)||e.currentStyle,n=!d&&s&&/transform|Radius/.test(t)?"-"+i.toLowerCase()+"-"+t:t,a=s&&"transform"===t||s&&-1!==D.indexOf(t)?r[n]:r[t];if("transform"!==t&&n in r){if(a){if("filter"===n){var o=parseInt(a.split("=")[1].replace(")","")),u=parseFloat(o/100);return u}return a}return W[t]}},et.close=function(){var t=this;setTimeout(function(){var n=r.indexOf(t);n===r.length-1&&e.s(),t.repeat>0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.reverse(),t.reversed=!1),t.playing=!1},61)},e.TweensAT=function(t,r,n){this.tweens=[];var i,a=t.length,s=[];for(i=0;a>i;i++)s[i]=n||{},n.delay=n.delay||0,s[i].delay=i>0?n.delay+(n.offset||0):n.delay,this.tweens.push(e.to(t[i],r,s[i]))},e.TweensFT=function(t,r,n,i){this.tweens=[];var a,s=t.length,o=[];for(a=0;s>a;a++)o[a]=i||{},i.delay=i.delay||0,o[a].delay=a>0?i.delay+(i.offset||0):i.delay,this.tweens.push(e.fromTo(t[a],r,n,o[a]))};var rt=e.TweensAT.prototype=e.TweensFT.prototype;return rt.start=function(t){t=t||window.performance.now();var e,r=this.tweens.length;for(e=0;r>e;e++)this.tweens[e].start(t);return this},rt.stop=function(){for(var t=0;t
Date: Sat, 6 Feb 2016 00:32:31 +0200
Subject: [PATCH 087/471]

---
 demo/examples.html      | 2 +-
 demo/src/kute-jquery.js | 4 ++--
 dist/kute-jquery.min.js | 2 +-
 kute-jquery.js          | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/demo/examples.html b/demo/examples.html
index 895b86a..8e2400e 100644
--- a/demo/examples.html
+++ b/demo/examples.html
@@ -463,7 +463,7 @@ var myMultiTween2 = KUTE.allFromTo(
 				Start
    - +

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

    -

    Delivering Killer Performance

    +

    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.

    @@ -60,7 +60,7 @@
    -

    Break Free Of Browser Prefixes

    +

    Browser Prefixes Free

    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.

    @@ -77,11 +77,17 @@

    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.

    +

    KUTE.js allows you to create tween objects with the help of .to() and .fromTo() public 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.

    +

    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) inherits all functionality from the .to() method but is applied to collections of elements.

    + +

    KUTE.allFromTo('selector', fromValues, toValues, options) is the same as .fromTo() and is applied to collections of elements.

    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.

    From 9fa0b5a3288f10fe0cc58e6aa931d7494ccdab8e Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 18 Feb 2016 20:44:34 +0200 Subject: [PATCH 089/471] 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 090/471] 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 091/471] 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 092/471] 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 320cc59b05a95bab9dc13e07d372fd4a78940fa8 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 16 Mar 2016 15:42:03 +0200 Subject: [PATCH 093/471] --- demo/about.html | 40 ++- demo/api.html | 179 +++------- demo/assets/css/kute.css | 95 ++++- demo/assets/js/examples.js | 303 ++++++---------- demo/assets/js/minifill.js | 195 +++++----- demo/assets/js/perf.js | 94 +++-- demo/assets/js/scripts.js | 46 ++- demo/examples.html | 315 +++++++++------- demo/features.html | 160 +++------ demo/index.html | 51 ++- demo/performance.html | 60 ++-- demo/src/kute.js | 713 ++++++++++++++++--------------------- dist/kute.min.js | 2 +- kute.js | 713 ++++++++++++++++--------------------- 14 files changed, 1367 insertions(+), 1599 deletions(-) diff --git a/demo/about.html b/demo/about.html index 48dfe3c..0a49d52 100644 --- a/demo/about.html +++ b/demo/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.

    @@ -71,7 +94,6 @@

    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.

    -

    In all animation engines, GSAP is the only one that exports all it's methods and computed values to the global scope to help diminish the time to access/execute, but it will find soon that it's no longer the case because modern browsers continuously improve their Javascript engines to a point where the access speed is the same, blazing fast, no matter how deep Javascript animation scope goes.

    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.

    @@ -134,7 +156,7 @@ @@ -145,6 +167,8 @@ + + diff --git a/demo/api.html b/demo/api.html index c66a9d2..71384e6 100644 --- a/demo/api.html +++ b/demo/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.1/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.0.1/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

    +

    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

    @@ -111,12 +108,6 @@ var myDivsTweens = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 5

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

    Considering that the selector matches two DIV elements, the value for the above variable myDivsTweens is an object that only stores the two tweens, one for each element found:

    -
    
-myDivsTweens = { // console.log(myDivsTweens);
-    tweens = [ Tween, Tween ] console.log(myDivsTweens.tweens);
-}
-

    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.

    @@ -211,19 +202,25 @@ 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}, {duration: 500});
+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.

    @@ -242,6 +239,15 @@ tweensCollection.tweens[1].chain(tween2);

    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.

    @@ -263,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
    
 		
    
 			
    
 				
@@ -438,8 +388,8 @@ playPauseButton.addEventListener('click', function(e){
 			
  • 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.0.1 we introduced new tween object constructor methods, they allow you to create a tween object for each element in a collection, a very handy way to ease and speed up the animation programing workflow. Let's have a little fun.
    
+		
    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]});
 
@@ -450,7 +400,6 @@ var myMultiTween2 = KUTE.allFromTo(
     {translate:[0,150], rotate: 360}, 
     {transformOrigin: '10% 10%', offset: 200 }
 );
-
 
    
 		
    And should looks like this:
    
 		
    
@@ -460,7 +409,7 @@ var myMultiTween2 = KUTE.allFromTo(
 			
    E
    
 				
 			
    
-				Start	
+				Start	
 			
    
 		
    
 		
    As you can see, we also used the new tween options offset and transformOrigin and they make it so much more easy.
    
@@ -469,14 +418,106 @@ 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.
    
+		
    
+			
    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.
       	
 	
    
 
       
      
 
@@ -492,7 +533,9 @@ var myMultiTween2 = KUTE.allFromTo(
 
 
 
- 
+ 
+ 
+ 
  
  
 
diff --git a/demo/features.html b/demo/features.html
index 5234724..647a968 100644
--- a/demo/features.html
+++ b/demo/features.html
@@ -9,7 +9,7 @@
     
     
     
-    
+    
     
     
      
@@ -25,6 +25,9 @@
 	
     
 
+    
+    
+    
 	
 	
 
- 
+ 
  
 
 
diff --git a/demo/index.html b/demo/index.html
index 7bace66..ddee711 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -24,7 +24,10 @@
 
 	
     
-	
+
+    
+    
+    	
 	
 		
 
 
- 
- 
+ 
+ 
  
+ 
 
 
diff --git a/demo/performance.html b/demo/performance.html
index af3238a..5c83fe1 100644
--- a/demo/performance.html
+++ b/demo/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/demo/src/kute.js b/demo/src/kute.js
index 1c50ef7..b7152b8 100644
--- a/demo/src/kute.js
+++ b/demo/src/kute.js
@@ -2,7 +2,6 @@
  * by dnp_theme
  * Licensed under MIT-License
  */
-
 (function (factory) {
   if (typeof define === 'function' && define.amd) {
     define([], factory); // AMD. Register as an anonymous module.
@@ -14,62 +13,63 @@
   }
 }( function () {
   "use strict";
-  var K = K || {}, _tws = [], _t = null,
-    _pf = getPrefix(), // prefix
-    _rafR = (!('requestAnimationFrame' in window)) ? true : false, // is prefix required for requestAnimationFrame
-    _pfT = (!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for transform
-    _pfB = (!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for border-radius
-    _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch?
-    _ev = _tch ? 'touchstart' : 'mousewheel', //event to prevent on scroll
-
+  var K = K || {}, _tws = [], _t, _min = Math.min;
+  
+  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){
+    var nl;
+    if (multi){
+      nl = typeof el === 'object' && el.length ? 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); else return nl;   
+  };
+   
+  var _tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch?
+    _ev = _tch ? 'touchstart' : 'mousewheel', _evh = 'mouseenter', //events to prevent on scroll
+    _pfto = K.property('transformOrigin'), //assign preffix to DOM properties
+    _pfp = K.property('perspective'),
+    _pfo = K.property('perspectiveOrigin'),
+    _tr = K.property('transform'),
+    _raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function (c) { return setTimeout(c, 16) },
+    _caf = window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || function (c) { return clearTimeout(c) },
+    
+    //true scroll container
     _bd = document.body, _htm = document.getElementsByTagName('HTML')[0],
-    _sct = (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm),
+    _sct = /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm,
 
     _isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
     _isIE8 = _isIE === 8, // check IE8/IE
 
-    //assign preffix to DOM properties
-    _pfto = _pfT ? _pf + 'TransformOrigin' : 'transformOrigin',
-    _pfp = _pfT ? _pf + 'Perspective' : 'perspective',
-    _pfo = _pfT ? _pf + 'PerspectiveOrigin' : 'perspectiveOrigin',
-    _tr = _pfT ? _pf + 'Transform' : 'transform',
-    _br = _pfB ? _pf + 'BorderRadius' : 'borderRadius',
-    _brtl = _pfB ? _pf + 'BorderTopLeftRadius' : 'borderTopLeftRadius',
-    _brtr = _pfB ? _pf + 'BorderTopRightRadius' : 'borderTopRightRadius',
-    _brbl = _pfB ? _pf + 'BorderBottomLeftRadius' : 'borderBottomLeftRadius',
-    _brbr = _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius',
-    _raf = _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'],
-    _caf = _rafR ? (window[_pf + 'CancelAnimationFrame'] || window[_pf + 'CancelRequestAnimationFrame']) : window['cancelAnimationFrame'],
-    
     //supported properties
-    _cls = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
+    _cls = ['color', 'backgroundColor'], // 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
+    _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, _clp, _op, _rd, _bm, _tp, _bg, _tf), al = _all.length,
-    _tfS = {}, _tfE = {}, _tlS = {}, _tlE = {}, _rtS = {}, _rtE = {}, //internal temp
+    _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 ( _rd.indexOf(p) !== -1 || _bm.indexOf(p) !== -1 || _tp.indexOf(p) !== -1) {
+    } else if ( _bm.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' ){
@@ -83,53 +83,45 @@
   
   // main methods
   K.to = function (el, to, o) {  
-    var _el = typeof el === 'object' ? el : document.querySelector(el),
-        _vS = to, _vE = K.prP(to, true);  // we're gonna have to build _vS object at start
-    o = o || {}; o.rpr = true;
+    var _el = K.selector(el),
+        _vS = to, _vE = K.prP(to, {}, _el)[0]; o = o || {}; o.rpr = true;  
     return new K.Tween(_el, _vS, _vE, o);
   };
 
   K.fromTo = function (el, f, to, o) {
-    var _el = typeof el === 'object' ? el : document.querySelector(el),
-        _vS = K.prP(f, false), _vE = K.prP(to, true); o = o || {};
+    var _el = K.selector(el), ft = K.prP(f, to, _el),
+        _vS = ft[0], _vE = ft[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.TweensAT(_els, to, o);
-  };
-  K.allFromTo = function (el, f, to, o) {
-    var _els = typeof el === 'object' && el.length ? el : document.querySelectorAll(el);
-    return new K.TweensFT(_els, f, to, o); 
+  K.allTo = function (els, to, o) {
+    var _els = K.selector(els,true);
+    return new K.TweensTO(_els, to, o);
   };
   
+  K.allFromTo = function (els, f, to, o) {
+    var _els = K.selector(els,true);
+    return new K.TweensFT(_els, f, to, o); 
+  };
+ 
   // render functions
-  K._r = {}; var _r = K._r;
+  K.dom = {};
   K._u = function(w,t) {
     t = t || window.performance.now();
     if (t < w._sT && w.playing && !w.paused) { return true; }
 
-    var p, s = s || w._sT, 
-      d = d || w._dr, 
-      e = ( t - s ) / d,
-      ve = ve || w._vE,
-      es = es || w._e;
-    e = e > 1 ? 1 : e;
+    var p, e = _min(( t - w._sT ) / w._dr, 1); // calculate progress
     
-    //render the CSS update
-    for (p in ve){
-      _r[p](w,p,es(e));
-    }
+    for (p in w._vE){ K.dom[p](w,p,w._e(e)); } //render the CSS update
     
-    if (w._uC) { w._uC.call(); }
+    if (w._uC) { w._uC.call(); } // fire the updateCallback
 
-    if (e === 1) {  
+    if (e === 1) {
       if (w._r > 0) {
         if ( w._r < 9999 ) { w._r--; }      
         
-        if (w._y) { w.reversed = !w.reversed; w.reverse(); } // handle yoyo
+        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;        
@@ -152,21 +144,19 @@
       }
     }
     return true;
-  }; 
+  };
   
-  var _u = K._u;
   // internal ticker
-  K._t = function (t) {
+  K._tk = function (t) {
     var i = 0, tl; 
-    _t = _raf(K._t); 
+    _t = _raf(K._tk);
     while ( i < (tl = _tws.length) ) {
-      if ( _u(_tws[i],t) ) {
+      if ( K._u(_tws[i],t) ) {
         i++;
       } else {
         _tws.splice(i, 1);
       }
     }
-    return true;
   };
   
   // aplies the transform origin and perspective
@@ -189,49 +179,21 @@
   };  
   K.s = function () { _caf(_t);  _t = null; }; 
   
-  // builds render functions for the render object K.render(w, p, w._e(e));
+  // 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 = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1,
-        rd = _rd.indexOf(p) !== -1,
+        bm = _bm.indexOf(p) !== -1,
         sc = _sc.indexOf(p) !== -1,
-        bg = _bg.indexOf(p) !== -1,
-        clp = _clp.indexOf(p) !== -1,
         op = _op.indexOf(p) !== -1,
         tf = p === 'transform';
-        
-      //process styles by property / property type
-      if ( bm && (!(p in K._r)) ) {
-        K._r[p] = function(w,p,v) {
+      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 ( rd && (!(p in K._r)) ) {
-        if (p === 'borderRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_br] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };        
-        } else if (p === 'borderTopLeftRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brtl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderTopRightRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brtr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderBottomLeftRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brbl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderBottomRightRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brbr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        }
-      } else if (tf && (!(p in K._r)) ) {
+      } else if (tf && (!(p in K.dom)) ) {
 
-        K._r[p] = function(w,p,v) {
+        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];
@@ -281,8 +243,8 @@
           w._el.style[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS;
         };
 
-      } else if ( cls && (!(p in K._r)) ) {
-        K._r[p] = function(w,p,v) {
+      } 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' ){
@@ -293,166 +255,114 @@
           }
 
           if ( w._hex ) {
-            w._el.style[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) );
+            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._r)) ) {   
-        K._r[p] = function(w,p,v) {
+      } 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 ( bg && (!(p in K._r))  ) {        
-        K._r[p] = function(w,p,v) {
-          var px1 = w._vS[p].x.v, px2 = w._vE[p].x.v, py1 = w._vS[p].y.v, py2 = w._vE[p].y.v,
-            px = (px1 + ( px2 - px1 ) * v), pxu = '%', py = (py1 + ( py2 - py1 ) * v), pyu = '%';      
-          w._el.style[p] = px + pxu + ' ' + py + pyu;
-        };
-      } else if ( clp && (!(p in K._r))  ) {
-        K._r[p] = function(w,p,v) {
-          var h = 0, cl = [];
-          for (h;h<4;h++){
-            var c1 = w._vS[p][h].v, c2 = w._vE[p][h].v, cu = w._vE[p][h].u || 'px';
-            cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu;
-          }  
-          w._el.style[p] = 'rect('+cl+')';
-        };
-      } else if ( op && (!(p in K._r)) ) {
+      } else if ( op && (!(p in K.dom)) ) {
         if (_isIE8) {
-          K._r[p] = function(w,p,v) {
+          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._r[p] = function(w,p,v) {
+          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
-  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;
+    
+  // 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;
 
-    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' };
+    for (i=0; i 0) { self._r = self.repeat; }
-      if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; }
+      if (self._y && self.reversed===true) { self.rvs(); self.reversed = false; }
       self.playing = false;
-    },61)
+    },64)
   };
 
   // the multi elements Tween constructs
-  K.TweensAT = function (els, vE, o) { // .to
+  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;
@@ -875,7 +791,7 @@
       this.tweens.push( K.fromTo(els[i], vS, vE, _o[i]) );
     }
   };
-  var ws = K.TweensAT.prototype = K.TweensFT.prototype;
+  var ws = K.TweensTO.prototype = K.TweensFT.prototype;
   ws.start = function(t){
     t = t || window.performance.now(); 
     var i, tl = this.tweens.length;
@@ -886,17 +802,8 @@
   }
   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; }
 
-
-  //returns browser prefix
-  function getPrefix() { 
-    var div = document.createElement('div'), i = 0,  pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
-      s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
-      
-    for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; }  }
-    div = null;
-  }
-  
   return K;
 }));
\ No newline at end of file
diff --git a/dist/kute.min.js b/dist/kute.min.js
index 02e636b..f9b2716 100644
--- a/dist/kute.min.js
+++ b/dist/kute.min.js
@@ -1,2 +1,2 @@
 // KUTE.js | dnp_theme | 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";function t(){var t=document.createElement("div"),e=0,r=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],n=r.length,i=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(e;n>e;e++)if(i[e]in t.style)return r[e];t=null}for(var e=e||{},r=[],n=null,i=t(),a=("requestAnimationFrame"in window?!1:!0),s=("transform"in document.getElementsByTagName("div")[0].style?!1:!0),o=("border-radius"in document.getElementsByTagName("div")[0].style?!1:!0),u=("ontouchstart"in window||navigator.msMaxTouchPoints||!1),l=u?"touchstart":"mousewheel",v=document.body,f=document.getElementsByTagName("HTML")[0],p=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?v:f,c=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,d=8===c,h=s?i+"TransformOrigin":"transformOrigin",_=s?i+"Perspective":"perspective",g=s?i+"PerspectiveOrigin":"perspectiveOrigin",m=s?i+"Transform":"transform",y=o?i+"BorderRadius":"borderRadius",w=o?i+"BorderTopLeftRadius":"borderTopLeftRadius",T=o?i+"BorderTopRightRadius":"borderTopRightRadius",S=o?i+"BorderBottomLeftRadius":"borderBottomLeftRadius",b=o?i+"BorderBottomRightRadius":"borderBottomRightRadius",O=a?window[i+"RequestAnimationFrame"]:window.requestAnimationFrame,E=a?window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]:window.cancelAnimationFrame,x=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],C=["scrollTop","scroll"],I=["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"],A=["rotateX","rotateY","translateZ"],F=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],L=x.concat(C,I,R,D,M,B,k,F),P=L.length,q={},Y={},X={},Z={},z={},Q={},W=W||{},j=0;P>j;j++){var H=L[j];-1!==x.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)}e.to=function(t,r,n){var i="object"==typeof t?t:document.querySelector(t),a=r,s=e.prP(r,!0);return n=n||{},n.rpr=!0,new e.Tween(i,a,s,n)},e.fromTo=function(t,r,n,i){var a="object"==typeof t?t:document.querySelector(t),s=e.prP(r,!1),o=e.prP(n,!0);return i=i||{},new e.Tween(a,s,o,i)},e.allTo=function(t,r,n){var i="object"==typeof t&&t.length?t:document.querySelectorAll(t);return new e.TweensAT(i,r,n)},e.allFromTo=function(t,r,n,i){var a="object"==typeof t&&t.length?t:document.querySelectorAll(t);return new e.TweensFT(a,r,n,i)},e._r={};var N=e._r;e._u=function(t,e){if(e=e||window.performance.now(),e1?1:a;for(r in s)N[r](t,r,o(a));if(t._uC&&t._uC.call(),1===a){if(t._r>0)return t._r<9999&&t._r--,t._y&&(t.reversed=!t.reversed,t.reverse()),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),t.scrollOut();var u=0,l=t._cT.length;for(u;l>u;u++)t._cT[u].start(t._sT+t._dr);return t.close(),!1}return!0};var $=e._u;e._t=function(t){var i,a=0;for(n=O(e._t);a<(i=r.length);)$(r[a],t)?a++:r.splice(a,1);return!0},e.perspective=function(t,e){void 0!==e._to&&(t.style[h]=e._to),void 0!==e._ppo&&(t.style[g]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[_]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[g]=e._pppo)},e.getAll=function(){return r},e.removeAll=function(){r=[]},e.add=function(t){r.push(t)},e.remove=function(t){var e=r.indexOf(t);-1!==e&&r.splice(e,1)},e.s=function(){E(n),n=null},e._queue=function(t){for(var r in t._vE){var n=-1!==x.indexOf(r),i=-1!==B.indexOf(r)||-1!==M.indexOf(r),a=-1!==D.indexOf(r),s=-1!==C.indexOf(r),o=-1!==k.indexOf(r),u=-1!==I.indexOf(r),l=-1!==R.indexOf(r),v="transform"===r;!i||r in e._r?!a||r in e._r?!v||r in e._r?!n||r in e._r?!s||r in e._r?!o||r in e._r?!u||r in e._r?!l||r in e._r||(d?e._r[r]=function(t,e,r){t._el.style.filter="alpha(opacity="+100*(t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r)+")"}:e._r[r]=function(t,e,r){t._el.style.opacity=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r}):e._r[r]=function(t,e,r){var n=0,i=[];for(n;4>n;n++){var a=t._vS[e][n].v,s=t._vE[e][n].v,o=t._vE[e][n].u||"px";i[n]=a+(s-a)*r+o}t._el.style[e]="rect("+i+")"}:e._r[r]=function(t,e,r){var n=t._vS[e].x.v,i=t._vE[e].x.v,a=t._vS[e].y.v,s=t._vE[e].y.v,o=n+(i-n)*r,u="%",l=a+(s-a)*r,v="%";t._el.style[e]=o+u+" "+l+v}:e._r[r]=function(t,e,r){t._el=void 0===t._el||null===t._el?p:t._el,t._el.scrollTop=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r}:e._r[r]=function(t,r,n){var i={};for(var a in t._vE[r].value)"a"!==a?i[a]=parseInt(t._vS[r].value[a]+(t._vE[r].value[a]-t._vS[r].value[a])*n)||0:i[a]=t._vS[r].value[a]&&t._vE[r].value[a]?parseFloat(t._vS[r].value[a]+(t._vE[r].value[a]-t._vS[r].value[a])*n):null;t._hex?t._el.style[r]=e.rth(parseInt(i.r),parseInt(i.g),parseInt(i.b)):t._el.style[r]=!i.a||d?"rgb("+i.r+","+i.g+","+i.b+")":"rgba("+i.r+","+i.g+","+i.b+","+i.a+")"}:e._r[r]=function(t,e,r){var n,i,a="",s="perspective("+t._pp+"px) ";for(n in t._vE[e]){var o=t._vS[e][n],u=t._vE[e][n];if(i=i||-1!==A.indexOf(n)&&!c,"translate"===n){var l,v="",f={};for(l in u){var p=o[l].value||0,d=u[l].value||0,h=u[l].unit||"px";f[l]=p===d?d+h:p+(d-p)*r+h}v=u.x?"translate("+f.x+","+f.y+")":"translate3d("+f.translateX+","+f.translateY+","+f.translateZ+")",a=""===a?v:v+" "+a}else if("rotate"===n){var _,g="",y={};for(_ in u)if(o[_]){var w=o[_].value,T=u[_].value,S=u[_].unit||"deg",b=w+(T-w)*r;y[_]="z"===_?"rotate("+b+S+")":_+"("+b+S+") "}g=u.z?y.z:(y.rotateX||"")+(y.rotateY||"")+(y.rotateZ||""),a=""===a?g:a+" "+g}else if("skew"===n){var O="",E={};for(var x in u)if(o[x]){var C=o[x].value,I=u[x].value,R=u[x].unit||"deg",D=C+(I-C)*r;E[x]=x+"("+D+R+") "}O=(E.skewX||"")+(E.skewY||""),a=""===a?O:a+" "+O}else if("scale"===n){var M=o.value,B=u.value,k=M+(B-M)*r,F=n+"("+k+")";a=""===a?F:a+" "+F}}t._el.style[m]=i||void 0!==t._pp&&0!==t._pp?s+a:a}:"borderRadius"===r?e._r[r]=function(t,e,r){t._el.style[y]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}:"borderTopLeftRadius"===r?e._r[r]=function(t,e,r){t._el.style[w]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}:"borderTopRightRadius"===r?e._r[r]=function(t,e,r){t._el.style[T]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}:"borderBottomLeftRadius"===r?e._r[r]=function(t,e,r){t._el.style[S]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}:"borderBottomRightRadius"===r&&(e._r[r]=function(t,e,r){t._el.style[b]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}):e._r[r]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vE[e].unit}}},e.prP=function(t,r){var n={},i=r===!0?Y:q,a=r===!0?Z:X,s=r===!0?Q:z;a={},i={};for(var o in t)if(-1!==F.indexOf(o)){if("translate"!==o&&/translate/.test(o)){var u=["X","Y","Z"],l=0;for(l;3>l;l++){var v=u[l];/3d/.test(o)?a["translate"+v]=e.pp("translate"+v,t[o][l]):a["translate"+v]="translate"+v in t?e.pp("translate"+v,t["translate"+v]):{value:0,unit:"px"}}i.translate=a}else if("rotate"!==o&&/rotate|skew/.test(o)){var f=/rotate/.test(o)?"rotate":"skew",p=["X","Y","Z"],c=0,d={},h={},s="rotate"===f?d:h;for(c;3>c;c++){var _=p[c];void 0!==t[f+_]&&"skewZ"!==o&&(s[f+_]=e.pp(f+_,t[f+_]))}i[f]=s}else("translate"===o||"rotate"===o||"scale"===o)&&(i[o]=e.pp(o,t[o]));n.transform=i}else-1===F.indexOf(o)&&(n[o]=e.pp(o,t[o]));return n},e.pp=function(t,r){if(-1!==F.indexOf(t)){var n,i=t.replace(/X|Y|Z/,"");if("translate3d"===t)return n=r.split(","),{translateX:{value:e.truD(n[0]).v,unit:e.truD(n[0]).u},translateY:{value:e.truD(n[1]).v,unit:e.truD(n[1]).u},translateZ:{value:e.truD(n[2]).v,unit:e.truD(n[2]).u}};if("translate"!==t&&"translate"===i)return{value:e.truD(r).v,unit:e.truD(r).u||"px"};if("rotate"!==t&&("skew"===i||"rotate"===i)&&"skewZ"!==t)return{value:e.truD(r).v,unit:e.truD(r,t).u||"deg"};if("translate"===t){n="string"==typeof r?r.split(","):r;var a={};return n instanceof Array?(a.x={value:e.truD(n[0]).v,unit:e.truD(n[0]).u},a.y={value:e.truD(n[1]).v,unit:e.truD(n[1]).u}):(a.x={value:e.truD(n).v,unit:e.truD(n).u},a.y={value:0,unit:"px"}),a}if("rotate"===t){var s={};return s.z={value:parseInt(r,10),unit:e.truD(r,t).u||"deg"},s}if("scale"===t)return{value:parseFloat(r,10)}}if(-1!==B.indexOf(t)||-1!==M.indexOf(t))return{value:e.truD(r).v,unit:e.truD(r).u};if(-1!==R.indexOf(t))return{value:parseFloat(r,10)};if(-1!==C.indexOf(t))return{value:parseFloat(r,10)};if(-1!==I.indexOf(t)){if(r instanceof Array)return[e.truD(r[0]),e.truD(r[1]),e.truD(r[2]),e.truD(r[3])];var o;return/rect/.test(r)?o=r.replace(/rect|\(|\)/g,"").split(/\s|\,/):/auto|none|initial/.test(r)&&(o=W[t]),[e.truD(o[0]),e.truD(o[1]),e.truD(o[2]),e.truD(o[3])]}if(-1!==x.indexOf(t))return{value:e.truC(r)};if(-1!==k.indexOf(t)){if(r instanceof Array)return{x:e.truD(r[0])||{v:50,u:"%"},y:e.truD(r[1])||{v:50,u:"%"}};var u=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g),l=e.truD(u[0]),v=e.truD(u[1]);return{x:l,y:v}}if(-1!==D.indexOf(t)){var f=e.truD(r);return{value:f.v,unit:f.u}}},e.truD=function(t,e){function r(){var r,n=0;for(n;a>n;n++)"string"==typeof t&&-1!==t.indexOf(i[n])&&(r=i[n]);return r=void 0!==r?r:e?"deg":"px"}var n=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],a=i.length,s=r();return{v:n,u:s}},e.preventScroll=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},e.truC=function(t){var r,n;return/rgb|rgba/.test(t)?(r=t.replace(/[^\d,]/g,"").split(","),n=r[3]?r[3]:null,n?{r:parseInt(r[0]),g:parseInt(r[1]),b:parseInt(r[2]),a:parseFloat(n)}:{r:parseInt(r[0]),g:parseInt(r[1]),b:parseInt(r[2])}):/#/.test(t)?{r:e.htr(t).r,g:e.htr(t).g,b:e.htr(t).b}:/transparent|none|initial|inherit/.test(t)?{r:0,g:0,b:0,a:0}:void 0},e.rth=function(t,e,r){return"#"+((1<<24)+(t<<16)+(e<<8)+r).toString(16).slice(1)},e.htr=function(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,r,n){return e+e+r+r+n+n});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},e.pe=function(t){if("function"==typeof t)return t;if("string"==typeof t){if(/easing|linear/.test(t))return e.Easing[t];if(/bezier/.test(t)){var r=t.replace(/bezier|\s|\(|\)/g,"").split(","),n=0,i=r.length;for(n;i>n;n++)r[n]=parseFloat(r[n]);return e.Ease.Bezier(r[0],r[1],r[2],r[3])}return/physics/.test(t)?e.Physics[t]():e.Ease[t]()}};var K=e.Easing={};K.linear=function(t){return t};var U=Math.PI,G=2*Math.PI,J=Math.PI/2,V=.1,tt=.4;K.easingSinusoidalIn=function(t){return-Math.cos(t*J)+1},K.easingSinusoidalOut=function(t){return Math.sin(t*J)},K.easingSinusoidalInOut=function(t){return-.5*(Math.cos(U*t)-1)},K.easingQuadraticIn=function(t){return t*t},K.easingQuadraticOut=function(t){return t*(2-t)},K.easingQuadraticInOut=function(t){return.5>t?2*t*t:-1+(4-2*t)*t},K.easingCubicIn=function(t){return t*t*t},K.easingCubicOut=function(t){return--t*t*t+1},K.easingCubicInOut=function(t){return.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},K.easingQuarticIn=function(t){return t*t*t*t},K.easingQuarticOut=function(t){return 1- --t*t*t*t},K.easingQuarticInOut=function(t){return.5>t?8*t*t*t*t:1-8*--t*t*t*t},K.easingQuinticIn=function(t){return t*t*t*t*t},K.easingQuinticOut=function(t){return 1+--t*t*t*t*t},K.easingQuinticInOut=function(t){return.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t},K.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},K.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},K.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},K.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},K.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},K.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},K.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},K.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},K.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)},K.easingElasticIn=function(t){var e;return 0===t?0:1===t?1:(!V||1>V?(V=1,e=tt/4):e=tt*Math.asin(1/V)/G,-(V*Math.pow(2,10*(t-=1))*Math.sin((t-e)*G/tt)))},K.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!V||1>V?(V=1,e=tt/4):e=tt*Math.asin(1/V)/G,V*Math.pow(2,-10*t)*Math.sin((t-e)*G/tt)+1)},K.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!V||1>V?(V=1,e=tt/4):e=tt*Math.asin(1/V)/G,(t*=2)<1?-.5*(V*Math.pow(2,10*(t-=1))*Math.sin((t-e)*G/tt)):V*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*G/tt)*.5+1)},K.easingBounceIn=function(t){return 1-K.easingBounceOut(1-t)},K.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},K.easingBounceInOut=function(t){return.5>t?.5*K.easingBounceIn(2*t):.5*K.easingBounceOut(2*t-1)+.5},e.Tween=function(t,r,n,i){this._el=t,this._dr=i&&i.duration||700,this._r=i&&i.repeat||0,this._vSR={},this._vS=r,this._vE=n,this._y=i&&i.yoyo||!1,this.playing=!1,this.reversed=!1,this._rD=i&&i.repeatDelay||0,this._dl=i&&i.delay||0,this._sT=null,this.paused=!1,this._pST=null,this._to=i.transformOrigin,this._pp=i.perspective,this._ppo=i.perspectiveOrigin,this._ppp=i.parentPerspective,this._pppo=i.parentPerspectiveOrigin,this._rpr=i.rpr||!1,this._hex=i.keepHex||!1,this._e=i&&i.easing?e.pe(i.easing):e.Easing.linear,this._cT=[],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,e._queue(this)};var et=e.Tween.prototype;et.start=function(t){this.scrollIn();var i={};if(e.perspective(this._el,this),this._rpr){i=this.prS(),this._vS={},this._vS=e.prP(i,!1);for(var a in this._vS)if("transform"===a&&a in this._vE)for(var s in this._vS[a]){s in this._vE[a]||(this._vE[a][s]={});for(var o in this._vS[a][s])if(void 0!==this._vS[a][s][o].value){o in this._vE[a][s]||(this._vE[a][s][o]={});for(var u in this._vS[a][s][o])u in this._vE[a][s][o]||(this._vE[a][s][o][u]=this._vS[a][s][o][u])}if("value"in this._vS[a][s]&&!("value"in this._vE[a][s]))for(var l in this._vS[a][s])l in this._vE[a][s]||(this._vE[a][s][l]=this._vS[a][s][l])}}for(var v in this._vE)this._vSR[v]=this._vS[v];return this._sCF||(this._sC&&this._sC.call(),this._sCF=!0),r.push(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=t||window.performance.now(),this._sT+=this._dl,n||e._t(),this},et.stop=function(){return!this.paused&&this.playing&&(e.remove(this),this.playing=!1,this.paused=!1,this.scrollOut(),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),this.close()),this},et.pause=function(){return!this.paused&&this.playing&&(e.remove(this),this.paused=!0,this._pST=window.performance.now(),null!==this._pC&&this._pC.call()),this},et.play=et.resume=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=window.performance.now()-this._pST,e.add(this),n||e._t()),this},et.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]}},et.chain=function(){return this._cT=arguments,this},et.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},et.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},et.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},et.addListeners=function(){document.addEventListener(l,e.preventScroll,!1)},et.removeListeners=function(){document.removeEventListener(l,e.preventScroll,!1)},et.prS=function(){var t={},e=this._el,r=this._vS,n=this.gIS("transform"),i=["rotate","skew"],a=["X","Y","Z"];for(var s in r)if(-1!==F.indexOf(s)){var o="rotate"===s||"translate"===s||"scale"===s;if(/translate/.test(s)&&"translate"!==s)t.translate3d=n.translate3d||W[s];else if(o)t[s]=n[s]||W[s];else if(!o&&/rotate|skew/.test(s))for(var u=0;2>u;u++)for(var l=0;3>l;l++){var v=i[u]+a[l];-1!==F.indexOf(v)&&v in r&&(t[v]=n[v]||W[v])}}else if(-1===C.indexOf(s))if("opacity"===s&&d){var f=this.gCS("filter");t.opacity="number"==typeof f?f:W.opacity}else t[s]=this.gCS(s)||W[s];else t[s]=null===e||void 0===e?window.pageYOffset||p.scrollTop:e.scrollTop;for(var s in n)-1===F.indexOf(s)||s in r||(t[s]=n[s]||W[s]);return t},et.gIS=function(t){if(this._el){var e=this._el,r=e.style.cssText,n={},i=r.replace(/\s/g,"").split(";"),a=0,s=i.length;for(a;s>a;a++)if(/transform/.test(i[a])){var o=i[a].split(":")[1].split(")"),u=0,l=o.length;for(u;l>u;u++){var v=o[u].split("(");""!==v[0]&&F.indexOf(v)&&(n[v[0]]=/translate3d/.test(v[0])?v[1].split(","):v[1])}}return n}},et.gCS=function(t){var e=this._el,r=window.getComputedStyle(e)||e.currentStyle,n=!d&&s&&/transform|Radius/.test(t)?"-"+i.toLowerCase()+"-"+t:t,a=s&&"transform"===t||s&&-1!==D.indexOf(t)?r[n]:r[t];if("transform"!==t&&n in r){if(a){if("filter"===n){var o=parseInt(a.split("=")[1].replace(")","")),u=parseFloat(o/100);return u}return a}return W[t]}},et.close=function(){var t=this;setTimeout(function(){var n=r.indexOf(t);n===r.length-1&&e.s(),t.repeat>0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.reverse(),t.reversed=!1),t.playing=!1},61)},e.TweensAT=function(t,r,n){this.tweens=[];var i,a=t.length,s=[];for(i=0;a>i;i++)s[i]=n||{},n.delay=n.delay||0,s[i].delay=i>0?n.delay+(n.offset||0):n.delay,this.tweens.push(e.to(t[i],r,s[i]))},e.TweensFT=function(t,r,n,i){this.tweens=[];var a,s=t.length,o=[];for(a=0;s>a;a++)o[a]=i||{},i.delay=i.delay||0,o[a].delay=a>0?i.delay+(i.offset||0):i.delay,this.tweens.push(e.fromTo(t[a],r,n,o[a]))};var rt=e.TweensAT.prototype=e.TweensFT.prototype;return rt.start=function(t){t=t||window.performance.now();var e,r=this.tweens.length;for(e=0;r>e;e++)this.tweens[e].start(t);return this},rt.stop=function(){for(var t=0;te;e++)if(i[e]in t.style)return n[e];t=null},e.property=function(t){var n=t in document.body.style?!1:!0,r=e.getPrefix();return n?r+(t.charAt(0).toUpperCase()+t.slice(1)):t},e.selector=function(t,e){var n;if(n=e?"object"==typeof t&&t.length?t:document.querySelectorAll(t):"object"==typeof t?t:/^#/.test(t)?document.getElementById(t.replace("#","")):document.querySelector(t),null===n&&"window"!==t)throw new TypeError("Element not found or incorrect selector: "+t);return n};for(var i=("ontouchstart"in window||navigator.msMaxTouchPoints||!1),s=i?"touchstart":"mousewheel",a="mouseenter",o=e.property("transformOrigin"),u=e.property("perspective"),l=e.property("perspectiveOrigin"),p=e.property("transform"),c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return setTimeout(t,16)},v=window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||function(t){return clearTimeout(t)},f=document.body,h=document.getElementsByTagName("HTML")[0],d=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?f:h,g=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,_=8===g,m=["color","backgroundColor"],w=["scrollTop","scroll"],y=["opacity"],E=["top","left","width","height"],T=["rotateX","rotateY","translateZ"],S=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],O=m.concat(w,y,E,S),x=O.length,b=b||{},C=0;x>C;C++){var I=O[C];-1!==m.indexOf(I)?b[I]="rgba(0,0,0,0)":-1!==E.indexOf(I)?b[I]=0:"translate3d"===I?b[I]=[0,0,0]:"translate"===I?b[I]=[0,0]:"rotate"===I||/X|Y|Z/.test(I)?b[I]=0:("scale"===I||"opacity"===I)&&(b[I]=1)}e.to=function(t,n,r){var i=e.selector(t),s=n,a=e.prP(n,{},i)[0];return r=r||{},r.rpr=!0,new e.Tween(i,s,a,r)},e.fromTo=function(t,n,r,i){var s=e.selector(t),a=e.prP(n,r,s),o=a[0],u=a[1];return i=i||{},new e.Tween(s,o,u,i)},e.allTo=function(t,n,r){var i=e.selector(t,!0);return new e.TweensTO(i,n,r)},e.allFromTo=function(t,n,r,i){var s=e.selector(t,!0);return new e.TweensFT(s,n,r,i)},e.dom={},e._u=function(t,n){if(n=n||window.performance.now(),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 a=0,o=t._cT.length;for(a;o>a;a++)t._cT[a].start(t._sT+t._dr);return t.close(),!1}return!0},e._tk=function(r){var i,s=0;for(t=c(e._tk);s<(i=n.length);)e._u(n[s],r)?s++:n.splice(s,1)},e.perspective=function(t,e){void 0!==e._to&&(t.style[o]=e._to),void 0!==e._ppo&&(t.style[l]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[u]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[l]=e._pppo)},e.getAll=function(){return n},e.removeAll=function(){n=[]},e.add=function(t){n.push(t)},e.remove=function(t){var e=n.indexOf(t);-1!==e&&n.splice(e,1)},e.s=function(){v(t),t=null},e._queue=function(t){for(var n in t._vE){var r=-1!==m.indexOf(n),i=-1!==E.indexOf(n),s=-1!==w.indexOf(n),a=-1!==y.indexOf(n),o="transform"===n;!i||n in e.dom?!o||n in e.dom?!r||n in e.dom?!s||n in e.dom?!a||n in e.dom||(_?e.dom[n]=function(t,e,n){t._el.style.filter="alpha(opacity="+100*(t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n)+")"}:e.dom[n]=function(t,e,n){t._el.style.opacity=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n}):e.dom[n]=function(t,e,n){t._el=void 0===t._el||null===t._el?d:t._el,t._el.scrollTop=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n}:e.dom[n]=function(t,n,r){var i={};for(var s in t._vE[n].value)"a"!==s?i[s]=parseInt(t._vS[n].value[s]+(t._vE[n].value[s]-t._vS[n].value[s])*r)||0:i[s]=t._vS[n].value[s]&&t._vE[n].value[s]?parseFloat(t._vS[n].value[s]+(t._vE[n].value[s]-t._vS[n].value[s])*r):null;t._hex?t._el.style[n]=e.rth(i.r,i.g,i.b):t._el.style[n]=!i.a||_?"rgb("+i.r+","+i.g+","+i.b+")":"rgba("+i.r+","+i.g+","+i.b+","+i.a+")"}:e.dom[n]=function(t,e,n){var r,i,s="",a="perspective("+t._pp+"px) ";for(r in t._vE[e]){var o=t._vS[e][r],u=t._vE[e][r];if(i=i||-1!==T.indexOf(r)&&!g,"translate"===r){var l,c="",v={};for(l in u){var f=o[l].value||0,h=u[l].value||0,d=u[l].unit||"px";v[l]=f===h?h+d:f+(h-f)*n+d}c=u.x?"translate("+v.x+","+v.y+")":"translate3d("+v.translateX+","+v.translateY+","+v.translateZ+")",s=""===s?c:c+" "+s}else if("rotate"===r){var _,m="",w={};for(_ in u)if(o[_]){var y=o[_].value,E=u[_].value,S=u[_].unit||"deg",O=y+(E-y)*n;w[_]="z"===_?"rotate("+O+S+")":_+"("+O+S+") "}m=u.z?w.z:(w.rotateX||"")+(w.rotateY||"")+(w.rotateZ||""),s=""===s?m:s+" "+m}else if("skew"===r){var x="",b={};for(var C in u)if(o[C]){var I=o[C].value,M=u[C].value,k=u[C].unit||"deg",D=I+(M-I)*n;b[C]=C+"("+D+k+") "}x=(b.skewX||"")+(b.skewY||""),s=""===s?x:s+" "+x}else if("scale"===r){var Y=o.value,X=u.value,A=Y+(X-Y)*n,F=r+"("+A+")";s=""===s?F:s+" "+F}}t._el.style[p]=i||void 0!==t._pp&&0!==t._pp?a+s:s}:e.dom[n]=function(t,e,n){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n+t._vE[e].unit}}},e.prP=function(t,n,r){var i,s=arguments.length,a=[];for(s=s>2?2:s,i=0;s>i;i++){var o,u=arguments[i],l={},p={},c={},v={};a[i]={};for(o in u)if(-1!==S.indexOf(o)){if(/^translate(?:[XYZ]|3d)$/.test(o)){var f=["X","Y","Z"],h=0;for(h;3>h;h++){var d=f[h];/3d/.test(o)?c["translate"+d]=e.pp.tf("translate"+d,u[o][h]):c["translate"+d]="translate"+d in u?e.pp.tf("translate"+d,u["translate"+d]):{value:0,unit:"px"}}v.translate=c}else if(/^rotate(?:[XYZ])$/.test(o)||/^skew(?:[XY])$/.test(o)){var g=/rotate/.test(o)?"rotate":"skew",_=["X","Y","Z"],T=0,O="rotate"===g?p:l;for(T;3>T;T++){var x=_[T];void 0!==u[g+x]&&"skewZ"!==o&&(O[g+x]=e.pp.tf(g+x,u[g+x]))}v[g]=O}else/(rotate|translate|scale)$/.test(o)&&(v[o]=e.pp.tf(o,u[o]));a[i].transform=v}else"transform"!==o&&(-1!==E.indexOf(o)?a[i][o]=e.pp.box(o,u[o]):-1!==y.indexOf(o)||-1!==w.indexOf(o)?a[i][o]=e.pp.unl(o,u[o]):-1!==m.indexOf(o)?a[i][o]=e.pp.cls(o,u[o]):o in e.pp&&(a[i][o]=e.pp[o](o,u[o],r)))}return a},e.pp={},e.prS={},e.pp.tf=function(t,n){var r,i=t.replace(/X|Y|Z/,"");if("translate3d"===t)return r=n.split(","),{translateX:{value:e.truD(r[0]).v,unit:e.truD(r[0]).u},translateY:{value:e.truD(r[1]).v,unit:e.truD(r[1]).u},translateZ:{value:e.truD(r[2]).v,unit:e.truD(r[2]).u}};if("translate"!==t&&"translate"===i)return{value:e.truD(n).v,unit:e.truD(n).u||"px"};if("rotate"!==t&&("skew"===i||"rotate"===i)&&"skewZ"!==t)return{value:e.truD(n).v,unit:e.truD(n,t).u||"deg"};if("translate"===t){r="string"==typeof n?n.split(","):n;var s={};return r instanceof Array?(s.x={value:e.truD(r[0]).v,unit:e.truD(r[0]).u},s.y={value:e.truD(r[1]).v,unit:e.truD(r[1]).u}):(s.x={value:e.truD(r).v,unit:e.truD(r).u},s.y={value:0,unit:"px"}),s}if("rotate"===t){var a={};return a.z={value:e.truD(n,t).v,unit:e.truD(n,t).u||"deg"},a}return"scale"===t?{value:e.truD(n,t).v}:void 0},e.pp.unl=function(t,n){return{value:e.truD(n).v}},e.pp.box=function(t,n){return{value:e.truD(n).v,unit:e.truD(n).u}},e.pp.cls=function(t,n){return{value:e.truC(n)}},e.truD=function(t,e){function n(){var n,r=0;for(r;s>r;r++)"string"==typeof t&&-1!==t.indexOf(i[r])&&(n=i[r]);return n=void 0!==n?n:e?"deg":"px"}var r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],s=i.length,a=n();return{v:r,u:a}},e.preventScroll=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},e.truC=function(t){var n,r;if(/rgb|rgba/.test(t))return n=t.replace(/[^\d,]/g,"").split(","),r=n[3]?n[3]:null,r?{r:parseInt(n[0]),g:parseInt(n[1]),b:parseInt(n[2]),a:1*r}:{r:parseInt(n[0]),g:parseInt(n[1]),b:parseInt(n[2])};if(/#/.test(t))return n=e.htr(t),{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];return i.style.color=t,n=window.getComputedStyle(i,null).color,i.style.color="",t!==n?e.truC(n):{r:0,g:0,b:0}}},e.rth=function(t,e,n){return"#"+((1<<24)+(t<<16)+(e<<8)+n).toString(16).slice(1)},e.htr=function(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,n,r){return e+e+n+n+r+r});var n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null},e.gIS=function(t,e){if(t){var n=t.style.cssText,r={},i=n.replace(/\s/g,"").split(";"),s=0,a=i.length;for(s;a>s;s++)if(/transform/.test(i[s])){var o=i[s].split(":")[1].split(")"),u=0,l=o.length;for(u;l>u;u++){var p=o[u].split("(");""!==p[0]&&S.indexOf(p)&&(r[p[0]]=/translate3d/.test(p[0])?p[1].split(","):p[1])}}return r}},e.gCS=function(t,n){var r=t.style,i=window.getComputedStyle(t,null)||t.currentStyle,s=e.property(n),a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[s];if("transform"!==n&&(s in i||s in r)){if(a){if("filter"===s){var o=parseInt(a.split("=")[1].replace(")","")),u=parseFloat(o/100);return u}return a}return b[n]}},e.pe=function(t){if("function"==typeof t)return t;if("string"==typeof t){if(/easing|linear/.test(t))return e.Easing[t];if(/bezier/.test(t)){var n=t.replace(/bezier|\s|\(|\)/g,"").split(",");return e.Ease.Bezier(1*n[0],1*n[1],1*n[2],1*n[3])}return/physics/.test(t)?e.Physics[t]():e.Ease[t]()}},e.Easing={},e.Easing.linear=function(t){return t};var M=Math.PI,k=2*Math.PI,D=Math.PI/2,Y=.1,X=.4;e.Easing.easingSinusoidalIn=function(t){return-Math.cos(t*D)+1},e.Easing.easingSinusoidalOut=function(t){return Math.sin(t*D)},e.Easing.easingSinusoidalInOut=function(t){return-.5*(Math.cos(M*t)-1)},e.Easing.easingQuadraticIn=function(t){return t*t},e.Easing.easingQuadraticOut=function(t){return t*(2-t)},e.Easing.easingQuadraticInOut=function(t){return.5>t?2*t*t:-1+(4-2*t)*t},e.Easing.easingCubicIn=function(t){return t*t*t},e.Easing.easingCubicOut=function(t){return--t*t*t+1},e.Easing.easingCubicInOut=function(t){return.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},e.Easing.easingQuarticIn=function(t){return t*t*t*t},e.Easing.easingQuarticOut=function(t){return 1- --t*t*t*t},e.Easing.easingQuarticInOut=function(t){return.5>t?8*t*t*t*t:1-8*--t*t*t*t},e.Easing.easingQuinticIn=function(t){return t*t*t*t*t},e.Easing.easingQuinticOut=function(t){return 1+--t*t*t*t*t},e.Easing.easingQuinticInOut=function(t){return.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t},e.Easing.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},e.Easing.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},e.Easing.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},e.Easing.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},e.Easing.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},e.Easing.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},e.Easing.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},e.Easing.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},e.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)},e.Easing.easingElasticIn=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,-(Y*Math.pow(2,10*(t-=1))*Math.sin((t-e)*k/X)))},e.Easing.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,Y*Math.pow(2,-10*t)*Math.sin((t-e)*k/X)+1)},e.Easing.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,(t*=2)<1?-.5*(Y*Math.pow(2,10*(t-=1))*Math.sin((t-e)*k/X)):Y*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*k/X)*.5+1)},e.Easing.easingBounceIn=function(t){return 1-e.Easing.easingBounceOut(1-t)},e.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},e.Easing.easingBounceInOut=function(t){return.5>t?.5*e.Easing.easingBounceIn(2*t):.5*e.Easing.easingBounceOut(2*t-1)+.5},e.Tween=function(t,n,r,i){this._el=t,this._vSR={},this._vS=n,this._vE=r,this._y=i.yoyo||!1,this.playing=!1,this.reversed=!1,this.paused=!1,this._sT=null,this._pST=null,this._hex=i.keepHex||!1,this._rpr=i.rpr||!1,this._dr=i.duration||700,this._r=i.repeat||0,this._rD=i.repeatDelay||0,this._dl=i.delay||0,this._to=i.transformOrigin,this._pp=i.perspective,this._ppo=i.perspectiveOrigin,this._ppp=i.parentPerspective,this._pppo=i.parentPerspectiveOrigin,this._e=i&&i.easing&&"function"==typeof e.pe(i.easing)?e.pe(i.easing):e.Easing.linear,this._cT=[],this._sCF=!1,this._sC=i.start||null,this._uC=i.update||null,this._cC=i.complete||null,this._pC=i.pause||null,this._rC=i.play||null,this._stC=i.stop||null,this.repeat=this._r;for(var s in i)s in this||/perspective|delay|duration|repeat|origin|start|stop|update|complete|pause|play|yoyo|easing/i.test(s)||(this[s]=i[s]);e._queue(this)};var A=e.Tween.prototype;A.start=function(r){this.scrollIn(),e.perspective(this._el,this),this._rpr&&this.stack(),e.svg&&this._vE.path&&e.svg.pathCross(this);for(var i in this._vE)this._vSR[i]=this._vS[i];return n.push(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=r||window.performance.now(),this._sT+=this._dl,this._sCF||(this._sC&&this._sC.call(),this._sCF=!0),t||e._tk(),this},A.stop=function(){return!this.paused&&this.playing&&(e.remove(this),this.playing=!1,this.paused=!1,this.scrollOut(),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),this.close()),this},A.pause=function(){return!this.paused&&this.playing&&(e.remove(this),this.paused=!0,this._pST=window.performance.now(),null!==this._pC&&this._pC.call()),this},A.play=A.resume=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=window.performance.now()-this._pST,e.add(this),t||e._tk()),this},A.rvs=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]}},A.chain=function(){return this._cT=arguments,this},A.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},A.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},A.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},A.addListeners=function(){document.addEventListener(s,e.preventScroll,!1),document.addEventListener(a,e.preventScroll,!1)},A.removeListeners=function(){document.removeEventListener(s,e.preventScroll,!1),document.removeEventListener(a,e.preventScroll,!1)},A.stack=function(){var t=this.prS();this._vS={},this._vS=e.prP(t,{},this._el)[0];for(var n in this._vS)if("transform"===n&&n in this._vE)for(var r in this._vS[n]){r in this._vE[n]||(this._vE[n][r]={});for(var i in this._vS[n][r])if(void 0!==this._vS[n][r][i].value){i in this._vE[n][r]||(this._vE[n][r][i]={});for(var s in this._vS[n][r][i])s in this._vE[n][r][i]||(this._vE[n][r][i][s]=this._vS[n][r][i][s])}if("value"in this._vS[n][r]&&!("value"in this._vE[n][r]))for(var a in this._vS[n][r])a in this._vE[n][r]||(this._vE[n][r][a]=this._vS[n][r][a])}},A.prS=function(){var t={},n=this._el,r=this._vS,i=e.gIS(n,"transform"),s=["rotate","skew"],a=["X","Y","Z"];for(var o in r)if(-1!==S.indexOf(o)){var u=/(rotate|translate|scale)$/.test(o);if(/translate/.test(o)&&"translate"!==o)t.translate3d=i.translate3d||b[o];else if(u)t[o]=i[o]||b[o];else if(!u&&/rotate|skew/.test(o))for(var l=0;2>l;l++)for(var p=0;3>p;p++){var c=s[l]+a[p];-1!==S.indexOf(c)&&c in r&&(t[c]=i[c]||b[c])}}else if(-1===w.indexOf(o))if("opacity"===o&&_){var v=e.gCS(n,"filter");t.opacity="number"==typeof v?v:b.opacity}else-1!==O.indexOf(o)?t[o]=e.gCS(n,o)||l[o]:t[o]=o in e.prS?e.prS[o](n,o,r[o]):0;else t[o]=null===n||void 0===n?window.pageYOffset||d.scrollTop:n.scrollTop;for(var o in i)-1===S.indexOf(o)||o in r||(t[o]=i[o]||b[o]);return t},A.close=function(){var t=this;setTimeout(function(){var r=n.indexOf(t);r===n.length-1&&e.s(),t.repeat>0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)},e.TweensTO=function(t,n,r){this.tweens=[];var i,s=t.length,a=[];for(i=0;s>i;i++)a[i]=r||{},r.delay=r.delay||0,a[i].delay=i>0?r.delay+(r.offset||0):r.delay,this.tweens.push(e.to(t[i],n,a[i]))},e.TweensFT=function(t,n,r,i){this.tweens=[];var s,a=t.length,o=[];for(s=0;a>s;s++)o[s]=i||{},i.delay=i.delay||0,o[s].delay=s>0?i.delay+(i.offset||0):i.delay,this.tweens.push(e.fromTo(t[s],n,r,o[s]))};var F=e.TweensTO.prototype=e.TweensFT.prototype;return F.start=function(t){t=t||window.performance.now();var e,n=this.tweens.length;for(e=0;n>e;e++)this.tweens[e].start(t);return this},F.stop=function(){for(var t=0;t 1 ? 1 : e;
+    var p, e = _min(( t - w._sT ) / w._dr, 1); // calculate progress
     
-    //render the CSS update
-    for (p in ve){
-      _r[p](w,p,es(e));
-    }
+    for (p in w._vE){ K.dom[p](w,p,w._e(e)); } //render the CSS update
     
-    if (w._uC) { w._uC.call(); }
+    if (w._uC) { w._uC.call(); } // fire the updateCallback
 
-    if (e === 1) {  
+    if (e === 1) {
       if (w._r > 0) {
         if ( w._r < 9999 ) { w._r--; }      
         
-        if (w._y) { w.reversed = !w.reversed; w.reverse(); } // handle yoyo
+        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;        
@@ -152,21 +144,19 @@
       }
     }
     return true;
-  }; 
+  };
   
-  var _u = K._u;
   // internal ticker
-  K._t = function (t) {
+  K._tk = function (t) {
     var i = 0, tl; 
-    _t = _raf(K._t); 
+    _t = _raf(K._tk);
     while ( i < (tl = _tws.length) ) {
-      if ( _u(_tws[i],t) ) {
+      if ( K._u(_tws[i],t) ) {
         i++;
       } else {
         _tws.splice(i, 1);
       }
     }
-    return true;
   };
   
   // aplies the transform origin and perspective
@@ -189,49 +179,21 @@
   };  
   K.s = function () { _caf(_t);  _t = null; }; 
   
-  // builds render functions for the render object K.render(w, p, w._e(e));
+  // 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 = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1,
-        rd = _rd.indexOf(p) !== -1,
+        bm = _bm.indexOf(p) !== -1,
         sc = _sc.indexOf(p) !== -1,
-        bg = _bg.indexOf(p) !== -1,
-        clp = _clp.indexOf(p) !== -1,
         op = _op.indexOf(p) !== -1,
         tf = p === 'transform';
-        
-      //process styles by property / property type
-      if ( bm && (!(p in K._r)) ) {
-        K._r[p] = function(w,p,v) {
+      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 ( rd && (!(p in K._r)) ) {
-        if (p === 'borderRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_br] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };        
-        } else if (p === 'borderTopLeftRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brtl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderTopRightRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brtr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderBottomLeftRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brbl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        } else if (p === 'borderBottomRightRadius') {
-          K._r[p] = function(w,p,v) {
-            w._el.style[_brbr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
-          };
-        }
-      } else if (tf && (!(p in K._r)) ) {
+      } else if (tf && (!(p in K.dom)) ) {
 
-        K._r[p] = function(w,p,v) {
+        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];
@@ -281,8 +243,8 @@
           w._el.style[_tr] = rps || ( w._pp !== undefined && w._pp !== 0 ) ? pps + _tS : _tS;
         };
 
-      } else if ( cls && (!(p in K._r)) ) {
-        K._r[p] = function(w,p,v) {
+      } 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' ){
@@ -293,166 +255,114 @@
           }
 
           if ( w._hex ) {
-            w._el.style[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) );
+            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._r)) ) {   
-        K._r[p] = function(w,p,v) {
+      } 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 ( bg && (!(p in K._r))  ) {        
-        K._r[p] = function(w,p,v) {
-          var px1 = w._vS[p].x.v, px2 = w._vE[p].x.v, py1 = w._vS[p].y.v, py2 = w._vE[p].y.v,
-            px = (px1 + ( px2 - px1 ) * v), pxu = '%', py = (py1 + ( py2 - py1 ) * v), pyu = '%';      
-          w._el.style[p] = px + pxu + ' ' + py + pyu;
-        };
-      } else if ( clp && (!(p in K._r))  ) {
-        K._r[p] = function(w,p,v) {
-          var h = 0, cl = [];
-          for (h;h<4;h++){
-            var c1 = w._vS[p][h].v, c2 = w._vE[p][h].v, cu = w._vE[p][h].u || 'px';
-            cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu;
-          }  
-          w._el.style[p] = 'rect('+cl+')';
-        };
-      } else if ( op && (!(p in K._r)) ) {
+      } else if ( op && (!(p in K.dom)) ) {
         if (_isIE8) {
-          K._r[p] = function(w,p,v) {
+          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._r[p] = function(w,p,v) {
+          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
-  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;
+    
+  // 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;
 
-    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' };
+    for (i=0; i 0) { self._r = self.repeat; }
-      if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; }
+      if (self._y && self.reversed===true) { self.rvs(); self.reversed = false; }
       self.playing = false;
-    },61)
+    },64)
   };
 
   // the multi elements Tween constructs
-  K.TweensAT = function (els, vE, o) { // .to
+  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;
@@ -875,7 +791,7 @@
       this.tweens.push( K.fromTo(els[i], vS, vE, _o[i]) );
     }
   };
-  var ws = K.TweensAT.prototype = K.TweensFT.prototype;
+  var ws = K.TweensTO.prototype = K.TweensFT.prototype;
   ws.start = function(t){
     t = t || window.performance.now(); 
     var i, tl = this.tweens.length;
@@ -886,17 +802,8 @@
   }
   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; }
 
-
-  //returns browser prefix
-  function getPrefix() { 
-    var div = document.createElement('div'), i = 0,  pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
-      s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
-      
-    for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; }  }
-    div = null;
-  }
-  
   return K;
 }));
\ No newline at end of file

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

---
 demo/assets/js/attr.js    |  30 ++++
 demo/assets/js/css.js     | 164 +++++++++++++++++
 demo/assets/js/extend.js  |  27 +++
 demo/assets/js/kute-bs.js | 116 ++++++++++++
 demo/assets/js/svg.js     | 108 +++++++++++
 demo/attr.html            | 165 +++++++++++++++++
 demo/css.html             | 225 +++++++++++++++++++++++
 demo/easing.html          | 211 ++++++++++++++++++++++
 demo/extend.html          | 339 ++++++++++++++++++++++++++++++++++
 demo/properties.html      | 224 +++++++++++++++++++++++
 demo/src/kute-attr.js     |  75 ++++++++
 demo/src/kute-css.js      | 176 ++++++++++++++++++
 demo/src/kute-svg.js      | 292 ++++++++++++++++++++++++++++++
 demo/start.html           | 145 +++++++++++++++
 demo/svg.html             | 370 ++++++++++++++++++++++++++++++++++++++
 dist/kute-attr.min.js     |   2 +
 dist/kute-css.min.js      |   2 +
 dist/kute-svg.min.js      |   2 +
 kute-attr.js              |  75 ++++++++
 kute-css.js               | 176 ++++++++++++++++++
 kute-svg.js               | 292 ++++++++++++++++++++++++++++++
 21 files changed, 3216 insertions(+)
 create mode 100644 demo/assets/js/attr.js
 create mode 100644 demo/assets/js/css.js
 create mode 100644 demo/assets/js/extend.js
 create mode 100644 demo/assets/js/kute-bs.js
 create mode 100644 demo/assets/js/svg.js
 create mode 100644 demo/attr.html
 create mode 100644 demo/css.html
 create mode 100644 demo/easing.html
 create mode 100644 demo/extend.html
 create mode 100644 demo/properties.html
 create mode 100644 demo/src/kute-attr.js
 create mode 100644 demo/src/kute-css.js
 create mode 100644 demo/src/kute-svg.js
 create mode 100644 demo/start.html
 create mode 100644 demo/svg.html
 create mode 100644 dist/kute-attr.min.js
 create mode 100644 dist/kute-css.min.js
 create mode 100644 dist/kute-svg.min.js
 create mode 100644 kute-attr.js
 create mode 100644 kute-css.js
 create mode 100644 kute-svg.js

diff --git a/demo/assets/js/attr.js b/demo/assets/js/attr.js
new file mode 100644
index 0000000..e4a5ba0
--- /dev/null
+++ b/demo/assets/js/attr.js
@@ -0,0 +1,30 @@
+// radius attribute
+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 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'});
+
+coordinatesTween1.chain(coordinatesTween2);
+coordinatesTween2.chain(coordinatesTween3);
+coordinatesTween3.chain(radiusTween);
+
+var circleBtn = document.getElementById('circleBtn');
+circleBtn.addEventListener('click', function(){
+    !coordinatesTween1.playing && !coordinatesTween2.playing && !coordinatesTween3.playing && !radiusTween.playing && coordinatesTween1.start();
+});
+
+
+// coordinatea 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'});
+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);
+gradBtn.addEventListener('click', function(){
+    !closingGradient.playing && !rotatingGradient1.playing && !rotatingGradient2.playing && !openingGradient.playing && closingGradient.start();
+});
diff --git a/demo/assets/js/css.js b/demo/assets/js/css.js
new file mode 100644
index 0000000..bc31c1e
--- /dev/null
+++ b/demo/assets/js/css.js
@@ -0,0 +1,164 @@
+// 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},{easing:'easingCubicOut', repeat: 1, yoyo: true});
+var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
+var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
+var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
+var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{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,{padding:30},{ 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() { var css = KUTE.gCS(box,'marginTop'); box.innerHTML = parseInt(css)+'px'+'
    MARGIN'; }
+function onMarginBottom() { var css = KUTE.gCS(box,'marginBottom'); box.innerHTML = 'MARGIN
    '+parseInt(css)+'px'; }
+function onPadding() { var css = KUTE.gCS(box,'paddingTop'); box.innerHTML = 'PADDING
    '+parseInt(css)+'px'; }
+function onMargin() { var css = KUTE.gCS(box,'marginTop'); box.innerHTML = 'MARGIN
    '+parseInt(css)+'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 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 = [];
+
+for (var i=0; i
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    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 properties
+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.
    
+        
+		
    Unitless Properties
    
+		
    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 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:
    
+
    // 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.
    
+	
    
+
+      
+     
+
+ 
    
+ 
+
+
+
+	
+
+
+
+
+
+ 
+ 
+ 
+ 
+
+
\ No newline at end of file
diff --git a/demo/css.html b/demo/css.html
new file mode 100644
index 0000000..44cd036
--- /dev/null
+++ b/demo/css.html
@@ -0,0 +1,225 @@
+
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    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 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 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:'#069'}).start();
+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.
    
+
    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/demo/easing.html b/demo/easing.html
new file mode 100644
index 0000000..6d72c3f
--- /dev/null
+++ b/demo/easing.html
@@ -0,0 +1,211 @@
+
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    KUTE.js Developer API | 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.
      • 
+		
    
+		
+		
    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
+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}]}] });
+
      
+            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}]}] });
+
                  
+			
      • 
+		
    
+		
    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/demo/extend.html b/demo/extend.html
new file mode 100644
index 0000000..1458934
--- /dev/null
+++ b/demo/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/demo/properties.html b/demo/properties.html
new file mode 100644
index 0000000..595829c
--- /dev/null
+++ b/demo/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/demo/src/kute-attr.js b/demo/src/kute-attr.js
new file mode 100644
index 0000000..323f2f6
--- /dev/null
+++ b/demo/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/demo/src/kute-css.js b/demo/src/kute-css.js
new file mode 100644
index 0000000..793d46f
--- /dev/null
+++ b/demo/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 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
+
+
+
+
+  
+
+
+    
+    
+    
+    
+    
+    
+     
+
+    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/demo/svg.html b/demo/svg.html
new file mode 100644
index 0000000..eb3fba0
--- /dev/null
+++ b/demo/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
diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js
new file mode 100644
index 0000000..af75a25
--- /dev/null
+++ b/dist/kute-attr.min.js
@@ -0,0 +1,2 @@
+// Attributes Plugin for KUTE.js | dnp_theme | 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=window.KUTE;e.gCA=function(t,e){return t.getAttribute(e)},e.prS.attr=function(t,r,n){var i={};for(var o in n)i[o.replace(/_+[a-z]+/,"")]=e.gCA(t,o.replace(/_+[a-z]+/,""));return i},"attr"in e.dom||(e.dom.attr=function(t,r,n){for(var i in t._vE[r])e.dom.attr.prototype[i](t,i,n)});var r=e.dom.attr.prototype;e.pp.attr=function(t,n){var i,o={};for(i in n)if(/%|px/.test(n[i])){var u=e.truD(n[i]).u,a=/%/.test(u)?"_percent":"_"+u;i+a in r||(r[i+a]=function(t,e,r){t._el.setAttribute(e.replace(a,""),t._vS.attr[e].v+(t._vE.attr[e].v-t._vS.attr[e].v)*r+t._vE.attr[e].u)}),o[i+a]=e.truD(n[i])}else i in r||(r[i]=function(t,e,r){t._el.setAttribute(e,t._vS.attr[e]+(t._vE.attr[e]-t._vS.attr[e])*r)}),o[i]=1*n[i];return o}});
\ No newline at end of file
diff --git a/dist/kute-css.min.js b/dist/kute-css.min.js
new file mode 100644
index 0000000..a1b826a
--- /dev/null
+++ b/dist/kute-css.min.js
@@ -0,0 +1,2 @@
+// CSS Plugin for KUTE.js | dnp_theme | 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){for(var r,e=window.KUTE,o=e.property("borderRadius"),i=e.property("borderTopLeftRadius"),n=e.property("borderTopRightRadius"),u=e.property("borderBottomLeftRadius"),d=e.property("borderBottomRightRadius"),a=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],v=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],l=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],p=["fontSize","lineHeight","letterSpacing","wordSpacing"],f=["clip"],g=["backgroundPosition"],_=v.concat(l,p),s=a.concat(f,v,l,p,g),c=s.length,b=b||{},m=0;c>m;m++)r=s[m],-1!==a.indexOf(r)?b[r]="rgba(0,0,0,0)":-1!==_.indexOf(r)?b[r]=0:-1!==g.indexOf(r)?b[r]=[50,50]:"clip"===r&&(b[r]=[0,0,0,0]);for(var m=0,S=a.length;S>m;m++)r=a[m],e.pp[r]=function(t,r){return t in e.dom||(e.dom[t]=function(t,r,o){var i={};for(var n in t._vE[r].value)"a"!==n?i[n]=parseInt(t._vS[r].value[n]+(t._vE[r].value[n]-t._vS[r].value[n])*o)||0:i[n]=t._vS[r].value[n]&&t._vE[r].value[n]?parseFloat(t._vS[r].value[n]+(t._vE[r].value[n]-t._vS[r].value[n])*o):null;t._hex?t._el.style[r]=e.rth(i.r,i.g,i.b):t._el.style[r]=!i.a||_isIE8?"rgb("+i.r+","+i.g+","+i.b+")":"rgba("+i.r+","+i.g+","+i.b+","+i.a+")"}),e.pp.cls(t,r)},e.prS[r]=function(t,r,o){return e.gCS(t,r)||b[r]};for(var m=0,S=_.length;S>m;m++)r=_[m],e.pp[r]=function(t,r){return t in e.dom||(e.dom[t]=function(t,r,e){t._el.style[r]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}),e.pp.box(t,r)},e.prS[r]=function(t,r,o){return e.gCS(t,r)||b[r]};for(var m=0,S=v.length;S>m;m++)r=v[m],e.pp[r]=function(t,r){return t in e.dom||("borderRadius"===t?e.dom[t]=function(t,r,e){t._el.style[o]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}:"borderTopLeftRadius"===t?e.dom[t]=function(t,r,e){t._el.style[i]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}:"borderTopRightRadius"===t?e.dom[t]=function(t,r,e){t._el.style[n]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}:"borderBottomLeftRadius"===t?e.dom[t]=function(t,r,e){t._el.style[u]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}:"borderBottomRightRadius"===t&&(e.dom[t]=function(t,r,e){t._el.style[d]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit})),e.pp.box(t,r)},e.prS[r]=function(t,r,o){return e.gCS(t,r)||b[r]};return e.pp.clip=function(t,r){if(t in e.dom||(e.dom[t]=function(t,r,e){var o=0,i=[];for(o;4>o;o++){var n=t._vS[r][o].v,u=t._vE[r][o].v,d=t._vE[r][o].u||"px";i[o]=n+(u-n)*e+d}t._el.style[r]="rect("+i+")"}),r instanceof Array)return[e.truD(r[0]),e.truD(r[1]),e.truD(r[2]),e.truD(r[3])];var o=r.replace(/rect|\(|\)/g,"");return o=/\,/g.test(o)?o.split(/\,/g):o.split(/\s/g),[e.truD(o[0]),e.truD(o[1]),e.truD(o[2]),e.truD(o[3])]},e.prS.clip=function(t,r,o){var i=e.gCS(t,r),n=e.gCS(t,"width"),u=e.gCS(t,"height");return/rect/.test(i)?i:[0,n,u,0]},e.pp.backgroundPosition=function(t,r){if(t in e.dom||(e.dom[t]=function(t,r,e){var o=t._vS[r].x.v,i=t._vE[r].x.v,n=t._vS[r].y.v,u=t._vE[r].y.v,d=o+(i-o)*e,a="%",v=n+(u-n)*e,l="%";t._el.style[r]=d+a+" "+v+l}),r instanceof Array)return{x:e.truD(r[0])||{v:50,u:"%"},y:e.truD(r[1])||{v:50,u:"%"}};var o,i,n=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g),n=2===n.length?n:[n[0],50],o=e.truD(n[0]),i=e.truD(n[1]),{x:o,y:i}},e.prS.backgroundPosition=function(t,r,o){return e.gCS(t,r)||b[r]},this});
\ No newline at end of file
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
new file mode 100644
index 0000000..34e3881
--- /dev/null
+++ b/dist/kute-svg.min.js
@@ -0,0 +1,2 @@
+// SVG Plugin for KUTE.js | dnp_theme | 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.KUTE,n=n||{},o=document.getElementsByTagName("path")[0],a=o&&o.ownerSVGElement&&o.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",i=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],s=["fill","stroke","stopColor"],h=function(t){return String.prototype.trim?t.trim():t.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")};if(!o||o.ownerSVGElement){n.getPath=function(t){var e={},r="object"==typeof t?t:/^\.|^\#/.test(t)?document.querySelector(t):null;if(r&&/path|glyph/.test(r.tagName))e.e=n.forcePath(r),e.o=r.getAttribute("d");else if(!r&&/[a-z][^a-z]*/gi.test(t)){var o=n.createPath(h(t));e.e=o,e.o=t}return e},n.pathCross=function(t){this._mpr=t.morphPrecision||25,this._midx=t.morphIndex,this._smi=t.showMorphInfo,this._rv1=t.reverseFirstPath,this._rv2=t.reverseSecondPath;var e,r=n.getOnePath(t._vS.path.o),o=n.getOnePath(t._vE.path.o);e=n._pathCross(r,o),t._vS.path.d=e[0],t._vE.path.d=e[1]},n._pathCross=function(t,e){t=n.createPath(t),e=n.createPath(e);var r,o=n.getSegments(t,e,this._mpr),a=o[0],i=o[1],s=i.length;if(this._rv1&&a.reverse(),this._rv2&&i.reverse(),this._smi&&(r=n.getBestIndex(a,i)),this._midx){var h=i.splice(this._midx,s-this._midx);i=h.concat(i)}return this._smi&&console.log("KUTE.js Path Morph Log\nThe morph used "+s+" 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 "+r+".\n":"You may also consider a morphIndex for the second path. Currently the best index seems to be "+r+".\n")+(this._rv1||this._rv2?"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"):"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.")),t=e=null,[a,i]},n.getSegments=function(t,e,r){for(var n=[],o=[],a=t.getTotalLength(),i=e.getTotalLength(),s=Math.max(a,i),h=s/r,p=0,u=h*r;(p+=r)r;r++)o=h.splice(r,l-r),h=o.concat(h),a=Math.abs(s[r][0]-h[r][0]),i=Math.abs(s[r][1]-h[r][1]),p.push(Math.sqrt(a*a+i*i)),u.push(h),h=[],h=n.clone(e),o=null;return p.indexOf(Math.min.apply(null,p))},n.getOnePath=function(t){var e=t.split(/z/i);return e.length>2?h(e[0])+"z":h(t)},n.createPath=function(t){var e=document.createElementNS(a,"path"),r="object"==typeof t?t.getAttribute("d"):t;return e.setAttribute("d",r),e},n.forcePath=function(t){if("glyph"===t.tagName){var e=n.createPath(t);return t.parentNode.appendChild(e),e}return t},n.clone=function(t){var e;if(t instanceof Array){e=[];for(var r=0,o=t.length;o>r;r++)e[r]=n.clone(t[r]);return e}if(t instanceof Object){e={};for(var a in t)t.hasOwnProperty(a)&&(e[a]=n.clone(t[a]));return e}return t},r.pp.path=function(t,e,o){return"path"in r.dom||(r.dom.path=function(t,e,r){var n,o,a=[];for(n=0,o=t._vE.path.d.length;o>n;n++){a[n]=[];for(var i=0;2>i;i++)a[n].push(t._vS.path.d[n][i]+(t._vE.path.d[n][i]-t._vS.path.d[n][i])*r)}t._el.setAttribute("d",1===r?t._vE.path.o:"M"+a.join("L")+"Z")}),n.getPath(e)},r.prS.path=function(t,e,r){return t.getAttribute("d")},n.getDraw=function(t,e){var o,a,i,s,p=t.getTotalLength();return e instanceof Object?e:("string"==typeof e?(e=e.split(/\,|\s/),o=/%/.test(e[0])?n.percent(h(e[0]),p):parseFloat(e[0]),a=/%/.test(e[1])?n.percent(h(e[1]),p):parseFloat(e[1])):"undefined"==typeof e&&(s=parseFloat(r.gCS(t,"strokeDashoffset")),i=r.gCS(t,"strokeDasharray").split(/\,/),o=0-s,a=parseFloat(i[0])+o||p),{s:o,e:a,l:p})},n.percent=function(t,e){return parseFloat(t)/100*e},r.pp.draw=function(t,e,o){return"draw"in r.dom||(r.dom.draw=function(t,e,r){var n,o,a,i;n=t._vS.draw.l,o=t._vS.draw.s+(t._vE.draw.s-t._vS.draw.s)*r,a=t._vS.draw.e+(t._vE.draw.e-t._vS.draw.e)*r,i=0-o,t._el.style.strokeDashoffset=i+"px",t._el.style.strokeDasharray=1>a+i?"0px, "+n+"px":a+i+"px, "+n+"px"}),n.getDraw(o,e)},r.prS.draw=function(t,e,r){return n.getDraw(t)};for(var p=0,u=s.length;u>p;p++)e=s[p],r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,n){var o={};for(var a in t._vE[e])"a"!==a?o[a]=parseInt(t._vS[e][a]+(t._vE[e][a]-t._vS[e][a])*n)||0:o[a]=t._vS[e][a]&&t._vE[e][a]?parseFloat(t._vS[e][a]+(t._vE[e][a]-t._vS[e][a])*n):null;t._hex?t._el.style[e]=r.rth(o.r,o.g,o.b):t._el.style[e]=o.a?"rgba("+o.r+","+o.g+","+o.b+","+o.a+")":"rgb("+o.r+","+o.g+","+o.b+")"}),r.truC(e)},r.prS[e]=function(t,e,n){return r.gCS(t,e)||"rgba(0,0,0,0)"};for(var p=0,u=i.length;u>p;p++)e=i[p],"strokeWidth"===e?r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vS[e].unit}),r.pp.box(t,e)}:r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r}),r.pp.unl(t,e)},r.prS[e]=function(t,e,n){return r.gCS(t,e)||0};return n}});
\ No newline at end of file
diff --git a/kute-attr.js b/kute-attr.js
new file mode 100644
index 0000000..323f2f6
--- /dev/null
+++ b/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/kute-css.js b/kute-css.js
new file mode 100644
index 0000000..793d46f
--- /dev/null
+++ b/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 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
Date: Wed, 16 Mar 2016 15:44:23 +0200
Subject: [PATCH 095/471] 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 3a7857bbe5a0608d185b8bc9826bf74e9b78c022 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 16 Mar 2016 16:28:07 +0200
Subject: [PATCH 096/471]

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

diff --git a/demo/svg.html b/demo/svg.html
index eb3fba0..b94beb2 100644
--- a/demo/svg.html
+++ b/demo/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 ba36c3bf310bc766caacf084075e7dd87884a494 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 16 Mar 2016 16:28:07 +0200
Subject: [PATCH 097/471]

---
 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 afdfa1ae49d1e708c8a5e4d1094099704405442b Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 17 Mar 2016 09:00:32 +0200
Subject: [PATCH 098/471] typo

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

diff --git a/demo/extend.html b/demo/extend.html
index 1458934..d73d024 100644
--- a/demo/extend.html
+++ b/demo/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/demo/css.html b/demo/css.html
index 44cd036..c0b5a45 100644
--- a/demo/css.html
+++ b/demo/css.html
@@ -60,6 +60,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             
@@ -68,6 +69,7 @@
                 
diff --git a/demo/easing.html b/demo/easing.html
index 6d72c3f..312ec81 100644
--- a/demo/easing.html
+++ b/demo/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/demo/examples.html b/demo/examples.html
index c21fd37..6b64764 100644
--- a/demo/examples.html
+++ b/demo/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/demo/extend.html b/demo/extend.html
index 1547b15..5c2b3a5 100644
--- a/demo/extend.html
+++ b/demo/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/demo/features.html b/demo/features.html
index 647a968..a214d9e 100644
--- a/demo/features.html
+++ b/demo/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/demo/index.html b/demo/index.html
index ddee711..314739e 100644
--- a/demo/index.html
+++ b/demo/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/demo/options.html b/demo/options.html
new file mode 100644
index 0000000..65310af
--- /dev/null
+++ b/demo/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/demo/properties.html b/demo/properties.html
index 595829c..e0b557e 100644
--- a/demo/properties.html
+++ b/demo/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/demo/src/kute-css.js b/demo/src/kute-css.js
index 793d46f..12d6261 100644
--- a/demo/src/kute-css.js
+++ b/demo/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/demo/start.html b/demo/start.html
index 1f274a5..ab0e7a7 100644
--- a/demo/start.html
+++ b/demo/start.html
@@ -61,6 +61,7 @@
                     
      • Core Engine
        • 
                     
      • CSS Plugin 
        • 
                     
      • SVG Plugin 
        • 
+                    
      • Text Plugin 
        • 
                     
      • Attributes Plugin 
        • 
                 
      
             			
@@ -69,6 +70,7 @@
                 
diff --git a/demo/svg.html b/demo/svg.html
index b94beb2..6f76842 100644
--- a/demo/svg.html
+++ b/demo/svg.html
@@ -59,6 +59,7 @@
                     
    • Core Engine
      • 
                     
    • CSS Plugin 
      • 
                     
    • SVG Plugin 
      • 
+                    
    • Text Plugin 
      • 
                     
    • Attributes Plugin 
      • 
                 
    
             
@@ -67,6 +68,7 @@
                 
diff --git a/demo/text.html b/demo/text.html
new file mode 100644
index 0000000..2e686ee
--- /dev/null
+++ b/demo/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
diff --git a/dist/kute-bezier.min.js b/dist/kute-bezier.min.js
index 7d2686d..fd242f2 100644
--- a/dist/kute-bezier.min.js
+++ b/dist/kute-bezier.min.js
@@ -1,2 +1,2 @@
-// bezier easing for KUTE.js | dnp_theme | MIT License
+// Bezier Easing Functions for KUTE.js | dnp_theme | MIT License
 !function(n){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return n(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=n(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");window.KUTE.Ease=window.KUTE.Ease||n(e)}}(function(n){"use strict";var e=e||{};e.Bezier=function(n,e,r,u){return t.pB(n,e,r,u)};var t=e.Bezier.prototype;return t.ni=4,t.nms=.001,t.sp=1e-7,t.smi=10,t.ksts=11,t.ksss=1/(t.ksts-1),t.f32as="Float32Array"in window,t.msv=t.f32as?new Float32Array(t.ksts):new Array(t.ksts),t.A=function(n,e){return 1-3*e+3*n},t.B=function(n,e){return 3*e-6*n},t.C=function(n){return 3*n},t.r={},t.pB=function(n,e,r,u){this._p=!1;var i=this;return t.r=function(s){return i._p||t.pc(n,r,e,u),n===e&&r===u?s:0===s?0:1===s?1:t.cB(t.gx(s,n,r),e,u)},t.r},t.cB=function(n,e,r){return((t.A(e,r)*n+t.B(e,r))*n+t.C(e))*n},t.gS=function(n,e,r){return 3*t.A(e,r)*n*n+2*t.B(e,r)*n+t.C(e)},t.bS=function(n,e,r,u,i){var s,o,c=0,f=t.sp,a=t.smi;do o=e+(r-e)/2,s=t.cB(o,u,i)-n,s>0?r=o:e=o;while(Math.abs(s)>f&&++ci;++i){var o=t.gS(e,r,u);if(0===o)return e;var c=t.cB(e,r,u)-n;e-=c/o}return e},t.csv=function(n,e){var r=0,u=t.ksts;for(r;u>r;++r)t.msv[r]=t.cB(r*t.ksss,n,e)},t.gx=function(n,e,r){for(var u=0,i=1,s=t.ksts-1;i!=s&&t.msv[i]<=n;++i)u+=t.ksss;--i;var o=(n-t.msv[i])/(t.msv[i+1]-t.msv[i]),c=u+o*t.ksss,f=t.gS(c,e,r),a=u+t.ksss;return f>=t.nms?t.nri(n,c,e,r):0===f?c:t.bS(n,u,a,e,r)},t.pc=function(n,e,r,u){this._p=!0,(n!=r||e!=u)&&t.csv(n,e)},e.easeIn=function(){return t.pB(.42,0,1,1)},e.easeOut=function(){return t.pB(0,0,.58,1)},e.easeInOut=function(){return t.pB(.5,.16,.49,.86)},e.easeInSine=function(){return t.pB(.47,0,.745,.715)},e.easeOutSine=function(){return t.pB(.39,.575,.565,1)},e.easeInOutSine=function(){return t.pB(.445,.05,.55,.95)},e.easeInQuad=function(){return t.pB(.55,.085,.68,.53)},e.easeOutQuad=function(){return t.pB(.25,.46,.45,.94)},e.easeInOutQuad=function(){return t.pB(.455,.03,.515,.955)},e.easeInCubic=function(){return t.pB(.55,.055,.675,.19)},e.easeOutCubic=function(){return t.pB(.215,.61,.355,1)},e.easeInOutCubic=function(){return t.pB(.645,.045,.355,1)},e.easeInQuart=function(){return t.pB(.895,.03,.685,.22)},e.easeOutQuart=function(){return t.pB(.165,.84,.44,1)},e.easeInOutQuart=function(){return t.pB(.77,0,.175,1)},e.easeInQuint=function(){return t.pB(.755,.05,.855,.06)},e.easeOutQuint=function(){return t.pB(.23,1,.32,1)},e.easeInOutQuint=function(){return t.pB(.86,0,.07,1)},e.easeInExpo=function(){return t.pB(.95,.05,.795,.035)},e.easeOutExpo=function(){return t.pB(.19,1,.22,1)},e.easeInOutExpo=function(){return t.pB(1,0,0,1)},e.easeInCirc=function(){return t.pB(.6,.04,.98,.335)},e.easeOutCirc=function(){return t.pB(.075,.82,.165,1)},e.easeInOutCirc=function(){return t.pB(.785,.135,.15,.86)},e.easeInBack=function(){return t.pB(.6,-.28,.735,.045)},e.easeOutBack=function(){return t.pB(.175,.885,.32,1.275)},e.easeInOutBack=function(){return t.pB(.68,-.55,.265,1.55)},e.slowMo=function(){return t.pB(0,.5,1,.5)},e.slowMo1=function(){return t.pB(0,.7,1,.3)},e.slowMo2=function(){return t.pB(0,.9,1,.1)},e});
\ No newline at end of file
diff --git a/dist/kute-jquery.min.js b/dist/kute-jquery.min.js
index 8be754f..7b6ebfa 100644
--- a/dist/kute-jquery.min.js
+++ b/dist/kute-jquery.min.js
@@ -1,2 +1,2 @@
-// KUTE jQuery Plugin for KUTE.js | by dnp_theme | License - MIT
+// jQuery Plugin for KUTE.js | by dnp_theme | License - MIT
 !function(e){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(n,i){return e(i,n),n});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),i=require("jquery");module.exports=e(i,n)}else{if("undefined"==typeof window.KUTE||"undefined"==typeof window.$&&"undefined"==typeof window.jQuery)throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");var i=window.jQuery||window.$,n=window.KUTE;i.fn.KUTE=e(i,n)}}(function(e,n){"use strict";var i=function(e,i,o,t){var r,u=[],f=this.length;for(r=0;f>r;r++){var d=this[r][e];"function"==typeof d&&d.apply(this[r]),"to"===e?u.push(new n[e](this[r],i,o)):"fromTo"===e||"Animate"===e?u.push(new n[e](this[r],i,o,t)):"chain"===e&&this[r].chain.apply(this[r],i)}return u};return i});
\ No newline at end of file
diff --git a/dist/kute-physics.min.js b/dist/kute-physics.min.js
index 4c6e359..2e96ab1 100644
--- a/dist/kute-physics.min.js
+++ b/dist/kute-physics.min.js
@@ -1,2 +1,2 @@
-// dynamics easings KUTE.js | dnp_theme | MIT License 
+// Physics Easings KUTE.js | dnp_theme | MIT License 
 !function(n){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return n(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=n(r)}else{if("undefined"==typeof window.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.");window.KUTE.Physics=window.KUTE.Physics||n(r)}}(function(n){"use strict";var r=r||{},t=Math.PI/2;r.spring=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),t=Math.pow(20,(n.friction||200)/100),i=n.anticipationStrength||0,o=(n.anticipationSize||0)/1e3;return e.run=function(n){var u,c,a,f,p,y,s,h;return y=n/(1-o)-o/(1-o),o>n?(h=o/(1-o)-o/(1-o),s=0/(1-o)-o/(1-o),p=Math.acos(1/e.A1(n,h)),a=(Math.acos(1/e.A1(n,s))-p)/(r*-o),u=e.A1):(u=e.A2,p=0,a=1),c=u(y,o,i,t),f=r*(n-o)*a+p,1-c*Math.cos(f)},e.run};var e=r.spring.prototype;e.run={},e.A1=function(n,r,t){var e,i,o,u;return o=r/(1-r),u=0,i=(o-.8*u)/(o-u),e=(.8-i)/o,e*n*t/100+i},e.A2=function(n,r,t,e){return Math.pow(e/10,-n)*(1-n)},r.bounce=function(n){n=n||{};var r=Math.max(1,(n.frequency||300)/20),e=Math.pow(20,(n.friction||200)/100);return i.run=function(n){var i=Math.pow(e/10,-n)*(1-n),o=r*n*1+t;return i*Math.cos(o)},i.run};var i=r.bounce.prototype;i.run={},r.gravity=function(n){var r,t,e,i,u;return n=n||{},r=(n.bounciness||400)/1250,e=(n.elasticity||200)/1e3,u=n.initialForce||!1,i=100,t=[],o.L=function(){var n,t;for(n=Math.sqrt(2/i),t={a:-n,b:n,H:1},u&&(t.a=0,t.b=2*t.b);t.H>.001;)o.L=t.b-t.a,t={a:t.b,b:t.b+o.L*r,H:t.H*r*r};return t.b}(),function(){var n,c,a,f;for(c=Math.sqrt(2/(i*o.L*o.L)),a={a:-c,b:c,H:1},u&&(a.a=0,a.b=2*a.b),t.push(a),n=o.L,f=[];a.b<1&&a.H>.001;)n=a.b-a.a,a={a:a.b,b:a.b+n*r,H:a.H*e},f.push(t.push(a));return f}(),o.fn=function(r){var e,i,c;for(i=0,e=t[i];!(r>=e.a&&r<=e.b)&&(i+=1,e=t[i]););return c=e?o.getPointInCurve(e.a,e.b,e.H,r,n,o.L):u?0:1},o.fn};var o=r.gravity.prototype;o.L={},o.fn={},o.getPointInCurve=function(n,r,t,e,i,o){var u,c;return o=r-n,c=2/o*e-1-2*n/o,u=c*c*t-t+1,i.initialForce&&(u=1-u),u},r.forceWithGravity=function(n){var t=n||{};return t.initialForce=!0,r.gravity(t)},r.bezier=function(n){n=n||{};var r=n.points,t=!1,e=[];return function(){var n,t;for(n in r){if(t=parseInt(n),t>=r.length-1)break;u.fn(r[t],r[t+1],e)}return e}(),u.run=function(n){return 0===n?0:1===n?1:u.yForX(n,e,t)},u.run};var u=r.bezier.prototype;return u.B2={},u.run={},u.fn=function(n,r,t){var e=function(t){return u.Bezier(t,n,n.cp[n.cp.length-1],r.cp[0],r)};return t.push(e)},u.Bezier=function(n,r,t,e,i){return{x:Math.pow(1-n,3)*r.x+3*Math.pow(1-n,2)*n*t.x+3*(1-n)*Math.pow(n,2)*e.x+Math.pow(n,3)*i.x,y:Math.pow(1-n,3)*r.y+3*Math.pow(1-n,2)*n*t.y+3*(1-n)*Math.pow(n,2)*e.y+Math.pow(n,3)*i.y}},u.yForX=function(n,r,t){var e,i,o,u,c,a,f,p,y=0,s=r.length;for(e=null,y;s>y&&(i=r[y],n>=i(0).x&&n<=i(1).x&&(e=i),null===e);y++);if(!e)return t?0:1;for(p=1e-4,u=0,a=1,c=(a+u)/2,f=e(c).x,o=0;Math.abs(n-f)>p&&100>o;)n>f?u=c:a=c,c=(a+u)/2,f=e(c).x,o++;return e(c).y},r.physicsInOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.92-t/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+t/1e3,y:1}]}]})},r.physicsIn=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.92-t/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},r.physicsOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+t/1e3,y:1}]}]})},r.physicsBackOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+t/1e3,y:1.3}]}]})},r.physicsBackIn=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.28-t/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},r.physicsBackInOut=function(n){var t;return n=n||{},t=n.friction||500,r.bezier({points:[{x:0,y:0,cp:[{x:.68-t/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+t/1e3,y:1.45}]}]})},r});
\ No newline at end of file
diff --git a/dist/kute-text.min.js b/dist/kute-text.min.js
new file mode 100644
index 0000000..5cb4c7d
--- /dev/null
+++ b/dist/kute-text.min.js
@@ -0,0 +1,2 @@
+// Text Plugin for KUTE.js | dnp_theme & @dalisoft | 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("Text-Plugin requires KUTE.js.");t()}}(function(){var t=window.KUTE,e=String("abcdefghijklmnopqrstuvwxyz").split(""),n=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),r=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),i=String("0123456789").split(""),o=e.concat(n,i),u=o.concat(r),s=Math.random,a=Math.floor,p=Math.min;return t.prS.text=t.prS.number=function(t,e,n){return t.innerHTML},t.pp.text=function(f,l,h){return"text"in t.dom||(t.dom.text=function(t,f,l){var h=h||"alpha"===t.textChars?e:"upper"===t.textChars?n:"numeric"===t.textChars?i:"alphanumeric"===t.textChars?o:"symbols"===t.textChars?r:"all"===t.textChars?u:t.textChars?t.textChars.split(""):e,c=h.length,m=t._vE[f],d=h[a(s()*c)],x="",g=m.substring(0);x=g.substring(0,a(p(l*g.length,g.length))),t._el.innerHTML=1>l?x+d:x}),l},t.pp.number=function(e,n,r){return"number"in t.dom||(t.dom.number=function(t,e,n){t._el.innerHTML=parseInt(t._vS[e]+(t._vE[e]-t._vS[e])*n)}),parseInt(n)||0},this});
\ No newline at end of file
diff --git a/kute-css.js b/kute-css.js
index 793d46f..12d6261 100644
--- a/kute-css.js
+++ b/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

From ac8f5ebe058db01b0c3a71422c723fa2b93fdb21 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 18 Mar 2016 16:23:23 +0200
Subject: [PATCH 103/471] Added Text Plugin, updated docs

---
 about.html          |  14 +++-
 api.html            |  54 +------------
 assets/css/kute.css |   9 ++-
 assets/js/css.js    |  10 +--
 assets/js/home.js   |  22 +++++-
 assets/js/text.js   |  35 +++++++++
 attr.html           |   2 +
 css.html            |   2 +
 easing.html         |   4 +-
 examples.html       |   4 +-
 extend.html         |   5 +-
 features.html       |   6 +-
 index.html          |  21 +++---
 options.html        | 179 ++++++++++++++++++++++++++++++++++++++++++++
 properties.html     |  13 +++-
 src/kute-css.js     |  10 +--
 src/kute-text.js    |  61 +++++++++++++++
 start.html          |   2 +
 svg.html            |   2 +
 text.html           | 170 +++++++++++++++++++++++++++++++++++++++++
 20 files changed, 539 insertions(+), 86 deletions(-)
 create mode 100644 assets/js/text.js
 create mode 100644 options.html
 create mode 100644 src/kute-text.js
 create mode 100644 text.html

diff --git a/about.html b/about.html
index 0a49d52..048028d 100644
--- a/about.html
+++ b/about.html
@@ -50,6 +50,7 @@
                     
  • Core Engine
    • 
                     
  • CSS Plugin 
    • 
                     
  • SVG Plugin 
    • 
+                    
  • Text Plugin 
    • 
                     
  • Attributes Plugin 
    • 
                 
             
@@ -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 bf2574d08215ef8ee72eed2e7b39d0828d8164ca Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 18 Mar 2016 19:13:28 +0200 Subject: [PATCH 104/471] Update README.md --- README.md | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a4a39c1..20e4a14 100644 --- a/README.md +++ b/README.md @@ -21,17 +21,30 @@ You can install this through NPM or bower respectively: You can use this module through any of the common javascript module systems. For instance: ```javascript -// NodeJS/CommonJS style +// CommonJS style +//grab the core var kute = require("kute.js"); +// Add SVG Plugin +require("kute.js/kute-svg"); +// Add CSS Plugin +require("kute.js/kute-css"); +// Add Attributes Plugin +require("kute.js/kute-attr"); +// Add Text Plugin +require("kute.js/kute-text"); // Add Bezier Easing require("kute.js/kute-bezier"); // Add Physics Easing require("kute.js/kute-physics"); -// AMD +// AMD style define([ - "kute.js", + "kute.js", // core engine "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){ From 41e87cc4b2e324411ce18b19d1d2f9e7bb832439 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 18 Mar 2016 19:18:55 +0200 Subject: [PATCH 105/471] --- demo/start.html | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/demo/start.html b/demo/start.html index ab0e7a7..8159b2c 100644 --- a/demo/start.html +++ b/demo/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 c1e1d06a9f6478ca6259f0d00e2f0f480bd2b8f6 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 18 Mar 2016 19:18:55 +0200 Subject: [PATCH 106/471] --- 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 35dc80161bc87efc236f2e4cfe01985f21b35623 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 19 Mar 2016 10:08:34 +0200 Subject: [PATCH 107/471] minor IE8 demo fix --- demo/assets/css/kute.css | 1 + 1 file changed, 1 insertion(+) diff --git a/demo/assets/css/kute.css b/demo/assets/css/kute.css index 676cc0f..f268748 100644 --- a/demo/assets/css/kute.css +++ b/demo/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 b7b82afb6ca1e2c7fc3213a3072d6672dd46c51b Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 19 Mar 2016 10:08:34 +0200 Subject: [PATCH 108/471] 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 d24f73d811d87badb5a39db3a42b847459d4b201 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 23 Mar 2016 15:20:11 +0200 Subject: [PATCH 109/471] Update README.md --- README.md | 118 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 75 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index 20e4a14..371289d 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,83 @@ # KUTE.js A minimal native Javascript tweening engine with jQuery plugin, with most essential options for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. -Important: starting with 0.9.5 version, KUTE.js changes the prototype structure for performance, usability and browser support, as well as extensibility. The documentation and examples no longer support old versions prior to 0.9.5 release. +# Demo / CDN +For documentation, examples and other cool tips, check the demo. Thanks to jsdelivr, we have a CDN link here. -# CDN -Thanks to jsdelivr, we have a CDN link here. +# Core Engine - [visit page](http://thednp.github.io/kute.js/examples.html) +* tween object methods: `.to()`, `.fromTo()`, `.allTo()`, `.allFromTo()` +* tween control methods: `.start()`, `.stop()`, `.play()` +* 2D and 3D transforms: all except `matrix`, `matrix3d`, `scale3d`, `rotate3d` +* box model properties: `top`, `left`, `width`, `height` +* colors: `color`, `backgroundColor` +* scroll: vertical scroll animation for `window` or any element with `overflow: auto|scroll` +* Robert Penner's easing functions +* extensible prototypes and utility methods + +# SVG Plugin - [visit page](http://thednp.github.io/kute.js/svg.html) +* morphs SVGs with the `path` tween property, updating the `d` attribute of `` or `` elements +* draws SVGs with the `draw` tween property for `` elements +* SVG related color CSS properties such as: `fill`, `stroke`, `stopColor` +* other SVG CSS properties: `strokeWidth`, `stopOpacity` + +# CSS Plugin - [visit page](http://thednp.github.io/kute.js/css.html) +* fills the box model supported properties: `margin`, `padding`, variations like `marginTop`, all variations for `width` or `height` like `maxHeight`, `outlineWidth`, then `borderWidth` with side variations, except short-hand notations +* `borderRadius` properties radius +* adds support for more color properties: `outlineColor`, `borderColor` or side variations, etc +* the `clip` property only for `rect` type of values +* the + +# Text Plugin - [visit page](http://thednp.github.io/kute.js/text.html) +* animated number increments/decreases +* writing text with a cool effect + +# Attributes Plugin - [visit page](http://thednp.github.io/kute.js/attr.html) +* animates any numeric presentation attribute with suffixed value +* animates any other non-suffixed numeric presentation attribute + +# Easing Functions - [visit page](http://thednp.github.io/kute.js/easing.html) +* optimized dynamics easing functions +* optimized cubic bezier easing functions + +# jQuery Plugin +This aims to make the KUTE.js script work native within other jQuery apps but it's not always really needed as we will see in the second subchapter here. Since the demos don't insist on this particulat plugin, we'll write some basics right here. + +The plugin is just a few bits of code to bridge all of the the awesome `kute.js` methods to your jQuery apps. The plugin can be found in the [/master](https://github.com/thednp/kute.js/blob/master/kute-jquery.js) folder. So let's have a look at the syntax. + +## Using the jQuery Plugin +Here's a KUTE.js jQuery Plugin example that showcases most common usage in future apps: +```javascript +// first we define the object(s) +var tween = $('selector').KUTE('fromTo', // apply fromTo() method to selector + + { translate: 0, opacity: 1 }, // fromValues + { translate: 150, opacity: 0 }, // toValues + + // tween options object + { duration: 500, delay: 0, easing : 'exponentialInOut', // basic options + + //callbacks + start: functionOne, // run function when tween starts + complete: functionTwo, // run function when tween animation is finished + update: functionThree // run function while tween running + stop: functionThree // run function when tween stopped + pause: functionThree // run function when tween paused + resume: functionThree // run function when resuming tween + } +); + +// then we apply the tween control methods, like start +$(tween).KUTE('start'); +``` + +## Alternative usage in jQuery powered applications +In some cases you can handle animations inside jQuery applications even without the plugin. Here's how the code could look like: +```javascript +var tween = KUTE.fromTo($('selector')[0], fromValues, toValues, options); +tween.start(); +``` +Pay attention to that `$('selector')[0]` as jQuery always creates an array of selected objects and not a single object, that is why we need to focus a tween object to a single HTML object and not a selection of objects. Selections of objects should be handled with `for() {}` loops if that is the case, while the jQuery Plugin handles this properly for your app, as you would expect it to. -# Demo -For documentation, examples and other cool tips, check the demo. # NPM/Bower You can install this through NPM or bower respectively: @@ -85,44 +155,6 @@ KUTE.fromTo(el, ).start(); // this is to start animation right away ``` -# jQuery Plugin -This aims to make the KUTE.js script work native within other jQuery apps but it's not always really needed as we will see in the second subchapter here. The plugin is just a few bits of code to bridge all of the the awesome `kute.js` methods to your jQuery apps. The plugin can be found in the [/master](https://github.com/thednp/kute.js/blob/master/kute-jquery.js) folder. So let's have a look at the syntax. - -## Using the jQuery Plugin -Here's a KUTE.js jQuery Plugin example that showcases most common usage in future apps: -```javascript -// first we define the object(s) -var tween = $('selector').KUTE('fromTo', // apply fromTo() method to selector - - { translate: 0, opacity: 1 }, // fromValues - { translate: 150, opacity: 0 }, // toValues - - // tween options object - { duration: 500, delay: 0, easing : 'exponentialInOut', // basic options - - //callbacks - start: functionOne, // run function when tween starts - complete: functionTwo, // run function when tween animation is finished - update: functionThree // run function while tween running - stop: functionThree // run function when tween stopped - pause: functionThree // run function when tween paused - resume: functionThree // run function when resuming tween - } -); - -// then we apply the tween control methods, like start -$(tween).KUTE('start'); -``` - -## Alternative usage in jQuery powered applications -In some cases you can handle animations inside jQuery applications even without the plugin. Here's how the code could look like: -```javascript -var tween = KUTE.fromTo($('selector')[0], fromValues, toValues, options); -tween.start(); -``` -Pay attention to that `$('selector')[0]` as jQuery always creates an array of selected objects and not a single object, that is why we need to focus a tween object to a single HTML object and not a selection of objects. Selections of objects should be handled with `for() {}` loops if that is the case, while the jQuery Plugin handles this properly for your app, as you would expect it to. - - # How it works * it computes all the values before starting the animation, then caches them to avoid layout thrashing that occur during animation * handles all kinds of `transform` properties and makes sure to always use the same order of the `transform` properties (`translate`, `rotate`, `skew`, `scale`) From 49a418b24ec606d4c76b7e5786261aa86c3ead2c Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 23 Mar 2016 15:24:58 +0200 Subject: [PATCH 110/471] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 371289d..f3413df 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,12 @@ For documentation, examples and other cool tips, check the demo. Thanks to jsdelivr, we have a CDN link here. From 97b6608392a8c3ed57e7bff511b64b908e86908a Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 12:57:02 +0200 Subject: [PATCH 112/471] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index aca8ae2..70321d6 100644 --- a/README.md +++ b/README.md @@ -22,11 +22,11 @@ For documentation, examples and other cool tips, check the Date: Thu, 24 Mar 2016 14:27:27 +0200 Subject: [PATCH 113/471] Final version 1.5 commit. --- demo/assets/js/svg.js | 46 +++++++-- demo/css.html | 2 +- demo/extend.html | 8 ++ demo/properties.html | 12 +-- demo/src/kute-svg.js | 186 ++++++++++++++++++++++----------- demo/src/kute.js | 234 ++++++++++++++++++++---------------------- demo/svg.html | 158 ++++++++++++++++++---------- dist/kute-svg.min.js | 2 +- dist/kute.min.js | 2 +- kute-jquery.js | 2 +- kute-svg.js | 186 ++++++++++++++++++++++----------- kute.js | 234 ++++++++++++++++++++---------------------- 12 files changed, 637 insertions(+), 435 deletions(-) diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js index 1d12629..16982c4 100644 --- a/demo/assets/js/svg.js +++ b/demo/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/demo/css.html b/demo/css.html index c0b5a45..6d4aa87 100644 --- a/demo/css.html +++ b/demo/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/demo/extend.html b/demo/extend.html index 5c2b3a5..111a18e 100644 --- a/demo/extend.html +++ b/demo/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/demo/properties.html b/demo/properties.html index e0b557e..75c9ba6 100644 --- a/demo/properties.html +++ b/demo/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/demo/src/kute-svg.js b/demo/src/kute-svg.js index fd9be6e..fa9eab8 100644 --- a/demo/src/kute-svg.js +++ b/demo/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

    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.

    diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js index 34e3881..922e36a 100644 --- a/dist/kute-svg.min.js +++ b/dist/kute-svg.min.js @@ -1,2 +1,2 @@ // SVG Plugin for KUTE.js | dnp_theme | 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.KUTE,n=n||{},o=document.getElementsByTagName("path")[0],a=o&&o.ownerSVGElement&&o.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",i=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],s=["fill","stroke","stopColor"],h=function(t){return String.prototype.trim?t.trim():t.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")};if(!o||o.ownerSVGElement){n.getPath=function(t){var e={},r="object"==typeof t?t:/^\.|^\#/.test(t)?document.querySelector(t):null;if(r&&/path|glyph/.test(r.tagName))e.e=n.forcePath(r),e.o=r.getAttribute("d");else if(!r&&/[a-z][^a-z]*/gi.test(t)){var o=n.createPath(h(t));e.e=o,e.o=t}return e},n.pathCross=function(t){this._mpr=t.morphPrecision||25,this._midx=t.morphIndex,this._smi=t.showMorphInfo,this._rv1=t.reverseFirstPath,this._rv2=t.reverseSecondPath;var e,r=n.getOnePath(t._vS.path.o),o=n.getOnePath(t._vE.path.o);e=n._pathCross(r,o),t._vS.path.d=e[0],t._vE.path.d=e[1]},n._pathCross=function(t,e){t=n.createPath(t),e=n.createPath(e);var r,o=n.getSegments(t,e,this._mpr),a=o[0],i=o[1],s=i.length;if(this._rv1&&a.reverse(),this._rv2&&i.reverse(),this._smi&&(r=n.getBestIndex(a,i)),this._midx){var h=i.splice(this._midx,s-this._midx);i=h.concat(i)}return this._smi&&console.log("KUTE.js Path Morph Log\nThe morph used "+s+" 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 "+r+".\n":"You may also consider a morphIndex for the second path. Currently the best index seems to be "+r+".\n")+(this._rv1||this._rv2?"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"):"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.")),t=e=null,[a,i]},n.getSegments=function(t,e,r){for(var n=[],o=[],a=t.getTotalLength(),i=e.getTotalLength(),s=Math.max(a,i),h=s/r,p=0,u=h*r;(p+=r)r;r++)o=h.splice(r,l-r),h=o.concat(h),a=Math.abs(s[r][0]-h[r][0]),i=Math.abs(s[r][1]-h[r][1]),p.push(Math.sqrt(a*a+i*i)),u.push(h),h=[],h=n.clone(e),o=null;return p.indexOf(Math.min.apply(null,p))},n.getOnePath=function(t){var e=t.split(/z/i);return e.length>2?h(e[0])+"z":h(t)},n.createPath=function(t){var e=document.createElementNS(a,"path"),r="object"==typeof t?t.getAttribute("d"):t;return e.setAttribute("d",r),e},n.forcePath=function(t){if("glyph"===t.tagName){var e=n.createPath(t);return t.parentNode.appendChild(e),e}return t},n.clone=function(t){var e;if(t instanceof Array){e=[];for(var r=0,o=t.length;o>r;r++)e[r]=n.clone(t[r]);return e}if(t instanceof Object){e={};for(var a in t)t.hasOwnProperty(a)&&(e[a]=n.clone(t[a]));return e}return t},r.pp.path=function(t,e,o){return"path"in r.dom||(r.dom.path=function(t,e,r){var n,o,a=[];for(n=0,o=t._vE.path.d.length;o>n;n++){a[n]=[];for(var i=0;2>i;i++)a[n].push(t._vS.path.d[n][i]+(t._vE.path.d[n][i]-t._vS.path.d[n][i])*r)}t._el.setAttribute("d",1===r?t._vE.path.o:"M"+a.join("L")+"Z")}),n.getPath(e)},r.prS.path=function(t,e,r){return t.getAttribute("d")},n.getDraw=function(t,e){var o,a,i,s,p=t.getTotalLength();return e instanceof Object?e:("string"==typeof e?(e=e.split(/\,|\s/),o=/%/.test(e[0])?n.percent(h(e[0]),p):parseFloat(e[0]),a=/%/.test(e[1])?n.percent(h(e[1]),p):parseFloat(e[1])):"undefined"==typeof e&&(s=parseFloat(r.gCS(t,"strokeDashoffset")),i=r.gCS(t,"strokeDasharray").split(/\,/),o=0-s,a=parseFloat(i[0])+o||p),{s:o,e:a,l:p})},n.percent=function(t,e){return parseFloat(t)/100*e},r.pp.draw=function(t,e,o){return"draw"in r.dom||(r.dom.draw=function(t,e,r){var n,o,a,i;n=t._vS.draw.l,o=t._vS.draw.s+(t._vE.draw.s-t._vS.draw.s)*r,a=t._vS.draw.e+(t._vE.draw.e-t._vS.draw.e)*r,i=0-o,t._el.style.strokeDashoffset=i+"px",t._el.style.strokeDasharray=1>a+i?"0px, "+n+"px":a+i+"px, "+n+"px"}),n.getDraw(o,e)},r.prS.draw=function(t,e,r){return n.getDraw(t)};for(var p=0,u=s.length;u>p;p++)e=s[p],r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,n){var o={};for(var a in t._vE[e])"a"!==a?o[a]=parseInt(t._vS[e][a]+(t._vE[e][a]-t._vS[e][a])*n)||0:o[a]=t._vS[e][a]&&t._vE[e][a]?parseFloat(t._vS[e][a]+(t._vE[e][a]-t._vS[e][a])*n):null;t._hex?t._el.style[e]=r.rth(o.r,o.g,o.b):t._el.style[e]=o.a?"rgba("+o.r+","+o.g+","+o.b+","+o.a+")":"rgb("+o.r+","+o.g+","+o.b+")"}),r.truC(e)},r.prS[e]=function(t,e,n){return r.gCS(t,e)||"rgba(0,0,0,0)"};for(var p=0,u=i.length;u>p;p++)e=i[p],"strokeWidth"===e?r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vS[e].unit}),r.pp.box(t,e)}:r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r}),r.pp.unl(t,e)},r.prS[e]=function(t,e,n){return r.gCS(t,e)||0};return n}}); \ 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("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||t(e)}}(function(t){"use strict";var e,r=window.KUTE,n=n||{},i=r.selector("path")||r.selector("svg"),o=i&&i.ownerSVGElement&&i.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",a=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],s=["fill","stroke","stopColor"],h=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim;if(!i||i.ownerSVGElement){n.gPt=function(t){var e={},r="object"==typeof t?t:/^\.|^\#/.test(t)?document.querySelector(t):null;if(r&&/path|glyph/.test(r.tagName))e.e=n.fPt(r),e.o=r.getAttribute("d");else if(!r&&/[a-z][^a-z]*/gi.test(t)){var i=n.cP(t.trim());e.e=i,e.o=t}return e},n.pCr=function(t){this._mpr=t.morphPrecision||25,this._midx=t.morphIndex,this._smi=t.showMorphInfo,this._rv1=t.reverseFirstPath,this._rv2=t.reverseSecondPath;var e,r=n.gOp(t._vS.path.o),i=n.gOp(t._vE.path.o);this._isp=!/[CSQTA]/i.test(r)&&!/[CSQTA]/i.test(i),e=n._pCr(r,i,t._el.parentNode),t._vS.path.d=e[0],t._vE.path.d=e[1]},n._pCr=function(t,e,r){var i,o,a,s,h,p,l,u,f,c,v,d,g=[];if(this._sp=!1,this._isp){t=n.pTA(t),e=n.pTA(e),h=Math.max(t.length,e.length),h===e.length?(p=t,l=e):(p=e,l=t),f=p.length,u=n.cP("M"+p.join("L")+"z"),c=u.getTotalLength()/h;for(var _=0;h>_;_++)v=u.getPointAtLength(c*_),d=n.gCP(c,v,p),g.push([d[0],d[1]]);h===e.length?(o=l,i=g):(i=l,o=g)}else t=n.cP(t),e=n.cP(e),a=n.gSegs(t,e,this._mpr),i=a[0],o=a[1],h=o.length;if(this._rv1&&i.reverse(),this._rv2&&o.reverse(),this._smi&&(s=n.gBi(i,o)),this._midx){var m=o.splice(this._midx,h-this._midx);o=m.concat(o)}if(this._smi){n.shP(i,o,r);var y=this._isp?"the polygon with the most points.\n":(25===this._mpr?"the default":"your")+" morphPrecision value of "+this._mpr+".\n";console.log("KUTE.js Path Morph Log\nThe morph used "+h+" points to draw both paths based on "+y+(this._midx?"You've configured the morphIndex to "+this._midx+" while the recommended is "+s+".\n":"You may also consider a morphIndex for the second path. Currently the best index seems to be "+s+".\n")+(this._rv1||this._rv2?"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"):"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."))}return t=e=null,[i,o]},n.gSegs=function(t,e,r){for(var n=[],i=[],o=t.getTotalLength(),a=e.getTotalLength(),s=Math.max(o,a),h=s/r,p=0,l=h*r;(p+=r)p;p++)n=Math.abs(r[p][0]-e.x),i=Math.abs(r[p][1]-e.y),h.push(Math.sqrt(n*n+i*i));return o=h.indexOf(Math.min.apply(null,h)),s=r[o-1]?o-1:l-1,a=r[o+1]?o+1:0,Math.abs(r[s][0]-e.x)p;p++){a=h[p],s=a.length,i=0===p?{f:"DeepPink",o:"HotPink"}:{f:"Lime",o:"LimeGreen"};for(var l=0;s>l;l++)n=document.createElementNS(o,"circle"),n.setAttribute("cx",a[l][0]),n.setAttribute("cy",a[l][1]),n.setAttribute("r",0===l?20:10),n.setAttribute("fill",0===l?i.f:i.o),this._isp?r.appendChild(n):this._isp||0!==l||r.appendChild(n)}this._sp=!0,n=null}},n.gBi=function(t,e){var r,i,o,a,s=n.clone(t),h=n.clone(e),p=[],l=e.length;for(r=0;l>r;r++)i=h.splice(r,l-r),h=i.concat(h),o=Math.abs(s[r][0]-h[r][0]),a=Math.abs(s[r][1]-h[r][1]),p.push(Math.sqrt(o*o+a*a)),h=[],h=n.clone(e),i=null;return p.indexOf(Math.min.apply(null,p))},n.gOp=function(t){var e=t.split(/z/i);return e.length>2?e[0].trim()+"z":t.trim()},n.cP=function(t){var e=document.createElementNS(o,"path"),r="object"==typeof t?t.getAttribute("d"):t;return e.setAttribute("d",r),e},n.fPt=function(t){if("glyph"===t.tagName){var e=n.cP(t);return t.parentNode.appendChild(e),e}return t},n.clone=function(t){var e;if(t instanceof Array){e=[];for(var r=0,i=t.length;i>r;r++)e[r]=n.clone(t[r]);return e}return t},n.pTA=function(t){for(var e,r,n=t.match(h),i=n.length,o=0,a=0,s=0;i>s;s++)n[s]=n[s],e=n[s][0],r=new RegExp(e+"[^\\d|\\-]*","i"),n[s]=n[s].replace(/(^|[^,])\s*-/g,"$1,-").replace(/(\s+\,|\s|\,)/g,",").replace(r,"").split(","),n[s][0]=parseFloat(n[s][0]),n[s][1]=parseFloat(n[s][1]),0===s?(o+=n[s][0],a+=n[s][1]):(o=n[s-1][0],a=n[s-1][1],/l/i.test(e)?(n[s][0]="l"===e?n[s][0]+o:n[s][0],n[s][1]="l"===e?n[s][1]+a:n[s][1]):/h/i.test(e)?(n[s][0]="h"===e?n[s][0]+o:n[s][0],n[s][1]=a):/v/i.test(e)&&(n[s][0]=o,n[s][1]="v"===e?n[s][0]+a:n[s][0]));return n},r.svq=function(t){t._vE.path&&n.pCr(t)},r.pp.path=function(t,e,i){return"path"in r.dom||(r.dom.path=function(t,e,r){var n,i,o=[];for(n=0,i=t._vE.path.d.length;i>n;n++){o[n]=[];for(var a=0;2>a;a++)o[n].push(t._vS.path.d[n][a]+(t._vE.path.d[n][a]-t._vS.path.d[n][a])*r)}t._el.setAttribute("d",1===r?t._vE.path.o:"M"+o.join("L")+"Z")}),n.gPt(e)},r.prS.path=function(t,e,r){return t.getAttribute("d")},n.gDr=function(t,e){var i,o,a,s,h=t.getTotalLength();return e instanceof Object?e:("string"==typeof e?(e=e.split(/\,|\s/),i=/%/.test(e[0])?n.pc(e[0].trim(),h):parseFloat(e[0]),o=/%/.test(e[1])?n.pc(e[1].trim(),h):parseFloat(e[1])):"undefined"==typeof e&&(s=parseFloat(r.gCS(t,"strokeDashoffset")),a=r.gCS(t,"strokeDasharray").split(/\,/),i=0-s,o=parseFloat(a[0])+i||h),{s:i,e:o,l:h})},n.pc=function(t,e){return parseFloat(t)/100*e},r.pp.draw=function(t,e,i){return"draw"in r.dom||(r.dom.draw=function(t,e,r){var n,i,o,a;n=t._vS.draw.l,i=t._vS.draw.s+(t._vE.draw.s-t._vS.draw.s)*r,o=t._vS.draw.e+(t._vE.draw.e-t._vS.draw.e)*r,a=0-i,t._el.style.strokeDashoffset=a+"px",t._el.style.strokeDasharray=1>o+a?"0px, "+n+"px":o+a+"px, "+n+"px"}),n.gDr(i,e)},r.prS.draw=function(t,e,r){return n.gDr(t)};for(var p=0,l=s.length;l>p;p++)e=s[p],r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,n){var i={};for(var o in t._vE[e])"a"!==o?i[o]=parseInt(t._vS[e][o]+(t._vE[e][o]-t._vS[e][o])*n)||0:i[o]=t._vS[e][o]&&t._vE[e][o]?parseFloat(t._vS[e][o]+(t._vE[e][o]-t._vS[e][o])*n):null;t._hex?t._el.style[e]=r.rth(i.r,i.g,i.b):t._el.style[e]=i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}),r.truC(e)},r.prS[e]=function(t,e,n){return r.gCS(t,e)||"rgba(0,0,0,0)"};for(var p=0,l=a.length;l>p;p++)e=a[p],"strokeWidth"===e?r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vS[e].unit}),r.pp.box(t,e)}:r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r}),r.pp.unl(t,e)},r.prS[e]=function(t,e,n){return r.gCS(t,e)||0};return n}}); \ No newline at end of file diff --git a/dist/kute.min.js b/dist/kute.min.js index f9b2716..2ba8def 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,2 @@ // KUTE.js | dnp_theme | 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";var t,e=e||{},n=[],r=Math.min;e.getPrefix=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;r>e;e++)if(i[e]in t.style)return n[e];t=null},e.property=function(t){var n=t in document.body.style?!1:!0,r=e.getPrefix();return n?r+(t.charAt(0).toUpperCase()+t.slice(1)):t},e.selector=function(t,e){var n;if(n=e?"object"==typeof t&&t.length?t:document.querySelectorAll(t):"object"==typeof t?t:/^#/.test(t)?document.getElementById(t.replace("#","")):document.querySelector(t),null===n&&"window"!==t)throw new TypeError("Element not found or incorrect selector: "+t);return n};for(var i=("ontouchstart"in window||navigator.msMaxTouchPoints||!1),s=i?"touchstart":"mousewheel",a="mouseenter",o=e.property("transformOrigin"),u=e.property("perspective"),l=e.property("perspectiveOrigin"),p=e.property("transform"),c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return setTimeout(t,16)},v=window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||function(t){return clearTimeout(t)},f=document.body,h=document.getElementsByTagName("HTML")[0],d=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?f:h,g=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,_=8===g,m=["color","backgroundColor"],w=["scrollTop","scroll"],y=["opacity"],E=["top","left","width","height"],T=["rotateX","rotateY","translateZ"],S=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],O=m.concat(w,y,E,S),x=O.length,b=b||{},C=0;x>C;C++){var I=O[C];-1!==m.indexOf(I)?b[I]="rgba(0,0,0,0)":-1!==E.indexOf(I)?b[I]=0:"translate3d"===I?b[I]=[0,0,0]:"translate"===I?b[I]=[0,0]:"rotate"===I||/X|Y|Z/.test(I)?b[I]=0:("scale"===I||"opacity"===I)&&(b[I]=1)}e.to=function(t,n,r){var i=e.selector(t),s=n,a=e.prP(n,{},i)[0];return r=r||{},r.rpr=!0,new e.Tween(i,s,a,r)},e.fromTo=function(t,n,r,i){var s=e.selector(t),a=e.prP(n,r,s),o=a[0],u=a[1];return i=i||{},new e.Tween(s,o,u,i)},e.allTo=function(t,n,r){var i=e.selector(t,!0);return new e.TweensTO(i,n,r)},e.allFromTo=function(t,n,r,i){var s=e.selector(t,!0);return new e.TweensFT(s,n,r,i)},e.dom={},e._u=function(t,n){if(n=n||window.performance.now(),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 a=0,o=t._cT.length;for(a;o>a;a++)t._cT[a].start(t._sT+t._dr);return t.close(),!1}return!0},e._tk=function(r){var i,s=0;for(t=c(e._tk);s<(i=n.length);)e._u(n[s],r)?s++:n.splice(s,1)},e.perspective=function(t,e){void 0!==e._to&&(t.style[o]=e._to),void 0!==e._ppo&&(t.style[l]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[u]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[l]=e._pppo)},e.getAll=function(){return n},e.removeAll=function(){n=[]},e.add=function(t){n.push(t)},e.remove=function(t){var e=n.indexOf(t);-1!==e&&n.splice(e,1)},e.s=function(){v(t),t=null},e._queue=function(t){for(var n in t._vE){var r=-1!==m.indexOf(n),i=-1!==E.indexOf(n),s=-1!==w.indexOf(n),a=-1!==y.indexOf(n),o="transform"===n;!i||n in e.dom?!o||n in e.dom?!r||n in e.dom?!s||n in e.dom?!a||n in e.dom||(_?e.dom[n]=function(t,e,n){t._el.style.filter="alpha(opacity="+100*(t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n)+")"}:e.dom[n]=function(t,e,n){t._el.style.opacity=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n}):e.dom[n]=function(t,e,n){t._el=void 0===t._el||null===t._el?d:t._el,t._el.scrollTop=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n}:e.dom[n]=function(t,n,r){var i={};for(var s in t._vE[n].value)"a"!==s?i[s]=parseInt(t._vS[n].value[s]+(t._vE[n].value[s]-t._vS[n].value[s])*r)||0:i[s]=t._vS[n].value[s]&&t._vE[n].value[s]?parseFloat(t._vS[n].value[s]+(t._vE[n].value[s]-t._vS[n].value[s])*r):null;t._hex?t._el.style[n]=e.rth(i.r,i.g,i.b):t._el.style[n]=!i.a||_?"rgb("+i.r+","+i.g+","+i.b+")":"rgba("+i.r+","+i.g+","+i.b+","+i.a+")"}:e.dom[n]=function(t,e,n){var r,i,s="",a="perspective("+t._pp+"px) ";for(r in t._vE[e]){var o=t._vS[e][r],u=t._vE[e][r];if(i=i||-1!==T.indexOf(r)&&!g,"translate"===r){var l,c="",v={};for(l in u){var f=o[l].value||0,h=u[l].value||0,d=u[l].unit||"px";v[l]=f===h?h+d:f+(h-f)*n+d}c=u.x?"translate("+v.x+","+v.y+")":"translate3d("+v.translateX+","+v.translateY+","+v.translateZ+")",s=""===s?c:c+" "+s}else if("rotate"===r){var _,m="",w={};for(_ in u)if(o[_]){var y=o[_].value,E=u[_].value,S=u[_].unit||"deg",O=y+(E-y)*n;w[_]="z"===_?"rotate("+O+S+")":_+"("+O+S+") "}m=u.z?w.z:(w.rotateX||"")+(w.rotateY||"")+(w.rotateZ||""),s=""===s?m:s+" "+m}else if("skew"===r){var x="",b={};for(var C in u)if(o[C]){var I=o[C].value,M=u[C].value,k=u[C].unit||"deg",D=I+(M-I)*n;b[C]=C+"("+D+k+") "}x=(b.skewX||"")+(b.skewY||""),s=""===s?x:s+" "+x}else if("scale"===r){var Y=o.value,X=u.value,A=Y+(X-Y)*n,F=r+"("+A+")";s=""===s?F:s+" "+F}}t._el.style[p]=i||void 0!==t._pp&&0!==t._pp?a+s:s}:e.dom[n]=function(t,e,n){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n+t._vE[e].unit}}},e.prP=function(t,n,r){var i,s=arguments.length,a=[];for(s=s>2?2:s,i=0;s>i;i++){var o,u=arguments[i],l={},p={},c={},v={};a[i]={};for(o in u)if(-1!==S.indexOf(o)){if(/^translate(?:[XYZ]|3d)$/.test(o)){var f=["X","Y","Z"],h=0;for(h;3>h;h++){var d=f[h];/3d/.test(o)?c["translate"+d]=e.pp.tf("translate"+d,u[o][h]):c["translate"+d]="translate"+d in u?e.pp.tf("translate"+d,u["translate"+d]):{value:0,unit:"px"}}v.translate=c}else if(/^rotate(?:[XYZ])$/.test(o)||/^skew(?:[XY])$/.test(o)){var g=/rotate/.test(o)?"rotate":"skew",_=["X","Y","Z"],T=0,O="rotate"===g?p:l;for(T;3>T;T++){var x=_[T];void 0!==u[g+x]&&"skewZ"!==o&&(O[g+x]=e.pp.tf(g+x,u[g+x]))}v[g]=O}else/(rotate|translate|scale)$/.test(o)&&(v[o]=e.pp.tf(o,u[o]));a[i].transform=v}else"transform"!==o&&(-1!==E.indexOf(o)?a[i][o]=e.pp.box(o,u[o]):-1!==y.indexOf(o)||-1!==w.indexOf(o)?a[i][o]=e.pp.unl(o,u[o]):-1!==m.indexOf(o)?a[i][o]=e.pp.cls(o,u[o]):o in e.pp&&(a[i][o]=e.pp[o](o,u[o],r)))}return a},e.pp={},e.prS={},e.pp.tf=function(t,n){var r,i=t.replace(/X|Y|Z/,"");if("translate3d"===t)return r=n.split(","),{translateX:{value:e.truD(r[0]).v,unit:e.truD(r[0]).u},translateY:{value:e.truD(r[1]).v,unit:e.truD(r[1]).u},translateZ:{value:e.truD(r[2]).v,unit:e.truD(r[2]).u}};if("translate"!==t&&"translate"===i)return{value:e.truD(n).v,unit:e.truD(n).u||"px"};if("rotate"!==t&&("skew"===i||"rotate"===i)&&"skewZ"!==t)return{value:e.truD(n).v,unit:e.truD(n,t).u||"deg"};if("translate"===t){r="string"==typeof n?n.split(","):n;var s={};return r instanceof Array?(s.x={value:e.truD(r[0]).v,unit:e.truD(r[0]).u},s.y={value:e.truD(r[1]).v,unit:e.truD(r[1]).u}):(s.x={value:e.truD(r).v,unit:e.truD(r).u},s.y={value:0,unit:"px"}),s}if("rotate"===t){var a={};return a.z={value:e.truD(n,t).v,unit:e.truD(n,t).u||"deg"},a}return"scale"===t?{value:e.truD(n,t).v}:void 0},e.pp.unl=function(t,n){return{value:e.truD(n).v}},e.pp.box=function(t,n){return{value:e.truD(n).v,unit:e.truD(n).u}},e.pp.cls=function(t,n){return{value:e.truC(n)}},e.truD=function(t,e){function n(){var n,r=0;for(r;s>r;r++)"string"==typeof t&&-1!==t.indexOf(i[r])&&(n=i[r]);return n=void 0!==n?n:e?"deg":"px"}var r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],s=i.length,a=n();return{v:r,u:a}},e.preventScroll=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},e.truC=function(t){var n,r;if(/rgb|rgba/.test(t))return n=t.replace(/[^\d,]/g,"").split(","),r=n[3]?n[3]:null,r?{r:parseInt(n[0]),g:parseInt(n[1]),b:parseInt(n[2]),a:1*r}:{r:parseInt(n[0]),g:parseInt(n[1]),b:parseInt(n[2])};if(/#/.test(t))return n=e.htr(t),{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];return i.style.color=t,n=window.getComputedStyle(i,null).color,i.style.color="",t!==n?e.truC(n):{r:0,g:0,b:0}}},e.rth=function(t,e,n){return"#"+((1<<24)+(t<<16)+(e<<8)+n).toString(16).slice(1)},e.htr=function(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,n,r){return e+e+n+n+r+r});var n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null},e.gIS=function(t,e){if(t){var n=t.style.cssText,r={},i=n.replace(/\s/g,"").split(";"),s=0,a=i.length;for(s;a>s;s++)if(/transform/.test(i[s])){var o=i[s].split(":")[1].split(")"),u=0,l=o.length;for(u;l>u;u++){var p=o[u].split("(");""!==p[0]&&S.indexOf(p)&&(r[p[0]]=/translate3d/.test(p[0])?p[1].split(","):p[1])}}return r}},e.gCS=function(t,n){var r=t.style,i=window.getComputedStyle(t,null)||t.currentStyle,s=e.property(n),a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[s];if("transform"!==n&&(s in i||s in r)){if(a){if("filter"===s){var o=parseInt(a.split("=")[1].replace(")","")),u=parseFloat(o/100);return u}return a}return b[n]}},e.pe=function(t){if("function"==typeof t)return t;if("string"==typeof t){if(/easing|linear/.test(t))return e.Easing[t];if(/bezier/.test(t)){var n=t.replace(/bezier|\s|\(|\)/g,"").split(",");return e.Ease.Bezier(1*n[0],1*n[1],1*n[2],1*n[3])}return/physics/.test(t)?e.Physics[t]():e.Ease[t]()}},e.Easing={},e.Easing.linear=function(t){return t};var M=Math.PI,k=2*Math.PI,D=Math.PI/2,Y=.1,X=.4;e.Easing.easingSinusoidalIn=function(t){return-Math.cos(t*D)+1},e.Easing.easingSinusoidalOut=function(t){return Math.sin(t*D)},e.Easing.easingSinusoidalInOut=function(t){return-.5*(Math.cos(M*t)-1)},e.Easing.easingQuadraticIn=function(t){return t*t},e.Easing.easingQuadraticOut=function(t){return t*(2-t)},e.Easing.easingQuadraticInOut=function(t){return.5>t?2*t*t:-1+(4-2*t)*t},e.Easing.easingCubicIn=function(t){return t*t*t},e.Easing.easingCubicOut=function(t){return--t*t*t+1},e.Easing.easingCubicInOut=function(t){return.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},e.Easing.easingQuarticIn=function(t){return t*t*t*t},e.Easing.easingQuarticOut=function(t){return 1- --t*t*t*t},e.Easing.easingQuarticInOut=function(t){return.5>t?8*t*t*t*t:1-8*--t*t*t*t},e.Easing.easingQuinticIn=function(t){return t*t*t*t*t},e.Easing.easingQuinticOut=function(t){return 1+--t*t*t*t*t},e.Easing.easingQuinticInOut=function(t){return.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t},e.Easing.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},e.Easing.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},e.Easing.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},e.Easing.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},e.Easing.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},e.Easing.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},e.Easing.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},e.Easing.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},e.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)},e.Easing.easingElasticIn=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,-(Y*Math.pow(2,10*(t-=1))*Math.sin((t-e)*k/X)))},e.Easing.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,Y*Math.pow(2,-10*t)*Math.sin((t-e)*k/X)+1)},e.Easing.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,(t*=2)<1?-.5*(Y*Math.pow(2,10*(t-=1))*Math.sin((t-e)*k/X)):Y*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*k/X)*.5+1)},e.Easing.easingBounceIn=function(t){return 1-e.Easing.easingBounceOut(1-t)},e.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},e.Easing.easingBounceInOut=function(t){return.5>t?.5*e.Easing.easingBounceIn(2*t):.5*e.Easing.easingBounceOut(2*t-1)+.5},e.Tween=function(t,n,r,i){this._el=t,this._vSR={},this._vS=n,this._vE=r,this._y=i.yoyo||!1,this.playing=!1,this.reversed=!1,this.paused=!1,this._sT=null,this._pST=null,this._hex=i.keepHex||!1,this._rpr=i.rpr||!1,this._dr=i.duration||700,this._r=i.repeat||0,this._rD=i.repeatDelay||0,this._dl=i.delay||0,this._to=i.transformOrigin,this._pp=i.perspective,this._ppo=i.perspectiveOrigin,this._ppp=i.parentPerspective,this._pppo=i.parentPerspectiveOrigin,this._e=i&&i.easing&&"function"==typeof e.pe(i.easing)?e.pe(i.easing):e.Easing.linear,this._cT=[],this._sCF=!1,this._sC=i.start||null,this._uC=i.update||null,this._cC=i.complete||null,this._pC=i.pause||null,this._rC=i.play||null,this._stC=i.stop||null,this.repeat=this._r;for(var s in i)s in this||/perspective|delay|duration|repeat|origin|start|stop|update|complete|pause|play|yoyo|easing/i.test(s)||(this[s]=i[s]);e._queue(this)};var A=e.Tween.prototype;A.start=function(r){this.scrollIn(),e.perspective(this._el,this),this._rpr&&this.stack(),e.svg&&this._vE.path&&e.svg.pathCross(this);for(var i in this._vE)this._vSR[i]=this._vS[i];return n.push(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=r||window.performance.now(),this._sT+=this._dl,this._sCF||(this._sC&&this._sC.call(),this._sCF=!0),t||e._tk(),this},A.stop=function(){return!this.paused&&this.playing&&(e.remove(this),this.playing=!1,this.paused=!1,this.scrollOut(),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),this.close()),this},A.pause=function(){return!this.paused&&this.playing&&(e.remove(this),this.paused=!0,this._pST=window.performance.now(),null!==this._pC&&this._pC.call()),this},A.play=A.resume=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=window.performance.now()-this._pST,e.add(this),t||e._tk()),this},A.rvs=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]}},A.chain=function(){return this._cT=arguments,this},A.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},A.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},A.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},A.addListeners=function(){document.addEventListener(s,e.preventScroll,!1),document.addEventListener(a,e.preventScroll,!1)},A.removeListeners=function(){document.removeEventListener(s,e.preventScroll,!1),document.removeEventListener(a,e.preventScroll,!1)},A.stack=function(){var t=this.prS();this._vS={},this._vS=e.prP(t,{},this._el)[0];for(var n in this._vS)if("transform"===n&&n in this._vE)for(var r in this._vS[n]){r in this._vE[n]||(this._vE[n][r]={});for(var i in this._vS[n][r])if(void 0!==this._vS[n][r][i].value){i in this._vE[n][r]||(this._vE[n][r][i]={});for(var s in this._vS[n][r][i])s in this._vE[n][r][i]||(this._vE[n][r][i][s]=this._vS[n][r][i][s])}if("value"in this._vS[n][r]&&!("value"in this._vE[n][r]))for(var a in this._vS[n][r])a in this._vE[n][r]||(this._vE[n][r][a]=this._vS[n][r][a])}},A.prS=function(){var t={},n=this._el,r=this._vS,i=e.gIS(n,"transform"),s=["rotate","skew"],a=["X","Y","Z"];for(var o in r)if(-1!==S.indexOf(o)){var u=/(rotate|translate|scale)$/.test(o);if(/translate/.test(o)&&"translate"!==o)t.translate3d=i.translate3d||b[o];else if(u)t[o]=i[o]||b[o];else if(!u&&/rotate|skew/.test(o))for(var l=0;2>l;l++)for(var p=0;3>p;p++){var c=s[l]+a[p];-1!==S.indexOf(c)&&c in r&&(t[c]=i[c]||b[c])}}else if(-1===w.indexOf(o))if("opacity"===o&&_){var v=e.gCS(n,"filter");t.opacity="number"==typeof v?v:b.opacity}else-1!==O.indexOf(o)?t[o]=e.gCS(n,o)||l[o]:t[o]=o in e.prS?e.prS[o](n,o,r[o]):0;else t[o]=null===n||void 0===n?window.pageYOffset||d.scrollTop:n.scrollTop;for(var o in i)-1===S.indexOf(o)||o in r||(t[o]=i[o]||b[o]);return t},A.close=function(){var t=this;setTimeout(function(){var r=n.indexOf(t);r===n.length-1&&e.s(),t.repeat>0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)},e.TweensTO=function(t,n,r){this.tweens=[];var i,s=t.length,a=[];for(i=0;s>i;i++)a[i]=r||{},r.delay=r.delay||0,a[i].delay=i>0?r.delay+(r.offset||0):r.delay,this.tweens.push(e.to(t[i],n,a[i]))},e.TweensFT=function(t,n,r,i){this.tweens=[];var s,a=t.length,o=[];for(s=0;a>s;s++)o[s]=i||{},i.delay=i.delay||0,o[s].delay=s>0?i.delay+(i.offset||0):i.delay,this.tweens.push(e.fromTo(t[s],n,r,o[s]))};var F=e.TweensTO.prototype=e.TweensFT.prototype;return F.start=function(t){t=t||window.performance.now();var e,n=this.tweens.length;for(e=0;n>e;e++)this.tweens[e].start(t);return this},F.stop=function(){for(var t=0;te;e++)if(i[e]in t.style)return n[e];t=null},e.property=function(t){var n=t in document.body.style?!1:!0,r=e.getPrefix();return n?r+(t.charAt(0).toUpperCase()+t.slice(1)):t},e.selector=function(t,e){var n;if(n=e?"object"==typeof t&&t.length?t:document.querySelectorAll(t):"object"==typeof t?t:/^#/.test(t)?document.getElementById(t.replace("#","")):document.querySelector(t),null===n&&"window"!==t)throw new TypeError("Element not found or incorrect selector: "+t);return n};for(var i=("ontouchstart"in window||navigator.msMaxTouchPoints||!1),s=i?"touchstart":"mousewheel",a="mouseenter",o=e.property("transformOrigin"),u=e.property("perspective"),l=e.property("perspectiveOrigin"),p=e.property("transform"),c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return setTimeout(t,16)},v=window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||function(t){return clearTimeout(t)},f=document.body,h=document.getElementsByTagName("HTML")[0],d=/webkit/i.test(navigator.userAgent)||"BackCompat"==document.compatMode?f:h,g=null!=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent)?parseFloat(RegExp.$1):!1,_=8===g,m=["color","backgroundColor"],w=["scrollTop","scroll"],y=["opacity"],E=["top","left","width","height"],T=["rotateX","rotateY","translateZ"],S=["translate3d","translateX","translateY","translateZ","rotate","translate","rotateX","rotateY","rotateZ","skewX","skewY","scale"],O=m.concat(w,y,E,S),x=O.length,b=b||{},C=0;x>C;C++){var I=O[C];-1!==m.indexOf(I)?b[I]="rgba(0,0,0,0)":-1!==E.indexOf(I)?b[I]=0:"translate3d"===I?b[I]=[0,0,0]:"translate"===I?b[I]=[0,0]:"rotate"===I||/X|Y|Z/.test(I)?b[I]=0:("scale"===I||"opacity"===I)&&(b[I]=1)}e.to=function(t,n,r){var i=e.selector(t),s=n,a=e.prP(n,{},i)[0];return r=r||{},r.rpr=!0,new e.Tween(i,s,a,r)},e.fromTo=function(t,n,r,i){var s=e.selector(t),a=e.prP(n,r,s),o=a[0],u=a[1];i=i||{};var l=new e.Tween(s,o,u,i);return e.svg&&e.svq(l),l},e.allTo=function(t,n,r){var i=e.selector(t,!0);return new e.TweensTO(i,n,r)},e.allFromTo=function(t,n,r,i){var s=e.selector(t,!0);return new e.TweensFT(s,n,r,i)},e.dom={},e._u=function(t,n){if(n=n||window.performance.now(),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 a=0,o=t._cT.length;for(a;o>a;a++)t._cT[a].start(t._sT+t._dr);return t.close(),!1}return!0},e._tk=function(r){var i,s=0;for(t=c(e._tk);s<(i=n.length);)e._u(n[s],r)?s++:n.splice(s,1)},e.perspective=function(t,e){void 0!==e._to&&(t.style[o]=e._to),void 0!==e._ppo&&(t.style[l]=e._ppo),void 0!==e._ppp&&(t.parentNode.style[u]=e._ppp+"px"),void 0!==e._pppo&&(t.parentNode.style[l]=e._pppo)},e.getAll=function(){return n},e.removeAll=function(){n=[]},e.add=function(t){n.push(t)},e.remove=function(t){var e=n.indexOf(t);-1!==e&&n.splice(e,1)},e.s=function(){v(t),t=null},e.prP=function(t,n,r){var i,s=arguments.length,a=[];for(s=s>2?2:s,i=0;s>i;i++){var o,u=arguments[i],l={},p={},c={},v={};a[i]={};for(o in u)if(-1!==S.indexOf(o)){if(/^translate(?:[XYZ]|3d)$/.test(o)){var f=["X","Y","Z"],h=0;for(h;3>h;h++){var d=f[h];/3d/.test(o)?c["translate"+d]=e.pp.tf("translate"+d,u[o][h]):c["translate"+d]="translate"+d in u?e.pp.tf("translate"+d,u["translate"+d]):{value:0,unit:"px"}}v.translate=c}else if(/^rotate(?:[XYZ])$/.test(o)||/^skew(?:[XY])$/.test(o)){var g=/rotate/.test(o)?"rotate":"skew",_=["X","Y","Z"],T=0,O="rotate"===g?p:l;for(T;3>T;T++){var x=_[T];void 0!==u[g+x]&&"skewZ"!==o&&(O[g+x]=e.pp.tf(g+x,u[g+x]))}v[g]=O}else/(rotate|translate|scale)$/.test(o)&&(v[o]=e.pp.tf(o,u[o]));a[i].transform=v}else"transform"!==o&&(-1!==E.indexOf(o)?a[i][o]=e.pp.box(o,u[o]):-1!==y.indexOf(o)||-1!==w.indexOf(o)?a[i][o]=e.pp.unl(o,u[o]):-1!==m.indexOf(o)?a[i][o]=e.pp.cls(o,u[o]):o in e.pp&&(a[i][o]=e.pp[o](o,u[o],r)))}return a},e.pp={},e.prS={},e.pp.tf=function(t,n){"transform"in e.dom||(e.dom.transform=function(t,e,n){var r,i,s="",a="perspective("+t._pp+"px) ";for(r in t._vE[e]){var o=t._vS[e][r],u=t._vE[e][r];if(i=i||-1!==T.indexOf(r)&&!g,"translate"===r){var l,c="",v={};for(l in u){var f=o[l].value||0,h=u[l].value||0,d=u[l].unit||"px";v[l]=f===h?h+d:f+(h-f)*n+d}c=u.x?"translate("+v.x+","+v.y+")":"translate3d("+v.translateX+","+v.translateY+","+v.translateZ+")",s=""===s?c:c+" "+s}else if("rotate"===r){var _,m="",w={};for(_ in u)if(o[_]){var y=o[_].value,E=u[_].value,S=u[_].unit||"deg",O=y+(E-y)*n;w[_]="z"===_?"rotate("+O+S+")":_+"("+O+S+") "}m=u.z?w.z:(w.rotateX||"")+(w.rotateY||"")+(w.rotateZ||""),s=""===s?m:s+" "+m}else if("skew"===r){var x="",b={};for(var C in u)if(o[C]){var I=o[C].value,M=u[C].value,k=u[C].unit||"deg",D=I+(M-I)*n;b[C]=C+"("+D+k+") "}x=(b.skewX||"")+(b.skewY||""),s=""===s?x:s+" "+x}else if("scale"===r){var Y=o.value,X=u.value,A=Y+(X-Y)*n,F=r+"("+A+")";s=""===s?F:s+" "+F}}t._el.style[p]=i||void 0!==t._pp&&0!==t._pp?a+s:s});var r,i=t.replace(/X|Y|Z/,"");if("translate3d"===t)return r=n.split(","),{translateX:{value:e.truD(r[0]).v,unit:e.truD(r[0]).u},translateY:{value:e.truD(r[1]).v,unit:e.truD(r[1]).u},translateZ:{value:e.truD(r[2]).v,unit:e.truD(r[2]).u}};if("translate"!==t&&"translate"===i)return{value:e.truD(n).v,unit:e.truD(n).u||"px"};if("rotate"!==t&&("skew"===i||"rotate"===i)&&"skewZ"!==t)return{value:e.truD(n).v,unit:e.truD(n,t).u||"deg"};if("translate"===t){r="string"==typeof n?n.split(","):n;var s={};return r instanceof Array?(s.x={value:e.truD(r[0]).v,unit:e.truD(r[0]).u},s.y={value:e.truD(r[1]).v,unit:e.truD(r[1]).u}):(s.x={value:e.truD(r).v,unit:e.truD(r).u},s.y={value:0,unit:"px"}),s}if("rotate"===t){var a={};return a.z={value:e.truD(n,t).v,unit:e.truD(n,t).u||"deg"},a}return"scale"===t?{value:e.truD(n,t).v}:void 0},e.pp.unl=function(t,n){return/scroll/.test(t)?e.dom[t]=function(t,e,n){t._el=void 0===t._el||null===t._el?d:t._el,t._el.scrollTop=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n}:"opacity"===t&&(t in e.dom||(_?e.dom[t]=function(t,e,n){t._el.style.filter="alpha(opacity="+100*(t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n)+")"}:e.dom[t]=function(t,e,n){t._el.style.opacity=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n})),{value:e.truD(n).v}},e.pp.box=function(t,n){return t in e.dom||(e.dom[t]=function(t,e,n){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*n+t._vE[e].unit}),{value:e.truD(n).v,unit:e.truD(n).u}},e.pp.cls=function(t,n){return t in e.dom||(e.dom[t]=function(t,n,r){var i={};for(var s in t._vE[n].value)"a"!==s?i[s]=parseInt(t._vS[n].value[s]+(t._vE[n].value[s]-t._vS[n].value[s])*r)||0:i[s]=t._vS[n].value[s]&&t._vE[n].value[s]?parseFloat(t._vS[n].value[s]+(t._vE[n].value[s]-t._vS[n].value[s])*r):null;t._hex?t._el.style[n]=e.rth(i.r,i.g,i.b):t._el.style[n]=!i.a||_?"rgb("+i.r+","+i.g+","+i.b+")":"rgba("+i.r+","+i.g+","+i.b+","+i.a+")"}),{value:e.truC(n)}},e.truD=function(t,e){function n(){var n,r=0;for(r;s>r;r++)"string"==typeof t&&-1!==t.indexOf(i[r])&&(n=i[r]);return n=void 0!==n?n:e?"deg":"px"}var r=parseInt(t)||0,i=["px","%","deg","rad","em","rem","vh","vw"],s=i.length,a=n();return{v:r,u:a}},e.preventScroll=function(t){var e=document.body.getAttribute("data-tweening");e&&"scroll"===e&&t.preventDefault()},e.truC=function(t){var n,r;if(/rgb|rgba/.test(t))return n=t.replace(/[^\d,]/g,"").split(","),r=n[3]?n[3]:null,r?{r:parseInt(n[0]),g:parseInt(n[1]),b:parseInt(n[2]),a:1*r}:{r:parseInt(n[0]),g:parseInt(n[1]),b:parseInt(n[2])};if(/#/.test(t))return n=e.htr(t),{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];return i.style.color=t,n=window.getComputedStyle(i,null).color,i.style.color="",t!==n?e.truC(n):{r:0,g:0,b:0}}},e.rth=function(t,e,n){return"#"+((1<<24)+(t<<16)+(e<<8)+n).toString(16).slice(1)},e.htr=function(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,n,r){return e+e+n+n+r+r});var n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null},e.gIS=function(t,e){if(t){var n=t.style.cssText,r={},i=n.replace(/\s/g,"").split(";"),s=0,a=i.length;for(s;a>s;s++)if(/transform/.test(i[s])){var o=i[s].split(":")[1].split(")"),u=0,l=o.length;for(u;l>u;u++){var p=o[u].split("(");""!==p[0]&&S.indexOf(p)&&(r[p[0]]=/translate3d/.test(p[0])?p[1].split(","):p[1])}}return r}},e.gCS=function(t,n){var r=t.style,i=window.getComputedStyle(t,null)||t.currentStyle,s=e.property(n),a=r[n]&&!/auto|initial|none|unset/.test(r[n])?r[n]:i[s];if("transform"!==n&&(s in i||s in r)){if(a){if("filter"===s){var o=parseInt(a.split("=")[1].replace(")","")),u=parseFloat(o/100);return u}return a}return b[n]}},e.pe=function(t){if("function"==typeof t)return t;if("string"==typeof t){if(/easing|linear/.test(t))return e.Easing[t];if(/bezier/.test(t)){var n=t.replace(/bezier|\s|\(|\)/g,"").split(",");return e.Ease.Bezier(1*n[0],1*n[1],1*n[2],1*n[3])}return/physics/.test(t)?e.Physics[t]():e.Ease[t]()}},e.Easing={},e.Easing.linear=function(t){return t};var M=Math.PI,k=2*Math.PI,D=Math.PI/2,Y=.1,X=.4;e.Easing.easingSinusoidalIn=function(t){return-Math.cos(t*D)+1},e.Easing.easingSinusoidalOut=function(t){return Math.sin(t*D)},e.Easing.easingSinusoidalInOut=function(t){return-.5*(Math.cos(M*t)-1)},e.Easing.easingQuadraticIn=function(t){return t*t},e.Easing.easingQuadraticOut=function(t){return t*(2-t)},e.Easing.easingQuadraticInOut=function(t){return.5>t?2*t*t:-1+(4-2*t)*t},e.Easing.easingCubicIn=function(t){return t*t*t},e.Easing.easingCubicOut=function(t){return--t*t*t+1},e.Easing.easingCubicInOut=function(t){return.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},e.Easing.easingQuarticIn=function(t){return t*t*t*t},e.Easing.easingQuarticOut=function(t){return 1- --t*t*t*t},e.Easing.easingQuarticInOut=function(t){return.5>t?8*t*t*t*t:1-8*--t*t*t*t},e.Easing.easingQuinticIn=function(t){return t*t*t*t*t},e.Easing.easingQuinticOut=function(t){return 1+--t*t*t*t*t},e.Easing.easingQuinticInOut=function(t){return.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t},e.Easing.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},e.Easing.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},e.Easing.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},e.Easing.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},e.Easing.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},e.Easing.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},e.Easing.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},e.Easing.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},e.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)},e.Easing.easingElasticIn=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,-(Y*Math.pow(2,10*(t-=1))*Math.sin((t-e)*k/X)))},e.Easing.easingElasticOut=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,Y*Math.pow(2,-10*t)*Math.sin((t-e)*k/X)+1)},e.Easing.easingElasticInOut=function(t){var e;return 0===t?0:1===t?1:(!Y||1>Y?(Y=1,e=X/4):e=X*Math.asin(1/Y)/k,(t*=2)<1?-.5*(Y*Math.pow(2,10*(t-=1))*Math.sin((t-e)*k/X)):Y*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*k/X)*.5+1)},e.Easing.easingBounceIn=function(t){return 1-e.Easing.easingBounceOut(1-t)},e.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},e.Easing.easingBounceInOut=function(t){return.5>t?.5*e.Easing.easingBounceIn(2*t):.5*e.Easing.easingBounceOut(2*t-1)+.5},e.Tween=function(t,n,r,i){this._el=t,this._vSR={},this._vS=n,this._vE=r,this._y=i.yoyo||!1,this.playing=!1,this.reversed=!1,this.paused=!1,this._sT=null,this._pST=null,this._hex=i.keepHex||!1,this._rpr=i.rpr||!1,this._dr=i.duration||700,this._r=i.repeat||0,this._rD=i.repeatDelay||0,this._dl=i.delay||0,this._to=i.transformOrigin,this._pp=i.perspective,this._ppo=i.perspectiveOrigin,this._ppp=i.parentPerspective,this._pppo=i.parentPerspectiveOrigin,this._e=i&&i.easing&&"function"==typeof e.pe(i.easing)?e.pe(i.easing):e.Easing.linear,this._cT=[],this._sCF=!1,this._sC=i.start||null,this._uC=i.update||null,this._cC=i.complete||null,this._pC=i.pause||null,this._rC=i.play||null,this._stC=i.stop||null,this.repeat=this._r;for(var s in i)s in this||/perspective|delay|duration|repeat|origin|start|stop|update|complete|pause|play|yoyo|easing/i.test(s)||(this[s]=i[s])};var A=e.Tween.prototype;A.start=function(r){this.scrollIn(),e.perspective(this._el,this),this._rpr&&this.stack();for(var i in this._vE)this._vSR[i]=this._vS[i];return n.push(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=r||window.performance.now(),this._sT+=this._dl,this._sCF||(this._sC&&this._sC.call(),this._sCF=!0),t||e._tk(),this},A.stop=function(){return!this.paused&&this.playing&&(e.remove(this),this.playing=!1,this.paused=!1,this.scrollOut(),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),this.close()),this},A.pause=function(){return!this.paused&&this.playing&&(e.remove(this),this.paused=!0,this._pST=window.performance.now(),null!==this._pC&&this._pC.call()),this},A.play=A.resume=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=window.performance.now()-this._pST,e.add(this),t||e._tk()),this},A.rvs=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]}},A.chain=function(){return this._cT=arguments,this},A.stopChainedTweens=function(){var t=0,e=this._cT.length;for(t;e>t;t++)this._cT[t].stop()},A.scrollOut=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(this.removeListeners(),document.body.removeAttribute("data-tweening"))},A.scrollIn=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&(document.body.getAttribute("data-tweening")||(document.body.setAttribute("data-tweening","scroll"),this.addListeners()))},A.addListeners=function(){document.addEventListener(s,e.preventScroll,!1),document.addEventListener(a,e.preventScroll,!1)},A.removeListeners=function(){document.removeEventListener(s,e.preventScroll,!1),document.removeEventListener(a,e.preventScroll,!1)},A.stack=function(){var t=this.prS();this._vS={},this._vS=e.prP(t,{},this._el)[0];for(var n in this._vS)if("transform"===n&&n in this._vE)for(var r in this._vS[n]){r in this._vE[n]||(this._vE[n][r]={});for(var i in this._vS[n][r])if(void 0!==this._vS[n][r][i].value){i in this._vE[n][r]||(this._vE[n][r][i]={});for(var s in this._vS[n][r][i])s in this._vE[n][r][i]||(this._vE[n][r][i][s]=this._vS[n][r][i][s])}if("value"in this._vS[n][r]&&!("value"in this._vE[n][r]))for(var a in this._vS[n][r])a in this._vE[n][r]||(this._vE[n][r][a]=this._vS[n][r][a])}e.svg&&e.svq(this)},A.prS=function(){var t={},n=this._el,r=this._vS,i=e.gIS(n,"transform"),s=["rotate","skew"],a=["X","Y","Z"];for(var o in r)if(-1!==S.indexOf(o)){var u=/(rotate|translate|scale)$/.test(o);if(/translate/.test(o)&&"translate"!==o)t.translate3d=i.translate3d||b[o];else if(u)t[o]=i[o]||b[o];else if(!u&&/rotate|skew/.test(o))for(var l=0;2>l;l++)for(var p=0;3>p;p++){var c=s[l]+a[p];-1!==S.indexOf(c)&&c in r&&(t[c]=i[c]||b[c])}}else if(-1===w.indexOf(o))if("opacity"===o&&_){var v=e.gCS(n,"filter");t.opacity="number"==typeof v?v:b.opacity}else-1!==O.indexOf(o)?t[o]=e.gCS(n,o)||l[o]:t[o]=o in e.prS?e.prS[o](n,o,r[o]):0;else t[o]=null===n||void 0===n?window.pageYOffset||d.scrollTop:n.scrollTop;for(var o in i)-1===S.indexOf(o)||o in r||(t[o]=i[o]||b[o]);return t},A.close=function(){var t=this;setTimeout(function(){var r=n.indexOf(t);r===n.length-1&&e.s(),t.repeat>0&&(t._r=t.repeat),t._y&&t.reversed===!0&&(t.rvs(),t.reversed=!1),t.playing=!1},64)},e.TweensTO=function(t,n,r){this.tweens=[];var i,s=t.length,a=[];for(i=0;s>i;i++)a[i]=r||{},r.delay=r.delay||0,a[i].delay=i>0?r.delay+(r.offset||0):r.delay,this.tweens.push(e.to(t[i],n,a[i]))},e.TweensFT=function(t,n,r,i){this.tweens=[];var s,a=t.length,o=[];for(s=0;a>s;s++)o[s]=i||{},i.delay=i.delay||0,o[s].delay=s>0?i.delay+(i.offset||0):i.delay,this.tweens.push(e.fromTo(t[s],n,r,o[s]))};var F=e.TweensTO.prototype=e.TweensFT.prototype;return F.start=function(t){t=t||window.performance.now();var e,n=this.tweens.length;for(e=0;n>e;e++)this.tweens[e].start(t);return this},F.stop=function(){for(var t=0;t 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 Date: Thu, 24 Mar 2016 14:27:27 +0200 Subject: [PATCH 114/471] 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 5bbb709361f8254d05fcb4ee946c068353cc8c6e Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 14:30:07 +0200 Subject: [PATCH 115/471] Update bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 1c8ae59..6ecf107 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KUTE.js", - "version": "1.0.1", + "version": "1.5.0", "homepage": "http://thednp.github.io/kute.js", "authors": [ "thednp" From 6176a75fe191e96dedfda5be659d3191d6b8caed Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 14:30:56 +0200 Subject: [PATCH 116/471] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cc74455..a160723 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kute.js", - "version": "1.0.1", + "version": "1.5.0", "description": "A minimal Native Javascript animation engine with jQuery plugin.", "main": "kute.js", "scripts": { From 7527628aefd86b04483f5814f054ca243eaa598d Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 14:31:29 +0200 Subject: [PATCH 117/471] Update bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 6ecf107..00fcb44 100644 --- a/bower.json +++ b/bower.json @@ -5,7 +5,7 @@ "authors": [ "thednp" ], - "description": "A minimal Native Javascript animation engine with jQuery plugin.", + "description": "A minimal Native Javascript animation engine.", "main": "kute.js", "moduleType": [ "amd", From f4576d4bca3beb4cf591e9389ac131454df1a1ac Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 14:31:50 +0200 Subject: [PATCH 118/471] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a160723..7061abe 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "kute.js", "version": "1.5.0", - "description": "A minimal Native Javascript animation engine with jQuery plugin.", + "description": "A minimal Native Javascript animation engine.", "main": "kute.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" From 162803f6c86b1207e0ebd2d630ceb0f9ae9ac21e Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Mar 2016 14:48:26 +0200 Subject: [PATCH 119/471] --- demo/svg.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/svg.html b/demo/svg.html index 0f7cfdb..bdfac28 100644 --- a/demo/svg.html +++ b/demo/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:

    @@ -184,7 +185,7 @@ diff --git a/demo/options.html b/demo/options.html index ad508e2..35b17d6 100644 --- a/demo/options.html +++ b/demo/options.html @@ -146,7 +146,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start(); diff --git a/demo/properties.html b/demo/properties.html index c1e8aef..ccd64f0 100644 --- a/demo/properties.html +++ b/demo/properties.html @@ -200,13 +200,12 @@
    - +
    diff --git a/demo/start.html b/demo/start.html index c6bcf80..30f5f3d 100644 --- a/demo/start.html +++ b/demo/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/demo/svg.html b/demo/svg.html
index d67d328..35cdc50 100644
--- a/demo/svg.html
+++ b/demo/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/demo/text.html b/demo/text.html index d97ab04..62050d4 100644 --- a/demo/text.html +++ b/demo/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 b3b806279d75df9dfd5f7c29b2bf4c1e3d1bc4d8 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 16 Aug 2016 19:24:13 +0300 Subject: [PATCH 143/471] 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.

    - -
    -
    -

    Back to top

    -

    © 2007 - 2016 · dnp_theme.

    -
    + + + + 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 7873233e392dd551154371c57f74bbfbf4fb5767 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 17 Aug 2016 23:40:42 +0300
Subject: [PATCH 144/471] Some documentation updates and social sharing fixes.

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

diff --git a/demo/about.html b/demo/about.html
index aa3d09f..ad47ce9 100644
--- a/demo/about.html
+++ b/demo/about.html
@@ -153,7 +153,7 @@
 		
 	
diff --git a/demo/api.html b/demo/api.html
index 702c42a..4d9d2c9 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -223,12 +223,12 @@ tween2.chain(tweensCollection2.tweens);
 
 	
    		
 
-		
+    
 		
 	
    
 	  
diff --git a/demo/assets/css/kute.css b/demo/assets/css/kute.css
index f268748..a9ced15 100644
--- a/demo/assets/css/kute.css
+++ b/demo/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/demo/assets/js/easing.js b/demo/assets/js/easing.js
new file mode 100644
index 0000000..370c12c
--- /dev/null
+++ b/demo/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/demo/css.html b/demo/css.html
index 4d72802..915032c 100644
--- a/demo/css.html
+++ b/demo/css.html
@@ -199,10 +199,10 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
 	
 
 	
 
 	
diff --git a/demo/easing.html b/demo/easing.html
index e8317b0..adace44 100644
--- a/demo/easing.html
+++ b/demo/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/demo/examples.html b/demo/examples.html
index 46fa8a8..86ae4b3 100644
--- a/demo/examples.html
+++ b/demo/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/demo/extend.html b/demo/extend.html
index 8346014..6d5b914 100644
--- a/demo/extend.html
+++ b/demo/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/demo/features.html b/demo/features.html
index 065eb40..a3bc0f8 100644
--- a/demo/features.html
+++ b/demo/features.html
@@ -144,7 +144,7 @@
 			
 	
diff --git a/demo/index.html b/demo/index.html
index bf046ea..91c6a75 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -115,7 +115,7 @@
 		
 	
 
-	
    
+	
    
 		
    
 			
    At A Glance
    
 			
    
@@ -182,12 +182,12 @@
 			
    
 		
    
 
-		
+    
 
 	
    
 	  
diff --git a/demo/options.html b/demo/options.html
index 35b17d6..bcce692 100644
--- a/demo/options.html
+++ b/demo/options.html
@@ -143,12 +143,12 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
 
 	
    		
 
-		
+        
 		
 	
    
 	  
diff --git a/demo/properties.html b/demo/properties.html
index ccd64f0..6000c1e 100644
--- a/demo/properties.html
+++ b/demo/properties.html
@@ -203,7 +203,7 @@
 			
 	
    
diff --git a/demo/start.html b/demo/start.html
index 30f5f3d..d7695e7 100644
--- a/demo/start.html
+++ b/demo/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/demo/svg.html b/demo/svg.html
index 35cdc50..d7dc039 100644
--- a/demo/svg.html
+++ b/demo/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/demo/text.html b/demo/text.html index 62050d4..5db3341 100644 --- a/demo/text.html +++ b/demo/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 ed59e23b77d75a24a9e92004eeefe5350d72b686 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 17 Aug 2016 23:40:42 +0300 Subject: [PATCH 145/471] 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 4faa433429760e9c248955daba6ad92130d552bb Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 18 Aug 2016 22:28:15 +0300 Subject: [PATCH 146/471] Fixed Angular related issue with SVG Plugin. https://github.com/thednp/kute.js/issues/29 --- demo/assets/js/perf.js | 319 +++++++++++++++++++++-------------------- demo/index.html | 46 +++--- demo/src/kute-svg.js | 2 +- dist/kute-svg.min.js | 2 +- kute-svg.js | 2 +- 5 files changed, 188 insertions(+), 183 deletions(-) diff --git a/demo/assets/js/perf.js b/demo/assets/js/perf.js index 0107df0..9d02d7f 100644 --- a/demo/assets/js/perf.js +++ b/demo/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

    KUTE.js

    diff --git a/demo/src/kute-svg.js b/demo/src/kute-svg.js index d0f7b2d..a7d7ff1 100644 --- a/demo/src/kute-svg.js +++ b/demo/src/kute-svg.js @@ -23,7 +23,7 @@ 'use strict'; var K = window.KUTE, S = S || {}, p, - _svg = K.selector('path') || K.selector('svg'), + _svg = document.querySelector('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) diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js index 0ea7dd6..d67556e 100644 --- a/dist/kute-svg.min.js +++ b/dist/kute-svg.min.js @@ -1,2 +1,2 @@ // SVG Plugin for KUTE.js | dnp_theme | 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.KUTE,n=n||{},i=r.selector("path")||r.selector("svg"),o=i&&i.ownerSVGElement&&i.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",a=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],s=["fill","stroke","stopColor"],h=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim;if(!i||i.ownerSVGElement){n.gPt=function(t){var e={},r="object"==typeof t?t:/^\.|^\#/.test(t)?document.querySelector(t):null;if(r&&/path|glyph/.test(r.tagName))e.e=n.fPt(r),e.o=r.getAttribute("d");else if(!r&&/[a-z][^a-z]*/gi.test(t)){var i=n.cP(t.trim());e.e=i,e.o=t}return e},n.pCr=function(t){this._mpr=t.morphPrecision||25,this._midx=t.morphIndex,this._smi=t.showMorphInfo,this._rv1=t.reverseFirstPath,this._rv2=t.reverseSecondPath;var e,r=n.gOp(t._vS.path.o),i=n.gOp(t._vE.path.o);this._isp=!/[CSQTA]/i.test(r)&&!/[CSQTA]/i.test(i),e=n._pCr(r,i,t._el.parentNode),t._vS.path.d=e[0],t._vE.path.d=e[1]},n._pCr=function(t,e,r){var i,o,a,s,h,p,l,u,f,c,d,v,g=[];if(this._sp=!1,this._isp){t=n.pTA(t),e=n.pTA(e),h=Math.max(t.length,e.length),h===e.length?(p=t,l=e):(p=e,l=t),f=p.length,u=n.cP("M"+p.join("L")+"z"),c=u.getTotalLength()/h;for(var _=0;h>_;_++)d=u.getPointAtLength(c*_),v=n.gCP(c,d,p),g.push([v[0],v[1]]);h===e.length?(o=l,i=g):(i=l,o=g)}else t=n.cP(t),e=n.cP(e),a=n.gSegs(t,e,this._mpr),i=a[0],o=a[1],h=o.length;if(this._rv1&&i.reverse(),this._rv2&&o.reverse(),this._smi&&(s=n.gBi(i,o)),this._midx){var m=o.splice(this._midx,h-this._midx);o=m.concat(o)}if(this._smi){n.shP(i,o,r);var y=this._isp?"the polygon with the most points.\n":(25===this._mpr?"the default":"your")+" morphPrecision value of "+this._mpr+".\n";console.log("KUTE.js Path Morph Log\nThe morph used "+h+" points to draw both paths based on "+y+(this._midx?"You've configured the morphIndex to "+this._midx+" while the recommended is "+s+".\n":"You may also consider a morphIndex for the second path. Currently the best index seems to be "+s+".\n")+(this._rv1||this._rv2?"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"):"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."))}return t=e=null,[i,o]},n.gSegs=function(t,e,r){for(var n=[],i=[],o=t.getTotalLength(),a=e.getTotalLength(),s=Math.max(o,a),h=s/r,p=0,l=h*r;(p+=r)p;p++)n=Math.abs(r[p][0]-e.x),i=Math.abs(r[p][1]-e.y),h.push(Math.sqrt(n*n+i*i));return o=h.indexOf(Math.min.apply(null,h)),s=r[o-1]?o-1:l-1,a=r[o+1]?o+1:0,Math.abs(r[s][0]-e.x)p;p++){a=h[p],s=a.length,i=0===p?{f:"DeepPink",o:"HotPink"}:{f:"Lime",o:"LimeGreen"};for(var l=0;s>l;l++)n=document.createElementNS(o,"circle"),n.setAttribute("cx",a[l][0]),n.setAttribute("cy",a[l][1]),n.setAttribute("r",0===l?20:10),n.setAttribute("fill",0===l?i.f:i.o),this._isp?r.appendChild(n):this._isp||0!==l||r.appendChild(n)}this._sp=!0,n=null}},n.gBi=function(t,e){var r,i,o,a,s=n.clone(t),h=n.clone(e),p=[],l=e.length;for(r=0;l>r;r++)i=h.splice(r,l-r),h=i.concat(h),o=Math.abs(s[r][0]-h[r][0]),a=Math.abs(s[r][1]-h[r][1]),p.push(Math.sqrt(o*o+a*a)),h=[],h=n.clone(e),i=null;return p.indexOf(Math.min.apply(null,p))},n.gOp=function(t){var e=t.split(/z/i);return e.length>2?e[0].trim()+"z":t.trim()},n.cP=function(t){var e=document.createElementNS(o,"path"),r="object"==typeof t?t.getAttribute("d"):t;return e.setAttribute("d",r),e},n.fPt=function(t){if("glyph"===t.tagName){var e=n.cP(t);return t.parentNode.appendChild(e),e}return t},n.clone=function(t){var e;if(t instanceof Array){e=[];for(var r=0,i=t.length;i>r;r++)e[r]=n.clone(t[r]);return e}return t},n.pTA=function(t){for(var e,r,n=t.match(h),i=n.length,o=0,a=0,s=0;i>s;s++)n[s]=n[s],e=n[s][0],r=new RegExp(e+"[^\\d|\\-]*","i"),n[s]=n[s].replace(/(^|[^,])\s*-/g,"$1,-").replace(/(\s+\,|\s|\,)/g,",").replace(r,"").split(","),n[s][0]=parseFloat(n[s][0]),n[s][1]=parseFloat(n[s][1]),0===s?(o+=n[s][0],a+=n[s][1]):(o=n[s-1][0],a=n[s-1][1],/l/i.test(e)?(n[s][0]="l"===e?n[s][0]+o:n[s][0],n[s][1]="l"===e?n[s][1]+a:n[s][1]):/h/i.test(e)?(n[s][0]="h"===e?n[s][0]+o:n[s][0],n[s][1]=a):/v/i.test(e)&&(n[s][0]=o,n[s][1]="v"===e?n[s][0]+a:n[s][0]));return n},r.svq=function(t){t._vE.path&&n.pCr(t)},r.pp.path=function(t,e,i){return"path"in r.dom||(r.dom.path=function(t,e,r){var n,i,o=[];for(n=0,i=t._vE.path.d.length;i>n;n++){o[n]=[];for(var a=0;2>a;a++)o[n].push(t._vS.path.d[n][a]+(t._vE.path.d[n][a]-t._vS.path.d[n][a])*r)}t._el.setAttribute("d",1===r?t._vE.path.o:"M"+o.join("L")+"Z")}),n.gPt(e)},r.prS.path=function(t,e,r){return t.getAttribute("d")},n.gDr=function(t,e){var i,o,a,s,h=t.getTotalLength();return e instanceof Object?e:("string"==typeof e?(e=e.split(/\,|\s/),i=/%/.test(e[0])?n.pc(e[0].trim(),h):parseFloat(e[0]),o=/%/.test(e[1])?n.pc(e[1].trim(),h):parseFloat(e[1])):"undefined"==typeof e&&(s=parseFloat(r.gCS(t,"strokeDashoffset")),a=r.gCS(t,"strokeDasharray").split(/\,/),i=0-s,o=parseFloat(a[0])+i||h),{s:i,e:o,l:h})},n.pc=function(t,e){return parseFloat(t)/100*e},r.pp.draw=function(t,e,i){return"draw"in r.dom||(r.dom.draw=function(t,e,r){var n,i,o,a;n=t._vS.draw.l,i=t._vS.draw.s+(t._vE.draw.s-t._vS.draw.s)*r,o=t._vS.draw.e+(t._vE.draw.e-t._vS.draw.e)*r,a=0-i,t._el.style.strokeDashoffset=a+"px",t._el.style.strokeDasharray=1>o+a?"0px, "+n+"px":o+a+"px, "+n+"px"}),n.gDr(i,e)},r.prS.draw=function(t,e,r){return n.gDr(t)};for(var p=0,l=s.length;l>p;p++)e=s[p],r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,n){var i={};for(var o in t._vE[e])"a"!==o?i[o]=parseInt(t._vS[e][o]+(t._vE[e][o]-t._vS[e][o])*n)||0:i[o]=t._vS[e][o]&&t._vE[e][o]?parseFloat(t._vS[e][o]+(t._vE[e][o]-t._vS[e][o])*n):null;t._hex?t._el.style[e]=r.rth(i.r,i.g,i.b):t._el.style[e]=i.a?"rgba("+i.r+","+i.g+","+i.b+","+i.a+")":"rgb("+i.r+","+i.g+","+i.b+")"}),r.truC(e)},r.prS[e]=function(t,e,n){return r.gCS(t,e)||"rgba(0,0,0,0)"};for(var p=0,l=a.length;l>p;p++)e=a[p],"strokeWidth"===e?r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,r){t._el.style[e]=t._vS[e].value+(t._vE[e].value-t._vS[e].value)*r+t._vS[e].unit}),r.pp.box(t,e)}:r.pp[e]=function(t,e){return t in r.dom||(r.dom[t]=function(t,e,r){t._el.style[e]=t._vS[e]+(t._vE[e]-t._vS[e])*r}),parseFloat(e)},r.prS[e]=function(t,e,n){return r.gCS(t,e)||0};return n}}); +!function(a){if("function"==typeof define&&define.amd)define(["./kute.js"],function(b){return a(b),b});else if("object"==typeof module&&"function"==typeof require){var b=require("./kute.js");module.exports=a(b)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||a(b)}}(function(a){"use strict";var d,b=window.KUTE,c=c||{},e=document.querySelector("svg"),f=e&&e.ownerSVGElement&&e.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",g=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],h=["fill","stroke","stopColor"],i=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim;if(!e||e.ownerSVGElement){c.gPt=function(a){var b={},d="object"==typeof a?a:/^\.|^\#/.test(a)?document.querySelector(a):null;if(d&&/path|glyph/.test(d.tagName))b.e=c.fPt(d),b.o=d.getAttribute("d");else if(!d&&/[a-z][^a-z]*/gi.test(a)){var e=c.cP(a.trim());b.e=e,b.o=a}return b},c.pCr=function(a){this._mpr=a.morphPrecision||25,this._midx=a.morphIndex,this._smi=a.showMorphInfo,this._rv1=a.reverseFirstPath,this._rv2=a.reverseSecondPath;var e,b=c.gOp(a._vS.path.o),d=c.gOp(a._vE.path.o);this._isp=!/[CSQTA]/i.test(b)&&!/[CSQTA]/i.test(d),e=c._pCr(b,d,a._el.parentNode),a._vS.path.d=e[0],a._vE.path.d=e[1]},c._pCr=function(a,b,d){var e,f,g,h,i,j,k,l,o,q,r,s,n=[];if(this._sp=!1,this._isp){a=c.pTA(a),b=c.pTA(b),i=Math.max(a.length,b.length),i===b.length?(j=a,k=b):(j=b,k=a),o=j.length,l=c.cP("M"+j.join("L")+"z"),q=l.getTotalLength()/i;for(var t=0;t2?b[0].trim()+"z":a.trim()},c.cP=function(a){var b=document.createElementNS(f,"path"),c="object"==typeof a?a.getAttribute("d"):a;return b.setAttribute("d",c),b},c.fPt=function(a){if("glyph"===a.tagName){var b=c.cP(a);return a.parentNode.appendChild(b),b}return a},c.clone=function(a){var b;if(a instanceof Array){b=[];for(var d=0,e=a.length;d Date: Thu, 18 Aug 2016 22:28:15 +0300 Subject: [PATCH 147/471] 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 148/471] --- demo/src/kute-svg.js | 3 ++- dist/kute-svg.min.js | 2 +- kute-svg.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/demo/src/kute-svg.js b/demo/src/kute-svg.js index a7d7ff1..5e6b4df 100644 --- a/demo/src/kute-svg.js +++ b/demo/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) diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js index d67556e..9218fdb 100644 --- a/dist/kute-svg.min.js +++ b/dist/kute-svg.min.js @@ -1,2 +1,2 @@ // SVG Plugin for KUTE.js | dnp_theme | MIT License -!function(a){if("function"==typeof define&&define.amd)define(["./kute.js"],function(b){return a(b),b});else if("object"==typeof module&&"function"==typeof require){var b=require("./kute.js");module.exports=a(b)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||a(b)}}(function(a){"use strict";var d,b=window.KUTE,c=c||{},e=document.querySelector("svg"),f=e&&e.ownerSVGElement&&e.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",g=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],h=["fill","stroke","stopColor"],i=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim;if(!e||e.ownerSVGElement){c.gPt=function(a){var b={},d="object"==typeof a?a:/^\.|^\#/.test(a)?document.querySelector(a):null;if(d&&/path|glyph/.test(d.tagName))b.e=c.fPt(d),b.o=d.getAttribute("d");else if(!d&&/[a-z][^a-z]*/gi.test(a)){var e=c.cP(a.trim());b.e=e,b.o=a}return b},c.pCr=function(a){this._mpr=a.morphPrecision||25,this._midx=a.morphIndex,this._smi=a.showMorphInfo,this._rv1=a.reverseFirstPath,this._rv2=a.reverseSecondPath;var e,b=c.gOp(a._vS.path.o),d=c.gOp(a._vE.path.o);this._isp=!/[CSQTA]/i.test(b)&&!/[CSQTA]/i.test(d),e=c._pCr(b,d,a._el.parentNode),a._vS.path.d=e[0],a._vE.path.d=e[1]},c._pCr=function(a,b,d){var e,f,g,h,i,j,k,l,o,q,r,s,n=[];if(this._sp=!1,this._isp){a=c.pTA(a),b=c.pTA(b),i=Math.max(a.length,b.length),i===b.length?(j=a,k=b):(j=b,k=a),o=j.length,l=c.cP("M"+j.join("L")+"z"),q=l.getTotalLength()/i;for(var t=0;t2?b[0].trim()+"z":a.trim()},c.cP=function(a){var b=document.createElementNS(f,"path"),c="object"==typeof a?a.getAttribute("d"):a;return b.setAttribute("d",c),b},c.fPt=function(a){if("glyph"===a.tagName){var b=c.cP(a);return a.parentNode.appendChild(b),b}return a},c.clone=function(a){var b;if(a instanceof Array){b=[];for(var d=0,e=a.length;d2?b[0].trim()+"z":a.trim()},c.cP=function(a){var b=document.createElementNS(f,"path"),c="object"==typeof a?a.getAttribute("d"):a;return b.setAttribute("d",c),b},c.fPt=function(a){if("glyph"===a.tagName){var b=c.cP(a);return a.parentNode.appendChild(b),b}return a},c.clone=function(a){var b;if(a instanceof Array){b=[];for(var d=0,e=a.length;d Date: Fri, 19 Aug 2016 01:12:53 +0300 Subject: [PATCH 149/471] --- 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 a514d71f61e6d0bf3522ba31e8ddd29a83463e66 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 19 Aug 2016 01:30:41 +0300 Subject: [PATCH 150/471] --- demo/src/kute-svg.js | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/src/kute-svg.js b/demo/src/kute-svg.js index 5e6b4df..c7ad6ae 100644 --- a/demo/src/kute-svg.js +++ b/demo/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 3d8fadde3ec30704b78403ea49c223ea3e24fe37 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 19 Aug 2016 01:30:41 +0300 Subject: [PATCH 151/471] --- 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 f3414f65510ac7ddfbb8e9698ae1f5206a430ea3 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Aug 2016 15:58:30 +0300 Subject: [PATCH 152/471] SVG Plugin added `draw` (stroke animations) support for additional elements: ``, ``, ``, `` and ``. https://github.com/thednp/kute.js/issues/28 --- demo/assets/js/svg.js | 28 +++++++++++++++++- demo/src/kute-svg.js | 67 +++++++++++++++++++++++++++++++++++++++++-- demo/svg.html | 10 ++++--- dist/kute-svg.min.js | 2 +- kute-svg.js | 67 +++++++++++++++++++++++++++++++++++++++++-- 5 files changed, 164 insertions(+), 10 deletions(-) diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js index ce661d7..181ac6c 100644 --- a/demo/assets/js/svg.js +++ b/demo/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/demo/src/kute-svg.js b/demo/src/kute-svg.js index c7ad6ae..b8a8484 100644 --- a/demo/src/kute-svg.js +++ b/demo/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
    diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js index 9218fdb..b978cf1 100644 --- a/dist/kute-svg.min.js +++ b/dist/kute-svg.min.js @@ -1,2 +1,2 @@ // SVG Plugin for KUTE.js | dnp_theme | MIT License -!function(a){if("function"==typeof define&&define.amd)define(["./kute.js"],function(b){return a(b),b});else if("object"==typeof module&&"function"==typeof require){var b=require("./kute.js");module.exports=a(b)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||a(b)}}(function(a){"use strict";var d,b=window.KUTE,c=c||{},e=document.querySelector("path")||document.querySelector("svg"),f=e&&e.ownerSVGElement&&e.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",g=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],h=["fill","stroke","stopColor"],i=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim;if(!e||e.ownerSVGElement){c.gPt=function(a){var b={},d="object"==typeof a?a:/^\.|^\#/.test(a)?document.querySelector(a):null;if(d&&/path|glyph/.test(d.tagName))b.e=c.fPt(d),b.o=d.getAttribute("d");else if(!d&&/[a-z][^a-z]*/gi.test(a)){var e=c.cP(a.trim());b.e=e,b.o=a}return b},c.pCr=function(a){this._mpr=a.morphPrecision||25,this._midx=a.morphIndex,this._smi=a.showMorphInfo,this._rv1=a.reverseFirstPath,this._rv2=a.reverseSecondPath;var e,b=c.gOp(a._vS.path.o),d=c.gOp(a._vE.path.o);this._isp=!/[CSQTA]/i.test(b)&&!/[CSQTA]/i.test(d),e=c._pCr(b,d,a._el.parentNode),a._vS.path.d=e[0],a._vE.path.d=e[1]},c._pCr=function(a,b,d){var e,f,g,h,i,j,k,l,o,q,r,s,n=[];if(this._sp=!1,this._isp){a=c.pTA(a),b=c.pTA(b),i=Math.max(a.length,b.length),i===b.length?(j=a,k=b):(j=b,k=a),o=j.length,l=c.cP("M"+j.join("L")+"z"),q=l.getTotalLength()/i;for(var t=0;t2?b[0].trim()+"z":a.trim()},c.cP=function(a){var b=document.createElementNS(f,"path"),c="object"==typeof a?a.getAttribute("d"):a;return b.setAttribute("d",c),b},c.fPt=function(a){if("glyph"===a.tagName){var b=c.cP(a);return a.parentNode.appendChild(b),b}return a},c.clone=function(a){var b;if(a instanceof Array){b=[];for(var d=0,e=a.length;d2?b[0].trim()+"z":a.trim()},c.cP=function(a){var b=document.createElementNS(f,"path"),c="object"==typeof a?a.getAttribute("d"):a;return b.setAttribute("d",c),b},c.fPt=function(a){if("glyph"===a.tagName){var b=c.cP(a);return a.parentNode.appendChild(b),b}return a},c.clone=function(a){var b;if(a instanceof Array){b=[];for(var d=0,e=a.length;d1){if(b.length>2)for(var f=0;f 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 Date: Sat, 20 Aug 2016 15:58:30 +0300 Subject: [PATCH 153/471] 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 6c8b49ea8a523424ede8683b3c97fedea8585325 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Aug 2016 16:44:53 +0300 Subject: [PATCH 154/471] Small demo improvements. --- demo/assets/js/svg.js | 40 +++++++++------------------------------- demo/examples.html | 2 +- 2 files changed, 10 insertions(+), 32 deletions(-) diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js index 181ac6c..e5d6065 100644 --- a/demo/assets/js/svg.js +++ b/demo/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/demo/examples.html b/demo/examples.html index 86ae4b3..3b97e8f 100644 --- a/demo/examples.html +++ b/demo/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 d184fe310c3cdb7c844b5e70fa0bc9d0e4e4b6a4 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Aug 2016 16:44:53 +0300 Subject: [PATCH 155/471] 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 ef5da213c1541da8c9b733f25fbea7721f61e8df Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Aug 2016 16:46:16 +0300 Subject: [PATCH 156/471] --- demo/assets/js/svg.js | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js index e5d6065..07809d9 100644 --- a/demo/assets/js/svg.js +++ b/demo/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 dfa70cd629d94333018dbbec66dc5adf4980444f Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Aug 2016 16:46:16 +0300 Subject: [PATCH 157/471] --- 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 362293626f5d239da99990dd4c3c6429f95ad370 Mon Sep 17 00:00:00 2001 From: thednp Date: Sun, 21 Aug 2016 00:11:42 +0300 Subject: [PATCH 158/471] Added support for stroking animation via `draw` for ``, some demo improvements. --- demo/assets/js/svg.js | 10 +++++----- demo/src/kute-svg.js | 16 +++++++++++----- demo/svg.html | 11 ++++++----- dist/kute-svg.min.js | 2 +- kute-svg.js | 16 +++++++++++----- 5 files changed, 34 insertions(+), 21 deletions(-) diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js index 07809d9..8f1cc86 100644 --- a/demo/assets/js/svg.js +++ b/demo/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/demo/src/kute-svg.js b/demo/src/kute-svg.js index b8a8484..4cf8b43 100644 --- a/demo/src/kute-svg.js +++ b/demo/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	
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
index b978cf1..2e9eb56 100644
--- a/dist/kute-svg.min.js
+++ b/dist/kute-svg.min.js
@@ -1,2 +1,2 @@
 // SVG Plugin for KUTE.js | dnp_theme | MIT License
-!function(a){if("function"==typeof define&&define.amd)define(["./kute.js"],function(b){return a(b),b});else if("object"==typeof module&&"function"==typeof require){var b=require("./kute.js");module.exports=a(b)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||a(b)}}(function(a){"use strict";var d,b=window.KUTE,c=c||{},e=document.querySelector("path")||document.querySelector("svg"),f=e&&e.ownerSVGElement&&e.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",g=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],h=["fill","stroke","stopColor"],i=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim;if(!e||e.ownerSVGElement){c.gPt=function(a){var b={},d="object"==typeof a?a:/^\.|^\#/.test(a)?document.querySelector(a):null;if(d&&/path|glyph/.test(d.tagName))b.e=c.fPt(d),b.o=d.getAttribute("d");else if(!d&&/[a-z][^a-z]*/gi.test(a)){var e=c.cP(a.trim());b.e=e,b.o=a}return b},c.pCr=function(a){this._mpr=a.morphPrecision||25,this._midx=a.morphIndex,this._smi=a.showMorphInfo,this._rv1=a.reverseFirstPath,this._rv2=a.reverseSecondPath;var e,b=c.gOp(a._vS.path.o),d=c.gOp(a._vE.path.o);this._isp=!/[CSQTA]/i.test(b)&&!/[CSQTA]/i.test(d),e=c._pCr(b,d,a._el.parentNode),a._vS.path.d=e[0],a._vE.path.d=e[1]},c._pCr=function(a,b,d){var e,f,g,h,i,j,k,l,o,q,r,s,n=[];if(this._sp=!1,this._isp){a=c.pTA(a),b=c.pTA(b),i=Math.max(a.length,b.length),i===b.length?(j=a,k=b):(j=b,k=a),o=j.length,l=c.cP("M"+j.join("L")+"z"),q=l.getTotalLength()/i;for(var t=0;t2?b[0].trim()+"z":a.trim()},c.cP=function(a){var b=document.createElementNS(f,"path"),c="object"==typeof a?a.getAttribute("d"):a;return b.setAttribute("d",c),b},c.fPt=function(a){if("glyph"===a.tagName){var b=c.cP(a);return a.parentNode.appendChild(b),b}return a},c.clone=function(a){var b;if(a instanceof Array){b=[];for(var d=0,e=a.length;d1){if(b.length>2)for(var f=0;f2?b[0].trim()+"z":a.trim()},c.cP=function(a){var b=document.createElementNS(f,"path"),c="object"==typeof a?a.getAttribute("d"):a;return b.setAttribute("d",c),b},c.fPt=function(a){if("glyph"===a.tagName){var b=c.cP(a);return a.parentNode.appendChild(b),b}return a},c.clone=function(a){var b;if(a instanceof Array){b=[];for(var d=0,e=a.length;d1){if(b.length>2)for(var f=0;f
Date: Sun, 21 Aug 2016 00:11:42 +0300
Subject: [PATCH 159/471] 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 fa5d69ed3ed797157dfb279c2681a07b4ee02c6c Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 22 Aug 2016 01:45:23 +0300
Subject: [PATCH 160/471] * Added SVG Transforms for SVG Plugin *
 Documentation/demo updates

---
 demo/assets/js/svg.js |  50 +++++++++++
 demo/index.html       |   4 +-
 demo/properties.html  |  34 +++++---
 demo/src/kute-svg.js  | 191 ++++++++++++++++++++++++++++--------------
 demo/svg.html         | 101 ++++++++++++++++++++--
 dist/kute-svg.min.js  |   2 +-
 kute-svg.js           | 191 ++++++++++++++++++++++++++++--------------
 7 files changed, 430 insertions(+), 143 deletions(-)

diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js
index 8f1cc86..8d0f59d 100644
--- a/demo/assets/js/svg.js
+++ b/demo/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/demo/index.html b/demo/index.html
index fdbf0a3..df97d46 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,8 +9,8 @@
     
     
     
-    
-    
+    
+    
     
     
 
diff --git a/demo/properties.html b/demo/properties.html
index 6000c1e..cb632e9 100644
--- a/demo/properties.html
+++ b/demo/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/demo/src/kute-svg.js b/demo/src/kute-svg.js
index 4cf8b43..81c9a02 100644
--- a/demo/src/kute-svg.js
+++ b/demo/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/demo/extend.html b/demo/extend.html
index 6d5b914..5569e23 100644
--- a/demo/extend.html
+++ b/demo/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/demo/src/kute-attr.js b/demo/src/kute-attr.js
index 323f2f6..ed0bfb9 100644
--- a/demo/src/kute-attr.js
+++ b/demo/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/demo/src/kute-bezier.js b/demo/src/kute-bezier.js
index f402215..0f631d7 100644
--- a/demo/src/kute-bezier.js
+++ b/demo/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/demo/src/kute-css.js b/demo/src/kute-css.js
index 12d6261..8dc94db 100644
--- a/demo/src/kute-css.js
+++ b/demo/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/demo/src/kute.js b/demo/src/kute.js
index c82329b..5ed87f7 100644
--- a/demo/src/kute.js
+++ b/demo/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/demo/svg.html b/demo/svg.html
index b20396f..148f5ed 100644
--- a/demo/svg.html
+++ b/demo/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>
diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js
index af75a25..e1e213c 100644
--- a/dist/kute-attr.min.js
+++ b/dist/kute-attr.min.js
@@ -1,2 +1,2 @@
 // Attributes Plugin for KUTE.js | dnp_theme | 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=window.KUTE;e.gCA=function(t,e){return t.getAttribute(e)},e.prS.attr=function(t,r,n){var i={};for(var o in n)i[o.replace(/_+[a-z]+/,"")]=e.gCA(t,o.replace(/_+[a-z]+/,""));return i},"attr"in e.dom||(e.dom.attr=function(t,r,n){for(var i in t._vE[r])e.dom.attr.prototype[i](t,i,n)});var r=e.dom.attr.prototype;e.pp.attr=function(t,n){var i,o={};for(i in n)if(/%|px/.test(n[i])){var u=e.truD(n[i]).u,a=/%/.test(u)?"_percent":"_"+u;i+a in r||(r[i+a]=function(t,e,r){t._el.setAttribute(e.replace(a,""),t._vS.attr[e].v+(t._vE.attr[e].v-t._vS.attr[e].v)*r+t._vE.attr[e].u)}),o[i+a]=e.truD(n[i])}else i in r||(r[i]=function(t,e,r){t._el.setAttribute(e,t._vS.attr[e]+(t._vE.attr[e]-t._vS.attr[e])*r)}),o[i]=1*n[i];return o}});
\ No newline at end of file
+(function(c){if("function"===typeof define&&define.amd)define(["./kute.js"],function(a){c(a);return a});else if("object"==typeof module&&"function"==typeof require){var a=require("./kute.js");module.exports=c(a)}else if("undefined"!==typeof window.KUTE)c(a);else throw Error("Attributes Plugin require KUTE.js.");})(function(c){var a=window.KUTE,e=a.dom;c=a.pp;var k=a.Interpolate.unit,l=a.Interpolate.number;a.gCA=function(a,d){return a.getAttribute(d)};a.prS.attr=function(c,d,h){d={};for(var b in h)d[b.replace(/_+[a-z]+/,"")]=a.gCA(c,b.replace(/_+[a-z]+/,""));return d};"attr"in e||(e.attr=function(a,d,c,b,g){for(var f in b)e.attr.prototype[f](a,f,c[f],b[f],g)});var g=e.attr.prototype;c.attr=function(c,d){var h={},b;for(b in d)if(/%|px/.test(d[b])){var e=a.truD(d[b]).u,f=/%/.test(e)?"_percent":"_"+e;b+f in g||(g[b+f]=function(a,b,d,c,e){b=b.replace(f,"");a.setAttribute(b,k(d.v,c.v,c.u,e))});h[b+f]=a.truD(d[b])}else b in g||(g[b]=function(a,b,c,d,e){a.setAttribute(b,l(c,d,e))}),h[b]=1*d[b];return h}});
\ No newline at end of file
diff --git a/dist/kute-bezier.min.js b/dist/kute-bezier.min.js
index fd242f2..dfb052c 100644
--- a/dist/kute-bezier.min.js
+++ b/dist/kute-bezier.min.js
@@ -1,2 +1,2 @@
 // Bezier Easing Functions for KUTE.js | dnp_theme | MIT License
-!function(n){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return n(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=n(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");window.KUTE.Ease=window.KUTE.Ease||n(e)}}(function(n){"use strict";var e=e||{};e.Bezier=function(n,e,r,u){return t.pB(n,e,r,u)};var t=e.Bezier.prototype;return t.ni=4,t.nms=.001,t.sp=1e-7,t.smi=10,t.ksts=11,t.ksss=1/(t.ksts-1),t.f32as="Float32Array"in window,t.msv=t.f32as?new Float32Array(t.ksts):new Array(t.ksts),t.A=function(n,e){return 1-3*e+3*n},t.B=function(n,e){return 3*e-6*n},t.C=function(n){return 3*n},t.r={},t.pB=function(n,e,r,u){this._p=!1;var i=this;return t.r=function(s){return i._p||t.pc(n,r,e,u),n===e&&r===u?s:0===s?0:1===s?1:t.cB(t.gx(s,n,r),e,u)},t.r},t.cB=function(n,e,r){return((t.A(e,r)*n+t.B(e,r))*n+t.C(e))*n},t.gS=function(n,e,r){return 3*t.A(e,r)*n*n+2*t.B(e,r)*n+t.C(e)},t.bS=function(n,e,r,u,i){var s,o,c=0,f=t.sp,a=t.smi;do o=e+(r-e)/2,s=t.cB(o,u,i)-n,s>0?r=o:e=o;while(Math.abs(s)>f&&++ci;++i){var o=t.gS(e,r,u);if(0===o)return e;var c=t.cB(e,r,u)-n;e-=c/o}return e},t.csv=function(n,e){var r=0,u=t.ksts;for(r;u>r;++r)t.msv[r]=t.cB(r*t.ksss,n,e)},t.gx=function(n,e,r){for(var u=0,i=1,s=t.ksts-1;i!=s&&t.msv[i]<=n;++i)u+=t.ksss;--i;var o=(n-t.msv[i])/(t.msv[i+1]-t.msv[i]),c=u+o*t.ksss,f=t.gS(c,e,r),a=u+t.ksss;return f>=t.nms?t.nri(n,c,e,r):0===f?c:t.bS(n,u,a,e,r)},t.pc=function(n,e,r,u){this._p=!0,(n!=r||e!=u)&&t.csv(n,e)},e.easeIn=function(){return t.pB(.42,0,1,1)},e.easeOut=function(){return t.pB(0,0,.58,1)},e.easeInOut=function(){return t.pB(.5,.16,.49,.86)},e.easeInSine=function(){return t.pB(.47,0,.745,.715)},e.easeOutSine=function(){return t.pB(.39,.575,.565,1)},e.easeInOutSine=function(){return t.pB(.445,.05,.55,.95)},e.easeInQuad=function(){return t.pB(.55,.085,.68,.53)},e.easeOutQuad=function(){return t.pB(.25,.46,.45,.94)},e.easeInOutQuad=function(){return t.pB(.455,.03,.515,.955)},e.easeInCubic=function(){return t.pB(.55,.055,.675,.19)},e.easeOutCubic=function(){return t.pB(.215,.61,.355,1)},e.easeInOutCubic=function(){return t.pB(.645,.045,.355,1)},e.easeInQuart=function(){return t.pB(.895,.03,.685,.22)},e.easeOutQuart=function(){return t.pB(.165,.84,.44,1)},e.easeInOutQuart=function(){return t.pB(.77,0,.175,1)},e.easeInQuint=function(){return t.pB(.755,.05,.855,.06)},e.easeOutQuint=function(){return t.pB(.23,1,.32,1)},e.easeInOutQuint=function(){return t.pB(.86,0,.07,1)},e.easeInExpo=function(){return t.pB(.95,.05,.795,.035)},e.easeOutExpo=function(){return t.pB(.19,1,.22,1)},e.easeInOutExpo=function(){return t.pB(1,0,0,1)},e.easeInCirc=function(){return t.pB(.6,.04,.98,.335)},e.easeOutCirc=function(){return t.pB(.075,.82,.165,1)},e.easeInOutCirc=function(){return t.pB(.785,.135,.15,.86)},e.easeInBack=function(){return t.pB(.6,-.28,.735,.045)},e.easeOutBack=function(){return t.pB(.175,.885,.32,1.275)},e.easeInOutBack=function(){return t.pB(.68,-.55,.265,1.55)},e.slowMo=function(){return t.pB(0,.5,1,.5)},e.slowMo1=function(){return t.pB(0,.7,1,.3)},e.slowMo2=function(){return t.pB(0,.9,1,.1)},e});
\ No newline at end of file
+(function(k){if("function"===typeof define&&define.amd)define(["./kute.js"],function(a){k(a);return a});else if("object"==typeof module&&"function"==typeof require){var b=require("./kute.js");module.exports=k(b)}else if("undefined"!==typeof window.KUTE)window.KUTE.Ease=window.KUTE.Ease||k(b);else throw Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");})(function(k){var b=b||{};b.Bezier=function(b,c,d,e){return a.pB(b,c,d,e)};var a=b.Bezier.prototype;a.ni=4;a.nms=.001;a.sp=1E-7;a.smi=10;a.ksts=11;a.ksss=1/(a.ksts-1);a.f32as="Float32Array"in window;a.msv=a.f32as?new Float32Array(a.ksts):Array(a.ksts);a.A=function(a,b){return 1-3*b+3*a};a.B=function(a,b){return 3*b-6*a};a.C=function(a){return 3*a};a.r={};a.pB=function(b,c,d,e){this._p=!1;var f=this;a.r=function(g){f._p||a.pc(b,d,c,e);return b===c&&d===e?g:0===g?0:1===g?1:a.cB(a.gx(g,b,d),c,e)};return a.r};a.cB=function(b,c,d){return((a.A(c,d)*b+a.B(c,d))*b+a.C(c))*b};a.gS=function(b,c,d){return 3*a.A(c,d)*b*b+2*a.B(c,d)*b+a.C(c)};a.bS=function(b,c,d,e,f){var g,h,k=0,l=a.sp,m=a.smi;do h=c+(d-c)/2,g=a.cB(h,e,f)-b,0l&&++k=a.nms?a.nri(b,f,c,d):0===g?f:a.bS(b,e,h,c,d)};a.pc=function(b,c,d,e){this._p=!0;b==d&&c==e||a.csv(b,c)};b.easeIn=function(){return a.pB(.42,0,1,1)};b.easeOut=function(){return a.pB(0,0,.58,1)};b.easeInOut=function(){return a.pB(.5,.16,.49,.86)};b.easeInSine=function(){return a.pB(.47,0,.745,.715)};b.easeOutSine=function(){return a.pB(.39,.575,.565,1)};b.easeInOutSine=function(){return a.pB(.445,.05,.55,.95)};b.easeInQuad=function(){return a.pB(.55,.085,.68,.53)};b.easeOutQuad=function(){return a.pB(.25,.46,.45,.94)};b.easeInOutQuad=function(){return a.pB(.455,.03,.515,.955)};b.easeInCubic=function(){return a.pB(.55,.055,.675,.19)};b.easeOutCubic=function(){return a.pB(.215,.61,.355,1)};b.easeInOutCubic=function(){return a.pB(.645,.045,.355,1)};b.easeInQuart=function(){return a.pB(.895,.03,.685,.22)};b.easeOutQuart=function(){return a.pB(.165,.84,.44,1)};b.easeInOutQuart=function(){return a.pB(.77,0,.175,1)};b.easeInQuint=function(){return a.pB(.755,.05,.855,.06)};b.easeOutQuint=function(){return a.pB(.23,1,.32,1)};b.easeInOutQuint=function(){return a.pB(.86,0,.07,1)};b.easeInExpo=function(){return a.pB(.95,.05,.795,.035)};b.easeOutExpo=function(){return a.pB(.19,1,.22,1)};b.easeInOutExpo=function(){return a.pB(1,0,0,1)};b.easeInCirc=function(){return a.pB(.6,.04,.98,.335)};b.easeOutCirc=function(){return a.pB(.075,.82,.165,1)};b.easeInOutCirc=function(){return a.pB(.785,.135,.15,.86)};b.easeInBack=function(){return a.pB(.6,-.28,.735,.045)};b.easeOutBack=function(){return a.pB(.175,.885,.32,1.275)};b.easeInOutBack=function(){return a.pB(.68,-.55,.265,1.55)};b.slowMo=function(){return a.pB(0,.5,1,.5)};b.slowMo1=function(){return a.pB(0,.7,1,.3)};b.slowMo2=function(){return a.pB(0,.9,1,.1)};return b});
\ No newline at end of file
diff --git a/dist/kute-css.min.js b/dist/kute-css.min.js
index a1b826a..2f40381 100644
--- a/dist/kute-css.min.js
+++ b/dist/kute-css.min.js
@@ -1,2 +1,2 @@
 // CSS Plugin for KUTE.js | dnp_theme | 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){for(var r,e=window.KUTE,o=e.property("borderRadius"),i=e.property("borderTopLeftRadius"),n=e.property("borderTopRightRadius"),u=e.property("borderBottomLeftRadius"),d=e.property("borderBottomRightRadius"),a=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],v=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],l=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],p=["fontSize","lineHeight","letterSpacing","wordSpacing"],f=["clip"],g=["backgroundPosition"],_=v.concat(l,p),s=a.concat(f,v,l,p,g),c=s.length,b=b||{},m=0;c>m;m++)r=s[m],-1!==a.indexOf(r)?b[r]="rgba(0,0,0,0)":-1!==_.indexOf(r)?b[r]=0:-1!==g.indexOf(r)?b[r]=[50,50]:"clip"===r&&(b[r]=[0,0,0,0]);for(var m=0,S=a.length;S>m;m++)r=a[m],e.pp[r]=function(t,r){return t in e.dom||(e.dom[t]=function(t,r,o){var i={};for(var n in t._vE[r].value)"a"!==n?i[n]=parseInt(t._vS[r].value[n]+(t._vE[r].value[n]-t._vS[r].value[n])*o)||0:i[n]=t._vS[r].value[n]&&t._vE[r].value[n]?parseFloat(t._vS[r].value[n]+(t._vE[r].value[n]-t._vS[r].value[n])*o):null;t._hex?t._el.style[r]=e.rth(i.r,i.g,i.b):t._el.style[r]=!i.a||_isIE8?"rgb("+i.r+","+i.g+","+i.b+")":"rgba("+i.r+","+i.g+","+i.b+","+i.a+")"}),e.pp.cls(t,r)},e.prS[r]=function(t,r,o){return e.gCS(t,r)||b[r]};for(var m=0,S=_.length;S>m;m++)r=_[m],e.pp[r]=function(t,r){return t in e.dom||(e.dom[t]=function(t,r,e){t._el.style[r]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}),e.pp.box(t,r)},e.prS[r]=function(t,r,o){return e.gCS(t,r)||b[r]};for(var m=0,S=v.length;S>m;m++)r=v[m],e.pp[r]=function(t,r){return t in e.dom||("borderRadius"===t?e.dom[t]=function(t,r,e){t._el.style[o]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}:"borderTopLeftRadius"===t?e.dom[t]=function(t,r,e){t._el.style[i]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}:"borderTopRightRadius"===t?e.dom[t]=function(t,r,e){t._el.style[n]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}:"borderBottomLeftRadius"===t?e.dom[t]=function(t,r,e){t._el.style[u]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit}:"borderBottomRightRadius"===t&&(e.dom[t]=function(t,r,e){t._el.style[d]=t._vS[r].value+(t._vE[r].value-t._vS[r].value)*e+t._vE[r].unit})),e.pp.box(t,r)},e.prS[r]=function(t,r,o){return e.gCS(t,r)||b[r]};return e.pp.clip=function(t,r){if(t in e.dom||(e.dom[t]=function(t,r,e){var o=0,i=[];for(o;4>o;o++){var n=t._vS[r][o].v,u=t._vE[r][o].v,d=t._vE[r][o].u||"px";i[o]=n+(u-n)*e+d}t._el.style[r]="rect("+i+")"}),r instanceof Array)return[e.truD(r[0]),e.truD(r[1]),e.truD(r[2]),e.truD(r[3])];var o=r.replace(/rect|\(|\)/g,"");return o=/\,/g.test(o)?o.split(/\,/g):o.split(/\s/g),[e.truD(o[0]),e.truD(o[1]),e.truD(o[2]),e.truD(o[3])]},e.prS.clip=function(t,r,o){var i=e.gCS(t,r),n=e.gCS(t,"width"),u=e.gCS(t,"height");return/rect/.test(i)?i:[0,n,u,0]},e.pp.backgroundPosition=function(t,r){if(t in e.dom||(e.dom[t]=function(t,r,e){var o=t._vS[r].x.v,i=t._vE[r].x.v,n=t._vS[r].y.v,u=t._vE[r].y.v,d=o+(i-o)*e,a="%",v=n+(u-n)*e,l="%";t._el.style[r]=d+a+" "+v+l}),r instanceof Array)return{x:e.truD(r[0])||{v:50,u:"%"},y:e.truD(r[1])||{v:50,u:"%"}};var o,i,n=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g),n=2===n.length?n:[n[0],50],o=e.truD(n[0]),i=e.truD(n[1]),{x:o,y:i}},e.prS.backgroundPosition=function(t,r,o){return e.gCS(t,r)||b[r]},this});
\ No newline at end of file
+(function(h){if("function"===typeof define&&define.amd)define(["./kute.js"],function(a){h(a);return a});else if("object"==typeof module&&"function"==typeof require){var a=require("./kute.js");module.exports=h(a)}else if("undefined"!=typeof window.KUTE)h(a);else throw Error("CSS Plugin require KUTE.js.");})(function(h){var a=window.KUTE,c,g=a.dom,m=a.pp,t=a.property("borderRadius"),u=a.property("borderTopLeftRadius"),v=a.property("borderTopRightRadius"),w=a.property("borderBottomLeftRadius"),x=a.property("borderBottomRightRadius");h="borderColor borderTopColor borderRightColor borderBottomColor borderLeftColor outlineColor".split(" ");var p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"];c="right bottom minWidth minHeight maxWidth maxHeight padding margin paddingTop paddingBottom paddingLeft paddingRight marginTop marginBottom marginLeft marginRight borderWidth borderTopWidth borderRightWidth borderBottomWidth borderLeftWidth outlineWidth".split(" ");for(var b=["fontSize","lineHeight","letterSpacing","wordSpacing"],n=["backgroundPosition"],q=p.concat(c,b),r=h.concat(["clip"],p,c,b,n),y=r.length,k=a.Interpolate.unit,z=a.Interpolate.color,l=l||{},b=0;be;e++)g[e]=k(b[e].v,d[e].v,d[e].u||"px",f);a.style[c]="rect("+g+")"});if(d instanceof Array)return[a.truD(d[0]),a.truD(d[1]),a.truD(d[2]),a.truD(d[3])];var b=d.replace(/rect|\(|\)/g,""),b=/\,/g.test(b)?b.split(/\,/g):b.split(/\s/g);return[a.truD(b[0]),a.truD(b[1]),a.truD(b[2]),a.truD(b[3])]};a.prS.clip=function(c,b,e){b=a.gCS(c,b);e=a.gCS(c,"width");c=a.gCS(c,"height");return/rect/.test(b)?b:[0,e,c,0]};m.backgroundPosition=function(c,b){c in g||(g[c]=function(a,c,b,d,e){a.style[c]=k(b.x.v,d.x.v,"%",e)+" "+k(b.y.v,d.y.v,"%",e)});if(b instanceof Array)return{x:a.truD(b[0])||{v:50,u:"%"},y:a.truD(b[1])||{v:50,u:"%"}};var e=b.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50),h,e=/\,/g.test(e)?e.split(/\,/g):e.split(/\s/g),e=2===e.length?e:[e[0],50];h=a.truD(e[0]);e=a.truD(e[1]);return{x:h,y:e}};a.prS.backgroundPosition=function(c,b,e){return a.gCS(c,b)||l[b]};return this});
\ No newline at end of file
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
index ab51269..156fa14 100644
--- a/dist/kute-svg.min.js
+++ b/dist/kute-svg.min.js
@@ -1,2 +1,2 @@
 // SVG Plugin for KUTE.js | dnp_theme | MIT License
-!function(a){if("function"==typeof define&&define.amd)define(["./kute.js"],function(b){return a(b),b});else if("object"==typeof module&&"function"==typeof require){var b=require("./kute.js");module.exports=a(b)}else{if("undefined"==typeof window.KUTE)throw new Error("SVG Plugin require KUTE.js.");window.KUTE.svg=window.KUTE.svg||a(b)}}(function(a){"use strict";var d,b=window.KUTE,c=c||{},e=document.querySelector("path")||document.querySelector("svg"),f=e&&e.ownerSVGElement&&e.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg",g=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],h=["fill","stroke","stopColor"],i=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim;if(!e||e.ownerSVGElement){c.gPt=function(a){var b={},d="object"==typeof a?a:/^\.|^\#/.test(a)?document.querySelector(a):null;if(d&&/path|glyph/.test(d.tagName))b.e=c.fPt(d),b.o=d.getAttribute("d");else if(!d&&/[a-z][^a-z]*/gi.test(a)){var e=c.cP(a.trim());b.e=e,b.o=a}return b},c.pCr=function(a){this._mpr=a.morphPrecision||25,this._midx=a.morphIndex,this._smi=a.showMorphInfo,this._rv1=a.reverseFirstPath,this._rv2=a.reverseSecondPath;var e,b=c.gOp(a._vS.path.o),d=c.gOp(a._vE.path.o);this._isp=!/[CSQTA]/i.test(b)&&!/[CSQTA]/i.test(d),e=c._pCr(b,d,a._el.parentNode),a._vS.path.d=e[0],a._vE.path.d=e[1]},c._pCr=function(a,b,d){var e,f,g,h,i,j,k,l,o,q,r,s,n=[];if(this._sp=!1,this._isp)if(a=c.pTA(a),b=c.pTA(b),a.length!==b.length){i=Math.max(a.length,b.length),i===b.length?(j=a,k=b):(j=b,k=a),o=j.length,l=c.cP("M"+j.join("L")+"z"),q=l.getTotalLength()/i;for(var t=0;t2?b[0].trim()+"z":a.trim()},c.cP=function(a){var b=document.createElementNS(f,"path"),c="object"==typeof a?a.getAttribute("d"):a;return b.setAttribute("d",c),b},c.fPt=function(a){if("glyph"===a.tagName){var b=c.cP(a);return a.parentNode.appendChild(b),b}return a},c.clone=function(a){var b;if(a instanceof Array){b=[];for(var d=0,e=a.length;d1){var d=function(a){var b=a.split(",");if(2==b.length&&!isNaN(b[0])&&!isNaN(b[1]))return[parseFloat(b[0]),parseFloat(b[1])]},e=function(a,b){return void 0!=a&&void 0!=b?Math.sqrt(Math.pow(b[0]-a[0],2)+Math.pow(b[1]-a[1],2)):0};if(b.length>2)for(var f=0;fk;k++){g=e[k];d=g.length;h=0===k?{f:"DeepPink",o:"HotPink"}:{f:"Lime",o:"LimeGreen"};for(var n=0;nc+d?"0px, "+b+"px":c+d+"px, "+b+"px"});return d.gDr(c,b)};l.prS.draw=function(a,b,c){return d.gDr(a)};d.gL=function(a){if(/rect/.test(a.tagName))return d.gRL(a);if(/circle/.test(a.tagName))return d.gCL(a);if(/ellipse/.test(a.tagName))return d.gEL(a);if(/polygon|polyline/.test(a.tagName))return d.gPL(a);if(/line/.test(a.tagName))return d.gLL(a)};d.gRL=function(a){var b=a.getAttribute("width");a=a.getAttribute("height");return 2*b+2*a};d.gPL=function(a){a=a.getAttribute("points").split(" ");var b=0;if(1,./?=-").split(""),i=String("0123456789").split(""),o=e.concat(n,i),u=o.concat(r),s=Math.random,a=Math.floor,p=Math.min;return t.prS.text=t.prS.number=function(t,e,n){return t.innerHTML},t.pp.text=function(f,l,h){return"text"in t.dom||(t.dom.text=function(t,f,l){var h=h||"alpha"===t.textChars?e:"upper"===t.textChars?n:"numeric"===t.textChars?i:"alphanumeric"===t.textChars?o:"symbols"===t.textChars?r:"all"===t.textChars?u:t.textChars?t.textChars.split(""):e,c=h.length,m=t._vE[f],d=h[a(s()*c)],x="",g=m.substring(0);x=g.substring(0,a(p(l*g.length,g.length))),t._el.innerHTML=1>l?x+d:x}),l},t.pp.number=function(e,n,r){return"number"in t.dom||(t.dom.number=function(t,e,n){t._el.innerHTML=parseInt(t._vS[e]+(t._vE[e]-t._vS[e])*n)}),parseInt(n)||0},this});
\ No newline at end of file
+(function(b){if("function"===typeof define&&define.amd)define(["./kute.js"],function(a){b(a);return a});else if("object"==typeof module&&"function"==typeof require){var a=require("./kute.js");module.exports=b(a)}else if("undefined"!==typeof window.KUTE)b();else throw Error("Text-Plugin requires KUTE.js.");})(function(){var b=window.KUTE,a=b.dom,e=b.pp,t=b.Interpolate.number,d="abcdefghijklmnopqrstuvwxyz".split(""),l="ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),m="~!@#$%^&*()_+{}[];'<>,./?=-".split(""),n="0123456789".split(""),p=d.concat(l,n);p.concat(m);var u=Math.random,k=Math.floor,q=Math.min;b.prS.text=b.prS.number=function(b,a,d){return b.innerHTML};e.text=function(b,v,e){"text"in a||(a.text=function(b,a,h,r,f,c){var g=g||"alpha"===c.textChars?d:"upper"===c.textChars?l:"numeric"===c.textChars?n:"alphanumeric"===c.textChars?p:"symbols"===c.textChars?m:c.textChars?c.textChars.split(""):d;a=g.length;g=g[k(u()*a)];c=h.substring(0);a=r.substring(0);h=""!==h?c.substring(c.length,k(q(f*c.length,c.length))):"";a=a.substring(0,k(q(f*a.length,a.length)));b.innerHTML=1>f?a+g+h:r});return v};e.number=function(b,d,e){"number"in a||(a.number=function(a,b,d,e,f){a.innerHTML=parseInt(t(d,e,f))});return parseInt(d)||0};return this});
\ No newline at end of file
diff --git a/dist/kute.min.js b/dist/kute.min.js
index 42ca041..586f9b8 100644
--- a/dist/kute.min.js
+++ b/dist/kute.min.js
@@ -1,2 +1,33 @@
 // KUTE.js | dnp_theme | MIT-License
-!function(a){"function"==typeof define&&define.amd?define([],a):"object"==typeof exports?module.exports=a():window.KUTE=window.KUTE||a()}(function(){"use strict";var c,a=a||{},b=[],d=Math.min;a.getPrefix=function(){var a=document.createElement("div"),b=0,c=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],d=c.length,e=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"];for(b;b0)return b._r<9999&&b._r--,b._y&&(b.reversed=!b.reversed,b.rvs()),b._sT=b._y&&!b.reversed?c+b._rD:c,!0;b._cC&&b._cC.call(),b.scrollOut();var g=0,h=b._cT.length;for(g;g2?2:f,e=0;e0&&(c._r=c.repeat),c._y&&c.reversed===!0&&(c.rvs(),c.reversed=!1),c.playing=!1},64)},a.TweensTO=function(b,c,d){this.tweens=[];var e,f=b.length,g=[];for(e=0;e0?d.delay+(d.offset||0):d.delay,this.tweens.push(a.to(b[e],c,g[e]))},a.TweensFT=function(b,c,d,e){this.tweens=[];var f,g=b.length,h=[];for(f=0;f0?e.delay+(e.offset||0):e.delay,this.tweens.push(a.fromTo(b[f],c,d,h[f]))};var J=a.TweensTO.prototype=a.TweensFT.prototype;return J.start=function(a){a=a||window.performance.now();var b,c=this.tweens.length;for(b=0;ba._r&&a._r--,a._y&&(a.reversed=!a.reversed,a.rvs()),a._sT=a._y&&
+!a.reversed?b+a._rD:b;else{a._cC&&a._cC.call();a.scrollOut();d=0;c=a._cT.length;for(d;dp;p++){var y=q[p];/3d/.test(l)?U["translate"+y]=C.tf("translate"+y,w[l][p]):
+U["translate"+y]="translate"+y in w?C.tf("translate"+y,w["translate"+y]):{value:0,unit:"px"}}h.translate=U}else if(/^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(l)){var q=/rotate/.test(l)?"rotate":"skew",p=["X","Y","Z"],y=0,z="rotate"===q?m:f;for(y;3>y;y++){var k=p[y];void 0!==w[q+k]&&"skewZ"!==l&&(z[q+k]=C.tf(q+k,w[q+k]))}h[q]=z}else/(rotate|translate|scale)$/.test(l)&&(h[l]=C.tf(l,w[l]));t[c].transform=h}else"transform"!==l&&(-1!==R.indexOf(l)?t[c][l]=C.box(l,w[l]):-1!==ea.indexOf(l)||-1!==Q.indexOf(l)?
+t[c][l]=C.unl(l,w[l]):-1!==P.indexOf(l)?t[c][l]=C.cls(l,w[l]):l in u.pp&&(t[c][l]=u.pp[l](l,w[l],d)))}return t},C={box:function(a,b){a in x||(x[a]=function(a,b,g,t,w){a.style[b]=ha(g.value,t.value,t.unit,w)});return{value:h(b).v,unit:h(b).u}},tf:function(a,b){"transform"in x||(x.transform=function(a,b,c,d,f,m){b="";var h,u=u||m.perspective&&0!==parseInt(m.perspective)?"perspective("+parseInt(m.perspective)+"px) ":!1;for(h in d){var q=c[h];m=d[h];if("translate"===h){var p={},y;for(y in m){var z=q[y].value||
+0,k=m[y].value||0,n=m[y].unit||"px";p[y]=z===k?k+n:z+(k-z)*f+n}m=m.x?"translate("+p.x+","+p.y+")":"translate3d("+p.translateX+","+p.translateY+","+p.translateZ+")";b=""===b?m:m+" "+b}else if("rotate"===h){var p={},r;for(r in m)q[r]&&(k=q[r].value,z=m[r].unit||"deg",k+=(m[r].value-k)*f,p[r]="z"===r?"rotate("+k+z+")":r+"("+k+z+") ");m=m.z?p.z:(p.rotateX||"")+(p.rotateY||"")+(p.rotateZ||"");b=""===b?m:b+" "+m}else if("skew"===h){var p={},v;for(v in m)q[v]&&(z=q[v].value,p[v]=v+"("+(z+(m[v].value-z)*
+f)+(m[v].unit||"deg")+") ");m=(p.skewX||"")+(p.skewY||"");b=""===b?m:b+" "+m}else"scale"===h&&(q=q.value,m=h+"("+(q+(m.value-q)*f)+")",b=""===b?m:b+" "+m)}a.style[oa]=u?u+b:b});if("translate3d"===a){var d=b.split(",");return{translateX:{value:h(d[0]).v,unit:h(d[0]).u},translateY:{value:h(d[1]).v,unit:h(d[1]).u},translateZ:{value:h(d[2]).v,unit:h(d[2]).u}}}if(/^translate(?:[XYZ])$/.test(a))return{value:h(b).v,unit:h(b).u||"px"};if(/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(a))return{value:h(b,!0).v,unit:h(b,
+!0).u||"deg"};if("translate"===a){var d="string"===typeof b?b.split(","):b,c={};d instanceof Array?(c.x={value:h(d[0]).v,unit:h(d[0]).u},c.y={value:h(d[1]).v,unit:h(d[1]).u}):(c.x={value:h(d).v,unit:h(d).u},c.y={value:0,unit:"px"});return c}if("rotate"===a)return d={},d.z={value:h(b,!0).v,unit:h(b,!0).u||"deg"},d;if("scale"===a)return{value:parseFloat(b)}},unl:function(a,b){!/scroll/.test(a)||a in x?"opacity"===a&&(a in x||(x[a]=da?function(a,b,g,t,w){a.style.filter="alpha(opacity="+100*I(g,t,w)+
+")"}:function(a,b,g,t,w){a.style.opacity=I(g,t,w)})):x[a]=function(a,b,g,t,w){var l=l||void 0===a||null===a?ca:a;l.scrollTop=I(g,t,w)};return parseFloat(b)},cls:function(a,b){a in x||(x[a]=function(a,b,g,t,w,l){a.style[b]=ia(g,t,w,l.keepHex)});return M(b)}},f={},sa=Math.PI,D=2*Math.PI,la=Math.PI/2,n=.1;f.linear=function(a){return a};f.easingSinusoidalIn=function(a){return-Math.cos(a*la)+1};f.easingSinusoidalOut=function(a){return Math.sin(a*la)};f.easingSinusoidalInOut=function(a){return-.5*(Math.cos(sa*
+a)-1)};f.easingQuadraticIn=function(a){return a*a};f.easingQuadraticOut=function(a){return a*(2-a)};f.easingQuadraticInOut=function(a){return.5>a?2*a*a:-1+(4-2*a)*a};f.easingCubicIn=function(a){return a*a*a};f.easingCubicOut=function(a){return--a*a*a+1};f.easingCubicInOut=function(a){return.5>a?4*a*a*a:(a-1)*(2*a-2)*(2*a-2)+1};f.easingQuarticIn=function(a){return a*a*a*a};f.easingQuarticOut=function(a){return 1- --a*a*a*a};f.easingQuarticInOut=function(a){return.5>a?8*a*a*a*a:1-8*--a*a*a*a};f.easingQuinticIn=
+function(a){return a*a*a*a*a};f.easingQuinticOut=function(a){return 1+--a*a*a*a*a};f.easingQuinticInOut=function(a){return.5>a?16*a*a*a*a*a:1+16*--a*a*a*a*a};f.easingCircularIn=function(a){return-(Math.sqrt(1-a*a)-1)};f.easingCircularOut=function(a){return Math.sqrt(1- --a*a)};f.easingCircularInOut=function(a){return 1>(a*=2)?-.5*(Math.sqrt(1-a*a)-1):.5*(Math.sqrt(1-(a-=2)*a)+1)};f.easingExponentialIn=function(a){return Math.pow(2,10*(a-1))-.001};f.easingExponentialOut=function(a){return 1-Math.pow(2,
+-10*a)};f.easingExponentialInOut=function(a){return 1>(a*=2)?.5*Math.pow(2,10*(a-1)):.5*(2-Math.pow(2,-10*(a-1)))};f.easingBackIn=function(a){return a*a*(2.70158*a-1.70158)};f.easingBackOut=function(a){return--a*a*(2.70158*a+1.70158)+1};f.easingBackInOut=function(a){return 1>(a*=2)?.5*a*a*(3.5949095*a-2.5949095):.5*((a-=2)*a*(3.5949095*a+2.5949095)+2)};f.easingElasticIn=function(a){var b;if(0===a)return 0;if(1===a)return 1;!n||1>n?(n=1,b=.1):b=.4*Math.asin(1/n)/D;return-(n*Math.pow(2,10*--a)*Math.sin((a-
+b)*D/.4))};f.easingElasticOut=function(a){var b;if(0===a)return 0;if(1===a)return 1;!n||1>n?(n=1,b=.1):b=.4*Math.asin(1/n)/D;return n*Math.pow(2,-10*a)*Math.sin((a-b)*D/.4)+1};f.easingElasticInOut=function(a){var b;if(0===a)return 0;if(1===a)return 1;!n||1>n?(n=1,b=.1):b=.4*Math.asin(1/n)/D;return 1>(a*=2)?-.5*n*Math.pow(2,10*--a)*Math.sin((a-b)*D/.4):n*Math.pow(2,-10*--a)*Math.sin((a-b)*D/.4)*.5+1};f.easingBounceIn=function(a){return 1-f.easingBounceOut(1-a)};f.easingBounceOut=function(a){return a<
+1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375};f.easingBounceInOut=function(a){return.5>a?.5*f.easingBounceIn(2*a):.5*f.easingBounceOut(2*a-1)+.5};var H=function(a,b,d,c){this._el=a;this._vSR={};this._vS=b;this._vE=d;this._y=c.yoyo||!1;this.paused=this.reversed=this.playing=!1;this._pST=this._sT=null;this._hex=c.keepHex||!1;this._rpr=c.rpr||!1;this._dr=c.duration||700;this._r=c.repeat||0;this._rD=c.repeatDelay||0;this._dl=
+c.delay||0;this._to=c.transformOrigin;this._pp=c.perspective&&0!==parseInt(c.perspective)?"perspective("+parseInt(c.perspective)+"px) ":!1;this._ppo=c.perspectiveOrigin;this._ppp=c.parentPerspective;this._pppo=c.parentPerspectiveOrigin;this._e=c&&c.easing&&"function"===typeof O(c.easing)?O(c.easing):f.linear;this._cT=[];this._sCF=!1;this._sC=c.start||null;this._uC=c.update||null;this._cC=c.complete||null;this._pC=c.pause||null;this._rC=c.play||null;this._stC=c.stop||null;this.repeat=this._r;this._ops=
+{};for(var g in c)g in this||/delay|duration|repeat|origin|start|stop|update|complete|pause|play|yoyo|easing/i.test(g)||(this._ops[g]=c[g]);this.pause=function(){!this.paused&&this.playing&&(ka(this),this.paused=!0,this._pST=window.performance.now(),null!==this._pC&&this._pC.call());return this};this.stop=function(){!this.paused&&this.playing&&(ka(this),this.paused=this.playing=!1,this.scrollOut(),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),this.close());return this};this.rvs=function(){if(this._y)for(var a in this._vE){var b=
+this._vSR[a];this._vSR[a]=this._vE[a];this._vE[a]=b;this._vS[a]=this._vSR[a]}};this.chain=function(){this._cT=arguments;return this};this.stopChainedTweens=function(){var a=0,b=this._cT.length;for(a;ax;x++)for(h=0;3>h;h++)q=g[x]+f[h],-1!==G.indexOf(q)&&q in c&&(a[q]=
+d[q]||v[q])}else-1===Q.indexOf(k)?"opacity"===k&&da?(h=N(b,"filter"),a.opacity="number"===typeof h?h:v.opacity):-1!==S.indexOf(k)?a[k]=N(b,k)||x[k]:a[k]=k in u.prS?u.prS[k](b,k,c[k]):0:a[k]=null===b||void 0===b?window.pageYOffset||ca.scrollTop:b.scrollTop;for(k in d)-1===G.indexOf(k)||k in c||(a[k]=d[k]||v[k]);return a};this.close=function(){var a=this;setTimeout(function(){B.indexOf(a)===B.length-1&&(E&&qa(E),E=null);0 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/kute.js b/kute.js
index c82329b..5ed87f7 100644
--- a/kute.js
+++ b/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

From 9ed385e4c284fc99a3f981804b7b57952b0bea47 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 3 Sep 2016 18:35:49 +0300
Subject: [PATCH 169/471] Fixed issue with text-plugin
 https://github.com/thednp/kute.js/issues/36 Improved overall performance
 https://github.com/thednp/kute.js/issues/34 Fixed some issues with SVG Plugin
 https://github.com/thednp/kute.js/issues/33 Documentation updates

---
 assets/css/kute.css   |   13 +-
 assets/js/css.js      |    8 +-
 assets/js/easing.js   |    2 +-
 assets/js/examples.js |   10 +-
 assets/js/kute-bs.js  |   24 +-
 assets/js/svg.js      |   79 ++-
 assets/js/text.js     |    2 +-
 css.html              |    4 +-
 extend.html           |   31 +-
 properties.html       |   30 +-
 src/kute-attr.js      |   27 +-
 src/kute-bezier.js    |   20 -
 src/kute-css.js       |  100 ++--
 src/kute-svg.js       |  245 +++++----
 src/kute-text.js      |   40 +-
 src/kute.js           | 1100 ++++++++++++++++++++---------------------
 svg.html              |   95 +++-
 17 files changed, 957 insertions(+), 873 deletions(-)

diff --git a/assets/css/kute.css b/assets/css/kute.css
index a9ced15..3bc23ca 100644
--- a/assets/css/kute.css
+++ b/assets/css/kute.css
@@ -96,17 +96,18 @@ footer p {margin: 0 0 10px}
 /* example box */
 .example-box {
 	font-size: 40px; line-height: 150px; text-align:center; font-weight: bold; 
-	width: 150px; height: 150px; float: left; position:relative; 
+	float: left; position:relative; 
+	width: 150px; height: 150px; 
 	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-box-model {
-    font-size: 40px; text-align:center; font-weight: bold; 
+/*.example-box-model {
+	font-size: 40px; text-align:center; font-weight: bold; 
 	float: left; position:relative; 
 	border-radius: 5px; margin: 0 20px 20px 0;
 }
 
+svg.example-box { width: auto; height: auto; }*/
+
 .easing-example {float: none; font-size: 24px; width: 320px}
 .example-buttons {position: absolute; top: 18px; right:0}
 
@@ -114,7 +115,7 @@ footer p {margin: 0 0 10px}
 h1.example-item {
     font-size: 50px;
     line-height:50px;
-    color: #fff;
+    color: #333;
 }
 
 h1.example-item span {
diff --git a/assets/js/css.js b/assets/js/css.js
index 7249401..97f1455 100644
--- a/assets/js/css.js
+++ b/assets/js/css.js
@@ -25,7 +25,7 @@ var boxModel = document.getElementById('boxModel'),
 // 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,{padding:30},{ yoyo: true, repeat: 1, duration: 1500, update: onPadding});
+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
@@ -37,7 +37,7 @@ bm3.chain(bm4);
 //callback functions
 function onMarginTop() { var css = KUTE.gCS(box,'marginTop'); box.innerHTML = parseInt(css)+'px'+'
    MARGIN'; }
 function onMarginBottom() { var css = KUTE.gCS(box,'marginBottom'); box.innerHTML = 'MARGIN
    '+parseInt(css)+'px'; }
-function onPadding() { var css = KUTE.gCS(box,'paddingTop'); box.innerHTML = 'PADDING
    '+parseInt(css)+'px'; }
+function onPadding() { var css = KUTE.gCS(box,'paddingTop'); box.innerHTML = parseInt(css)+'px
    PADDING'; }
 function onMargin() { var css = KUTE.gCS(box,'marginTop'); box.innerHTML = 'MARGIN
    '+parseInt(css)+'px'; }
 function onComplete() { box.innerHTML = 'BOX
     MODEL '; }
 
@@ -115,16 +115,18 @@ var colTween2 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1
 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 && colTween1.start();
+	!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing && !colTween5.playing && !colTween6.playing && colTween1.start();
 },false);
 /*  COLORS EXAMPLE  */
 
diff --git a/assets/js/easing.js b/assets/js/easing.js
index 370c12c..25e4c8b 100644
--- a/assets/js/easing.js
+++ b/assets/js/easing.js
@@ -39,7 +39,7 @@ for (var j=0; jsuper simple write text demo."}, {duration: 3000, easing: 'easingBounceOut'});
+    headTween = KUTE.to(headText, {text: "This is a super simple write text demo."}, {repeat: 1, yoyo: true, duration: 5000, easing: 'easingBounceOut'});
 headBtn.addEventListener('click', function(){
     !headTween.playing && headTween.start();
 }, false);   
diff --git a/css.html b/css.html
index 915032c..7460857 100644
--- a/css.html
+++ b/css.html
@@ -118,7 +118,7 @@ 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 
    +
    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

     -

    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/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js index 53afba2..878f23a 100644 --- a/demo/src/kute-attr.min.js +++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js index 5c83940..eb64322 100644 --- a/demo/src/kute-svg.min.js +++ b/demo/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.
        • diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js index 53afba2..878f23a 100644 --- a/dist/kute-attr.min.js +++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js index 5c83940..eb64322 100644 --- a/dist/kute-svg.min.js +++ b/dist/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;e -1 ) { + if (!(p in atts)) { + atts[p] = function(l,u,a,b,v) { + var _u = _u || replaceUppercase(u); + l.setAttribute(_u, color(a,b,v,o.keepHex)); + } + } + ats[p] = trueColor(o[p]); } else { if (!(p in atts)) { atts[p] = function(l,o,a,b,v) { diff --git a/kute-svg.js b/kute-svg.js index 1a14598..8e3de75 100644 --- a/kute-svg.js +++ b/kute-svg.js @@ -15,7 +15,7 @@ module.exports = factory(KUTE); } else if ( typeof window.KUTE !== 'undefined' ) { // Browser globals - window.KUTE.svg = window.KUTE.svg || factory(KUTE); + window.KUTE.svg = factory(KUTE); } else { throw new Error("SVG Plugin require KUTE.js."); } @@ -141,7 +141,7 @@ return p; }, showCircles = 1, - S = K.svg = { + S = { showStartingPoints : function(s,e,v){ // showPoints helper function to visualize the points on the path if (showCircles){ var c, a = arguments, cl, p, l; @@ -404,6 +404,15 @@ } return c; }, + translate = g.Interpolate.translateSVG = function (s,e,a,b,v){ // translate(i+'(',')',a[i],b[i],v) + return s + ((a[1] === b[1] && b[1] === 0 ) ? number(a[0],b[0],v) : number(a[0],b[0],v) + ' ' + number(a[1],b[1],v)) + e; + }, + rotate = g.Interpolate.rotateSVG = function (s,e,a,b,v){ + return s + (number(a[0],b[0],v) + ' ' + b[1] + ',' + b[2]) + e; + }, + scaleOrSkew = g.Interpolate.stfSVG = function (s,e,a,b,v){ // scale / skew + return s + number(a,b,v) + e; + }, stackTransform = function (w){ // helper function that helps preserve current transform properties into the objects var bb = w._el.getBBox(), ctr = parseTransform(w._el.getAttribute('transform')), r, t, i, cx = bb.x + bb.width/2, cy = bb.y + bb.height/2; @@ -439,22 +448,23 @@ // register the render function if (!('svgTransform' in DOM)) { DOM['svgTransform'] = function(l,p,a,b,v){ - var tr = '', i; - for (i in b){ - tr += i + '('; // start string + var tl = '', rt = '', sx = '', sy = '', s = ''; + + for (var i in b){ if ( i === 'translate'){ // translate - 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); + tl += translate(i+'(',')',a[i],b[i],v); } else if ( i === 'rotate'){ // rotate - tr += number(a[i][0],b[i][0],v) + ' '; - tr += b[i][1] + ',' + b[i][2]; - } else { // scale, skewX or skewY - tr += number(a[i],b[i],v); + rt += rotate(i+'(',')',a[i],b[i],v); + } else if ( i === 'scale'){ // scale + s += scaleOrSkew(i+'(',')',a[i],b[i],v); + } else if ( i === 'skewX'){ // skewX + sx += scaleOrSkew(i+'(',')',a[i],b[i],v); + } else if ( i === 'skewY'){ // skewY + sy += scaleOrSkew(i+'(',')',a[i],b[i],v); } - tr += ') '; // end string } - l.setAttribute('transform', tr.trim() ); + + l.setAttribute('transform', (tl+s+rt+sx+sy) ); } } diff --git a/kute.js b/kute.js index d8db011..54e7b9e 100644 --- a/kute.js +++ b/kute.js @@ -57,13 +57,13 @@ return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: y*1 }; } } - if (/#/.test(v)) { + if (/^#/.test(v)) { vrgb = hexToRGB(v); return { r: vrgb.r, g: vrgb.g, b: vrgb.b }; } if (/transparent|none|initial|inherit/.test(v)) { return { r: 0, g: 0, b: 0, a: 0 }; } - if (!/#|rgb/.test(v) ) { // maybe we can check for web safe colors + if (!/^#|^rgb/.test(v) ) { // maybe we can check for web safe colors var h = document.getElementsByTagName('head')[0]; h.style.color = v; vrgb = g.getComputedStyle(h,null).color; h.style.color = ''; return v !== vrgb ? trueColor(vrgb) : {r:0,g:0,b:0}; } From cafb243a362f3e09ec25ead75385d37f680081d6 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 24 Sep 2016 06:02:25 +0300 Subject: [PATCH 220/471] 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 f2eff7ddbe4994318ffedd03192d55cfc43933cf Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 24 Sep 2016 10:39:04 +0300 Subject: [PATCH 221/471] 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 --- bower.json | 2 +- demo/assets/js/kute-bs.js | 85 +++++++++++----------- demo/extend.html | 132 +++++++++++++++++------------------ demo/src/kute-attr.min.js | 2 +- demo/src/kute-bezier.min.js | 2 +- demo/src/kute-css.min.js | 2 +- demo/src/kute-jquery.min.js | 2 +- demo/src/kute-physics.min.js | 2 +- demo/src/kute-svg.min.js | 2 +- demo/src/kute-text.min.js | 2 +- demo/src/kute.min.js | 4 +- dist/kute-attr.min.js | 2 +- dist/kute-bezier.min.js | 2 +- dist/kute-css.min.js | 2 +- dist/kute-jquery.min.js | 2 +- dist/kute-physics.min.js | 2 +- dist/kute-svg.min.js | 2 +- dist/kute-text.min.js | 2 +- dist/kute.min.js | 4 +- kute.js | 4 +- package.json | 2 +- 21 files changed, 128 insertions(+), 133 deletions(-) diff --git a/bower.json b/bower.json index 5afc45c..a87b80b 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KUTE.js", - "version": "1.5.7", + "version": "1.5.8", "homepage": "http://thednp.github.io/kute.js", "authors": [ "thednp" diff --git a/demo/assets/js/kute-bs.js b/demo/assets/js/kute-bs.js index d591ec6..c57c7a6 100644 --- a/demo/assets/js/kute-bs.js +++ b/demo/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/demo/extend.html b/demo/extend.html index 0e7a0af..0f1a80b 100644 --- a/demo/extend.html +++ b/demo/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}); + diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js index 1db299e..5e98bb3 100644 --- a/dist/kute-attr.min.js +++ b/dist/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © 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.prS,u=n.pp,a=r.Interpolate.unit,f=r.Interpolate.number,s=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};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]=l.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={};for(var u in r){var b=v(u),g=c(n,b.replace(/_+[a-z]+/,""));if(l.indexOf(b)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(g))){var y=d(g).u||d(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;u+A in e||(e[u+A]=function(t,e,r,n,i){var o=o||v(e).replace(A,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),o[u+A]=d(r[u])}else l.indexOf(b)>-1?(u in e||(e[u]=function(t,e,n,i,o){var u=u||v(e);t.setAttribute(u,s(n,i,o,r.keepHex))}),o[u]=p(r[u])):(u in e||(e[u]=function(t,e,r,n,i){var o=o||v(e);t.setAttribute(o,f(r,n,i))}),o[u]=parseFloat(r[u]))}return o}}); \ No newline at end of file +// 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 diff --git a/dist/kute-bezier.min.js b/dist/kute-bezier.min.js deleted file mode 100644 index b5a4b56..0000000 --- a/dist/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/dist/kute-css.min.js b/dist/kute-css.min.js index 60926c0..290ae4f 100644 --- a/dist/kute-css.min.js +++ b/dist/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © 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,i=e.pp,n=e.prS,d=e.gCS,u=e.truD,f=e.truC,a=e.property("borderRadius"),p=e.property("borderTopLeftRadius"),g=e.property("borderTopRightRadius"),l=e.property("borderBottomLeftRadius"),c=e.property("borderBottomRightRadius"),s=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],b=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],v=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],y=["backgroundPosition"],R=b.concat(h,v),T=s.concat(m,b,h,v,y),x=T.length,B=(r.Interpolate.number,r.Interpolate.unit),L=r.Interpolate.color,C=C||{},W=0;W1?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/dist/kute-physics.min.js b/dist/kute-physics.min.js deleted file mode 100644 index 26cdafe..0000000 --- a/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js index bff3581..b2ad32a 100644 --- a/dist/kute-svg.min.js +++ b/dist/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © 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.pp,s=r.prS,i=r.gCS,o=!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1),l=r.truC,u=r.truD,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.Interpolate.number,c=e.Interpolate.unit,d=e.Interpolate.color,m=e.Interpolate.array=function(t,e,r,n){var a,s=[];for(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])]},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])]},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;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},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=parseInt(s(n,r,i))}),parseInt(e)||0},this}); \ No newline at end of file +// KUTE.js v1.5.97 | © 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,s=n.parseProperty,u=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},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/dist/kute.min.js b/dist/kute.min.js index 61b8880..3bb9047 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © 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={},n=t._tweens=[],r=null,i=t.performance,a=(function(){for(var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],r=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"],e=0,i=n.length;e0)return t._r<9999?t._r--:t._r=0,t._y&&(t.reversed=!t.reversed,J.call(t)),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),et.call(t);for(var a=0,s=t._cT.length;a0&&(this._r=this.repeat),this._y&&this.reversed===!0&&(J.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||_()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(m,c,!1),document.removeEventListener(w,c,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(m,c,!1),document.addEventListener(w,c,!1),document.body.setAttribute("data-tweening","scroll"))},rt=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]():t.Ease[e]()}},it={},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,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)))},at.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)},at.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)},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 st=function(t){nt.call(this),W(this._el,this._ops),this._rpr&&this.getStartValues(),e.svg&&e.svq(this);for(var n in this._vE)this._vSR[n]=this._vS[n];return d(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=t||i.now(),this._sT+=this._dl,this._sCF||(this._sC&&this._sC.call(),this._sCF=!0),!r&&U(),this},ot=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=i.now()-this._pST,d(this),!r&&U()),this},ut=t._tween=function(e,n,r,a){this._el=e,this._vSR={},this._vS=n,this._vE=r,this._y=a.yoyo||!1,this.playing=!1,this.reversed=!1,this.paused=!1,this._sT=null,this._pST=null,this._rpr=a.rpr||!1,this._dr=a.duration||700,this._r=a.repeat||0,this._rD=a.repeatDelay||0,this._dl=a.delay||0,this._e=a&&a.easing&&"function"==typeof rt(a.easing)?rt(a.easing):at.linear,this._cT=[],this._sCF=!1,this._sC=a.start||null,this._uC=a.update||null,this._cC=a.complete||null,this._pC=a.pause||null,this._rC=a.play||null,this._stC=a.stop||null,this.repeat=this._r,this._ops={},this.start=st,this.play=ot,this.resume=ot;for(var s in a)s in this||/delay|rpr|duration|repeat|start|stop|update|complete|pause|play|yoyo|easing/i.test(s)||(this._ops[s]=a[s]);this.pause=function(){return!this.paused&&this.playing&&(g(this),this.paused=!0,this._pST=i.now(),null!==this._pC&&this._pC.call()),this},this.stop=function(){return!this.paused&&this.playing&&(g(this),this.playing=!1,this.paused=!1,et.call(this),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this._cT=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this._cT.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ft(t[i],e,r[i]))},ct=function(t,e,n,r){this.tweens=[];for(var i=[],a=0,s=t.length;a0?r.delay+(r.offset||0):r.delay,this.tweens.push(ht(t[a],e,n,i[a]))},ft=(lt.prototype=ct.prototype={start:function(t){t=t||i.now();for(var e=0,n=this.tweens.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;n -1 ) { - if (!(p in atts)) { - atts[p] = function(l,u,a,b,v) { - var _u = _u || replaceUppercase(u); - l.setAttribute(_u, color(a,b,v,o.keepHex)); + if (!(prop in atts)) { + atts[prop] = function(l,u,a,b,v) { + l.setAttribute(u, color(a,b,v,o.keepHex)); } } - ats[p] = trueColor(o[p]); + ats[prop] = trueColor(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)); + if (!(prop in atts)) { + atts[prop] = function(l,o,a,b,v) { + l.setAttribute(o, number(a,b,v)); } } - ats[p] = parseFloat(o[p]); + ats[prop] = parseFloat(o[p]); } } return ats; diff --git a/kute-bezier.js b/kute-bezier.js deleted file mode 100644 index 4132ba6..0000000 --- a/kute-bezier.js +++ /dev/null @@ -1,175 +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 (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' ) { - // Browser globals - root.Ease = factory(root.KUTE); - } else { - throw new Error("Bezier Easing functions depend on KUTE.js"); - } -}(this, function (KUTE) { - 'use strict'; - - var g = typeof global !== 'undefined' ? global : window, E = {}; - E.Bezier = g.Bezier = function(mX1, mY1, mX2, mY2) { - return _bz.pB(mX1, mY1, mX2, mY2); - }; - - var _bz = E.Bezier.prototype = g.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 g; // float32ArraySupported - _bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values - - _bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }; - _bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }; - _bz.C = function(aA1) { return 3.0 * aA1; }; - - _bz.pB = function (mX1, mY1, mX2, mY2) { - this._p = false; var self = this; - - return function(aX){ - if (!self._p) _bz.pc(mX1, mX2, mY1, mY2); - if (mX1 === mY1 && mX2 === mY2) return aX; - - if (aX === 0) return 0; - if (aX === 1) return 1; - return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2); - }; - }; - - // 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); - }; - - g.Ease = {}; // export these functions to global for best performance - - // predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart' - // _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"], - g.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); }; - g.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); }; - g.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); }; - - g.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); }; - g.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); }; - g.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); }; - - g.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); }; - g.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); }; - g.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); }; - - g.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); }; - g.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); }; - g.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); }; - - g.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); }; - g.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); }; - g.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); }; - - g.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); }; - g.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); }; - g.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); }; - - g.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); }; - g.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); }; - g.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); }; - - g.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); }; - g.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); }; - g.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); }; - - g.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); }; - g.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); }; - g.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); }; - - g.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); }; - g.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); }; - g.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); }; - - return E; -})); diff --git a/kute-css.js b/kute-css.js index 1599266..5c4a647 100644 --- a/kute-css.js +++ b/kute-css.js @@ -16,38 +16,38 @@ })(this, function(KUTE){ 'use strict'; - var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom, parseProperty = K.pp, prepareStart = K.prS, - getCurrentStyle = K.gCS, trueDimension = K.truD, trueColor = K.truC, - _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 = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color, - _d = _d || {}; //all properties default values + var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom, + parseProperty = K.parseProperty, prepareStart = K.prepareStart, property = K.property, + getCurrentStyle = K.getCurrentStyle, trueDimension = K.truD, trueColor = K.truC, + number = g._number, unit = g._unit, color = g._color, + _colors = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0) + _radius = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any + _boxModel = ['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 + _textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties + _clip = ['clip'], _bg = ['backgroundPosition'], // clip | background position + _mergeTextAndBox = _boxModel.concat(_textProperties), // a merge of all properties with px|%|em|rem|etc unit + _mergeUnits = _radius.concat(_boxModel,_textProperties), // a merge of all properties with px|%|em|rem|etc unit + _all = _colors.concat(_clip, _radius, _boxModel, _textProperties, _bg), al = _all.length, + _defaults = _defaults || {}; //all properties default values //populate default values object for ( var i=0; i< al; i++ ){ - if (_cls.indexOf(_all[i]) !== -1){ - _d[_all[i]] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1}; - } else if ( _mg.indexOf(_all[i]) !== -1 ) { - _d[_all[i]] = 0; + if (_colors.indexOf(_all[i]) !== -1){ + _defaults[_all[i]] = 'rgba(0,0,0,0)'; // _defaults[p] = {r:0,g:0,b:0,a:1}; + } else if ( _mergeUnits.indexOf(_all[i]) !== -1 ) { + _defaults[_all[i]] = 0; } else if ( _bg.indexOf(_all[i]) !== -1 ){ - _d[_all[i]] = [50,50]; + _defaults[_all[i]] = [50,50]; } else if ( _all[i] === 'clip' ){ - _d[_all[i]] = [0,0,0,0]; + _defaults[_all[i]] = [0,0,0,0]; } } // create prepare/process/render functions for additional colors properties - for (var i = 0, l = _cls.length; i 0.001) { - L = curve.b - curve.a; - curve = { - a: curve.b, - b: curve.b + L * bounciness, - H: curve.H * bounciness * bounciness - }; - } - return curve.b; - })(); - - (function() { - var L2, b, curve, _results; - b = Math.sqrt(2 / (gravity * L * L)); - curve = { - a: -b, - b: b, - H: 1 - }; - if (initialForce) { - curve.a = 0; - curve.b = curve.b * 2; - } - curves.push(curve); - L2 = 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; - })(); - return 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, L); - } - return v; - }; - }; - - var _kpg = P.gravity.prototype = g.gravity.prototype; - _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 = g.forceWithGravity = function(o) { - var ops = o || {}; - ops.initialForce = true; - return P.gravity(ops); - }; - - // multi point bezier - P.bezier = g.BezierMultiPoint = 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; - })(); - - return function(t) { - if (t === 0) { - return 0; - } else if (t === 1) { - return 1; - } else { - return _kpb.yForX(t, Bs, returnsToSelf); - } - }; - }; - - var _kpb = P.bezier.prototype = g.BezierMultiPoint.prototype; - - _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; - }; - - // export predefined BezierMultiPoint functions to window - g.Physics = { - physicsInOut : function(options) { - var friction; - options = options || {}; - friction = options.friction|| 200; - return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] }); - }, - physicsIn : function(options) { - var friction; - options = options || {}; - friction = options.friction|| 200; - return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] }); - }, - physicsOut : function(options) { - var friction; - options = options || {}; - friction = options.friction|| 200; - return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] }); - }, - physicsBackOut : function(options) { - var friction; - options = options || {}; - friction = options.friction|| 200; - return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:0.735+(friction/1000),y:1.3}]}] }); - }, - physicsBackIn : function(options) { - var friction; - options = options || {}; - friction = options.friction|| 200; - return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0.28-(friction / 1000),y:-0.6}]},{x:1,y:1,cp:[{x:1,y:1}]}] }); - }, - physicsBackInOut : function(options) { - var friction; - options = options || {}; - friction = options.friction|| 200; - return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0.68-(friction / 1000),y:-0.55}]},{x:1,y:1,cp:[{x:0.265+(friction / 1000),y:1.45}]}] }); - } - }; - - return P; -}); diff --git a/kute-svg.js b/kute-svg.js index 3dc45fe..fa3f3ea 100644 --- a/kute-svg.js +++ b/kute-svg.js @@ -19,22 +19,23 @@ 'use strict'; // variables, reference global objects, prepare properties - var g = typeof global !== 'undefined' ? global : window, K = KUTE, p, DOM = g.dom, parseProperty = K.pp, prepareStart = K.prS, getCurrentStyle = K.gCS, - _isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false, + var g = typeof global !== 'undefined' ? global : window, K = KUTE, p, + DOM = g.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle, trueColor = K.truC, trueDimension = K.truD, - _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) + _isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false, + _numeric = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props + _colors = ['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', - number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolate functions - array = g.Interpolate.array = function array(a,b,l,v) { // array1, array2, array2.length, progress - var na = [], i; - for(i=0;i,./?\=-").split(""), // symbols - _n = String("0123456789").split(""), // numeric - _a = _s.concat(_S,_n), // alpha numeric - _all = _a.concat(_sb), // all caracters + var g = typeof global !== 'undefined' ? global : window, + K = KUTE, DOM = g.dom, prepareStart = K.prepareStart, + parseProperty = K.parseProperty, number = g._number, + _string = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase + _stringUppercase = String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""), // uppercase + _symbols = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols + _numeric = String("0123456789").split(""), // numeric + _alphanumeric = _string.concat(_stringUppercase,_numeric), // alpha numeric + _all = _alphanumeric.concat(_symbols), // all caracters random = Math.random, floor = Math.floor, min = Math.min; prepareStart['text'] = prepareStart['number'] = function(l,p,v){ @@ -33,13 +34,13 @@ 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 + var tp = tp || o.textChars === 'alpha' ? _string // textChars is alpha + : o.textChars === 'upper' ? _stringUppercase // textChars is numeric + : o.textChars === 'numeric' ? _numeric // textChars is numeric + : o.textChars === 'alphanumeric' ? _alphanumeric // textChars is alphanumeric + : o.textChars === 'symbols' ? _symbols // textChars is symbols : o.textChars ? o.textChars.split('') // textChars is a custom text - : _s, ll = tp.length, + : _string, 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 ? this is definatelly a to do diff --git a/kute.js b/kute.js index 9a51a60..11d47a1 100644 --- a/kute.js +++ b/kute.js @@ -14,7 +14,9 @@ "use strict"; // set a custom scope for KUTE.js - var g = typeof global !== 'undefined' ? global : window, K = {}, _tws = g._tweens = [], tick = null, time = g.performance, + var g = typeof global !== 'undefined' ? global : window, time = g.performance, + K = {}, _tws = g._tweens = [], tick = null, + // tools / utils getPrefix = function() { //returns browser prefix var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform']; @@ -25,10 +27,10 @@ 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; + selector = function(el,multi){ // a public selector utility + var nl; if (multi){ - nl = typeof el === 'object' ? el : document.querySelectorAll(el); + nl = el instanceof Object || typeof el === 'object' ? el : document.querySelectorAll(el); } else { nl = typeof el === 'object' ? el : /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el); @@ -43,7 +45,7 @@ return { v: x, u: y }; }, trueColor = function (v) { // replace transparent and transform any color to rgba()/rgb() - if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized + if (/rgb|rgba/.test(v)) { // first check if it's a rgb string var vrgb = v.replace(/[^\d,]/g, '').split(','), y = vrgb[3] ? vrgb[3] : null; if (!y) { return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) }; @@ -81,15 +83,15 @@ }, getInlineStyle = function(el,p) { // getInlineStyle = get transform style for element from cssText for .to() method, the sp is for transform property if (!el) return; // if the scroll applies to `window` it returns as it has no styling - var css = css || el.style.cssText.replace(/\s/g,'').split(';'),//the cssText + var css = el.style.cssText.replace(/\s/g,'').split(';'),//the cssText trsf = {}; //the transform object // if we have any inline style in the cssText attribute, usually it has higher priority for ( var i=0, csl = css.length; i 0) { - if ( w._r < 9999 ) { w._r--; } else { w._r = 0; } // we have to make it stop somewhere, infinity is too damn much + if (w.options.repeat > 0) { + if ( w.options.repeat < 9999 ) { w.options.repeat--; } else { w.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much - if (w._y) { w.reversed = !w.reversed; reverse.call(w); } // handle yoyo + if (w.options.yoyo) { w.reversed = !w.reversed; reverse.call(w); } // handle yoyo - w._sT = (w._y && !w.reversed) ? t + w._rD : t; //set the right time for delay + w._startTime = (w.options.yoyo && !w.reversed) ? t + w.options.repeatDelay : t; //set the right time for delay return true; } else { - if (w._cC) { w._cC.call(); } + if (w.options.complete) { w.options.complete.call(); } scrollOut.call(w); // unbind preventing scroll when scroll tween finished // start animating chained tweens - for (var i = 0, ctl = w._cT.length; i < ctl; i++) { - w._cT[i].start(); + for (var i = 0, ctl = w.options.chain.length; i < ctl; i++) { + w.options.chain[i].start(); } //stop ticking when finished close.call(w); @@ -274,7 +277,7 @@ preparePropertiesObject = function (t, l) { var skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {}, propertiesObject = {}; for (var x in t) { - if (_tf.indexOf(x) !== -1) { // transform object gets built here + if (_transform.indexOf(x) !== -1) { // transform object gets built here if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d var ta = ['X', 'Y', 'Z']; //coordinates // translate[x] = pp(x, t[x]); @@ -300,14 +303,14 @@ } else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation transformObject[x] = parseProperty.transform(x, t[x]); } - propertiesObject['transform'] = transformObject; + propertiesObject[transformProperty] = transformObject; } else if ( x !== 'transform') { - if ( _bm.indexOf(x) !== -1 ) { - propertiesObject[x] = parseProperty.box(x,t[x]); - } else if (_op.indexOf(x) !== -1 || _sc.indexOf(x) !== -1) { - propertiesObject[x] = parseProperty.unl(x,t[x]); - } else if (_cls.indexOf(x) !== -1) { - propertiesObject[x] = parseProperty.cls(x,t[x]); + if ( _boxModel.indexOf(x) !== -1 ) { + propertiesObject[x] = parseProperty.boxModel(x,t[x]); + } else if (_opacity.indexOf(x) !== -1 || _scroll.indexOf(x) !== -1) { + propertiesObject[x] = parseProperty.unitless(x,t[x]); + } else if (_colors.indexOf(x) !== -1) { + propertiesObject[x] = parseProperty.colors(x,t[x]); } else if (x in parseProperty) { propertiesObject[x] = parseProperty[x](x,t[x],l); } // or any other property from css/ attr / svg / third party plugins } } @@ -317,7 +320,7 @@ // process properties object | registers the plugins prepareStart functions // string parsing and property specific value processing parseProperty = { - box : function(p,v){ // box model | text props | radius props + boxModel : function(p,v){ // box model | text props | radius props if (!(p in DOM)){ DOM[p] = function(l,p,a,b,v){ l.style[p] = unit(a.value,b.value,b.unit,v); @@ -327,7 +330,7 @@ }, transform : function(p,v){ // transform prop / value if (!('transform' in DOM)) { - DOM.transform = function(l,p,a,b,v,o){ + DOM[transformProperty] = function(l,p,a,b,v,o){ var _tS = '', t = '', r = '', sk = '', s = '', pp = pp || o.perspective && parseInt(o.perspective) !== 0 ? 'perspective('+parseInt(o.perspective)+'px) ' : 0; for (var tp in b){ @@ -343,7 +346,7 @@ } _tS = t + r + sk + s; - l.style[_tr] = pp ? pp + _tS : _tS; + l.style[p] = pp ? pp + _tS : _tS; } } @@ -381,11 +384,10 @@ return { value: parseFloat(v) }; // this must be parseFloat(v) } }, - unl : function(p,v){ // scroll | opacity | unitless + unitless : function(p,v){ // scroll | opacity | unitless if (/scroll/.test(p) && !(p in DOM) ){ DOM[p] = function(l,p,a,b,v) { - var el = el || (l === undefined || l === null) ? scrollContainer : l; - el.scrollTop = number(a,b,v); + l.scrollTop = number(a,b,v); }; } else if (p === 'opacity') { if (!(p in DOM)) { @@ -403,7 +405,7 @@ } return parseFloat(v); }, - cls : function(p,v){ // colors + colors : function(p,v){ // colors if (!(p in DOM)) { DOM[p] = function(l,p,a,b,v,o) { l.style[p] = color(a,b,v,o.keepHex); @@ -412,8 +414,8 @@ return trueColor(v); } }, - reverse = function () { - if (this._y) { + reverse = g._reverse = function () { + if (this.options.yoyo) { for (var p in this._vE) { var tmp = this._vSR[p]; this._vSR[p] = this._vE[p]; @@ -423,9 +425,10 @@ } }, close = function () { // when animation is finished reset repeat, yoyo&reversed tweens - if (this.repeat > 0) { this._r = this.repeat; } - if (this._y && this.reversed===true) { reverse.call(this); this.reversed = false; } + if (this.repeat > 0) { this.options.repeat = this.repeat; } + if (this.options.yoyo && this.reversed===true) { reverse.call(this); this.reversed = false; } this.playing = false; + setTimeout(function(){ if (!_tws.length) { stop(); } }, 48); // when all animations are finished, stop ticking after ~3 frames }, scrollOut = function(){ //prevent scroll when tweening scroll @@ -452,13 +455,82 @@ var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','); return g.Bezier( bz[0]*1,bz[1]*1,bz[2]*1,bz[3]*1 ); //bezier easing } else if ( /physics/.test(es) ) { - return g.Physics[es](); // predefined physics bezier based easing functions + return g.Physics[es].apply(this); // predefined physics bezier based easing functions } else { - return g.Ease[es](); // predefined bezier based easing functions + return g.Ease[es].apply(this); // predefined bezier based easing functions + } + } + }, + getStartValues = function () { // stack transform props for .to() chains + var startValues = {}, cs = getInlineStyle(this._el,'transform'), + deg = ['rotate','skew'], ax = ['X','Y','Z']; + + for (var p in this._vS){ + if ( _transform.indexOf(p) !== -1 ) { + var r2d = (/(rotate|translate|scale)$/.test(p)); + if ( /translate/.test(p) && p !== 'translate' ) { + startValues['translate3d'] = cs['translate3d'] || _defaults[p]; + } else if ( r2d ) { // 2d transforms + startValues[p] = cs[p] || _defaults[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 (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = cs[s] || _defaults[s]; } + } + } + } + } else { + if ( _scroll.indexOf(p) === -1 ) { + if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity + var co = getCurrentStyle(this._el,'filter'); + startValues['opacity'] = typeof co === 'number' ? co : _defaults['opacity']; + } else { + if ( _all.indexOf(p) !== -1 ) { + startValues[p] = getCurrentStyle(this._el,p) || d[p]; + } else { // plugins register here + startValues[p] = p in prepareStart ? prepareStart[p](this._el,p,this._vS[p]) : 0; + } + } + } else { + startValues[p] = (this._el === null || this._el === undefined) ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop; + } + } + } + for ( var p in cs ){ // also add to _vS values from previous tweens + if ( _transform.indexOf(p) !== -1 && (!( p in this._vS )) ) { + startValues[p] = cs[p] || _defaults[p]; + } + } + + this._vS = {}; + this._vS = preparePropertiesObject(startValues,this._el); + + if ( transformProperty in this._vE ){ // stack transform + for ( var sp in this._vS[transformProperty]) { + if (!(sp in this._vE[transformProperty])) { this._vE[transformProperty][sp] = {}; } + for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level + if ( this._vS[transformProperty][sp][spp].value !== undefined ) { + if (!(spp in this._vE[transformProperty][sp])) { this._vE[transformProperty][sp][spp] = {}; } + for ( var sppp in this._vS[transformProperty][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d + if ( !(sppp in this._vE[transformProperty][sp][spp])) { + this._vE[transformProperty][sp][spp][sppp] = this._vS[transformProperty][sp][spp][sppp]; // sppp = unit | value + } + } + } + } + if ( 'value' in this._vS[transformProperty][sp] && (!('value' in this._vE[transformProperty][sp])) ) { // 2nd level + for ( var spp1 in this._vS[transformProperty][sp] ) { // scale + if (!(spp1 in this._vE[transformProperty][sp])) { + this._vE[transformProperty][sp][spp1] = this._vS[transformProperty][sp][spp1]; // spp = unit | value + } + } + } } } }, prepareStart = {}, + crossCheck = {}, // core easing functions easing = g.Easing = {}; @@ -516,15 +588,16 @@ 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;}; // these methods run faster when defined outside - var start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it + var start = g._start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it scrollIn.call(this); - perspective(this._el,this._ops); // apply the perspective and transform origin - if ( this._rpr ) { this.getStartValues(); } // on start we reprocess the valuesStart for TO() method + perspective(this._el,this.options); // apply the perspective and transform origin + if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method K.svg && K.svq(this); // SVG Plugin | on start we process the SVG paths and SVG transforms for ( var e in this._vE ) { + if (e in crossCheck) crossCheck[e]; // this is where we do the valuesStart and valuesEnd check this._vSR[e] = this._vS[e]; } @@ -532,22 +605,22 @@ add(this); this.playing = true; this.paused = false; - this._sCF = false; - this._sT = t || time.now(); - this._sT += this._dl; + this._startFired = false; + this._startTime = t || time.now(); + this._startTime += this.options.delay; - if (!this._sCF) { - if (this._sC) { this._sC.call(); } - this._sCF = true; + if (!this._startFired) { + if (this.options.start) { this.options.start.call(); } + this._startFired = true; } !tick && ticker(); return this; }, - play = function () { + play = g._play = function () { if (this.paused && this.playing) { this.paused = false; - if (this._rC !== null) { this._rC.call(); } - this._sT += time.now() - this._pST; + if (this.options.resume) { this.options.resume.call(); } + this._startTime += time.now() - this._pauseTime; add(this); !tick && ticker(); // restart ticking if stopped } @@ -555,46 +628,40 @@ }, // single Tween object construct - Tween = g._tween = function (_el, _vS, _vE, _o) { - this._el = _el; // element animation is applied to - this._vSR = {}; // internal valuesStartRepeat - this._vS = _vS; // valuesStart - this._vE = _vE; // valuesEnd - this._y = _o.yoyo || false; // _yoyo + Tween = g._Tween = function (_el, _vS, _vE, _o) { + this._el = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to + this.playing = false; // _isPlaying this.reversed = false; // _reversed this.paused = false; //_paused - this._sT = null; // startTime - this._pST = null; //_pauseStartTime - this._rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false - this._dr = _o.duration || 700; //duration - this._r = _o.repeat || 0; // _repeat - this._rD = _o.repeatDelay || 0; // _repeatDelay - this._dl = _o.delay || 0; //delay - 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 - this._uC = _o.update || null; // _on UpdateCallback - this._cC = _o.complete || null; // _on CompleteCallback - this._pC = _o.pause || null; // _on PauseCallback - this._rC = _o.play || null; // _on ResumeCallback - 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._startTime = null; // startTime + this._pauseTime = null; //_pauseTime + + this._startFired = false; //_on StartCallbackFIRED + + this._vSR = {}; // internal valuesStartRepeat + this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart + this._vE = preparePropertiesObject(_vE,_el); // valuesEnd + + this.options = {}; for (var o in _o) { this.options[o] = _o[o]; } + this.options.chain = []; //_chainedTweens + this.options.easing = _o.easing && typeof processEasing(_o.easing) === 'function' ? processEasing(_o.easing) : easing.linear; + this.options.repeat = _o.repeat || 0; + this.options.repeatDelay = _o.repeatDelay || 0; + this.options.yoyo = _o.yoyo || false; // _yoyo + this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false + this.options.duration = _o.duration || 700; //duration + this.options.delay = _o.delay || 0; //delay + this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish + this.start = start; this.play = play; this.resume = play; - - //also add plugins options or transform perspective TO DO : split this damn regex into an array and do an indexOf or a simple || - for (var o in _o) { if (!(o in this) && !/delay|rpr|duration|repeat|start|stop|update|complete|pause|play|yoyo|easing/i.test(o) ) { this._ops[o] = _o[o]; } } - this.pause = function() { if (!this.paused && this.playing) { remove(this); this.paused = true; - this._pST = time.now(); - if (this._pC !== null) { - this._pC.call(); - } + this._pauseTime = time.now(); + if (this.options.pause) { this.options.pause.call(); } } return this; }; @@ -605,88 +672,18 @@ this.paused = false; scrollOut.call(this); - if (this._stC !== null) { - this._stC.call(); - } + if (this.options.stop) { this.options.stop.call(); } this.stopChainedTweens(); close.call(this); } return this; }; - this.chain = function () { this._cT = arguments; return this; }; + this.chain = function () { this.options.chain = arguments; return this; }; this.stopChainedTweens = function () { - for (var i = 0, ctl =this._cT.length; i < ctl; i++) { - this._cT[i].stop(); + for (var i = 0, ctl =this.options.chain.length; i < ctl; i++) { + this.options.chain[i].stop(); } }; - this.getStartValues = function () { // stack transform props for .to() chains - var startValues = {}, cs = getInlineStyle(this._el,'transform'), - deg = ['rotate','skew'], ax = ['X','Y','Z']; - - for (var p in _vS){ - if ( _tf.indexOf(p) !== -1 ) { - var r2d = (/(rotate|translate|scale)$/.test(p)); - if ( /translate/.test(p) && p !== 'translate' ) { - startValues['translate3d'] = cs['translate3d'] || _d[p]; - } else if ( r2d ) { // 2d transforms - startValues[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 _vS) ) { startValues[s] = cs[s] || _d[s]; } - } - } - } - } else { - if ( _sc.indexOf(p) === -1 ) { - if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity - var co = getCurrentStyle(this._el,'filter'); - startValues['opacity'] = typeof co === 'number' ? co : _d['opacity']; - } else { - if ( _all.indexOf(p) !== -1 ) { - startValues[p] = getCurrentStyle(this._el,p) || d[p]; - } else { // plugins register here - startValues[p] = p in prepareStart ? prepareStart[p](this._el,p,_vS[p]) : 0; - } - } - } else { - startValues[p] = (this._el === null || this._el === undefined) ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop; - } - } - } - for ( var p in cs ){ // also add to _vS values from previous tweens - if ( _tf.indexOf(p) !== -1 && (!( p in _vS )) ) { - startValues[p] = cs[p] || _d[p]; - } - } - - this._vS = {}; - this._vS = preparePropertiesObject(startValues,this._el); - if ( 'transform' in this._vE ){ // stack transform - var transform = 'transform'; - for ( var sp in this._vS['transform']) { - if (!(sp in this._vE[transform])) { this._vE[transform][sp] = {}; } - for ( var spp in this._vS[transform][sp] ) { // 3rd level - if ( this._vS[transform][sp][spp].value !== undefined ) { - if (!(spp in this._vE[transform][sp])) { this._vE[transform][sp][spp] = {}; } - for ( var sppp in this._vS[transform][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d - if ( !(sppp in this._vE[transform][sp][spp])) { - this._vE[transform][sp][spp][sppp] = this._vS[transform][sp][spp][sppp]; // sppp = unit | value - } - } - } - } - if ( 'value' in this._vS[transform][sp] && (!('value' in this._vE[transform][sp])) ) { // 2nd level - for ( var spp1 in this._vS[transform][sp] ) { // scale - if (!(spp1 in this._vE[transform][sp])) { - this._vE[transform][sp][spp1] = this._vS[transform][sp][spp1]; // spp = unit | value - } - } - } - } - } - } }, // the multi elements Tween constructs @@ -716,22 +713,22 @@ }, stop : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].stop(); } return this; }, pause : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].pause(); } return this; }, - chain : function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; }, + chain : function(){ this.tweens[this.tweens.length-1].options.chain = arguments; return this; }, play : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].play(); } return this; }, resume : function() {return this.play()} }, // main methods to = function (el, to, o) { - var _el = selector(el), - _vS = to, _vE = preparePropertiesObject(to,_el); o = o || {}; o.rpr = true; - return new Tween(_el, _vS, _vE, o); + var _el = selector(el); o = o || {}; o.rpr = true; + return new Tween(_el, to, to, o); }, fromTo = function (el, f, to, o) { - var _el = selector(el), _vS = preparePropertiesObject(f,_el), _vE = preparePropertiesObject(to,_el); o = o || {}; - var tw = new Tween(_el, _vS, _vE, o); K.svg && K.svq(tw); // on init we process the SVG paths + var _el = selector(el); o = o || {}; + var tw = new Tween(_el, f, to, o); K.svg && K.svq(tw); // on init we process the SVG paths return tw; }, + // multiple elements tweening allTo = function (els, to, o) { var _els = selector(els,true); @@ -743,9 +740,9 @@ }; return K = { // export core methods to public for plugins - property: property, getPrefix: getPrefix, selector: selector, pe : processEasing, // utils + property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods - pp: parseProperty, prS: prepareStart, //Tween : Tween, // property parsing & preparation | Tween - truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, gCS: getCurrentStyle, // property parsing + parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, // Tween : Tween, // property parsing & preparation | Tween | crossCheck + truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing }; })); \ No newline at end of file diff --git a/package.json b/package.json index 8eafb4e..46c2252 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "kute.js", - "version": "1.5.96", - "description": "A minimal Native Javascript animation engine.", + "version": "1.5.97", + "description": "Complete Native Javascript animation engine.", "main": "kute.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -13,6 +13,9 @@ }, "keywords": [ "kute.js", + "svg morph", + "svg transform", + "tweening engine", "animation engine", "javascript animation engine", "javascript animation", From 112b35aa5f7678b990ae68f8e5c2fd4078615599 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 23 Nov 2016 20:42:01 +0200 Subject: [PATCH 260/471] Changes: * removed CSS props from SVG plugins * improved CSS transform performance by creating a more simple tween object * improved radius properties performance * removed Bezier and Physics plugins * fixes scroll animation performance bottlenecks * code cleanup and a more readable code * documentation updates --- assets/css/kute.css | 12 +++++ assets/js/easing.js | 14 +++--- assets/js/examples.js | 2 +- assets/js/home.js | 1 - assets/js/kute-bezier.min.js | 2 + assets/js/kute-bs.js | 6 +-- assets/js/kute-physics.min.js | 2 + assets/js/perf.js | 5 +- assets/js/svg.js | 56 ++++------------------ easing.html | 10 ++-- examples.html | 2 +- extend.html | 49 ++++++++++--------- index.html | 8 ++-- performance.html | 6 ++- properties.html | 6 ++- 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 | 4 +- src/kute.min.js | 4 +- start.html | 8 ---- svg.html | 88 +++-------------------------------- 23 files changed, 99 insertions(+), 200 deletions(-) create mode 100644 assets/js/kute-bezier.min.js create mode 100644 assets/js/kute-physics.min.js diff --git a/assets/css/kute.css b/assets/css/kute.css index 3bc23ca..8166ab9 100644 --- a/assets/css/kute.css +++ b/assets/css/kute.css @@ -166,6 +166,18 @@ h1.example-item span { background-color: transparent; border: 0; } +.text-olive { color: #9C27B0;} +.text-indigo { color: #673AB7;} +.text-green { color: #4CAF50;} +.text-red { color: #e91b1f;} +.text-yellow { color: #ffd626;} +.text-blue { color: #2196F3;} +.text-pink { color: #E91E63;} +.text-orange { color: #FF5722;} +.text-lime { color: #CDDC39;} +.text-teal { color: #009688;} +.text-strong { font-weight: bold } + .hidden { display: none !important; visibility: hidden !important; diff --git a/assets/js/easing.js b/assets/js/easing.js index b7ee793..8d62772 100644 --- a/assets/js/easing.js +++ b/assets/js/easing.js @@ -27,19 +27,19 @@ for (var j=0; j0?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 index bb7dd31..0360c50 100644 --- a/assets/js/kute-bs.js +++ b/assets/js/kute-bs.js @@ -24,9 +24,9 @@ // filter unsupported browsers if (!('boxShadow' in document.body.style)) {return;} // add a reference to KUTE object - var g = window, K = KUTE, getComputedStyle = K.gCS, - trueColor = K.truC, prepareStart = K.prS, parseProperty = K.pp, DOM = g.dom, - unit = g.Interpolate.unit, color = g.Interpolate.color, + 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, // the preffixed boxShadow property, mostly for legacy browsers // maybe the browser is supporting the property with its vendor preffix diff --git a/assets/js/kute-physics.min.js b/assets/js/kute-physics.min.js new file mode 100644 index 0000000..592abf3 --- /dev/null +++ b/assets/js/kute-physics.min.js @@ -0,0 +1,2 @@ +// 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/perf.js b/assets/js/perf.js index 80888c1..70902d4 100644 --- a/assets/js/perf.js +++ b/assets/js/perf.js @@ -115,7 +115,6 @@ function createTest(count, property, engine, repeat) { } } else if (engine==='tween') { - if (property==="left"){ update = updateLeft; } else if (property==="translateX"){ @@ -126,11 +125,11 @@ function createTest(count, property, engine, repeat) { } } if (engine==='tween') { - animate(); - function animate( time ) { + var animate = function( time ) { requestAnimationFrame( animate ); TWEEN.update( time ); } + animate(); } } diff --git a/assets/js/svg.js b/assets/js/svg.js index 240360e..43c2bca 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -19,14 +19,14 @@ morphBtn1.addEventListener('click', function(){ }, false); // polygon morph -var morphTween21 = KUTE.fromTo('#triangle', {path: '#triangle', fill: '#673AB7'}, { path: '#square', fill: '#2196F3' }, { +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', fill: '#2196F3'}, { path: '#star2', fill: 'deeppink' }, { +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', fill: 'deeppink'}, { path: '#triangle', fill: '#673AB7' }, { +var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', attr:{ fill: 'deeppink'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, { delay: 500, duration: 1500, easing: 'easingCubicOut' }); @@ -52,10 +52,10 @@ morphBtn2.addEventListener('click', function(){ // simple multi morph var multiMorphBtn = document.getElementById('multiMorphBtn'); -var multiMorph1 = KUTE.to('#w11', { path: '#w24', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var multiMorph2 = KUTE.to('#w13', { path: '#w21', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var multiMorph3 = KUTE.to('#w14', { path: '#w22', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var multiMorph4 = KUTE.to('#w12', { path: '#w23', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +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(); @@ -67,7 +67,7 @@ multiMorphBtn.addEventListener('click', function(){ // complex multi morph var compliMorphBtn = document.getElementById('compliMorphBtn'); -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 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'}); @@ -201,42 +201,4 @@ var svgTween52 = KUTE.to(svgm2, { mixedBtn.addEventListener('click', function(){ !svgTween51.playing && svgTween51.start(); !svgTween52.playing && svgTween52.start(); -}, false); - - -// fill HEX/RGBa -var tween1 = KUTE.to('#fillSVG', {fill: '#069'}, {duration: 1500, yoyo:true, repeat: 1}); - -// stroke HEX/RGBa -var tween2 = KUTE.to('#fillSVG',{stroke: '#069'}, {delay: 200, yoyo:true, repeat: 1}); - -// strokeOpacity Number 0-1 -var tween3 = KUTE.to('#fillSVG',{strokeOpacity: 0.6}, {duration: 1500, yoyo:true, repeat: 1}); - -// fillOpacity Number 0-1 -var tween4 = KUTE.to('#fillSVG',{fillOpacity: 0.2}, {yoyo:true, repeat: 1}); - -// strokeWidth Number -var tween5 = KUTE.to('#fillSVG',{strokeWidth: '0px'}, {duration: 1500, yoyo:true, repeat: 1}); - -tween1.chain(tween4); -tween2.chain(tween3,tween5); - -var cssBtn = document.getElementById('cssBtn'); -cssBtn.addEventListener('click',function(){ - !tween1.playing && !tween3.playing && !tween4.playing && !tween5.playing && tween1.start(); - !tween2.playing && !tween3.playing && !tween4.playing && !tween5.playing && tween2.start(); -}, false); - -// stopColor HEX/RGBa -var tween6 = KUTE.to('#stopCSVG',{stopColor: 'rgb(00,66,99)'}, {duration: 1500, yoyo:true, repeat: 1}); - -// stopOpacity Number 0-1 -var tween7 = KUTE.to('#stopOSVG',{stopOpacity: 0}, {duration: 1500, yoyo:true, repeat: 1}); - -tween6.chain(tween7) - -var gradBtn = document.getElementById('gradBtn'); -gradBtn.addEventListener('click', function(){ - !tween6.playing && !tween7.playing && tween6.start(); -}); +}, false); \ No newline at end of file diff --git a/easing.html b/easing.html index c36fbb3..4790517 100644 --- a/easing.html +++ b/easing.html @@ -177,6 +177,7 @@

        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
          • @@ -240,6 +241,7 @@

          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:

            @@ -303,12 +305,12 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{" - @@ -324,8 +326,8 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{" - - + + diff --git a/examples.html b/examples.html index dee8f81..84a44ae 100644 --- a/examples.html +++ b/examples.html @@ -419,7 +419,7 @@ 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 features the core easing functions from the Robert Penner's 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
            diff --git a/extend.html b/extend.html index f6458af..d7baea3 100644 --- a/extend.html +++ b/extend.html @@ -117,18 +117,18 @@

            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;
+		
            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;
 
 // let's add a timescale method
-K.Tween.prototype.timescale = function(factor){
-    this._dr *= factor; // this._dr is the internal tween duration
+Tween.prototype.timescale = function(factor){
+    this.options.duration *= factor;
     return this;
 }
 
 // or let's add a reverse method
-K.Tween.prototype.reverse = function(){
+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
@@ -139,13 +139,13 @@ K.Tween.prototype.reverse = function(){
 }
 
 // go back in time
-K.Tween.prototype.seek = function (time) {
-    this._sT -= time;  // this._sT is the startTime
+Tween.prototype.seek = function (time) {
+    this._startTime -= time;
     return this;
 };
 
 // how about a restart method
-K.Tween.prototype.restart = function(){
+Tween.prototype.restart = function(){
     if (this.playing) {
         this.stop();
         this.start();
@@ -154,12 +154,11 @@ K.Tween.prototype.restart = function(){
 }
 
 // methods to queue callbacks with ease
-K.Tween.prototype.onUpdate = function(){
-    this._uC = arguments; 
+Tween.prototype.onUpdate = function(){
+    this.options.update = 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.
            
         
@@ -167,17 +166,17 @@ K.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.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.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.
              • 
         
            
         
            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 = window, K = KUTE, 
+var g = typeof global !== 'undefined' ? global : window, K = 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;
+    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;}
@@ -192,7 +191,7 @@ 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
 prepareStart['boxShadow'] = function(element,property,value){
-    var cssBoxShadow = getComputedStyle(element,'boxShadow'); // where K.gCS()/getComputedStyle is an accurate getComputedStyle() core method
+    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;
 }
 
@@ -231,7 +230,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 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.
            
+        
            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 
 // registers the window.dom['boxShadow'] function 
@@ -305,15 +304,15 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
          • 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.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.array and Interpolate.coords are SVG Plugin only, but you can have a look anytime when you're out of ideas.
            • 
+            
          • 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.
            •
          @@ -104,6 +105,7 @@

          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 b816c9a..4f81335 100644 --- a/properties.html +++ b/properties.html @@ -123,7 +123,8 @@

          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.

          + +

          Box Model Properties

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

          @@ -171,6 +172,7 @@

          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.

          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 1db299e..5e98bb3 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © 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.prS,u=n.pp,a=r.Interpolate.unit,f=r.Interpolate.number,s=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};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]=l.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={};for(var u in r){var b=v(u),g=c(n,b.replace(/_+[a-z]+/,""));if(l.indexOf(b)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(g))){var y=d(g).u||d(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;u+A in e||(e[u+A]=function(t,e,r,n,i){var o=o||v(e).replace(A,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),o[u+A]=d(r[u])}else l.indexOf(b)>-1?(u in e||(e[u]=function(t,e,n,i,o){var u=u||v(e);t.setAttribute(u,s(n,i,o,r.keepHex))}),o[u]=p(r[u])):(u in e||(e[u]=function(t,e,r,n,i){var o=o||v(e);t.setAttribute(o,f(r,n,i))}),o[u]=parseFloat(r[u]))}return o}}); \ No newline at end of file +// 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 diff --git a/src/kute-css.min.js b/src/kute-css.min.js index 60926c0..290ae4f 100644 --- a/src/kute-css.min.js +++ b/src/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © 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,i=e.pp,n=e.prS,d=e.gCS,u=e.truD,f=e.truC,a=e.property("borderRadius"),p=e.property("borderTopLeftRadius"),g=e.property("borderTopRightRadius"),l=e.property("borderBottomLeftRadius"),c=e.property("borderBottomRightRadius"),s=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],b=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],v=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],y=["backgroundPosition"],R=b.concat(h,v),T=s.concat(m,b,h,v,y),x=T.length,B=(r.Interpolate.number,r.Interpolate.unit),L=r.Interpolate.color,C=C||{},W=0;W1?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 bff3581..b2ad32a 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © 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.pp,s=r.prS,i=r.gCS,o=!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1),l=r.truC,u=r.truD,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.Interpolate.number,c=e.Interpolate.unit,d=e.Interpolate.color,m=e.Interpolate.array=function(t,e,r,n){var a,s=[];for(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])]},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])]},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;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},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=parseInt(s(n,r,i))}),parseInt(e)||0},this}); \ No newline at end of file +// KUTE.js v1.5.97 | © 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,s=n.parseProperty,u=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},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 61b8880..3bb9047 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © 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={},n=t._tweens=[],r=null,i=t.performance,a=(function(){for(var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],r=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"],e=0,i=n.length;e0)return t._r<9999?t._r--:t._r=0,t._y&&(t.reversed=!t.reversed,J.call(t)),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),et.call(t);for(var a=0,s=t._cT.length;a0&&(this._r=this.repeat),this._y&&this.reversed===!0&&(J.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||_()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(m,c,!1),document.removeEventListener(w,c,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(m,c,!1),document.addEventListener(w,c,!1),document.body.setAttribute("data-tweening","scroll"))},rt=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]():t.Ease[e]()}},it={},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,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)))},at.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)},at.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)},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 st=function(t){nt.call(this),W(this._el,this._ops),this._rpr&&this.getStartValues(),e.svg&&e.svq(this);for(var n in this._vE)this._vSR[n]=this._vS[n];return d(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=t||i.now(),this._sT+=this._dl,this._sCF||(this._sC&&this._sC.call(),this._sCF=!0),!r&&U(),this},ot=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=i.now()-this._pST,d(this),!r&&U()),this},ut=t._tween=function(e,n,r,a){this._el=e,this._vSR={},this._vS=n,this._vE=r,this._y=a.yoyo||!1,this.playing=!1,this.reversed=!1,this.paused=!1,this._sT=null,this._pST=null,this._rpr=a.rpr||!1,this._dr=a.duration||700,this._r=a.repeat||0,this._rD=a.repeatDelay||0,this._dl=a.delay||0,this._e=a&&a.easing&&"function"==typeof rt(a.easing)?rt(a.easing):at.linear,this._cT=[],this._sCF=!1,this._sC=a.start||null,this._uC=a.update||null,this._cC=a.complete||null,this._pC=a.pause||null,this._rC=a.play||null,this._stC=a.stop||null,this.repeat=this._r,this._ops={},this.start=st,this.play=ot,this.resume=ot;for(var s in a)s in this||/delay|rpr|duration|repeat|start|stop|update|complete|pause|play|yoyo|easing/i.test(s)||(this._ops[s]=a[s]);this.pause=function(){return!this.paused&&this.playing&&(g(this),this.paused=!0,this._pST=i.now(),null!==this._pC&&this._pC.call()),this},this.stop=function(){return!this.paused&&this.playing&&(g(this),this.playing=!1,this.paused=!1,et.call(this),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this._cT=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this._cT.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ft(t[i],e,r[i]))},ct=function(t,e,n,r){this.tweens=[];for(var i=[],a=0,s=t.length;a0?r.delay+(r.offset||0):r.delay,this.tweens.push(ht(t[a],e,n,i[a]))},ft=(lt.prototype=ct.prototype={start:function(t){t=t||i.now();for(var e=0,n=this.tweens.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;n 
          // AMD style
@@ -111,8 +109,6 @@ define([
     "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){
     // ...
 });
@@ -126,8 +122,6 @@ 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.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
 <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 -->
@@ -135,8 +129,6 @@ define([
 
          
         
          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-easing.min.js"></script> <!-- Bezier Easing Functions -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
 <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 -->
diff --git a/svg.html b/svg.html
index 4a93b01..d0179b4 100644
--- a/svg.html
+++ b/svg.html
@@ -163,7 +163,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
        -

        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 545e253a307d246e0d968cfec3c804f640e5e957 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 23 Nov 2016 20:47:09 +0200 Subject: [PATCH 261/471] --- README.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/README.md b/README.md index ecb8a8c..949f7bb 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ For documentation, examples and other cool tips, check the Date: Thu, 24 Nov 2016 22:57:33 +0200 Subject: [PATCH 262/471] 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 bda5756889eed445ba733edffde09a255da5c230 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 24 Nov 2016 22:57:33 +0200 Subject: [PATCH 263/471] 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 --- README.md | 1 + bower.json | 2 +- demo/api.html | 2 +- demo/assets/js/easing.js | 18 +++ demo/assets/js/examples.js | 6 +- demo/attr.html | 2 +- demo/css.html | 2 +- demo/easing.html | 2 +- demo/examples.html | 2 +- demo/extend.html | 13 +- demo/features.html | 2 +- demo/index.html | 2 +- demo/options.html | 2 +- demo/performance.html | 2 +- demo/properties.html | 20 +-- demo/src/kute-attr.min.js | 4 +- demo/src/kute-css.min.js | 4 +- demo/src/kute-jquery.min.js | 2 +- demo/src/kute-svg.min.js | 4 +- demo/src/kute-text.min.js | 2 +- demo/src/kute.min.js | 4 +- demo/start.html | 2 +- demo/svg.html | 2 +- demo/text.html | 2 +- dist/kute-attr.min.js | 4 +- dist/kute-css.min.js | 4 +- dist/kute-jquery.min.js | 2 +- dist/kute-svg.min.js | 4 +- dist/kute-text.min.js | 2 +- dist/kute.min.js | 4 +- kute-attr.js | 12 +- kute-css.js | 4 +- kute-svg.js | 161 ++++++++------------- kute.js | 275 +++++++++++++++++------------------- package.json | 2 +- 35 files changed, 263 insertions(+), 315 deletions(-) diff --git a/README.md b/README.md index 949f7bb..e9dca84 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ For documentation, examples and other cool tips, check the - + diff --git a/demo/assets/js/easing.js b/demo/assets/js/easing.js index 8d62772..c428f51 100644 --- a/demo/assets/js/easing.js +++ b/demo/assets/js/easing.js @@ -19,6 +19,24 @@ for (var i=0; i - + diff --git a/demo/css.html b/demo/css.html index 5548b3f..e155f9b 100644 --- a/demo/css.html +++ b/demo/css.html @@ -224,7 +224,7 @@ KUTE.to('selector1',{outlineColor:'#069'}).start(); - + diff --git a/demo/easing.html b/demo/easing.html index 4790517..74cb6ca 100644 --- a/demo/easing.html +++ b/demo/easing.html @@ -323,7 +323,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{" - + diff --git a/demo/examples.html b/demo/examples.html index 84a44ae..d3eb134 100644 --- a/demo/examples.html +++ b/demo/examples.html @@ -489,7 +489,7 @@ var myMultiTween2 = KUTE.allFromTo( - + diff --git a/demo/extend.html b/demo/extend.html index d7baea3..21ba974 100644 --- a/demo/extend.html +++ b/demo/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/demo/features.html b/demo/features.html
index eba6c67..0fde143 100644
--- a/demo/features.html
+++ b/demo/features.html
@@ -165,7 +165,7 @@
 ================================================== -->
 	
 
-
+
 
  
  
diff --git a/demo/index.html b/demo/index.html
index 8e8819c..ba7f80f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -207,7 +207,7 @@
 
 	
-
+
 
  
  
diff --git a/demo/options.html b/demo/options.html
index f380f70..e0579ee 100644
--- a/demo/options.html
+++ b/demo/options.html
@@ -170,7 +170,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
 
 	
 
-
+
 
  
  
diff --git a/demo/performance.html b/demo/performance.html
index 3e7c721..25f1627 100644
--- a/demo/performance.html
+++ b/demo/performance.html
@@ -119,7 +119,7 @@
 
 	
-
+
 
 
 
diff --git a/demo/properties.html b/demo/properties.html
index 4f81335..d4e2960 100644
--- a/demo/properties.html
+++ b/demo/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/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js index 5e98bb3..a72b425 100644 --- a/demo/src/kute-attr.min.js +++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js index 290ae4f..bfab035 100644 --- a/demo/src/kute-css.min.js +++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js index b2ad32a..038e009 100644 --- a/demo/src/kute-svg.min.js +++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js index 3bb9047..ddc4c77 100644 --- a/demo/src/kute.min.js +++ b/demo/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/demo/svg.html b/demo/svg.html index d0179b4..e6ae4a1 100644 --- a/demo/svg.html +++ b/demo/svg.html @@ -468,7 +468,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: [150, svgOriginX, s - + diff --git a/demo/text.html b/demo/text.html index 962a344..e5c7d06 100644 --- a/demo/text.html +++ b/demo/text.html @@ -166,7 +166,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span& - + diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js index 5e98bb3..a72b425 100644 --- a/dist/kute-attr.min.js +++ b/dist/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/dist/kute-css.min.js b/dist/kute-css.min.js index 290ae4f..bfab035 100644 --- a/dist/kute-css.min.js +++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js index b2ad32a..038e009 100644 --- a/dist/kute-svg.min.js +++ b/dist/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/dist/kute.min.js b/dist/kute.min.js index 3bb9047..ddc4c77 100644 --- a/dist/kute.min.js +++ b/dist/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 0) { - if ( w.options.repeat < 9999 ) { w.options.repeat--; } else { w.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much + if (this.options.repeat > 0) { + if ( this.options.repeat < 9999 ) { this.options.repeat--; } else { this.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much - if (w.options.yoyo) { w.reversed = !w.reversed; reverse.call(w); } // handle yoyo + if (this.options.yoyo) { this.reversed = !this.reversed; reverse.call(this); } // handle yoyo - w._startTime = (w.options.yoyo && !w.reversed) ? t + w.options.repeatDelay : t; //set the right time for delay + this._startTime = (this.options.yoyo && !this.reversed) ? t + this.options.repeatDelay : t; //set the right time for delay return true; } else { - if (w.options.complete) { w.options.complete.call(); } + if (this.options.complete) { this.options.complete.call(); } - scrollOut.call(w); // unbind preventing scroll when scroll tween finished + scrollOut.call(this); // unbind preventing scroll when scroll tween finished - // start animating chained tweens - for (var i = 0, ctl = w.options.chain.length; i < ctl; i++) { - w.options.chain[i].start(); + for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) { // start animating chained tweens + this.options.chain[i].start(); } //stop ticking when finished - close.call(w); + close.call(this); } return false; } @@ -266,13 +253,14 @@ }, // applies the transform origin and perspective - perspective = function (l,o) { - if ( o.transformOrigin !== undefined ) { l.style[property('transformOrigin')] = o.transformOrigin; } // element transform origin - if ( o.perspectiveOrigin !== undefined ) { l.style[property('perspectiveOrigin')] = o.perspectiveOrigin; } // element perspective origin - if ( o.parentPerspective !== undefined ) { l.parentNode.style[property('perspective')] = o.parentPerspective + 'px'; } // parent perspective - if ( o.parentPerspectiveOrigin !== undefined ) { l.parentNode.style[property('perspectiveOrigin')] = o.parentPerspectiveOrigin; } // parent perspective origin + perspective = g._perspective = function () { + if ( this.options.perspective !== undefined && transformProperty in this._vE ) { this._vS[transformProperty]['perspective'] = this._vE[transformProperty]['perspective']; } // element perspective + if ( this.options.transformOrigin !== undefined ) { this._el.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin + if ( this.options.perspectiveOrigin !== undefined ) { this._el.style[property('perspectiveOrigin')] = this.options.perspectiveOrigin; } // element perspective origin + if ( this.options.parentPerspective !== undefined ) { this._el.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective + if ( this.options.parentPerspectiveOrigin !== undefined ) { this._el.parentNode.style[property('perspectiveOrigin')] = this.options.parentPerspectiveOrigin; } // parent perspective origin }, - + // process properties for _vE and _vS or one of them preparePropertiesObject = function (t, l) { var skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {}, propertiesObject = {}; @@ -284,9 +272,9 @@ for (var f = 0; f < 3; f++) { var a = ta[f]; if ( /3d/.test(x) ) { - translateObject['translate' + a] = parseProperty.transform('translate' + a, t[x][f]); + translateObject['translate' + a] = parseProperty.transform('translate' + a, t[x][f], l); } else { - translateObject['translate' + a] = ('translate' + a in t) ? parseProperty.transform('translate' + a, t['translate' + a]) : { value: 0, unit: 'px' }; + translateObject['translate' + a] = ('translate' + a in t) ? parseProperty.transform('translate' + a, t['translate' + a], l) : 0; } } transformObject['translate'] = translateObject; @@ -301,7 +289,7 @@ } transformObject[ap] = rtp; } else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation - transformObject[x] = parseProperty.transform(x, t[x]); + transformObject[x] = parseProperty.transform(x, t[x], l); } propertiesObject[transformProperty] = transformObject; } else if ( x !== 'transform') { @@ -320,68 +308,76 @@ // process properties object | registers the plugins prepareStart functions // string parsing and property specific value processing parseProperty = { - boxModel : function(p,v){ // box model | text props | radius props + boxModel : function(p,v,l){ // box model | text props | radius props if (!(p in DOM)){ DOM[p] = function(l,p,a,b,v){ - l.style[p] = unit(a.value,b.value,b.unit,v); + l.style[p] = unit(a,b,'px',v); } } - return { value: trueDimension(v).v, unit: trueDimension(v).u }; + var boxValue = trueDimension(v); + return boxValue.u === '%' ? boxValue.v * l.offsetWidth / 100 : boxValue.v; }, - transform : function(p,v){ // transform prop / value + transform : function(p,v,l) { // transform prop / value if (!('transform' in DOM)) { DOM[transformProperty] = function(l,p,a,b,v,o){ - var _tS = '', t = '', r = '', sk = '', s = '', pp = pp || o.perspective && parseInt(o.perspective) !== 0 ? 'perspective('+parseInt(o.perspective)+'px) ' : 0; + var t = '', r = '', sk = '', s = '', pp = ''; for (var tp in b){ - if (tp === 'translate'){ - t += translate(a[tp],b[tp],v); + if (tp === 'perspective'){ + pp += a[tp]; + } else if (tp === 'translate'){ + t += translate(a[tp],b[tp],'px',v); } else if (tp === 'rotate'){ - r += rotate(a[tp],b[tp],v); + r += rotate(a[tp],b[tp],'deg',v); } else if (tp === 'skew'){ - sk += skew(a[tp],b[tp],v); + sk += skew(a[tp],b[tp],'deg',v); } else if (tp === 'scale'){ s += scale(a[tp],b[tp],v); } } - _tS = t + r + sk + s; - l.style[p] = pp ? pp + _tS : _tS; + l.style[p] = pp + t + r + sk + s; } } // process each transform property if (/translate/.test(p)) { if (p === 'translate3d') { - var t3d = v.split(','); + var t3d = v.split(','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2])); return { - 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 } + translateX : t3d0.u === '%' ? (t3d0.v * l.offsetWidth / 100) : t3d0.v, + translateY : t3d1.u === '%' ? (t3d1.v * l.offsetHeight / 100) : t3d1.v, + translateZ : t3d2.u === '%' ? (t3d2.v * (l.offsetHeight + l.offsetWidth) / 200) : t3d2.v // to be changed with something like element and/or parent perspective }; } else if (/^translate(?:[XYZ])$/.test(p)) { - return { value: trueDimension(v).v, unit: (trueDimension(v).u||'px') }; + var t1d = trueDimension(v), percentOffset = /X/.test(p) ? l.offsetWidth / 100 : /Y/.test(p) ? l.offsetHeight / 100 : (l.offsetWidth+l.offsetHeight) / 200; + + return t1d.u === '%' ? (t1d.v * percentOffset) : t1d.v; } else if (p === 'translate') { - var tv = typeof v === 'string' ? v.split(',') : v, t2d = {}; + var tv = typeof v === 'string' ? v.split(',') : v, t2d = {}, t2dv, + t2d0 = trueDimension(tv[0]), t2d1 = tv.length ? trueDimension(tv[1]) : {v: 0, u: 'px'}; if (tv instanceof Array) { - t2d.x = { value: trueDimension(tv[0]).v, unit: trueDimension(tv[0]).u }, - t2d.y = { value: trueDimension(tv[1]).v, unit: trueDimension(tv[1]).u } + t2d.x = t2d0.u === '%' ? (t2d0.v * l.offsetWidth / 100) : t2d0.v, + t2d.y = t2d1.u === '%' ? (t2d1.v * l.offsetHeight / 100) : t2d1.v } else { - t2d.x = { value: trueDimension(tv).v, unit: trueDimension(tv).u }, - t2d.y = { value: 0, unit: 'px' } + t2dv = trueDimension(tv); + t2d.x = t2dv.u === '%' ? (t2dv.v * l.offsetWidth / 100) : t2dv.v, + t2d.y = 0 } + return t2d; } } else if (/rotate|skew/.test(p)) { if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(p)) { - return { value: trueDimension(v,true).v, unit: (trueDimension(v,true).u||'deg') }; + var r3d = trueDimension(v,true); + return r3d.u === 'rad' ? radToDeg(r3d.v) : r3d.v; } else if (p === 'rotate') { - var r2d = {}; - r2d.z = { value: trueDimension(v,true).v, unit: (trueDimension(v,true).u||'deg') }; + var r2d = {}, r2dv = trueDimension(v,true); + r2d.z = r2dv.u === 'rad' ? radToDeg(r2dv.v) : r2dv.v; return r2d; } } else if (p === 'scale') { - return { value: parseFloat(v) }; // this must be parseFloat(v) + return parseFloat(v); // this must be parseFloat(v) } }, unitless : function(p,v){ // scroll | opacity | unitless @@ -445,46 +441,39 @@ document.body.setAttribute('data-tweening', 'scroll'); } }, - processEasing = function (es) { //process easing - if ( typeof es === 'function') { - return es; - } else if ( typeof es === 'string' ) { - if ( /easing|linear/.test(es) ) { - return easing[es]; // regular Robert Penner Easing Functions - } else if ( /bezier/.test(es) ) { - var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','); - return g.Bezier( bz[0]*1,bz[1]*1,bz[2]*1,bz[3]*1 ); //bezier easing - } else if ( /physics/.test(es) ) { - return g.Physics[es].apply(this); // predefined physics bezier based easing functions - } else { - return g.Ease[es].apply(this); // predefined bezier based easing functions - } + processEasing = function (fn) { //process easing function + if ( typeof fn === 'function') { + return fn; + } else if ( typeof fn === 'string' ) { + return easing[fn]; // regular Robert Penner Easing Functions } }, + prepareStart = {}, + crossCheck = {}, getStartValues = function () { // stack transform props for .to() chains - var startValues = {}, cs = getInlineStyle(this._el,'transform'), + var startValues = {}, currentStyle = getInlineStyle(this._el,'transform'), deg = ['rotate','skew'], ax = ['X','Y','Z']; for (var p in this._vS){ if ( _transform.indexOf(p) !== -1 ) { var r2d = (/(rotate|translate|scale)$/.test(p)); if ( /translate/.test(p) && p !== 'translate' ) { - startValues['translate3d'] = cs['translate3d'] || _defaults[p]; + startValues['translate3d'] = currentStyle['translate3d'] || _defaults[p]; } else if ( r2d ) { // 2d transforms - startValues[p] = cs[p] || _defaults[p]; + startValues[p] = currentStyle[p] || _defaults[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 (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = cs[s] || _defaults[s]; } + if (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = currentStyle[s] || _defaults[s]; } } } } } else { if ( _scroll.indexOf(p) === -1 ) { if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity - var co = getCurrentStyle(this._el,'filter'); - startValues['opacity'] = typeof co === 'number' ? co : _defaults['opacity']; + var currentOpacity = getCurrentStyle(this._el,'filter'); + startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : _defaults['opacity']; } else { if ( _all.indexOf(p) !== -1 ) { startValues[p] = getCurrentStyle(this._el,p) || d[p]; @@ -493,47 +482,41 @@ } } } else { - startValues[p] = (this._el === null || this._el === undefined) ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop; + startValues[p] = this._el === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop; } } } - for ( var p in cs ){ // also add to _vS values from previous tweens + for ( var p in currentStyle ){ // also add to _vS values from previous tweens if ( _transform.indexOf(p) !== -1 && (!( p in this._vS )) ) { - startValues[p] = cs[p] || _defaults[p]; + startValues[p] = currentStyle[p] || _defaults[p]; } } this._vS = {}; - this._vS = preparePropertiesObject(startValues,this._el); - - if ( transformProperty in this._vE ){ // stack transform - for ( var sp in this._vS[transformProperty]) { - if (!(sp in this._vE[transformProperty])) { this._vE[transformProperty][sp] = {}; } - for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level - if ( this._vS[transformProperty][sp][spp].value !== undefined ) { - if (!(spp in this._vE[transformProperty][sp])) { this._vE[transformProperty][sp][spp] = {}; } - for ( var sppp in this._vS[transformProperty][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d - if ( !(sppp in this._vE[transformProperty][sp][spp])) { - this._vE[transformProperty][sp][spp][sppp] = this._vS[transformProperty][sp][spp][sppp]; // sppp = unit | value + this._vS = preparePropertiesObject(startValues,this._el); + + if ( transformProperty in this._vE ) { // let's stack transform + for ( var sp in this._vS[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale + if ( sp !== 'perspective') { + if ( typeof this._vS[transformProperty][sp] === 'object' ) { + for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level + if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { this._vE[transformProperty][sp] = {}; } + if ( typeof this._vS[transformProperty][sp][spp] === 'number' && typeof this._vE[transformProperty][sp][spp] === 'undefined' ) { + this._vE[transformProperty][sp][spp] = this._vS[transformProperty][sp][spp]; } } - } - } - if ( 'value' in this._vS[transformProperty][sp] && (!('value' in this._vE[transformProperty][sp])) ) { // 2nd level - for ( var spp1 in this._vS[transformProperty][sp] ) { // scale - if (!(spp1 in this._vE[transformProperty][sp])) { - this._vE[transformProperty][sp][spp1] = this._vS[transformProperty][sp][spp1]; // spp = unit | value + } else if ( typeof this._vS[transformProperty][sp] === 'number' ) { + if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { // scale + this._vE[transformProperty][sp] = this._vS[transformProperty][sp]; } } } } } - }, - prepareStart = {}, - crossCheck = {}, + }; // core easing functions - easing = g.Easing = {}; + var easing = g.Easing = {}; easing.linear = function (t) { return t; }; easing.easingSinusoidalIn = function(t) { return -Math.cos(t * Math.PI / 2) + 1; }; easing.easingSinusoidalOut = function(t) { return Math.sin(t * Math.PI / 2); }; @@ -591,13 +574,11 @@ var start = g._start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it scrollIn.call(this); - perspective(this._el,this.options); // apply the perspective and transform origin if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method - - K.svg && K.svq(this); // SVG Plugin | on start we process the SVG paths and SVG transforms + perspective.apply(this); // apply the perspective and transform origin for ( var e in this._vE ) { - if (e in crossCheck) crossCheck[e]; // this is where we do the valuesStart and valuesEnd check + if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method this._vSR[e] = this._vS[e]; } @@ -628,31 +609,40 @@ }, // single Tween object construct - Tween = g._Tween = function (_el, _vS, _vE, _o) { + Tween = function (_el, _vS, _vE, _o) { this._el = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to - this.playing = false; // _isPlaying - this.reversed = false; // _reversed - this.paused = false; //_paused + this.playing = false; + this.reversed = false; + this.paused = false; - this._startTime = null; // startTime - this._pauseTime = null; //_pauseTime + this._startTime = null; + this._pauseTime = null; - this._startFired = false; //_on StartCallbackFIRED + this._startFired = false; this._vSR = {}; // internal valuesStartRepeat this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart this._vE = preparePropertiesObject(_vE,_el); // valuesEnd this.options = {}; for (var o in _o) { this.options[o] = _o[o]; } - this.options.chain = []; //_chainedTweens + this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false + for ( var e in this._vE ) { + if (e in crossCheck && !this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method + } + + if ( this.options.perspective !== undefined && transformProperty in this._vE ) { // element transform perspective + var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px) '; + this._vE[transformProperty]['perspective'] = perspectiveString; + } + + this.options.chain = []; // chained Tweens this.options.easing = _o.easing && typeof processEasing(_o.easing) === 'function' ? processEasing(_o.easing) : easing.linear; this.options.repeat = _o.repeat || 0; this.options.repeatDelay = _o.repeatDelay || 0; - this.options.yoyo = _o.yoyo || false; // _yoyo - this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false - this.options.duration = _o.duration || 700; //duration - this.options.delay = _o.delay || 0; //delay + this.options.yoyo = _o.yoyo || false; + this.options.duration = _o.duration || 700; // duration option | default + this.options.delay = _o.delay || 0; // delay option | default this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish this.start = start; this.play = play; this.resume = play; @@ -725,8 +715,7 @@ }, fromTo = function (el, f, to, o) { var _el = selector(el); o = o || {}; - var tw = new Tween(_el, f, to, o); K.svg && K.svq(tw); // on init we process the SVG paths - return tw; + return new Tween(_el, f, to, o); }, // multiple elements tweening @@ -742,7 +731,7 @@ return K = { // export core methods to public for plugins property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods - parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, // Tween : Tween, // property parsing & preparation | Tween | crossCheck + parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing }; })); \ No newline at end of file diff --git a/package.json b/package.json index 46c2252..8a899ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kute.js", - "version": "1.5.97", + "version": "1.5.98", "description": "Complete Native Javascript animation engine.", "main": "kute.js", "scripts": { From 90dee25c425328100935ee3cd0b73d9d8f4ff456 Mon Sep 17 00:00:00 2001 From: thednp Date: Fri, 25 Nov 2016 22:54:27 +0200 Subject: [PATCH 264/471] 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 7aa15a43b519738f5e820869f0e19f316525c30f Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 25 Nov 2016 22:54:27 +0200
Subject: [PATCH 265/471] Changes: * Fixed some bug with Attr plugin *
 preparing code for a bundle build script * documentation updates

---
 bower.json                  |  2 +-
 demo/assets/js/attr.js      |  7 +++---
 demo/attr.html              |  2 +-
 demo/properties.html        |  4 +++-
 demo/src/kute-attr.min.js   |  4 ++--
 demo/src/kute-css.min.js    |  2 +-
 demo/src/kute-jquery.min.js |  2 +-
 demo/src/kute-svg.min.js    |  4 ++--
 demo/src/kute-text.min.js   |  2 +-
 demo/src/kute.min.js        |  4 ++--
 demo/start.html             | 24 +++++++++----------
 dist/kute-attr.min.js       |  4 ++--
 dist/kute-css.min.js        |  2 +-
 dist/kute-jquery.min.js     |  2 +-
 dist/kute-svg.min.js        |  4 ++--
 dist/kute-text.min.js       |  2 +-
 dist/kute.min.js            |  4 ++--
 kute-attr.js                | 48 +++++++++++++++++++++----------------
 kute-css.js                 |  1 +
 kute-svg.js                 | 24 +++++++++----------
 kute-text.js                | 11 +++++----
 kute.js                     | 12 +++++-----
 package.json                |  2 +-
 23 files changed, 92 insertions(+), 81 deletions(-)

diff --git a/bower.json b/bower.json
index 8161eef..fa86e95 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KUTE.js",
-  "version": "1.5.98",
+  "version": "1.5.98a",
   "homepage": "http://thednp.github.io/kute.js",
   "authors": [
     "thednp"
diff --git a/demo/assets/js/attr.js b/demo/assets/js/attr.js
index c9be7bb..b3fec5a 100644
--- a/demo/assets/js/attr.js
+++ b/demo/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/demo/attr.html b/demo/attr.html
index 38c6f51..e6b2acb 100644
--- a/demo/attr.html
+++ b/demo/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/demo/properties.html b/demo/properties.html
index d4e2960..27ce89a 100644
--- a/demo/properties.html
+++ b/demo/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/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index a72b425..b493eb2 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index bfab035..15f0b34 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 038e009..a3e5488 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index ddc4c77..b3e2ed4 100644
--- a/demo/src/kute.min.js
+++ b/demo/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.
    		
 		
diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js
index a72b425..b493eb2 100644
--- a/dist/kute-attr.min.js
+++ b/dist/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/dist/kute-css.min.js b/dist/kute-css.min.js
index bfab035..15f0b34 100644
--- a/dist/kute-css.min.js
+++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js
index 038e009..a3e5488 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index ddc4c77..b3e2ed4 100644
--- a/dist/kute.min.js
+++ b/dist/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;n -1 ) {
+          ats[prop+s] = trueDimension(o[p]); 
+        } else if ( !/(%|[a-z]+)$/.test(o[p]) || cv === null || cv !== null && !/(%|[a-z]+)$/.test(cv) ) {
+          if (!(prop in atts)) {
+            atts[prop] = function(l,o,a,b,v) {
+              l.setAttribute(o, number(a,b,v));
+            }
+          }
+          ats[prop] = parseFloat(o[p]);     
+        }        
+      } else {
         if (!(prop in atts)) {
           atts[prop] = function(l,u,a,b,v) {
             l.setAttribute(u, color(a,b,v,o.keepHex));
           }
         }
         ats[prop] = trueColor(o[p]);
-      } else {
-        if (!(prop in atts)) {
-          atts[prop] = function(l,o,a,b,v) {
-            l.setAttribute(o, number(a,b,v));
-          }
-        }
-        ats[prop] = parseFloat(o[p]);     
       }
     }
     return ats;
   }
 
+  return this;
 }));
\ No newline at end of file
diff --git a/kute-css.js b/kute-css.js
index 401f622..547bdc8 100644
--- a/kute-css.js
+++ b/kute-css.js
@@ -20,6 +20,7 @@
     parseProperty = K.parseProperty, prepareStart = K.prepareStart, property = K.property,
     getCurrentStyle = K.getCurrentStyle, trueDimension = K.truD, trueColor = K.truC,
     number = g._number, unit = g._unit, color = g._color,
+    
     _colors = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
     _radius  = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/%
     _boxModel  = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
diff --git a/kute-svg.js b/kute-svg.js
index 3e3507a..f423aa5 100644
--- a/kute-svg.js
+++ b/kute-svg.js
@@ -1,6 +1,6 @@
 /* KUTE.js - The Light Tweening Engine
  * package - SVG Plugin
- * desc - draw strokes, morph paths and SVG color props
+ * desc - draw SVG strokes, morph SVG and SVG transforms
  * by dnp_theme
  * Licensed under MIT-License
  */
@@ -18,15 +18,15 @@
 }(this, function(KUTE) {
   'use strict'; 
 
-  // variables, reference global objects, prepare properties
-  var g = typeof global !== 'undefined' ? global : window, K = KUTE, p, 
+  var g = typeof global !== 'undefined' ? global : window, K = KUTE, // connect plugin to KUTE object and global
     DOM = g.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
-    trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
-    _isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false,
-
-    pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
+    trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck, 
     number = g._number, unit = g._unit, color = g._color, // interpolate functions
-    coords = g._coords = function(a,b,l,v) { // function(array1, array2, array2.length, progress) for SVG morph
+    _isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false;
+  
+  // here we go with the plugin
+  var pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
+    coords = g._coords = function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph
       var points =[];
       for(var i=0;i,./?\=-").split(""), // symbols
     _numeric = String("0123456789").split(""), // numeric
@@ -43,7 +46,7 @@
             : _string, 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 ? this is definatelly a to do
+        // use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart to do
         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;
diff --git a/kute.js b/kute.js
index c2ae2a1..172decb 100644
--- a/kute.js
+++ b/kute.js
@@ -120,7 +120,7 @@
     //more internals
     getAll = function () { return _tws; },
     removeAll = function () { _tws = []; },
-    add = function (tw) { _tws.push(tw); },
+    add = g._queueTween = function (tw) { _tws.push(tw); },
     remove = function (tw) { var i = _tws.indexOf(tw); if (i !== -1) { _tws.splice(i, 1); }}, 
     stop = function () { if (tick) { _cancelAnimationFrame(tick); tick = null; } },    
 
@@ -622,15 +622,15 @@
       this._startFired = false;
 
       this._vSR = {}; // internal valuesStartRepeat
-      this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart
       this._vE = preparePropertiesObject(_vE,_el); // valuesEnd
+      this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart
+
+      for ( var e in this._vE ) {
+        if (e in crossCheck && !_o.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
+      }
 
       this.options = {}; for (var o in _o) { this.options[o] = _o[o]; }
       this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
-      for ( var e in this._vE ) {
-        if (e in crossCheck && !this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
-      }
-
       if ( this.options.perspective !== undefined && transformProperty in this._vE ) { // element transform perspective
         var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px) ';
         this._vE[transformProperty]['perspective'] = perspectiveString; 
diff --git a/package.json b/package.json
index 8a899ff..f207cfe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "1.5.98",
+  "version": "1.5.98a",
   "description": "Complete Native Javascript animation engine.",
   "main": "kute.js",
   "scripts": {

From 6ff8e274d103545fbf3664b40ee390407f6a2754 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 17:47:17 +0200
Subject: [PATCH 266/471] 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 17:47:17 +0200
Subject: [PATCH 267/471] Documentation updates and performance test page
 reworked with safety features.

---
 bower.json                  |  2 +-
 demo/about.html             |  4 +--
 demo/api.html               |  4 +--
 demo/assets/js/kute-bs.js   | 33 +++++++++---------
 demo/assets/js/perf.js      | 69 ++++++++++++++++++++++++++++++-------
 demo/extend.html            | 54 +++++++++++++++--------------
 demo/performance.html       |  8 ++---
 demo/properties.html        |  4 +--
 demo/src/kute-attr.min.js   |  2 +-
 demo/src/kute-css.min.js    |  2 +-
 demo/src/kute-jquery.min.js |  2 +-
 demo/src/kute-svg.min.js    |  2 +-
 demo/src/kute-text.min.js   |  2 +-
 demo/src/kute.min.js        |  4 +--
 dist/kute-attr.min.js       |  2 +-
 dist/kute-css.min.js        |  2 +-
 dist/kute-jquery.min.js     |  2 +-
 dist/kute-svg.min.js        |  2 +-
 dist/kute-text.min.js       |  2 +-
 dist/kute.min.js            |  4 +--
 kute.js                     | 16 ++++-----
 package.json                |  2 +-
 22 files changed, 134 insertions(+), 90 deletions(-)

diff --git a/bower.json b/bower.json
index fa86e95..de3edbb 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KUTE.js",
-  "version": "1.5.98a",
+  "version": "1.5.99",
   "homepage": "http://thednp.github.io/kute.js",
   "authors": [
     "thednp"
diff --git a/demo/about.html b/demo/about.html
index b62bd85..05ce291 100644
--- a/demo/about.html
+++ b/demo/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/demo/api.html b/demo/api.html
index 5007ddf..b9c5cb2 100644
--- a/demo/api.html
+++ b/demo/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/demo/assets/js/kute-bs.js b/demo/assets/js/kute-bs.js
index 0360c50..dd39add 100644
--- a/demo/assets/js/kute-bs.js
+++ b/demo/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/demo/assets/js/perf.js b/demo/assets/js/perf.js
index 70902d4..021b634 100644
--- a/demo/assets/js/perf.js
+++ b/demo/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/demo/extend.html b/demo/extend.html
index 21ba974..f50ab74 100644
--- a/demo/extend.html
+++ b/demo/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/demo/performance.html b/demo/performance.html
index 25f1627..54d8391 100644
--- a/demo/performance.html
+++ b/demo/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/demo/properties.html b/demo/properties.html
index 27ce89a..e04a9a8 100644
--- a/demo/properties.html
+++ b/demo/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/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index b493eb2..d6478fe 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index 15f0b34..929f73e 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index a3e5488..2655740 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index b3e2ed4..0f18df6 100644
--- a/demo/src/kute.min.js
+++ b/demo/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;n1?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/dist/kute-svg.min.js b/dist/kute-svg.min.js
index a3e5488..2655740 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index b3e2ed4..0f18df6 100644
--- a/dist/kute.min.js
+++ b/dist/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 268/471]

---
 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 f01ed026a6957dfba678413772af9f13345e28de Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 18:00:23 +0200
Subject: [PATCH 269/471]

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

diff --git a/demo/assets/js/perf.js b/demo/assets/js/perf.js
index 021b634..3a9bd99 100644
--- a/demo/assets/js/perf.js
+++ b/demo/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 270/471]

---
 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:15:00 +0200
Subject: [PATCH 271/471]

---
 demo/src/kute-svg.min.js |  2 +-
 demo/src/kute.min.js     |  2 +-
 dist/kute-svg.min.js     |  2 +-
 dist/kute.min.js         |  2 +-
 kute-svg.js              |  2 +-
 kute.js                  | 13 +++++++------
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 2655740..ae50506 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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;n1){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 272/471]

---
 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 d92fed514e2722b549a547a160159916fbf32e14 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 18:22:38 +0200
Subject: [PATCH 273/471]

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

diff --git a/demo/assets/js/perf.js b/demo/assets/js/perf.js
index 3a9bd99..c3a706b 100644
--- a/demo/assets/js/perf.js
+++ b/demo/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 274/471]

---
 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 c3b06308c34e4dca672e89739f85aebd174d1707 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 18:24:30 +0200
Subject: [PATCH 275/471]

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

diff --git a/demo/assets/js/perf.js b/demo/assets/js/perf.js
index c3a706b..51e88de 100644
--- a/demo/assets/js/perf.js
+++ b/demo/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 276/471]

---
 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:31:59 +0200
Subject: [PATCH 277/471]

---
 demo/src/kute.min.js |  2 +-
 dist/kute.min.js     |  2 +-
 kute.js              | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/demo/src/kute.min.js b/demo/src/kute.min.js
index e3d4e80..0467aba 100644
--- a/demo/src/kute.min.js
+++ b/demo/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;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;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 278/471]

---
 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 1a44fbe465a3faf890234ae8946d49c3ff384907 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 26 Nov 2016 19:00:32 +0200
Subject: [PATCH 279/471]

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

diff --git a/demo/assets/js/perf.js b/demo/assets/js/perf.js
index 51e88de..8a24f30 100644
--- a/demo/assets/js/perf.js
+++ b/demo/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.
    ';

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

---
 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 70ee2a448a774722370da360b6b6a9c623a7dad3 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 28 Nov 2016 03:07:16 +0200
Subject: [PATCH 281/471] Testing new build.

---
 build.js                  |   4 +-
 demo/assets/js/perf.js    |  11 +-
 demo/src/kute-attr.min.js |   2 +-
 demo/src/kute-css.min.js  |   2 +-
 demo/src/kute-svg.min.js  |   2 +-
 demo/src/kute-text.min.js |   2 +-
 demo/src/kute.min.js      |   2 +-
 dist/kute-attr.min.js     |   2 +-
 dist/kute-css.min.js      |   2 +-
 dist/kute-svg.min.js      |   2 +-
 dist/kute-text.min.js     |   2 +-
 dist/kute.min.js          |   2 +-
 kute-attr.js              |  23 +++-
 kute-css.js               |   8 +-
 kute-svg.js               |  24 ++--
 kute-text.js              |   2 +-
 kute.js                   | 238 +++++++++++++++++++-------------------
 17 files changed, 172 insertions(+), 158 deletions(-)

diff --git a/build.js b/build.js
index 687f9e9..280f431 100644
--- a/build.js
+++ b/build.js
@@ -25,8 +25,8 @@ function replaceK(s) {
   }
 }
 function minify(srcPath, writePath) {
-  fs.writeFile(writePath, 
-    ('// KUTE.js ' + version + ' | © dnp_theme | ' + replaceK(srcPath)  + ' | ' + license + '\n' 
+  fs.writeFile(writePath,
+    ('// KUTE.js ' + version + ' | © dnp_theme | ' + replaceK(srcPath)  + ' | ' + license + '\n'
     + uglify.minify(srcPath).code), function (err) {
     if (err) return handleError(err);
     console.log(srcPath+' is done.');
diff --git a/demo/assets/js/perf.js b/demo/assets/js/perf.js
index 8a24f30..f0c056b 100644
--- a/demo/assets/js/perf.js
+++ b/demo/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/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index d6478fe..efdd765 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index 929f73e..ff05892 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index 0467aba..b0bbaec 100644
--- a/demo/src/kute.min.js
+++ b/demo/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;n1){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/dist/kute.min.js b/dist/kute.min.js
index 0467aba..b0bbaec 100644
--- a/dist/kute.min.js
+++ b/dist/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 0) {
           if ( this.options.repeat < 9999 ) { this.options.repeat--; } else { this.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much
-          
+
           if (this.options.yoyo) { this.reversed = !this.reversed; reverse.call(this); } // handle yoyo
-            
+
           this._startTime = (this.options.yoyo && !this.reversed) ? t + this.options.repeatDelay : t; //set the right time for delay
-          return true;        
+          return true;
         } else {
-          
+
           if (this.options.complete) { this.options.complete.call(); }
-          
-          scrollOut.call(this); // unbind preventing scroll when scroll tween finished 
-          
+
+          scrollOut.call(this); // unbind preventing scroll when scroll tween finished
+
           for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) { // start animating chained tweens
             this.options.chain[i].start();
           }
@@ -251,13 +254,13 @@
       }
       return true;
     },
-  
+
     // applies the transform origin and perspective
     perspective = g._perspective = function () {
       if ( this.options.perspective !== undefined && transformProperty in this._vE ) { this._vS[transformProperty]['perspective'] = this._vE[transformProperty]['perspective']; } // element perspective
-      if ( this.options.transformOrigin !== undefined ) { this._el.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin    
+      if ( this.options.transformOrigin !== undefined ) { this._el.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin
       if ( this.options.perspectiveOrigin !== undefined ) { this._el.style[property('perspectiveOrigin')] = this.options.perspectiveOrigin; } // element perspective origin
-      if ( this.options.parentPerspective !== undefined ) { this._el.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective  
+      if ( this.options.parentPerspective !== undefined ) { this._el.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective
       if ( this.options.parentPerspectiveOrigin !== undefined ) { this._el.parentNode.style[property('perspectiveOrigin')] = this.options.parentPerspectiveOrigin; } // parent perspective origin
     },
 
@@ -267,20 +270,20 @@
       for (var x in t) {
         if (_transform.indexOf(x) !== -1) { // transform object gets built here
           if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
-            var ta = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, t[x]);  
-            
-            for (var f = 0; f < 3; f++) {        
+            var ta = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, t[x]);
+
+            for (var f = 0; f < 3; f++) {
               var a = ta[f];
               if ( /3d/.test(x) ) {
-                translateObject['translate' + a] = parseProperty.transform('translate' + a, t[x][f], l);                
+                translateObject['translate' + a] = parseProperty.transform('translate' + a, t[x][f], l);
               } else {
                 translateObject['translate' + a] = ('translate' + a in t) ? parseProperty.transform('translate' + a, t['translate' + a], l) : 0;
               }
             }
             transformObject['translate'] = translateObject;
           } else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
-            var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], 
-              rtp = ap === 'rotate' ? rotateObject : skewObject; 
+            var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'],
+              rtp = ap === 'rotate' ? rotateObject : skewObject;
             for (var r = 0; r < 3; r++) {
               var v = ra[r];
               if ( t[ap+v] !== undefined && x !== 'skewZ' ) {
@@ -294,10 +297,10 @@
           propertiesObject[transformProperty] = transformObject;
         } else if ( x !== 'transform') {
           if ( _boxModel.indexOf(x) !== -1 ) {
-            propertiesObject[x] = parseProperty.boxModel(x,t[x]); 
-          } else if (_opacity.indexOf(x) !== -1 || _scroll.indexOf(x) !== -1) { 
-            propertiesObject[x] = parseProperty.unitless(x,t[x]); 
-          } else if (_colors.indexOf(x) !== -1) { 
+            propertiesObject[x] = parseProperty.boxModel(x,t[x]);
+          } else if (_opacity.indexOf(x) !== -1 || _scroll.indexOf(x) !== -1) {
+            propertiesObject[x] = parseProperty.unitless(x,t[x]);
+          } else if (_colors.indexOf(x) !== -1) {
             propertiesObject[x] = parseProperty.colors(x,t[x]);
           } else if (x in parseProperty) { propertiesObject[x] = parseProperty[x](x,t[x],l); } // or any other property from css/ attr / svg / third party plugins
         }
@@ -311,11 +314,11 @@
       boxModel : function(p,v,l){ // box model | text props | radius props
         if (!(p in DOM)){
           DOM[p] = function(l,p,a,b,v){
-            l.style[p] = unit(a,b,'px',v);
+            l.style[p] = Math.floor(number(a,b,v))+'px';
           }
         }
         var boxValue = trueDimension(v);
-        return boxValue.u === '%' ? boxValue.v * l.offsetWidth / 100 : boxValue.v; 
+        return boxValue.u === '%' ? boxValue.v * l.offsetWidth / 100 : boxValue.v;
       },
       transform : function(p,v,l) { // transform prop / value
         if (!('transform' in DOM)) {
@@ -362,7 +365,7 @@
             } else {
               t2dv = trueDimension(tv);
               t2d.x = t2dv.u === '%' ? (t2dv.v * l.offsetWidth / 100) : t2dv.v,
-              t2d.y = 0 
+              t2d.y = 0
             }
 
             return t2d;
@@ -375,31 +378,31 @@
             var r2d = {}, r2dv = trueDimension(v,true);
             r2d.z = r2dv.u === 'rad' ? radToDeg(r2dv.v) : r2dv.v;
             return r2d;
-          } 
+          }
         } else if (p === 'scale') {
           return parseFloat(v); // this must be parseFloat(v)
         }
       },
-      unitless : function(p,v){  // scroll | opacity | unitless  
+      unitless : function(p,v){  // scroll | opacity | unitless
         if (/scroll/.test(p) && !(p in DOM) ){
           DOM[p] = function(l,p,a,b,v) {
-            l.scrollTop = number(a,b,v);
+            l.scrollTop = Math.floor(number(a,b,v));
           };
         } else if (p === 'opacity') {
-          if (!(p in DOM)) {    
+          if (!(p in DOM)) {
             if (_isIE8) {
               DOM[p] = function(l,p,a,b,v) {
                 var st = "alpha(opacity=", ep = ')';
-                l.style.filter = st + (number(a,b,v) * 100) + ep;
+                l.style.filter = st + Math.floor(number(a,b,v) * 100) + ep;
               };
             } else {
               DOM[p] = function(l,p,a,b,v) {
-                l.style.opacity = number(a,b,v);
+                l.style.opacity = Math.floor(number(a,b,v) * 100)/100;
               };
             }
           }
         }
-        return parseFloat(v); 
+        return parseFloat(v);
       },
       colors : function(p,v){ // colors
         if (!(p in DOM)) {
@@ -407,7 +410,7 @@
             l.style[p] = color(a,b,v,o.keepHex);
           };
         }
-        return trueColor(v); 
+        return trueColor(v);
       }
     },
     reverse = g._reverse = function () {
@@ -415,8 +418,8 @@
         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];    
+          this._vE[p] = tmp;
+          this._vS[p] = this._vSR[p];
         }
       }
     },
@@ -427,7 +430,7 @@
 
       setTimeout(function(){ if (!_tws.length) { stop(); } }, 48);  // when all animations are finished, stop ticking after ~3 frames
     },
-    scrollOut = function(){ //prevent scroll when tweening scroll    
+    scrollOut = function(){ //prevent scroll when tweening scroll
       if (( 'scroll' in this._vE || 'scrollTop' in this._vE ) && document.body.getAttribute('data-tweening')) {
         document.removeEventListener(touchOrWheel, preventScroll, false);
         document.removeEventListener(mouseEnter, preventScroll, false);
@@ -453,26 +456,26 @@
     getStartValues = function () { // stack transform props for .to() chains
       var startValues = {}, currentStyle = getInlineStyle(this._el,'transform'),
         deg = ['rotate','skew'], ax = ['X','Y','Z'];
-          
+
       for (var p in this._vS){
         if ( _transform.indexOf(p) !== -1 ) {
           var r2d = (/(rotate|translate|scale)$/.test(p));
           if ( /translate/.test(p) && p !== 'translate' ) {
             startValues['translate3d'] = currentStyle['translate3d'] || _defaults[p];
           } else if ( r2d ) { // 2d transforms
-            startValues[p] = currentStyle[p] || _defaults[p]; 
+            startValues[p] = currentStyle[p] || _defaults[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];                
+                var s = deg[d]+ax[a];
                 if (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = currentStyle[s] || _defaults[s]; }
               }
             }
           }
         } else {
           if ( _scroll.indexOf(p) === -1 ) {
-            if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity  
-              var currentOpacity = getCurrentStyle(this._el,'filter');          
+            if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
+              var currentOpacity = getCurrentStyle(this._el,'filter');
               startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : _defaults['opacity'];
             } else {
               if ( _all.indexOf(p) !== -1 ) {
@@ -483,12 +486,12 @@
             }
           } else {
             startValues[p] = this._el === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop;
-          }      
+          }
         }
       }
-      for ( var p in currentStyle ){ // also add to _vS values from previous tweens  
+      for ( var p in currentStyle ){ // also add to _vS values from previous tweens
         if ( _transform.indexOf(p) !== -1 && (!( p in this._vS )) ) {
-          startValues[p] = currentStyle[p] || _defaults[p]; 
+          startValues[p] = currentStyle[p] || _defaults[p];
         }
       }
 
@@ -499,7 +502,7 @@
         for ( var sp in this._vS[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
           if ( sp !== 'perspective') {
             if ( typeof this._vS[transformProperty][sp] === 'object' ) {
-              for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level 
+              for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level
                 if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { this._vE[transformProperty][sp] = {}; }
                 if ( typeof this._vS[transformProperty][sp][spp] === 'number' && typeof this._vE[transformProperty][sp][spp] === 'undefined' ) {
                   this._vE[transformProperty][sp][spp] = this._vS[transformProperty][sp][spp];
@@ -515,7 +518,7 @@
       }
     };
 
-    // core easing functions  
+    // core easing functions
   var easing = g.Easing = {};
   easing.linear = function (t) { return t; };
   easing.easingSinusoidalIn = function(t) { return -Math.cos(t * Math.PI / 2) + 1; };
@@ -563,9 +566,9 @@
   };
   easing.easingBounceIn = function(t) { return 1 - easing.easingBounceOut( 1 - t ); };
   easing.easingBounceOut = function(t) {
-    if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; } 
-    else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; } 
-    else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; } 
+    if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; }
+    else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; }
+    else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; }
     else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
   };
   easing.easingBounceInOut = function(t) { if ( t < 0.5 ) return easing.easingBounceIn( t * 2 ) * 0.5; return easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
@@ -573,13 +576,13 @@
   // these methods run faster when defined outside
   var start = g._start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
       scrollIn.call(this);
-        
+
       if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
       perspective.apply(this); // apply the perspective and transform origin
 
       for ( var e in this._vE ) {
         if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
-        this._vSR[e] = this._vS[e];      
+        this._vSR[e] = this._vS[e];
       }
 
       // now it's a good time to start
@@ -589,7 +592,7 @@
       this._startFired = false;
       this._startTime = t || time.now();
       this._startTime += this.options.delay;
-      
+
       if (!this._startFired) {
         if (this.options.start) { this.options.start.call(); }
         this._startFired = true;
@@ -600,16 +603,16 @@
     play = g._play = function () {
       if (this.paused && this.playing) {
         this.paused = false;
-        if (this.options.resume) { this.options.resume.call(); }        
-        this._startTime += time.now() - this._pauseTime;    
+        if (this.options.resume) { this.options.resume.call(); }
+        this._startTime += time.now() - this._pauseTime;
         add(this);
         !tick && ticker();  // restart ticking if stopped
       }
       return this;
     },
-    
+
     // single Tween object construct
-    Tween = g._tween = function (_el, _vS, _vE, _o) {
+    Tween = g._Tween = function (_el, _vS, _vE, _o) {
       this._el = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to
 
       this.playing = false;
@@ -629,14 +632,13 @@
 
       if ( this.options.perspective !== undefined && transformProperty in this._vE ) { // element transform perspective
         var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px) ';
-        this._vE[transformProperty]['perspective'] = perspectiveString; 
+        this._vE[transformProperty]['perspective'] = perspectiveString;
       }
 
       for ( var e in this._vE ) {
         if (e in crossCheck && !_o.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
       }
 
-
       this.options.chain = []; // chained Tweens
       this.options.easing = _o.easing && typeof processEasing(_o.easing) === 'function' ? processEasing(_o.easing) : easing.linear;
       this.options.repeat = _o.repeat || 0;
@@ -650,8 +652,8 @@
       this.pause = function() {
         if (!this.paused && this.playing) {
           remove(this);
-          this.paused = true;    
-          this._pauseTime = time.now();    
+          this.paused = true;
+          this._pauseTime = time.now();
           if (this.options.pause) { this.options.pause.call(); }
         }
         return this;
@@ -662,8 +664,8 @@
           this.playing = false;
           this.paused = false;
           scrollOut.call(this);
-            
-          if (this.options.stop) { this.options.stop.call(); }    
+
+          if (this.options.stop) { this.options.stop.call(); }
           this.stopChainedTweens();
           close.call(this);
         }
@@ -679,7 +681,7 @@
 
     // the multi elements Tween constructs
     TweensTO = function (els, vE, o) { // .to
-      this.tweens = []; var _o = []; 
+      this.tweens = []; var _o = [];
       for ( var i = 0, tl = els.length; i < tl; i++ ) {
         _o[i] = o || {}; o.delay = o.delay || 0;
         _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
@@ -687,7 +689,7 @@
       }
     },
     TweensFT = function (els, vS, vE, o) { // .fromTo
-      this.tweens = []; var _o = []; 
+      this.tweens = []; var _o = [];
       for ( var i = 0, l = els.length; i < l; i++ ) {
         _o[i] = o || {}; o.delay = o.delay || 0;
         _o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
@@ -697,7 +699,7 @@
     ws = TweensTO.prototype = TweensFT.prototype = {
       start : function(t){
         t = t || time.now();
-        for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { 
+        for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) {
           this.tweens[i].start(t);
         }
         return this;
@@ -711,7 +713,7 @@
 
     // main methods
     to = function (el, to, o) {
-      var _el = selector(el); o = o || {}; o.rpr = true;  
+      var _el = selector(el); o = o || {}; o.rpr = true;
       return new Tween(_el, to, to, o);
     },
     fromTo = function (el, f, to, o) {
@@ -729,10 +731,10 @@
       return new TweensFT(_els, f, to, o); 
     };
 
-  return K = { // export core methods to public for plugins
+  return { // export core methods to public for plugins
     property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
     to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
     parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck
     truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing
   };
-}));
\ No newline at end of file
+}));

From 1cf5f87f82eb0a31a854e7dd4c642e5851945916 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 28 Nov 2016 03:07:16 +0200
Subject: [PATCH 282/471] 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 283/471] 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

---
 README.md                  |   5 +-
 demo/about.html            |   7 +-
 demo/api.html              |  64 +++---
 demo/assets/css/kute.css   |  16 +-
 demo/assets/js/css.js      |  52 ++---
 demo/assets/js/examples.js |   5 +-
 demo/assets/js/kute-bs.js  |   6 +-
 demo/assets/js/perf.js     |  13 +-
 demo/attr.html             |   2 +-
 demo/css.html              |   8 +-
 demo/easing.html           |   2 +-
 demo/examples.html         |  19 +-
 demo/extend.html           |  36 ++--
 demo/features.html         |   2 +-
 demo/index.html            |   4 +-
 demo/options.html          |   2 +-
 demo/performance.html      |   4 +-
 demo/properties.html       |   8 +-
 demo/src/kute-attr.min.js  |   2 +-
 demo/src/kute-css.min.js   |   2 +-
 demo/src/kute-svg.min.js   |   2 +-
 demo/src/kute-text.min.js  |   2 +-
 demo/src/kute.min.js       |   2 +-
 demo/start.html            |   2 +-
 demo/svg.html              |   2 +-
 demo/text.html             |   2 +-
 dist/kute-attr.min.js      |   2 +-
 dist/kute-css.min.js       |   2 +-
 dist/kute-svg.min.js       |   2 +-
 dist/kute-text.min.js      |   2 +-
 dist/kute.min.js           |   2 +-
 kute-attr.js               |  28 +--
 kute-css.js                |  77 ++++---
 kute-jquery.js             |   8 +-
 kute-svg.js                | 154 +++++++-------
 kute-text.js               |  24 +--
 kute.js                    | 423 +++++++++++++++++++------------------
 37 files changed, 491 insertions(+), 504 deletions(-)

diff --git a/README.md b/README.md
index e9dca84..77af858 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ For documentation, examples and other cool tips, check the MIT License
+MIT License
\ No newline at end of file
diff --git a/demo/about.html b/demo/about.html
index 05ce291..5f31d10 100644
--- a/demo/about.html
+++ b/demo/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/demo/api.html b/demo/api.html
index b9c5cb2..aa3915a 100644
--- a/demo/api.html
+++ b/demo/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/demo/assets/css/kute.css b/demo/assets/css/kute.css
index 8166ab9..e931b87 100644
--- a/demo/assets/css/kute.css
+++ b/demo/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/demo/assets/js/css.js b/demo/assets/js/css.js
index fa92998..ec680a9 100644
--- a/demo/assets/js/css.js
+++ b/demo/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/demo/css.html b/demo/css.html
index e155f9b..e89d255 100644
--- a/demo/css.html
+++ b/demo/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/demo/easing.html b/demo/easing.html
index 74cb6ca..f5e16b5 100644
--- a/demo/easing.html
+++ b/demo/easing.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
diff --git a/demo/examples.html b/demo/examples.html
index d3eb134..967a9bc 100644
--- a/demo/examples.html
+++ b/demo/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/demo/extend.html b/demo/extend.html
index f50ab74..4647cb4 100644
--- a/demo/extend.html
+++ b/demo/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/demo/options.html b/demo/options.html
index e0579ee..c8e6c6d 100644
--- a/demo/options.html
+++ b/demo/options.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
diff --git a/demo/performance.html b/demo/performance.html
index 54d8391..72985cb 100644
--- a/demo/performance.html
+++ b/demo/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/demo/properties.html b/demo/properties.html
index e04a9a8..1348088 100644
--- a/demo/properties.html
+++ b/demo/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/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index efdd765..975affc 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index ff05892..a9bcc0e 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 2abdb63..fb4841b 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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/demo/src/kute-text.min.js b/demo/src/kute-text.min.js
index fdfa090..82bffe8 100644
--- a/demo/src/kute-text.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index b0bbaec..782a3ae 100644
--- a/demo/src/kute.min.js
+++ b/demo/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/demo/svg.html b/demo/svg.html
index e6ae4a1..f406fda 100644
--- a/demo/svg.html
+++ b/demo/svg.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
diff --git a/demo/text.html b/demo/text.html
index e5c7d06..d4b60eb 100644
--- a/demo/text.html
+++ b/demo/text.html
@@ -8,7 +8,7 @@
 
     
     
-    
+    
     
     
     
diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js
index efdd765..975affc 100644
--- a/dist/kute-attr.min.js
+++ b/dist/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/dist/kute-css.min.js b/dist/kute-css.min.js
index ff05892..a9bcc0e 100644
--- a/dist/kute-css.min.js
+++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js
index 2abdb63..fb4841b 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute-text.min.js b/dist/kute-text.min.js
index fdfa090..82bffe8 100644
--- a/dist/kute-text.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index b0bbaec..782a3ae 100644
--- a/dist/kute.min.js
+++ b/dist/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>0)/100) + b.prefix );
               }
             } else {
               atts[prop+s] = function(l,p,a,b,v) {
                 var _p = _p || p.replace(s,'');
-                l.setAttribute(_p, Math.floor(number(a.v,b.v,v)) + b.u );
+                l.setAttribute(_p, (number(a.v,b.v,v)>>0) + b.prefix );
               }
             }
           }
           ats[prop+s] = trueDimension(o[p]); 
-        } else if ( !/(%|[a-z]+)$/.test(o[p]) || cv === null || cv !== null && !/(%|[a-z]+)$/.test(cv) ) {
+        } else if ( !regex.test(o[p]) || cv === null || cv !== null && !regex.test(cv) ) {
           if (!(prop in atts)) {
             if (/opacity/i.test(p)) {
               atts[prop] = function(l,o,a,b,v) {
-                l.setAttribute(o, Math.floor(number(a,b,v) * 100) / 100 );
+                l.setAttribute(o, (number(a,b,v) * 100 >> 0) / 100 );
               }
             } else {
               atts[prop] = function(l,o,a,b,v) {
-                l.setAttribute(o, Math.floor(number(a,b,v) *10 ) / 10 );
+                l.setAttribute(o, (number(a,b,v) *10 >> 0 ) / 10 );
               }
             }
           }
diff --git a/kute-css.js b/kute-css.js
index 0cd2c6b..0acf194 100644
--- a/kute-css.js
+++ b/kute-css.js
@@ -16,10 +16,10 @@
 })(this, function(KUTE){
   'use strict';
 
-  var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom, 
+  var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = K.dom, 
     parseProperty = K.parseProperty, prepareStart = K.prepareStart, property = K.property,
     getCurrentStyle = K.getCurrentStyle, trueDimension = K.truD, trueColor = K.truC,
-    number = g._number, unit = g._unit, color = g._color;
+    number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color;
 
   var _colors = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
     _boxModel  = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
@@ -27,10 +27,10 @@
       'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'], // dimensions / box model
     _radius  = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/%
     _textProperties  = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties
-    _clip = ['clip'], _bg  = ['backgroundPosition'], // clip | background position
-    _mergeTextAndBox = _boxModel.concat(_textProperties), // a merge of all properties with px|%|em|rem|etc unit
+    _clip = ['clip'], _backgroundPosition  = ['backgroundPosition'], // clip | background position
+    _textAndBox = _boxModel.concat(_textProperties), // a merge of all properties with px|%|em|rem|etc unit
     _mergeUnits = _radius.concat(_boxModel,_textProperties), // a merge of all properties with px|%|em|rem|etc unit
-    _all = _colors.concat(_clip, _radius, _boxModel, _textProperties, _bg), al = _all.length, 
+    _all = _colors.concat(_clip, _radius, _boxModel, _textProperties, _backgroundPosition), al = _all.length, 
     _defaults = _defaults || {}; //all properties default values  
  
   //populate default values object
@@ -39,7 +39,7 @@
       _defaults[_all[i]] = 'rgba(0,0,0,0)'; // _defaults[p] = {r:0,g:0,b:0,a:1};
     } else if ( _mergeUnits.indexOf(_all[i]) !== -1 ) {
       _defaults[_all[i]] = 0;      
-    } else if ( _bg.indexOf(_all[i]) !== -1 ){
+    } else if ( _backgroundPosition.indexOf(_all[i]) !== -1 ){
       _defaults[_all[i]] = [50,50];
     } else if ( _all[i] === 'clip' ){
       _defaults[_all[i]] = [0,0,0,0];  
@@ -56,50 +56,57 @@
       }
       return trueColor(v); 
     };
-    prepareStart[_colors[i]] = function(el,p,v){
-      return getCurrentStyle(el,p) || _defaults[p];
+    prepareStart[_colors[i]] = function(p){
+      return getCurrentStyle(this.element,p) || _defaults[p];
     };
   }
   
   // create prepare/process/render functions for additional box model properties
-  for (var i = 0, l = _mergeTextAndBox.length; i -1) {
+          DOM[p] = function(l,p,a,b,v){
+            l.style[p] = ( v > 0.98 || v<0.02 ? (number(a.v,b.v,v) * 100 >> 0)/100 : number(a.v,b.v,v)>>0 ) + b.u;
+          }
+        } else {
+          DOM[p] = function(l,p,a,b,v){
+            l.style[p] = ((number(a.v,b.v,v) * 100 >> 0)/100) + b.u;
+          }
         }
       }
       return trueDimension(v); 
     };
-    prepareStart[_mergeTextAndBox[i]] = function(el,p,v){
-      return getCurrentStyle(el,p) || _defaults[p];
+    prepareStart[_textAndBox[i]] = function(p,v){
+      return getCurrentStyle(this.element,p) || _defaults[p];
     };
   }
   
   //create prepare/process/render functions for radius properties
   for (var i = 0, l = _radius.length; i> 0)/100) + b.u;
         }
       }
       return trueDimension(v);
     };
-    prepareStart[prefixedProp] = function(el,p,v){
-      return getCurrentStyle(el,prefixedProp) || _defaults[p];
+    prepareStart[_radius[i]] = function(p,v){
+      var radiusProp = p === _radius[0] ? _radius[1] : p; radiusProp = property(radiusProp); // old Safari has a problem with borderRadius
+      return getCurrentStyle(this.element,radiusProp) || _defaults[p];
     };
   }
   
   // clip
-  parseProperty['clip'] = function(p,v){
+  parseProperty.clip = function(p,v){
     if ( !(p in DOM) ) {
       DOM[p] = function(l,p,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] = unit(c1,c2,cu,v);
+          cl[h] = ((number(c1,c2,v)*100 >> 0)/100) + cu;
         }  
         l.style[p] = 'rect('+cl+')';
       };
@@ -113,30 +120,30 @@
     }
   };
   
-  prepareStart['clip'] = function(el,p,v){
-    var c = getCurrentStyle(el,p), w = getCurrentStyle(el,'width'), h = getCurrentStyle(el,'height');      
+  prepareStart.clip = function(p,v){
+    var c = getCurrentStyle(this.element,p), w = getCurrentStyle(this.element,'width'), h = getCurrentStyle(this.element,'height');      
     return !/rect/.test(c) ? [0, w, h, 0] : c;
   };
     
   // background position
-  parseProperty['backgroundPosition'] = function(p,v) {
-    if ( !(p in DOM) ) {        
+  parseProperty.backgroundPosition = function(p,v) {
+    if ( !(p in DOM) ) {
       DOM[p] = function(l,p,a,b,v) {
-        l.style[p] = unit(a.x.v,b.x.v,'%',v) + ' ' + unit(a.y.v,b.y.v,'%',v);
+        l.style[p] = ((number(a[0],b[0],v)*100>>0)/100) + '%' + ' ' + ((number(a[1],b[1],v)*100>>0)/100) + '%';
       };
     }
-    if ( v instanceof Array ){        
-      return { x: trueDimension(v[0])||{ v: 50, u: '%' }, y: trueDimension(v[1])||{ v: 50, u: '%' } };
+    if ( v instanceof Array ){
+      var x = trueDimension(v[0]).v, y = trueDimension(v[1]).v;
+      return [ x !== NaN ? x : 50, y !== NaN ? y : 50 ];
     } else {
-      var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50), xp, yp;
-      posxy = /\,/g.test(posxy) ? posxy.split(/\,/g) : posxy.split(/\s/g); posxy = posxy.length === 2 ? posxy : [posxy[0],50];
-      xp = trueDimension(posxy[0]); yp = trueDimension(posxy[1]);
-      return { x: xp, y: yp };
+      var posxy = v.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 ];
     }
   }
-  prepareStart['backgroundPosition'] = function(el,p,v){
-    return getCurrentStyle(el,p) || _defaults[p];
-  }
+  prepareStart.backgroundPosition = function(p,v){
+    return getCurrentStyle(this.element,p) || _defaults[p];
+  }  
   
   return this;
 });
\ No newline at end of file
diff --git a/kute-jquery.js b/kute-jquery.js
index f883e5a..7c65773 100644
--- a/kute-jquery.js
+++ b/kute-jquery.js
@@ -4,7 +4,7 @@
  * Licensed under MIT-License
  */
 
- (function(root,factory){
+(function(root,factory){
   // We need to require the root KUTE and jQuery.
   if (typeof define === 'function' && define.amd) {
     define(["./kute.js", "jquery"], function(KUTE, $){
@@ -29,14 +29,12 @@
   'use strict';
 
   $.fn.fromTo = function(from,to,ops) {
-    var el = this.length > 1 ? this : this[0],
-        method = this.length > 1 ? 'allFromTo' : 'fromTo';
+    var el = this.length > 1 ? this : this[0], method = this.length > 1 ? 'allFromTo' : 'fromTo';
     return KUTE[method](el,from,to,ops);
   };
 
   $.fn.to = function(to,ops) {
-    var el = this.length > 1 ? this : this[0],
-        method = this.length > 1 ? 'allTo' : 'to';
+    var el = this.length > 1 ? this : this[0], method = this.length > 1 ? 'allTo' : 'to';
     return KUTE[method](el,to,ops);
   };
 
diff --git a/kute-svg.js b/kute-svg.js
index 27b1b80..e576b28 100644
--- a/kute-svg.js
+++ b/kute-svg.js
@@ -19,19 +19,19 @@
   'use strict'; 
 
   var g = typeof global !== 'undefined' ? global : window, K = KUTE, // connect plugin to KUTE object and global
-    DOM = g.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
+    DOM = K.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
     trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck, 
-    number = g._number, unit = g._unit, color = g._color, // interpolate functions
+    number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolate functions
     _isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false;
   
   // here we go with the plugin
   var pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
-    coords = g._coords = function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph
+    coords = g.Interpolate.coords = function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph
       var points =[];
       for(var i=0;i> 0 );
         }
       }
       return points;
@@ -168,21 +168,21 @@
     };
   
   // process path object and also register the render function
-  parseProperty['path'] = function(a,o,l) { // K.pp['path']('path',value,element);
+  parseProperty.path = function(o,v) {
     if (!('path' in DOM)) {
-      DOM['path'] = function(l,p,a,b,v){
+      DOM.path = function(l,p,a,b,v){
         l.setAttribute("d", v === 1 ? b.o : 'M' + coords( a['d'],b['d'],b['d'].length,v ) + 'Z' );   
       }
     }
-    return getPath(o);
+    return getPath(v);
   };
     
-  prepareStart['path'] = function(el,p,v){
-    return el.getAttribute('d');
+  prepareStart.path = function(p){
+    return this.element.getAttribute('d');
   };
 
-  crossCheck['path'] = function() {
-    var p1 = getOnePath(this._vS.path.o), p2 = getOnePath(this._vE.path.o), paths;
+  crossCheck.path = function() {
+    var p1 = getOnePath(this.valuesStart.path.o), p2 = getOnePath(this.valuesEnd.path.o), paths;
 
     // path tween options
     this.options.morphPrecision = this.options && 'morphPrecision' in this.options ? parseInt(this.options.morphPrecision) : 15;
@@ -191,16 +191,16 @@
     // begin processing paths
     paths = computePathCross.apply(this,[p1,p2]);
 
-    this._vS.path.d = paths[0];
-    this._vE.path.d = paths[1];
+    this.valuesStart.path.d = paths[0];
+    this.valuesEnd.path.d = paths[1];
   };
 
 
   // SVG DRAW
-  var percent = function(v,l){ return parseFloat(v) / 100 * l;}, // percent
+  var percent = function(v,l){ return parseFloat(v) / 100 * l; }, // percent
     // SVG DRAW UTILITITES
     // http://stackoverflow.com/a/30376660
-    getRectLength = function(el){ // getRectLength - return the length of a Rect
+    getRectLength = function(el){ // returns the length of a Rect
       var w = el.getAttribute('width');
       var h = el.getAttribute('height');
       return (w*2)+(h*2);
@@ -231,23 +231,23 @@
       }
       return len;
     },
-    getLineLength = function(el){ // getLineLength - return the length of the line
+    getLineLength = function(el){ // return the length of the line
       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));
     },
-    getCircleLength = function(el){ // getCircleLength - return the length of the circle
+    getCircleLength = function(el){ // return the length of the circle
       var r = el.getAttribute('r');
       return 2 * Math.PI * r; 
     },
-    getEllipseLength = function(el) { // getEllipseLength - returns the length of an ellipse
+    getEllipseLength = function(el) { // returns the length of an ellipse
       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;
     },
-    getTotalLength = function(el){ // getLength - returns the result of any of the below functions
+    getTotalLength = function(el){ // returns the result of any of the below functions
       if (/rect/.test(el.tagName)) {
         return getRectLength(el);
       } else if (/circle/.test(el.tagName)) {
@@ -278,19 +278,19 @@
       return { s: start, e: end, l: l } 
     };
   
-  parseProperty['draw'] = function(a,o,el){ // register the draw property
+  parseProperty.draw = function(a,o){ // register the draw property
     if (!('draw' in DOM)) {
-      DOM['draw'] = function(l,p,a,b,v){
-        var ll = a.l, s = Math.floor(number(a.s,b.s,v)), e = Math.floor(number(a.e,b.e,v)), o = 0 - s;
+      DOM.draw = function(l,p,a,b,v){
+        var ll = a.l>>0, s = number(a.s,b.s,v)>>0, e = number(a.e,b.e,v)>>0, o = 0 - s;
         l.style.strokeDashoffset = o +'px';
-        l.style.strokeDasharray = e+o<1.01 ? '0px, ' + ll + 'px' : (e+o) + 'px, ' + ll + 'px';
+        l.style.strokeDasharray = (e+o-0.5>>0) + 'px, ' + ll + 'px';
       }
     }
-    return getDraw(el,o);
+    return getDraw(this.element,o);
   }
   
-  prepareStart['draw'] = function(el,p,v){
-    return getDraw(el);
+  prepareStart.draw = function(){
+    return getDraw(this.element);
   }
 
 
@@ -305,117 +305,105 @@
       }
       return c;
     },
-    translateSVG = g._translateSVG = function (s,e,a,b,v){ // translate(i+'(',')',a[i],b[i],v)
-      return s + ((a[1] === b[1] && b[1] === 0 ) ? (Math.floor(number(a[0],b[0],v) * 10)/10)
-                                                 : ((Math.floor(number(a[0],b[0],v) * 10)/10) + ' ' + (Math.floor(number(a[1],b[1],v)) *10)/10)) + e;
+    translateSVG = g.Interpolate.translateSVG = function (s,e,a,b,v){ // translate(i+'(',')',a[i],b[i],v)
+      return s + ( (a[1] === b[1] && b[1] === 0 ) ? ((number(a[0],b[0],v) * 10 >> 0)/10)
+                                                 : (((number(a[0],b[0],v) * 10 >> 0)/10) + ' ' + ((number(a[1],b[1],v)) *10 >> 0)/10) ) + e;
     },
-    rotateSVG = g._rotateSVG = function (s,e,a,b,v){
-       return s + ( Math.floor(number(a[0],b[0],v)*10)/10 + ' ' + b[1] + ',' + b[2]) + e;
+    rotateSVG = g.Interpolate.rotateSVG = function (s,e,a,b,v){
+       return s + ( (number(a[0],b[0],v)*10 >> 0)/10 + ' ' + b[1] + ',' + b[2] ) + e;
     },
-    scaleSVG = g._scaleSVG = function (s,e,a,b,v){ // scale / skew
-      return s + Math.floor(number(a,b,v)*100)/100 + e;
+    scaleSVG = g.Interpolate.scaleSVG = function (s,e,a,b,v){ // scale would very much like to have 3 decimals
+      return s + ( (number(a,b,v)*1000 >> 0)/1000 ) + e;
     },
-    skewSVG = g._skewSVG = function (s,e,a,b,v){ // scale / skew
-      return s + Math.floor(number(a,b,v)*10)/10 + e;
+    skewSVG = g.Interpolate.skewSVG = function (s,e,a,b,v){ // skew
+      return s + ( (number(a,b,v)*10 >> 0)/10 ) + e;
     };
 
-  parseProperty['svgTransform'] = function(p,v,l){
+  parseProperty.svgTransform = function(p,v){
     // register the render function
     if (!('svgTransform' in DOM)) {
       
-      DOM['svgTransform'] = function(l,p,a,b,v){
-        var tl = '', rt = '', sx = '', sy = '', s = '';
-
-        for (var i in b){
-          if ( i === 'translate'){ // translate
-            tl += translateSVG(i+'(',')',a[i],b[i],v);
-          } else if ( i === 'rotate'){ // rotate
-            rt += rotateSVG(i+'(',')',a[i],b[i],v);
-          } else if ( i === 'scale'){ // scale
-            s += scaleSVG(i+'(',')',a[i],b[i],v);
-          } else if ( i === 'skewX'){ // skewX
-            sx += skewSVG(i+'(',')',a[i],b[i],v);
-          } else if ( i === 'skewY'){ // skewY
-            sy += skewSVG(i+'(',')',a[i],b[i],v);
-          }
-        }
-
-        l.setAttribute('transform', (tl+s+rt+sx+sy) );
+      DOM.svgTransform = function(l,p,a,b,v){
+        l.setAttribute('transform', ('translate' in a ? translateSVG('translate(',')',a.translate,b.translate,v) : '')
+                                   +('rotate' in a ? rotateSVG('rotate(',')',a.rotate,b.rotate,v) : '')
+                                   +('scale' in a ? scaleSVG('scale(',')',a.scale,b.scale,v) : '')
+                                   +('skewX' in a ? skewSVG('skewX(',')',a.skewX,b.skewX,v) : '')
+                                   +('skewY' in a ? skewSVG('skewY(',')',a.skewY,b.skewY,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;
+    var svgTransformObject = {}, bb = this.element.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]
         : /\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]*1,cx,cy];
-        tf[i] = r;
+        svgTransformObject[i] = r;
       } else if (i === 'translate'){
         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];
+        svgTransformObject[i] = [t[0] * 1||0, t[1] * 1||0];
       } else if (i === 'scale'){
-        tf[i] = v[i] * 1||1;
+        svgTransformObject[i] = v[i] * 1||1;
       } else if (/skew/.test(i)) {
-        tf[i] = v[i] * 1||0;
+        svgTransformObject[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
-    if ('scale' in tf) {
-      !('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;
+    if ('scale' in svgTransformObject) {
+      !('translate' in svgTransformObject) && ( svgTransformObject['translate'] = [0,0] ); // if no translate is found in current value or next value, we default to 0
+      svgTransformObject['translate'][0] += (1-svgTransformObject['scale']) * bb.width/2;
+      svgTransformObject['translate'][1] += (1-svgTransformObject['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;
+      if ('rotate' in svgTransformObject) {
+        svgTransformObject['rotate'][1] -= 'skewX' in svgTransformObject ? Math.tan(svgTransformObject['skewX']) * bb.height : 0;
+        svgTransformObject['rotate'][2] -= 'skewY' in svgTransformObject ? Math.tan(svgTransformObject['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;
+      svgTransformObject['translate'][0] += 'skewX' in svgTransformObject ? Math.tan(svgTransformObject['skewX']) * bb.height*2 : 0;
+      svgTransformObject['translate'][1] += 'skewY' in svgTransformObject ? Math.tan(svgTransformObject['skewY']) * bb.width*2 : 0;
     } // more variations here https://gist.github.com/thednp/0b93068e20adb84658b5840ead0a07f8
 
-    return tf;
+    return svgTransformObject;
   }
 
   // returns an obect with current transform attribute value
-  prepareStart['svgTransform'] = function(l,p,t) {
-    var tr = {}, i, ctr = parseTransform(l.getAttribute('transform'));
+  prepareStart.svgTransform = function(p,t) {
+    var tr = {}, i, ctr = parseTransform(this.element.getAttribute('transform'));
     for (i in t) { tr[i] = i in ctr ? ctr[i] : (i==='scale'?1:0); } // find a value in current attribute value or add a default value
     return tr;
   }
 
-  crossCheck['svgTransform'] = function() { // helper function that helps preserve current transform properties into the objects
-    var bb = this._el.getBBox(), ctr = parseTransform(this._el.getAttribute('transform')), r, t, i,
+  crossCheck.svgTransform = function() { // helper function that helps preserve current transform properties into the objects
+    var bb = this.element.getBBox(), ctr = parseTransform(this.element.getAttribute('transform')), r, t, i,
       cx = bb.x + bb.width/2, cy = bb.y + bb.height/2;
     
     for ( i in ctr ) { // populate the valuesStart
       if (i === 'translate'){
         t = ctr[i] instanceof Array ? ctr[i] : /\,|\s/.test(ctr[i]) ? ctr[i].split(/\,|\s/) : [ctr[i]*1,0];
-        this._vS.svgTransform[i] = [t[0] * 1||0, t[1] * 1||0];
+        this.valuesStart.svgTransform[i] = [t[0] * 1||0, t[1] * 1||0];
       } else if (i === 'scale'){
-        this._vS.svgTransform[i] = ctr[i] * 1||1;
+        this.valuesStart.svgTransform[i] = ctr[i] * 1||1;
       } else if (i === 'rotate'){
         r = ctr[i] instanceof Array ? ctr[i]
         : /\s/.test(ctr[i]) ? [ctr[i].split(' ')[0]*1, ctr[i].split(' ')[1].split(',')[0]*1, ctr[i].split(' ')[1].split(',')[1]*1] 
         : [ctr[i]*1,cx,cy];
-        this._vS.svgTransform[i] = r;
+        this.valuesStart.svgTransform[i] = r;
       } else if (/skew/.test(i)) {
-        this._vS.svgTransform[i] = ctr[i] * 1||0;
+        this.valuesStart.svgTransform[i] = ctr[i] * 1||0;
       }
     }
 
-    for (var i in this._vS.svgTransform) {
-      if (!(i in this._vE.svgTransform)) { // copy existing and unused properties to the valuesEnd
-        this._vE.svgTransform[i] = this._vS.svgTransform[i];
+    for (var i in this.valuesStart.svgTransform) {
+      if (!(i in this.valuesEnd.svgTransform)) { // copy existing and unused properties to the valuesEnd
+        this.valuesEnd.svgTransform[i] = this.valuesStart.svgTransform[i];
       }
-      if (i === 'rotate' in this._vS.svgTransform && 'rotate' in this._vE.svgTransform){ // make sure to use the right transform origin when rotation is used
-        this._vE.svgTransform.rotate[1] = this._vS.svgTransform.rotate[1] = cx;
-        this._vE.svgTransform.rotate[2] = this._vS.svgTransform.rotate[2] = cy;
+      if (i === 'rotate' in this.valuesStart.svgTransform && 'rotate' in this.valuesEnd.svgTransform){ // make sure to use the right transform origin when rotation is used
+        this.valuesEnd.svgTransform.rotate[1] = this.valuesStart.svgTransform.rotate[1] = cx;
+        this.valuesEnd.svgTransform.rotate[2] = this.valuesStart.svgTransform.rotate[2] = cy;
       }
     }
   }
diff --git a/kute-text.js b/kute-text.js
index a04378b..0a88739 100644
--- a/kute-text.js
+++ b/kute-text.js
@@ -18,8 +18,8 @@
   'use strict';
 
   var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
-    K = KUTE, DOM = g.dom, prepareStart = K.prepareStart,
-    parseProperty = K.parseProperty, number = g._number;
+    K = KUTE, DOM = K.dom, prepareStart = K.prepareStart,
+    parseProperty = K.parseProperty, number = g.Interpolate.number;
   
   // let's go with the plugin
   var _string = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
@@ -28,15 +28,15 @@
     _numeric = String("0123456789").split(""), // numeric
     _alphanumeric = _string.concat(_stringUppercase,_numeric), // alpha numeric
     _all = _alphanumeric.concat(_symbols), // all caracters
-    random = Math.random, floor = Math.floor, min = Math.min;
+    random = Math.random, min = Math.min;
 
-  prepareStart['text'] = prepareStart['number'] = function(l,p,v){
-    return l.innerHTML;
+  prepareStart.text = prepareStart.number = function(p,v){
+    return this.element.innerHTML;
   }
     
-  parseProperty['text'] = function(p,v,l) {
+  parseProperty.text = function(p,v) {
     if ( !( 'text' in DOM ) ) {
-      DOM['text'] = function(l,p,a,b,v,o) {
+      DOM.text = function(l,p,a,b,v,o) {
         var tp = tp || o.textChars === 'alpha' ? _string // textChars is alpha
             : o.textChars === 'upper' ? _stringUppercase  // textChars is numeric
             : o.textChars === 'numeric' ? _numeric  // textChars is numeric
@@ -44,11 +44,11 @@
             : o.textChars === 'symbols' ? _symbols // textChars is symbols
             : o.textChars ? o.textChars.split('') // textChars is a custom text
             : _string, ll = tp.length,
-            t = tp[floor((random() * ll))], ix = '', tx = '', fi = a.substring(0), f = b.substring(0); 
+            t = tp[(random() * ll)>>0], ix = '', tx = '', fi = a.substring(0), f = b.substring(0); 
 
         // use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart to do
-        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
+        ix = a !== '' ? fi.substring(fi.length, min(v * fi.length, fi.length)>>0 ) : ''; // initial text, A value 
+        tx = f.substring(0, min(v * f.length, f.length)>>0 ); // end text, B value
         l.innerHTML = v < 1 ? tx + t + ix : b;
       }
     }
@@ -57,8 +57,8 @@
     
   parseProperty['number'] = function(p,v,l) {
     if ( !( 'number' in DOM ) ) {
-      DOM['number'] = function(l,p,a,b,v) {
-        l.innerHTML = floor( number(a, b, v));
+      DOM.number = function(l,p,a,b,v) {
+        l.innerHTML = number(a, b, v)>>0;
       }
     }
     return parseInt(v) || 0;
diff --git a/kute.js b/kute.js
index 3367076..ba0c902 100644
--- a/kute.js
+++ b/kute.js
@@ -15,15 +15,15 @@
 
   // set a custom scope for KUTE.js
   var g = typeof global !== 'undefined' ? global : window, time = g.performance,
-    _tws = g._tweens = [], tick = null;
+    tweens = [], tick = null;
 
   //supported properties
   var _colors = ['color', 'backgroundColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
     _boxModel  = ['top', 'left', 'width', 'height'], // dimensions / box model
     _transform  = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'], // transform
-    _scroll  = ['scrollTop', 'scroll'], //scroll, it has no default value, it's calculated on tween start
+    _scroll  = ['scroll'], //scroll, it has no default value, it's calculated on tween start
     _opacity  = ['opacity'], // opacity
-    _all = _colors.concat(_scroll, _opacity, _boxModel, _transform), al = _all.length,
+    _all = _colors.concat( _opacity, _boxModel, _transform), al = _all.length,
     _defaults = {}; //all properties default values
 
   //populate default values object
@@ -76,11 +76,11 @@
     },
     trueColor = function (v) { // replace transparent and transform any color to rgba()/rgb()
       if (/rgb|rgba/.test(v)) { // first check if it's a rgb string
-        var vrgb = v.replace(/[^\d,]/g, '').split(','), y = vrgb[3] ? vrgb[3] : null;
+        var vrgb = v.replace(/\s|\)/,'').split('(')[1].split(','), y = vrgb[3] ? vrgb[3] : null;
         if (!y) {
           return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
         } else {
-          return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: y*1 };
+          return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(y) };
         }
       } else if (/^#/.test(v)) {
         var fromHex = hexToRGB(v); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
@@ -99,7 +99,7 @@
     rgbToHex = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
       return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
     },
-    hexToRGB = g._htr = function (hex) {
+    hexToRGB = function (hex) {
       var shr = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
       hex = hex.replace(shr, function (m, r, g, b) {
         return r + r + g + g + b + b;
@@ -147,13 +147,13 @@
     },
 
     //more internals
-    getAll = function () { return _tws; },
-    removeAll = function () { _tws = []; },
-    add = g._queueTween = function (tw) { _tws.push(tw); },
-    remove = function (tw) { var i = _tws.indexOf(tw); if (i !== -1) { _tws.splice(i, 1); }},
+    getAll = function () { return tweens; },
+    removeAll = function () { tweens = []; },
+    add = function (tw) { tweens.push(tw); },
+    remove = function (tw) { var i = tweens.indexOf(tw); if (i !== -1) { tweens.splice(i, 1); }},
     stop = function () { if (tick) { _cancelAnimationFrame(tick); tick = null; } },
 
-    canTouch = ('ontouchstart' in g || navigator.msMaxTouchPoints) || false, // support Touch?
+    canTouch = ('ontouchstart' in g || navigator && navigator.msMaxTouchPoints) || false, // support Touch?
     touchOrWheel = canTouch ? 'touchstart' : 'mousewheel', mouseEnter = 'mouseenter', //events to prevent on scroll
     _requestAnimationFrame = g.requestAnimationFrame || g.webkitRequestAnimationFrame || function (c) { return setTimeout(c, 16) },
     _cancelAnimationFrame = g.cancelAnimationFrame || g.webkitCancelRequestAnimationFrame || function (c) { return clearTimeout(c) },
@@ -161,72 +161,72 @@
 
     //true scroll container
     body = document.body, html = document.getElementsByTagName('HTML')[0],
-    scrollContainer = /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html,
+    scrollContainer = navigator && /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html,
 
     _isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false,
     _isIE8 = _isIE === 8; // check IE8/IE
 
 
   // KUTE.js INTERPOLATORS
-  var number = g._number = function(a,b,v) { // number1, number2, progress
+  var interpolate = g.Interpolate = {},
+    number = interpolate.number = function(a,b,v) { // number1, number2, progress
       a = +a; b -= a; return a + b * v;
     },
-    unit = g._unit = function(a,b,u,v) { // number1, number2, unit, progress
-      a = +a; b -= a; return (a + b * v) + u;
+    unit = interpolate.unit = function(a,b,u,v) { // number1, number2, unit, progress
+      a = +a; b -= a; return ( a + b * v ) + u;
     },
-    color = g._color = function(a,b,v,h){ // rgba1, rgba2, progress, convertToHex(true/false)
+    color = interpolate.color = function(a,b,v,h){ // rgba1, rgba2, progress, convertToHex(true/false)
       var _c = {}, c, n = number, ep = ')', cm =',', r = 'rgb(', ra = 'rgba(';
-      for (c in b) { _c[c] = c !== 'a' ? (Math.floor( number(a[c],b[c],v) ) || 0) : (a[c] && b[c]) ? number(a[c],b[c],v) : null; }
+      for (c in b) { _c[c] = c !== 'a' ? (number(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (number(a[c],b[c],v) * 100 >> 0 )/100 : null; }
       return h ? rgbToHex( _c.r, _c.g, _c.b ) : !_c.a ? r + _c.r + cm + _c.g + cm + _c.b + ep : ra + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
     },
-    translate = g._translate = function (a,b,u,v){
+    translate = interpolate.translate = function (a,b,u,v){
       var translation = {};
       for (var ax in b){
-        var x1 = a[ax] || 0, x2 = b[ax] || 0;
-        translation[ax] = x1===x2 ? x2+u : (Math.floor( (x1 + ( x2 - x1 ) * v) * 10) / 10) + u;
+        translation[ax] = ( a[ax]===b[ax] ? b[ax] : ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 10 >> 0 ) /10 ) + u;
       }
       return translation.x ? 'translate(' + translation.x + ',' + translation.y + ')' :
         'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')';
     },
-    rotate = g._rotate = function (a,b,u,v){
+    rotate = interpolate.rotate = function (a,b,u,v){
       var rotation = {};
       for ( var rx in b ){
-        rotation[rx] = rx === 'z' ? 'rotate('+ (Math.floor((a[rx] + (b[rx] - a[rx]) * v) * 10 ) / 10) + u + ')'
-                                  : rx + '(' + (Math.floor((a[rx] + (b[rx] - a[rx]) * v) * 10 ) / 10) + u + ')';
+        rotation[rx] = rx === 'z' ? ('rotate('+ (((a[rx] + (b[rx] - a[rx]) * v) * 10 >> 0 ) / 10) + u + ')')
+                                  : (rx + '(' + (((a[rx] + (b[rx] - a[rx]) * v) * 10 >> 0 ) / 10) + u + ')');
       }
       return rotation.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||'');
     },
-    skew = g._skew = function (a,b,u,v){
+    skew = interpolate.skew = function (a,b,u,v){
       var skewProp = {};
       for ( var sx in b ){
-        skewProp[sx] = sx + '(' + (Math.floor((a[sx] + (b[sx] - a[sx]) * v) * 10) / 10) + u + ')';
+        skewProp[sx] = sx + '(' + (((a[sx] + (b[sx] - a[sx]) * v) * 10 >> 0) / 10) + u + ')';
       }
       return (skewProp.skewX||'') + (skewProp.skewY||'');
     },
-    scale = g._scale = function(a,b,v){
-      return 'scale(' + (Math.floor((a + (b - a) * v) * 100 ) / 100) + ')';
+    scale = interpolate.scale = function(a,b,v){
+      return 'scale(' + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ')';
     },
 
     // KUTE.js DOM update functions
-    DOM = g.dom = {},
-    ticker = g._ticker = function(t) {
+    DOM = {},
+    ticker = function(t) {
       var i = 0;
-      while ( i < _tws.length ) {
-        if ( update.call(_tws[i],t) ) {
+      while ( i < tweens.length ) {
+        if ( update.call(tweens[i],t) ) {
           i++;
         } else {
-          _tws.splice(i, 1);
+          tweens.splice(i, 1);
         }
       }
       tick = _requestAnimationFrame(ticker);
     },
-    update = g._update = function(t) {
+    update = function(t) {
       t = t || time.now();
       if ( t < this._startTime && this.playing ) { return true; }
 
-      var elapsed = Math.min(( t - this._startTime ) / this.options.duration, 1); // calculate progress
+      var elapsed = Math.min(( t - this._startTime ) / this.options.duration, 1), progress = this.options.easing(elapsed); // calculate progress
 
-      for (var p in this._vE){ DOM[p](this._el,p,this._vS[p],this._vE[p],this.options.easing(elapsed),this.options); } //render the CSS update
+      for (var p in this.valuesEnd){ DOM[p](this.element,p,this.valuesStart[p],this.valuesEnd[p],progress,this.options); } //render the CSS update
 
       if (this.options.update) { this.options.update.call(); } // fire the updateCallback
 
@@ -234,7 +234,10 @@
         if (this.options.repeat > 0) {
           if ( this.options.repeat < 9999 ) { this.options.repeat--; } else { this.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much
 
-          if (this.options.yoyo) { this.reversed = !this.reversed; reverse.call(this); } // handle yoyo
+          if (this.options.yoyo) { // handle yoyo
+            this.reversed = !this.reversed;
+            reverse.call(this);
+          }
 
           this._startTime = (this.options.yoyo && !this.reversed) ? t + this.options.repeatDelay : t; //set the right time for delay
           return true;
@@ -247,6 +250,7 @@
           for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) { // start animating chained tweens
             this.options.chain[i].start();
           }
+
           //stop ticking when finished
           close.call(this);
         }
@@ -256,90 +260,38 @@
     },
 
     // applies the transform origin and perspective
-    perspective = g._perspective = function () {
-      if ( this.options.perspective !== undefined && transformProperty in this._vE ) { this._vS[transformProperty]['perspective'] = this._vE[transformProperty]['perspective']; } // element perspective
-      if ( this.options.transformOrigin !== undefined ) { this._el.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin
-      if ( this.options.perspectiveOrigin !== undefined ) { this._el.style[property('perspectiveOrigin')] = this.options.perspectiveOrigin; } // element perspective origin
-      if ( this.options.parentPerspective !== undefined ) { this._el.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective
-      if ( this.options.parentPerspectiveOrigin !== undefined ) { this._el.parentNode.style[property('perspectiveOrigin')] = this.options.parentPerspectiveOrigin; } // parent perspective origin
+    perspective = function () {
+      if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { this.valuesStart[transformProperty]['perspective'] = this.valuesEnd[transformProperty]['perspective']; } // element perspective
+      if ( this.options.transformOrigin !== undefined ) { this.element.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin
+      if ( this.options.perspectiveOrigin !== undefined ) { this.element.style[property('perspectiveOrigin')] = this.options.perspectiveOrigin; } // element perspective origin
+      if ( this.options.parentPerspective !== undefined ) { this.element.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective
+      if ( this.options.parentPerspectiveOrigin !== undefined ) { this.element.parentNode.style[property('perspectiveOrigin')] = this.options.parentPerspectiveOrigin; } // parent perspective origin
     },
 
-    // process properties for _vE and _vS or one of them
-    preparePropertiesObject = function (t, l) {
-      var skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {}, propertiesObject = {};
-      for (var x in t) {
-        if (_transform.indexOf(x) !== -1) { // transform object gets built here
-          if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
-            var ta = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, t[x]);
+    // plugin connector objects
+    prepareStart = {}, // check current property value when .to() method is used
+    crossCheck = {}, // checks for differences between start and end value, try to make sure start unit and end unit are same as well as consistent, stack transforms, process SVG paths
 
-            for (var f = 0; f < 3; f++) {
-              var a = ta[f];
-              if ( /3d/.test(x) ) {
-                translateObject['translate' + a] = parseProperty.transform('translate' + a, t[x][f], l);
-              } else {
-                translateObject['translate' + a] = ('translate' + a in t) ? parseProperty.transform('translate' + a, t['translate' + a], l) : 0;
-              }
-            }
-            transformObject['translate'] = translateObject;
-          } else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
-            var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'],
-              rtp = ap === 'rotate' ? rotateObject : skewObject;
-            for (var r = 0; r < 3; r++) {
-              var v = ra[r];
-              if ( t[ap+v] !== undefined && x !== 'skewZ' ) {
-                rtp[ap+v] = parseProperty.transform(ap+v, t[ap+v]);
-              }
-            }
-            transformObject[ap] = rtp;
-          } else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
-            transformObject[x] = parseProperty.transform(x, t[x], l);
-          }
-          propertiesObject[transformProperty] = transformObject;
-        } else if ( x !== 'transform') {
-          if ( _boxModel.indexOf(x) !== -1 ) {
-            propertiesObject[x] = parseProperty.boxModel(x,t[x]);
-          } else if (_opacity.indexOf(x) !== -1 || _scroll.indexOf(x) !== -1) {
-            propertiesObject[x] = parseProperty.unitless(x,t[x]);
-          } else if (_colors.indexOf(x) !== -1) {
-            propertiesObject[x] = parseProperty.colors(x,t[x]);
-          } else if (x in parseProperty) { propertiesObject[x] = parseProperty[x](x,t[x],l); } // or any other property from css/ attr / svg / third party plugins
-        }
-      }
-      return propertiesObject;
-    },
-
-    // process properties object | registers the plugins prepareStart functions
+    // parse properties object
     // string parsing and property specific value processing
-    parseProperty = {
-      boxModel : function(p,v,l){ // box model | text props | radius props
+    parseProperty = { // we already start working on core supported properties
+      boxModel : function(p,v){
         if (!(p in DOM)){
           DOM[p] = function(l,p,a,b,v){
-            l.style[p] = Math.floor(number(a,b,v))+'px';
+            l.style[p] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px' ;
           }
         }
         var boxValue = trueDimension(v);
-        return boxValue.u === '%' ? boxValue.v * l.offsetWidth / 100 : boxValue.v;
+        return boxValue.u === '%' ? boxValue.v * this.element.offsetWidth / 100 : boxValue.v;
       },
-      transform : function(p,v,l) { // transform prop / value
-        if (!('transform' in DOM)) {
+      transform : function(p,v) {
+        if (!(transformProperty in DOM)) {
           DOM[transformProperty] = function(l,p,a,b,v,o){
-            var t = '', r = '', sk = '', s = '', pp = '';
-
-            for (var tp in b){
-              if (tp === 'perspective'){
-                pp += a[tp];
-              } else if (tp === 'translate'){
-                t += translate(a[tp],b[tp],'px',v);
-              } else if (tp === 'rotate'){
-                r += rotate(a[tp],b[tp],'deg',v);
-              } else if (tp === 'skew'){
-                sk += skew(a[tp],b[tp],'deg',v);
-              } else if (tp === 'scale'){
-                s += scale(a[tp],b[tp],v);
-              }
-            }
-
-            l.style[p] = pp + t + r + sk + s;
+            l.style[p] = (a.perspective||'')
+                       + (a.translate ? translate(a.translate,b.translate,'px',v):'')
+                       + (a.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+                       + (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+                       + (a.scale ? scale(a.scale,b.scale,v):'');
           }
         }
 
@@ -348,23 +300,23 @@
           if (p === 'translate3d') {
             var t3d = v.split(','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2]));
             return {
-              translateX : t3d0.u === '%' ? (t3d0.v * l.offsetWidth / 100) : t3d0.v,
-              translateY : t3d1.u === '%' ? (t3d1.v * l.offsetHeight / 100) : t3d1.v,
-              translateZ : t3d2.u === '%' ? (t3d2.v * (l.offsetHeight + l.offsetWidth) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
+              translateX : t3d0.u === '%' ? (t3d0.v * this.element.offsetWidth / 100) : t3d0.v,
+              translateY : t3d1.u === '%' ? (t3d1.v * this.element.offsetHeight / 100) : t3d1.v,
+              translateZ : t3d2.u === '%' ? (t3d2.v * (this.element.offsetHeight + this.element.offsetWidth) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
             };
           } else if (/^translate(?:[XYZ])$/.test(p)) {
-            var t1d = trueDimension(v), percentOffset = /X/.test(p) ? l.offsetWidth / 100 : /Y/.test(p) ? l.offsetHeight / 100 : (l.offsetWidth+l.offsetHeight) / 200;
+            var t1d = trueDimension(v), percentOffset = /X/.test(p) ? this.element.offsetWidth / 100 : /Y/.test(p) ? this.element.offsetHeight / 100 : (this.element.offsetWidth+this.element.offsetHeight) / 200;
 
             return t1d.u === '%' ? (t1d.v * percentOffset) : t1d.v;
           } else if (p === 'translate') {
             var tv = typeof v === 'string' ? v.split(',') : v, t2d = {}, t2dv,
               t2d0 = trueDimension(tv[0]), t2d1 = tv.length ? trueDimension(tv[1]) : {v: 0, u: 'px'};
             if (tv instanceof Array) {
-              t2d.x = t2d0.u === '%' ? (t2d0.v * l.offsetWidth / 100) : t2d0.v,
-              t2d.y = t2d1.u === '%' ? (t2d1.v * l.offsetHeight / 100) : t2d1.v
+              t2d.x = t2d0.u === '%' ? (t2d0.v * this.element.offsetWidth / 100) : t2d0.v,
+              t2d.y = t2d1.u === '%' ? (t2d1.v * this.element.offsetHeight / 100) : t2d1.v
             } else {
               t2dv = trueDimension(tv);
-              t2d.x = t2dv.u === '%' ? (t2dv.v * l.offsetWidth / 100) : t2dv.v,
+              t2d.x = t2dv.u === '%' ? (t2dv.v * this.element.offsetWidth / 100) : t2dv.v,
               t2d.y = 0
             }
 
@@ -383,21 +335,21 @@
           return parseFloat(v); // this must be parseFloat(v)
         }
       },
-      unitless : function(p,v){  // scroll | opacity | unitless
+      unitless : function(p,v){  // scroll | opacity
         if (/scroll/.test(p) && !(p in DOM) ){
           DOM[p] = function(l,p,a,b,v) {
-            l.scrollTop = Math.floor(number(a,b,v));
+            l.scrollTop = (number(a,b,v))>>0;
           };
         } else if (p === 'opacity') {
           if (!(p in DOM)) {
             if (_isIE8) {
               DOM[p] = function(l,p,a,b,v) {
                 var st = "alpha(opacity=", ep = ')';
-                l.style.filter = st + Math.floor(number(a,b,v) * 100) + ep;
+                l.style.filter = st + ((number(a,b,v) * 100)>>0) + ep;
               };
             } else {
               DOM[p] = function(l,p,a,b,v) {
-                l.style.opacity = Math.floor(number(a,b,v) * 100)/100;
+                l.style.opacity = ((number(a,b,v) * 100)>>0)/100;
               };
             }
           }
@@ -413,13 +365,60 @@
         return trueColor(v);
       }
     },
-    reverse = g._reverse = function () {
+
+    // process properties for _vE and _vS or one of them
+    preparePropertiesObject = function(obj, fn) { // this, props object, type: start/end
+      var element = this.element, propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd,
+        skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {};
+
+      for (var x in obj) {
+        if (_transform.indexOf(x) !== -1) { // transform object gets built here
+          if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
+            var ta = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, obj[x]);
+
+            for (var f = 0; f < 3; f++) {
+              var a = ta[f];
+              if ( /3d/.test(x) ) {
+                translateObject['translate' + a] = parseProperty.transform.call(this,'translate' + a, obj[x][f]);
+              } else {
+                translateObject['translate' + a] = ('translate' + a in obj) ? parseProperty.transform.call(this,'translate' + a, obj['translate' + a]) : 0;
+              }
+            }
+            transformObject['translate'] = translateObject;
+          } else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
+            var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'],
+              rtp = ap === 'rotate' ? rotateObject : skewObject;
+            for (var r = 0; r < 3; r++) {
+              var v = ra[r];
+              if ( obj[ap+v] !== undefined && x !== 'skewZ' ) {
+                rtp[ap+v] = parseProperty.transform.call(this,ap+v, obj[ap+v]);
+              }
+            }
+            transformObject[ap] = rtp;
+          } else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
+            transformObject[x] = parseProperty.transform.call(this, x, obj[x]);
+          }
+          propertiesObject[transformProperty] = transformObject;
+        } else {
+          if ( _boxModel.indexOf(x) !== -1 ) {
+            propertiesObject[x] = parseProperty.boxModel.call(this,x,obj[x]);
+          } else if (_opacity.indexOf(x) !== -1 || x === 'scroll') {
+            propertiesObject[x] = parseProperty.unitless.call(this,x,obj[x]);
+          } else if (_colors.indexOf(x) !== -1) {
+            propertiesObject[x] = parseProperty.colors.call(this,x,obj[x]);
+          } else if (x in parseProperty) {  // or any other property from css/ attr / svg / third party plugins
+            propertiesObject[x] = parseProperty[x].call(this,x,obj[x]);
+          }
+        }
+      }
+    },
+    reverse = function () {
       if (this.options.yoyo) {
-        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];
+        for (var p in this.valuesEnd) {
+          var tmp = this.valuesRepeat[p];
+          this.valuesRepeat[p] = this.valuesEnd[p];
+          this.valuesEnd[p] = tmp;
+          this.valuesStart[p] = this.valuesRepeat[p];
         }
       }
     },
@@ -428,17 +427,17 @@
       if (this.options.yoyo && this.reversed===true) { reverse.call(this); this.reversed = false; }
       this.playing = false;
 
-      setTimeout(function(){ if (!_tws.length) { stop(); } }, 48);  // when all animations are finished, stop ticking after ~3 frames
+      setTimeout(function(){ if (!tweens.length) { stop(); } }, 48);  // when all animations are finished, stop ticking after ~3 frames
     },
     scrollOut = function(){ //prevent scroll when tweening scroll
-      if (( 'scroll' in this._vE || 'scrollTop' in this._vE ) && document.body.getAttribute('data-tweening')) {
+      if (( 'scroll' in this.valuesEnd || 'scrollTop' in this.valuesEnd ) && document.body.getAttribute('data-tweening')) {
         document.removeEventListener(touchOrWheel, preventScroll, false);
         document.removeEventListener(mouseEnter, preventScroll, false);
         document.body.removeAttribute('data-tweening');
       }
     },
     scrollIn = function(){
-      if (( 'scroll' in this._vE || 'scrollTop' in this._vE ) && !document.body.getAttribute('data-tweening')) {
+      if (( 'scroll' in this.valuesEnd || 'scrollTop' in this.valuesEnd ) && !document.body.getAttribute('data-tweening')) {
         document.addEventListener(touchOrWheel, preventScroll, false);
         document.addEventListener(mouseEnter, preventScroll, false);
         document.body.setAttribute('data-tweening', 'scroll');
@@ -451,13 +450,11 @@
         return easing[fn]; // regular Robert Penner Easing Functions
       }
     },
-    prepareStart = {},
-    crossCheck = {},
     getStartValues = function () { // stack transform props for .to() chains
-      var startValues = {}, currentStyle = getInlineStyle(this._el,'transform'),
+      var startValues = {}, currentStyle = getInlineStyle(this.element,'transform'),
         deg = ['rotate','skew'], ax = ['X','Y','Z'];
 
-      for (var p in this._vS){
+      for (var p in this.valuesStart){
         if ( _transform.indexOf(p) !== -1 ) {
           var r2d = (/(rotate|translate|scale)$/.test(p));
           if ( /translate/.test(p) && p !== 'translate' ) {
@@ -468,49 +465,49 @@
             for (var d=0; d<2; d++) {
               for (var a = 0; a<3; a++) {
                 var s = deg[d]+ax[a];
-                if (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = currentStyle[s] || _defaults[s]; }
+                if (_transform.indexOf(s) !== -1 && (s in this.valuesStart) ) { startValues[s] = currentStyle[s] || _defaults[s]; }
               }
             }
           }
         } else {
-          if ( _scroll.indexOf(p) === -1 ) {
+          if ( p !== 'scroll' ) {
             if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
-              var currentOpacity = getCurrentStyle(this._el,'filter');
+              var currentOpacity = getCurrentStyle(this.element,'filter');
               startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : _defaults['opacity'];
             } else {
               if ( _all.indexOf(p) !== -1 ) {
-                startValues[p] = getCurrentStyle(this._el,p) || d[p];
+                startValues[p] = getCurrentStyle(this.element,p) || d[p];
               } else { // plugins register here
-                startValues[p] = p in prepareStart ? prepareStart[p](this._el,p,this._vS[p]) : 0;
+                startValues[p] = p in prepareStart ? prepareStart[p].call(this,p,this.valuesStart[p]) : 0;
               }
             }
           } else {
-            startValues[p] = this._el === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop;
+            startValues[p] = this.element === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
           }
         }
       }
       for ( var p in currentStyle ){ // also add to _vS values from previous tweens
-        if ( _transform.indexOf(p) !== -1 && (!( p in this._vS )) ) {
+        if ( _transform.indexOf(p) !== -1 && (!( p in this.valuesStart )) ) {
           startValues[p] = currentStyle[p] || _defaults[p];
         }
       }
 
-      this._vS = {};
-      this._vS = preparePropertiesObject(startValues,this._el);
+      this.valuesStart = {};
+      preparePropertiesObject.call(this,startValues,'start');
 
-      if ( transformProperty in this._vE ) { // let's stack transform
-        for ( var sp in this._vS[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
+      if ( transformProperty in this.valuesEnd ) { // let's stack transform
+        for ( var sp in this.valuesStart[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
           if ( sp !== 'perspective') {
-            if ( typeof this._vS[transformProperty][sp] === 'object' ) {
-              for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level
-                if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { this._vE[transformProperty][sp] = {}; }
-                if ( typeof this._vS[transformProperty][sp][spp] === 'number' && typeof this._vE[transformProperty][sp][spp] === 'undefined' ) {
-                  this._vE[transformProperty][sp][spp] = this._vS[transformProperty][sp][spp];
+            if ( typeof this.valuesStart[transformProperty][sp] === 'object' ) {
+              for ( var spp in this.valuesStart[transformProperty][sp] ) { // 3rd level
+                if ( typeof this.valuesEnd[transformProperty][sp] === 'undefined' ) { this.valuesEnd[transformProperty][sp] = {}; }
+                if ( typeof this.valuesStart[transformProperty][sp][spp] === 'number' && typeof this.valuesEnd[transformProperty][sp][spp] === 'undefined' ) {
+                  this.valuesEnd[transformProperty][sp][spp] = this.valuesStart[transformProperty][sp][spp];
                 }
               }
-            } else if ( typeof this._vS[transformProperty][sp] === 'number' ) {
-              if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { // scale
-                this._vE[transformProperty][sp] = this._vS[transformProperty][sp];
+            } else if ( typeof this.valuesStart[transformProperty][sp] === 'number' ) {
+              if ( typeof this.valuesEnd[transformProperty][sp] === 'undefined' ) { // scale
+                this.valuesEnd[transformProperty][sp] = this.valuesStart[transformProperty][sp];
               }
             }
           }
@@ -573,47 +570,9 @@
   };
   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;};
 
-  // these methods run faster when defined outside
-  var start = g._start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
-      scrollIn.call(this);
-
-      if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
-      perspective.apply(this); // apply the perspective and transform origin
-
-      for ( var e in this._vE ) {
-        if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
-        this._vSR[e] = this._vS[e];
-      }
-
-      // now it's a good time to start
-      add(this);
-      this.playing = true;
-      this.paused = false;
-      this._startFired = false;
-      this._startTime = t || time.now();
-      this._startTime += this.options.delay;
-
-      if (!this._startFired) {
-        if (this.options.start) { this.options.start.call(); }
-        this._startFired = true;
-      }
-      !tick && ticker();
-      return this;
-    },
-    play = g._play = function () {
-      if (this.paused && this.playing) {
-        this.paused = false;
-        if (this.options.resume) { this.options.resume.call(); }
-        this._startTime += time.now() - this._pauseTime;
-        add(this);
-        !tick && ticker();  // restart ticking if stopped
-      }
-      return this;
-    },
-
-    // single Tween object construct
-    Tween = g._Tween = function (_el, _vS, _vE, _o) {
-      this._el = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to
+  // single Tween object construct
+  var Tween = function (_el, _vS, _vE, _o) {
+      this.element = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to
 
       this.playing = false;
       this.reversed = false;
@@ -626,16 +585,19 @@
       this.options = {}; for (var o in _o) { this.options[o] = _o[o]; }
       this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
 
-      this._vSR = {}; // internal valuesStartRepeat
-      this._vE = preparePropertiesObject(_vE,_el); // valuesEnd
-      this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart
+      this.valuesRepeat = {}; // internal valuesStartRepeat
+      this.valuesEnd = {}; // valuesEnd
+      this.valuesStart = {}; // valuesStart
 
-      if ( this.options.perspective !== undefined && transformProperty in this._vE ) { // element transform perspective
-        var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px) ';
-        this._vE[transformProperty]['perspective'] = perspectiveString;
+      preparePropertiesObject.call(this,_vE,'end'); // valuesEnd
+      if ( _o.rpr ) { this.valuesStart = _vS; } else { preparePropertiesObject.call(this,_vS,'start'); } // valuesStart
+
+      if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { // element transform perspective
+        var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px)';
+        this.valuesEnd[transformProperty].perspective = perspectiveString;
       }
 
-      for ( var e in this._vE ) {
+      for ( var e in this.valuesEnd ) {
         if (e in crossCheck && !_o.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
       }
 
@@ -647,18 +609,56 @@
       this.options.duration = _o.duration || 700; // duration option | default
       this.options.delay = _o.delay || 0; // delay option | default
       this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish
+    },
+    // tween control and chain
+    TweenProto = Tween.prototype = {
+      start : function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
+        scrollIn.call(this);
 
-      this.start = start; this.play = play; this.resume = play;
-      this.pause = function() {
+        if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
+        perspective.apply(this); // apply the perspective and transform origin
+
+        for ( var e in this.valuesEnd ) {
+          if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
+          this.valuesRepeat[e] = this.valuesStart[e];
+        }
+
+        // now it's a good time to start
+        tweens.push(this);
+        this.playing = true;
+        this.paused = false;
+        this._startFired = false;
+        this._startTime = t || time.now();
+        this._startTime += this.options.delay;
+
+        if (!this._startFired) {
+          if (this.options.start) { this.options.start.call(); }
+          this._startFired = true;
+        }
+        !tick && ticker();
+        return this;
+      },
+      play : function () {
+        if (this.paused && this.playing) {
+          this.paused = false;
+          if (this.options.resume) { this.options.resume.call(); }
+          this._startTime += time.now()  - this._pauseTime;
+          add(this);
+          !tick && ticker();  // restart ticking if stopped
+        }
+        return this;
+      },
+      resume : function () { return this.play(); },
+      pause : function() {
         if (!this.paused && this.playing) {
           remove(this);
           this.paused = true;
-          this._pauseTime = time.now();
+          this._pauseTime = (time.now() * 1000 >> 0) / 1000;
           if (this.options.pause) { this.options.pause.call(); }
         }
         return this;
-      };
-      this.stop = function () {
+      },
+      stop : function () {
         if (!this.paused && this.playing) {
           remove(this);
           this.playing = false;
@@ -670,13 +670,13 @@
           close.call(this);
         }
         return this;
-      };
-      this.chain = function () { this.options.chain = arguments; return this; };
-      this.stopChainedTweens = function () {
-        for (var i = 0, ctl =this.options.chain.length; i < ctl; i++) {
+      },
+      chain : function() { this.options.chain = arguments; return this; },
+      stopChainedTweens : function () {
+        for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) {
           this.options.chain[i].stop();
         }
-      };
+      }
     },
 
     // the multi elements Tween constructs
@@ -728,12 +728,13 @@
     },
     allFromTo = function (els, f, to, o) {
       var _els = selector(els,true);
-      return new TweensFT(_els, f, to, o); 
+      return new TweensFT(_els, f, to, o);
     };
 
   return { // export core methods to public for plugins
     property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
     to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
+    ticker : ticker, tweens : tweens, update: update, dom : DOM, // update
     parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck
     truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing
   };

From 4f7682cdca12206a980bb501376307172b7c4344 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 30 Nov 2016 18:12:11 +0200
Subject: [PATCH 284/471] 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.
      •
    diff --git a/dist/kute.min.js b/dist/kute.min.js index 3662b36..e6e71f4 100644 --- a/dist/kute.min.js +++ b/dist/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;n Date: Tue, 20 Dec 2016 22:06:23 +0200 Subject: [PATCH 301/471] 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 9348792e2d01237a7edc6c472ea13aedc7e5ac71 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 3 Jan 2017 00:48:28 +0200 Subject: [PATCH 302/471] Changes: * Included fix https://github.com/thednp/kute.js/pull/49 * Implemented https://github.com/thednp/kute.js/issues/47 * Documentation updates --- demo/assets/js/svg.js | 28 ++++++++++++++++++++ demo/options.html | 33 ++++++++++++++++++++--- demo/src/kute-svg.min.js | 2 +- demo/src/kute-text.min.js | 2 +- demo/src/kute.min.js | 2 +- demo/svg.html | 55 +++++++++++++++++++++++++++------------ dist/kute-svg.min.js | 2 +- dist/kute-text.min.js | 2 +- dist/kute.min.js | 2 +- kute-svg.js | 27 ++++++++++++------- kute-text.js | 7 +++-- kute.js | 38 ++++++++++++++++++--------- 12 files changed, 148 insertions(+), 52 deletions(-) diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js index 878cdff..f9addc5 100644 --- a/demo/assets/js/svg.js +++ b/demo/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/demo/options.html b/demo/options.html index 922f2d8..ab0862a 100644 --- a/demo/options.html +++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js index b5b9dfd..9028f51 100644 --- a/demo/src/kute-svg.min.js +++ b/demo/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/demo/src/kute-text.min.js b/demo/src/kute-text.min.js index f4c82ad..8c450c1 100644 --- a/demo/src/kute-text.min.js +++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js index e6e71f4..a2386c2 100644 --- a/demo/src/kute.min.js +++ b/demo/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.
      • 
         
    
 
 
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
index b5b9dfd..9028f51 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute-text.min.js b/dist/kute-text.min.js
index f4c82ad..8c450c1 100644
--- a/dist/kute-text.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index e6e71f4..a2386c2 100644
--- a/dist/kute.min.js
+++ b/dist/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 when glyph
+      var createdPath = document.createElementNS(ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p; 
+      createdPath.setAttribute('d',d); return createdPath;
     },
     forcePath = function(p){ // forcePath for glyph elements
       if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future 
@@ -177,6 +181,9 @@
       return [s1,e1]
     };
   
+  // set default morphPrecision since 1.6.1
+  defaultOptions.morphPrecision = 15;
+
   // process path object and also register the render function
   parseProperty.path = function(o,v) {
     if (!('path' in DOM)) {
@@ -191,11 +198,11 @@
     return this.element.getAttribute('d');
   };
 
-  crossCheck.path = function() {
+  crossCheck.path = function() { // unlike other cases, the crossCheck apply to both to() and fromTo() methods
     var p1 = getOnePath(this.valuesStart.path.o), p2 = getOnePath(this.valuesEnd.path.o), paths;
 
     // path tween options
-    this.options.morphPrecision = this.options && 'morphPrecision' in this.options ? parseInt(this.options.morphPrecision) : 15;
+    this.options.morphPrecision = this.options && 'morphPrecision' in this.options ? parseInt(this.options.morphPrecision) : defaultOptions.morphPrecision;
     this._isPolygon = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // check if both shapes are polygons
 
     // begin processing paths
@@ -392,7 +399,7 @@
   }
 
   crossCheck.svgTransform = function() { // helper function that helps preserve current transform properties into the objects
-    if (!this.options.rpr) return;
+    if (!this.options.rpr) return; // fix since 1.6.1 for fromTo() method
     var valuesStart = this.valuesStart.svgTransform, valuesEnd = this.valuesEnd.svgTransform,
       currentTransform = parseTransformObject.call(this, parseTransformString(this.element.getAttribute('transform')) );
 
diff --git a/kute-text.js b/kute-text.js
index 0a88739..4ba6e50 100644
--- a/kute-text.js
+++ b/kute-text.js
@@ -19,7 +19,8 @@
 
   var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
     K = KUTE, DOM = K.dom, prepareStart = K.prepareStart,
-    parseProperty = K.parseProperty, number = g.Interpolate.number;
+    parseProperty = K.parseProperty, number = g.Interpolate.number,
+    defaultOptions = K.defaultOptions;
   
   // let's go with the plugin
   var _string = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
@@ -30,6 +31,8 @@
     _all = _alphanumeric.concat(_symbols), // all caracters
     random = Math.random, min = Math.min;
 
+  defaultOptions.textChars = 'alpha'; // set default textChars tween option since 1.6.1
+
   prepareStart.text = prepareStart.number = function(p,v){
     return this.element.innerHTML;
   }
@@ -46,7 +49,7 @@
             : _string, ll = tp.length,
             t = tp[(random() * ll)>>0], ix = '', tx = '', fi = a.substring(0), f = b.substring(0); 
 
-        // use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart to do
+        // use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart TO DO
         ix = a !== '' ? fi.substring(fi.length, min(v * fi.length, fi.length)>>0 ) : ''; // initial text, A value 
         tx = f.substring(0, min(v * f.length, f.length)>>0 ); // end text, B value
         l.innerHTML = v < 1 ? tx + t + ix : b;
diff --git a/kute.js b/kute.js
index 74282d0..acc19fb 100644
--- a/kute.js
+++ b/kute.js
@@ -45,8 +45,18 @@
     p = null;
   }
 
-  // tools / utils
-  var getPrefix = function() { //returns browser prefix
+  // default tween options, since 1.6.1
+  var defaultOptions = {
+      duration: 700,
+      delay: 0,
+      offset: 0,
+      repeat: 0,
+      yoyo: false,
+      easing: 'linear',
+      keepHex: false,
+    },
+    // tools / utils
+    getPrefix = function() { //returns browser prefix
       var div = document.createElement('div'), i = 0,  pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'],
         s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
       for (var i = 0, pl = pf.length; i < pl; i++) { if (s[i] in div.style) { return pf[i]; }  }
@@ -596,7 +606,7 @@
       this.options = {}; for (var o in options) { this.options[o] = options[o]; }
       this.options.rpr = options.rpr || false; // internal option to process inline/computed style at start instead of init true/false
 
-      this.valuesRepeat = {}; // internal valuesStartRepeat
+      this.valuesRepeat = {}; // internal valuesRepeat
       this.valuesEnd = {}; // valuesEnd
       this.valuesStart = {}; // valuesStart
 
@@ -613,12 +623,13 @@
       }
 
       this.options.chain = []; // chained Tweens
-      this.options.easing = options.easing && typeof processEasing(options.easing) === 'function' ? processEasing(options.easing) : easing.linear;
-      this.options.repeat = options.repeat || 0;
-      this.options.repeatDelay = options.repeatDelay || 0;
-      this.options.yoyo = options.yoyo || false;
-      this.options.duration = options.duration || 700; // duration option | default
-      this.options.delay = options.delay || 0; // delay option | default
+      this.options.easing = options.easing && typeof processEasing(options.easing) === 'function' ? processEasing(options.easing) : easing[defaultOptions.easing]; // you can only set a core easing function as default
+      this.options.repeat = options.repeat || defaultOptions.repeat;
+      this.options.repeatDelay = options.repeatDelay || defaultOptions.repeatDelay;
+      this.options.yoyo = options.yoyo || defaultOptions.yoyo;
+      this.options.duration = options.duration || defaultOptions.duration; // duration option | default
+      this.options.delay = options.delay || defaultOptions.delay; // delay option | default
+
       this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish
     },
     // tween control and chain
@@ -695,16 +706,16 @@
     TweensTO = function (els, vE, o) { // .to
       this.tweens = []; var options = [];
       for ( var i = 0, tl = els.length; i < tl; i++ ) {
-        options[i] = o || {}; o.delay = o.delay || 0;
-        options[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
+        options[i] = o || {}; o.delay = o.delay || defaultOptions.delay;
+        options[i].delay = i>0 ? o.delay + (o.offset||defaultOptions.offset) : o.delay;
         this.tweens.push( to(els[i], vE, options[i]) );
       }
     },
     TweensFT = function (els, vS, vE, o) { // .fromTo
       this.tweens = []; var options = [];
       for ( var i = 0, l = els.length; i < l; i++ ) {
-        options[i] = o || {}; o.delay = o.delay || 0;
-        options[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
+        options[i] = o || {}; o.delay = o.delay || defaultOptions.delay;
+        options[i].delay = i>0 ? o.delay + (o.offset||defaultOptions.offset) : o.delay;
         this.tweens.push( fromTo(els[i], vS, vE, options[i]) );
       }
     },
@@ -743,6 +754,7 @@
 
   return { // export core methods to public for plugins
     property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
+    defaultOptions : defaultOptions, // default tween options since 1.6.1
     to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
     ticker : ticker, tick : tick, tweens : tweens, update: update, dom : DOM, // update
     parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck

From 709e78ac3b9d34d67dea6d1bc8007782dee85050 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 3 Jan 2017 00:48:28 +0200
Subject: [PATCH 303/471] 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 132a6246c0925a6b5f8d86a52aab78896f4fba7f Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 14 Jan 2017 22:03:18 +0200
Subject: [PATCH 304/471] Fixed missing default value for `repeatDelay`.

---
 bower.json                  | 2 +-
 demo/src/kute-attr.min.js   | 2 +-
 demo/src/kute-css.min.js    | 2 +-
 demo/src/kute-jquery.min.js | 2 +-
 demo/src/kute-svg.min.js    | 2 +-
 demo/src/kute-text.min.js   | 2 +-
 demo/src/kute.min.js        | 4 ++--
 dist/kute-attr.min.js       | 2 +-
 dist/kute-css.min.js        | 2 +-
 dist/kute-jquery.min.js     | 2 +-
 dist/kute-svg.min.js        | 2 +-
 dist/kute-text.min.js       | 2 +-
 dist/kute.min.js            | 4 ++--
 kute.js                     | 1 +
 package.json                | 2 +-
 15 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/bower.json b/bower.json
index 7ca21fc..f40948d 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KUTE.js",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "homepage": "http://thednp.github.io/kute.js",
   "authors": [
     "thednp"
diff --git a/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index 35e3800..259ddcc 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index ea86800..362e008 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/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/demo/src/kute-jquery.min.js b/demo/src/kute-jquery.min.js
index 88e6d71..0cb6f53 100644
--- a/demo/src/kute-jquery.min.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 9028f51..d8ed414 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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/demo/src/kute-text.min.js b/demo/src/kute-text.min.js
index 8c450c1..339196c 100644
--- a/demo/src/kute-text.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index a2386c2..f22cc8a 100644
--- a/demo/src/kute.min.js
+++ b/demo/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>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/dist/kute-css.min.js b/dist/kute-css.min.js
index ea86800..362e008 100644
--- a/dist/kute-css.min.js
+++ b/dist/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/dist/kute-jquery.min.js b/dist/kute-jquery.min.js
index 88e6d71..0cb6f53 100644
--- a/dist/kute-jquery.min.js
+++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js
index 9028f51..d8ed414 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute-text.min.js b/dist/kute-text.min.js
index 8c450c1..339196c 100644
--- a/dist/kute-text.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index a2386c2..f22cc8a 100644
--- a/dist/kute.min.js
+++ b/dist/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 22:03:21 +0200
Subject: [PATCH 305/471] 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 306/471] 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 e0bc5cf8a2e3f0bf9deb04e9ef2d4cbf149778b4 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sat, 14 Jan 2017 23:07:43 +0200
Subject: [PATCH 307/471] Some minor documentation fixes.

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

diff --git a/demo/api.html b/demo/api.html
index aa3915a..8518d8c 100644
--- a/demo/api.html
+++ b/demo/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/demo/options.html b/demo/options.html
index ab0862a..fbd1886 100644
--- a/demo/options.html
+++ b/demo/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/demo/start.html b/demo/start.html
index 76cbcee..3c507e0 100644
--- a/demo/start.html
+++ b/demo/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 308/471] 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 4b2cfda1c2e5f7719c0cda273775c3db446bb831 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 23 Jan 2017 15:55:12 +0200
Subject: [PATCH 309/471] Minor documentation fixes:

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

diff --git a/demo/about.html b/demo/about.html
index abe5ee5..2fe226f 100644
--- a/demo/about.html
+++ b/demo/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/demo/api.html b/demo/api.html
index 8518d8c..d930791 100644
--- a/demo/api.html
+++ b/demo/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/demo/assets/js/minifill.js b/demo/assets/js/minifill.js
index 4300e4d..43d8d0e 100644
--- a/demo/assets/js/minifill.js
+++ b/demo/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/demo/assets/js/scripts.js b/demo/assets/js/scripts.js
index 292f0b3..7324e88 100644
--- a/demo/assets/js/scripts.js
+++ b/demo/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/demo/css.html b/demo/css.html
index e89d255..85247cf 100644
--- a/demo/css.html
+++ b/demo/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/demo/easing.html b/demo/easing.html
index f5e16b5..6125492 100644
--- a/demo/easing.html
+++ b/demo/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/demo/examples.html b/demo/examples.html
index f711864..b3ce590 100644
--- a/demo/examples.html
+++ b/demo/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/demo/extend.html b/demo/extend.html
index 4647cb4..e602209 100644
--- a/demo/extend.html
+++ b/demo/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/demo/features.html b/demo/features.html
index dc3e312..a856f55 100644
--- a/demo/features.html
+++ b/demo/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/demo/index.html b/demo/index.html
index e41ab32..32058a6 100644
--- a/demo/index.html
+++ b/demo/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/demo/options.html b/demo/options.html
index fbd1886..cc62462 100644
--- a/demo/options.html
+++ b/demo/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/demo/performance.html b/demo/performance.html
index 320a185..3eb0b42 100644
--- a/demo/performance.html
+++ b/demo/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/demo/properties.html b/demo/properties.html
index ba61d2b..3993401 100644
--- a/demo/properties.html
+++ b/demo/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/demo/start.html b/demo/start.html
index 3c507e0..afa4321 100644
--- a/demo/start.html
+++ b/demo/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/demo/svg.html b/demo/svg.html
index f6ce659..2ff8d92 100644
--- a/demo/svg.html
+++ b/demo/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/demo/text.html b/demo/text.html
index d4b60eb..fb98d55 100644
--- a/demo/text.html
+++ b/demo/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 b6c64774aa0886438d18825ce09637da2f4e8bf7 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 23 Jan 2017 18:54:57 +0200
Subject: [PATCH 310/471] Changes:

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

diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js
index f9addc5..e943a5a 100644
--- a/demo/assets/js/svg.js
+++ b/demo/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/demo/features.html b/demo/features.html
index a856f55..3d71af8 100644
--- a/demo/features.html
+++ b/demo/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/demo/properties.html b/demo/properties.html
index 3993401..d6ff81c 100644
--- a/demo/properties.html
+++ b/demo/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/demo/start.html b/demo/start.html
index afa4321..d2cb6ee 100644
--- a/demo/start.html
+++ b/demo/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/demo/text.html b/demo/text.html
index fb98d55..ff26d51 100644
--- a/demo/text.html
+++ b/demo/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!
    
 
             
 
             
    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 3215d770b41d0fc45ea22d27407e1a372d5f4071 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 31 Jan 2017 19:15:15 +0200
Subject: [PATCH 314/471] Changes: * improved `selector` utility *
 improved/simplified `getPrefix()` utility * improve code readability for the
 core engine * improved demos

---
 bower.json                  |   2 +-
 demo/about.html             |   2 -
 demo/api.html               |   2 -
 demo/assets/css/kute.css    |  20 +------
 demo/assets/js/svg.js       |   6 +-
 demo/attr.html              |   2 -
 demo/css.html               |   2 -
 demo/easing.html            |   1 -
 demo/examples.html          |  11 +---
 demo/extend.html            |   2 -
 demo/features.html          |   2 -
 demo/index.html             |   2 -
 demo/options.html           |   2 -
 demo/properties.html        |   2 -
 demo/src/kute-attr.min.js   |   2 +-
 demo/src/kute-css.min.js    |   2 +-
 demo/src/kute-jquery.min.js |   2 +-
 demo/src/kute-svg.min.js    |   2 +-
 demo/src/kute-text.min.js   |   2 +-
 demo/src/kute.min.js        |   4 +-
 demo/start.html             |   2 -
 demo/svg.html               |   4 +-
 demo/text.html              |   2 -
 dist/kute-attr.min.js       |   2 +-
 dist/kute-css.min.js        |   2 +-
 dist/kute-jquery.min.js     |   2 +-
 dist/kute-svg.min.js        |   2 +-
 dist/kute-text.min.js       |   2 +-
 dist/kute.min.js            |   4 +-
 kute.js                     | 110 +++++++++++++++++++-----------------
 package.json                |   2 +-
 31 files changed, 83 insertions(+), 123 deletions(-)

diff --git a/bower.json b/bower.json
index f40948d..e9431da 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KUTE.js",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "homepage": "http://thednp.github.io/kute.js",
   "authors": [
     "thednp"
diff --git a/demo/about.html b/demo/about.html
index 2fe226f..1c8b499 100644
--- a/demo/about.html
+++ b/demo/about.html
@@ -41,8 +41,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/api.html b/demo/api.html
index d930791..7e21c4f 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -44,8 +44,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/assets/css/kute.css b/demo/assets/css/kute.css
index e931b87..0384388 100644
--- a/demo/assets/css/kute.css
+++ b/demo/assets/css/kute.css
@@ -10,33 +10,15 @@ body {
   font-size: 14px;
   line-height: 2; /* ~25px */
   color: #ccc;
-  background-color: #999;
+  background-color: #2e2e2e;
   position: relative
  
 }
 
-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%;
-	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
diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js
index e943a5a..f6cf9b3 100644
--- a/demo/assets/js/svg.js
+++ b/demo/assets/js/svg.js
@@ -228,6 +228,10 @@
     var svgChained = document.getElementById('svgChained');
     var chainedBtn = document.getElementById('chainedBtn');
     var svgc = svgChained.getElementsByTagName('path')[0];
+    var svgcTransform = svgc.getAttribute('transform');
+    var resetSVGTransform = function(){
+        svgc.setAttribute('transform',svgcTransform);
+    };
 
     var svgTween6 = KUTE.fromTo(svgc, 
         { // from
@@ -246,7 +250,7 @@
                 // skewX: -45
             }
         },
-    {transformOrigin: [256,256], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
+    {transformOrigin: [256,256], complete: resetSVGTransform, yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
 
     chainedBtn.addEventListener('click', function(){
         !svgTween6.playing && svgTween6.start();
diff --git a/demo/attr.html b/demo/attr.html
index 96e19ce..cbbffb2 100644
--- a/demo/attr.html
+++ b/demo/attr.html
@@ -44,8 +44,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/css.html b/demo/css.html
index 85247cf..099c7de 100644
--- a/demo/css.html
+++ b/demo/css.html
@@ -43,8 +43,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/easing.html b/demo/easing.html
index 6125492..21b1f3b 100644
--- a/demo/easing.html
+++ b/demo/easing.html
@@ -45,7 +45,6 @@
 
 
 
-    
    
 
     
    
 
diff --git a/demo/examples.html b/demo/examples.html
index b3ce590..7ddba16 100644
--- a/demo/examples.html
+++ b/demo/examples.html
@@ -42,8 +42,6 @@
 
 
 
-    
    
-
     
    
 
         
    
@@ -307,13 +305,10 @@ body[data-tweening="scroll"] * { pointer-events: none !important; }
 
 
             
    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:
-                    
+            
    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/demo/extend.html b/demo/extend.html
index e602209..0687b74 100644
--- a/demo/extend.html
+++ b/demo/extend.html
@@ -42,8 +42,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/features.html b/demo/features.html
index 3d71af8..4662a66 100644
--- a/demo/features.html
+++ b/demo/features.html
@@ -39,8 +39,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/index.html b/demo/index.html
index 94f4cf2..b09dda3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -39,8 +39,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/options.html b/demo/options.html
index 05c63f3..e358be0 100644
--- a/demo/options.html
+++ b/demo/options.html
@@ -44,8 +44,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/properties.html b/demo/properties.html
index d6ff81c..f9133ce 100644
--- a/demo/properties.html
+++ b/demo/properties.html
@@ -41,8 +41,6 @@
 
 
 
-    
    
-
     
    
 
         
    
diff --git a/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index 7612b36..239e336 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/src/kute-attr.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | Attributes Plugin | MIT-License
+// 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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index ac53c51..8ddc8d5 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/src/kute-css.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | CSS Plugin | MIT-License
+// 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/demo/src/kute-jquery.min.js b/demo/src/kute-jquery.min.js
index 0cb6f53..9ccc043 100644
--- a/demo/src/kute-jquery.min.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 98e344d..6448d78 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/src/kute-svg.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | SVG Plugin | MIT-License
+// 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/demo/src/kute-text.min.js b/demo/src/kute-text.min.js
index 48dbc6e..6a2a285 100644
--- a/demo/src/kute-text.min.js
+++ b/demo/src/kute-text.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | Text Plugin | MIT-License
+// 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/demo/src/kute.min.js b/demo/src/kute.min.js
index f22cc8a..528b222 100644
--- a/demo/src/kute.min.js
+++ b/demo/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/demo/svg.html b/demo/svg.html
index bb45eeb..071d5ba 100644
--- a/demo/svg.html
+++ b/demo/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.
    
             
    
                 
                 
 
 
-    
    
-
     
    
 
         
    
diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js
index 7612b36..239e336 100644
--- a/dist/kute-attr.min.js
+++ b/dist/kute-attr.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | Attributes Plugin | MIT-License
+// 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/dist/kute-css.min.js b/dist/kute-css.min.js
index ac53c51..8ddc8d5 100644
--- a/dist/kute-css.min.js
+++ b/dist/kute-css.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | CSS Plugin | MIT-License
+// 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/dist/kute-jquery.min.js b/dist/kute-jquery.min.js
index 0cb6f53..9ccc043 100644
--- a/dist/kute-jquery.min.js
+++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js
index 98e344d..6448d78 100644
--- a/dist/kute-svg.min.js
+++ b/dist/kute-svg.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | SVG Plugin | MIT-License
+// 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/dist/kute-text.min.js b/dist/kute-text.min.js
index 48dbc6e..6a2a285 100644
--- a/dist/kute-text.min.js
+++ b/dist/kute-text.min.js
@@ -1,2 +1,2 @@
-// KUTE.js v1.6.2 | © dnp_theme | Text Plugin | MIT-License
+// 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/dist/kute.min.js b/dist/kute.min.js
index f22cc8a..528b222 100644
--- a/dist/kute.min.js
+++ b/dist/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
Date: Thu, 2 Feb 2017 01:23:19 +0200
Subject: [PATCH 315/471] Changes: * code cleanup, more readable code in
 plugins * documentation fixes, the easing selectors fixed

---
 demo/about.html           |   2 +-
 demo/api.html             |   2 +-
 demo/assets/js/scripts.js |   6 +-
 demo/attr.html            |   2 +-
 demo/css.html             |   7 +-
 demo/easing.html          |   2 +-
 demo/examples.html        |   2 +-
 demo/extend.html          |   2 +-
 demo/features.html        |   2 +-
 demo/index.html           |   2 +-
 demo/options.html         |   2 +-
 demo/properties.html      |   2 +-
 demo/src/kute-svg.min.js  |   2 +-
 demo/src/kute.min.js      |   2 +-
 demo/start.html           |   2 +-
 demo/svg.html             |   2 +-
 demo/text.html            |   2 +-
 dist/kute-svg.min.js      |   2 +-
 dist/kute.min.js          |   2 +-
 kute-css.js               |  68 ++--
 kute-svg.js               |  11 +-
 kute-text.js              |  35 ++-
 kute.js                   | 634 ++++++++++++++++++++------------------
 23 files changed, 418 insertions(+), 377 deletions(-)

diff --git a/demo/about.html b/demo/about.html
index 1c8b499..554354a 100644
--- a/demo/about.html
+++ b/demo/about.html
@@ -218,7 +218,7 @@
                     
         
    
diff --git a/demo/api.html b/demo/api.html
index 7e21c4f..cd34f96 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -236,7 +236,7 @@ tween2.chain(tweensCollection2.tweens);
             
 
diff --git a/demo/assets/js/scripts.js b/demo/assets/js/scripts.js
index 7324e88..1a1544c 100644
--- a/demo/assets/js/scripts.js
+++ b/demo/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/demo/css.html b/demo/css.html
index 099c7de..c7cbc15 100644
--- a/demo/css.html
+++ b/demo/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/demo/easing.html b/demo/easing.html
index 21b1f3b..58bd465 100644
--- a/demo/easing.html
+++ b/demo/easing.html
@@ -321,7 +321,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
             
 
diff --git a/demo/examples.html b/demo/examples.html
index 7ddba16..0799cbf 100644
--- a/demo/examples.html
+++ b/demo/examples.html
@@ -493,7 +493,7 @@ var myMultiTween2 = KUTE.allFromTo(
         
 
diff --git a/demo/extend.html b/demo/extend.html
index 0687b74..564ebd5 100644
--- a/demo/extend.html
+++ b/demo/extend.html
@@ -334,7 +334,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
 
diff --git a/demo/features.html b/demo/features.html
index 4662a66..897874f 100644
--- a/demo/features.html
+++ b/demo/features.html
@@ -180,7 +180,7 @@
             
         
    
diff --git a/demo/index.html b/demo/index.html
index b09dda3..b7af5e3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -193,7 +193,7 @@
             
 
diff --git a/demo/options.html b/demo/options.html
index e358be0..6a89ea9 100644
--- a/demo/options.html
+++ b/demo/options.html
@@ -186,7 +186,7 @@ KUTE.defaultOptions.duration = 1000;
             
 
diff --git a/demo/properties.html b/demo/properties.html
index f9133ce..0fba1d0 100644
--- a/demo/properties.html
+++ b/demo/properties.html
@@ -264,7 +264,7 @@
             
         
    
diff --git a/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 6448d78..edbaddf 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index 528b222..804d85f 100644
--- a/demo/src/kute.min.js
+++ b/demo/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/demo/svg.html b/demo/svg.html
index 071d5ba..96c21bd 100644
--- a/demo/svg.html
+++ b/demo/svg.html
@@ -555,7 +555,7 @@ KUTE.fromTo(element,
         
 
diff --git a/demo/text.html b/demo/text.html
index 66519c4..3056902 100644
--- a/demo/text.html
+++ b/demo/text.html
@@ -155,7 +155,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&
             
         
    
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
index 6448d78..edbaddf 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index 528b222..804d85f 100644
--- a/dist/kute.min.js
+++ b/dist/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 -1) {
+        if (boxModelProps.indexOf(p) > -1) {
           DOM[p] = function(l,p,a,b,v){
             l.style[p] = ( v > 0.98 || v<0.02 ? (number(a.v,b.v,v) * 100 >> 0)/100 : number(a.v,b.v,v)>>0 ) + b.u;
           }
@@ -78,15 +78,15 @@
       }
       return trueDimension(v);
     };
-    prepareStart[_textAndBox[i]] = function(p,v){
-      return getCurrentStyle(this.element,p) || _defaults[p];
+    prepareStart[textAndBoxProps[i]] = function(p,v){
+      return getCurrentStyle(this.element,p) || propsDefaultValues[p];
     };
   }
 
   //create prepare/process/render functions for radius properties
-  for (var i = 0, l = _radius.length; i> 0)/100) + b.u;
@@ -94,9 +94,9 @@
       }
       return trueDimension(v);
     };
-    prepareStart[_radius[i]] = function(p,v){
-      var radiusProp = p === _radius[0] ? _radius[1] : p; radiusProp = property(radiusProp); // old Safari has a problem with borderRadius
-      return getCurrentStyle(this.element,radiusProp) || _defaults[p];
+    prepareStart[radiusProps[i]] = function(p,v){
+      var radiusProp = p === radiusProps[0] ? radiusProps[1] : p; radiusProp = property(radiusProp); // old Safari has a problem with borderRadius
+      return getCurrentStyle(this.element,radiusProp) || propsDefaultValues[p];
     };
   }
 
@@ -122,8 +122,8 @@
   };
 
   prepareStart.clip = function(p,v){
-    var c = getCurrentStyle(this.element,p), w = getCurrentStyle(this.element,'width'), h = getCurrentStyle(this.element,'height');
-    return !/rect/.test(c) ? [0, w, h, 0] : c;
+    var currentClip = getCurrentStyle(this.element,p), w = getCurrentStyle(this.element,'width'), h = getCurrentStyle(this.element,'height');
+    return !/rect/.test(currentClip) ? [0, w, h, 0] : currentClip;
   };
 
   // background position
@@ -143,7 +143,7 @@
     }
   }
   prepareStart.backgroundPosition = function(p,v){
-    return getCurrentStyle(this.element,p) || _defaults[p];
+    return getCurrentStyle(this.element,p) || propsDefaultValues[p];
   }
 
   return this;
diff --git a/kute-svg.js b/kute-svg.js
index 8af04ca..bf095e6 100644
--- a/kute-svg.js
+++ b/kute-svg.js
@@ -32,17 +32,18 @@
 
   // here we go with the plugin
   var pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
-    coords = g.Interpolate.coords = isMobile ? function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph
-      var points =[];
+    // function(array1, array2, length, progress) for SVG morph
+    coords = g.Interpolate.coords = isMobile ? function(a,b,l,v) { 
+      var points = [];
       for(var i=0;i> 0 );
         }
       }
       return points;
-    } : function(a,b,l,v) { // on desktop devices we use more accuracy for morph
-      var points =[];
+    } : function(a,b,l,v) { // on desktop devices we use subpixel accuracy for morph
+      var points = [];
       for(var i=0;i,./?\=-").split(""), // symbols
-    _numeric = String("0123456789").split(""), // numeric
-    _alphanumeric = _string.concat(_stringUppercase,_numeric), // alpha numeric
-    _all = _alphanumeric.concat(_symbols), // all caracters
+  var lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
+    upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""), // uppercase
+    nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
+    numeric = String("0123456789").split(""), // numeric
+    alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric), // alpha numeric
+    allTypes = alphaNumeric.concat(nonAlpha), // all caracters
     random = Math.random, min = Math.min;
 
-  defaultOptions.textChars = 'alpha'; // set default textChars tween option since 1.6.1
+  // set default textChars tween option since 1.6.1
+  defaultOptions.textChars = 'alpha'; 
 
   prepareStart.text = prepareStart.number = function(p,v){
     return this.element.innerHTML;
@@ -40,19 +41,19 @@
   parseProperty.text = function(p,v) {
     if ( !( 'text' in DOM ) ) {
       DOM.text = function(l,p,a,b,v,o) {
-        var tp = tp || o.textChars === 'alpha' ? _string // textChars is alpha
-            : o.textChars === 'upper' ? _stringUppercase  // textChars is numeric
-            : o.textChars === 'numeric' ? _numeric  // textChars is numeric
-            : o.textChars === 'alphanumeric' ? _alphanumeric // textChars is alphanumeric
-            : o.textChars === 'symbols' ? _symbols // textChars is symbols
+        var tp = tp || o.textChars === 'alpha' ? lowerCaseAlpha // textChars is alpha
+            : o.textChars === 'upper' ? upperCaseAlpha  // textChars is numeric
+            : o.textChars === 'numeric' ? numeric  // textChars is numeric
+            : o.textChars === 'alphanumeric' ? alphaNumeric // textChars is alphanumeric
+            : o.textChars === 'symbols' ? nonAlpha // textChars is symbols
             : o.textChars ? o.textChars.split('') // textChars is a custom text
-            : _string, ll = tp.length,
-            t = tp[(random() * ll)>>0], ix = '', tx = '', fi = a.substring(0), f = b.substring(0);
+            : lowerCaseAlpha, ll = tp.length,
+            t = tp[(random() * ll)>>0], initialText = '', endText = '', firstLetterA = a.substring(0), firstLetterB = b.substring(0);
 
         // use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart TO DO
-        ix = a !== '' ? fi.substring(fi.length, min(v * fi.length, fi.length)>>0 ) : ''; // initial text, A value
-        tx = f.substring(0, min(v * f.length, f.length)>>0 ); // end text, B value
-        l.innerHTML = v < 1 ? tx + t + ix : b;
+        initialText = a !== '' ? firstLetterA.substring(firstLetterA.length, min(v * firstLetterA.length, firstLetterA.length)>>0 ) : ''; // initial text, A value
+        endText = firstLetterB.substring(0, min(v * firstLetterB.length, firstLetterB.length)>>0 ); // end text, B value
+        l.innerHTML = v < 1 ? endText + t + initialText : b;
       }
     }
     return v;
diff --git a/kute.js b/kute.js
index a437535..29eb6be 100644
--- a/kute.js
+++ b/kute.js
@@ -15,7 +15,41 @@
 
   // set a custom scope for KUTE.js
   var g = typeof global !== 'undefined' ? global : window, time = g.performance,
-    tweens = [], tick = null; // tick must be null!!
+    body = document.body, tweens = [], tick = null, // tick must be null!!
+
+    // strings
+    length = 'length',
+    split = 'split',
+    indexOf = 'indexOf',
+    replace = 'replace',
+
+    offsetWidth = 'offsetWidth',
+    offsetHeight = 'offsetHeight',
+
+    options = 'options',
+    valuesStart = 'valuesStart',
+    valuesEnd = 'valuesEnd',
+    valuesRepeat = 'valuesRepeat',
+
+    element = 'element',
+    playing = 'playing',
+
+    duration = 'duration',
+    delay = 'delay',
+    offset = 'offset',
+    repeat = 'repeat',
+    repeatDelay = 'repeatDelay',
+    yoyo = 'yoyo',
+    easing = 'easing',
+    chain = 'chain',
+    keepHex = 'keepHex',
+
+    style = 'style',
+    dataTweening = 'data-tweening',
+    getElementsByTagName = 'getElementsByTagName',
+    addEventListener = 'addEventListener',
+    removeEventListener = 'removeEventListener';
+
 
   //supported properties
   var colorProps = ['color', 'backgroundColor'], // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+)
@@ -23,26 +57,25 @@
     transformFunctions  = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'],
     scrollProp  = ['scroll'], // has no default value, it's calculated on tween start
     opacityProp  = ['opacity'], // opacity
-    coreProps = colorProps.concat( opacityProp, boxModelProps, transformFunctions), al = coreProps.length,
+    coreProps = colorProps.concat( opacityProp, boxModelProps, transformFunctions),
     defaultPropsValues = {}; 
 
   //populate default values object
-  for ( var propertyIndex=0; propertyIndex>0 || 0) : (a[c] && b[c]) ? (number(a[c],b[c],v) * 100 >> 0 )/100 : null; }
-      return h ? rgbToHex( _c.r, _c.g, _c.b ) : !_c.a ? r + _c.r + cm + _c.g + cm + _c.b + ep : ra + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
+      return toHex ? rgbToHex( _c.r, _c.g, _c.b ) : !_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;
     },
     translate = interpolate.translate = isMobile ? function (a,b,u,v){
       var translation = {};
@@ -229,7 +265,7 @@
     DOM = {},
     ticker = function(t) {
       var i = 0;
-      while ( i < tweens.length ) {
+      while ( i < tweens[length] ) {
         if ( update.call(tweens[i],t) ) {
           i++;
         } else {
@@ -240,33 +276,35 @@
     },
     update = function(t) {
       t = t || time.now();
-      if ( t < this._startTime && this.playing ) { return true; }
+      if ( t < this._startTime && this[playing] ) { return true; }
 
-      var elapsed = Math.min(( t - this._startTime ) / this.options.duration, 1), progress = this.options.easing(elapsed); // calculate progress
+      var elapsed = Math.min(( t - this._startTime ) / this[options][duration], 1), progress = this[options][easing](elapsed); // calculate progress
 
-      for (var p in this.valuesEnd){ DOM[p](this.element,p,this.valuesStart[p],this.valuesEnd[p],progress,this.options); } //render the CSS update
+      for (var tweenProp in this[valuesEnd]){ // render the DOM update
+        DOM[tweenProp](this[element],tweenProp,this[valuesStart][tweenProp],this[valuesEnd][tweenProp],progress,this[options]); 
+      }
 
-      if (this.options.update) { this.options.update.call(); } // fire the updateCallback
+      if (this[options].update) { this[options].update.call(); } // fire the updateCallback
 
       if (elapsed === 1) {
-        if (this.options.repeat > 0) {
-          if ( isFinite(this.options.repeat ) ) { this.options.repeat--; }
+        if (this[options][repeat] > 0) {
+          if ( isFinite(this[options][repeat] ) ) { this[options][repeat]--; }
 
-          if (this.options.yoyo) { // handle yoyo
+          if (this[options][yoyo]) { // handle yoyo
             this.reversed = !this.reversed;
             reverse.call(this);
           }
 
-          this._startTime = (this.options.yoyo && !this.reversed) ? t + this.options.repeatDelay : t; //set the right time for delay
+          this._startTime = (this[options][yoyo] && !this.reversed) ? t + this[options][repeatDelay] : t; //set the right time for delay
           return true;
         } else {
 
-          if (this.options.complete) { this.options.complete.call(); }
+          if (this[options].complete) { this[options].complete.call(); }
 
           scrollOut.call(this); // unbind preventing scroll when scroll tween finished
 
-          for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) { // start animating chained tweens
-            this.options.chain[i].start();
+          for (var i = 0, ctl = this[options][chain][length]; i < ctl; i++) { // start animating chained tweens
+            this[options][chain][i].start();
           }
 
           //stop ticking when finished
@@ -279,15 +317,15 @@
 
     // applies the transform origin and perspective
     perspective = function () {
-      var el = this.element, ops = this.options;
-      if ( ops.perspective !== undefined && transformProperty in this.valuesEnd ) { // element perspective
-        this.valuesStart[transformProperty]['perspective'] = this.valuesEnd[transformProperty]['perspective']; 
+      var el = this[element], ops = this[options];
+      if ( ops.perspective !== undefined && transformProperty in this[valuesEnd] ) { // element perspective
+        this[valuesStart][transformProperty]['perspective'] = this[valuesEnd][transformProperty]['perspective']; 
       }
       // element transform origin / we filter it out for svgTransform to fix the Firefox transformOrigin bug https://bugzilla.mozilla.org/show_bug.cgi?id=923193
-      if ( ops.transformOrigin !== undefined && (!('svgTransform' in this.valuesEnd)) ) { el.style[property('transformOrigin')] = ops.transformOrigin; } // set transformOrigin for CSS3 transforms only
-      if ( ops.perspectiveOrigin !== undefined ) { el.style[property('perspectiveOrigin')] = ops.perspectiveOrigin; } // element perspective origin
-      if ( ops.parentPerspective !== undefined ) { el.parentNode.style[property('perspective')] = ops.parentPerspective + 'px'; } // parent perspective
-      if ( ops.parentPerspectiveOrigin !== undefined ) { el.parentNode.style[property('perspectiveOrigin')] = ops.parentPerspectiveOrigin; } // parent perspective origin
+      if ( ops.transformOrigin !== undefined && (!('svgTransform' in this[valuesEnd])) ) { el[style][property('transformOrigin')] = ops.transformOrigin; } // set transformOrigin for CSS3 transforms only
+      if ( ops.perspectiveOrigin !== undefined ) { el[style][property('perspectiveOrigin')] = ops.perspectiveOrigin; } // element perspective origin
+      if ( ops.parentPerspective !== undefined ) { el.parentNode[style][property('perspective')] = ops.parentPerspective + 'px'; } // parent perspective
+      if ( ops.parentPerspectiveOrigin !== undefined ) { el.parentNode[style][property('perspectiveOrigin')] = ops.parentPerspectiveOrigin; } // parent perspective origin
     },
 
     // plugin connector objects
@@ -297,136 +335,136 @@
     // parse properties object
     // string parsing and property specific value processing
     parseProperty = { // we already start working on core supported properties
-      boxModel : function(p,v){
-        if (!(p in DOM)){
-          DOM[p] = function(l,p,a,b,v){
-            l.style[p] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px';
+      boxModel : function(tweenProp,inputValue){
+        if (!(tweenProp in DOM)){
+          DOM[tweenProp] = function(elem,tweenProp,a,b,v){
+            elem[style][tweenProp] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px';
           }
         }
-        var boxValue = trueDimension(v);
-        return boxValue.u === '%' ? boxValue.v * this.element.offsetWidth / 100 : boxValue.v;
+        var boxValue = trueDimension(inputValue);
+        return boxValue.u === '%' ? boxValue.v * this[element][offsetWidth] / 100 : boxValue.v;
       },
-      transform : function(p,v) {
+      transform : function(tweenProp,inputValue) {
         if (!(transformProperty in DOM)) {
-          DOM[transformProperty] = function(l,p,a,b,v,o){
-            l.style[p] = (a.perspective||'')
-                       + ('translate' in a ? translate(a.translate,b.translate,'px',v):'')
-                       + ('rotate' in a ? rotate(a.rotate,b.rotate,'deg',v):'')
-                       + ('skew' in a ? skew(a.skew,b.skew,'deg',v):'')
-                       + ('scale' in a ? scale(a.scale,b.scale,v):'');
+          DOM[transformProperty] = function(elem,tweenProp,a,b,v,o){
+            elem[style][tweenProp] = (a.perspective||'')
+              + ('translate' in a ? translate(a.translate,b.translate,'px',v):'')
+              + ('rotate' in a ? rotate(a.rotate,b.rotate,'deg',v):'')
+              + ('skew' in a ? skew(a.skew,b.skew,'deg',v):'')
+              + ('scale' in a ? scale(a.scale,b.scale,v):'');
           }
         }
 
         // process each transform property
-        if (/translate/.test(p)) {
-          if (p === 'translate3d') {
-            var t3d = v.split(','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2]));
+        if (/translate/.test(tweenProp)) {
+          if (tweenProp === 'translate3d') {
+            var t3d = inputValue[split](','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2]));
             return {
-              translateX : t3d0.u === '%' ? (t3d0.v * this.element.offsetWidth / 100) : t3d0.v,
-              translateY : t3d1.u === '%' ? (t3d1.v * this.element.offsetHeight / 100) : t3d1.v,
-              translateZ : t3d2.u === '%' ? (t3d2.v * (this.element.offsetHeight + this.element.offsetWidth) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
+              translateX : t3d0.u === '%' ? (t3d0.v * this[element][offsetWidth] / 100) : t3d0.v,
+              translateY : t3d1.u === '%' ? (t3d1.v * this[element][offsetHeight] / 100) : t3d1.v,
+              translateZ : t3d2.u === '%' ? (t3d2.v * (this[element][offsetHeight] + this[element][offsetWidth]) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
             };
-          } else if (/^translate(?:[XYZ])$/.test(p)) {
-            var t1d = trueDimension(v), percentOffset = /X/.test(p) ? this.element.offsetWidth / 100 : /Y/.test(p) ? this.element.offsetHeight / 100 : (this.element.offsetWidth+this.element.offsetHeight) / 200;
+          } else if (/^translate(?:[XYZ])$/.test(tweenProp)) {
+            var t1d = trueDimension(inputValue), percentOffset = /X/.test(tweenProp) ? this[element][offsetWidth] / 100 : /Y/.test(tweenProp) ? this[element][offsetHeight] / 100 : (this[element][offsetWidth]+this[element][offsetHeight]) / 200;
 
             return t1d.u === '%' ? (t1d.v * percentOffset) : t1d.v;
-          } else if (p === 'translate') {
-            var tv = typeof v === 'string' ? v.split(',') : v, t2d = {}, t2dv,
-              t2d0 = trueDimension(tv[0]), t2d1 = tv.length ? trueDimension(tv[1]) : {v: 0, u: 'px'};
+          } else if (tweenProp === 'translate') {
+            var tv = typeof inputValue === 'string' ? inputValue[split](',') : inputValue, t2d = {}, t2dv,
+              t2d0 = trueDimension(tv[0]), t2d1 = tv[length] ? trueDimension(tv[1]) : {v: 0, u: 'px'};
             if (tv instanceof Array) {
-              t2d.x = t2d0.u === '%' ? (t2d0.v * this.element.offsetWidth / 100) : t2d0.v,
-              t2d.y = t2d1.u === '%' ? (t2d1.v * this.element.offsetHeight / 100) : t2d1.v
+              t2d.x = t2d0.u === '%' ? (t2d0.v * this[element][offsetWidth] / 100) : t2d0.v,
+              t2d.y = t2d1.u === '%' ? (t2d1.v * this[element][offsetHeight] / 100) : t2d1.v
             } else {
               t2dv = trueDimension(tv);
-              t2d.x = t2dv.u === '%' ? (t2dv.v * this.element.offsetWidth / 100) : t2dv.v,
+              t2d.x = t2dv.u === '%' ? (t2dv.v * this[element][offsetWidth] / 100) : t2dv.v,
               t2d.y = 0
             }
 
             return t2d;
           }
-        } else if (/rotate|skew/.test(p)) {
-          if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(p)) {
-            var r3d = trueDimension(v,true);
+        } else if (/rotate|skew/.test(tweenProp)) {
+          if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(tweenProp)) {
+            var r3d = trueDimension(inputValue,true);
             return r3d.u === 'rad' ? radToDeg(r3d.v) : r3d.v;
-          } else if (p === 'rotate') {
-            var r2d = {}, r2dv = trueDimension(v,true);
+          } else if (tweenProp === 'rotate') {
+            var r2d = {}, r2dv = trueDimension(inputValue,true);
             r2d.z = r2dv.u === 'rad' ? radToDeg(r2dv.v) : r2dv.v;
             return r2d;
           }
-        } else if (p === 'scale') {
-          return parseFloat(v); // this must be parseFloat(v)
+        } else if (tweenProp === 'scale') {
+          return parseFloat(inputValue); // this must be parseFloat(v)
         }
       },
-      unitless : function(p,v){  // scroll | opacity
-        if (/scroll/.test(p) && !(p in DOM) ){
-          DOM[p] = function(l,p,a,b,v) {
-            l.scrollTop = (number(a,b,v))>>0;
+      unitless : function(tweenProp,inputValue){  // scroll | opacity
+        if (/scroll/.test(tweenProp) && !(tweenProp in DOM) ){
+          DOM[tweenProp] = function(elem,tweenProp,a,b,v) {
+            elem.scrollTop = (number(a,b,v))>>0;
           };
-        } else if (p === 'opacity') {
-          if (!(p in DOM)) {
+        } else if (tweenProp === 'opacity') {
+          if (!(tweenProp in DOM)) {
             if (isIE8) {
-              DOM[p] = function(l,p,a,b,v) {
+              DOM[tweenProp] = function(elem,tweenProp,a,b,v) {
                 var st = "alpha(opacity=", ep = ')';
-                l.style.filter = st + ((number(a,b,v) * 100)>>0) + ep;
+                elem[style].filter = st + ((number(a,b,v) * 100)>>0) + ep;
               };
             } else {
-              DOM[p] = function(l,p,a,b,v) {
-                l.style.opacity = ((number(a,b,v) * 100)>>0)/100;
+              DOM[tweenProp] = function(elem,tweenProp,a,b,v) {
+                elem[style].opacity = ((number(a,b,v) * 100)>>0)/100;
               };
             }
           }
         }
-        return parseFloat(v);
+        return parseFloat(inputValue);
       },
-      colors : function(p,v){ // colors
-        if (!(p in DOM)) {
-          DOM[p] = function(l,p,a,b,v,o) {
-            l.style[p] = color(a,b,v,o.keepHex);
+      colors : function(tweenProp,inputValue){ // colors
+        if (!(tweenProp in DOM)) {
+          DOM[tweenProp] = function(elem,tweenProp,a,b,v,o) {
+            elem[style][tweenProp] = color(a,b,v,o[keepHex]);
           };
         }
-        return trueColor(v);
+        return trueColor(inputValue);
       }
     },
 
     // process properties for endValues and startValues or one of them
     preparePropertiesObject = function(obj, fn) { // this, props object, type: start/end
-      var element = this.element, propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd,
+      var propertiesObject = fn === 'start' ? this[valuesStart] : this[valuesEnd],
         skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {};
 
       for (var x in obj) {
-        if (transformFunctions.indexOf(x) !== -1) { // transform object gets built here
+        if (transformFunctions[indexOf](x) !== -1) { // transform object gets built here
           if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
-            var ta = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, obj[x]);
+            var prepAxis = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, obj[x]);
 
-            for (var f = 0; f < 3; f++) {
-              var a = ta[f];
+            for (var fnIndex = 0; fnIndex < 3; fnIndex++) {
+              var translateAxis = prepAxis[fnIndex];
               if ( /3d/.test(x) ) {
-                translateObject['translate' + a] = parseProperty.transform.call(this,'translate' + a, obj[x][f]);
+                translateObject['translate' + translateAxis] = parseProperty.transform.call(this,'translate' + translateAxis, obj[x][fnIndex]);
               } else {
-                translateObject['translate' + a] = ('translate' + a in obj) ? parseProperty.transform.call(this,'translate' + a, obj['translate' + a]) : 0;
+                translateObject['translate' + translateAxis] = ('translate' + translateAxis in obj) ? parseProperty.transform.call(this,'translate' + translateAxis, obj['translate' + translateAxis]) : 0;
               }
             }
             transformObject['translate'] = translateObject;
           } else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
-            var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'],
-              rtp = ap === 'rotate' ? rotateObject : skewObject;
-            for (var r = 0; r < 3; r++) {
-              var v = ra[r];
-              if ( obj[ap+v] !== undefined && x !== 'skewZ' ) {
-                rtp[ap+v] = parseProperty.transform.call(this,ap+v, obj[ap+v]);
+            var objectName = /rotate/.test(x) ? 'rotate' : 'skew', prepAxis = ['X', 'Y', 'Z'],
+              rotationOrSkew = objectName === 'rotate' ? rotateObject : skewObject;
+            for (var rIndex = 0; rIndex < 3; rIndex++) {
+              var oneAxis = prepAxis[rIndex];
+              if ( obj[objectName+oneAxis] !== undefined && x !== 'skewZ' ) {
+                rotationOrSkew[objectName+oneAxis] = parseProperty.transform.call(this,objectName+oneAxis, obj[objectName+oneAxis]);
               }
             }
-            transformObject[ap] = rtp;
+            transformObject[objectName] = rotationOrSkew;
           } else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
             transformObject[x] = parseProperty.transform.call(this, x, obj[x]);
           }
           propertiesObject[transformProperty] = transformObject;
         } else {
-          if ( boxModelProps.indexOf(x) !== -1 ) {
+          if ( boxModelProps[indexOf](x) !== -1 ) {
             propertiesObject[x] = parseProperty.boxModel.call(this,x,obj[x]);
-          } else if (opacityProp.indexOf(x) !== -1 || x === 'scroll') {
+          } else if (opacityProp[indexOf](x) !== -1 || x === 'scroll') {
             propertiesObject[x] = parseProperty.unitless.call(this,x,obj[x]);
-          } else if (colorProps.indexOf(x) !== -1) {
+          } else if (colorProps[indexOf](x) !== -1) {
             propertiesObject[x] = parseProperty.colors.call(this,x,obj[x]);
           } else if (x in parseProperty) {  // or any other property from css/ attr / svg / third party plugins
             propertiesObject[x] = parseProperty[x].call(this,x,obj[x]);
@@ -435,105 +473,105 @@
       }
     },
     reverse = function () {
-      if (this.options.yoyo) {
-        for (var p in this.valuesEnd) {
-          var tmp = this.valuesRepeat[p];
-          this.valuesRepeat[p] = this.valuesEnd[p];
-          this.valuesEnd[p] = tmp;
-          this.valuesStart[p] = this.valuesRepeat[p];
+      if (this[options][yoyo]) {
+        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];
         }
       }
     },
     close = function () { //  when animation is finished reset repeat, yoyo&reversed tweens
-      if (this.repeat > 0) { this.options.repeat = this.repeat; }
-      if (this.options.yoyo && this.reversed===true) { reverse.call(this); this.reversed = false; }
-      this.playing = false;
+      if (this[repeat] > 0) { this[options][repeat] = this[repeat]; }
+      if (this[options][yoyo] && this.reversed===true) { reverse.call(this); this.reversed = false; }
+      this[playing] = false;
 
-      setTimeout(function(){ if (!tweens.length) { stop(); } }, 48);  // when all animations are finished, stop ticking after ~3 frames
+      setTimeout(function(){ if (!tweens[length]) { stop(); } }, 48);  // when all animations are finished, stop ticking after ~3 frames
     },
-    preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll
-      var data = document.body.getAttribute('data-tweening');
-      if (data && data === 'scroll') { e.preventDefault(); }
+    preventScroll = function (eventObj) { // prevent mousewheel or touch events while tweening scroll
+      var data = body.getAttribute(dataTweening);
+      if (data && data === 'scroll') { eventObj.preventDefault(); }
     },
     scrollOut = function(){ //prevent scroll when tweening scroll
-      if ( 'scroll' in this.valuesEnd && document.body.getAttribute('data-tweening')) {
-        document.removeEventListener(touchOrWheel, preventScroll, false);
-        document.removeEventListener(mouseEnter, preventScroll, false);
-        document.body.removeAttribute('data-tweening');
+      if ( 'scroll' in this[valuesEnd] && body.getAttribute(dataTweening)) {
+        document[removeEventListener](touchOrWheel, preventScroll, false);
+        document[removeEventListener](mouseEnter, preventScroll, false);
+        body.removeAttribute(dataTweening);
       }
     },
     scrollIn = function(){
-      if ( 'scroll' in this.valuesEnd && !document.body.getAttribute('data-tweening')) {
-        document.addEventListener(touchOrWheel, preventScroll, false);
-        document.addEventListener(mouseEnter, preventScroll, false);
-        document.body.setAttribute('data-tweening', 'scroll');
+      if ( 'scroll' in this[valuesEnd] && !body.getAttribute(dataTweening)) {
+        document[addEventListener](touchOrWheel, preventScroll, false);
+        document[addEventListener](mouseEnter, preventScroll, false);
+        body.setAttribute(dataTweening, 'scroll');
       }
     },
-    processEasing = function (fn) { //process easing function
+    processEasing = function (fn) {
       if ( typeof fn === 'function') {
         return fn;
       } else if ( typeof fn === 'string' ) {
-        return easing[fn]; // regular Robert Penner Easing Functions
+        return easingFn[fn]; // regular Robert Penner Easing Functions
       }
     },
     getStartValues = function () { // stack transform props for .to() chains
-      var startValues = {}, currentStyle = getInlineStyle(this.element,'transform'),
-        deg = ['rotate','skew'], ax = ['X','Y','Z'];
+      var startValues = {}, currentStyle = getInlineStyle(this[element]),
+        degreeProps = ['rotate','skew'], startAxis = ['X','Y','Z'];
 
-      for (var p in this.valuesStart){
-        if ( transformFunctions.indexOf(p) !== -1 ) {
-          var r2d = (/(rotate|translate|scale)$/.test(p));
-          if ( /translate/.test(p) && p !== 'translate' ) {
-            startValues['translate3d'] = currentStyle['translate3d'] || defaultPropsValues[p];
+      for (var tweenProperty in this[valuesStart]){
+        if ( transformFunctions[indexOf](tweenProperty) !== -1 ) {
+          var r2d = (/(rotate|translate|scale)$/.test(tweenProperty));
+          if ( /translate/.test(tweenProperty) && tweenProperty !== 'translate' ) {
+            startValues['translate3d'] = currentStyle['translate3d'] || defaultPropsValues[tweenProperty];
           } else if ( r2d ) { // 2d transforms
-            startValues[p] = currentStyle[p] || defaultPropsValues[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 (transformFunctions.indexOf(s) !== -1 && (s in this.valuesStart) ) { startValues[s] = currentStyle[s] || defaultPropsValues[s]; }
+            startValues[tweenProperty] = currentStyle[tweenProperty] || defaultPropsValues[tweenProperty];
+          } else if ( !r2d && /rotate|skew/.test(tweenProperty) ) { // all angles
+            for (var degIndex=0; degIndex<2; degIndex++) {
+              for (var axisIndex = 0; axisIndex<3; axisIndex++) {
+                var s = degreeProps[degIndex]+startAxis[axisIndex];
+                if (transformFunctions[indexOf](s) !== -1 && (s in this[valuesStart]) ) { startValues[s] = currentStyle[s] || defaultPropsValues[s]; }
               }
             }
           }
         } else {
-          if ( p !== 'scroll' ) {
-            if (p === 'opacity' && isIE8 ) { // handle IE8 opacity
-              var currentOpacity = getCurrentStyle(this.element,'filter');
+          if ( tweenProperty !== 'scroll' ) {
+            if (tweenProperty === 'opacity' && isIE8 ) { // handle IE8 opacity
+              var currentOpacity = getCurrentStyle(this[element],'filter');
               startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : defaultPropsValues['opacity'];
             } else {
-              if ( coreProps.indexOf(p) !== -1 ) {
-                startValues[p] = getCurrentStyle(this.element,p) || d[p];
+              if ( coreProps[indexOf](tweenProperty) !== -1 ) {
+                startValues[tweenProperty] = getCurrentStyle(this[element],tweenProperty) || d[tweenProperty];
               } else { // plugins register here
-                startValues[p] = p in prepareStart ? prepareStart[p].call(this,p,this.valuesStart[p]) : 0;
+                startValues[tweenProperty] = tweenProperty in prepareStart ? prepareStart[tweenProperty].call(this,tweenProperty,this[valuesStart][tweenProperty]) : 0;
               }
             }
           } else {
-            startValues[p] = this.element === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
+            startValues[tweenProperty] = this[element] === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this[element].scrollTop;
           }
         }
       }
-      for ( var p in currentStyle ){ // also add to startValues values from previous tweens
-        if ( transformFunctions.indexOf(p) !== -1 && (!( p in this.valuesStart )) ) {
-          startValues[p] = currentStyle[p] || defaultPropsValues[p];
+      for ( var currentProperty in currentStyle ){ // also add to startValues values from previous tweens
+        if ( transformFunctions[indexOf](currentProperty) !== -1 && (!( currentProperty in this[valuesStart] )) ) {
+          startValues[currentProperty] = currentStyle[currentProperty] || defaultPropsValues[currentProperty];
         }
       }
 
-      this.valuesStart = {};
+      this[valuesStart] = {};
       preparePropertiesObject.call(this,startValues,'start');
 
-      if ( transformProperty in this.valuesEnd ) { // let's stack transform
-        for ( var sp in this.valuesStart[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
+      if ( transformProperty in this[valuesEnd] ) { // let's stack transform
+        for ( var sp in this[valuesStart][transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
           if ( sp !== 'perspective') {
-            if ( typeof this.valuesStart[transformProperty][sp] === 'object' ) {
-              for ( var spp in this.valuesStart[transformProperty][sp] ) { // 3rd level
-                if ( typeof this.valuesEnd[transformProperty][sp] === 'undefined' ) { this.valuesEnd[transformProperty][sp] = {}; }
-                if ( typeof this.valuesStart[transformProperty][sp][spp] === 'number' && typeof this.valuesEnd[transformProperty][sp][spp] === 'undefined' ) {
-                  this.valuesEnd[transformProperty][sp][spp] = this.valuesStart[transformProperty][sp][spp];
+            if ( typeof this[valuesStart][transformProperty][sp] === 'object' ) {
+              for ( var spp in this[valuesStart][transformProperty][sp] ) { // 3rd level
+                if ( typeof this[valuesEnd][transformProperty][sp] === 'undefined' ) { this[valuesEnd][transformProperty][sp] = {}; }
+                if ( typeof this[valuesStart][transformProperty][sp][spp] === 'number' && typeof this[valuesEnd][transformProperty][sp][spp] === 'undefined' ) {
+                  this[valuesEnd][transformProperty][sp][spp] = this[valuesStart][transformProperty][sp][spp];
                 }
               }
-            } else if ( typeof this.valuesStart[transformProperty][sp] === 'number' ) {
-              if ( typeof this.valuesEnd[transformProperty][sp] === 'undefined' ) { // scale
-                this.valuesEnd[transformProperty][sp] = this.valuesStart[transformProperty][sp];
+            } else if ( typeof this[valuesStart][transformProperty][sp] === 'number' ) {
+              if ( typeof this[valuesEnd][transformProperty][sp] === 'undefined' ) { // scale
+                this[valuesEnd][transformProperty][sp] = this[valuesStart][transformProperty][sp];
               }
             }
           }
@@ -541,66 +579,66 @@
       }
     };
 
-    // core easing functions
-  var easing = g.Easing = {};
-  easing.linear = function (t) { return t; };
-  easing.easingSinusoidalIn = function(t) { return -Math.cos(t * Math.PI / 2) + 1; };
-  easing.easingSinusoidalOut = function(t) { return Math.sin(t * Math.PI / 2); };
-  easing.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(Math.PI * t) - 1); };
-  easing.easingQuadraticIn = function (t) { return t*t; };
-  easing.easingQuadraticOut = function (t) { return t*(2-t); };
-  easing.easingQuadraticInOut = function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; };
-  easing.easingCubicIn = function (t) { return t*t*t; };
-  easing.easingCubicOut = function (t) { return (--t)*t*t+1; };
-  easing.easingCubicInOut = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; };
-  easing.easingQuarticIn = function (t) { return t*t*t*t; };
-  easing.easingQuarticOut = function (t) { return 1-(--t)*t*t*t; };
-  easing.easingQuarticInOut = function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; };
-  easing.easingQuinticIn = function (t) { return t*t*t*t*t; };
-  easing.easingQuinticOut = function (t) { return 1+(--t)*t*t*t*t; };
-  easing.easingQuinticInOut = function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; };
-  easing.easingCircularIn = function(t) { return -(Math.sqrt(1 - (t * t)) - 1); };
-  easing.easingCircularOut = function(t) { return Math.sqrt(1 - (t = t - 1) * t); };
-  easing.easingCircularInOut = function(t) {  return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); };
-  easing.easingExponentialIn = function(t) { return Math.pow(2, 10 * (t - 1)) - 0.001; };
-  easing.easingExponentialOut = function(t) { return 1 - Math.pow(2, -10 * t); };
-  easing.easingExponentialInOut = function(t) { return (t *= 2) < 1 ? 0.5 * Math.pow(2, 10 * (t - 1)) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))); };
-  easing.easingBackIn = function(t) { var s = 1.70158; return t * t * ((s + 1) * t - s); };
-  easing.easingBackOut = function(t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; };
-  easing.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); };
-  easing.easingElasticIn = function(t) {
+  // core easing functions
+  var easingFn = g.Easing = {};
+  easingFn.linear = function (t) { return t; };
+  easingFn.easingSinusoidalIn = function(t) { return -Math.cos(t * Math.PI / 2) + 1; };
+  easingFn.easingSinusoidalOut = function(t) { return Math.sin(t * Math.PI / 2); };
+  easingFn.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(Math.PI * t) - 1); };
+  easingFn.easingQuadraticIn = function (t) { return t*t; };
+  easingFn.easingQuadraticOut = function (t) { return t*(2-t); };
+  easingFn.easingQuadraticInOut = function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; };
+  easingFn.easingCubicIn = function (t) { return t*t*t; };
+  easingFn.easingCubicOut = function (t) { return (--t)*t*t+1; };
+  easingFn.easingCubicInOut = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; };
+  easingFn.easingQuarticIn = function (t) { return t*t*t*t; };
+  easingFn.easingQuarticOut = function (t) { return 1-(--t)*t*t*t; };
+  easingFn.easingQuarticInOut = function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; };
+  easingFn.easingQuinticIn = function (t) { return t*t*t*t*t; };
+  easingFn.easingQuinticOut = function (t) { return 1+(--t)*t*t*t*t; };
+  easingFn.easingQuinticInOut = function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; };
+  easingFn.easingCircularIn = function(t) { return -(Math.sqrt(1 - (t * t)) - 1); };
+  easingFn.easingCircularOut = function(t) { return Math.sqrt(1 - (t = t - 1) * t); };
+  easingFn.easingCircularInOut = function(t) {  return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); };
+  easingFn.easingExponentialIn = function(t) { return Math.pow(2, 10 * (t - 1)) - 0.001; };
+  easingFn.easingExponentialOut = function(t) { return 1 - Math.pow(2, -10 * t); };
+  easingFn.easingExponentialInOut = function(t) { return (t *= 2) < 1 ? 0.5 * Math.pow(2, 10 * (t - 1)) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))); };
+  easingFn.easingBackIn = function(t) { var s = 1.70158; return t * t * ((s + 1) * t - s); };
+  easingFn.easingBackOut = function(t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; };
+  easingFn.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); };
+  easingFn.easingElasticIn = function(t) {
     var s, _kea = 0.1, _kep = 0.4;
     if ( t === 0 ) return 0; if ( t === 1 ) return 1;
     if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2;
     return - ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) );
   };
-  easing.easingElasticOut = function(t) {
+  easingFn.easingElasticOut = function(t) {
     var s, _kea = 0.1, _kep = 0.4;
     if ( t === 0 ) return 0; if ( t === 1 ) return 1;
     if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ;
     return ( _kea * Math.pow( 2, - 10 * t) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) + 1 );
   };
-  easing.easingElasticInOut = function(t) {
+  easingFn.easingElasticInOut = function(t) {
     var s, _kea = 0.1, _kep = 0.4;
     if ( t === 0 ) return 0; if ( t === 1 ) return 1;
     if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ;
     if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) );
     return _kea * Math.pow( 2, -10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) * 0.5 + 1;
   };
-  easing.easingBounceIn = function(t) { return 1 - easing.easingBounceOut( 1 - t ); };
-  easing.easingBounceOut = function(t) {
+  easingFn.easingBounceIn = function(t) { return 1 - easingFn.easingBounceOut( 1 - t ); };
+  easingFn.easingBounceOut = function(t) {
     if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; }
     else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; }
     else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; }
     else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
   };
-  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;};
+  easingFn.easingBounceInOut = function(t) { if ( t < 0.5 ) return easingFn.easingBounceIn( t * 2 ) * 0.5; return easingFn.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
 
   // single Tween object construct
-  var Tween = function (targetElement, startObject, endObject, options) {
-      this.element = 'scroll' in endObject && (targetElement === undefined || targetElement === null) ? scrollContainer : targetElement; // element animation is applied to
+  var Tween = function (targetElement, startObject, endObject, optionsObj) {
+      this[element] = 'scroll' in endObject && (targetElement === undefined || targetElement === null) ? scrollContainer : targetElement; // element animation is applied to
 
-      this.playing = false;
+      this[playing] = false;
       this.reversed = false;
       this.paused = false;
 
@@ -608,34 +646,34 @@
       this._pauseTime = null;
 
       this._startFired = false;
-      this.options = {}; for (var o in options) { this.options[o] = options[o]; }
-      this.options.rpr = options.rpr || false; // internal option to process inline/computed style at start instead of init true/false
+      this[options] = {}; for (var o in optionsObj) { this[options][o] = optionsObj[o]; }
+      this[options].rpr = optionsObj.rpr || false; // internal option to process inline/computed style at start instead of init true/false
 
-      this.valuesRepeat = {}; // internal valuesRepeat
-      this.valuesEnd = {}; // valuesEnd
-      this.valuesStart = {}; // valuesStart
+      this[valuesRepeat] = {}; // internal valuesRepeat
+      this[valuesEnd] = {}; // valuesEnd
+      this[valuesStart] = {}; // valuesStart
 
       preparePropertiesObject.call(this,endObject,'end'); // valuesEnd
-      if ( this.options.rpr ) { this.valuesStart = startObject; } else { preparePropertiesObject.call(this,startObject,'start'); } // valuesStart
+      if ( this[options].rpr ) { this[valuesStart] = startObject; } else { preparePropertiesObject.call(this,startObject,'start'); } // valuesStart
 
-      if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { // element transform perspective
-        var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px)';
-        this.valuesEnd[transformProperty].perspective = perspectiveString;
+      if ( this[options].perspective !== undefined && transformProperty in this[valuesEnd] ) { // element transform perspective
+        var perspectiveString = 'perspective('+parseInt(this[options].perspective)+'px)';
+        this[valuesEnd][transformProperty].perspective = perspectiveString;
       }
 
-      for ( var e in this.valuesEnd ) {
-        if (e in crossCheck && !this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
+      for ( var repeatProp in this[valuesEnd] ) {
+        if (repeatProp in crossCheck && !this[options].rpr) crossCheck[repeatProp].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
       }
 
-      this.options.chain = []; // chained Tweens
-      this.options.easing = options.easing && typeof processEasing(options.easing) === 'function' ? processEasing(options.easing) : easing[defaultOptions.easing]; // you can only set a core easing function as default
-      this.options.repeat = options.repeat || defaultOptions.repeat;
-      this.options.repeatDelay = options.repeatDelay || defaultOptions.repeatDelay;
-      this.options.yoyo = options.yoyo || defaultOptions.yoyo;
-      this.options.duration = options.duration || defaultOptions.duration; // duration option | default
-      this.options.delay = options.delay || defaultOptions.delay; // delay option | default
+      this[options][chain] = []; // chained Tweens
+      this[options][easing] = processEasing(optionsObj[easing]) || easingFn[defaultOptions[easing]] || easingFn['linear']; // you can only set a core easing function as default
+      this[options][repeat] = optionsObj[repeat] || defaultOptions[repeat];
+      this[options][repeatDelay] = optionsObj[repeatDelay] || defaultOptions[repeatDelay];
+      this[options][yoyo] = optionsObj[yoyo] || defaultOptions[yoyo];
+      this[options][duration] = optionsObj[duration] || defaultOptions[duration]; // duration option | default
+      this[options][delay] = optionsObj[delay] || defaultOptions[delay]; // delay option | default
 
-      this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish
+      this[repeat] = this[options][repeat]; // we cache the number of repeats to be able to put it back after all cycles finish
     },
     // tween control and chain
     TweenProto = Tween.prototype = {
@@ -643,33 +681,33 @@
       start : function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
         scrollIn.call(this);
 
-        if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
+        if ( this[options].rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
         perspective.apply(this); // apply the perspective and transform origin
 
-        for ( var e in this.valuesEnd ) {
-          if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
-          this.valuesRepeat[e] = this.valuesStart[e];
+        for ( var endProp in this[valuesEnd] ) {
+          if (endProp in crossCheck && this[options].rpr) crossCheck[endProp].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
+          this[valuesRepeat][endProp] = this[valuesStart][endProp];
         }
 
         // now it's a good time to start
         tweens.push(this);
-        this.playing = true;
+        this[playing] = true;
         this.paused = false;
         this._startFired = false;
         this._startTime = t || time.now();
-        this._startTime += this.options.delay;
+        this._startTime += this[options][delay];
 
         if (!this._startFired) {
-          if (this.options.start) { this.options.start.call(); }
+          if (this[options].start) { this[options].start.call(); }
           this._startFired = true;
         }
         !tick && ticker();
         return this;
       },
       play : function () {
-        if (this.paused && this.playing) {
+        if (this.paused && this[playing]) {
           this.paused = false;
-          if (this.options.resume) { this.options.resume.call(); }
+          if (this[options].resume) { this[options].resume.call(); }
           this._startTime += time.now()  - this._pauseTime;
           add(this);
           !tick && ticker();  // restart ticking if stopped
@@ -678,83 +716,83 @@
       },
       resume : function () { return this.play(); },
       pause : function() {
-        if (!this.paused && this.playing) {
+        if (!this.paused && this[playing]) {
           remove(this);
           this.paused = true;
           this._pauseTime = time.now();
-          if (this.options.pause) { this.options.pause.call(); }
+          if (this[options].pause) { this[options].pause.call(); }
         }
         return this;
       },
       stop : function () {
-        if (!this.paused && this.playing) {
+        if (!this.paused && this[playing]) {
           remove(this);
-          this.playing = false;
+          this[playing] = false;
           this.paused = false;
           scrollOut.call(this);
 
-          if (this.options.stop) { this.options.stop.call(); }
+          if (this[options].stop) { this[options].stop.call(); }
           this.stopChainedTweens();
           close.call(this);
         }
         return this;
       },
-      chain : function() { this.options.chain = arguments; return this; },
+      chain : function() { this[options][chain] = arguments; return this; },
       stopChainedTweens : function () {
-        for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) {
-          this.options.chain[i].stop();
+        for (var i = 0, ctl = this[options][chain][length]; i < ctl; i++) {
+          this[options][chain][i].stop();
         }
       }
     },
 
     // the multi elements Tween constructs
     TweensTO = function (els, vE, o) { // .to
-      this.tweens = []; var options = [];
-      for ( var i = 0, tl = els.length; i < tl; i++ ) {
-        options[i] = o || {}; o.delay = o.delay || defaultOptions.delay;
-        options[i].delay = i>0 ? o.delay + (o.offset||defaultOptions.offset) : o.delay;
-        this.tweens.push( to(els[i], vE, options[i]) );
+      this.tweens = []; var optionsObj = [];
+      for ( var i = 0, tl = els[length]; i < tl; i++ ) {
+        optionsObj[i] = o || {}; o[delay] = o[delay] || defaultOptions[delay];
+        optionsObj[i][delay] = i>0 ? o[delay] + (o[offset]||defaultOptions[offset]) : o[delay];
+        this.tweens.push( to(els[i], vE, optionsObj[i]) );
       }
     },
     TweensFT = function (els, vS, vE, o) { // .fromTo
-      this.tweens = []; var options = [];
-      for ( var i = 0, l = els.length; i < l; i++ ) {
-        options[i] = o || {}; o.delay = o.delay || defaultOptions.delay;
-        options[i].delay = i>0 ? o.delay + (o.offset||defaultOptions.offset) : o.delay;
-        this.tweens.push( fromTo(els[i], vS, vE, options[i]) );
+      this.tweens = []; var optionsObj = [];
+      for ( var i = 0, l = els[length]; i < l; i++ ) {
+        optionsObj[i] = o || {}; o[delay] = o[delay] || defaultOptions[delay];
+        optionsObj[i][delay] = i>0 ? o[delay] + (o[offset]||defaultOptions[offset]) : o[delay];
+        this.tweens.push( fromTo(els[i], vS, vE, optionsObj[i]) );
       }
     },
     ws = TweensTO.prototype = TweensFT.prototype = {
       start : function(t){
         t = t || time.now();
-        for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) {
+        for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) {
           this.tweens[i].start(t);
         }
         return this;
       },
-      stop : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].stop(); } return this; },
-      pause : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].pause(); } return this; },
-      chain : function(){ this.tweens[this.tweens.length-1].options.chain = arguments; return this; },
-      play : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].play(); } return this; },
+      stop : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].stop(); } return this; },
+      pause : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].pause(); } return this; },
+      chain : function(){ this.tweens[this.tweens[length]-1][options][chain] = arguments; return this; },
+      play : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].play(); } return this; },
       resume : function() {return this.play()}
     },
 
     // main methods
-    to = function (element, endObject, options) {
-      options = options || {}; options.rpr = true;
-      return new Tween(selector(element), endObject, endObject, options);
+    to = function (element, endObject, optionsObj) {
+      optionsObj = optionsObj || {}; optionsObj.rpr = true;
+      return new Tween(selector(element), endObject, endObject, optionsObj);
     },
-    fromTo = function (element, startObject, endObject, options) {
-      options = options || {};
-      return new Tween(selector(element), startObject, endObject, options);
+    fromTo = function (element, startObject, endObject, optionsObj) {
+      optionsObj = optionsObj || {};
+      return new Tween(selector(element), startObject, endObject, optionsObj);
     },
 
     // multiple elements tweening
-    allTo = function (elements, endObject, options) {
-      return new TweensTO(selector(elements,true), endObject, options);
+    allTo = function (elements, endObject, optionsObj) {
+      return new TweensTO(selector(elements,true), endObject, optionsObj);
     },
-    allFromTo = function (elements, f, endObject, options) {
-      return new TweensFT(selector(elements,true), f, endObject, options);
+    allFromTo = function (elements, startObject, endObject, optionsObj) {
+      return new TweensFT(selector(elements,true), startObject, endObject, optionsObj);
     };
 
   return { // export core methods to public for plugins

From af9e57b1f7992b37b5bdeefe263e3047cb8a0bd7 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 2 Feb 2017 01:23:21 +0200
Subject: [PATCH 316/471] 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 ba91cd66300142c1da7ed99de9831ea75e27bfa9 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 29 May 2017 16:03:57 +0300
Subject: [PATCH 317/471] Improvement for
 https://github.com/thednp/kute.js/issues/63

---
 demo/src/kute.min.js |  2 +-
 dist/kute.min.js     |  2 +-
 kute.js              | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/demo/src/kute.min.js b/demo/src/kute.min.js
index 804d85f..8b18aaf 100644
--- a/demo/src/kute.min.js
+++ b/demo/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>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 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px';
           }
         }
-        var boxValue = trueDimension(inputValue);
-        return boxValue.u === '%' ? boxValue.v * this[element][offsetWidth] / 100 : boxValue.v;
+        var boxValue = trueDimension(inputValue), offsetValue = tweenProp === 'height' ? offsetHeight : offsetWidth;
+        return boxValue.u === '%' ? boxValue.v * this[element][offsetValue] / 100 : boxValue.v;
       },
       transform : function(tweenProp,inputValue) {
         if (!(transformProperty in DOM)) {
@@ -433,8 +433,8 @@
 
       for (var x in obj) {
         if (transformFunctions[indexOf](x) !== -1) { // transform object gets built here
+          var prepAxis = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, obj[x]);
           if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
-            var prepAxis = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, obj[x]);
 
             for (var fnIndex = 0; fnIndex < 3; fnIndex++) {
               var translateAxis = prepAxis[fnIndex];
@@ -446,7 +446,7 @@
             }
             transformObject['translate'] = translateObject;
           } else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
-            var objectName = /rotate/.test(x) ? 'rotate' : 'skew', prepAxis = ['X', 'Y', 'Z'],
+            var objectName = /rotate/.test(x) ? 'rotate' : 'skew',
               rotationOrSkew = objectName === 'rotate' ? rotateObject : skewObject;
             for (var rIndex = 0; rIndex < 3; rIndex++) {
               var oneAxis = prepAxis[rIndex];

From da327643c770b223064b57fff371fe91269099b5 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 29 May 2017 16:03:59 +0300
Subject: [PATCH 318/471] 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: Mon, 29 May 2017 20:37:42 +0300
Subject: [PATCH 319/471] A better typo.

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

diff --git a/kute.js b/kute.js
index ca5fd17..5aedfc5 100644
--- a/kute.js
+++ b/kute.js
@@ -341,8 +341,8 @@
             elem[style][tweenProp] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px';
           }
         }
-        var boxValue = trueDimension(inputValue), offsetValue = tweenProp === 'height' ? offsetHeight : offsetWidth;
-        return boxValue.u === '%' ? boxValue.v * this[element][offsetValue] / 100 : boxValue.v;
+        var boxValue = trueDimension(inputValue), offsetProp = tweenProp === 'height' ? offsetHeight : offsetWidth;
+        return boxValue.u === '%' ? boxValue.v * this[element][offsetProp] / 100 : boxValue.v;
       },
       transform : function(tweenProp,inputValue) {
         if (!(transformProperty in DOM)) {

From 9303db19f1da7ebb909ab46df0e0f14a738b411b Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 8 Sep 2017 11:43:15 +0300
Subject: [PATCH 320/471] 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 16a3eb387c44b5b18f814d846b321660d2282af2 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 8 Sep 2017 11:43:17 +0300
Subject: [PATCH 321/471] Update Twitter share links.

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

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

From ba6c5291462d41bfbcbfe00032a72ed68ee35652 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 11 Sep 2017 23:08:22 +0300
Subject: [PATCH 322/471] Update README.md

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 09dcc93..144bbd2 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,8 @@ Along with a simple jQuery plugin, KUTE.js packs plugins for presentation attrib
 Because of it's modularity, KUTE.js makes it super easy to extend or override functionality, making it unique among Javascript animation engines.
 
 # Demo / CDN
-For documentation, examples and other cool tips, check the demo. Thanks to jsdelivr, we have a CDN link here. We also have cdnjs link right here. Sweet!
+For documentation, examples and other cool tips, check the demo. Thanks to jsdelivr, we have a CDN link here. We also have cdnjs link right here. Sweet!
+[![](https://data.jsdelivr.com/v1/package/npm/kute.js/badge)](https://www.jsdelivr.com/package/npm/kute.js)
 
 # Core Engine - [visit page](http://thednp.github.io/kute.js/examples.html)
 * tween object methods: `.to()`, `.fromTo()`, `.allTo()`, `.allFromTo()`
@@ -194,4 +195,4 @@ Since most modern browsers can handle pretty much everything, legacy browsers ne
 * Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project
 
 # License
-MIT License
\ No newline at end of file
+MIT License

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

---
 demo/assets/js/scripts.js   |  6 +++---
 demo/index.html             |  1 -
 demo/src/kute-attr.min.js   |  2 +-
 demo/src/kute-css.min.js    |  2 +-
 demo/src/kute-jquery.min.js |  2 +-
 demo/src/kute-svg.min.js    |  2 +-
 demo/src/kute-text.min.js   |  2 +-
 demo/src/kute.min.js        |  2 +-
 demo/start.html             | 26 +++++++++++++-------------
 dist/kute-attr.min.js       |  2 +-
 dist/kute-css.min.js        |  2 +-
 dist/kute-jquery.min.js     |  2 +-
 dist/kute-svg.min.js        |  2 +-
 dist/kute-text.min.js       |  2 +-
 dist/kute.min.js            |  2 +-
 kute-svg.js                 | 24 +++++++-----------------
 kute.js                     | 34 +++++++++++++---------------------
 17 files changed, 48 insertions(+), 67 deletions(-)

diff --git a/demo/assets/js/scripts.js b/demo/assets/js/scripts.js
index 1a1544c..b8200f7 100644
--- a/demo/assets/js/scripts.js
+++ b/demo/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/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index 239e336..875f1db 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index 8ddc8d5..5955016 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/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/demo/src/kute-jquery.min.js b/demo/src/kute-jquery.min.js
index 9ccc043..ae52109 100644
--- a/demo/src/kute-jquery.min.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index edbaddf..3a30e12 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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/demo/src/kute-text.min.js b/demo/src/kute-text.min.js
index 6a2a285..4992d93 100644
--- a/demo/src/kute-text.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index 8b18aaf..e79d246 100644
--- a/demo/src/kute.min.js
+++ b/demo/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([
     
     
 
-    
+    
 
     
     
diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js
index 239e336..875f1db 100644
--- a/dist/kute-attr.min.js
+++ b/dist/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/dist/kute-css.min.js b/dist/kute-css.min.js
index 8ddc8d5..5955016 100644
--- a/dist/kute-css.min.js
+++ b/dist/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/dist/kute-jquery.min.js b/dist/kute-jquery.min.js
index 9ccc043..ae52109 100644
--- a/dist/kute-jquery.min.js
+++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js
index edbaddf..3a30e12 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute-text.min.js b/dist/kute-text.min.js
index 6a2a285..4992d93 100644
--- a/dist/kute-text.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index 8b18aaf..e79d246 100644
--- a/dist/kute.min.js
+++ b/dist/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];e> 0 );
-        }
-      }
-      return points;
-    } : function(a,b,l,v) { // on desktop devices we use subpixel accuracy for morph
-      var points = [];
-      for(var i=0;i> 0)/10 );
+          points[i].push( ((a[i][j]+(b[i][j]-a[i][j])*v) * 1000 >> 0)/1000 );
         }
       }
       return points;
@@ -380,10 +370,10 @@
         x += complex ? b.origin[0] : 0; y += complex ? b.origin[1] : 0; // normalizing ends with the addition of the transformOrigin to the translation
 
         // finally we apply the transform attribute value
-        l.setAttribute('transform', ( x||y ? ('translate(' + (x*100>>0)/100 + ( y ? (',' + ((y*100>>0)/100)) : '') + ')') : '' )
-                                    +( rotate ? 'rotate(' + (rotate*100>>0)/100 + ')' : '' )
-                                    +( skewX ? 'skewX(' + (skewX*10>>0)/10 + ')' : '' )
-                                    +( skewY ? 'skewY(' + (skewY*10>>0)/10 + ')' : '' )
+        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 +')' : '' ) );
       }
     }
diff --git a/kute.js b/kute.js
index 5aedfc5..95e3882 100644
--- a/kute.js
+++ b/kute.js
@@ -206,16 +206,16 @@
 
     // true scroll container
     html = document[getElementsByTagName]('HTML')[0],
-    scrollContainer = navigator && /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html,
+    // scrollContainer = navigator && /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html,
+    scrollContainer = document.compatMode == 'BackCompat' ? body : html, // webkit browsers are now srolling the HTML
 
     // browser detection
     isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false,
     isIE8 = isIE === 8, // check IE8/IE
-    isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); // we optimize morph depending on device type
 
 
-  // KUTE.js INTERPOLATORS
-  var interpolate = g.Interpolate = {},
+    // KUTE.js INTERPOLATORS
+    interpolate = g.Interpolate = {},
     number = interpolate.number = function(a,b,v) { // number1, number2, progress
       a = +a; b -= a; return a + b * v;
     },
@@ -227,17 +227,10 @@
       for (c in b) { _c[c] = c !== 'a' ? (number(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (number(a[c],b[c],v) * 100 >> 0 )/100 : null; }
       return toHex ? rgbToHex( _c.r, _c.g, _c.b ) : !_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;
     },
-    translate = interpolate.translate = isMobile ? function (a,b,u,v){
+    translate = interpolate.translate = function (a,b,u,v){
       var translation = {};
       for (var ax in b){
-        translation[ax] = ( a[ax]===b[ax] ? b[ax] : (a[ax] + ( b[ax] - a[ax] ) * v ) >> 0 ) + u;
-      }
-      return translation.x||translation.y ? 'translate(' + translation.x + ',' + translation.y + ')' :
-        'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')';
-    } : function (a,b,u,v){
-      var translation = {};
-      for (var ax in b){
-        translation[ax] = ( a[ax]===b[ax] ? b[ax] : ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 100 >> 0 ) / 100 ) + u;
+        translation[ax] = ( a[ax]===b[ax] ? b[ax] : ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
       }
       return translation.x||translation.y ? 'translate(' + translation.x + ',' + translation.y + ')' :
         'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')';
@@ -245,15 +238,15 @@
     rotate = interpolate.rotate = function (a,b,u,v){
       var rotation = {};
       for ( var rx in b ){
-        rotation[rx] = rx === 'z' ? ('rotate('+ (((a[rx] + (b[rx] - a[rx]) * v) * 100 >> 0 ) / 100) + u + ')')
-                                  : (rx + '(' + (((a[rx] + (b[rx] - a[rx]) * v) * 100 >> 0 ) / 100) + u + ')');
+        rotation[rx] = rx === 'z' ? ('rotate('+ (((a[rx] + (b[rx] - a[rx]) * v) * 1000 >> 0 ) / 1000) + u + ')')
+                                  : (rx + '(' + (((a[rx] + (b[rx] - a[rx]) * v) * 1000 >> 0 ) / 1000) + u + ')');
       }
       return rotation.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||'');
     },
     skew = interpolate.skew = function (a,b,u,v){
       var skewProp = {};
       for ( var sx in b ){
-        skewProp[sx] = sx + '(' + (((a[sx] + (b[sx] - a[sx]) * v) * 10 >> 0) / 10) + u + ')';
+        skewProp[sx] = sx + '(' + (((a[sx] + (b[sx] - a[sx]) * v) * 1000 >> 0) / 1000) + u + ')';
       }
       return (skewProp.skewX||'') + (skewProp.skewY||'');
     },
@@ -487,7 +480,7 @@
       if (this[options][yoyo] && this.reversed===true) { reverse.call(this); this.reversed = false; }
       this[playing] = false;
 
-      setTimeout(function(){ if (!tweens[length]) { stop(); } }, 48);  // when all animations are finished, stop ticking after ~3 frames
+      !tweens[length] && stop();  // when all animations are finished, stop ticking after ~3 frames
     },
     preventScroll = function (eventObj) { // prevent mousewheel or touch events while tweening scroll
       var data = body.getAttribute(dataTweening);
@@ -495,15 +488,11 @@
     },
     scrollOut = function(){ //prevent scroll when tweening scroll
       if ( 'scroll' in this[valuesEnd] && body.getAttribute(dataTweening)) {
-        document[removeEventListener](touchOrWheel, preventScroll, false);
-        document[removeEventListener](mouseEnter, preventScroll, false);
         body.removeAttribute(dataTweening);
       }
     },
     scrollIn = function(){
       if ( 'scroll' in this[valuesEnd] && !body.getAttribute(dataTweening)) {
-        document[addEventListener](touchOrWheel, preventScroll, false);
-        document[addEventListener](mouseEnter, preventScroll, false);
         body.setAttribute(dataTweening, 'scroll');
       }
     },
@@ -795,6 +784,9 @@
       return new TweensFT(selector(elements,true), startObject, endObject, optionsObj);
     };
 
+  document[addEventListener](touchOrWheel, preventScroll, false);
+  document[addEventListener](mouseEnter, preventScroll, false);
+
   return { // export core methods to public for plugins
     property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
     defaultOptions : defaultOptions, // default tween options since 1.6.1

From 61929461615853ecb569c883ae26af66e3e046e9 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 29 Sep 2017 00:56:18 +0300
Subject: [PATCH 324/471] 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 92a37f453b2693023817a7ce0c5dbfb5f20f5950 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 29 Sep 2017 01:09:09 +0300
Subject: [PATCH 325/471] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 144bbd2..84f5d79 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,8 @@ Along with a simple jQuery plugin, KUTE.js packs plugins for presentation attrib
 Because of it's modularity, KUTE.js makes it super easy to extend or override functionality, making it unique among Javascript animation engines.
 
 # Demo / CDN
-For documentation, examples and other cool tips, check the demo. Thanks to jsdelivr, we have a CDN link here. We also have cdnjs link right here. Sweet!
+For documentation, examples and other cool tips, check the demo. Thanks to jsdelivr, we have a CDN link here. We also have cdnjs link right here. Sweet!
+
 [![](https://data.jsdelivr.com/v1/package/npm/kute.js/badge)](https://www.jsdelivr.com/package/npm/kute.js)
 
 # Core Engine - [visit page](http://thednp.github.io/kute.js/examples.html)

From f85ecef387716c2228f9ecee3f7663a88836c9f0 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 29 Sep 2017 01:21:32 +0300
Subject: [PATCH 326/471] Bump version

---
 bower.json   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index e9431da..4e0a3d5 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KUTE.js",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "homepage": "http://thednp.github.io/kute.js",
   "authors": [
     "thednp"
diff --git a/package.json b/package.json
index f5e49d4..23f76cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Complete Native Javascript animation engine.",
   "main": "kute.js",
   "scripts": {

From 73adb8344fe30a0010d646f914e59bc8c360b2b1 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 3 Oct 2017 01:10:01 +0300
Subject: [PATCH 327/471]

---
 README.md    | 13 ++++++++-----
 bower.json   |  2 +-
 kute-attr.js |  8 ++++----
 package.json |  2 +-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 84f5d79..d121a95 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,17 @@
 # KUTE.js
-A fully fledged native Javascript animation engine with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size (core engine is 17k min and 5.5k gzipped). 
+A fully fledged native JavaScript animation engine with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size (core engine is 17k min and 5.5k gzipped). 
+
+[![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://cdnjs.com/libraries/kute.js)
+[![NPM Downloads](https://img.shields.io/npm/dm/kute.js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=kute.js)
+[![jsDeliver](https://data.jsdelivr.com/v1/package/npm/kute.js/badge)](https://www.jsdelivr.com/package/npm/kute.js)
+[![CDNJS](https://img.shields.io/cdnjs/v/kute.js.svg?style=flat-square)](https://cdnjs.com/libraries/kute.js)
 
 Along with a simple jQuery plugin, KUTE.js packs plugins for presentation attributes, SVG transform, draw SVG strokes and path morphing, text string write up or number countdowns, plus additional CSS properties like colors, border-radius or typographic properties.
 
 Because of it's modularity, KUTE.js makes it super easy to extend or override functionality, making it unique among Javascript animation engines.
 
-# Demo / CDN
-For documentation, examples and other cool tips, check the demo. Thanks to jsdelivr, we have a CDN link here. We also have cdnjs link right here. Sweet!
-
-[![](https://data.jsdelivr.com/v1/package/npm/kute.js/badge)](https://www.jsdelivr.com/package/npm/kute.js)
+# Demo / Developer Guide
+For documentation, examples and other cool tips, check the [demo](http://thednp.github.io/kute.js/).
 
 # Core Engine - [visit page](http://thednp.github.io/kute.js/examples.html)
 * tween object methods: `.to()`, `.fromTo()`, `.allTo()`, `.allFromTo()`
diff --git a/bower.json b/bower.json
index 4e0a3d5..e53e327 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KUTE.js",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "homepage": "http://thednp.github.io/kute.js",
   "authors": [
     "thednp"
diff --git a/kute-attr.js b/kute-attr.js
index 7b012bc..4a69fef 100644
--- a/kute-attr.js
+++ b/kute-attr.js
@@ -62,12 +62,12 @@
             if (/%/.test(prefix)) {
               attributes[prop+s] = function(l,p,a,b,v) {
                 var _p = _p || p.replace(s,'');
-                l.setAttribute(_p, ((number(a.v,b.v,v) * 100>>0)/100) + b.u );
+                l.setAttribute(_p, ((number(a.v,b.v,v) * 1000>>0)/1000) + b.u );
               }
             } else {
               attributes[prop+s] = function(l,p,a,b,v) {
                 var _p = _p || p.replace(s,'');
-                l.setAttribute(_p, (number(a.v,b.v,v)>>0) + b.u );
+                l.setAttribute(_p, ( (number(a.v,b.v,v)*1000>>0)/1000) + b.u );
               }
             }
           }
@@ -76,11 +76,11 @@
           if (!(prop in attributes)) {
             if (/opacity/i.test(p)) {
               attributes[prop] = function(l,o,a,b,v) {
-                l.setAttribute(o, (number(a,b,v) * 100 >> 0) / 100 );
+                l.setAttribute(o, (number(a,b,v) * 1000 >> 0) / 1000 );
               }
             } else {
               attributes[prop] = function(l,o,a,b,v) {
-                l.setAttribute(o, (number(a,b,v) *10 >> 0 ) / 10 );
+                l.setAttribute(o, (number(a,b,v) * 1000 >> 0) / 1000 );
               }
             }
           }
diff --git a/package.json b/package.json
index 23f76cc..99c6096 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "Complete Native Javascript animation engine.",
   "main": "kute.js",
   "scripts": {

From e0d52535f6000a36ea1299c7920155514e0139da Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 3 Oct 2017 01:32:00 +0300
Subject: [PATCH 328/471]

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d121a95..ecd25b4 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # KUTE.js
 A fully fledged native JavaScript animation engine with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size (core engine is 17k min and 5.5k gzipped). 
 
-[![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://cdnjs.com/libraries/kute.js)
+[![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://www.npmjs.com/package/bootstrap.native)
 [![NPM Downloads](https://img.shields.io/npm/dm/kute.js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=kute.js)
 [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/kute.js/badge)](https://www.jsdelivr.com/package/npm/kute.js)
 [![CDNJS](https://img.shields.io/cdnjs/v/kute.js.svg?style=flat-square)](https://cdnjs.com/libraries/kute.js)

From c36e4d19676312ccf8a2acb8446768e6ab790451 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 3 Oct 2017 01:32:29 +0300
Subject: [PATCH 329/471]

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ecd25b4..5670424 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # KUTE.js
 A fully fledged native JavaScript animation engine with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size (core engine is 17k min and 5.5k gzipped). 
 
-[![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://www.npmjs.com/package/bootstrap.native)
+[![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://www.npmjs.com/package/kute.js)
 [![NPM Downloads](https://img.shields.io/npm/dm/kute.js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=kute.js)
 [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/kute.js/badge)](https://www.jsdelivr.com/package/npm/kute.js)
 [![CDNJS](https://img.shields.io/cdnjs/v/kute.js.svg?style=flat-square)](https://cdnjs.com/libraries/kute.js)

From 9cc657b7bfa6ca56e42ed010222ab56465772caf Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 5 Oct 2017 12:55:27 +0300
Subject: [PATCH 330/471] Update dist files.

---
 demo/src/kute-attr.min.js   | 4 ++--
 demo/src/kute-css.min.js    | 2 +-
 demo/src/kute-jquery.min.js | 2 +-
 demo/src/kute-svg.min.js    | 2 +-
 demo/src/kute-text.min.js   | 2 +-
 demo/src/kute.min.js        | 2 +-
 dist/kute-attr.min.js       | 4 ++--
 dist/kute-css.min.js        | 2 +-
 dist/kute-jquery.min.js     | 2 +-
 dist/kute-svg.min.js        | 2 +-
 dist/kute-text.min.js       | 2 +-
 dist/kute.min.js            | 2 +-
 12 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index 875f1db..5fed828 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index 5955016..5edcbf2 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/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/demo/src/kute-jquery.min.js b/demo/src/kute-jquery.min.js
index ae52109..bd0b283 100644
--- a/demo/src/kute-jquery.min.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 3a30e12..c27459b 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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/demo/src/kute-text.min.js b/demo/src/kute-text.min.js
index 4992d93..0cba68e 100644
--- a/demo/src/kute-text.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index e79d246..1e4f046 100644
--- a/demo/src/kute.min.js
+++ b/demo/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>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/dist/kute-css.min.js b/dist/kute-css.min.js
index 5955016..5edcbf2 100644
--- a/dist/kute-css.min.js
+++ b/dist/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/dist/kute-jquery.min.js b/dist/kute-jquery.min.js
index ae52109..bd0b283 100644
--- a/dist/kute-jquery.min.js
+++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js
index 3a30e12..c27459b 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute-text.min.js b/dist/kute-text.min.js
index 4992d93..0cba68e 100644
--- a/dist/kute-text.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index e79d246..1e4f046 100644
--- a/dist/kute.min.js
+++ b/dist/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:55:29 +0300
Subject: [PATCH 331/471] 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 332/471] 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 4b786053961af952c9b6cb489d69f81db278ffcc Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 5 Oct 2017 12:57:15 +0300
Subject: [PATCH 333/471] Update start.html

---
 demo/start.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/demo/start.html b/demo/start.html
index 10a4242..9db5945 100644
--- a/demo/start.html
+++ b/demo/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 65278aed53c30dec8b2fa3247e1af99ce10cdb1a Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 5 Oct 2017 13:01:59 +0300
Subject: [PATCH 334/471] Bump version.

---
 bower.json   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index e53e327..ef9a055 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KUTE.js",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "homepage": "http://thednp.github.io/kute.js",
   "authors": [
     "thednp"
diff --git a/package.json b/package.json
index 99c6096..70d9384 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Complete Native Javascript animation engine.",
   "main": "kute.js",
   "scripts": {

From 3c829c34755cba7d92753135f7986267a0a4db47 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 19 Jul 2018 08:39:09 +0300
Subject: [PATCH 335/471] A possible fix for #81

---
 demo/src/kute-attr.min.js   | 2 +-
 demo/src/kute-css.min.js    | 2 +-
 demo/src/kute-jquery.min.js | 2 +-
 demo/src/kute-svg.min.js    | 2 +-
 demo/src/kute-text.min.js   | 2 +-
 demo/src/kute.min.js        | 4 ++--
 dist/kute-attr.min.js       | 2 +-
 dist/kute-css.min.js        | 2 +-
 dist/kute-jquery.min.js     | 2 +-
 dist/kute-svg.min.js        | 2 +-
 dist/kute-text.min.js       | 2 +-
 dist/kute.min.js            | 4 ++--
 kute.js                     | 8 ++++++--
 13 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
index 5fed828..e2fc9bc 100644
--- a/demo/src/kute-attr.min.js
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
index 5edcbf2..16f87c8 100644
--- a/demo/src/kute-css.min.js
+++ b/demo/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/demo/src/kute-jquery.min.js b/demo/src/kute-jquery.min.js
index bd0b283..13eaaac 100644
--- a/demo/src/kute-jquery.min.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index c27459b..c567aa9 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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/demo/src/kute-text.min.js b/demo/src/kute-text.min.js
index 0cba68e..7456047 100644
--- a/demo/src/kute-text.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index 1e4f046..9b539e4 100644
--- a/demo/src/kute.min.js
+++ b/demo/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>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/dist/kute-css.min.js b/dist/kute-css.min.js
index 5edcbf2..16f87c8 100644
--- a/dist/kute-css.min.js
+++ b/dist/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/dist/kute-jquery.min.js b/dist/kute-jquery.min.js
index bd0b283..13eaaac 100644
--- a/dist/kute-jquery.min.js
+++ b/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js
index c27459b..c567aa9 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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/dist/kute-text.min.js b/dist/kute-text.min.js
index 0cba68e..7456047 100644
--- a/dist/kute-text.min.js
+++ b/dist/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/dist/kute.min.js b/dist/kute.min.js
index 1e4f046..9b539e4 100644
--- a/dist/kute.min.js
+++ b/dist/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 08:39:11 +0300
Subject: [PATCH 336/471] 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:27 +0300
Subject: [PATCH 337/471] Added callback reference #73

---
 demo/src/kute.min.js |  2 +-
 dist/kute.min.js     |  2 +-
 kute.js              | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/demo/src/kute.min.js b/demo/src/kute.min.js
index 9b539e4..4ef5834 100644
--- a/demo/src/kute.min.js
+++ b/demo/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>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 0) {
@@ -296,7 +296,7 @@
           return true;
         } else {
 
-          if (this[options].complete) { this[options].complete.call(); }
+          if (this[options].complete) { this[options].complete.call(this); } // fire the complete callback
 
           scrollOut.call(this); // unbind preventing scroll when scroll tween finished
 
@@ -691,7 +691,7 @@
         this._startTime += this[options][delay];
 
         if (!this._startFired) {
-          if (this[options].start) { this[options].start.call(); }
+          if (this[options].start) { this[options].start.call(this); }
           this._startFired = true;
         }
         !tick && ticker();
@@ -700,7 +700,7 @@
       play : function () {
         if (this.paused && this[playing]) {
           this.paused = false;
-          if (this[options].resume) { this[options].resume.call(); }
+          if (this[options].resume) { this[options].resume.call(this); }
           this._startTime += time.now()  - this._pauseTime;
           add(this);
           !tick && ticker();  // restart ticking if stopped
@@ -713,7 +713,7 @@
           remove(this);
           this.paused = true;
           this._pauseTime = time.now();
-          if (this[options].pause) { this[options].pause.call(); }
+          if (this[options].pause) { this[options].pause.call(this); }
         }
         return this;
       },
@@ -724,7 +724,7 @@
           this.paused = false;
           scrollOut.call(this);
 
-          if (this[options].stop) { this[options].stop.call(); }
+          if (this[options].stop) { this[options].stop.call(this); }
           this.stopChainedTweens();
           close.call(this);
         }

From 393d0a0a2b89c9d6750c025a78be9b210f3368cb Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 19 Jul 2018 09:25:29 +0300
Subject: [PATCH 338/471] 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:40 +0300
Subject: [PATCH 339/471] Fix SVG Plugin function `getPolyLength` for
 `` elements.

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

diff --git a/demo/assets/js/svg.js b/demo/assets/js/svg.js
index f6cf9b3..df091c0 100644
--- a/demo/assets/js/svg.js
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index c567aa9..5c2dc14 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
index c567aa9..5c2dc14 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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
diff --git a/kute-svg.js b/kute-svg.js
index cb30cba..6ee1428 100644
--- a/kute-svg.js
+++ b/kute-svg.js
@@ -235,7 +235,7 @@
             len += dist(coord(points[i]), coord(points[i+1]));
           }
         }
-        len += dist(coord(points[0]), coord(points[points.length-1]));
+        len += el[tagName] === 'polygon' ? dist(coord(points[0]), coord(points[points[length] - 1])) : 0;
       }
       return len;
     },

From 850b1e5960818ef124aadad78f1ded105c432bba Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 18 Oct 2018 11:47:43 +0300
Subject: [PATCH 340/471] 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 207597efe7360e2fc00b6bd4bb2ec401d73f3b72 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 18 Oct 2018 12:09:24 +0300
Subject: [PATCH 341/471] Typo

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

diff --git a/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 5c2dc14..2cf6726 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
index 5c2dc14..2cf6726 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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
diff --git a/kute-svg.js b/kute-svg.js
index 6ee1428..1b0976a 100644
--- a/kute-svg.js
+++ b/kute-svg.js
@@ -235,7 +235,7 @@
             len += dist(coord(points[i]), coord(points[i+1]));
           }
         }
-        len += el[tagName] === 'polygon' ? dist(coord(points[0]), coord(points[points[length] - 1])) : 0;
+        len += el.tagName === 'polygon' ? dist(coord(points[0]), coord(points[points[length] - 1])) : 0;
       }
       return len;
     },

From 1e5deb1f1cddd0634286ae04afd6182610a73ad0 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 18 Oct 2018 12:09:27 +0300
Subject: [PATCH 342/471] 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 fafbf484df5d03c6fbe0c20ec4f1df5504202599 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 19 Oct 2018 08:47:48 +0300
Subject: [PATCH 343/471] Another typo.

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

diff --git a/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index 2cf6726..ea8c8b7 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
index 2cf6726..ea8c8b7 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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
diff --git a/kute-svg.js b/kute-svg.js
index 1b0976a..5174e29 100644
--- a/kute-svg.js
+++ b/kute-svg.js
@@ -215,6 +215,7 @@
     },
     getPolyLength = function(el){ // getPolygonLength / getPolylineLength - return the length of the Polygon / Polyline
       var points = el.getAttribute('points').split(' '), len = 0;
+      console.log(points)
       if (points.length > 1) {
         var coord = function (p) {
           var c = p.split(',');
@@ -235,7 +236,7 @@
             len += dist(coord(points[i]), coord(points[i+1]));
           }
         }
-        len += el.tagName === 'polygon' ? dist(coord(points[0]), coord(points[points[length] - 1])) : 0;
+        len += el.tagName === 'polygon' ? dist(coord(points[0]), coord(points[points.length - 1])) : 0;
       }
       return len;
     },

From 52bfc84ef7b865af4baac356ac14c86f8f811e6e Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 19 Oct 2018 08:47:51 +0300
Subject: [PATCH 344/471] 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 ccd505f6d80f70b53ae37a32b7749c0d383329da Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 19 Oct 2018 08:56:08 +0300
Subject: [PATCH 345/471] Cleanup

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

diff --git a/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
index ea8c8b7..0d9e0a7 100644
--- a/demo/src/kute-svg.min.js
+++ b/demo/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
diff --git a/dist/kute-svg.min.js b/dist/kute-svg.min.js
index ea8c8b7..0d9e0a7 100644
--- a/dist/kute-svg.min.js
+++ b/dist/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
diff --git a/kute-svg.js b/kute-svg.js
index 5174e29..c485a7b 100644
--- a/kute-svg.js
+++ b/kute-svg.js
@@ -215,7 +215,6 @@
     },
     getPolyLength = function(el){ // getPolygonLength / getPolylineLength - return the length of the Polygon / Polyline
       var points = el.getAttribute('points').split(' '), len = 0;
-      console.log(points)
       if (points.length > 1) {
         var coord = function (p) {
           var c = p.split(',');

From 2f1fed31e35032992c3d87291ce5c3c8cc2cdabc Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 19 Oct 2018 08:56:10 +0300
Subject: [PATCH 346/471] 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 f296ffcd56c03c40f930899090dd201fec732730 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Mon, 5 Nov 2018 13:27:05 +0200
Subject: [PATCH 347/471] Trying to solve scroll with EDGE/Safari

---
 demo/src/kute.min.js | 2 +-
 dist/kute.min.js     | 2 +-
 kute.js              | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/demo/src/kute.min.js b/demo/src/kute.min.js
index 4ef5834..b1fe571 100644
--- a/demo/src/kute.min.js
+++ b/demo/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>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: Mon, 5 Nov 2018 13:27:08 +0200
Subject: [PATCH 348/471] 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:04:45 +0200
Subject: [PATCH 349/471] Changes:

* Removed jQuery plugin, moved into experiments branch
* Updated demo pages
* Updated build script
* Updated dist files
---
 build.js                    |  3 ---
 demo/about.html             |  2 +-
 demo/api.html               |  2 +-
 demo/attr.html              |  2 +-
 demo/css.html               |  2 +-
 demo/easing.html            |  2 +-
 demo/examples.html          |  2 +-
 demo/extend.html            |  2 +-
 demo/features.html          |  2 +-
 demo/index.html             |  4 ++--
 demo/options.html           |  2 +-
 demo/properties.html        |  2 +-
 demo/src/kute-jquery.min.js |  2 --
 demo/start.html             |  2 +-
 demo/svg.html               |  2 +-
 demo/text.html              |  2 +-
 dist/kute-jquery.min.js     |  2 --
 kute-jquery.js              | 42 -------------------------------------
 18 files changed, 15 insertions(+), 64 deletions(-)
 delete mode 100644 demo/src/kute-jquery.min.js
 delete mode 100644 dist/kute-jquery.min.js
 delete mode 100644 kute-jquery.js

diff --git a/build.js b/build.js
index 280f431..bdc63ad 100644
--- a/build.js
+++ b/build.js
@@ -18,7 +18,6 @@ function replaceK(s) {
     if (/attr/.test(s)) { return 'Attributes Plugin'}
     if (/svg/.test(s)) { return 'SVG Plugin'}
     if (/css/.test(s)) { return 'CSS Plugin'}
-    if (/jq/.test(s)) { return 'jQuery Plugin'}
     if (/text/.test(s)) { return 'Text Plugin'}
   } else {
     return 'Core Engine';
@@ -40,7 +39,6 @@ function handleError(err) {
 // Minify files
 minify('kute-attr.js', 'dist/kute-attr.min.js');
 minify('kute-css.js', 'dist/kute-css.min.js');
-minify('kute-jquery.js', 'dist/kute-jquery.min.js');
 minify('kute-svg.js', 'dist/kute-svg.min.js');
 minify('kute-text.js', 'dist/kute-text.min.js');
 minify('kute.js', 'dist/kute.min.js');
@@ -48,7 +46,6 @@ minify('kute.js', 'dist/kute.min.js');
 // Now also to the demo
 minify('kute-attr.js', 'demo/src/kute-attr.min.js');
 minify('kute-css.js', 'demo/src/kute-css.min.js');
-minify('kute-jquery.js', 'demo/src/kute-jquery.min.js');
 minify('kute-svg.js', 'demo/src/kute-svg.min.js');
 minify('kute-text.js', 'demo/src/kute-text.min.js');
 minify('kute.js', 'demo/src/kute.min.js');
diff --git a/demo/about.html b/demo/about.html
index b3fa087..2f36480 100644
--- a/demo/about.html
+++ b/demo/about.html
@@ -227,7 +227,7 @@
         
 
diff --git a/demo/api.html b/demo/api.html
index ecb2335..7323f18 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -246,7 +246,7 @@ tween2.chain(tweensCollection2.tweens);
         
 
diff --git a/demo/attr.html b/demo/attr.html
index b3568ad..e246687 100644
--- a/demo/attr.html
+++ b/demo/attr.html
@@ -190,7 +190,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
         
 
diff --git a/demo/css.html b/demo/css.html
index a76e8ec..8748fb3 100644
--- a/demo/css.html
+++ b/demo/css.html
@@ -214,7 +214,7 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
         
 
diff --git a/demo/easing.html b/demo/easing.html
index a72a647..c4e93c4 100644
--- a/demo/easing.html
+++ b/demo/easing.html
@@ -331,7 +331,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
         
 
diff --git a/demo/examples.html b/demo/examples.html
index 9852583..ccbf20f 100644
--- a/demo/examples.html
+++ b/demo/examples.html
@@ -501,7 +501,7 @@ var myMultiTween2 = KUTE.allFromTo(
         
 
diff --git a/demo/extend.html b/demo/extend.html
index 3670136..c93136a 100644
--- a/demo/extend.html
+++ b/demo/extend.html
@@ -344,7 +344,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
         
 
diff --git a/demo/features.html b/demo/features.html
index 0ec9611..f23e845 100644
--- a/demo/features.html
+++ b/demo/features.html
@@ -189,7 +189,7 @@
         
 
diff --git a/demo/index.html b/demo/index.html
index 96164b4..841c5c4 100644
--- a/demo/index.html
+++ b/demo/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/demo/options.html b/demo/options.html
index d49785a..8a2a9aa 100644
--- a/demo/options.html
+++ b/demo/options.html
@@ -196,7 +196,7 @@ KUTE.defaultOptions.duration = 1000;
         
 
diff --git a/demo/properties.html b/demo/properties.html
index 70552f4..25ab65b 100644
--- a/demo/properties.html
+++ b/demo/properties.html
@@ -273,7 +273,7 @@
         
 
diff --git a/demo/src/kute-jquery.min.js b/demo/src/kute-jquery.min.js
deleted file mode 100644
index 13eaaac..0000000
--- a/demo/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/demo/start.html b/demo/start.html
index 9db5945..dc1c282 100644
--- a/demo/start.html
+++ b/demo/start.html
@@ -161,7 +161,7 @@ define([
         
 
diff --git a/demo/svg.html b/demo/svg.html
index fa43679..044a713 100644
--- a/demo/svg.html
+++ b/demo/svg.html
@@ -563,7 +563,7 @@ KUTE.fromTo(element,
         
 
diff --git a/demo/text.html b/demo/text.html
index 66f6f41..f43583f 100644
--- a/demo/text.html
+++ b/demo/text.html
@@ -164,7 +164,7 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other <span&
         
 
diff --git a/dist/kute-jquery.min.js b/dist/kute-jquery.min.js
deleted file mode 100644
index 13eaaac..0000000
--- a/dist/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/kute-jquery.js b/kute-jquery.js
deleted file mode 100644
index b9b3c00..0000000
--- a/kute-jquery.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * package jQuery Plugin
- * by dnp_theme
- * Licensed under MIT-License
- */
-
-(function(root,factory){
-  // We need to require the root KUTE and jQuery.
-  if (typeof define === 'function' && define.amd) {
-    define(["./kute.js", "jquery"], function(KUTE, $){
-      factory($, KUTE);
-      return KUTE;
-    });
-  } else if(typeof module == "object" && typeof require == "function") {
-    // We assume, that require() is sync.
-    var KUTE = require("./kute.js");
-    var $ = require("jquery");
-    
-    // Export the modified one. Not really required, but convenient.
-    module.exports = factory($, KUTE);
-  } else if (typeof root.KUTE !== "undefined" && (typeof root.$ !== 'undefined' || typeof root.jQuery !== 'undefined' ) ) {
-    // jQuery always has two ways of existing... Find one, and pass.
-    var $ = root.jQuery || root.$, KUTE = root.KUTE;
-    factory($, KUTE);
-  } else {
-    throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");
-  }
- })(this, function($, KUTE) {
-  'use strict';
-
-  $.fn.fromTo = function(from,to,ops) {
-    var el = this.length > 1 ? this : this[0], method = this.length > 1 ? 'allFromTo' : 'fromTo';
-    return KUTE[method](el,from,to,ops);
-  };
-
-  $.fn.to = function(to,ops) {
-    var el = this.length > 1 ? this : this[0], method = this.length > 1 ? 'allTo' : 'to';
-    return KUTE[method](el,to,ops);
-  };
-
-  return this;
-});
\ No newline at end of file

From bd73c423b6c0a30efe338e1dc0e9cef073c2d3a9 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 1 Feb 2019 12:06:43 +0200
Subject: [PATCH 350/471] 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 351/471] 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 7d7bd32572ddc06bfed94dd5cb3c5efc2f9d8266 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 1 Feb 2019 12:42:34 +0200
Subject: [PATCH 352/471] Removed jQuery plugin from documentation

---
 demo/about.html    |  2 +-
 demo/api.html      |  3 +--
 demo/easing.html   |  2 +-
 demo/examples.html | 17 +----------------
 demo/features.html |  2 +-
 demo/start.html    |  7 ++-----
 6 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/demo/about.html b/demo/about.html
index 2f36480..fcbb1de 100644
--- a/demo/about.html
+++ b/demo/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/demo/api.html b/demo/api.html
index 7323f18..f8293f9 100644
--- a/demo/api.html
+++ b/demo/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/demo/easing.html b/demo/easing.html
index c4e93c4..5186b58 100644
--- a/demo/easing.html
+++ b/demo/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/demo/examples.html b/demo/examples.html
index ccbf20f..7aee710 100644
--- a/demo/examples.html
+++ b/demo/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/demo/features.html b/demo/features.html
index f23e845..361feff 100644
--- a/demo/features.html
+++ b/demo/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/demo/start.html b/demo/start.html
index dc1c282..d6cea16 100644
--- a/demo/start.html
+++ b/demo/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 c753ade57c59844628353f800e85f2cc86207e93 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 1 Feb 2019 12:48:31 +0200
Subject: [PATCH 353/471] Bump version

---
 bower.json   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index ef9a055..6298bcc 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KUTE.js",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "homepage": "http://thednp.github.io/kute.js",
   "authors": [
     "thednp"
diff --git a/package.json b/package.json
index 70d9384..3b20fa1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "Complete Native Javascript animation engine.",
   "main": "kute.js",
   "scripts": {

From c16efd44d69219c5f1b35e9be94e187cb2e56d27 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Sun, 10 Feb 2019 13:56:02 +0200
Subject: [PATCH 354/471]

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5670424..f42161f 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ For documentation, examples and other cool tips, check the [demo](http://thednp.
 # jQuery Plugin
 This aims to make the KUTE.js script work native within other jQuery apps but it's not always really needed as we will see in the second subchapter here. Since the demos don't insist on this particular plugin, we'll write some basics [right here](https://github.com/thednp/kute.js#using-the-jquery-plugin).
 
-The plugin is just a few bits of code to bridge all of the `KUTE.js` methods to your jQuery apps. The plugin can be found in the [/master](https://github.com/thednp/kute.js/blob/master/kute-jquery.js) folder, CDN repositories and npm packages.
+The plugin is just a few bits of code to bridge all of the `KUTE.js` methods to your jQuery apps. The plugin can be found in the [/experiments](https://github.com/thednp/kute.js/blob/experiments/kute-jquery.js) branch only.
 
 # NPM/Bower
 You can install this through NPM or bower respectively:

From e313cb369ff76ab4c1823b181465ced8ab62676d Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 7 Nov 2019 17:49:09 +0200
Subject: [PATCH 355/471] 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 00fbc386245b5206c502bfbe929e1fafa9fe5614 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 7 Nov 2019 17:49:12 +0200
Subject: [PATCH 356/471] Added a simple example for #96

---
 demo/about.html            |   1 +
 demo/api.html              |   1 +
 demo/assets/js/progress.js |  18 ++++
 demo/attr.html             |   1 +
 demo/css.html              |   1 +
 demo/easing.html           |   1 +
 demo/examples.html         |   1 +
 demo/extend.html           |   1 +
 demo/features.html         |   1 +
 demo/index.html            |   1 +
 demo/options.html          |   1 +
 demo/progress.html         | 215 +++++++++++++++++++++++++++++++++++++
 demo/properties.html       |   1 +
 demo/start.html            |   1 +
 demo/svg.html              |   1 +
 demo/text.html             |   1 +
 16 files changed, 247 insertions(+)
 create mode 100644 demo/assets/js/progress.js
 create mode 100644 demo/progress.html

diff --git a/demo/about.html b/demo/about.html
index fcbb1de..7fbb5d5 100644
--- a/demo/about.html
+++ b/demo/about.html
@@ -61,6 +61,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/api.html b/demo/api.html
index f8293f9..02f9287 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -64,6 +64,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/assets/js/progress.js b/demo/assets/js/progress.js
new file mode 100644
index 0000000..50d2d69
--- /dev/null
+++ b/demo/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/demo/attr.html b/demo/attr.html
index e246687..cd86a71 100644
--- a/demo/attr.html
+++ b/demo/attr.html
@@ -64,6 +64,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/css.html b/demo/css.html
index 8748fb3..aeb0ca4 100644
--- a/demo/css.html
+++ b/demo/css.html
@@ -63,6 +63,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/easing.html b/demo/easing.html
index 5186b58..b300227 100644
--- a/demo/easing.html
+++ b/demo/easing.html
@@ -66,6 +66,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/examples.html b/demo/examples.html
index 7aee710..0c83ce2 100644
--- a/demo/examples.html
+++ b/demo/examples.html
@@ -62,6 +62,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/extend.html b/demo/extend.html
index c93136a..ea24628 100644
--- a/demo/extend.html
+++ b/demo/extend.html
@@ -62,6 +62,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/features.html b/demo/features.html
index 361feff..fdcd43f 100644
--- a/demo/features.html
+++ b/demo/features.html
@@ -59,6 +59,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/index.html b/demo/index.html
index 841c5c4..35aed1f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -59,6 +59,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/options.html b/demo/options.html
index 8a2a9aa..d0c5174 100644
--- a/demo/options.html
+++ b/demo/options.html
@@ -64,6 +64,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/progress.html b/demo/progress.html
new file mode 100644
index 0000000..4f82c0d
--- /dev/null
+++ b/demo/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/demo/properties.html b/demo/properties.html
index 25ab65b..8109355 100644
--- a/demo/properties.html
+++ b/demo/properties.html
@@ -61,6 +61,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/start.html b/demo/start.html
index d6cea16..e954580 100644
--- a/demo/start.html
+++ b/demo/start.html
@@ -64,6 +64,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/svg.html b/demo/svg.html
index 044a713..4492a3d 100644
--- a/demo/svg.html
+++ b/demo/svg.html
@@ -63,6 +63,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 
diff --git a/demo/text.html b/demo/text.html
index f43583f..7e8419f 100644
--- a/demo/text.html
+++ b/demo/text.html
@@ -73,6 +73,7 @@
                             
  • SVG Plugin 
    • 
                             
  • Text Plugin 
    • 
                             
  • Attributes Plugin 
    • 
+                            
  • Tween Progress 
    • 
                         
                     
                     
  • 

From db2595d8d078a13c6bd19320f2aee98e0d85964d Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:06:26 +0000
Subject: [PATCH 357/471] Changes in relation to #97

---
 .gitignore                                    |    3 +-
 .npmignore                                    |    3 +
 README.md                                     |  191 +-
 bower.json                                    |   37 -
 build.js                                      |   51 -
 demo/about.html                               |  250 --
 demo/api.html                                 |  273 --
 demo/assets/css/kute.css                      |  243 +-
 demo/assets/img/apple-touch-icon.png          |  Bin 0 -> 4265 bytes
 demo/assets/img/favicon.ico                   |  Bin 0 -> 133982 bytes
 demo/assets/img/favicon.png                   |  Bin 1456 -> 0 bytes
 demo/assets/img/home.svg                      |   56 +
 demo/assets/img/ms.svg                        |   27 +
 demo/assets/img/rectangle.svg                 |    9 +
 demo/assets/img/social.svg                    |   29 +
 demo/assets/js/backgroundPosition.js          |   11 +
 demo/assets/js/borderRadius.js                |   12 +
 demo/assets/js/boxModel.js                    |   49 +
 demo/assets/js/clipProperty.js                |   25 +
 demo/assets/js/colorProperties.js             |   39 +
 demo/assets/js/css.js                         |  147 -
 demo/assets/js/easing.js                      |   77 -
 demo/assets/js/examples.js                    |  273 --
 demo/assets/js/extend.js                      |   27 -
 demo/assets/js/filterEffects.js               |   18 +
 demo/assets/js/home.js                        |  164 +-
 demo/assets/js/{attr.js => htmlAttributes.js} |   23 +-
 demo/assets/js/kute-bezier.min.js             |    2 -
 demo/assets/js/kute-bs.js                     |  113 -
 demo/assets/js/kute-physics.min.js            |    2 -
 demo/assets/js/minifill.js                    |  382 ---
 demo/assets/js/opacityProperty.js             |   23 +
 demo/assets/js/perf-matrix.js                 |  113 +
 demo/assets/js/perf.js                        |   75 +-
 demo/assets/js/progress.js                    |   24 +-
 demo/assets/js/sampleComponent.js             |   82 +
 demo/assets/js/scripts.js                     |   33 +-
 demo/assets/js/scrollProperty.js              |   13 +
 demo/assets/js/shadowProperties.js            |   53 +
 demo/assets/js/svg.js                         |  258 --
 demo/assets/js/svgCubicMorph.js               |   60 +
 demo/assets/js/svgDraw.js                     |   29 +
 demo/assets/js/svgMorph.js                    |   96 +
 demo/assets/js/svgTransform.js                |  155 +
 demo/assets/js/text.js                        |   35 -
 demo/assets/js/textProperties.js              |   27 +
 demo/assets/js/textWrite.js                   |   61 +
 demo/assets/js/transformFunctions.js          |  134 +
 demo/assets/js/transformMatrix.js             |   92 +
 demo/assets/js/tween.min.js                   |    2 +-
 demo/attr.html                                |  221 --
 demo/backgroundPosition.html                  |  159 +
 demo/borderRadius.html                        |  173 +
 demo/boxModel.html                            |  180 ++
 demo/clipProperty.html                        |  154 +
 demo/colorProperties.html                     |  171 +
 demo/css.html                                 |  245 --
 demo/easing.html                              |  365 ---
 demo/examples.html                            |  515 ---
 demo/extend.html                              |  376 ---
 demo/features.html                            |  214 --
 demo/filterEffects.html                       |  192 ++
 demo/htmlAttributes.html                      |  236 ++
 demo/index.html                               |  416 +--
 demo/opacityProperty.html                     |  152 +
 demo/options.html                             |  224 --
 demo/performance-matrix.html                  |  212 ++
 demo/performance-transform.html               |  218 ++
 demo/performance.html                         |  138 +-
 demo/progress.html                            |  217 +-
 demo/properties.html                          |  298 --
 demo/scrollProperty.html                      |  193 ++
 demo/shadowProperties.html                    |  195 ++
 demo/src/kute-attr.min.js                     |    2 -
 demo/src/kute-base.js                         |  567 ++++
 demo/src/kute-base.min.js                     |    2 +
 demo/src/kute-css.min.js                      |    2 -
 demo/src/kute-extra.js                        | 2785 +++++++++++++++++
 demo/src/kute-extra.min.js                    |    2 +
 demo/src/kute-svg.min.js                      |    2 -
 demo/src/kute-text.min.js                     |    2 -
 demo/src/kute.min.js                          |    4 +-
 demo/src/polyfill.min.js                      |    2 +
 demo/start.html                               |  186 --
 demo/svg.html                                 |  596 ----
 demo/svgCubicMorph.html                       |  356 +++
 demo/svgDraw.html                             |  166 +
 demo/svgMorph.html                            |  388 +++
 demo/svgTransform.html                        |  390 +++
 demo/text.html                                |  195 --
 demo/textProperties.html                      |  159 +
 demo/textWrite.html                           |  275 ++
 demo/transformFunctions.html                  |  297 ++
 demo/transformMatrix.html                     |  216 ++
 dist/kute-attr.min.js                         |    2 -
 dist/kute-css.min.js                          |    2 -
 dist/kute-svg.min.js                          |    2 -
 dist/kute-text.min.js                         |    2 -
 dist/kute.esm.js                              | 2259 +++++++++++++
 dist/kute.esm.min.js                          |    2 +
 dist/kute.js                                  | 2267 ++++++++++++++
 dist/kute.min.js                              |    4 +-
 dist/polyfill.js                              |  105 +
 dist/polyfill.min.js                          |    2 +
 kute-attr.js                                  |  102 -
 kute-css.js                                   |  150 -
 kute-svg.js                                   |  416 ---
 kute-text.js                                  |   72 -
 kute.js                                       |  803 -----
 package.json                                  |   47 +-
 rollup.config.js                              |   58 +
 src/animation/animation.js                    |  118 +
 src/animation/animationBase.js                |   67 +
 src/animation/animationDevelopment.js         |   98 +
 src/components/backgroundPosition.js          |   59 +
 src/components/borderRadius.js                |   62 +
 src/components/boxModel.js                    |   78 +
 src/components/clipProperty.js                |   62 +
 src/components/colorProperties.js             |   77 +
 src/components/crossBrowserMove.js            |   75 +
 src/components/filterEffects.js               |  179 ++
 src/components/htmlAttributes.js              |  117 +
 src/components/opacityProperty.js             |   48 +
 src/components/scrollProperty.js              |  107 +
 src/components/shadowProperties.js            |  115 +
 src/components/svgCubicMorph.js               |  695 ++++
 src/components/svgDraw.js                     |  184 ++
 src/components/svgMorph.js                    |  808 +++++
 src/components/svgTransform.js                |  173 +
 src/components/textProperties.js              |   58 +
 src/components/textWrite.js                   |  226 ++
 src/components/transformFunctions.js          |  164 +
 src/components/transformMatrix.js             |  173 +
 src/core/globals.js                           |    5 +
 src/core/interface.js                         |   28 +
 src/core/internals.js                         |  116 +
 src/core/interpolate.js                       |   23 +
 src/core/objects.js                           |   58 +
 src/core/process.js                           |  115 +
 src/easing/easing-base.js                     |   47 +
 src/easing/easing-bezier.js                   |   58 +
 src/easing/easing.js                          |  111 +
 src/index-base.js                             |   49 +
 src/index-extra.js                            |  101 +
 src/index.js                                  |   60 +
 src/tween/tween.js                            |  228 ++
 src/tween/tweenBase.js                        |  155 +
 src/tween/tweenCollection.js                  |   77 +
 src/tween/tweenExtra.js                       |   45 +
 src/util/polyfill.js                          |    4 +
 src/util/progress.js                          |   70 +
 src/util/selector.js                          |   19 +
 src/util/util.js                              |   91 +
 153 files changed, 19746 insertions(+), 7711 deletions(-)
 create mode 100644 .npmignore
 delete mode 100644 bower.json
 delete mode 100644 build.js
 delete mode 100644 demo/about.html
 delete mode 100644 demo/api.html
 create mode 100644 demo/assets/img/apple-touch-icon.png
 create mode 100644 demo/assets/img/favicon.ico
 delete mode 100644 demo/assets/img/favicon.png
 create mode 100644 demo/assets/img/home.svg
 create mode 100644 demo/assets/img/ms.svg
 create mode 100644 demo/assets/img/rectangle.svg
 create mode 100644 demo/assets/img/social.svg
 create mode 100644 demo/assets/js/backgroundPosition.js
 create mode 100644 demo/assets/js/borderRadius.js
 create mode 100644 demo/assets/js/boxModel.js
 create mode 100644 demo/assets/js/clipProperty.js
 create mode 100644 demo/assets/js/colorProperties.js
 delete mode 100644 demo/assets/js/css.js
 delete mode 100644 demo/assets/js/easing.js
 delete mode 100644 demo/assets/js/examples.js
 delete mode 100644 demo/assets/js/extend.js
 create mode 100644 demo/assets/js/filterEffects.js
 rename demo/assets/js/{attr.js => htmlAttributes.js} (79%)
 delete mode 100644 demo/assets/js/kute-bezier.min.js
 delete mode 100644 demo/assets/js/kute-bs.js
 delete mode 100644 demo/assets/js/kute-physics.min.js
 delete mode 100644 demo/assets/js/minifill.js
 create mode 100644 demo/assets/js/opacityProperty.js
 create mode 100644 demo/assets/js/perf-matrix.js
 create mode 100644 demo/assets/js/sampleComponent.js
 create mode 100644 demo/assets/js/scrollProperty.js
 create mode 100644 demo/assets/js/shadowProperties.js
 delete mode 100644 demo/assets/js/svg.js
 create mode 100644 demo/assets/js/svgCubicMorph.js
 create mode 100644 demo/assets/js/svgDraw.js
 create mode 100644 demo/assets/js/svgMorph.js
 create mode 100644 demo/assets/js/svgTransform.js
 delete mode 100644 demo/assets/js/text.js
 create mode 100644 demo/assets/js/textProperties.js
 create mode 100644 demo/assets/js/textWrite.js
 create mode 100644 demo/assets/js/transformFunctions.js
 create mode 100644 demo/assets/js/transformMatrix.js
 delete mode 100644 demo/attr.html
 create mode 100644 demo/backgroundPosition.html
 create mode 100644 demo/borderRadius.html
 create mode 100644 demo/boxModel.html
 create mode 100644 demo/clipProperty.html
 create mode 100644 demo/colorProperties.html
 delete mode 100644 demo/css.html
 delete mode 100644 demo/easing.html
 delete mode 100644 demo/examples.html
 delete mode 100644 demo/extend.html
 delete mode 100644 demo/features.html
 create mode 100644 demo/filterEffects.html
 create mode 100644 demo/htmlAttributes.html
 create mode 100644 demo/opacityProperty.html
 delete mode 100644 demo/options.html
 create mode 100644 demo/performance-matrix.html
 create mode 100644 demo/performance-transform.html
 delete mode 100644 demo/properties.html
 create mode 100644 demo/scrollProperty.html
 create mode 100644 demo/shadowProperties.html
 delete mode 100644 demo/src/kute-attr.min.js
 create mode 100644 demo/src/kute-base.js
 create mode 100644 demo/src/kute-base.min.js
 delete mode 100644 demo/src/kute-css.min.js
 create mode 100644 demo/src/kute-extra.js
 create mode 100644 demo/src/kute-extra.min.js
 delete mode 100644 demo/src/kute-svg.min.js
 delete mode 100644 demo/src/kute-text.min.js
 create mode 100644 demo/src/polyfill.min.js
 delete mode 100644 demo/start.html
 delete mode 100644 demo/svg.html
 create mode 100644 demo/svgCubicMorph.html
 create mode 100644 demo/svgDraw.html
 create mode 100644 demo/svgMorph.html
 create mode 100644 demo/svgTransform.html
 delete mode 100644 demo/text.html
 create mode 100644 demo/textProperties.html
 create mode 100644 demo/textWrite.html
 create mode 100644 demo/transformFunctions.html
 create mode 100644 demo/transformMatrix.html
 delete mode 100644 dist/kute-attr.min.js
 delete mode 100644 dist/kute-css.min.js
 delete mode 100644 dist/kute-svg.min.js
 delete mode 100644 dist/kute-text.min.js
 create mode 100644 dist/kute.esm.js
 create mode 100644 dist/kute.esm.min.js
 create mode 100644 dist/kute.js
 create mode 100644 dist/polyfill.js
 create mode 100644 dist/polyfill.min.js
 delete mode 100644 kute-attr.js
 delete mode 100644 kute-css.js
 delete mode 100644 kute-svg.js
 delete mode 100644 kute-text.js
 delete mode 100644 kute.js
 create mode 100644 rollup.config.js
 create mode 100644 src/animation/animation.js
 create mode 100644 src/animation/animationBase.js
 create mode 100644 src/animation/animationDevelopment.js
 create mode 100644 src/components/backgroundPosition.js
 create mode 100644 src/components/borderRadius.js
 create mode 100644 src/components/boxModel.js
 create mode 100644 src/components/clipProperty.js
 create mode 100644 src/components/colorProperties.js
 create mode 100644 src/components/crossBrowserMove.js
 create mode 100644 src/components/filterEffects.js
 create mode 100644 src/components/htmlAttributes.js
 create mode 100644 src/components/opacityProperty.js
 create mode 100644 src/components/scrollProperty.js
 create mode 100644 src/components/shadowProperties.js
 create mode 100644 src/components/svgCubicMorph.js
 create mode 100644 src/components/svgDraw.js
 create mode 100644 src/components/svgMorph.js
 create mode 100644 src/components/svgTransform.js
 create mode 100644 src/components/textProperties.js
 create mode 100644 src/components/textWrite.js
 create mode 100644 src/components/transformFunctions.js
 create mode 100644 src/components/transformMatrix.js
 create mode 100644 src/core/globals.js
 create mode 100644 src/core/interface.js
 create mode 100644 src/core/internals.js
 create mode 100644 src/core/interpolate.js
 create mode 100644 src/core/objects.js
 create mode 100644 src/core/process.js
 create mode 100644 src/easing/easing-base.js
 create mode 100644 src/easing/easing-bezier.js
 create mode 100644 src/easing/easing.js
 create mode 100644 src/index-base.js
 create mode 100644 src/index-extra.js
 create mode 100644 src/index.js
 create mode 100644 src/tween/tween.js
 create mode 100644 src/tween/tweenBase.js
 create mode 100644 src/tween/tweenCollection.js
 create mode 100644 src/tween/tweenExtra.js
 create mode 100644 src/util/polyfill.js
 create mode 100644 src/util/progress.js
 create mode 100644 src/util/selector.js
 create mode 100644 src/util/util.js

diff --git a/.gitignore b/.gitignore
index 68b9e27..1681d2b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
-bower_components/
+.npmignore
+package-lock.json
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..41cec28
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,3 @@
+node_modules/
+demo/
+.gitignore
\ No newline at end of file
diff --git a/README.md b/README.md
index f42161f..7142f9a 100644
--- a/README.md
+++ b/README.md
@@ -1,202 +1,25 @@
 # KUTE.js
-A fully fledged native JavaScript animation engine with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size (core engine is 17k min and 5.5k gzipped). 
+A modern JavaScript animation engine built on ES6/ES7 standards with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size. 
 
 [![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://www.npmjs.com/package/kute.js)
 [![NPM Downloads](https://img.shields.io/npm/dm/kute.js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=kute.js)
 [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/kute.js/badge)](https://www.jsdelivr.com/package/npm/kute.js)
 [![CDNJS](https://img.shields.io/cdnjs/v/kute.js.svg?style=flat-square)](https://cdnjs.com/libraries/kute.js)
 
-Along with a simple jQuery plugin, KUTE.js packs plugins for presentation attributes, SVG transform, draw SVG strokes and path morphing, text string write up or number countdowns, plus additional CSS properties like colors, border-radius or typographic properties.
-
-Because of it's modularity, KUTE.js makes it super easy to extend or override functionality, making it unique among Javascript animation engines.
+KUTE.js packs a series of components for presentation attributes, SVG transform, draw SVG strokes and path morphing, text string write up or number countdowns, plus additional CSS properties like colors, border-radius or typographic properties.
 
 # Demo / Developer Guide
-For documentation, examples and other cool tips, check the [demo](http://thednp.github.io/kute.js/).
+For components documentation, examples and other cool tips, check the [demo](http://thednp.github.io/kute.js/).
 
-# Core Engine - [visit page](http://thednp.github.io/kute.js/examples.html)
-* tween object methods: `.to()`, `.fromTo()`, `.allTo()`, `.allFromTo()`
-* tween control methods: `.start()`, `.stop()`, `.pause()`, `.play()`
-* 2D and 3D transforms: all except `matrix`, `matrix3d`, `scale3d`, `rotate3d`
-* box model properties: `top`, `left`, `width`, `height`
-* colors: `color`, `backgroundColor`
-* scroll: vertical scroll animation for `window` or any element with `overflow: auto|scroll`
-* options: `yoyo`, `duration`, `easing`, `repeat`, `delay`, `offset` (for tween collections), `repeatDelay` and other transform/plugins related options
-* Robert Penner's easing functions
-* extensible prototypes and utility methods
- 
-# SVG Plugin - [visit page](http://thednp.github.io/kute.js/svg.html)
-* morphs SVGs with the `path` tween property, updating the `d` attribute of `` or `` elements
-* cross-browser SVG `transform` via the `svgTransform` property and the `transform` presentation attribute, this feature also helps stacking transform functions on chained tweens
-* draws SVG stroke with the `draw` tween property for most SVG elements: ``, ``, `` or ``, `` or ``, ``
-
-# CSS Plugin - [visit page](http://thednp.github.io/kute.js/css.html)
-* all box model properties: `margin`, `padding`, with all their variations like `marginTop`, all variations for `width` or `height` like `maxHeight` or `minWidth`, `outlineWidth`, `borderWidth` with all side variations, except short-hand notations
-* `borderRadius` properties and all side variations, shorthand notations and early implementations are not supported
-* color properties: `outlineColor`, `borderColor` with all side variations except shorthands, etc
-* `clip` property only for `rect` type of values
-* `backgroundPosition` property with the ability to understand strings like `top left` and such
-* typographic properties: `fontSize`, `lineHeight`,  `lettersSpacing` and `wordSpacing` 
-
-# Text Plugin - [visit page](http://thednp.github.io/kute.js/text.html)
-* animated number increments/decreases
-* writing text with a cool effect
- 
-# Attributes Plugin - [visit page](http://thednp.github.io/kute.js/attr.html)
-* animates any numeric presentation attribute with suffixed value
-* animates any other non-suffixed numeric presentation attribute
-* animates `fill`, `stroke` and `stop-color` color properties
-* handles attributes namespaces properly with `stroke-opacity` or `strokeOpacity`
-* properly handles the suffixes for you and depends very much on the current values then values you input
-
-# Easing Functions - [visit page](http://thednp.github.io/kute.js/easing.html)
-**NOTE:** Starting with KUTE.js v 1.6.0 the Physics and Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the [Experiments repository on Github](https://github.com/thednp/kute.js/tree/experiments). The reasons for that is to make it easy to maintain what's more important: core code quality and the ability to create custom builds.
    
-
-* optimized dynamics easing functions
-* optimized cubic-bezier easing functions
-
-# jQuery Plugin
-This aims to make the KUTE.js script work native within other jQuery apps but it's not always really needed as we will see in the second subchapter here. Since the demos don't insist on this particular plugin, we'll write some basics [right here](https://github.com/thednp/kute.js#using-the-jquery-plugin).
-
-The plugin is just a few bits of code to bridge all of the `KUTE.js` methods to your jQuery apps. The plugin can be found in the [/experiments](https://github.com/thednp/kute.js/blob/experiments/kute-jquery.js) branch only.
-
-# NPM/Bower
-You can install this through NPM or bower respectively:
-```
-$ npm install kute.js
-# or
-$ bower install kute.js
-```
-
-# CommonJS/AMD support
-You can use this module through any of the common javascript module systems. For instance:
-
-```javascript
-// CommonJS style
-//grab the core
-var kute = require("kute.js");
-// Add SVG Plugin
-require("kute.js/kute-svg");
-// Add CSS Plugin
-require("kute.js/kute-css");
-// Add Attributes Plugin
-require("kute.js/kute-attr");
-// Add Text Plugin
-require("kute.js/kute-text");
-
-// AMD style
-define([
-    "kute.js", // core engine
-    "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
-], function(KUTE){
-    // your stuff happens here, for instance
-    // KUTE.fromTo('some-selector',{translateX:150}).start();
-});
-```
-
-# Basic Usage
-At a glance, you can write one line and you're done.
-```javascript
-//vanilla js
-KUTE.fromTo('selector', fromValues, toValues, options).start();
-
-//with jQuery plugin
-$('selector').fromTo(fromValues, toValues, options).start();
-```
-
-# Advanced Usage
-Quite easily, you can write 'bit more lines and you're making the earth go round.
-```javascript
-//vanilla js is always the coolest
-KUTE.fromTo(el,
-    { translate: 0, opacity: 1 }, // fromValues
-    { translate: 150, opacity: 0 }, // toValues
-    
-    // tween options object
-    { duration: 500, delay: 0, easing	: 'exponentialInOut', // basic options
-
-      // callbacks
-      start: functionOne, // run function when tween starts
-      complete: functionTwo, // run function when tween animation is finished
-      update: functionFour // run function while tween running    
-      stop: functionFive // run function when tween stopped    
-      pause: functionSix // run function when tween paused    
-      resume: functionSeven // run function when resuming tween    
-    }
-).start(); // this is to start animation right away
-```
-
-## Using the jQuery Plugin
-Here's a KUTE.js jQuery Plugin example that showcases most common usage in future apps:
-```javascript
-// first we define the object(s)
-$('selector').fromTo( // apply fromTo() method to selector
-  
-    { translate: 0, opacity: 1 }, // fromValues
-    { translate: 150, opacity: 0 }, // toValues
-    
-    // tween options object
-    { duration: 500, delay: 0, easing	: 'exponentialInOut', // basic options
-
-      //callbacks
-      start: functionOne, // run function when tween starts
-      complete: functionTwo, // run function when tween animation is finished
-      update: functionFour // run function while tween running    
-      stop: functionFive // run function when tween stopped    
-      pause: functionSix // run function when tween paused    
-      resume: functionSeven // run function when resuming tween       
-    }
-).start(); // then we apply the tween control methods, like start
-```
-
-Starting with KUTE.js 1.5.7, the jQuery Plugin got lighter and uses the proper method automatically based on how many elements are returned from selector. If one element the proper single object method is used `fromTo()` or `to()` but if more than one elements are returned it will use `allFromTo()` or `allTo()`.
-
-## Alternative usage in jQuery powered applications
-When size matters, you can handle animations inside jQuery applications without the plugin. Here's how:
-```javascript
-var tween = KUTE.fromTo($('selector')[0], fromValues, toValues, options);
-
-// or simply provide a class|id selector, just like the usual
-var tween = KUTE.fromTo('#myElement', fromValues, toValues, options);
-
-tween.start();
-```
-Pay attention to that `$('selector')[0]` as jQuery always creates an array of selected objects and not a single object, that is why we need to target a single HTML object for our tween object and not a colection of objects. 
-
-HTMLCollection objects should be handled with `allFromTo()` or `allTo()` methods.
-
-```javascript
-var tween = KUTE.allFromTo($('selector'), fromValues, toValues, options);
-tween.start();
-```
-
-# How it works
-* it computes all the values before starting the animation, then caches them to avoid layout thrashing that occur during animation
-* handles all kinds of `transform` properties and makes sure to always use the same order of the `transform` properties (`translate`, `rotate`, `skew`, `scale`)
-* allows you to set `perspective` for an element or it's parent for 3D transforms
-* computes properties' values properly according to their measurement unit (px,%,deg,etc)
-* properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent
-* converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB`
-* properly replaces `top`, `centered` or any other background position with proper value to be able to tween
-* for most supported properties it reads the current element computed style property value as initial value (via `currentStyle || getComputedStyle`)
-* because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's `.to()` method
-* allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options
-* since `translate3D` is best for movement animation performance, `kute.js` will always use it
-* accepts "nice & easy string" easing functions, like `linear` or `easingExponentialOut` (removes the use of the evil `eval`, making development safer, easier and closer to standards :)
-* uses all 31 Robert Penner's easing functions, as well as any other custom functions such as bezier and physics based easing functions
-* handles browser prefixes for you for `transform`, `perspective`, `perspective-origin` and `requestAnimationFrame`
-* all this is possible with a core script of less than 20k size!
+# Wiki
+For usage, installation and stuff like npm, visit the [wiki](https://github.com/thednp/kute.js/wiki).
 
 # Browser Support
-Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills. I also packed a small polyfill set with most essential features required by KUTE.js to work, it's called [minifill](https://github.com/thednp/minifill), try it.
+KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy browsers might some help, so give them a small polyfill set with most essential features required by KUTE.js to work, powered by [minifill](https://github.com/thednp/minifill), try it. For broader projects you might want to consider polyfills. 
 
 # Contributions
 * Dav aka [@dalisoft](https://github.com/dalisoft) contributed a great deal for the performance and functionality of KUTE.js
-* [Ingwie Phoenix](https://github.com/IngwiePhoenix): RequireJS/CommonJS compatibility and usability with common package managers
 * Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project
 
 # License
-MIT License
+[MIT License](https://github.com/thednp/kute.js/blob/master/LICENSE)
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 6298bcc..0000000
--- a/bower.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "KUTE.js",
-  "version": "1.6.7",
-  "homepage": "http://thednp.github.io/kute.js",
-  "authors": [
-    "thednp"
-  ],
-  "description": "Complete Native Javascript animation engine.",
-  "main": "kute.js",
-  "moduleType": [
-    "amd",
-    "globals",
-    "node"
-  ],
-  "keywords": [
-    "kute.js",
-    "svg morph",
-    "svg transform",
-    "tweening engine",
-    "animation engine",
-    "javascript animation engine",
-    "javascript animation",
-    "animations",
-    "native javascript"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "uglify-js": "^1.3.5"
-  }
-}
diff --git a/build.js b/build.js
deleted file mode 100644
index bdc63ad..0000000
--- a/build.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// KUTE.js | Minify
-// Minify script for the js files in root folder
-// Usage: npm run min
-// by https://github.com/RyanZim && https://github.com/thednp
-
-var fs = require('fs');
-var path = require('path');
-var uglify = require('uglify-js');
-var pack = require('./package.json');
-var version = 'v'+pack.version;
-var license = pack.license+'-License';
-
-console.log('Minifying KUTE.js ' + version + '..');
-
-// Helper Functions:
-function replaceK(s) {
-  if (/-/.test(s)) {
-    if (/attr/.test(s)) { return 'Attributes Plugin'}
-    if (/svg/.test(s)) { return 'SVG Plugin'}
-    if (/css/.test(s)) { return 'CSS Plugin'}
-    if (/text/.test(s)) { return 'Text Plugin'}
-  } else {
-    return 'Core Engine';
-  }
-}
-function minify(srcPath, writePath) {
-  fs.writeFile(writePath,
-    ('// KUTE.js ' + version + ' | © dnp_theme | ' + replaceK(srcPath)  + ' | ' + license + '\n'
-    + uglify.minify(srcPath).code), function (err) {
-    if (err) return handleError(err);
-    console.log(srcPath+' is done.');
-  });
-}
-function handleError(err) {
-  console.error(err);
-  process.exit(1);
-}
-
-// Minify files
-minify('kute-attr.js', 'dist/kute-attr.min.js');
-minify('kute-css.js', 'dist/kute-css.min.js');
-minify('kute-svg.js', 'dist/kute-svg.min.js');
-minify('kute-text.js', 'dist/kute-text.min.js');
-minify('kute.js', 'dist/kute.min.js');
-
-// Now also to the demo
-minify('kute-attr.js', 'demo/src/kute-attr.min.js');
-minify('kute-css.js', 'demo/src/kute-css.min.js');
-minify('kute-svg.js', 'demo/src/kute-svg.min.js');
-minify('kute-text.js', 'demo/src/kute-text.min.js');
-minify('kute.js', 'demo/src/kute.min.js');
diff --git a/demo/about.html b/demo/about.html
deleted file mode 100644
index 7fbb5d5..0000000
--- a/demo/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/demo/api.html b/demo/api.html
deleted file mode 100644
index 02f9287..0000000
--- a/demo/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/demo/assets/css/kute.css b/demo/assets/css/kute.css
index 0384388..7308775 100644
--- a/demo/assets/css/kute.css
+++ b/demo/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/demo/assets/img/apple-touch-icon.png b/demo/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/demo/assets/img/favicon.ico b/demo/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/demo/assets/img/favicon.png b/demo/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/demo/assets/img/home.svg b/demo/assets/img/home.svg
new file mode 100644
index 0000000..dfe389b
--- /dev/null
+++ b/demo/assets/img/home.svg
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/assets/img/ms.svg b/demo/assets/img/ms.svg
new file mode 100644
index 0000000..88df967
--- /dev/null
+++ b/demo/assets/img/ms.svg
@@ -0,0 +1,27 @@
+
+
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+
diff --git a/demo/assets/img/rectangle.svg b/demo/assets/img/rectangle.svg
new file mode 100644
index 0000000..5c14c43
--- /dev/null
+++ b/demo/assets/img/rectangle.svg
@@ -0,0 +1,9 @@
+
+
+	
+	
+
diff --git a/demo/assets/img/social.svg b/demo/assets/img/social.svg
new file mode 100644
index 0000000..bbc017e
--- /dev/null
+++ b/demo/assets/img/social.svg
@@ -0,0 +1,29 @@
+
+
+	
+	
+	
+	
+	
+	
+
+	
+	
+
diff --git a/demo/assets/js/backgroundPosition.js b/demo/assets/js/backgroundPosition.js
new file mode 100644
index 0000000..ff08225
--- /dev/null
+++ b/demo/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/demo/assets/js/borderRadius.js b/demo/assets/js/borderRadius.js
new file mode 100644
index 0000000..6aa183e
--- /dev/null
+++ b/demo/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/demo/assets/js/boxModel.js b/demo/assets/js/boxModel.js
new file mode 100644
index 0000000..bf705d6
--- /dev/null
+++ b/demo/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/demo/assets/js/clipProperty.js b/demo/assets/js/clipProperty.js
new file mode 100644
index 0000000..1af3688
--- /dev/null
+++ b/demo/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/demo/assets/js/colorProperties.js b/demo/assets/js/colorProperties.js
new file mode 100644
index 0000000..225ed6b
--- /dev/null
+++ b/demo/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/demo/assets/js/css.js b/demo/assets/js/css.js
deleted file mode 100644
index ec680a9..0000000
--- a/demo/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/demo/assets/js/easing.js b/demo/assets/js/easing.js
deleted file mode 100644
index c428f51..0000000
--- a/demo/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/demo/assets/js/attr.js b/demo/assets/js/htmlAttributes.js
similarity index 79%
rename from demo/assets/js/attr.js
rename to demo/assets/js/htmlAttributes.js
index b3fec5a..0f07c21 100644
--- a/demo/assets/js/attr.js
+++ b/demo/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/demo/assets/js/kute-bezier.min.js b/demo/assets/js/kute-bezier.min.js
deleted file mode 100644
index 4c5270b..0000000
--- a/demo/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/demo/assets/js/kute-bs.js b/demo/assets/js/kute-bs.js
deleted file mode 100644
index 3aafeea..0000000
--- a/demo/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/demo/assets/js/kute-physics.min.js b/demo/assets/js/kute-physics.min.js
deleted file mode 100644
index 592abf3..0000000
--- a/demo/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/demo/assets/js/minifill.js b/demo/assets/js/minifill.js
deleted file mode 100644
index 43d8d0e..0000000
--- a/demo/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/demo/assets/js/opacityProperty.js b/demo/assets/js/opacityProperty.js
new file mode 100644
index 0000000..40b4555
--- /dev/null
+++ b/demo/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/demo/assets/js/perf-matrix.js b/demo/assets/js/perf-matrix.js
new file mode 100644
index 0000000..db0d576
--- /dev/null
+++ b/demo/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/demo/assets/js/textProperties.js b/demo/assets/js/textProperties.js
new file mode 100644
index 0000000..89bc85b
--- /dev/null
+++ b/demo/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/demo/assets/js/textWrite.js b/demo/assets/js/textWrite.js
new file mode 100644
index 0000000..2ceb616
--- /dev/null
+++ b/demo/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/demo/assets/js/transformFunctions.js b/demo/assets/js/transformFunctions.js
new file mode 100644
index 0000000..bbeff97
--- /dev/null
+++ b/demo/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/demo/assets/js/transformMatrix.js b/demo/assets/js/transformMatrix.js
new file mode 100644
index 0000000..00f4440
--- /dev/null
+++ b/demo/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/demo/assets/js/tween.min.js b/demo/assets/js/tween.min.js
index 9c2a893..a0fb5e7 100644
--- a/demo/assets/js/tween.min.js
+++ b/demo/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/demo/attr.html b/demo/attr.html
deleted file mode 100644
index cd86a71..0000000
--- a/demo/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/demo/backgroundPosition.html b/demo/backgroundPosition.html
new file mode 100644
index 0000000..90fcd69
--- /dev/null
+++ b/demo/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/demo/borderRadius.html b/demo/borderRadius.html
new file mode 100644
index 0000000..f92e06e
--- /dev/null
+++ b/demo/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/demo/boxModel.html b/demo/boxModel.html
new file mode 100644
index 0000000..df5529d
--- /dev/null
+++ b/demo/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/demo/clipProperty.html b/demo/clipProperty.html
new file mode 100644
index 0000000..b8955fa
--- /dev/null
+++ b/demo/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/demo/colorProperties.html b/demo/colorProperties.html
new file mode 100644
index 0000000..3af958f
--- /dev/null
+++ b/demo/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/demo/css.html b/demo/css.html
deleted file mode 100644
index aeb0ca4..0000000
--- a/demo/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/demo/easing.html b/demo/easing.html
deleted file mode 100644
index b300227..0000000
--- a/demo/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/demo/examples.html b/demo/examples.html
deleted file mode 100644
index 0c83ce2..0000000
--- a/demo/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/demo/extend.html b/demo/extend.html
deleted file mode 100644
index ea24628..0000000
--- a/demo/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/demo/features.html b/demo/features.html
deleted file mode 100644
index fdcd43f..0000000
--- a/demo/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/demo/filterEffects.html b/demo/filterEffects.html
new file mode 100644
index 0000000..53d08d8
--- /dev/null
+++ b/demo/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/demo/htmlAttributes.html b/demo/htmlAttributes.html
new file mode 100644
index 0000000..522f99b
--- /dev/null
+++ b/demo/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/demo/index.html b/demo/index.html
index 35aed1f..9f1496d 100644
--- a/demo/index.html
+++ b/demo/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/demo/opacityProperty.html b/demo/opacityProperty.html
new file mode 100644
index 0000000..e928e1b
--- /dev/null
+++ b/demo/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/demo/options.html b/demo/options.html
deleted file mode 100644
index d0c5174..0000000
--- a/demo/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/demo/performance-matrix.html b/demo/performance-matrix.html
new file mode 100644
index 0000000..8fefb2c
--- /dev/null
+++ b/demo/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/demo/performance-transform.html b/demo/performance-transform.html
new file mode 100644
index 0000000..1ccd009
--- /dev/null
+++ b/demo/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/demo/performance.html b/demo/performance.html
index 3eb0b42..81dcc03 100644
--- a/demo/performance.html
+++ b/demo/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/demo/progress.html b/demo/progress.html
index 4f82c0d..a6a14a9 100644
--- a/demo/progress.html
+++ b/demo/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/demo/src/kute-attr.min.js b/demo/src/kute-attr.min.js
deleted file mode 100644
index e2fc9bc..0000000
--- a/demo/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/demo/src/kute-base.js b/demo/src/kute-base.js
new file mode 100644
index 0000000..a74afbb
--- /dev/null
+++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js
new file mode 100644
index 0000000..6f2920b
--- /dev/null
+++ b/demo/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/demo/src/kute-css.min.js b/demo/src/kute-css.min.js
deleted file mode 100644
index 16f87c8..0000000
--- a/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js
new file mode 100644
index 0000000..b785160
--- /dev/null
+++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js
new file mode 100644
index 0000000..bd4357d
--- /dev/null
+++ b/demo/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/demo/src/kute-svg.min.js b/demo/src/kute-svg.min.js
deleted file mode 100644
index 0d9e0a7..0000000
--- a/demo/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/demo/src/kute-text.min.js b/demo/src/kute-text.min.js
deleted file mode 100644
index 7456047..0000000
--- a/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index b1fe571..b4bc347 100644
--- a/demo/src/kute.min.js
+++ b/demo/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/demo/src/polyfill.min.js b/demo/src/polyfill.min.js
new file mode 100644
index 0000000..b279d33
--- /dev/null
+++ b/demo/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/demo/svg.html b/demo/svg.html
deleted file mode 100644
index 4492a3d..0000000
--- a/demo/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/demo/svgCubicMorph.html b/demo/svgCubicMorph.html
new file mode 100644
index 0000000..00f3daa
--- /dev/null
+++ b/demo/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/demo/svgDraw.html b/demo/svgDraw.html
new file mode 100644
index 0000000..0cfeb42
--- /dev/null
+++ b/demo/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/demo/svgMorph.html b/demo/svgMorph.html
new file mode 100644
index 0000000..72b3b08
--- /dev/null
+++ b/demo/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/demo/svgTransform.html b/demo/svgTransform.html
new file mode 100644
index 0000000..e2de2eb
--- /dev/null
+++ b/demo/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/demo/text.html b/demo/text.html
deleted file mode 100644
index 7e8419f..0000000
--- a/demo/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/demo/textProperties.html b/demo/textProperties.html
new file mode 100644
index 0000000..8021bec
--- /dev/null
+++ b/demo/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/demo/textWrite.html b/demo/textWrite.html
new file mode 100644
index 0000000..c10042b
--- /dev/null
+++ b/demo/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/demo/transformFunctions.html b/demo/transformFunctions.html
new file mode 100644
index 0000000..37b7e7c
--- /dev/null
+++ b/demo/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/demo/transformMatrix.html b/demo/transformMatrix.html
new file mode 100644
index 0000000..0f51f3d
--- /dev/null
+++ b/demo/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.
      •   
+        
    
+      
    
+
+      
+      
+
+    
    
+    
+
+
+
+    
+    
+
+    
+    
+    
+
+    
+    
+
+
+
diff --git a/dist/kute-attr.min.js b/dist/kute-attr.min.js
deleted file mode 100644
index e2fc9bc..0000000
--- a/dist/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/dist/kute-css.min.js b/dist/kute-css.min.js
deleted file mode 100644
index 16f87c8..0000000
--- a/dist/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/dist/kute-svg.min.js b/dist/kute-svg.min.js
deleted file mode 100644
index 0d9e0a7..0000000
--- a/dist/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/dist/kute-text.min.js b/dist/kute-text.min.js
deleted file mode 100644
index 7456047..0000000
--- a/dist/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/dist/kute.esm.js b/dist/kute.esm.js
new file mode 100644
index 0000000..fd738a9
--- /dev/null
+++ b/dist/kute.esm.js
@@ -0,0 +1,2259 @@
+/*!
+* KUTE.js Standard 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)
+*/
+var version = "2.0.0";
+
+var Tweens = [];
+var Components = {};
+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 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> 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
+};
+
+var CubicBezier = function CubicBezier(p1x, p1y, p2x, p2y, functionName) {
+  var this$1 = this;
+  this.cx = 3.0 * p1x;
+  this.bx = 3.0 * (p2x - p1x) - this.cx;
+  this.ax = 1.0 - this.cx -this.bx;
+  this.cy = 3.0 * p1y;
+  this.by = 3.0 * (p2y - p1y) - this.cy;
+  this.ay = 1.0 - this.cy - this.by;
+  var BezierEasing = function (t) { return this$1.sampleCurveY( this$1.solveCurveX(t) ); };
+  Object.defineProperty(BezierEasing, 'name', { writable: true });
+  BezierEasing.name = functionName ? functionName :("cubic-bezier(" + ([p1x, p1y, p2x, p2y]) + ")");
+  return BezierEasing
+};
+CubicBezier.prototype.sampleCurveX = function sampleCurveX (t) {
+  return ((this.ax * t + this.bx) * t + this.cx) * t;
+};
+CubicBezier.prototype.sampleCurveY = function sampleCurveY (t) {
+  return ((this.ay * t + this.by) * t + this.cy) * t;
+};
+CubicBezier.prototype.sampleCurveDerivativeX = function sampleCurveDerivativeX (t) {
+  return (3.0 * this.ax * t + 2.0 * this.bx) * t + this.cx;
+};
+CubicBezier.prototype.solveCurveX = function solveCurveX (x) {
+  var t0, t1, t2, x2, d2, i, epsilon = 1e-5;
+  for (t2 = x, i = 0; i < 32; i++) {
+    x2 = this.sampleCurveX(t2) - x;
+    if (Math.abs (x2) < epsilon)
+      { return t2; }
+    d2 = this.sampleCurveDerivativeX(t2);
+    if (Math.abs(d2) < epsilon)
+      { break; }
+    t2 = t2 - x2 / d2;
+  }
+  t0 = 0.0;
+  t1 = 1.0;
+  t2 = x;
+  if (t2 < t0) { return t0; }
+  if (t2 > 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 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 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 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
+};
+Components.BoxModelProperties = boxModelOps;
+
+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}
+};
+Components.ColorProperties = colorsOps;
+
+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 }
+};
+Components.HTMLAttributes = attrOps;
+
+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
+};
+Components.OpacityProperty = opacityOps;
+
+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 }
+};
+Components.TextWriteProperties = textWriteOps;
+
+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 getTransform(tweenProperty,value){
+  var currentStyle = getInlineStyle(this.element);
+  return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
+}
+function prepareTransform(prop,obj){
+  var prepAxis = ['X', 'Y', 'Z'],
+      translateArray = [], rotateArray = [], skewArray = [],
+      transformObject = {},
+      arrayFunctions = ['translate3d','translate','rotate3d','skew'];
+  for (var x in obj) {
+    if (arrayFunctions.includes(x)) {
+    var pv = typeof(obj[x]) === 'object' ? obj[x].map(function (v){ return parseInt(v); }) : [parseInt(obj[x]),0];
+    transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0]
+                       : [pv[0]||0, pv[1]||0,pv[2]||0];
+    } else if ( /[XYZ]/.test(x) ) {
+      var fn = x.replace(/[XYZ]/,'');
+      var fnId = fn === 'skew' ? fn : (fn + "3d");
+      var fnArray = fn === 'translate' ? translateArray
+                    : fn === 'rotate' ? rotateArray
+                    : fn === 'skew' ? skewArray : {};
+      for (var fnIndex = 0; fnIndex < 3; fnIndex++) {
+        var fnAxis = prepAxis[fnIndex];
+        fnArray[fnIndex] = (("" + fn + fnAxis) in obj) ? parseInt(obj[("" + fn + fnAxis)]) : 0;
+      }
+      transformObject[fnId] = fnArray;
+    } else {
+      transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x]);
+    }
+  }
+  return transformObject;
+}
+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):'');
+    };
+  }
+}
+function crossCheckTransform(tweenProp){
+  if (this.valuesEnd[tweenProp]) {
+    if ( this.valuesEnd[tweenProp] ) {
+      if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
+        this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective;
+      }
+    }
+  }
+}
+var transformFunctions = {
+  prepareStart: getTransform,
+  prepareProperty: prepareTransform,
+  onStart: onStartTransform,
+  crossCheck: crossCheckTransform
+};
+var supportedTransformProperties = [
+  'perspective',
+  'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
+  'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
+  'skewX', 'skewY', 'skew',
+  'scale'
+];
+var defaultTransformValues = {
+  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
+};
+var transformOps = {
+  component: 'transformFunctions',
+  property: 'transform',
+  subProperties: supportedTransformProperties,
+  defaultValues: defaultTransformValues,
+  functions: transformFunctions,
+  Interpolate: {
+    perspective: perspective,
+    translate3d: translate3d,
+    rotate3d: rotate3d,
+    translate: translate, rotate: rotate, scale: scale, skew: skew
+  },
+};
+Components.TransformFunctions = transformOps;
+
+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 }
+};
+Components.ScrollProperty = scrollOps;
+
+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
+  }
+};
+Components.SVGDraw = svgDrawOps;
+
+function coords (a, b, l, v) {
+  var points = [];
+  for(var i=0;i> 0)/1000 );
+    }
+  }
+  return points;
+}
+var INVALID_INPUT = 'Invalid path value';
+function isFiniteNumber(number) {
+  return typeof number === "number" && isFinite(number);
+}
+function distance(a, b) {
+  return Math.sqrt(
+    (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])
+  );
+}
+function pointAlong(a, b, pct) {
+  return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct];
+}
+function samePoint(a, b) {
+  return distance(a, b) < 1e-9;
+}
+var paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0 };
+var SPECIAL_SPACES = [
+  0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006,
+  0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF
+];
+function isSpace(ch) {
+  return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029) ||
+    (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) ||
+    (ch >= 0x1680 && SPECIAL_SPACES.indexOf(ch) >= 0);
+}
+function isCommand(code) {
+  switch (code | 0x20) {
+    case 0x6D:
+    case 0x7A:
+    case 0x6C:
+    case 0x68:
+    case 0x76:
+    case 0x63:
+    case 0x73:
+    case 0x71:
+    case 0x74:
+    case 0x61:
+    case 0x72:
+      return true;
+  }
+  return false;
+}
+function isArc(code) {
+  return (code | 0x20) === 0x61;
+}
+function isDigit(code) {
+  return (code >= 48 && code <= 57);
+}
+function isDigitStart(code) {
+  return (code >= 48 && code <= 57) ||
+          code === 0x2B ||
+          code === 0x2D ||
+          code === 0x2E;
+}
+function State(path) {
+  this.index  = 0;
+  this.path   = path;
+  this.max    = path.length;
+  this.result = [];
+  this.param  = 0.0;
+  this.err    = '';
+  this.segmentStart = 0;
+  this.data   = [];
+}
+function skipSpaces(state) {
+  while (state.index < state.max && isSpace(state.path.charCodeAt(state.index))) {
+    state.index++;
+  }
+}
+function scanFlag(state) {
+  var ch = state.path.charCodeAt(state.index);
+  if (ch === 0x30) {
+    state.param = 0;
+    state.index++;
+    return;
+  }
+  if (ch === 0x31) {
+    state.param = 1;
+    state.index++;
+    return;
+  }
+  state.err = "KUTE.js - " + INVALID_INPUT;
+}
+function scanParam(state) {
+  var start = state.index,
+      index = start,
+      max = state.max,
+      zeroFirst = false,
+      hasCeiling = false,
+      hasDecimal = false,
+      hasDot = false,
+      ch;
+  if (index >= max) {
+    state.err = "KUTE.js - " + INVALID_INPUT;
+    return;
+  }
+  ch = state.path.charCodeAt(index);
+  if (ch === 0x2B || ch === 0x2D) {
+    index++;
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+  }
+  if (!isDigit(ch) && ch !== 0x2E) {
+    state.err = "KUTE.js - " + INVALID_INPUT;
+    return;
+  }
+  if (ch !== 0x2E) {
+    zeroFirst = (ch === 0x30);
+    index++;
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+    if (zeroFirst && index < max) {
+      if (ch && isDigit(ch)) {
+        state.err = "KUTE.js - " + INVALID_INPUT;
+        return;
+      }
+    }
+    while (index < max && isDigit(state.path.charCodeAt(index))) {
+      index++;
+      hasCeiling = true;
+    }
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+  }
+  if (ch === 0x2E) {
+    hasDot = true;
+    index++;
+    while (isDigit(state.path.charCodeAt(index))) {
+      index++;
+      hasDecimal = true;
+    }
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+  }
+  if (ch === 0x65 || ch === 0x45) {
+    if (hasDot && !hasCeiling && !hasDecimal) {
+      state.err = "KUTE.js - " + INVALID_INPUT;
+      return;
+    }
+    index++;
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+    if (ch === 0x2B || ch === 0x2D) {
+      index++;
+    }
+    if (index < max && isDigit(state.path.charCodeAt(index))) {
+      while (index < max && isDigit(state.path.charCodeAt(index))) {
+        index++;
+      }
+    } else {
+      state.err = "KUTE.js - " + INVALID_INPUT;
+      return;
+    }
+  }
+  state.index = index;
+  state.param = parseFloat(state.path.slice(start, index)) + 0.0;
+}
+function finalizeSegment(state) {
+  var cmd, cmdLC;
+  cmd   = state.path[state.segmentStart];
+  cmdLC = cmd.toLowerCase();
+  var params = state.data;
+  if (cmdLC === 'm' && params.length > 2) {
+    state.result.push([ cmd, params[0], params[1] ]);
+    params = params.slice(2);
+    cmdLC = 'l';
+    cmd = (cmd === 'm') ? 'l' : 'L';
+  }
+  if (cmdLC === 'r') {
+    state.result.push([ cmd ].concat(params));
+  } else {
+    while (params.length >= paramCounts[cmdLC]) {
+      state.result.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC])));
+      if (!paramCounts[cmdLC]) {
+        break;
+      }
+    }
+  }
+}
+function scanSegment(state) {
+  var max = state.max, cmdCode, is_arc, comma_found, need_params, i;
+  state.segmentStart = state.index;
+  cmdCode = state.path.charCodeAt(state.index);
+  is_arc = isArc(cmdCode);
+  if (!isCommand(cmdCode)) {
+    state.err = "KUTE.js - " + INVALID_INPUT;
+    return;
+  }
+  need_params = paramCounts[state.path[state.index].toLowerCase()];
+  state.index++;
+  skipSpaces(state);
+  state.data = [];
+  if (!need_params) {
+    finalizeSegment(state);
+    return;
+  }
+  comma_found = false;
+  for (;;) {
+    for (i = need_params; i > 0; i--) {
+      if (is_arc && (i === 3 || i === 4)) { scanFlag(state); }
+      else { scanParam(state); }
+      if (state.err.length) {
+        return;
+      }
+      state.data.push(state.param);
+      skipSpaces(state);
+      comma_found = false;
+      if (state.index < max && state.path.charCodeAt(state.index) === 0x2C) {
+        state.index++;
+        skipSpaces(state);
+        comma_found = true;
+      }
+    }
+    if (comma_found) {
+      continue;
+    }
+    if (state.index >= state.max) {
+      break;
+    }
+    if (!isDigitStart(state.path.charCodeAt(state.index))) {
+      break;
+    }
+  }
+  finalizeSegment(state);
+}
+function pathParse(svgPath) {
+  var state = new State(svgPath), max = state.max;
+  skipSpaces(state);
+  while (state.index < max && !state.err.length) {
+    scanSegment(state);
+  }
+  if (state.err.length) {
+    state.result = [];
+  } else if (state.result.length) {
+    if ('mM'.indexOf(state.result[0][0]) < 0) {
+      state.err = "KUTE.js - " + INVALID_INPUT;
+      state.result = [];
+    } else {
+      state.result[0][0] = 'M';
+    }
+  }
+  return {
+    err: state.err,
+    segments: state.result
+  };
+}var SvgPath = function SvgPath(path){
+  if (!(this instanceof SvgPath)) { return new SvgPath(path); }
+  var pstate = pathParse(path);
+  this.segments = pstate.segments;
+  this.err    = pstate.err;
+};
+SvgPath.prototype.iterate = function iterate (iterator) {
+  var segments = this.segments,
+      replacements = {},
+      needReplace = false,
+      lastX = 0,
+      lastY = 0,
+      countourStartX = 0,
+      countourStartY = 0,
+      newSegments;
+  segments.map( function (s,index) {
+    var res = iterator(s, index, lastX, lastY);
+    if (Array.isArray(res)) {
+      replacements[index] = res;
+      needReplace = true;
+    }
+    var isRelative = (s[0] === s[0].toLowerCase());
+    switch (s[0]) {
+      case 'm':
+      case 'M':
+        lastX = s[1] + (isRelative ? lastX : 0);
+        lastY = s[2] + (isRelative ? lastY : 0);
+        countourStartX = lastX;
+        countourStartY = lastY;
+        return;
+      case 'h':
+      case 'H':
+        lastX = s[1] + (isRelative ? lastX : 0);
+        return;
+      case 'v':
+      case 'V':
+        lastY = s[1] + (isRelative ? lastY : 0);
+        return;
+      case 'z':
+      case 'Z':
+        lastX = countourStartX;
+        lastY = countourStartY;
+        return;
+      default:
+        lastX = s[s.length - 2] + (isRelative ? lastX : 0);
+        lastY = s[s.length - 1] + (isRelative ? lastY : 0);
+    }
+  });
+  if (!needReplace) { return this; }
+  newSegments = [];
+  segments.map(function (s,i){
+    if (typeof replacements[i] !== 'undefined') {
+      replacements[i].map(function (r){
+        newSegments.push(r);
+      });
+    } else {
+      newSegments.push(s);
+    }
+  });
+  this.segments = newSegments;
+  return this;
+};
+SvgPath.prototype.abs = function abs () {
+  this.iterate(function (s, index, x, y) {
+    var name = s[0],
+        nameUC = name.toUpperCase(),
+        i;
+    if (name === nameUC) { return; }
+    s[0] = nameUC;
+    switch (name) {
+      case 'v':
+        s[1] += y;
+        return;
+      case 'a':
+        s[6] += x;
+        s[7] += y;
+        return;
+      default:
+        for (i = 1; i < s.length; i++) {
+          s[i] += i % 2 ? x : y;
+        }
+    }
+  }, true);
+  return this;
+};
+SvgPath.prototype.toString = function toString () {
+    var this$1 = this;
+  var elements = [], skipCmd, cmd;
+  this.segments.map( function (s,i) {
+    cmd = s[0];
+    skipCmd = i > 0 && cmd !== 'm' && cmd !== 'M' && cmd === this$1.segments[i - 1][0];
+    elements = elements.concat(skipCmd ? s.slice(1) : s);
+  });
+  return elements.join(' ')
+    .replace(/ ?([achlmqrstvz]) ?/gi, '$1')
+    .replace(/ \-/g, '-')
+    .replace(/zm/g, 'z m');
+};
+function split(parsed) {
+  return parsed
+    .toString()
+    .split("M")
+    .map(function (d, i) {
+      d = d.trim();
+      return i && d ? "M" + d : d;
+    })
+    .filter(function (d) { return d; });
+}
+function pathStringToRing(str, maxSegmentLength) {
+  var parsed = new SvgPath(str).abs();
+  return exactRing(parsed) || approximateRing(parsed, maxSegmentLength);
+}
+function exactRing(parsed) {
+  var segments = parsed.segments || [],
+    ring = [];
+  if (!segments.length || segments[0][0] !== "M") {
+    return false;
+  }
+  for (var i = 0; i < segments.length; i++) {
+    var ref = segments[i];
+    var command = ref[0];
+    var x = ref[1];
+    var y = ref[2];
+    if ((command === "M" && i) || command === "Z") {
+      break;
+    } else if (command === "M" || command === "L") {
+      ring.push([x, y]);
+    } else if (command === "H") {
+      ring.push([x, ring[ring.length - 1][1]]);
+    } else if (command === "V") {
+      ring.push([ring[ring.length - 1][0], x]);
+    } else {
+      return false;
+    }
+  }
+  return ring.length ? { ring: ring } : false;
+}
+function approximateRing(parsed, maxSegmentLength) {
+  var ringPath = split(parsed)[0], ring = [], len, testPath, numPoints = 3;
+  if (!ringPath) {
+    throw new TypeError(INVALID_INPUT);
+  }
+  testPath = measure(ringPath);
+  len = testPath.getTotalLength();
+  if (
+    maxSegmentLength &&
+    isFiniteNumber(maxSegmentLength) &&
+    maxSegmentLength > 0
+  ) {
+    numPoints = Math.max(numPoints, Math.ceil(len / maxSegmentLength));
+  }
+  for (var i = 0; i < numPoints; i++) {
+    var p = testPath.getPointAtLength((len * i) / numPoints);
+    ring.push([p.x, p.y]);
+  }
+  return {
+    ring: ring,
+    skipBisect: true
+  };
+}
+function measure(d) {
+  try {
+    var path = document.createElementNS('http://www.w3.org/2000/svg',"path");
+    path.setAttributeNS(null, "d", d);
+    return path;
+  } catch (e) {}
+  return false;
+}
+function rotateRing(ring, vs) {
+  var len = ring.length, min = Infinity, bestOffset, sumOfSquares, spliced;
+  var loop = function ( offset ) {
+    sumOfSquares = 0;
+    vs.forEach(function(p, i) {
+      var d = distance(ring[(offset + i) % len], p);
+      sumOfSquares += d * d;
+    });
+    if (sumOfSquares < min) {
+      min = sumOfSquares;
+      bestOffset = offset;
+    }
+  };
+  for (var offset = 0; offset < len; offset++) loop( offset );
+  if (bestOffset) {
+    spliced = ring.splice(0, bestOffset);
+    ring.splice.apply(ring, [ ring.length, 0 ].concat( spliced ));
+  }
+}
+function polygonLength(polygon) {
+  var i = -1, n = polygon.length, b = polygon[n - 1],
+      xa, ya, xb = b[0], yb = b[1], perimeter = 0;
+  while (++i < n) {
+    xa = xb;
+    ya = yb;
+    b = polygon[i];
+    xb = b[0];
+    yb = b[1];
+    xa -= xb;
+    ya -= yb;
+    perimeter += Math.sqrt(xa * xa + ya * ya);
+  }
+  return perimeter;
+}
+function polygonArea(polygon) {
+  var i = -1, n = polygon.length, a, b = polygon[n - 1], area = 0;
+  while (++i < n) {
+    a = b;
+    b = polygon[i];
+    area += a[1] * b[0] - a[0] * b[1];
+  }
+  return area / 2;
+}
+function addPoints(ring, numPoints) {
+  var desiredLength = ring.length + numPoints,
+        step = polygonLength(ring) / numPoints;
+  var i = 0, cursor = 0, insertAt = step / 2;
+  while (ring.length < desiredLength) {
+    var a = ring[i], b = ring[(i + 1) % ring.length], segment = distance(a, b);
+    if (insertAt <= cursor + segment) {
+      ring.splice( i + 1, 0, segment ? pointAlong(a, b, (insertAt - cursor) / segment) : a.slice(0) );
+      insertAt += step;
+      continue;
+    }
+    cursor += segment;
+    i++;
+  }
+}
+function bisect(ring, maxSegmentLength) {
+  if ( maxSegmentLength === void 0 ) maxSegmentLength = Infinity;
+  for (var i = 0; i < ring.length; i++) {
+    var a = ring[i], b = i === ring.length - 1 ? ring[0] : ring[i + 1];
+    while (distance(a, b) > maxSegmentLength) {
+      b = pointAlong(a, b, 0.5);
+      ring.splice(i + 1, 0, b);
+    }
+  }
+}
+function normalizeRing(ring, maxSegmentLength) {
+  var points, area, skipBisect;
+  if (typeof ring === "string") {
+    var converted = pathStringToRing(ring, maxSegmentLength);
+    ring = converted.ring;
+    skipBisect = converted.skipBisect;
+  } else if (!Array.isArray(ring)) {
+    throw new TypeError(INVALID_INPUT);
+  }
+  points = ring.slice(0);
+  if (!validRing(points)) {
+    throw new TypeError(INVALID_INPUT);
+  }
+  if (points.length > 1 && samePoint(points[0], points[points.length - 1])) {
+    points.pop();
+  }
+  area = polygonArea(points);
+  if (area > 0) {
+    points.reverse();
+  }
+  if (
+    !skipBisect &&
+    maxSegmentLength &&
+    isFiniteNumber(maxSegmentLength) &&
+    maxSegmentLength > 0
+  ) {
+    bisect(points, maxSegmentLength);
+  }
+  return points;
+}
+function validRing(ring) {
+  return ring.every(function(point) {
+    return (
+      Array.isArray(point) &&
+      point.length >= 2 &&
+      isFiniteNumber(point[0]) &&
+      isFiniteNumber(point[1])
+    );
+  });
+}
+function getInterpolationPoints(fromShape, toShape, morphPrecision) {
+  morphPrecision = morphPrecision || defaultOptions.morphPrecision;
+  var fromRing = normalizeRing(fromShape, morphPrecision),
+      toRing = normalizeRing(toShape, morphPrecision),
+      diff = fromRing.length - toRing.length;
+  addPoints(fromRing, diff < 0 ? diff * -1 : 0);
+  addPoints(toRing, diff > 0 ? diff : 0);
+  rotateRing(fromRing, toRing);
+  return [fromRing,toRing]
+}
+function getSVGMorph(tweenProp){
+  return this.element.getAttribute('d');
+}
+function prepareSVGMorph(tweenProp,value){
+  var pathObject = {}, elem = value instanceof Element ? value : /^\.|^\#/.test(value) ? selector(value) : null,
+        pathReg = new RegExp('\\n','ig');
+  if ( typeof(value) === 'object' && value.pathArray ) {
+    return value;
+  } else if ( elem && /path|glyph/.test(elem.tagName) ) {
+    pathObject.original = elem.getAttribute('d').replace(pathReg,'');
+  } else if ( !elem && /[a-z][^a-z]*/ig.test(value) ) {
+    pathObject.original = value.replace(pathReg,'');
+  }
+  return pathObject;
+}
+function onStartSVGMorph(tweenProp){
+  if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+    KUTE[tweenProp] = function (elem, a, b, v) {
+      var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
+      pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z");
+      elem.setAttribute("d", pathString );
+    };
+  }
+}
+function crossCheckSVGMorph(prop){
+  if ( this.valuesEnd[prop]){
+    var pathArray1 = this.valuesStart[prop].pathArray,
+        pathArray2 = this.valuesEnd[prop].pathArray;
+    if ( !pathArray1 || !pathArray2 || pathArray1 && pathArray2 && pathArray1.length !== pathArray2.length ) {
+      var p1 = this.valuesStart[prop].original,
+          p2 = this.valuesEnd[prop].original,
+          morphPrecision = this._morphPrecision ? parseInt(this._morphPrecision) : defaultOptions.morphPrecision,
+          paths = getInterpolationPoints(p1,p2,morphPrecision);
+      this.valuesStart[prop].pathArray = paths[0];
+      this.valuesEnd[prop].pathArray = paths[1];
+    }
+  }
+}
+var svgMorphFunctions = {
+  prepareStart: getSVGMorph,
+  prepareProperty: prepareSVGMorph,
+  onStart: onStartSVGMorph,
+  crossCheck: crossCheckSVGMorph
+};
+var svgMorphOps = {
+  component: 'svgMorph',
+  property: 'path',
+  defaultValue: [],
+  Interpolate: coords,
+  defaultOptions: {morphPrecision : 10, morphIndex:0},
+  functions: svgMorphFunctions,
+  Util: {
+    INVALID_INPUT: INVALID_INPUT,isFiniteNumber: isFiniteNumber,distance: distance,pointAlong: pointAlong,samePoint: samePoint,paramCounts: paramCounts,SPECIAL_SPACES: SPECIAL_SPACES,isSpace: isSpace,isCommand: isCommand,isArc: isArc,isDigit: isDigit,
+    isDigitStart: isDigitStart,State: State,skipSpaces: skipSpaces,scanFlag: scanFlag,scanParam: scanParam,finalizeSegment: finalizeSegment,scanSegment: scanSegment,pathParse: pathParse,SvgPath: SvgPath,split: split,pathStringToRing: pathStringToRing,
+    exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea,addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints}
+};
+Components.SVGMorph = svgMorphOps;
+
+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 }
+};
+Components.SVGTransformProperty = svgTransformOps;
+
+for (var component in Components) {
+  var compOps = Components[component];
+  Components[component] = new Animation(compOps);
+}
+var index = {
+  Animation: Animation,
+  Components: Components,
+  Tween: Tween,
+  fromTo: fromTo,
+  to: to,
+  TweenCollection: TweenCollection,
+  allFromTo: allFromTo,
+  allTo: allTo,
+  Objects: Objects,
+  Util: Util,
+  Easing: Easing,
+  CubicBezier: CubicBezier,
+  Render: Render,
+  Interpolate: Interpolate,
+  Process: Process,
+  Internals: Internals,
+  Selector: selector,
+  Version: version
+};
+
+export default index;
diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js
new file mode 100644
index 0000000..e30d736
--- /dev/null
+++ b/dist/kute.esm.min.js
@@ -0,0 +1,2 @@
+// KUTE.js Standard v2.0.0 | thednp © 2020 | MIT-License
+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(w.call(this,a,"end"),this._resetStart?this.valuesStart=n:w.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 w in t.functions[y])!h[y][e]&&(h[y][e]={}),!h[y][e][w]&&(h[y][e][w]=t.functions[y][w]);if(t.Interpolate){for(var b in t.Interpolate){var T=t.Interpolate[b];if("function"!=typeof T||E[b])for(var S in T)"function"!=typeof T[S]||E[b]||(E[b]=T[S]);else E[b]=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 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=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?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&&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=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)?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: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:_},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)}var Xe={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:b,Internals:U,Selector:N,Version:"2.0.0"};export default Xe;
diff --git a/dist/kute.js b/dist/kute.js
new file mode 100644
index 0000000..a9d6442
--- /dev/null
+++ b/dist/kute.js
@@ -0,0 +1,2267 @@
+/*!
+* KUTE.js Standard 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 Components = {};
+  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 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> 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
+  };
+
+  var CubicBezier = function CubicBezier(p1x, p1y, p2x, p2y, functionName) {
+    var this$1 = this;
+    this.cx = 3.0 * p1x;
+    this.bx = 3.0 * (p2x - p1x) - this.cx;
+    this.ax = 1.0 - this.cx -this.bx;
+    this.cy = 3.0 * p1y;
+    this.by = 3.0 * (p2y - p1y) - this.cy;
+    this.ay = 1.0 - this.cy - this.by;
+    var BezierEasing = function (t) { return this$1.sampleCurveY( this$1.solveCurveX(t) ); };
+    Object.defineProperty(BezierEasing, 'name', { writable: true });
+    BezierEasing.name = functionName ? functionName :("cubic-bezier(" + ([p1x, p1y, p2x, p2y]) + ")");
+    return BezierEasing
+  };
+  CubicBezier.prototype.sampleCurveX = function sampleCurveX (t) {
+    return ((this.ax * t + this.bx) * t + this.cx) * t;
+  };
+  CubicBezier.prototype.sampleCurveY = function sampleCurveY (t) {
+    return ((this.ay * t + this.by) * t + this.cy) * t;
+  };
+  CubicBezier.prototype.sampleCurveDerivativeX = function sampleCurveDerivativeX (t) {
+    return (3.0 * this.ax * t + 2.0 * this.bx) * t + this.cx;
+  };
+  CubicBezier.prototype.solveCurveX = function solveCurveX (x) {
+    var t0, t1, t2, x2, d2, i, epsilon = 1e-5;
+    for (t2 = x, i = 0; i < 32; i++) {
+      x2 = this.sampleCurveX(t2) - x;
+      if (Math.abs (x2) < epsilon)
+        { return t2; }
+      d2 = this.sampleCurveDerivativeX(t2);
+      if (Math.abs(d2) < epsilon)
+        { break; }
+      t2 = t2 - x2 / d2;
+    }
+    t0 = 0.0;
+    t1 = 1.0;
+    t2 = x;
+    if (t2 < t0) { return t0; }
+    if (t2 > 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 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 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 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
+  };
+  Components.BoxModelProperties = boxModelOps;
+
+  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}
+  };
+  Components.ColorProperties = colorsOps;
+
+  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 }
+  };
+  Components.HTMLAttributes = attrOps;
+
+  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
+  };
+  Components.OpacityProperty = opacityOps;
+
+  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 }
+  };
+  Components.TextWriteProperties = textWriteOps;
+
+  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 getTransform(tweenProperty,value){
+    var currentStyle = getInlineStyle(this.element);
+    return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
+  }
+  function prepareTransform(prop,obj){
+    var prepAxis = ['X', 'Y', 'Z'],
+        translateArray = [], rotateArray = [], skewArray = [],
+        transformObject = {},
+        arrayFunctions = ['translate3d','translate','rotate3d','skew'];
+    for (var x in obj) {
+      if (arrayFunctions.includes(x)) {
+      var pv = typeof(obj[x]) === 'object' ? obj[x].map(function (v){ return parseInt(v); }) : [parseInt(obj[x]),0];
+      transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0]
+                         : [pv[0]||0, pv[1]||0,pv[2]||0];
+      } else if ( /[XYZ]/.test(x) ) {
+        var fn = x.replace(/[XYZ]/,'');
+        var fnId = fn === 'skew' ? fn : (fn + "3d");
+        var fnArray = fn === 'translate' ? translateArray
+                      : fn === 'rotate' ? rotateArray
+                      : fn === 'skew' ? skewArray : {};
+        for (var fnIndex = 0; fnIndex < 3; fnIndex++) {
+          var fnAxis = prepAxis[fnIndex];
+          fnArray[fnIndex] = (("" + fn + fnAxis) in obj) ? parseInt(obj[("" + fn + fnAxis)]) : 0;
+        }
+        transformObject[fnId] = fnArray;
+      } else {
+        transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x]);
+      }
+    }
+    return transformObject;
+  }
+  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):'');
+      };
+    }
+  }
+  function crossCheckTransform(tweenProp){
+    if (this.valuesEnd[tweenProp]) {
+      if ( this.valuesEnd[tweenProp] ) {
+        if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
+          this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective;
+        }
+      }
+    }
+  }
+  var transformFunctions = {
+    prepareStart: getTransform,
+    prepareProperty: prepareTransform,
+    onStart: onStartTransform,
+    crossCheck: crossCheckTransform
+  };
+  var supportedTransformProperties = [
+    'perspective',
+    'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
+    'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
+    'skewX', 'skewY', 'skew',
+    'scale'
+  ];
+  var defaultTransformValues = {
+    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
+  };
+  var transformOps = {
+    component: 'transformFunctions',
+    property: 'transform',
+    subProperties: supportedTransformProperties,
+    defaultValues: defaultTransformValues,
+    functions: transformFunctions,
+    Interpolate: {
+      perspective: perspective,
+      translate3d: translate3d,
+      rotate3d: rotate3d,
+      translate: translate, rotate: rotate, scale: scale, skew: skew
+    },
+  };
+  Components.TransformFunctions = transformOps;
+
+  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 }
+  };
+  Components.ScrollProperty = scrollOps;
+
+  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
+    }
+  };
+  Components.SVGDraw = svgDrawOps;
+
+  function coords (a, b, l, v) {
+    var points = [];
+    for(var i=0;i> 0)/1000 );
+      }
+    }
+    return points;
+  }
+  var INVALID_INPUT = 'Invalid path value';
+  function isFiniteNumber(number) {
+    return typeof number === "number" && isFinite(number);
+  }
+  function distance(a, b) {
+    return Math.sqrt(
+      (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])
+    );
+  }
+  function pointAlong(a, b, pct) {
+    return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct];
+  }
+  function samePoint(a, b) {
+    return distance(a, b) < 1e-9;
+  }
+  var paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0 };
+  var SPECIAL_SPACES = [
+    0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006,
+    0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF
+  ];
+  function isSpace(ch) {
+    return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029) ||
+      (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) ||
+      (ch >= 0x1680 && SPECIAL_SPACES.indexOf(ch) >= 0);
+  }
+  function isCommand(code) {
+    switch (code | 0x20) {
+      case 0x6D:
+      case 0x7A:
+      case 0x6C:
+      case 0x68:
+      case 0x76:
+      case 0x63:
+      case 0x73:
+      case 0x71:
+      case 0x74:
+      case 0x61:
+      case 0x72:
+        return true;
+    }
+    return false;
+  }
+  function isArc(code) {
+    return (code | 0x20) === 0x61;
+  }
+  function isDigit(code) {
+    return (code >= 48 && code <= 57);
+  }
+  function isDigitStart(code) {
+    return (code >= 48 && code <= 57) ||
+            code === 0x2B ||
+            code === 0x2D ||
+            code === 0x2E;
+  }
+  function State(path) {
+    this.index  = 0;
+    this.path   = path;
+    this.max    = path.length;
+    this.result = [];
+    this.param  = 0.0;
+    this.err    = '';
+    this.segmentStart = 0;
+    this.data   = [];
+  }
+  function skipSpaces(state) {
+    while (state.index < state.max && isSpace(state.path.charCodeAt(state.index))) {
+      state.index++;
+    }
+  }
+  function scanFlag(state) {
+    var ch = state.path.charCodeAt(state.index);
+    if (ch === 0x30) {
+      state.param = 0;
+      state.index++;
+      return;
+    }
+    if (ch === 0x31) {
+      state.param = 1;
+      state.index++;
+      return;
+    }
+    state.err = "KUTE.js - " + INVALID_INPUT;
+  }
+  function scanParam(state) {
+    var start = state.index,
+        index = start,
+        max = state.max,
+        zeroFirst = false,
+        hasCeiling = false,
+        hasDecimal = false,
+        hasDot = false,
+        ch;
+    if (index >= max) {
+      state.err = "KUTE.js - " + INVALID_INPUT;
+      return;
+    }
+    ch = state.path.charCodeAt(index);
+    if (ch === 0x2B || ch === 0x2D) {
+      index++;
+      ch = (index < max) ? state.path.charCodeAt(index) : 0;
+    }
+    if (!isDigit(ch) && ch !== 0x2E) {
+      state.err = "KUTE.js - " + INVALID_INPUT;
+      return;
+    }
+    if (ch !== 0x2E) {
+      zeroFirst = (ch === 0x30);
+      index++;
+      ch = (index < max) ? state.path.charCodeAt(index) : 0;
+      if (zeroFirst && index < max) {
+        if (ch && isDigit(ch)) {
+          state.err = "KUTE.js - " + INVALID_INPUT;
+          return;
+        }
+      }
+      while (index < max && isDigit(state.path.charCodeAt(index))) {
+        index++;
+        hasCeiling = true;
+      }
+      ch = (index < max) ? state.path.charCodeAt(index) : 0;
+    }
+    if (ch === 0x2E) {
+      hasDot = true;
+      index++;
+      while (isDigit(state.path.charCodeAt(index))) {
+        index++;
+        hasDecimal = true;
+      }
+      ch = (index < max) ? state.path.charCodeAt(index) : 0;
+    }
+    if (ch === 0x65 || ch === 0x45) {
+      if (hasDot && !hasCeiling && !hasDecimal) {
+        state.err = "KUTE.js - " + INVALID_INPUT;
+        return;
+      }
+      index++;
+      ch = (index < max) ? state.path.charCodeAt(index) : 0;
+      if (ch === 0x2B || ch === 0x2D) {
+        index++;
+      }
+      if (index < max && isDigit(state.path.charCodeAt(index))) {
+        while (index < max && isDigit(state.path.charCodeAt(index))) {
+          index++;
+        }
+      } else {
+        state.err = "KUTE.js - " + INVALID_INPUT;
+        return;
+      }
+    }
+    state.index = index;
+    state.param = parseFloat(state.path.slice(start, index)) + 0.0;
+  }
+  function finalizeSegment(state) {
+    var cmd, cmdLC;
+    cmd   = state.path[state.segmentStart];
+    cmdLC = cmd.toLowerCase();
+    var params = state.data;
+    if (cmdLC === 'm' && params.length > 2) {
+      state.result.push([ cmd, params[0], params[1] ]);
+      params = params.slice(2);
+      cmdLC = 'l';
+      cmd = (cmd === 'm') ? 'l' : 'L';
+    }
+    if (cmdLC === 'r') {
+      state.result.push([ cmd ].concat(params));
+    } else {
+      while (params.length >= paramCounts[cmdLC]) {
+        state.result.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC])));
+        if (!paramCounts[cmdLC]) {
+          break;
+        }
+      }
+    }
+  }
+  function scanSegment(state) {
+    var max = state.max, cmdCode, is_arc, comma_found, need_params, i;
+    state.segmentStart = state.index;
+    cmdCode = state.path.charCodeAt(state.index);
+    is_arc = isArc(cmdCode);
+    if (!isCommand(cmdCode)) {
+      state.err = "KUTE.js - " + INVALID_INPUT;
+      return;
+    }
+    need_params = paramCounts[state.path[state.index].toLowerCase()];
+    state.index++;
+    skipSpaces(state);
+    state.data = [];
+    if (!need_params) {
+      finalizeSegment(state);
+      return;
+    }
+    comma_found = false;
+    for (;;) {
+      for (i = need_params; i > 0; i--) {
+        if (is_arc && (i === 3 || i === 4)) { scanFlag(state); }
+        else { scanParam(state); }
+        if (state.err.length) {
+          return;
+        }
+        state.data.push(state.param);
+        skipSpaces(state);
+        comma_found = false;
+        if (state.index < max && state.path.charCodeAt(state.index) === 0x2C) {
+          state.index++;
+          skipSpaces(state);
+          comma_found = true;
+        }
+      }
+      if (comma_found) {
+        continue;
+      }
+      if (state.index >= state.max) {
+        break;
+      }
+      if (!isDigitStart(state.path.charCodeAt(state.index))) {
+        break;
+      }
+    }
+    finalizeSegment(state);
+  }
+  function pathParse(svgPath) {
+    var state = new State(svgPath), max = state.max;
+    skipSpaces(state);
+    while (state.index < max && !state.err.length) {
+      scanSegment(state);
+    }
+    if (state.err.length) {
+      state.result = [];
+    } else if (state.result.length) {
+      if ('mM'.indexOf(state.result[0][0]) < 0) {
+        state.err = "KUTE.js - " + INVALID_INPUT;
+        state.result = [];
+      } else {
+        state.result[0][0] = 'M';
+      }
+    }
+    return {
+      err: state.err,
+      segments: state.result
+    };
+  }var SvgPath = function SvgPath(path){
+    if (!(this instanceof SvgPath)) { return new SvgPath(path); }
+    var pstate = pathParse(path);
+    this.segments = pstate.segments;
+    this.err    = pstate.err;
+  };
+  SvgPath.prototype.iterate = function iterate (iterator) {
+    var segments = this.segments,
+        replacements = {},
+        needReplace = false,
+        lastX = 0,
+        lastY = 0,
+        countourStartX = 0,
+        countourStartY = 0,
+        newSegments;
+    segments.map( function (s,index) {
+      var res = iterator(s, index, lastX, lastY);
+      if (Array.isArray(res)) {
+        replacements[index] = res;
+        needReplace = true;
+      }
+      var isRelative = (s[0] === s[0].toLowerCase());
+      switch (s[0]) {
+        case 'm':
+        case 'M':
+          lastX = s[1] + (isRelative ? lastX : 0);
+          lastY = s[2] + (isRelative ? lastY : 0);
+          countourStartX = lastX;
+          countourStartY = lastY;
+          return;
+        case 'h':
+        case 'H':
+          lastX = s[1] + (isRelative ? lastX : 0);
+          return;
+        case 'v':
+        case 'V':
+          lastY = s[1] + (isRelative ? lastY : 0);
+          return;
+        case 'z':
+        case 'Z':
+          lastX = countourStartX;
+          lastY = countourStartY;
+          return;
+        default:
+          lastX = s[s.length - 2] + (isRelative ? lastX : 0);
+          lastY = s[s.length - 1] + (isRelative ? lastY : 0);
+      }
+    });
+    if (!needReplace) { return this; }
+    newSegments = [];
+    segments.map(function (s,i){
+      if (typeof replacements[i] !== 'undefined') {
+        replacements[i].map(function (r){
+          newSegments.push(r);
+        });
+      } else {
+        newSegments.push(s);
+      }
+    });
+    this.segments = newSegments;
+    return this;
+  };
+  SvgPath.prototype.abs = function abs () {
+    this.iterate(function (s, index, x, y) {
+      var name = s[0],
+          nameUC = name.toUpperCase(),
+          i;
+      if (name === nameUC) { return; }
+      s[0] = nameUC;
+      switch (name) {
+        case 'v':
+          s[1] += y;
+          return;
+        case 'a':
+          s[6] += x;
+          s[7] += y;
+          return;
+        default:
+          for (i = 1; i < s.length; i++) {
+            s[i] += i % 2 ? x : y;
+          }
+      }
+    }, true);
+    return this;
+  };
+  SvgPath.prototype.toString = function toString () {
+      var this$1 = this;
+    var elements = [], skipCmd, cmd;
+    this.segments.map( function (s,i) {
+      cmd = s[0];
+      skipCmd = i > 0 && cmd !== 'm' && cmd !== 'M' && cmd === this$1.segments[i - 1][0];
+      elements = elements.concat(skipCmd ? s.slice(1) : s);
+    });
+    return elements.join(' ')
+      .replace(/ ?([achlmqrstvz]) ?/gi, '$1')
+      .replace(/ \-/g, '-')
+      .replace(/zm/g, 'z m');
+  };
+  function split(parsed) {
+    return parsed
+      .toString()
+      .split("M")
+      .map(function (d, i) {
+        d = d.trim();
+        return i && d ? "M" + d : d;
+      })
+      .filter(function (d) { return d; });
+  }
+  function pathStringToRing(str, maxSegmentLength) {
+    var parsed = new SvgPath(str).abs();
+    return exactRing(parsed) || approximateRing(parsed, maxSegmentLength);
+  }
+  function exactRing(parsed) {
+    var segments = parsed.segments || [],
+      ring = [];
+    if (!segments.length || segments[0][0] !== "M") {
+      return false;
+    }
+    for (var i = 0; i < segments.length; i++) {
+      var ref = segments[i];
+      var command = ref[0];
+      var x = ref[1];
+      var y = ref[2];
+      if ((command === "M" && i) || command === "Z") {
+        break;
+      } else if (command === "M" || command === "L") {
+        ring.push([x, y]);
+      } else if (command === "H") {
+        ring.push([x, ring[ring.length - 1][1]]);
+      } else if (command === "V") {
+        ring.push([ring[ring.length - 1][0], x]);
+      } else {
+        return false;
+      }
+    }
+    return ring.length ? { ring: ring } : false;
+  }
+  function approximateRing(parsed, maxSegmentLength) {
+    var ringPath = split(parsed)[0], ring = [], len, testPath, numPoints = 3;
+    if (!ringPath) {
+      throw new TypeError(INVALID_INPUT);
+    }
+    testPath = measure(ringPath);
+    len = testPath.getTotalLength();
+    if (
+      maxSegmentLength &&
+      isFiniteNumber(maxSegmentLength) &&
+      maxSegmentLength > 0
+    ) {
+      numPoints = Math.max(numPoints, Math.ceil(len / maxSegmentLength));
+    }
+    for (var i = 0; i < numPoints; i++) {
+      var p = testPath.getPointAtLength((len * i) / numPoints);
+      ring.push([p.x, p.y]);
+    }
+    return {
+      ring: ring,
+      skipBisect: true
+    };
+  }
+  function measure(d) {
+    try {
+      var path = document.createElementNS('http://www.w3.org/2000/svg',"path");
+      path.setAttributeNS(null, "d", d);
+      return path;
+    } catch (e) {}
+    return false;
+  }
+  function rotateRing(ring, vs) {
+    var len = ring.length, min = Infinity, bestOffset, sumOfSquares, spliced;
+    var loop = function ( offset ) {
+      sumOfSquares = 0;
+      vs.forEach(function(p, i) {
+        var d = distance(ring[(offset + i) % len], p);
+        sumOfSquares += d * d;
+      });
+      if (sumOfSquares < min) {
+        min = sumOfSquares;
+        bestOffset = offset;
+      }
+    };
+    for (var offset = 0; offset < len; offset++) loop( offset );
+    if (bestOffset) {
+      spliced = ring.splice(0, bestOffset);
+      ring.splice.apply(ring, [ ring.length, 0 ].concat( spliced ));
+    }
+  }
+  function polygonLength(polygon) {
+    var i = -1, n = polygon.length, b = polygon[n - 1],
+        xa, ya, xb = b[0], yb = b[1], perimeter = 0;
+    while (++i < n) {
+      xa = xb;
+      ya = yb;
+      b = polygon[i];
+      xb = b[0];
+      yb = b[1];
+      xa -= xb;
+      ya -= yb;
+      perimeter += Math.sqrt(xa * xa + ya * ya);
+    }
+    return perimeter;
+  }
+  function polygonArea(polygon) {
+    var i = -1, n = polygon.length, a, b = polygon[n - 1], area = 0;
+    while (++i < n) {
+      a = b;
+      b = polygon[i];
+      area += a[1] * b[0] - a[0] * b[1];
+    }
+    return area / 2;
+  }
+  function addPoints(ring, numPoints) {
+    var desiredLength = ring.length + numPoints,
+          step = polygonLength(ring) / numPoints;
+    var i = 0, cursor = 0, insertAt = step / 2;
+    while (ring.length < desiredLength) {
+      var a = ring[i], b = ring[(i + 1) % ring.length], segment = distance(a, b);
+      if (insertAt <= cursor + segment) {
+        ring.splice( i + 1, 0, segment ? pointAlong(a, b, (insertAt - cursor) / segment) : a.slice(0) );
+        insertAt += step;
+        continue;
+      }
+      cursor += segment;
+      i++;
+    }
+  }
+  function bisect(ring, maxSegmentLength) {
+    if ( maxSegmentLength === void 0 ) maxSegmentLength = Infinity;
+    for (var i = 0; i < ring.length; i++) {
+      var a = ring[i], b = i === ring.length - 1 ? ring[0] : ring[i + 1];
+      while (distance(a, b) > maxSegmentLength) {
+        b = pointAlong(a, b, 0.5);
+        ring.splice(i + 1, 0, b);
+      }
+    }
+  }
+  function normalizeRing(ring, maxSegmentLength) {
+    var points, area, skipBisect;
+    if (typeof ring === "string") {
+      var converted = pathStringToRing(ring, maxSegmentLength);
+      ring = converted.ring;
+      skipBisect = converted.skipBisect;
+    } else if (!Array.isArray(ring)) {
+      throw new TypeError(INVALID_INPUT);
+    }
+    points = ring.slice(0);
+    if (!validRing(points)) {
+      throw new TypeError(INVALID_INPUT);
+    }
+    if (points.length > 1 && samePoint(points[0], points[points.length - 1])) {
+      points.pop();
+    }
+    area = polygonArea(points);
+    if (area > 0) {
+      points.reverse();
+    }
+    if (
+      !skipBisect &&
+      maxSegmentLength &&
+      isFiniteNumber(maxSegmentLength) &&
+      maxSegmentLength > 0
+    ) {
+      bisect(points, maxSegmentLength);
+    }
+    return points;
+  }
+  function validRing(ring) {
+    return ring.every(function(point) {
+      return (
+        Array.isArray(point) &&
+        point.length >= 2 &&
+        isFiniteNumber(point[0]) &&
+        isFiniteNumber(point[1])
+      );
+    });
+  }
+  function getInterpolationPoints(fromShape, toShape, morphPrecision) {
+    morphPrecision = morphPrecision || defaultOptions.morphPrecision;
+    var fromRing = normalizeRing(fromShape, morphPrecision),
+        toRing = normalizeRing(toShape, morphPrecision),
+        diff = fromRing.length - toRing.length;
+    addPoints(fromRing, diff < 0 ? diff * -1 : 0);
+    addPoints(toRing, diff > 0 ? diff : 0);
+    rotateRing(fromRing, toRing);
+    return [fromRing,toRing]
+  }
+  function getSVGMorph(tweenProp){
+    return this.element.getAttribute('d');
+  }
+  function prepareSVGMorph(tweenProp,value){
+    var pathObject = {}, elem = value instanceof Element ? value : /^\.|^\#/.test(value) ? selector(value) : null,
+          pathReg = new RegExp('\\n','ig');
+    if ( typeof(value) === 'object' && value.pathArray ) {
+      return value;
+    } else if ( elem && /path|glyph/.test(elem.tagName) ) {
+      pathObject.original = elem.getAttribute('d').replace(pathReg,'');
+    } else if ( !elem && /[a-z][^a-z]*/ig.test(value) ) {
+      pathObject.original = value.replace(pathReg,'');
+    }
+    return pathObject;
+  }
+  function onStartSVGMorph(tweenProp){
+    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+      KUTE[tweenProp] = function (elem, a, b, v) {
+        var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
+        pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z");
+        elem.setAttribute("d", pathString );
+      };
+    }
+  }
+  function crossCheckSVGMorph(prop){
+    if ( this.valuesEnd[prop]){
+      var pathArray1 = this.valuesStart[prop].pathArray,
+          pathArray2 = this.valuesEnd[prop].pathArray;
+      if ( !pathArray1 || !pathArray2 || pathArray1 && pathArray2 && pathArray1.length !== pathArray2.length ) {
+        var p1 = this.valuesStart[prop].original,
+            p2 = this.valuesEnd[prop].original,
+            morphPrecision = this._morphPrecision ? parseInt(this._morphPrecision) : defaultOptions.morphPrecision,
+            paths = getInterpolationPoints(p1,p2,morphPrecision);
+        this.valuesStart[prop].pathArray = paths[0];
+        this.valuesEnd[prop].pathArray = paths[1];
+      }
+    }
+  }
+  var svgMorphFunctions = {
+    prepareStart: getSVGMorph,
+    prepareProperty: prepareSVGMorph,
+    onStart: onStartSVGMorph,
+    crossCheck: crossCheckSVGMorph
+  };
+  var svgMorphOps = {
+    component: 'svgMorph',
+    property: 'path',
+    defaultValue: [],
+    Interpolate: coords,
+    defaultOptions: {morphPrecision : 10, morphIndex:0},
+    functions: svgMorphFunctions,
+    Util: {
+      INVALID_INPUT: INVALID_INPUT,isFiniteNumber: isFiniteNumber,distance: distance,pointAlong: pointAlong,samePoint: samePoint,paramCounts: paramCounts,SPECIAL_SPACES: SPECIAL_SPACES,isSpace: isSpace,isCommand: isCommand,isArc: isArc,isDigit: isDigit,
+      isDigitStart: isDigitStart,State: State,skipSpaces: skipSpaces,scanFlag: scanFlag,scanParam: scanParam,finalizeSegment: finalizeSegment,scanSegment: scanSegment,pathParse: pathParse,SvgPath: SvgPath,split: split,pathStringToRing: pathStringToRing,
+      exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea,addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints}
+  };
+  Components.SVGMorph = svgMorphOps;
+
+  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 }
+  };
+  Components.SVGTransformProperty = svgTransformOps;
+
+  for (var component in Components) {
+    var compOps = Components[component];
+    Components[component] = new Animation(compOps);
+  }
+  var index = {
+    Animation: Animation,
+    Components: Components,
+    Tween: Tween,
+    fromTo: fromTo,
+    to: to,
+    TweenCollection: TweenCollection,
+    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 index;
+
+})));
diff --git a/dist/kute.min.js b/dist/kute.min.js
index b1fe571..b4bc347 100644
--- a/dist/kute.min.js
+++ b/dist/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/dist/polyfill.js b/dist/polyfill.js
new file mode 100644
index 0000000..a39b65f
--- /dev/null
+++ b/dist/polyfill.js
@@ -0,0 +1,105 @@
+"use strict";
+if (!window.addEventListener||!Window.prototype.addEventListener) {
+  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];
+        }
+      }
+    }
+  };
+}
+
+if(!Date.now){
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+
+if ( !window.performance ) {
+  window.performance = {};
+}
+if ( !window.performance.now ){
+  var nowOffset = Date.now();
+  window.performance.now = function now(){
+    return Date.now() - nowOffset;
+  };
+}
+
+if (!window.requestAnimationFrame) {
+	var	lastTime = Date.now();
+	window.requestAnimationFrame = function (callback) {
+		if (typeof callback !== 'function') {
+			throw new TypeError(callback + 'is not a function');
+		}
+		var	currentTime = Date.now(),
+			delay = 16 + lastTime - currentTime;
+		if (delay < 0) { delay = 0;	}
+		lastTime = currentTime;
+		return setTimeout(function () {
+			lastTime = Date.now();
+			callback(performance.now());
+		}, delay);
+	};
+	window.cancelAnimationFrame = function (id) {
+		clearTimeout(id);
+	};
+}
diff --git a/dist/polyfill.min.js b/dist/polyfill.min.js
new file mode 100644
index 0000000..b279d33
--- /dev/null
+++ b/dist/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>0)/1000) + b.u );
-              }
-            } else {
-              attributes[prop+s] = function(l,p,a,b,v) {
-                var _p = _p || p.replace(s,'');
-                l.setAttribute(_p, ( (number(a.v,b.v,v)*1000>>0)/1000) + b.u );
-              }
-            }
-          }
-          attributesObject[prop+s] = trueDimension(o[p]);
-        } else if ( !regex.test(o[p]) || cv === null || cv !== null && !regex.test(cv) ) {
-          if (!(prop in attributes)) {
-            if (/opacity/i.test(p)) {
-              attributes[prop] = function(l,o,a,b,v) {
-                l.setAttribute(o, (number(a,b,v) * 1000 >> 0) / 1000 );
-              }
-            } else {
-              attributes[prop] = function(l,o,a,b,v) {
-                l.setAttribute(o, (number(a,b,v) * 1000 >> 0) / 1000 );
-              }
-            }
-          }
-          attributesObject[prop] = parseFloat(o[p]);
-        }
-      } else {
-        if (!(prop in attributes)) {
-          attributes[prop] = function(l,u,a,b,v) {
-            l.setAttribute(u, color(a,b,v,o.keepHex));
-          }
-        }
-        attributesObject[prop] = trueColor(o[p]);
-      }
-    }
-    return attributesObject;
-  }
-
-  return this;
-}));
\ No newline at end of file
diff --git a/kute-css.js b/kute-css.js
deleted file mode 100644
index d8fbec4..0000000
--- a/kute-css.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * package CSS Plugin
- * 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("CSS Plugin require KUTE.js.")
-  }
-})(this, function(KUTE){
-  'use strict';
-
-  var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = K.dom, // connect to KUTE object and global
-    parseProperty = K.parseProperty, prepareStart = K.prepareStart, property = K.property,
-    getCurrentStyle = K.getCurrentStyle, trueDimension = K.truD, trueColor = K.truC,
-    number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color;
-
-  // supported properties
-  var colorProps = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
-    boxModelProps  = ['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
-    radiusProps  = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/%
-    textProps  = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties
-    clipProp = ['clip'], bgPositionProp  = ['backgroundPosition'], // clip | background position
-    textAndBoxProps = boxModelProps.concat(textProps), // a merge of all properties with px|%|em|rem|etc unit
-    allUnitProps = radiusProps.concat(boxModelProps,textProps), // a merge of all properties with px|%|em|rem|etc unit
-    cssPluginProps = colorProps.concat(clipProp, radiusProps, boxModelProps, textProps, bgPositionProp), al = cssPluginProps.length,
-    propsDefaultValues = propsDefaultValues || {}; //all properties default values
-
-  //populate default values object
-  for ( var i=0; i< al; i++ ){
-    if (colorProps.indexOf(cssPluginProps[i]) !== -1){
-      propsDefaultValues[cssPluginProps[i]] = 'rgba(0,0,0,0)'; // propsDefaultValues[p] = {r:0,g:0,b:0,a:1};
-    } else if ( allUnitProps.indexOf(cssPluginProps[i]) !== -1 ) {
-      propsDefaultValues[cssPluginProps[i]] = 0;
-    } else if ( bgPositionProp.indexOf(cssPluginProps[i]) !== -1 ){
-      propsDefaultValues[cssPluginProps[i]] = [50,50];
-    } else if ( cssPluginProps[i] === 'clip' ){
-      propsDefaultValues[cssPluginProps[i]] = [0,0,0,0];
-    }
-  }
-
-  // create prepare/process/render functions for additional colors properties
-  for (var i = 0, l = colorProps.length; i -1) {
-          DOM[p] = function(l,p,a,b,v){
-            l.style[p] = ( v > 0.98 || v<0.02 ? (number(a.v,b.v,v) * 100 >> 0)/100 : number(a.v,b.v,v)>>0 ) + b.u;
-          }
-        } else {
-          DOM[p] = function(l,p,a,b,v){
-            l.style[p] = ((number(a.v,b.v,v) * 100 >> 0)/100) + b.u;
-          }
-        }
-      }
-      return trueDimension(v);
-    };
-    prepareStart[textAndBoxProps[i]] = function(p,v){
-      return getCurrentStyle(this.element,p) || propsDefaultValues[p];
-    };
-  }
-
-  //create prepare/process/render functions for radius properties
-  for (var i = 0, l = radiusProps.length; i> 0)/100) + b.u;
-        }
-      }
-      return trueDimension(v);
-    };
-    prepareStart[radiusProps[i]] = function(p,v){
-      var radiusProp = p === radiusProps[0] ? radiusProps[1] : p; radiusProp = property(radiusProp); // old Safari has a problem with borderRadius
-      return getCurrentStyle(this.element,radiusProp) || propsDefaultValues[p];
-    };
-  }
-
-  // clip
-  parseProperty.clip = function(p,v){
-    if ( !(p in DOM) ) {
-      DOM[p] = function(l,p,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] = ((number(c1,c2,v)*100 >> 0)/100) + cu;
-        }
-        l.style[p] = 'rect('+cl+')';
-      };
-    }
-    if ( v instanceof Array ){
-      return [ trueDimension(v[0]), trueDimension(v[1]), trueDimension(v[2]), trueDimension(v[3]) ];
-    } else {
-      var ci = v.replace(/rect|\(|\)/g,'');
-      ci = /\,/g.test(ci) ? ci.split(/\,/g) : ci.split(/\s/g);
-      return [ trueDimension(ci[0]),  trueDimension(ci[1]), trueDimension(ci[2]),  trueDimension(ci[3]) ];
-    }
-  };
-
-  prepareStart.clip = function(p,v){
-    var currentClip = getCurrentStyle(this.element,p), w = getCurrentStyle(this.element,'width'), h = getCurrentStyle(this.element,'height');
-    return !/rect/.test(currentClip) ? [0, w, h, 0] : currentClip;
-  };
-
-  // background position
-  parseProperty.backgroundPosition = function(p,v) {
-    if ( !(p in DOM) ) {
-      DOM[p] = function(l,p,a,b,v) {
-        l.style[p] = ((number(a[0],b[0],v)*100>>0)/100) + '%' + ' ' + ((number(a[1],b[1],v)*100>>0)/100) + '%';
-      };
-    }
-    if ( v instanceof Array ){
-      var x = trueDimension(v[0]).v, y = trueDimension(v[1]).v;
-      return [ x !== NaN ? x : 50, y !== NaN ? y : 50 ];
-    } else {
-      var posxy = v.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 ];
-    }
-  }
-  prepareStart.backgroundPosition = function(p,v){
-    return getCurrentStyle(this.element,p) || propsDefaultValues[p];
-  }
-
-  return this;
-});
\ No newline at end of file
diff --git a/kute-svg.js b/kute-svg.js
deleted file mode 100644
index c485a7b..0000000
--- a/kute-svg.js
+++ /dev/null
@@ -1,416 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * package - SVG Plugin
- * desc - draw SVG strokes, morph SVG and SVG transforms
- * 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("SVG Plugin require KUTE.js.");
-  }
-}(this, function(KUTE) {
-  'use strict';
-
-  var g = typeof global !== 'undefined' ? global : window, K = KUTE, // connect plugin to KUTE object and global
-    DOM = K.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
-    trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
-    number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolate functions
-    defaultOptions = K.defaultOptions, // default tween options since 1.6.1
-
-    // browser detection
-    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
-
-  // here we go with the plugin
-  var pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
-    // function(array1, array2, length, progress) for SVG morph
-    coords = g.Interpolate.coords = function(a,b,l,v) {
-      var points = [];
-      for(var i=0;i> 0)/1000 );
-        }
-      }
-      return points;
-    };
-
-
-  // SVG MORPH
-  var getSegments = function(s,e,r){ // getSegments returns an array of points based on a sample size morphPrecision
-      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
-
-      while ( (j += r) < sl ) { // populate the points arrays based on morphPrecision as sample size
-        s1.push( [s.getPointAtLength(j).x, s.getPointAtLength(j).y]);
-        e1.push( [e.getPointAtLength(j).x, e.getPointAtLength(j).y]);
-      }
-      return [s1,e1];
-    },
-    getClosestPoint = function(p,t,s){ // utility for polygon paths, returns a close point from the original path (length,pointAtLength,smallest); // intervalLength
-      var x, y, a = [], l = s.length, dx, nx, pr;
-      for (var i=0; i when glyph
-      var createdPath = document.createElementNS(ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p;
-      createdPath.setAttribute('d',d); return createdPath;
-    },
-    forcePath = function(p){ // forcePath for glyph elements
-      if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future
-        var c = createPath(p); p.parentNode.appendChild(c); return c;
-      }
-      return p;
-    },
-    clone = function(a) {
-      var copy;
-      if (a instanceof Array) {
-        copy = [];
-        for (var i = 0, len = a.length; i < len; i++) {
-          copy[i] = clone(a[i]);
-        }
-        return copy;
-      }
-      return a;
-    },
-    getPath = 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 = forcePath(el);
-        p.o = el.getAttribute('d');
-
-      } else if (!el && /[a-z][^a-z]*/ig.test(e)) { // maybe it's a string path already
-        p.e = createPath(e.trim());
-        p.o = e;
-      }
-      return p;
-    },
-    computePathCross = function(s,e){ // pathCross
-      var s1, e1, pointsArray, largerPathLength, smallerPath, largerPath, simulatedSmallerPath, nsm = [], sml, cl = [], len, tl, cs,
-        index = this.options.morphIndex;
-
-      if (!this._isPolygon) {
-        s = createPath(s); e = createPath(e);
-        pointsArray = getSegments(s,e,this.options.morphPrecision);
-        s1 = pointsArray[0]; e1 = pointsArray[1]; largerPathLength = e1.length;
-      } else {
-        s = pathToAbsolute(s); e = pathToAbsolute(e);
-
-        if ( s.length !== e.length ){
-          largerPathLength = Math.max(s.length,e.length);
-          if ( largerPathLength === e.length) { smallerPath = s; largerPath = e; } else { smallerPath = e; largerPath = s; }
-          sml = smallerPath.length;
-
-          simulatedSmallerPath = createPath('M'+smallerPath.join('L')+'z'); len = simulatedSmallerPath.getTotalLength() / largerPathLength;
-          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>0)/100, start = (number(a.s,b.s,v)*100>>0)/100, end = (number(a.e,b.e,v)*100>>0)/100,
-        offset = 0 - start, dashOne = end+offset;
-        l.style.strokeDashoffset = offset +'px';
-        l.style.strokeDasharray = (((dashOne <1 ? 0 : dashOne)*100>>0)/100) + 'px, ' + pathLength + 'px';
-      }
-    }
-    return getDraw(this.element,o);
-  }
-
-  prepareStart.draw = function(){
-    return getDraw(this.element);
-  }
-
-
-  // SVG Transform
-  var parseStringOrigin = function(origin,box){
-      return /[a-zA-Z]/.test(origin) && !/px/.test(origin) ? origin.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50)
-                                     : /%/.test(origin) ? (box.x + parseFloat(origin) * box.width / 100) : parseFloat(origin);
-    },
-    parseTransformString = function (a){ // helper function that turns transform value from string to object
-      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 +')' : '' ) );
-      }
-    }
-
-    // now prepare transform
-    return parseTransformObject.call(this,v);
-  }
-
-  // returns an obect with current transform attribute value
-  prepareStart.svgTransform = function(p,t) {
-    var transformObject = {}, currentTransform = parseTransformString(this.element.getAttribute('transform'));
-    for (var i in t) { transformObject[i] = i in currentTransform ? currentTransform[i] : (i==='scale'?1:0); } // find a value in current attribute value or add a default value
-    return transformObject;
-  }
-
-  crossCheck.svgTransform = function() { // helper function that helps preserve current transform properties into the objects
-    if (!this.options.rpr) return; // fix since 1.6.1 for fromTo() method
-    var valuesStart = this.valuesStart.svgTransform, valuesEnd = this.valuesEnd.svgTransform,
-      currentTransform = parseTransformObject.call(this, parseTransformString(this.element.getAttribute('transform')) );
-
-    for ( var i in currentTransform ) { valuesStart[i] = currentTransform[i]; } // populate the valuesStart first
-
-    // now try to determine the REAL translation
-    var parentSVG = this.element.ownerSVGElement,
-      newTransform = parentSVG.createSVGTransformFromMatrix(
-        parentSVG.createSVGMatrix()
-        .translate(-valuesStart.origin[0],-valuesStart.origin[1]) // - origin
-        .translate('translate' in valuesStart ? valuesStart.translate[0] : 0,'translate' in valuesStart ? valuesStart.translate[1] : 0) // the current translate
-        .rotate(valuesStart.rotate||0).skewX(valuesStart.skewX||0).skewY(valuesStart.skewY||0).scale(valuesStart.scale||1)// the other functions
-        .translate(+valuesStart.origin[0],+valuesStart.origin[1]) // + origin
-      );
-
-    valuesStart.translate = [newTransform.matrix.e,newTransform.matrix.f]; // finally the translate we're looking for
-
-    // copy existing and unused properties to the valuesEnd
-    for ( var i in valuesStart) { if ( !(i in valuesEnd)) { valuesEnd[i] = valuesStart[i]; } }
-  }
-
-  return this;
-}));
\ No newline at end of file
diff --git a/kute-text.js b/kute-text.js
deleted file mode 100644
index a5bfe1d..0000000
--- a/kute-text.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * package - KUTE.js Text Plugin
- * desc - adds the tween numbers incremental and cool string writing/scrambling
- * by dnp_theme & @dalisoft
- * 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("Text-Plugin require KUTE.js.");
-  }
-}(this, function (KUTE) {
-  'use strict';
-
-  var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
-    K = KUTE, DOM = K.dom, prepareStart = K.prepareStart,
-    parseProperty = K.parseProperty, number = g.Interpolate.number,
-    defaultOptions = K.defaultOptions;
-
-  // let's go with the plugin
-  var lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
-    upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""), // uppercase
-    nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
-    numeric = String("0123456789").split(""), // numeric
-    alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric), // alpha numeric
-    allTypes = alphaNumeric.concat(nonAlpha), // all caracters
-    random = Math.random, min = Math.min;
-
-  // set default textChars tween option since 1.6.1
-  defaultOptions.textChars = 'alpha'; 
-
-  prepareStart.text = prepareStart.number = function(p,v){
-    return this.element.innerHTML;
-  }
-
-  parseProperty.text = function(p,v) {
-    if ( !( 'text' in DOM ) ) {
-      DOM.text = function(l,p,a,b,v,o) {
-        var tp = tp || o.textChars === 'alpha' ? lowerCaseAlpha // textChars is alpha
-            : o.textChars === 'upper' ? upperCaseAlpha  // textChars is numeric
-            : o.textChars === 'numeric' ? numeric  // textChars is numeric
-            : o.textChars === 'alphanumeric' ? alphaNumeric // textChars is alphanumeric
-            : o.textChars === 'symbols' ? nonAlpha // textChars is symbols
-            : o.textChars ? o.textChars.split('') // textChars is a custom text
-            : lowerCaseAlpha, ll = tp.length,
-            t = tp[(random() * ll)>>0], initialText = '', endText = '', firstLetterA = a.substring(0), firstLetterB = b.substring(0);
-
-        // use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart TO DO
-        initialText = a !== '' ? firstLetterA.substring(firstLetterA.length, min(v * firstLetterA.length, firstLetterA.length)>>0 ) : ''; // initial text, A value
-        endText = firstLetterB.substring(0, min(v * firstLetterB.length, firstLetterB.length)>>0 ); // end text, B value
-        l.innerHTML = v < 1 ? endText + t + initialText : b;
-      }
-    }
-    return v;
-  }
-
-  parseProperty['number'] = function(p,v,l) {
-    if ( !( 'number' in DOM ) ) {
-      DOM.number = function(l,p,a,b,v) {
-        l.innerHTML = number(a, b, v)>>0;
-      }
-    }
-    return parseInt(v) || 0;
-  }
-
-  return this;
-}));
\ No newline at end of file
diff --git a/kute.js b/kute.js
deleted file mode 100644
index 9b8c936..0000000
--- a/kute.js
+++ /dev/null
@@ -1,803 +0,0 @@
-/* KUTE.js - The Light Tweening Engine
- * by dnp_theme
- * Licensed under MIT-License
- */
-(function (root,factory) {
-  if (typeof define === 'function' && define.amd) {
-    define([], factory); // AMD. Register as an anonymous module.
-  } else if (typeof exports == 'object') {
-    module.exports = factory(); // Node, not strict CommonJS
-  } else {
-    root.KUTE = factory();
-  }
-}(this, function () {
-  "use strict";
-
-  // set a custom scope for KUTE.js
-  var g = typeof global !== 'undefined' ? global : window, time = g.performance,
-    body = document.body, tweens = [], tick = null, // tick must be null!!
-
-    // strings
-    length = 'length',
-    split = 'split',
-    indexOf = 'indexOf',
-    replace = 'replace',
-
-    offsetWidth = 'offsetWidth',
-    offsetHeight = 'offsetHeight',
-
-    options = 'options',
-    valuesStart = 'valuesStart',
-    valuesEnd = 'valuesEnd',
-    valuesRepeat = 'valuesRepeat',
-
-    element = 'element',
-    playing = 'playing',
-
-    duration = 'duration',
-    delay = 'delay',
-    offset = 'offset',
-    repeat = 'repeat',
-    repeatDelay = 'repeatDelay',
-    yoyo = 'yoyo',
-    easing = 'easing',
-    chain = 'chain',
-    keepHex = 'keepHex',
-
-    style = 'style',
-    dataTweening = 'data-tweening',
-    getElementsByTagName = 'getElementsByTagName',
-    addEventListener = 'addEventListener',
-    removeEventListener = 'removeEventListener';
-
-
-  //supported properties
-  var colorProps = ['color', 'backgroundColor'], // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+)
-    boxModelProps  = ['top', 'left', 'width', 'height'], 
-    transformFunctions  = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'],
-    scrollProp  = ['scroll'], // has no default value, it's calculated on tween start
-    opacityProp  = ['opacity'], // opacity
-    coreProps = colorProps.concat( opacityProp, boxModelProps, transformFunctions),
-    defaultPropsValues = {}; 
-
-  //populate default values object
-  for ( var propertyIndex=0, allCorePropLength = coreProps[length], coreProp; propertyIndex < allCorePropLength; propertyIndex++ ){
-    coreProp = coreProps[propertyIndex];
-    if (colorProps[indexOf](coreProp) !== -1){
-      defaultPropsValues[coreProp] = 'rgba(0,0,0,0)'; // defaultPropsValues[coreProp] = {r:0,g:0,b:0,a:1};
-    } else if ( boxModelProps[indexOf](coreProp) !== -1 ) {
-      defaultPropsValues[coreProp] = 0;
-    } else if ( coreProp === 'translate3d' ){ // px
-      defaultPropsValues[coreProp] = [0,0,0];
-    } else if ( coreProp === 'translate' ){ // px
-      defaultPropsValues[coreProp] = [0,0];
-    } else if ( coreProp === 'rotate' || /X|Y|Z/.test(coreProp) ){ // deg
-      defaultPropsValues[coreProp] = 0;
-    } else if ( coreProp === 'scale' || coreProp === 'opacity' ){ // unitless
-      defaultPropsValues[coreProp] = 1;
-    }
-  }
-
-  // default tween options, since 1.6.1
-  var defaultOptions = {
-      duration: 700,
-      delay: 0,
-      offset: 0,
-      repeat: 0,
-      repeatDelay: 0,
-      yoyo: false,
-      easing: 'linear',
-      keepHex: false,
-    },
-    // tools / utils
-    getPrefix = function() { //returns browser prefix
-      var prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], thePrefix;
-      for (var pIndex = 0, pfl = prefixes[length]; pIndex < pfl; pIndex++) { 
-        if (prefixes[pIndex]+'Transform' in body[style]) { thePrefix = prefixes[pIndex]; break; }  
-      }
-      return thePrefix;
-    },
-    property = function(propertyToPrefix){ // returns prefixed property | property
-      var prefixRequired = (!(propertyToPrefix in body[style])) ? true : false, prefix = getPrefix(); // is prefix required for property | prefix
-      return prefixRequired ? prefix + (propertyToPrefix.charAt(0).toUpperCase() + propertyToPrefix.slice(1)) : propertyToPrefix;
-    },
-    selector = function(el,multi){ // a public selector utility
-      var requestedElem;
-      if (multi){
-        requestedElem = el instanceof Object || typeof el === 'object' ? el : document.querySelectorAll(el);
-      } else {
-        requestedElem = typeof el === 'object' ? el : document.querySelector(el);
-      }
-      if (requestedElem === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el);
-      return requestedElem;
-    },
-    radToDeg = function(a) { return a*180/Math.PI; },
-    trueDimension = function (dimValue,isAngle) { //true dimension returns { v = value, u = unit }
-      var intValue = parseInt(dimValue) || 0, mUnits = ['px','%','deg','rad','em','rem','vh','vw'], theUnit;
-      for (var mIndex=0; mIndex>0 || 0) : (a[c] && b[c]) ? (number(a[c],b[c],v) * 100 >> 0 )/100 : null; }
-      return toHex ? rgbToHex( _c.r, _c.g, _c.b ) : !_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;
-    },
-    translate = interpolate.translate = function (a,b,u,v){
-      var translation = {};
-      for (var ax in b){
-        translation[ax] = ( a[ax]===b[ax] ? b[ax] : ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 1000 >> 0 ) / 1000 ) + u;
-      }
-      return translation.x||translation.y ? 'translate(' + translation.x + ',' + translation.y + ')' :
-        'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')';
-    },
-    rotate = interpolate.rotate = function (a,b,u,v){
-      var rotation = {};
-      for ( var rx in b ){
-        rotation[rx] = rx === 'z' ? ('rotate('+ (((a[rx] + (b[rx] - a[rx]) * v) * 1000 >> 0 ) / 1000) + u + ')')
-                                  : (rx + '(' + (((a[rx] + (b[rx] - a[rx]) * v) * 1000 >> 0 ) / 1000) + u + ')');
-      }
-      return rotation.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||'');
-    },
-    skew = interpolate.skew = function (a,b,u,v){
-      var skewProp = {};
-      for ( var sx in b ){
-        skewProp[sx] = sx + '(' + (((a[sx] + (b[sx] - a[sx]) * v) * 1000 >> 0) / 1000) + u + ')';
-      }
-      return (skewProp.skewX||'') + (skewProp.skewY||'');
-    },
-    scale = interpolate.scale = function(a,b,v){
-      return 'scale(' + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ')';
-    },
-
-    // KUTE.js DOM update functions
-    DOM = {},
-    ticker = function(t) {
-      var i = 0;
-      while ( i < tweens[length] ) {
-        if ( update.call(tweens[i],t) ) {
-          i++;
-        } else {
-          tweens.splice(i, 1);
-        }
-      }
-      tick = _requestAnimationFrame(ticker);
-    },
-    update = function(t) {
-      t = t || time.now();
-      if ( t < this._startTime && this[playing] ) { return true; }
-
-      var elapsed = Math.min(( t - this._startTime ) / this[options][duration], 1), progress = this[options][easing](elapsed); // calculate progress
-
-      for (var tweenProp in this[valuesEnd]){ // render the DOM update
-        DOM[tweenProp](this[element],tweenProp,this[valuesStart][tweenProp],this[valuesEnd][tweenProp],progress,this[options]); 
-      }
-
-      if (this[options].update) { this[options].update.call(this); } // fire the updateCallback
-
-      if (elapsed === 1) {
-        if (this[options][repeat] > 0) {
-          if ( isFinite(this[options][repeat] ) ) { this[options][repeat]--; }
-
-          if (this[options][yoyo]) { // handle yoyo
-            this.reversed = !this.reversed;
-            reverse.call(this);
-          }
-
-          this._startTime = (this[options][yoyo] && !this.reversed) ? t + this[options][repeatDelay] : t; //set the right time for delay
-          return true;
-        } else {
-
-          if (this[options].complete) { this[options].complete.call(this); } // fire the complete callback
-
-          scrollOut.call(this); // unbind preventing scroll when scroll tween finished
-
-          for (var i = 0, ctl = this[options][chain][length]; i < ctl; i++) { // start animating chained tweens
-            this[options][chain][i].start();
-          }
-
-          //stop ticking when finished
-          close.call(this);
-        }
-        return false;
-      }
-      return true;
-    },
-
-    // applies the transform origin and perspective
-    perspective = function () {
-      var el = this[element], ops = this[options];
-      if ( ops.perspective !== undefined && transformProperty in this[valuesEnd] ) { // element perspective
-        this[valuesStart][transformProperty]['perspective'] = this[valuesEnd][transformProperty]['perspective']; 
-      }
-      // element transform origin / we filter it out for svgTransform to fix the Firefox transformOrigin bug https://bugzilla.mozilla.org/show_bug.cgi?id=923193
-      if ( ops.transformOrigin !== undefined && (!('svgTransform' in this[valuesEnd])) ) { el[style][property('transformOrigin')] = ops.transformOrigin; } // set transformOrigin for CSS3 transforms only
-      if ( ops.perspectiveOrigin !== undefined ) { el[style][property('perspectiveOrigin')] = ops.perspectiveOrigin; } // element perspective origin
-      if ( ops.parentPerspective !== undefined ) { el.parentNode[style][property('perspective')] = ops.parentPerspective + 'px'; } // parent perspective
-      if ( ops.parentPerspectiveOrigin !== undefined ) { el.parentNode[style][property('perspectiveOrigin')] = ops.parentPerspectiveOrigin; } // parent perspective origin
-    },
-
-    // plugin connector objects
-    prepareStart = {}, // check current property value when .to() method is used
-    crossCheck = {}, // checks for differences between start and end value, try to make sure start unit and end unit are same as well as consistent, stack transforms, process SVG paths
-
-    // parse properties object
-    // string parsing and property specific value processing
-    parseProperty = { // we already start working on core supported properties
-      boxModel : function(tweenProp,inputValue){
-        if (!(tweenProp in DOM)){
-          DOM[tweenProp] = function(elem,tweenProp,a,b,v){
-            elem[style][tweenProp] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px';
-          }
-        }
-        var boxValue = trueDimension(inputValue), offsetProp = tweenProp === 'height' ? offsetHeight : offsetWidth;
-        return boxValue.u === '%' ? boxValue.v * this[element][offsetProp] / 100 : boxValue.v;
-      },
-      transform : function(tweenProp,inputValue) {
-        if (!(transformProperty in DOM)) {
-          DOM[transformProperty] = function(elem,tweenProp,a,b,v,o){
-            elem[style][tweenProp] = (a.perspective||'')
-              + ('translate' in a ? translate(a.translate,b.translate,'px',v):'')
-              + ('rotate' in a ? rotate(a.rotate,b.rotate,'deg',v):'')
-              + ('skew' in a ? skew(a.skew,b.skew,'deg',v):'')
-              + ('scale' in a ? scale(a.scale,b.scale,v):'');
-          }
-        }
-
-        // process each transform property
-        if (/translate/.test(tweenProp)) {
-          if (tweenProp === 'translate3d') {
-            var t3d = inputValue[split](','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2]));
-            return {
-              translateX : t3d0.u === '%' ? (t3d0.v * this[element][offsetWidth] / 100) : t3d0.v,
-              translateY : t3d1.u === '%' ? (t3d1.v * this[element][offsetHeight] / 100) : t3d1.v,
-              translateZ : t3d2.u === '%' ? (t3d2.v * (this[element][offsetHeight] + this[element][offsetWidth]) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
-            };
-          } else if (/^translate(?:[XYZ])$/.test(tweenProp)) {
-            var t1d = trueDimension(inputValue), percentOffset = /X/.test(tweenProp) ? this[element][offsetWidth] / 100 : /Y/.test(tweenProp) ? this[element][offsetHeight] / 100 : (this[element][offsetWidth]+this[element][offsetHeight]) / 200;
-
-            return t1d.u === '%' ? (t1d.v * percentOffset) : t1d.v;
-          } else if (tweenProp === 'translate') {
-            var tv = typeof inputValue === 'string' ? inputValue[split](',') : inputValue, t2d = {}, t2dv,
-              t2d0 = trueDimension(tv[0]), t2d1 = tv[length] ? trueDimension(tv[1]) : {v: 0, u: 'px'};
-            if (tv instanceof Array) {
-              t2d.x = t2d0.u === '%' ? (t2d0.v * this[element][offsetWidth] / 100) : t2d0.v,
-              t2d.y = t2d1.u === '%' ? (t2d1.v * this[element][offsetHeight] / 100) : t2d1.v
-            } else {
-              t2dv = trueDimension(tv);
-              t2d.x = t2dv.u === '%' ? (t2dv.v * this[element][offsetWidth] / 100) : t2dv.v,
-              t2d.y = 0
-            }
-
-            return t2d;
-          }
-        } else if (/rotate|skew/.test(tweenProp)) {
-          if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(tweenProp)) {
-            var r3d = trueDimension(inputValue,true);
-            return r3d.u === 'rad' ? radToDeg(r3d.v) : r3d.v;
-          } else if (tweenProp === 'rotate') {
-            var r2d = {}, r2dv = trueDimension(inputValue,true);
-            r2d.z = r2dv.u === 'rad' ? radToDeg(r2dv.v) : r2dv.v;
-            return r2d;
-          }
-        } else if (tweenProp === 'scale') {
-          return parseFloat(inputValue); // this must be parseFloat(v)
-        }
-      },
-      unitless : function(tweenProp,inputValue){  // scroll | opacity
-        if (/scroll/.test(tweenProp) && !(tweenProp in DOM) ){
-          DOM[tweenProp] = function(elem,tweenProp,a,b,v) {
-            elem.scrollTop = (number(a,b,v))>>0;
-          };
-        } else if (tweenProp === 'opacity') {
-          if (!(tweenProp in DOM)) {
-            if (isIE8) {
-              DOM[tweenProp] = function(elem,tweenProp,a,b,v) {
-                var st = "alpha(opacity=", ep = ')';
-                elem[style].filter = st + ((number(a,b,v) * 100)>>0) + ep;
-              };
-            } else {
-              DOM[tweenProp] = function(elem,tweenProp,a,b,v) {
-                elem[style].opacity = ((number(a,b,v) * 100)>>0)/100;
-              };
-            }
-          }
-        }
-        return parseFloat(inputValue);
-      },
-      colors : function(tweenProp,inputValue){ // colors
-        if (!(tweenProp in DOM)) {
-          DOM[tweenProp] = function(elem,tweenProp,a,b,v,o) {
-            elem[style][tweenProp] = color(a,b,v,o[keepHex]);
-          };
-        }
-        return trueColor(inputValue);
-      }
-    },
-
-    // process properties for endValues and startValues or one of them
-    preparePropertiesObject = function(obj, fn) { // this, props object, type: start/end
-      var propertiesObject = fn === 'start' ? this[valuesStart] : this[valuesEnd],
-        skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {};
-
-      for (var x in obj) {
-        if (transformFunctions[indexOf](x) !== -1) { // transform object gets built here
-          var prepAxis = ['X', 'Y', 'Z']; //coordinates //   translate[x] = pp(x, obj[x]);
-          if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
-
-            for (var fnIndex = 0; fnIndex < 3; fnIndex++) {
-              var translateAxis = prepAxis[fnIndex];
-              if ( /3d/.test(x) ) {
-                translateObject['translate' + translateAxis] = parseProperty.transform.call(this,'translate' + translateAxis, obj[x][fnIndex]);
-              } else {
-                translateObject['translate' + translateAxis] = ('translate' + translateAxis in obj) ? parseProperty.transform.call(this,'translate' + translateAxis, obj['translate' + translateAxis]) : 0;
-              }
-            }
-            transformObject['translate'] = translateObject;
-          } else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
-            var objectName = /rotate/.test(x) ? 'rotate' : 'skew',
-              rotationOrSkew = objectName === 'rotate' ? rotateObject : skewObject;
-            for (var rIndex = 0; rIndex < 3; rIndex++) {
-              var oneAxis = prepAxis[rIndex];
-              if ( obj[objectName+oneAxis] !== undefined && x !== 'skewZ' ) {
-                rotationOrSkew[objectName+oneAxis] = parseProperty.transform.call(this,objectName+oneAxis, obj[objectName+oneAxis]);
-              }
-            }
-            transformObject[objectName] = rotationOrSkew;
-          } else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
-            transformObject[x] = parseProperty.transform.call(this, x, obj[x]);
-          }
-          propertiesObject[transformProperty] = transformObject;
-        } else {
-          if ( boxModelProps[indexOf](x) !== -1 ) {
-            propertiesObject[x] = parseProperty.boxModel.call(this,x,obj[x]);
-          } else if (opacityProp[indexOf](x) !== -1 || x === 'scroll') {
-            propertiesObject[x] = parseProperty.unitless.call(this,x,obj[x]);
-          } else if (colorProps[indexOf](x) !== -1) {
-            propertiesObject[x] = parseProperty.colors.call(this,x,obj[x]);
-          } else if (x in parseProperty) {  // or any other property from css/ attr / svg / third party plugins
-            propertiesObject[x] = parseProperty[x].call(this,x,obj[x]);
-          }
-        }
-      }
-    },
-    reverse = function () {
-      if (this[options][yoyo]) {
-        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];
-        }
-      }
-    },
-    close = function () { //  when animation is finished reset repeat, yoyo&reversed tweens
-      if (this[repeat] > 0) { this[options][repeat] = this[repeat]; }
-      if (this[options][yoyo] && this.reversed===true) { reverse.call(this); this.reversed = false; }
-      this[playing] = false;
-
-      stop();  // when all animations are finished, stop ticking after ~3 frames
-    },
-    preventScroll = function (eventObj) { // prevent mousewheel or touch events while tweening scroll
-      var data = body.getAttribute(dataTweening);
-      if (data && data === 'scroll') { eventObj.preventDefault(); }
-    },
-    scrollOut = function(){ //prevent scroll when tweening scroll
-      if ( 'scroll' in this[valuesEnd] && body.getAttribute(dataTweening)) {
-        body.removeAttribute(dataTweening);
-      }
-    },
-    scrollIn = function(){
-      if ( 'scroll' in this[valuesEnd] && !body.getAttribute(dataTweening)) {
-        body.setAttribute(dataTweening, 'scroll');
-      }
-    },
-    processEasing = function (fn) {
-      if ( typeof fn === 'function') {
-        return fn;
-      } else if ( typeof fn === 'string' ) {
-        return easingFn[fn]; // regular Robert Penner Easing Functions
-      }
-    },
-    getStartValues = function () { // stack transform props for .to() chains
-      var startValues = {}, currentStyle = getInlineStyle(this[element]),
-        degreeProps = ['rotate','skew'], startAxis = ['X','Y','Z'];
-
-      for (var tweenProperty in this[valuesStart]){
-        if ( transformFunctions[indexOf](tweenProperty) !== -1 ) {
-          var r2d = (/(rotate|translate|scale)$/.test(tweenProperty));
-          if ( /translate/.test(tweenProperty) && tweenProperty !== 'translate' ) {
-            startValues['translate3d'] = currentStyle['translate3d'] || defaultPropsValues[tweenProperty];
-          } else if ( r2d ) { // 2d transforms
-            startValues[tweenProperty] = currentStyle[tweenProperty] || defaultPropsValues[tweenProperty];
-          } else if ( !r2d && /rotate|skew/.test(tweenProperty) ) { // all angles
-            for (var degIndex=0; degIndex<2; degIndex++) {
-              for (var axisIndex = 0; axisIndex<3; axisIndex++) {
-                var s = degreeProps[degIndex]+startAxis[axisIndex];
-                if (transformFunctions[indexOf](s) !== -1 && (s in this[valuesStart]) ) { startValues[s] = currentStyle[s] || defaultPropsValues[s]; }
-              }
-            }
-          }
-        } else {
-          if ( tweenProperty !== 'scroll' ) {
-            if (tweenProperty === 'opacity' && isIE8 ) { // handle IE8 opacity
-              var currentOpacity = getCurrentStyle(this[element],'filter');
-              startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : defaultPropsValues['opacity'];
-            } else {
-              if ( coreProps[indexOf](tweenProperty) !== -1 ) {
-                startValues[tweenProperty] = getCurrentStyle(this[element],tweenProperty) || d[tweenProperty];
-              } else { // plugins register here
-                startValues[tweenProperty] = tweenProperty in prepareStart ? prepareStart[tweenProperty].call(this,tweenProperty,this[valuesStart][tweenProperty]) : 0;
-              }
-            }
-          } else {
-            startValues[tweenProperty] = this[element] === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this[element].scrollTop;
-          }
-        }
-      }
-      for ( var currentProperty in currentStyle ){ // also add to startValues values from previous tweens
-        if ( transformFunctions[indexOf](currentProperty) !== -1 && (!( currentProperty in this[valuesStart] )) ) {
-          startValues[currentProperty] = currentStyle[currentProperty] || defaultPropsValues[currentProperty];
-        }
-      }
-
-      this[valuesStart] = {};
-      preparePropertiesObject.call(this,startValues,'start');
-
-      if ( transformProperty in this[valuesEnd] ) { // let's stack transform
-        for ( var sp in this[valuesStart][transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
-          if ( sp !== 'perspective') {
-            if ( typeof this[valuesStart][transformProperty][sp] === 'object' ) {
-              for ( var spp in this[valuesStart][transformProperty][sp] ) { // 3rd level
-                if ( typeof this[valuesEnd][transformProperty][sp] === 'undefined' ) { this[valuesEnd][transformProperty][sp] = {}; }
-                if ( typeof this[valuesStart][transformProperty][sp][spp] === 'number' && typeof this[valuesEnd][transformProperty][sp][spp] === 'undefined' ) {
-                  this[valuesEnd][transformProperty][sp][spp] = this[valuesStart][transformProperty][sp][spp];
-                }
-              }
-            } else if ( typeof this[valuesStart][transformProperty][sp] === 'number' ) {
-              if ( typeof this[valuesEnd][transformProperty][sp] === 'undefined' ) { // scale
-                this[valuesEnd][transformProperty][sp] = this[valuesStart][transformProperty][sp];
-              }
-            }
-          }
-        }
-      }
-    };
-
-  // core easing functions
-  var easingFn = g.Easing = {};
-  easingFn.linear = function (t) { return t; };
-  easingFn.easingSinusoidalIn = function(t) { return -Math.cos(t * Math.PI / 2) + 1; };
-  easingFn.easingSinusoidalOut = function(t) { return Math.sin(t * Math.PI / 2); };
-  easingFn.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(Math.PI * t) - 1); };
-  easingFn.easingQuadraticIn = function (t) { return t*t; };
-  easingFn.easingQuadraticOut = function (t) { return t*(2-t); };
-  easingFn.easingQuadraticInOut = function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; };
-  easingFn.easingCubicIn = function (t) { return t*t*t; };
-  easingFn.easingCubicOut = function (t) { return (--t)*t*t+1; };
-  easingFn.easingCubicInOut = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; };
-  easingFn.easingQuarticIn = function (t) { return t*t*t*t; };
-  easingFn.easingQuarticOut = function (t) { return 1-(--t)*t*t*t; };
-  easingFn.easingQuarticInOut = function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; };
-  easingFn.easingQuinticIn = function (t) { return t*t*t*t*t; };
-  easingFn.easingQuinticOut = function (t) { return 1+(--t)*t*t*t*t; };
-  easingFn.easingQuinticInOut = function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; };
-  easingFn.easingCircularIn = function(t) { return -(Math.sqrt(1 - (t * t)) - 1); };
-  easingFn.easingCircularOut = function(t) { return Math.sqrt(1 - (t = t - 1) * t); };
-  easingFn.easingCircularInOut = function(t) {  return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); };
-  easingFn.easingExponentialIn = function(t) { return Math.pow(2, 10 * (t - 1)) - 0.001; };
-  easingFn.easingExponentialOut = function(t) { return 1 - Math.pow(2, -10 * t); };
-  easingFn.easingExponentialInOut = function(t) { return (t *= 2) < 1 ? 0.5 * Math.pow(2, 10 * (t - 1)) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))); };
-  easingFn.easingBackIn = function(t) { var s = 1.70158; return t * t * ((s + 1) * t - s); };
-  easingFn.easingBackOut = function(t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; };
-  easingFn.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); };
-  easingFn.easingElasticIn = function(t) {
-    var s, _kea = 0.1, _kep = 0.4;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2;
-    return - ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) );
-  };
-  easingFn.easingElasticOut = function(t) {
-    var s, _kea = 0.1, _kep = 0.4;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ;
-    return ( _kea * Math.pow( 2, - 10 * t) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) + 1 );
-  };
-  easingFn.easingElasticInOut = function(t) {
-    var s, _kea = 0.1, _kep = 0.4;
-    if ( t === 0 ) return 0; if ( t === 1 ) return 1;
-    if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ;
-    if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) );
-    return _kea * Math.pow( 2, -10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * Math.PI * 2  / _kep ) * 0.5 + 1;
-  };
-  easingFn.easingBounceIn = function(t) { return 1 - easingFn.easingBounceOut( 1 - t ); };
-  easingFn.easingBounceOut = function(t) {
-    if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; }
-    else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; }
-    else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; }
-    else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
-  };
-  easingFn.easingBounceInOut = function(t) { if ( t < 0.5 ) return easingFn.easingBounceIn( t * 2 ) * 0.5; return easingFn.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
-
-  // single Tween object construct
-  var Tween = function (targetElement, startObject, endObject, optionsObj) {
-      this[element] = 'scroll' in endObject && (targetElement === undefined || targetElement === null) ? scrollContainer : targetElement; // element animation is applied to
-
-      this[playing] = false;
-      this.reversed = false;
-      this.paused = false;
-
-      this._startTime = null;
-      this._pauseTime = null;
-
-      this._startFired = false;
-      this[options] = {}; for (var o in optionsObj) { this[options][o] = optionsObj[o]; }
-      this[options].rpr = optionsObj.rpr || false; // internal option to process inline/computed style at start instead of init true/false
-
-      this[valuesRepeat] = {}; // internal valuesRepeat
-      this[valuesEnd] = {}; // valuesEnd
-      this[valuesStart] = {}; // valuesStart
-
-      preparePropertiesObject.call(this,endObject,'end'); // valuesEnd
-      if ( this[options].rpr ) { this[valuesStart] = startObject; } else { preparePropertiesObject.call(this,startObject,'start'); } // valuesStart
-
-      if ( this[options].perspective !== undefined && transformProperty in this[valuesEnd] ) { // element transform perspective
-        var perspectiveString = 'perspective('+parseInt(this[options].perspective)+'px)';
-        this[valuesEnd][transformProperty].perspective = perspectiveString;
-      }
-
-      for ( var repeatProp in this[valuesEnd] ) {
-        if (repeatProp in crossCheck && !this[options].rpr) crossCheck[repeatProp].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
-      }
-
-      this[options][chain] = []; // chained Tweens
-      this[options][easing] = processEasing(optionsObj[easing]) || easingFn[defaultOptions[easing]] || easingFn['linear']; // you can only set a core easing function as default
-      this[options][repeat] = optionsObj[repeat] || defaultOptions[repeat];
-      this[options][repeatDelay] = optionsObj[repeatDelay] || defaultOptions[repeatDelay];
-      this[options][yoyo] = optionsObj[yoyo] || defaultOptions[yoyo];
-      this[options][duration] = optionsObj[duration] || defaultOptions[duration]; // duration option | default
-      this[options][delay] = optionsObj[delay] || defaultOptions[delay]; // delay option | default
-
-      this[repeat] = this[options][repeat]; // we cache the number of repeats to be able to put it back after all cycles finish
-    },
-    // tween control and chain
-    TweenProto = Tween.prototype = {
-      // queue tween object to main frame update
-      start : function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
-        scrollIn.call(this);
-
-        if ( this[options].rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
-        perspective.apply(this); // apply the perspective and transform origin
-
-        for ( var endProp in this[valuesEnd] ) {
-          if (endProp in crossCheck && this[options].rpr) crossCheck[endProp].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
-          this[valuesRepeat][endProp] = this[valuesStart][endProp];
-        }
-
-        // now it's a good time to start
-        tweens.push(this);
-        this[playing] = true;
-        this.paused = false;
-        this._startFired = false;
-        this._startTime = t || time.now();
-        this._startTime += this[options][delay];
-
-        if (!this._startFired) {
-          if (this[options].start) { this[options].start.call(this); }
-          this._startFired = true;
-        }
-        !tick && ticker();
-        return this;
-      },
-      play : function () {
-        if (this.paused && this[playing]) {
-          this.paused = false;
-          if (this[options].resume) { this[options].resume.call(this); }
-          this._startTime += time.now()  - this._pauseTime;
-          add(this);
-          !tick && ticker();  // restart ticking if stopped
-        }
-        return this;
-      },
-      resume : function () { return this.play(); },
-      pause : function() {
-        if (!this.paused && this[playing]) {
-          remove(this);
-          this.paused = true;
-          this._pauseTime = time.now();
-          if (this[options].pause) { this[options].pause.call(this); }
-        }
-        return this;
-      },
-      stop : function () {
-        if (!this.paused && this[playing]) {
-          remove(this);
-          this[playing] = false;
-          this.paused = false;
-          scrollOut.call(this);
-
-          if (this[options].stop) { this[options].stop.call(this); }
-          this.stopChainedTweens();
-          close.call(this);
-        }
-        return this;
-      },
-      chain : function() { this[options][chain] = arguments; return this; },
-      stopChainedTweens : function () {
-        for (var i = 0, ctl = this[options][chain][length]; i < ctl; i++) {
-          this[options][chain][i].stop();
-        }
-      }
-    },
-
-    // the multi elements Tween constructs
-    TweensTO = function (els, vE, o) { // .to
-      this.tweens = []; var optionsObj = [];
-      for ( var i = 0, tl = els[length]; i < tl; i++ ) {
-        optionsObj[i] = o || {}; o[delay] = o[delay] || defaultOptions[delay];
-        optionsObj[i][delay] = i>0 ? o[delay] + (o[offset]||defaultOptions[offset]) : o[delay];
-        this.tweens.push( to(els[i], vE, optionsObj[i]) );
-      }
-    },
-    TweensFT = function (els, vS, vE, o) { // .fromTo
-      this.tweens = []; var optionsObj = [];
-      for ( var i = 0, l = els[length]; i < l; i++ ) {
-        optionsObj[i] = o || {}; o[delay] = o[delay] || defaultOptions[delay];
-        optionsObj[i][delay] = i>0 ? o[delay] + (o[offset]||defaultOptions[offset]) : o[delay];
-        this.tweens.push( fromTo(els[i], vS, vE, optionsObj[i]) );
-      }
-    },
-    ws = TweensTO.prototype = TweensFT.prototype = {
-      start : function(t){
-        t = t || time.now();
-        for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) {
-          this.tweens[i].start(t);
-        }
-        return this;
-      },
-      stop : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].stop(); } return this; },
-      pause : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].pause(); } return this; },
-      chain : function(){ this.tweens[this.tweens[length]-1][options][chain] = arguments; return this; },
-      play : function(){ for ( var i = 0, tl = this.tweens[length]; i < tl; i++ ) { this.tweens[i].play(); } return this; },
-      resume : function() {return this.play()}
-    },
-
-    // main methods
-    to = function (element, endObject, optionsObj) {
-      optionsObj = optionsObj || {}; optionsObj.rpr = true;
-      return new Tween(selector(element), endObject, endObject, optionsObj);
-    },
-    fromTo = function (element, startObject, endObject, optionsObj) {
-      optionsObj = optionsObj || {};
-      return new Tween(selector(element), startObject, endObject, optionsObj);
-    },
-
-    // multiple elements tweening
-    allTo = function (elements, endObject, optionsObj) {
-      return new TweensTO(selector(elements,true), endObject, optionsObj);
-    },
-    allFromTo = function (elements, startObject, endObject, optionsObj) {
-      return new TweensFT(selector(elements,true), startObject, endObject, optionsObj);
-    };
-
-  document[addEventListener](touchOrWheel, preventScroll, false);
-  document[addEventListener](mouseEnter, preventScroll, false);
-
-  return { // export core methods to public for plugins
-    property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
-    defaultOptions : defaultOptions, // default tween options since 1.6.1
-    to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
-    ticker : ticker, tick : tick, tweens : tweens, update: update, dom : DOM, // update
-    parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck
-    truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing
-  };
-}));
\ No newline at end of file
diff --git a/package.json b/package.json
index 3b20fa1..69e0cda 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,33 @@
 {
   "name": "kute.js",
-  "version": "1.6.7",
-  "description": "Complete Native Javascript animation engine.",
-  "main": "kute.js",
+  "version": "2.0.0",
+  "description": "JavaScript animation engine of the future is called KUTE.js.",
+  "main": "dist/kute.min.js",
+  "module": "dist/kute.esm.js",
+  "jsnext": "src/index.js",
+  "files": [
+    "dist/*.{js,map}",
+    "src/**/*.{js,map}",
+    "src/*.{js,map}"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "min": "node build.js"
+    "help": "rollup --help",
+    "build": "npm-run-all --parallel copy-build build-*",
+    "custom": "rollup -c --environment",
+    "copy-build": "rollup -c --environment INPUTFILE:src/index.js,OUTPUTFILE:demo/src/kute.min.js,DIST:standard,MIN:true,FORMAT:umd -c",
+    "build-standard": "rollup --environment DIST:standard,MIN:false,FORMAT:umd -c",
+    "build-standard-min": "rollup --environment DIST:standard,MIN:true,FORMAT:umd -c",
+    "build-standard-esm": "rollup --environment DIST:standard,MIN:false,FORMAT:esm -c",
+    "build-standard-esm-min": "rollup --environment DIST:standard,MIN:true,FORMAT:esm -c",
+    "build-base": "rollup --environment DIST:base,MIN:false,FORMAT:umd -c",
+    "build-base-min": "rollup --environment DIST:base,MIN:true,FORMAT:umd -c",
+    "build-extra": "rollup --environment DIST:extra,MIN:false,FORMAT:umd -c",
+    "build-extra-min": "rollup --environment DIST:extra,MIN:true,FORMAT:umd -c",
+    "polyfill": "npm-run-all --parallel pln plnm copy-polyfill",
+    "copy-polyfill": "rollup --environment INPUTFILE:src/util/polyfill.js,OUTPUTFILE:demo/src/polyfill.min.js,FORMAT:esm,MIN:true,POLYFILL:true -c",
+    "pln": "rollup --environment INPUTFILE:src/util/polyfill.js,OUTPUTFILE:dist/polyfill.js,FORMAT:esm,MIN:false,POLYFILL:true -c",
+    "plnm": "rollup --environment INPUTFILE:src/util/polyfill.js,OUTPUTFILE:dist/polyfill.min.js,FORMAT:esm,MIN:true,POLYFILL:true -c"
   },
   "repository": {
     "type": "git",
@@ -15,11 +37,13 @@
     "kute.js",
     "svg morph",
     "svg transform",
+    "css3 transform",
+    "matrix transform",
     "tweening engine",
     "animation engine",
     "javascript animation engine",
     "javascript animation",
-    "animations",
+    "animation",
     "native javascript"
   ],
   "author": "thednp",
@@ -29,6 +53,17 @@
   },
   "homepage": "http://thednp.github.io/kute.js",
   "dependencies": {
-    "uglify-js": "^2.7.3"
+    "cubic-bezier-easing": "^1.0.2",
+    "minifill": "^0.0.7",
+    "shorter-js": "^0.0.4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.32.1",
+    "rollup-plugin-cleanup": "^3.1.1",
+    "rollup-plugin-terser": "^5.3.0"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..e629195
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,58 @@
+'use strict'
+import buble from '@rollup/plugin-buble'
+import {terser} from 'rollup-plugin-terser'
+import node from '@rollup/plugin-node-resolve'
+import cleanup from 'rollup-plugin-cleanup'
+import json from '@rollup/plugin-json'
+import * as pkg from "./package.json"
+
+const POLYFILL = process.env.POLYFILL === 'true'
+const POLYIN = process.env.INPUTFILE
+const POLYOUT = process.env.OUTPUTFILE
+const DIST = process.env.DIST // base|standard|extra
+const NAME = !POLYFILL ? DIST.charAt(0).toUpperCase() + DIST.slice(1):''; // Base|Standard|Extra
+const MIN = process.env.MIN === 'true' // true/false|unset
+const FORMAT = process.env.FORMAT // umd|iife|esm
+
+const year = (new Date).getFullYear()
+const banner = POLYFILL && POLYIN && POLYOUT ? '"use strict";':
+`/*!
+* KUTE.js ${NAME} v${pkg.version} (${pkg.homepage})
+* Copyright 2015-${year} © ${pkg.author}
+* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
+*/`
+const miniBanner = POLYFILL && POLYIN && POLYOUT ? banner :
+`// KUTE.js ${NAME} v${pkg.version} | ${pkg.author} © ${year} | ${pkg.license}-License`
+
+const INPUTFILE = POLYFILL && POLYIN || POLYIN ? POLYIN : (DIST === 'standard' ? 'src/index.js' : 'src/index-'+DIST+'.js')
+const OUTPUTFILE = POLYFILL && POLYOUT || POLYOUT ? POLYOUT : (DIST === 'standard' ? 'dist/kute'+(FORMAT==='esm'?'.esm':'')+(MIN?'.min':'')+'.js' : 'demo/src/kute-'+DIST+(FORMAT==='esm'?'.esm':'')+(MIN?'.min':'')+'.js')
+
+const OUTPUT = {
+  file: OUTPUTFILE,
+  format: FORMAT, // or iife
+}
+
+const PLUGINS = [
+  node({mainFields: ['jsnext', 'module']}),
+  json(),
+  buble(),
+]
+
+if (MIN){
+  PLUGINS.push(terser({output: {preamble: miniBanner}}));
+} else {
+  OUTPUT.banner = banner;
+  PLUGINS.push(cleanup());
+}
+
+if (FORMAT!=='esm') {
+  OUTPUT.name = 'KUTE';
+}
+
+export default [
+  {
+    input: INPUTFILE,
+    output: OUTPUT,
+    plugins: PLUGINS
+  }
+]
diff --git a/src/animation/animation.js b/src/animation/animation.js
new file mode 100644
index 0000000..40a4aac
--- /dev/null
+++ b/src/animation/animation.js
@@ -0,0 +1,118 @@
+import {
+  supportedProperties,
+  defaultValues,
+  defaultOptions,
+  prepareProperty,
+  prepareStart,
+  onStart,
+  onComplete,
+  crossCheck,
+  linkProperty,
+  Util
+} from '../core/objects.js'
+import Interpolate from '../core/interpolate.js'
+
+// Animation class 
+// * builds KUTE components 
+// * populate KUTE objects
+// * AnimatonBase creates a KUTE.js build for pre-made Tween objects
+// * AnimatonDevelopment can help you debug your new components
+export default class Animation {
+  constructor(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)
+    }
+  }
+  setComponent(Component){
+    const propertyInfo = this
+    const ComponentName = Component.component
+    // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util }
+    const Functions = { prepareProperty, prepareStart, onStart, onComplete, crossCheck }
+    const Category = Component.category
+    const Property = Component.property
+    const Length = Component.properties && Component.properties.length || Component.subProperties && Component.subProperties.length
+
+    // {property,defaultvalue,defaultOptions,Interpolate,functions} // single property
+    // {category,properties,defaultvalues,defaultOptions,Interpolate,functions} // category colors, boxModel, borderRadius
+    // {property,subProperties,defaultvalues,defaultOptions,Interpolate,functions} // property with multiple sub properties. Eg transform, filter
+    // {category,subProperties,defaultvalues,defaultOptions,Interpolate,functions} // property with multiple sub properties. Eg attr
+    
+    // set supported category/property
+    supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property
+
+    // set defaultValues
+    if ('defaultValue' in Component){ // value 0 will invalidate
+      defaultValues[ Property ] = Component.defaultValue
+
+      // minimal info
+      propertyInfo.supports = `${Property} property`
+
+    } else if (Component.defaultValues) {
+      for (const dv in Component.defaultValues) {
+        defaultValues[dv] = Component.defaultValues[dv]
+      }
+      // minimal info
+      propertyInfo.supports = `${Length||Property} ${Property||Category} properties`
+    }
+
+    // set additional options
+    if (Component.defaultOptions) {
+      for (const op in Component.defaultOptions) {
+        defaultOptions[op] = Component.defaultOptions[op]
+      }
+    }
+
+    // set functions
+    if (Component.functions) {
+      for (const fn in Functions) {
+        if (fn in Component.functions) {
+          if (typeof (Component.functions[fn]) === 'function' ) {
+            // !Functions[fn][ Category||Property ] && (Functions[fn][ Category||Property ] = Component.functions[fn])
+            !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {})
+            !Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn])
+          } else {
+            for ( const ofn in Component.functions[fn] ){
+              // !Functions[fn][ofn] && (Functions[fn][ofn] = Component.functions[fn][ofn])
+              !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {})
+              !Functions[fn][ComponentName][ofn] && (Functions[fn][ComponentName][ofn] = Component.functions[fn][ofn])
+            }
+          }
+        }
+      }
+    }
+
+    // set component interpolate
+    if (Component.Interpolate) {
+      for (const fn in Component.Interpolate) {
+        const compIntObj = Component.Interpolate[fn]
+        if ( typeof(compIntObj) === 'function' && !Interpolate[fn] ) {
+          Interpolate[fn] = compIntObj;
+        } else {
+          for ( const sfn in compIntObj ) {
+            if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn] ) {
+              Interpolate[fn] = compIntObj[sfn];
+            }
+          }
+        }
+      }
+      linkProperty[ComponentName] = Component.Interpolate
+    }
+
+    // set component util
+    if (Component.Util) {
+      for (const fn in Component.Util){
+        !Util[fn] && (Util[fn] = Component.Util[fn])
+      }
+    }
+
+    return propertyInfo
+  }
+}
\ No newline at end of file
diff --git a/src/animation/animationBase.js b/src/animation/animationBase.js
new file mode 100644
index 0000000..da4894d
--- /dev/null
+++ b/src/animation/animationBase.js
@@ -0,0 +1,67 @@
+import {supportedProperties,defaultOptions,onStart,onComplete,crossCheck,linkProperty,Util} from '../core/objects.js'
+import Interpolate from '../core/interpolate.js'
+
+// Animation class 
+export default class AnimationBase {
+  constructor(Component){
+    this.Component = Component
+    return this.setComponent()
+  }
+  setComponent(){
+    const Component = this.Component
+    const ComponentName = Component.component
+    // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty }
+    const Functions = { onStart, onComplete, crossCheck }
+    const Category = Component.category
+    const Property = Component.property
+
+    // set supported category/property
+    supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property
+
+    // set additional options
+    if (Component.defaultOptions) {
+      for (const op in Component.defaultOptions) {
+        defaultOptions[op] = Component.defaultOptions[op]
+      }
+    }
+
+    // set functions
+    if (Component.functions) {
+      for (const fn in Functions) {
+        if (fn in Component.functions && ['onStart','onComplete'].includes(fn)) {
+          if (typeof (Component.functions[fn]) === 'function' ) {
+            // !Functions[fn][ Category||Property ] && (Functions[fn][ Category||Property ] = Component.functions[fn])
+            !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {})
+            !Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn])
+          } else {
+            for ( const ofn in Component.functions[fn] ){
+              // !Functions[fn][ofn] && (Functions[fn][ofn] = Component.functions[fn][ofn])
+              !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {})
+              !Functions[fn][ComponentName][ofn] && (Functions[fn][ComponentName][ofn] = Component.functions[fn][ofn])
+            }
+          }
+        }
+      }
+    }
+
+    // set interpolate
+    if (Component.Interpolate) {
+      for (const fn in Component.Interpolate) {
+        // register new Interpolation functions
+        if (!Interpolate[fn]) {
+          Interpolate[fn] = Component.Interpolate[fn];
+        }
+      }
+      linkProperty[ComponentName] = Component.Interpolate
+    }
+
+    // set component util
+    if (Component.Util) {
+      for (const fn in Component.Util){
+        !Util[fn] && (Util[fn] = Component.Util[fn])
+      }
+    }
+
+    return {name:ComponentName}
+  }
+}
\ No newline at end of file
diff --git a/src/animation/animationDevelopment.js b/src/animation/animationDevelopment.js
new file mode 100644
index 0000000..213b747
--- /dev/null
+++ b/src/animation/animationDevelopment.js
@@ -0,0 +1,98 @@
+import {prepareProperty,prepareStart,onStart,onComplete,crossCheck} from '../core/objects.js'
+import Interpolate from '../core/interpolate.js'
+import Animation from './animation.js'
+
+// AnimationDevelopment class 
+export default class AnimationDevelopment extends Animation {
+  constructor(...args){
+    super(...args)
+  }
+  setComponent(Component){
+    super.setComponent(Component)
+
+    const propertyInfo = this
+    // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util }
+    const Functions = { prepareProperty,prepareStart,onStart,onComplete,crossCheck }
+    const Category = Component.category
+    const Property = Component.property
+    const Length = Component.properties && Component.properties.length || Component.subProperties && Component.subProperties.length
+
+    // set defaultValues
+    if ('defaultValue' in Component){ // value 0 will invalidate
+
+      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`
+    }
+
+    // set additional options
+    if (Component.defaultOptions) {
+      propertyInfo.extends = []
+
+      for (const op in Component.defaultOptions) {
+        propertyInfo.extends.push(op)
+      }
+
+      propertyInfo.extends.length ? propertyInfo.extends = `with <${propertyInfo.extends.join(', ')}> new option(s)` : delete propertyInfo.extends
+    }
+
+    // set functions
+    if (Component.functions) {
+      propertyInfo.interface = []
+      propertyInfo.render = []
+      propertyInfo.warning = []
+      for (const 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
+    }
+
+    // register Interpolation functions
+    if (Component.Interpolate) {
+      propertyInfo.uses = []
+      propertyInfo.adds = []
+
+      for (const fn in Component.Interpolate) {
+        const compIntObj = Component.Interpolate[fn]
+        // register new Interpolation functions
+        if ( typeof(compIntObj) === 'function' ) {
+          if ( !Interpolate[fn] ) {
+            propertyInfo.adds.push(`${fn}`)
+          }
+          propertyInfo.uses.push(`${fn}`)
+        } else {
+          for ( const sfn in compIntObj ) {
+            if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn] ) {
+              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`
+    }
+
+    // set component util
+    if (Component.Util) {
+      propertyInfo.hasUtil = Object.keys(Component.Util).join(',')
+    }
+  
+    return propertyInfo
+  }
+}
\ No newline at end of file
diff --git a/src/components/backgroundPosition.js b/src/components/backgroundPosition.js
new file mode 100644
index 0000000..832d772
--- /dev/null
+++ b/src/components/backgroundPosition.js
@@ -0,0 +1,59 @@
+import KUTE from '../core/globals.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {getStyleForProperty} from '../core/process.js'
+import {numbers} from '../core/interpolate.js' 
+import {trueDimension} from '../util/util.js'
+
+// const bgPosProp = { property : 'backgroundPosition', defaultValue: [0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
+
+// Component Functions
+export function getBgPos(prop){
+  return getStyleForProperty(this.element,prop) || defaultValues[prop];
+}
+export function prepareBgPos(prop,value){
+  if ( value instanceof Array ){
+    const x = trueDimension(value[0]).v, 
+          y = trueDimension(value[1]).v;
+    return [ x !== NaN ? x : 50, y !== NaN ? y : 50 ];
+  } else {
+    let 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 ];
+  }
+}
+export function onStartBgPos(prop){
+  if ( this.valuesEnd[prop] && !KUTE[prop]) { // opacity could be 0
+    KUTE[prop] = (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)}%`;
+    }
+  }
+}
+
+// All Component Functions
+export const bgPositionFunctions = {
+  prepareStart: getBgPos,
+  prepareProperty: prepareBgPos,
+  onStart: onStartBgPos
+}
+
+// Component Base Object
+export const baseBgPosOps = {
+  component: 'BgPositionProp',
+  property: 'backgroundPosition',
+  // defaultValue: [50,50],
+  Interpolate: {numbers},
+  functions: {onStart: onStartBgPos}
+}
+
+// Component Full Object
+export const bgPosOps = {
+  component: 'BgPositionProp',
+  property: 'backgroundPosition',
+  defaultValue: [50,50],
+  Interpolate: {numbers},
+  functions: bgPositionFunctions,
+  Util: {trueDimension}
+}
+
+Components.BackgroundPositionProperty = bgPosOps
\ No newline at end of file
diff --git a/src/components/borderRadius.js b/src/components/borderRadius.js
new file mode 100644
index 0000000..bb81944
--- /dev/null
+++ b/src/components/borderRadius.js
@@ -0,0 +1,62 @@
+import KUTE from '../core/globals.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {trueDimension} from '../util/util.js'
+import {getStyleForProperty} from '../core/process.js'
+import {units} from '../core/interpolate.js' 
+
+// const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} }
+
+// Component Properties
+const radiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']
+const radiusValues = {}
+
+radiusProps.map(x => radiusValues[x] = 0);
+
+// Component Functions
+export function radiusOnStartFn(tweenProp){
+  if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+    KUTE[tweenProp] = (elem, a, b, v) => {
+      elem.style[tweenProp] = units(a.v,b.v,b.u,v);
+    }
+  }
+}
+const radiusOnStart = {}
+radiusProps.forEach(tweenProp => {
+  radiusOnStart[tweenProp] = radiusOnStartFn
+});
+export function getRadius(tweenProp){
+  return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
+}
+export function prepareRadius(tweenProp,value){
+  return trueDimension(value);
+}
+
+// All Component Functions
+export const radiusFunctions = {
+  prepareStart: getRadius,
+  prepareProperty: prepareRadius,
+  onStart: radiusOnStart
+}
+
+// Base Component
+export const baseRadiusOps = {
+  component: 'borderRadiusProps',
+  category: 'borderRadius',
+  properties: radiusProps,
+  // defaultValues: radiusValues,
+  Interpolate: {units},
+  functions: {onStart: radiusOnStart}
+}
+
+// Full Component
+export const radiusOps = {
+  component: 'borderRadiusProps',
+  category: 'borderRadius',
+  properties: radiusProps,
+  defaultValues: radiusValues,
+  Interpolate: {units},
+  functions: radiusFunctions,
+  Util: {trueDimension}
+}
+
+Components.BorderRadiusProperties = radiusOps
\ No newline at end of file
diff --git a/src/components/boxModel.js b/src/components/boxModel.js
new file mode 100644
index 0000000..14c4cb2
--- /dev/null
+++ b/src/components/boxModel.js
@@ -0,0 +1,78 @@
+import KUTE from '../core/globals.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {trueDimension} from '../util/util.js' 
+import {getStyleForProperty} from '../core/process.js' 
+import {numbers} from '../core/interpolate.js' 
+
+// Component Properties
+const 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']
+const boxModelValues = {}
+boxModelProperties.map(x => boxModelValues[x] = 0);
+
+// Component Functions
+export function boxModelOnStart(tweenProp){
+  if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+    KUTE[tweenProp] = (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`;
+      // elem.style[tweenProp] = `${(numbers(a,b,v) ) >> 0}px`;
+    }
+  }
+}
+export function getBoxModel(tweenProp){
+  return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
+}
+export function prepareBoxModel(tweenProp,value){
+  const boxValue = trueDimension(value), offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth';
+  return boxValue.u === '%' ? boxValue.v * this.element[offsetProp] / 100 : boxValue.v;
+}
+const boxPropsOnStart = {}
+boxModelProperties.map(x => boxPropsOnStart[x] = boxModelOnStart );
+
+// All Component Functions
+const boxModelFunctions = {
+  prepareStart: getBoxModel,
+  prepareProperty: prepareBoxModel,
+  onStart: boxPropsOnStart
+}
+
+// Component Base Props
+const baseBoxProps = ['top','left','width','height']
+const baseBoxPropsValues = {top:0,left:0,width:0,height:0}
+const baseBoxOnStart = {}
+baseBoxProps.map(x=>baseBoxOnStart[x] = boxModelOnStart)
+
+// Component Base
+export const baseBoxModelOps = {
+  component: 'boxModelProps',
+  category: 'boxModel',
+  properties: baseBoxProps,
+  // defaultValues: baseBoxPropsValues,
+  Interpolate: {numbers},
+  functions: {onStart: baseBoxOnStart}
+}
+
+// Component Essential
+export const essentialBoxModelOps = {
+  component: 'boxModelProps',
+  category: 'boxModel',
+  properties: ['top','left','width','height'],
+  defaultValues: baseBoxPropsValues,
+  Interpolate: {numbers},
+  functions: boxModelFunctions,
+  Util:{trueDimension}
+}
+
+// Component Full Component
+export const boxModelOps = {
+  component: 'boxModelProps',
+  category: 'boxModel',
+  properties: boxModelProperties,
+  defaultValues: boxModelValues,
+  Interpolate: {numbers},
+  functions: boxModelFunctions
+}
+
+Components.BoxModelProperties = boxModelOps
diff --git a/src/components/clipProperty.js b/src/components/clipProperty.js
new file mode 100644
index 0000000..1e50dd8
--- /dev/null
+++ b/src/components/clipProperty.js
@@ -0,0 +1,62 @@
+import KUTE from '../core/globals.js'
+import {Components} from '../core/objects.js'
+import {trueDimension} from '../util/util.js' 
+import {getStyleForProperty} from '../core/process.js' 
+import {numbers} from '../core/interpolate.js'
+
+// Component Functions
+export function getClip(tweenProp,v){
+  const currentClip = getStyleForProperty(this.element,tweenProp), 
+        width = getStyleForProperty(this.element,'width'), 
+        height = getStyleForProperty(this.element,'height');
+  return !/rect/.test(currentClip) ? [0, width, height, 0] : currentClip;
+}
+export 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]) ];
+  }
+}
+export function onStartClip(tweenProp) {
+  if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { 
+    KUTE[tweenProp] = (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})`;
+    }
+  }
+} 
+
+// All Component Functions
+export const clipFunctions = {
+  prepareStart: getClip,
+  prepareProperty: prepareClip,
+  onStart: onStartClip
+}
+
+// Component Base
+export const baseClipOps = {
+  component: 'clipProperty',
+  property: 'clip',
+  // defaultValue: [0,0,0,0],
+  Interpolate: {numbers},
+  functions: {onStart:onStartClip}
+}
+
+// Component Full
+export const clipOps = {
+  component: 'clipProperty',
+  property: 'clip',
+  defaultValue: [0,0,0,0],
+  Interpolate: {numbers},
+  functions: clipFunctions,
+  Util: {trueDimension}
+}
+
+Components.ClipProperty = clipOps
\ No newline at end of file
diff --git a/src/components/colorProperties.js b/src/components/colorProperties.js
new file mode 100644
index 0000000..12657e6
--- /dev/null
+++ b/src/components/colorProperties.js
@@ -0,0 +1,77 @@
+import KUTE from '../core/globals.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {getStyleForProperty} from '../core/process.js' 
+import {numbers} from '../core/interpolate.js' 
+import {trueColor} from '../util/util.js' 
+
+// Component Interpolation
+// rgba1, rgba2, progress
+export function colors(a, b, v) {
+  let _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;
+}
+
+// Component Properties
+// supported formats
+// 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+)
+const supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']
+const defaultColors = {}
+
+supportedColors.forEach(tweenProp => {
+  defaultColors[tweenProp] = '#000'
+});
+
+// Component Functions
+export function onStartColors(tweenProp){
+  if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+    KUTE[tweenProp] = (elem, a, b, v) => {
+      elem.style[tweenProp] = colors(a,b,v);
+    }
+  }
+}
+const colorsOnStart = {}
+supportedColors.map(x => colorsOnStart[x] = onStartColors)
+
+export function getColor(prop,value) {
+  return getStyleForProperty(this.element,prop) || defaultValues[prop];
+}
+export function prepareColor(prop,value) {
+  return trueColor(value);
+}
+
+// All Component Functions
+export const colorsFunctions = {
+  prepareStart: getColor,
+  prepareProperty: prepareColor,
+  onStart: colorsOnStart
+}
+
+// Component Base
+export const baseColorsOps = {
+  component: 'colorProps',
+  category: 'colors',
+  properties: supportedColors,
+  // defaultValues: defaultColors,
+  Interpolate: {numbers,colors},
+  functions: {onStart:onStartColors}
+}
+
+// Component Full
+export const colorsOps = {
+  component: 'colorProps',
+  category: 'colors',
+  properties: supportedColors,
+  defaultValues: defaultColors,
+  Interpolate: {numbers,colors},
+  functions: colorsFunctions,
+  Util: {trueColor}
+}
+
+Components.ColorProperties = colorsOps
diff --git a/src/components/crossBrowserMove.js b/src/components/crossBrowserMove.js
new file mode 100644
index 0000000..9c552c9
--- /dev/null
+++ b/src/components/crossBrowserMove.js
@@ -0,0 +1,75 @@
+import KUTE from '../core/globals.js'
+import {trueProperty} from '../util/util.js'
+import {getInlineStyle} from '../core/process.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {numbers} from '../core/interpolate.js' 
+
+// Component Const
+const transformProperty = trueProperty('transform');
+const supportTransform = transformProperty in document.body.style ? 1 : 0;
+
+// Component Functions
+export function getComponentCurrentValue(tweenProp,value){
+  let currentTransform = getInlineStyle(this.element);
+  let left = this.element.style.left;
+  let top = this.element.style.top;
+  let x = supportTransform && currentTransform.translate ? currentTransform.translate[0]
+                          : isFinite(left*1) ? left 
+                          : defaultValues.move[0];
+  let y = supportTransform && currentTransform.translate ? currentTransform.translate[1]
+                          : isFinite(top*1) ? top 
+                          : defaultValues.move[1];
+  return [x,y]
+}
+export function prepareComponentValue(tweenProp,value){
+  let x = isFinite(value*1) ? parseInt(value) : parseInt(value[0]) || 0;
+  let y = parseInt(value[1]) || 0;
+
+  return [ x, y ]
+}
+export function onStartComponent(tweenProp,value){
+  if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+
+    if (supportTransform){
+      KUTE[tweenProp] = (elem, a, b, v) => {
+        elem.style[transformProperty] = 'translate('+numbers(a[0],b[0],v)+'px,'+numbers(a[1],b[1],v)+'px)';
+      }
+    } else {
+      KUTE[tweenProp] = (elem, a, b, v) => {
+        if (a[0]||b[0]) {
+            elem.style.left = numbers(a[0],b[0],v)+'px';
+        }
+        if (a[1]||b[1]) {
+            elem.style.top = numbers(a[1],b[1],v)+'px';
+        }
+      }
+    }
+  }
+}
+
+// All Component Functions
+const componentFunctions = {
+  prepareStart: getComponentCurrentValue,
+  prepareProperty: prepareComponentValue,
+  onStart: onStartComponent
+}
+
+// Base Component
+export const baseCrossBrowserMoveOps = {
+  component: 'crossBrowserMove',
+  property: 'move',
+  Interpolate: numbers,
+  functions: {onStart:onStartComponent}
+}
+
+// Full Component
+export const crossBrowserMoveOps = {
+  component: 'crossBrowserMove',
+  property: 'move',
+  defaultValue: [0,0],
+  Interpolate: numbers,
+  functions: componentFunctions,
+  Util: {trueProperty}
+}
+
+Components.CrossBrowserMove = crossBrowserMoveOps
\ No newline at end of file
diff --git a/src/components/filterEffects.js b/src/components/filterEffects.js
new file mode 100644
index 0000000..3a45023
--- /dev/null
+++ b/src/components/filterEffects.js
@@ -0,0 +1,179 @@
+import KUTE from '../core/globals.js'
+import {getStyleForProperty} from '../core/process.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {numbers} from '../core/interpolate.js' 
+import {trueColor} from '../util/util.js'
+import {colors} from './colorProperties.js' 
+
+// const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
+
+// Component Interpolation
+export function dropShadow(a,b,v){
+  let params = [], unit = 'px'
+
+  for (let 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){
+  let newShadow
+
+  if (shadow.length === 3) { // [h-shadow, v-shadow, color]
+    newShadow = [shadow[0], shadow[1], 0, shadow[2] ];
+  } else if (shadow.length === 4) { // ideal [, , , ]
+    newShadow = [shadow[0], shadow[1], shadow[2], shadow[3]];
+  }
+
+  // make sure the values are ready to tween
+  for (let i=0;i<3;i++){
+    newShadow[i] = parseFloat(newShadow[i]);  
+  }
+  // also the color must be a rgb object
+  newShadow[3] = trueColor(newShadow[3]);
+  return newShadow;
+}
+
+// Component Util
+function parseFilterString(currentStyle){
+  let result = {}
+  let fnReg = /(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g
+  let matches = currentStyle.match(fnReg);
+  const fnArray = currentStyle !== 'none' ? matches : 'none'
+
+  if (fnArray instanceof Array) {
+    for (let j=0, jl = fnArray.length; j!isNaN(el)).concat(shadowColor);
+      } else {
+        result[pp] = p[1].replace(/\'|\"|\)/g,'');
+      }
+    }
+  }
+  return result
+}
+
+// Component Functions
+export function getFilter(tweenProp,value) {
+  let currentStyle = getStyleForProperty(this.element,tweenProp),
+      filterObject = parseFilterString(currentStyle), fnp
+
+  for (let fn in value){
+    fnp = replaceDashNamespace(fn)
+    if ( !filterObject[fnp] ){
+      filterObject[fnp] = defaultValues[tweenProp][fn]
+    }
+  }
+  return filterObject;
+}
+export function prepareFilter(tweenProp,value) {
+  let filterObject = {}, fnp
+
+  // {opacity: [0-100%], blur: [0-Nem], saturate: [0-N%], invert: 0, grayscale: [0-100%], brightness: [0-N%], contrast: [0-N%], sepia: [0-N%], 'hueRotate': [0-Ndeg], 'dropShadow': [0,0,0,(r:0,g:0,b:0)], url:''},
+  // {opacity: 100,      blur: 0,       saturate: 100,    invert: 0, grayscale: 0,        brightness: 100,    contrast: 100,    sepia: 0,      'hueRotate':0,         'dropShadow': 0,                     url:''},
+
+  for (let fn in value){
+    fnp = replaceDashNamespace(fn)
+    if ( /hue/.test(fn) ) {
+      filterObject[fnp] = parseFloat(value[fn])      
+    } else if ( /drop/.test(fn)  ) {
+      filterObject[fnp] = parseDropShadow(value[fn])
+    } else if ( fn === 'url' ) {
+      filterObject[fn] = value[fn]
+    // } else if ( /blur|opacity|grayscale|sepia/.test(fn) ) {
+    } else {
+      filterObject[fn] = parseFloat(value[fn])
+    }
+  }
+
+  return filterObject;
+}
+export function onStartFilter(tweenProp) {
+  if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+    KUTE[tweenProp] = (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) : '')
+    }
+  }
+}
+export function crossCheckFilter(tweenProp){
+  if ( this.valuesEnd[tweenProp] ) { 
+    for (const fn in this.valuesStart[tweenProp]){
+      if (!this.valuesEnd[tweenProp][fn]){
+        this.valuesEnd[tweenProp][fn] = this.valuesStart[tweenProp][fn]
+      }
+    }
+  }
+}
+
+// All Component Functions
+export const filterFunctions = {
+  prepareStart: getFilter,
+  prepareProperty: prepareFilter,
+  onStart: onStartFilter,
+  crossCheck: crossCheckFilter
+}
+
+// Base Component
+export const baseFilterOps = {
+  component: 'filterEffects',
+  property: 'filter',
+  // subProperties: ['blur', 'brightness','contrast','dropShadow','hueRotate','grayscale','invert','opacity','saturate','sepia','url'], // opacity function interfere with opacityProperty
+  // 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,colors,dropShadow}
+  },
+  functions: {onStart:onStartFilter}
+}
+
+// Full Component
+export const filterOps = {
+  component: 'filterEffects',
+  property: 'filter',
+  // subProperties: ['blur', 'brightness','contrast','dropShadow','hueRotate','grayscale','invert','opacity','saturate','sepia','url'], // opacity function interfere with opacityProperty
+  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,colors,dropShadow}
+  },
+  functions: filterFunctions,
+  Util: {parseDropShadow,parseFilterString,replaceDashNamespace,trueColor}
+}
+
+Components.FilterEffects = filterOps
diff --git a/src/components/htmlAttributes.js b/src/components/htmlAttributes.js
new file mode 100644
index 0000000..1f5d855
--- /dev/null
+++ b/src/components/htmlAttributes.js
@@ -0,0 +1,117 @@
+import KUTE from '../core/globals.js'
+import {defaultValues, onStart, Components} from '../core/objects.js'
+import {numbers} from '../core/interpolate.js' 
+import {trueColor,trueDimension} from '../util/util.js' 
+import {colors} from './colorProperties.js/'
+
+// Component Name
+let ComponentName = 'htmlAttributes'
+
+// Component Properties
+const svgColors = ['fill','stroke','stop-color'];
+
+// Component Special
+let attributes = {};
+
+// Component Util
+function replaceUppercase (a) { return a.replace(/[A-Z]/g, "-$&").toLowerCase(); }
+
+// Component Functions
+export function getAttr(tweenProp,value){
+  const attrStartValues = {};
+  for (const attr in value){
+    const attribute = replaceUppercase(attr).replace(/_+[a-z]+/,''); // get the value for 'fill-opacity' not fillOpacity, also 'width' not the internal 'width_px'
+    const 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;
+}
+export function prepareAttr(tweenProp,attrObj){ // attr (string),attrObj (object)
+  const attributesObject = {};
+  for ( const p in attrObj ) {
+    const prop = replaceUppercase(p);
+    const regex = /(%|[a-z]+)$/;
+    const currentValue = this.element.getAttribute(prop.replace(/_+[a-z]+/,''));
+    if ( !svgColors.includes(prop)) {
+      if ( currentValue !== null && regex.test(currentValue) ) { // attributes set with unit suffixes
+        const unit = trueDimension(currentValue).u || trueDimension(attrObj[p]).u;
+        const suffix = /%/.test(unit) ? '_percent' : `_${unit}`;
+        onStart[ComponentName][prop+suffix] = function(tp) { // most "unknown" attributes cannot register into onStart, so we manually add them
+          if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) {
+            attributes[tp] = (elem, p, a, b, v) => {
+              const _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) { // most "unknown" attributes cannot register into onStart, so we manually add them
+          if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) {
+            attributes[tp] = (elem, oneAttr, a, b, v) => {
+              elem.setAttribute(oneAttr, (numbers(a,b,v) * 1000 >> 0) / 1000 );
+            }
+          }
+        }
+        attributesObject[prop] = parseFloat(attrObj[p]);
+      }
+    } else { // colors
+      onStart[ComponentName][prop] = function(tp) { // most "unknown" attributes cannot register into onStart, so we manually add them
+        if ( this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes) ) {
+          attributes[tp] = (elem, oneAttr, a, b, v) => {
+            elem.setAttribute(oneAttr, colors(a,b,v));
+          }
+        }
+      }  
+      attributesObject[prop] = trueColor(attrObj[p]) || defaultValues.htmlAttributes[p];
+    }
+  }
+  return attributesObject;
+}
+export const onStartAttr = {
+  attr : function(tweenProp){
+    if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+      KUTE[tweenProp] = (elem, vS, vE, v) => {
+        for ( const 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
+    }
+  }
+}
+
+// All Component Functions 
+export const attrFunctions = {
+  prepareStart: getAttr,
+  prepareProperty: prepareAttr,
+  onStart: onStartAttr
+}
+
+// Component Base
+export const baseAttrOps = {
+  component: ComponentName,
+  property: 'attr',
+  subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'], // the Animation class will need some values to validate this Object attribute
+  // 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}, // same here
+  Interpolate: { numbers,colors },
+  functions: {onStart:onStartAttr}
+}
+
+// Component Full
+export const attrOps = {
+  component: ComponentName,
+  property: 'attr',
+  subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'], // the Animation class will need some values to validate this Object attribute
+  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}, // same here
+  Interpolate: { numbers,colors },
+  functions: attrFunctions,
+  // export to global for faster execution
+  Util: { replaceUppercase, trueColor, trueDimension }
+}
+
+Components.HTMLAttributes = attrOps
diff --git a/src/components/opacityProperty.js b/src/components/opacityProperty.js
new file mode 100644
index 0000000..89738f1
--- /dev/null
+++ b/src/components/opacityProperty.js
@@ -0,0 +1,48 @@
+import KUTE from '../core/globals.js'
+import {getStyleForProperty} from '../core/process.js'
+import {Components} from '../core/objects.js'
+import {numbers} from '../core/interpolate.js' 
+
+// const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
+
+// Component Functions
+export function getOpacity(tweenProp){
+  return getStyleForProperty(this.element,tweenProp)
+}
+export function prepareOpacity(tweenProp,value){
+  return parseFloat(value);  // opacity always FLOAT
+}
+export function onStartOpacity(tweenProp){
+  if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // opacity could be 0
+    KUTE[tweenProp] = (elem, a, b, v) => {
+      elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000;
+    }
+  }
+}
+
+// All Component Functions
+const opacityFunctions = {
+  prepareStart: getOpacity,
+  prepareProperty: prepareOpacity,
+  onStart: onStartOpacity
+}
+
+// Base Component
+export const baseOpacityOps = {
+  component: 'opacityProperty',
+  property: 'opacity',
+  // defaultValue: 1,
+  Interpolate: {numbers},
+  functions: {onStart: onStartOpacity}
+}
+
+// Full Component
+export const opacityOps = {
+  component: 'opacityProperty',
+  property: 'opacity',
+  defaultValue: 1,
+  Interpolate: {numbers},
+  functions: opacityFunctions
+}
+
+Components.OpacityProperty = opacityOps
diff --git a/src/components/scrollProperty.js b/src/components/scrollProperty.js
new file mode 100644
index 0000000..52111a9
--- /dev/null
+++ b/src/components/scrollProperty.js
@@ -0,0 +1,107 @@
+import KUTE from '../core/globals.js'
+import {numbers} from '../core/interpolate.js'
+import {Components} from '../core/objects.js'
+
+import {on} from 'shorter-js/src/event/on.js'
+import {off} from 'shorter-js/src/event/off.js'
+import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js'
+import {mouseHoverEvents} from 'shorter-js/src/strings/mouseHoverEvents.js'
+
+// Component Util
+// events preventing scroll
+const canTouch = ('ontouchstart' in window || navigator && navigator.msMaxTouchPoints) || false // support Touch?
+const touchOrWheel = canTouch ? 'touchstart' : 'mousewheel'
+
+// true scroll container
+// very important and specific to the component
+const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.getElementsByTagName('HTML')[0]
+
+// scroll event options
+// it's important to stop propagating when animating scroll
+const passiveHandler = supportPassive ? { passive: false } : false
+
+// prevent mousewheel or touch events while tweening scroll
+function preventScroll(e) { 
+  this.scrolling && e.preventDefault()
+}
+function getScrollTargets(){
+  let el = this.element
+  return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el}
+}
+function scrollIn(){
+  let 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(){ //prevent scroll when tweening scroll
+  let 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 = ''
+  }
+}
+
+// Component Functions
+export 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;
+}
+export function prepareScroll(prop,value){
+  return parseInt(value);
+}
+export function onStartScroll(tweenProp){
+  if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // checking 0 will NOT add the render function
+    KUTE[tweenProp] = (elem, a, b, v) => {
+      elem.scrollTop = (numbers(a,b,v))>>0;
+    };
+  }
+}
+export function onCompleteScroll(tweenProp){
+  scrollOut.call(this)
+}
+
+// All Component Functions
+export const scrollFunctions = {
+  prepareStart: getScroll,
+  prepareProperty: prepareScroll,
+  onStart: onStartScroll,
+  onComplete: onCompleteScroll
+}
+
+// Base Component
+export const baseScrollOps = {
+  component: 'scrollProperty',
+  property: 'scroll',
+  // defaultValue: 0,
+  Interpolate: {numbers},
+  functions: {
+    onStart: onStartScroll,
+    onComplete: onCompleteScroll
+  },
+  // unfortunatelly scroll needs all them no matter the packaging
+  Util: { preventScroll, scrollIn, scrollOut, scrollContainer, passiveHandler, getScrollTargets }
+}
+
+// Full Component
+export const scrollOps = {
+  component: 'scrollProperty',
+  property: 'scroll',
+  defaultValue: 0,
+  Interpolate: {numbers},
+  functions: scrollFunctions,
+  // export stuff to global
+  Util: { preventScroll, scrollIn, scrollOut, scrollContainer, passiveHandler, getScrollTargets }
+
+}
+
+Components.ScrollProperty = scrollOps
diff --git a/src/components/shadowProperties.js b/src/components/shadowProperties.js
new file mode 100644
index 0000000..7e0b3a2
--- /dev/null
+++ b/src/components/shadowProperties.js
@@ -0,0 +1,115 @@
+import KUTE from '../core/globals.js'
+import {defaultValues,Components} from '../core/objects.js' 
+import {getStyleForProperty} from '../core/process.js' 
+import {numbers} from '../core/interpolate.js' 
+import {colors} from './colorProperties.js' 
+import {trueColor} from '../util/util.js' 
+
+// Component Properties
+const shadowProps = ['boxShadow','textShadow']
+
+// Component Util
+
+// box-shadow: none | h-shadow v-shadow blur spread color inset|initial|inherit
+// text-shadow: none | offset-x offset-y blur-radius color |initial|inherit
+// utility function to process values accordingly
+// numbers must be floats and color must be rgb object
+function processShadowArray (shadow,tweenProp){
+  let 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 tweenProp === 'boxShadow' ? newShadow : [newShadow[0],newShadow[1],newShadow[2],newShadow[4]];
+  newShadow = tweenProp === 'boxShadow' ? newShadow : newShadow.filter((x,i)=>[0,1,2,4].indexOf(i)>-1);
+  return newShadow;
+}
+
+// Component Functions
+export function getShadow(tweenProp,value){
+  let cssShadow = getStyleForProperty(this.element,tweenProp);
+  return /^none$|^initial$|^inherit$|^inset$/.test(cssShadow) ? defaultValues[tweenProp] : cssShadow; // '0px 0px 0px 0px rgb(0,0,0)'
+}
+export function prepareShadow(tweenProp,value) {
+  // [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
+  // parseProperty for boxShadow, builds basic structure with ready to tween values
+  if (typeof value === 'string'){
+    let currentColor, inset = 'none';
+    // a full RegEx for color strings
+    const colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi 
+
+    // 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]);
+    
+    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] = (elem, a, b, v) => {
+      // let's start with the numbers | set unit | also determine inset
+      let 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 (let i=0; i> 0) / 1000) + unit );
+      }
+      // the final piece of the puzzle, the DOM update
+      elem.style[tweenProp] = inset ? colors(colA,colB,v) + params.join(' ') + inset 
+                                    : colors(colA,colB,v) + params.join(' ');
+    }
+  }
+}
+const shadowPropOnStart = {}
+shadowProps.map(x=>shadowPropOnStart[x]=onStartShadow)
+
+// All Component Functions
+export const shadowFunctions = {
+  prepareStart: getShadow,
+  prepareProperty: prepareShadow,
+  onStart: shadowPropOnStart
+}
+
+// Component Base
+export const baseShadowOps = {
+  component: 'shadowProperties',
+  properties: shadowProps,
+  // defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px 0px rgb(0,0,0)'},
+  Interpolate: {numbers,colors},
+  functions: {onStart: shadowPropOnStart}
+}
+
+// Component Full
+export const 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,colors},
+  functions: shadowFunctions,
+  Util: { processShadowArray, trueColor }
+}
+
+Components.ShadowProperties = shadowOps
diff --git a/src/components/svgCubicMorph.js b/src/components/svgCubicMorph.js
new file mode 100644
index 0000000..d787c4d
--- /dev/null
+++ b/src/components/svgCubicMorph.js
@@ -0,0 +1,695 @@
+import KUTE from '../core/globals.js'
+import {numbers} from '../core/interpolate.js'
+import {Components} from '../core/objects.js'
+import selector from '../util/selector.js'
+
+// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
+
+// Component Util
+const INVALID_INPUT = 'Invalid path value'
+
+/* Raphael.js - path (https://github.com/DmitryBaranovskiy/raphael)
+ * Copyright © 2008-2013 Dmitry Baranovskiy (http://dmitrybaranovskiy.github.io/raphael/)
+ * Copyright © 2008-2013 Sencha Labs (http://sencha.com)
+ * Licensed under the MIT (http://dmitrybaranovskiy.github.io/raphael/license.html) license.
+ * KUTE.js modifications
+ * - parsePathString is now moved outside of main functions
+ * - processPath moved outside pathToAbsolute function body
+ * - fixArc moved outside path2curve function body
+ * - fixM moved outside path2curve function body
+ * - minor fixes like "a != b" => "a !== b", various undefined/unused variables
+*/
+
+// http://schepers.cc/getting-to-the-point
+function catmullRom2bezier(crp, z) {
+  const d = [];
+  for (let i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
+    const 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;
+  let res;
+  if (a != null) {
+    const 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;
+}
+
+
+// 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 {
+    
+    // tracer minifier cannot compute this string for some reason
+    // let 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";
+    let 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, (a, b, c) => {
+      let params = [], name = b.toLowerCase();
+      
+      c.replace(pathValues, (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;
+  }
+}
+
+export function pathToAbsolute(pathArray) {
+  pathArray = parsePathString(pathArray);
+
+  if (!pathArray || !pathArray.length) {
+    return [["M", 0, 0]];
+  }
+  let 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];
+  }
+  const crz = pathArray.length === 3 &&
+      pathArray[0][0] === "M" &&
+      pathArray[1][0].toUpperCase() === "R" &&
+      pathArray[2][0].toUpperCase() === "Z";
+  for (let 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 (let 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) {
+  const _13 = 1 / 3;
+  const _23 = 2 / 3;
+  return [
+          _13 * x1 + _23 * ax,
+          _13 * y1 + _23 * ay,
+          _13 * x2 + _23 * ax,
+          _13 * y2 + _23 * ay,
+          x2,
+          y2
+        ]
+}
+
+// for more information of where this math came from visit:
+// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
+function a2c(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
+  const _120 = Math.PI * 120 / 180, rad = Math.PI / 180 * (+angle || 0);
+  let res = [], xy, f1, f2, cx, cy;
+
+  function rotateVector(x, y, rad) {
+    const 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;
+    // const cos = Math.cos(Math.PI / 180 * angle);
+    // const sin = Math.sin(Math.PI / 180 * angle);
+    let 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;
+    }
+    let 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];
+  }
+  let df = f2 - f1;
+  if (Math.abs(df) > _120) {
+    const 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;
+  const 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(",");
+    const newres = [];
+    for (let 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;
+  }
+}
+
+export function processPath (path, d, pcom) {
+  let 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;
+  }
+  path.map((x,i)=>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];
+    // ii = Math.max(p.length, p2 && p2.length || 0);
+  }
+}
+
+export function fixArc (p, p2, pcoms1, pcoms2, i) {
+  if (p[i].length > 7) {
+    p[i].shift();
+    const pi = p[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
+      p.splice(i++, 0, ["C"].concat(pi.splice(0, 6)));
+    }
+    p.splice(i, 1);
+  }
+}
+
+export function path2curve(path, path2) {
+  const p = pathToAbsolute(path), // holder for previous path command of original path
+        p2 = path2 && pathToAbsolute(path2),
+        // p2 = path2 ? pathToAbsolute(path2) : pathToAbsolute('M0,0L0,0'),
+        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};
+
+  // path commands of original path p
+  // path commands of original path p2
+  // temporary holder for original path command
+  let pcoms1 = [], pcoms2 = [], pfirst = "", pcom = "";
+
+  for (let 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
+    
+    // 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
+    if (pcoms1[i] !== "A" && pfirst === "C") pcoms1[i] = "C"; 
+
+    // fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
+    fixArc(p, p2, pcoms1, pcoms2, i); // fixArc adds also the right amount of A:s to pcoms1 fixArc (p, p2, pcoms1, pcoms2, i) {
+    ii = Math.max(p.length, p2 && p2.length || 0);
+
+    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);
+      fixArc(p2, p, pcoms2, pcoms1, i); // fixArc (p, p2, pcoms1, pcoms2, 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);
+
+    const 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) { // create a  when glyph
+  const 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) {
+  let result = []
+  curveArray.map((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){
+  let newSegments = [],
+      oldSegments = getSegments(path),
+      segsCount = oldSegments.length,
+      pointCount = segsCount - 1,
+      oldSegIdx = pointCount,
+      oldSegs = []
+
+  oldSegments.map((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) {
+  let newSegments = [], segsCount = s.length, pointCount = segsCount - 1
+
+  s.map((p,i)=>{
+    let 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) {
+  let startSegments = getSegments(a), rotations = [];
+  startSegments.map((s,i)=>{rotations[i] = getRotationSegments(startSegments,i)})
+  return rotations
+}
+
+function getRotatedCurve(a,b) {
+  let startSegments = getSegments(a),
+      endSegments = getSegments(b),
+      segsCount = startSegments.length,
+      pointCount = segsCount - 1,
+      linePaths = [],
+      lineLengths = [],
+      rotations = getRotations(a);
+
+  rotations.map((r,i)=>{
+    let sumLensSqrd = 0, linePath = createPath('M0,0L0,0');
+    for (let j = 0; j < pointCount; j++) {
+      let linePt1 = startSegments[(i + j) % pointCount];
+      let linePt2 = endSegments[ j  % pointCount];
+      let 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
+  })
+
+  let computedIndex = lineLengths.indexOf(Math.min.apply(null,lineLengths)),
+      newPath = rotations[computedIndex];
+  return newPath
+}
+
+export function toPathString(pathArray) {
+  let newPath = pathArray.map( (c) => { 
+    if (typeof(c) === 'string') {
+      return c
+    } else {
+      let c0 = c.shift();  
+      return c0 + c.join(',') 
+    }
+  })
+  return newPath.join('');
+}
+
+// Component Functions
+export function getCubicMorph(tweenProp){
+  return this.element.getAttribute('d');
+}
+export function prepareCubicMorph(tweenProp,value){
+  // get path d attribute or create a path from string value
+  let pathObject = {}, 
+      el = value instanceof SVGElement ? value : /^\.|^\#/.test(value) ? selector(value) : null,
+      pathReg = new RegExp('\\n','ig'); // remove newlines, they break some JSON strings
+
+  try {
+    // make sure to return pre-processed values
+    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 && /m|z|c|l|v|q|[0-9]|\,/gi.test(value)) { // maybe it's a string path already
+    } else if (!el && typeof(value) === 'string') { // maybe it's a string path already
+      pathObject.original = value.replace(pathReg,'');
+    }
+    return pathObject;
+  }
+  catch(e){
+    throw TypeError(`KUTE.js - ${INVALID_INPUT} ${e}`)
+  }
+}
+export function crossCheckCubicMorph(tweenProp){
+  if (this.valuesEnd[tweenProp]) {
+    let pathCurve1 = this.valuesStart[tweenProp].curve,
+        pathCurve2 = this.valuesEnd[tweenProp].curve
+
+    if ( !pathCurve1 || !pathCurve2 || ( pathCurve1 && pathCurve2 && pathCurve1[0][0] === 'M' && pathCurve1.length !== pathCurve2.length) ) {
+      let path1 = this.valuesStart[tweenProp].original,
+          path2 = this.valuesEnd[tweenProp].original,
+          curves = path2curve(path1,path2)
+
+      let 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;
+    }
+  }
+}
+export function onStartCubicMorph(tweenProp){
+  if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+    KUTE[tweenProp] = function(elem,a,b,v){
+      let curve = [], path1 = a.curve, path2 = b.curve;
+      for(let i=0, l=path2.length; i>0)/1000 );
+        }
+      }
+      elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) );
+    }
+  }
+}
+
+// All Component Functions
+export const svgCubicMorphFunctions = {
+  prepareStart: getCubicMorph,
+  prepareProperty: prepareCubicMorph,
+  onStart: onStartCubicMorph,
+  crossCheck: crossCheckCubicMorph
+}
+
+// Component Base
+export const baseSvgCubicMorphOps = {
+  component: 'svgCubicMorph',
+  property: 'path',
+  // defaultValue: [],
+  Interpolate: {numbers,toPathString},
+  functions: {onStart:onStartCubicMorph}
+}
+
+// Component Full
+export const svgCubicMorphOps = {
+  component: 'svgCubicMorph',
+  property: 'path',
+  defaultValue: [],
+  Interpolate: {numbers,toPathString},
+  functions: svgCubicMorphFunctions,
+  // export utils to global for faster execution
+  Util: {
+    l2c, q2c, a2c, catmullRom2bezier, ellipsePath, 
+    path2curve, pathToAbsolute, toPathString, parsePathString,
+    getRotatedCurve, getRotations, 
+    getRotationSegments, reverseCurve, getSegments, createPath
+  }
+}
+
+Components.SVGCubicMorph = svgCubicMorphOps
diff --git a/src/components/svgDraw.js b/src/components/svgDraw.js
new file mode 100644
index 0000000..1115476
--- /dev/null
+++ b/src/components/svgDraw.js
@@ -0,0 +1,184 @@
+import KUTE from '../core/globals.js'
+import {numbers} from '../core/interpolate.js'
+import {Components} from '../core/objects.js'
+import {getStyleForProperty} from '../core/process.js'
+
+// const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
+
+// Component Util
+const percent = (v, l) => parseFloat(v) / 100 * l
+
+// http://stackoverflow.com/a/30376660
+const getRectLength = el => { // returns the length of a Rect
+  let w = el.getAttribute('width'),
+      h = el.getAttribute('height');
+  return (w*2)+(h*2);
+}
+
+const getPolyLength = el => {
+  // getPolygonLength / getPolylineLength - return the length of the Polygon / Polyline
+  const points = el.getAttribute('points').split(' ');
+
+  let len = 0;
+  if (points.length > 1) {
+    const coord = p => {
+      const 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])];
+    };
+
+    const dist = (c1, c2) => {
+      if (c1 != undefined && c2 != undefined) {
+        return Math.sqrt((c2[0] - c1[0]) ** 2 + (c2[1] - c1[1]) ** 2);
+      }
+      return 0;
+    };
+
+    if (points.length > 2) {
+      for (let i=0; i { // return the length of the line
+  const x1 = el.getAttribute('x1');
+  const x2 = el.getAttribute('x2');
+  const y1 = el.getAttribute('y1');
+  const y2 = el.getAttribute('y2');
+  return Math.sqrt((x2 - x1) ** 2+(y2 - y1) ** 2);
+}
+
+const getCircleLength = el => { // return the length of the circle
+  const r = el.getAttribute('r');
+  return 2 * Math.PI * r;
+}
+
+const getEllipseLength = el => { // returns the length of an ellipse
+  const 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;
+}
+
+const getTotalLength = el => { // returns the result of any of the below functions
+  if (/rect/.test(el.tagName)) {
+    return getRectLength(el);
+  } else if (/circle/.test(el.tagName)) {
+    return getCircleLength(el);
+  } else if (/ellipse/.test(el.tagName)) {
+    return getEllipseLength(el);
+  } else if (/polygon|polyline/.test(el.tagName)) {
+    return getPolyLength(el);
+  } else if (/line/.test(el.tagName)) {
+    return getLineLength(el);
+  }
+}
+
+export const getDraw = (e, v) => {
+  let length = /path|glyph/.test(e.tagName) ? e.getTotalLength() : getTotalLength(e),
+      start, end, d, o;
+
+  if ( v instanceof Object ) {
+    return v;
+  } else if (typeof v === 'string') {
+    v = v.split(/\,|\s/);
+    start = /%/.test(v[0]) ? percent(v[0].trim(),length) : parseFloat(v[0]);
+    end = /%/.test(v[1]) ? percent(v[1].trim(),length) : parseFloat(v[1]);
+  } else if (typeof v === 'undefined') {
+    o = parseFloat(getStyleForProperty(e,'stroke-dashoffset'));
+    d = getStyleForProperty(e,'stroke-dasharray').split(/\,/);
+
+    start = 0-o;
+    end = parseFloat(d[0]) + start || length;
+  }
+  return { s: start, e: end, l: length };
+}
+
+export const getBaseDraw = (e, v) => {
+  let length = e.getTotalLength(), start, end, d, o;
+
+  if ( v instanceof Object ) {
+    return v;
+  } else if (typeof v === 'string') {
+    v = v.split(/\,|\s/);
+    start = /%/.test(v[0]) ? percent(v[0].trim(),length) : parseFloat(v[0]);
+    end = /%/.test(v[1]) ? percent(v[1].trim(),length) : parseFloat(v[1]);
+  } else if (typeof v === 'undefined') {
+    o = parseFloat(getStyleForProperty(e,'stroke-dashoffset'));
+    d = getStyleForProperty(e,'stroke-dasharray').split(/\,/);
+
+    start = 0-o;
+    end = parseFloat(d[0]) + start || length;
+  }
+  return { s: start, e: end, l: length };
+}
+
+export function resetDraw(elem) {
+  elem.style.strokeDashoffset = ``;
+  elem.style.strokeDasharray = ``;
+}
+
+// Component Interpolation
+export function paintDraw(elem,a,b,v){
+  let 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`;
+}
+
+// Component Functions
+export function getDrawValue(){
+  return getDraw(this.element);
+}
+export function prepareDraw(a,o){
+  return getDraw(this.element,o);
+}
+export function onStartDraw(tweenProp){
+  if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+    KUTE[tweenProp] = (elem,a,b,v) => paintDraw(elem,a,b,v)
+  }
+}
+
+// All Component Functions
+const svgDrawFunctions = {
+  prepareStart: getDrawValue,
+  prepareProperty: prepareDraw,
+  onStart: onStartDraw
+}
+
+// Component Base
+export const baseSVGDrawOps = {
+  component: 'svgDraw',
+  property: 'draw',
+  Interpolate: {numbers,paintDraw},
+  functions: {onStart:onStartDraw}
+}
+
+// Component Full
+export const svgDrawOps = {
+  component: 'svgDraw',
+  property: 'draw',
+  defaultValue: '0% 0%',
+  Interpolate: {numbers,paintDraw},
+  functions: svgDrawFunctions,
+  // Export to global for faster execution
+  Util: {
+    getRectLength,
+    getPolyLength,
+    getLineLength,
+    getCircleLength,
+    getEllipseLength,
+    getTotalLength,
+    getDraw,
+    percent
+  }
+}
+
+Components.SVGDraw = svgDrawOps
diff --git a/src/components/svgMorph.js b/src/components/svgMorph.js
new file mode 100644
index 0000000..2a8cdac
--- /dev/null
+++ b/src/components/svgMorph.js
@@ -0,0 +1,808 @@
+import KUTE from '../core/globals.js'
+import selector from '../util/selector.js' 
+import {defaultOptions,Components} from '../core/objects.js' 
+
+// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
+
+// Component Interpolation
+// function function(array1, array2, length, progress)
+export function coords (a, b, l, v) {
+  const points = [];
+  for(let i=0;i> 0)/1000 );
+    }
+  }
+  return points;
+}
+
+// Component Util
+const INVALID_INPUT = 'Invalid path value'
+
+function isFiniteNumber(number) {
+  return typeof number === "number" && isFinite(number);
+}
+function distance(a, b) {
+  return Math.sqrt(
+    (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])
+  );
+}
+
+function pointAlong(a, b, pct) {
+  return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct];
+}
+
+function samePoint(a, b) {
+  return distance(a, b) < 1e-9;
+}
+
+// SVGPATH
+// https://github.com/fontello/svgpath/
+const paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0 };
+
+const SPECIAL_SPACES = [
+  0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006,
+  0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF
+];
+
+function isSpace(ch) {
+  return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029) || // Line terminators
+    // White spaces
+    (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) ||
+    (ch >= 0x1680 && SPECIAL_SPACES.indexOf(ch) >= 0);
+}
+
+function isCommand(code) {
+  /*eslint-disable no-bitwise*/
+  switch (code | 0x20) {
+    case 0x6D/* m */:
+    case 0x7A/* z */:
+    case 0x6C/* l */:
+    case 0x68/* h */:
+    case 0x76/* v */:
+    case 0x63/* c */:
+    case 0x73/* s */:
+    case 0x71/* q */:
+    case 0x74/* t */:
+    case 0x61/* a */:
+    case 0x72/* r */:
+      return true;
+  }
+  return false;
+}
+
+
+function isArc(code) {
+  return (code | 0x20) === 0x61;
+}
+
+function isDigit(code) {
+  return (code >= 48 && code <= 57);   // 0..9
+}
+
+function isDigitStart(code) {
+  return (code >= 48 && code <= 57) || /* 0..9 */
+          code === 0x2B || /* + */
+          code === 0x2D || /* - */
+          code === 0x2E;   /* . */
+}
+
+function State(path) {
+  this.index  = 0;
+  this.path   = path;
+  this.max    = path.length;
+  this.result = [];
+  this.param  = 0.0;
+  this.err    = '';
+  this.segmentStart = 0;
+  this.data   = [];
+}
+
+function skipSpaces(state) {
+  while (state.index < state.max && isSpace(state.path.charCodeAt(state.index))) {
+    state.index++;
+  }
+}
+function scanFlag(state) {
+  let ch = state.path.charCodeAt(state.index);
+
+  if (ch === 0x30/* 0 */) {
+    state.param = 0;
+    state.index++;
+    return;
+  }
+
+  if (ch === 0x31/* 1 */) {
+    state.param = 1;
+    state.index++;
+    return;
+  }
+
+  // state.err = 'SvgPath: arc flag can be 0 or 1 only (at pos ' + state.index + ')';
+  state.err = `KUTE.js - ${INVALID_INPUT}`;
+}
+function scanParam(state) {
+  let start = state.index,
+      index = start,
+      max = state.max,
+      zeroFirst = false,
+      hasCeiling = false,
+      hasDecimal = false,
+      hasDot = false,
+      ch;
+
+  if (index >= max) {
+    // state.err = 'SvgPath: missed param (at pos ' + index + ')';.
+    state.err = `KUTE.js - ${INVALID_INPUT}`;
+
+    return;
+  }
+  ch = state.path.charCodeAt(index);
+
+  if (ch === 0x2B/* + */ || ch === 0x2D/* - */) {
+    index++;
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+  }
+
+  // This logic is shamelessly borrowed from Esprima
+  // https://github.com/ariya/esprimas
+  //
+  if (!isDigit(ch) && ch !== 0x2E/* . */) {
+    // state.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')';
+    state.err = `KUTE.js - ${INVALID_INPUT}`;
+
+    return;
+  }
+
+  if (ch !== 0x2E/* . */) {
+    zeroFirst = (ch === 0x30/* 0 */);
+    index++;
+
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+
+    if (zeroFirst && index < max) {
+      // decimal number starts with '0' such as '09' is illegal.
+      if (ch && isDigit(ch)) {
+        // state.err = 'SvgPath: numbers started with `0` such as `09` are illegal (at pos ' + start + ')';
+        state.err = `KUTE.js - ${INVALID_INPUT}`;
+
+        return;
+      }
+    }
+
+    while (index < max && isDigit(state.path.charCodeAt(index))) {
+      index++;
+      hasCeiling = true;
+    }
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+  }
+
+  if (ch === 0x2E/* . */) {
+    hasDot = true;
+    index++;
+    while (isDigit(state.path.charCodeAt(index))) {
+      index++;
+      hasDecimal = true;
+    }
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+  }
+
+  if (ch === 0x65/* e */ || ch === 0x45/* E */) {
+    if (hasDot && !hasCeiling && !hasDecimal) {
+      // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')';
+      state.err = `KUTE.js - ${INVALID_INPUT}`;
+
+      return;
+    }
+
+    index++;
+
+    ch = (index < max) ? state.path.charCodeAt(index) : 0;
+    if (ch === 0x2B/* + */ || ch === 0x2D/* - */) {
+      index++;
+    }
+    if (index < max && isDigit(state.path.charCodeAt(index))) {
+      while (index < max && isDigit(state.path.charCodeAt(index))) {
+        index++;
+      }
+    } else {
+      // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')';
+      state.err = `KUTE.js - ${INVALID_INPUT}`;
+
+      return;
+    }
+  }
+
+  state.index = index;
+  state.param = parseFloat(state.path.slice(start, index)) + 0.0;
+}
+function finalizeSegment(state) {
+  let cmd, cmdLC;
+
+  // Process duplicated commands (without comand name)
+
+  // This logic is shamelessly borrowed from Raphael
+  // https://github.com/DmitryBaranovskiy/raphael/
+  //
+  cmd   = state.path[state.segmentStart];
+  cmdLC = cmd.toLowerCase();
+
+  let params = state.data;
+
+  if (cmdLC === 'm' && params.length > 2) {
+    state.result.push([ cmd, params[0], params[1] ]);
+    params = params.slice(2);
+    cmdLC = 'l';
+    cmd = (cmd === 'm') ? 'l' : 'L';
+  }
+
+  if (cmdLC === 'r') {
+    state.result.push([ cmd ].concat(params));
+  } else {
+
+    while (params.length >= paramCounts[cmdLC]) {
+      state.result.push([ cmd ].concat(params.splice(0, paramCounts[cmdLC])));
+      if (!paramCounts[cmdLC]) {
+        break;
+      }
+    }
+  }
+}
+
+function scanSegment(state) {
+  let max = state.max, cmdCode, is_arc, comma_found, need_params, i;
+
+  state.segmentStart = state.index;
+  cmdCode = state.path.charCodeAt(state.index);
+  is_arc = isArc(cmdCode);
+
+  if (!isCommand(cmdCode)) {
+    // state.err = 'SvgPath: bad command ' + state.path[state.index] + ' (at pos ' + state.index + ')';
+    state.err = `KUTE.js - ${INVALID_INPUT}`;
+
+    return;
+  }
+
+  need_params = paramCounts[state.path[state.index].toLowerCase()];
+
+  state.index++;
+  skipSpaces(state);
+
+  state.data = [];
+
+  if (!need_params) {
+    // Z
+    finalizeSegment(state);
+    return;
+  }
+
+  comma_found = false;
+
+  for (;;) {
+    for (i = need_params; i > 0; i--) {
+      if (is_arc && (i === 3 || i === 4)) scanFlag(state);
+      else scanParam(state);
+
+      if (state.err.length) {
+        return;
+      }
+      state.data.push(state.param);
+
+      skipSpaces(state);
+      comma_found = false;
+
+      if (state.index < max && state.path.charCodeAt(state.index) === 0x2C/* , */) {
+        state.index++;
+        skipSpaces(state);
+        comma_found = true;
+      }
+    }
+
+    // after ',' param is mandatory
+    if (comma_found) {
+      continue;
+    }
+
+    if (state.index >= state.max) {
+      break;
+    }
+
+    // Stop on next segment
+    if (!isDigitStart(state.path.charCodeAt(state.index))) {
+      break;
+    }
+  }
+
+  finalizeSegment(state);
+}
+
+// Returns array of segments
+export function pathParse(svgPath) {
+  let state = new State(svgPath), max = state.max;
+
+  skipSpaces(state);
+
+  while (state.index < max && !state.err.length) {
+    scanSegment(state);
+  }
+
+  if (state.err.length) {
+    state.result = [];
+
+  } else if (state.result.length) {
+
+    if ('mM'.indexOf(state.result[0][0]) < 0) {
+      // state.err = 'SvgPath: string should start with `M` or `m`';
+      state.err = `KUTE.js - ${INVALID_INPUT}`;
+
+      state.result = [];
+    } else {
+      state.result[0][0] = 'M';
+    }
+  }
+
+  return {
+    err: state.err,
+    segments: state.result
+  };
+};
+
+export class SvgPath {
+  constructor(path){
+    if (!(this instanceof SvgPath)) { return new SvgPath(path); }
+  
+    let pstate = pathParse(path);
+  
+    // Array of path segments.
+    // Each segment is array [command, param1, param2, ...]
+    this.segments = pstate.segments;
+  
+    // Error message on parse error.
+    this.err      = pstate.err;
+  }
+  // Apply iterator function to all segments. If function returns result,
+  // current segment will be replaced to array of returned segments.
+  // If empty array is returned, current regment will be deleted.
+  //
+  iterate(iterator) {
+    let segments = this.segments,
+        replacements = {},
+        needReplace = false,
+        lastX = 0,
+        lastY = 0,
+        countourStartX = 0,
+        countourStartY = 0,
+        newSegments;
+
+    segments.map( (s,index) => {
+
+      let res = iterator(s, index, lastX, lastY);
+
+      if (Array.isArray(res)) {
+        replacements[index] = res;
+        needReplace = true;
+      }
+
+      let isRelative = (s[0] === s[0].toLowerCase());
+
+      // calculate absolute X and Y
+      switch (s[0]) {
+        case 'm':
+        case 'M':
+          lastX = s[1] + (isRelative ? lastX : 0);
+          lastY = s[2] + (isRelative ? lastY : 0);
+          countourStartX = lastX;
+          countourStartY = lastY;
+          return;
+
+        case 'h':
+        case 'H':
+          lastX = s[1] + (isRelative ? lastX : 0);
+          return;
+
+        case 'v':
+        case 'V':
+          lastY = s[1] + (isRelative ? lastY : 0);
+          return;
+
+        case 'z':
+        case 'Z':
+          // That make sence for multiple contours
+          lastX = countourStartX;
+          lastY = countourStartY;
+          return;
+
+        default:
+          lastX = s[s.length - 2] + (isRelative ? lastX : 0);
+          lastY = s[s.length - 1] + (isRelative ? lastY : 0);
+      }
+    });
+
+    // Replace segments if iterator return results
+
+    if (!needReplace) { return this; }
+
+    newSegments = [];
+
+    segments.map((s,i)=>{
+      if (typeof replacements[i] !== 'undefined') {
+        replacements[i].map((r)=>{
+          newSegments.push(r);
+        })
+      } else {
+        newSegments.push(s);
+      }
+    })
+
+    this.segments = newSegments;
+    return this;
+  }
+
+  // Converts segments from relative to absolute
+  abs() {
+    this.iterate(function (s, index, x, y) {
+      let name = s[0],
+          nameUC = name.toUpperCase(),
+          i;
+
+      // Skip absolute commands
+      if (name === nameUC) { return; }
+
+      s[0] = nameUC;
+
+      switch (name) {
+        case 'v':
+          // v has shifted coords parity
+          s[1] += y;
+          return;
+
+        case 'a':
+          // ARC is: ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]
+          // touch x, y only
+          s[6] += x;
+          s[7] += y;
+          return;
+
+        default:
+          for (i = 1; i < s.length; i++) {
+            s[i] += i % 2 ? x : y; // odd values are X, even - Y
+          }
+      }
+    }, true);
+
+    return this;
+  }
+  // Convert processed SVG Path back to string
+  //
+  toString () {
+    let elements = [], skipCmd, cmd;
+
+    this.segments.map( (s,i) => {
+      // remove repeating commands names
+      cmd = s[0];
+      skipCmd = i > 0 && cmd !== 'm' && cmd !== 'M' && cmd === this.segments[i - 1][0];
+      elements = elements.concat(skipCmd ? s.slice(1) : s);
+    })
+
+    return elements.join(' ')
+      // Optimizations: remove spaces around commands & before `-`
+      //
+      // We could also remove leading zeros for `0.5`-like values,
+      // but their count is too small to spend time for.
+      .replace(/ ?([achlmqrstvz]) ?/gi, '$1')
+      .replace(/ \-/g, '-')
+      // workaround for FontForge SVG importing bug
+      .replace(/zm/g, 'z m');
+  }
+}
+// flubber
+// https://github.com/veltman/flubber
+function split(parsed) {
+  return parsed
+    .toString()
+    .split("M")
+    .map((d, i) => {
+      d = d.trim();
+      return i && d ? "M" + d : d;
+    })
+    .filter(d => d);
+}
+
+function pathStringToRing(str, maxSegmentLength) {
+  let parsed = new SvgPath(str).abs();
+
+  return exactRing(parsed) || approximateRing(parsed, maxSegmentLength);
+}
+
+function exactRing(parsed) {
+  let segments = parsed.segments || [],
+    ring = [];
+
+  if (!segments.length || segments[0][0] !== "M") {
+    return false;
+  }
+
+  for (let i = 0; i < segments.length; i++) {
+    let [command, x, y] = segments[i];
+    if ((command === "M" && i) || command === "Z") {
+      break; // !!
+    } else if (command === "M" || command === "L") {
+      ring.push([x, y]);
+    } else if (command === "H") {
+      ring.push([x, ring[ring.length - 1][1]]);
+    } else if (command === "V") {
+      ring.push([ring[ring.length - 1][0], x]);
+    } else {
+      return false;
+    }
+  }
+
+  return ring.length ? { ring } : false;
+}
+
+function approximateRing(parsed, maxSegmentLength) {
+  let ringPath = split(parsed)[0], ring = [], len, testPath, numPoints = 3;
+
+  if (!ringPath) {
+    throw new TypeError(INVALID_INPUT);
+  }
+
+  testPath = measure(ringPath);
+  len = testPath.getTotalLength();
+
+  if (
+    maxSegmentLength &&
+    isFiniteNumber(maxSegmentLength) &&
+    maxSegmentLength > 0
+  ) {
+    numPoints = Math.max(numPoints, Math.ceil(len / maxSegmentLength));
+  }
+
+  for (let i = 0; i < numPoints; i++) {
+    let p = testPath.getPointAtLength((len * i) / numPoints);
+    ring.push([p.x, p.y]);
+  }
+
+  return {
+    ring,
+    skipBisect: true
+  };
+}
+function measure(d) {
+  try {
+    let path = document.createElementNS('http://www.w3.org/2000/svg',"path");
+    path.setAttributeNS(null, "d", d);
+    return path;
+  } catch (e) {}
+  // not a browser
+  return false;
+}
+function rotateRing(ring, vs) {
+  let len = ring.length, min = Infinity, bestOffset, sumOfSquares, spliced;
+
+  for (let offset = 0; offset < len; offset++) {
+    sumOfSquares = 0;
+
+    vs.forEach(function(p, i) {
+      let d = distance(ring[(offset + i) % len], p);
+      sumOfSquares += d * d;
+    });
+
+    if (sumOfSquares < min) {
+      min = sumOfSquares;
+      bestOffset = offset;
+    }
+  }
+
+  if (bestOffset) {
+    spliced = ring.splice(0, bestOffset);
+    ring.splice(ring.length, 0, ...spliced);
+  }
+}
+function polygonLength(polygon) {
+  let i = -1, n = polygon.length, b = polygon[n - 1], 
+      xa, ya, xb = b[0], yb = b[1], perimeter = 0;
+
+  while (++i < n) {
+    xa = xb;
+    ya = yb;
+    b = polygon[i];
+    xb = b[0];
+    yb = b[1];
+    xa -= xb;
+    ya -= yb;
+    perimeter += Math.sqrt(xa * xa + ya * ya);
+  }
+
+  return perimeter;
+}
+function polygonArea(polygon) {
+  let i = -1, n = polygon.length, a, b = polygon[n - 1], area = 0;
+
+  while (++i < n) {
+    a = b;
+    b = polygon[i];
+    area += a[1] * b[0] - a[0] * b[1];
+  }
+
+  return area / 2;
+}
+function addPoints(ring, numPoints) {
+  const desiredLength = ring.length + numPoints,
+        step = polygonLength(ring) / numPoints;
+
+  let i = 0, cursor = 0, insertAt = step / 2;
+
+  while (ring.length < desiredLength) {
+    let a = ring[i], b = ring[(i + 1) % ring.length], segment = distance(a, b);
+
+    if (insertAt <= cursor + segment) {
+      ring.splice( i + 1, 0, segment ? pointAlong(a, b, (insertAt - cursor) / segment) : a.slice(0) );
+      insertAt += step;
+      continue;
+    }
+
+    cursor += segment;
+    i++;
+  }
+}
+function bisect(ring, maxSegmentLength = Infinity) {
+  for (let i = 0; i < ring.length; i++) {
+    let a = ring[i], b = i === ring.length - 1 ? ring[0] : ring[i + 1];
+
+    // Could splice the whole set for a segment instead, but a bit messy
+    while (distance(a, b) > maxSegmentLength) {
+      b = pointAlong(a, b, 0.5);
+      ring.splice(i + 1, 0, b);
+    }
+  }
+}
+
+function normalizeRing(ring, maxSegmentLength) {
+  let points, area, skipBisect;
+
+  if (typeof ring === "string") {
+    let converted = pathStringToRing(ring, maxSegmentLength);
+    ring = converted.ring;
+    skipBisect = converted.skipBisect;
+  } else if (!Array.isArray(ring)) {
+    throw new TypeError(INVALID_INPUT);
+  }
+
+  points = ring.slice(0);
+
+  if (!validRing(points)) {
+    throw new TypeError(INVALID_INPUT);
+  }
+
+  // TODO skip this test to avoid scale issues?
+  // Chosen epsilon (1e-6) is problematic for small coordinate range
+  if (points.length > 1 && samePoint(points[0], points[points.length - 1])) {
+    points.pop();
+  }
+
+  area = polygonArea(points);
+
+  // Make all rings clockwise
+  if (area > 0) {
+    points.reverse();
+  }
+
+  if (
+    !skipBisect &&
+    maxSegmentLength &&
+    isFiniteNumber(maxSegmentLength) &&
+    maxSegmentLength > 0
+  ) {
+    bisect(points, maxSegmentLength);
+  }
+
+  return points;
+}
+function validRing(ring) {
+  return ring.every(function(point) {
+    return (
+      Array.isArray(point) &&
+      point.length >= 2 &&
+      isFiniteNumber(point[0]) &&
+      isFiniteNumber(point[1])
+    );
+  });
+}
+
+function getInterpolationPoints(fromShape, toShape, morphPrecision) {
+  morphPrecision = morphPrecision || defaultOptions.morphPrecision
+  let fromRing = normalizeRing(fromShape, morphPrecision),
+      toRing = normalizeRing(toShape, morphPrecision),
+      diff = fromRing.length - toRing.length;
+
+  addPoints(fromRing, diff < 0 ? diff * -1 : 0);
+  addPoints(toRing, diff > 0 ? diff : 0);
+
+  rotateRing(fromRing, toRing);
+  return [fromRing,toRing]
+}
+
+
+// Component functions
+export function getSVGMorph(tweenProp){
+  return this.element.getAttribute('d');
+}
+export function prepareSVGMorph(tweenProp,value){
+  const pathObject = {}, elem = value instanceof Element ? value : /^\.|^\#/.test(value) ? selector(value) : null,
+        pathReg = new RegExp('\\n','ig'); // remove newlines, they brake JSON strings sometimes
+
+  // first make sure we return pre-processed values
+  if ( typeof(value) === 'object' && value.pathArray ) {
+    return value;
+  } else if ( elem && /path|glyph/.test(elem.tagName) ) {
+    pathObject.original = elem.getAttribute('d').replace(pathReg,'');
+  } else if ( !elem && /[a-z][^a-z]*/ig.test(value) ) { // maybe it's a string path already
+    pathObject.original = value.replace(pathReg,'');
+  }
+  return pathObject;
+}
+export function onStartSVGMorph(tweenProp){
+  if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+    KUTE[tweenProp] = (elem, a, b, v) => {
+      let path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString;
+      pathString = v === 1 ? b.original : `M${coords( path1, path2, len, v ).join('L')}Z`;
+      elem.setAttribute("d", pathString );
+    }
+  }
+}
+export function crossCheckSVGMorph(prop){
+  if ( this.valuesEnd[prop]){
+    let pathArray1 = this.valuesStart[prop].pathArray,
+        pathArray2 = this.valuesEnd[prop].pathArray
+    // skip already processed paths
+    // allow the component to work with pre-processed values
+    if ( !pathArray1 || !pathArray2 || pathArray1 && pathArray2 && pathArray1.length !== pathArray2.length ) {
+      let p1 = this.valuesStart[prop].original,
+          p2 = this.valuesEnd[prop].original,
+          // process morphPrecision
+          morphPrecision = this._morphPrecision ? parseInt(this._morphPrecision) : defaultOptions.morphPrecision,
+          paths = getInterpolationPoints(p1,p2,morphPrecision);
+
+      this.valuesStart[prop].pathArray = paths[0];
+      this.valuesEnd[prop].pathArray = paths[1];
+    }
+  }
+}
+
+// All Component Functions
+export const svgMorphFunctions = {
+  prepareStart: getSVGMorph,
+  prepareProperty: prepareSVGMorph,
+  onStart: onStartSVGMorph,
+  crossCheck: crossCheckSVGMorph
+}
+
+// Component Base
+export const baseSVGMorphOps = {
+  component: 'svgMorph',
+  property: 'path',
+  // defaultValue: [],
+  Interpolate: coords,
+  defaultOptions: {morphPrecision : 10, reverseFirstShape: false,},
+  functions: {onStart:onStartSVGMorph}
+}
+
+
+// Component Full
+export const svgMorphOps = {
+  component: 'svgMorph',
+  property: 'path',
+  defaultValue: [],
+  Interpolate: coords,
+  defaultOptions: {morphPrecision : 10, morphIndex:0},
+  functions: svgMorphFunctions,
+  // Export utils to global for faster execution
+  Util: {
+    INVALID_INPUT,isFiniteNumber,distance,pointAlong,samePoint,paramCounts,SPECIAL_SPACES,isSpace,isCommand,isArc,isDigit,
+    isDigitStart,State,skipSpaces,scanFlag,scanParam,finalizeSegment,scanSegment,pathParse,SvgPath,split,pathStringToRing,
+    exactRing,approximateRing,measure,rotateRing,polygonLength,polygonArea,addPoints,bisect,normalizeRing,validRing,getInterpolationPoints}
+}
+
+Components.SVGMorph = svgMorphOps
diff --git a/src/components/svgTransform.js b/src/components/svgTransform.js
new file mode 100644
index 0000000..e34fde1
--- /dev/null
+++ b/src/components/svgTransform.js
@@ -0,0 +1,173 @@
+import KUTE from '../core/globals.js'
+import {numbers} from '../core/interpolate.js'
+import {Components} from '../core/objects.js'
+
+// const svgTransform = { property : 'svgTransform', subProperties, defaultValue, Interpolate: {numbers}, functions }
+
+// Component Util
+function parseStringOrigin (origin, {x, 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);
+} 
+// helper function that turns transform value from string to object
+function parseTransformString (a) {
+  const d = a && /\)/.test(a) ? a.substring(0, a.length-1).split(/\)\s|\)/) : 'none', c = {};
+
+  if (d instanceof Array) {
+    for (let j=0, jl = d.length; j {
+      let x = 0;
+      let y = 0;
+      let tmp;
+      const deg = Math.PI/180;
+      const scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1;
+      const rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0;
+      const sin = Math.sin(rotate*deg);
+      const cos = Math.cos(rotate*deg);
+      const skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0;
+      const skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0;
+      const complex = rotate||skewX||skewY||scale!==1 || 0;
+
+      // start normalizing the translation, we start from last to first (from last chained translation)
+      // the normalized translation will handle the transformOrigin tween option and makes sure to have a consistent transformation
+      x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0; // we start with removing transformOrigin from translation
+      x *= scale;y *= scale; // we now apply the scale
+      y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0; // now we apply skews
+      tmp = cos*x - sin*y; // apply rotation as well
+      y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x;
+      x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0; // now we apply the actual translation
+      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; // normalizing ends with the addition of the transformOrigin to the translation
+
+      // finally we apply the transform attribute value
+      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})` : '' ) );
+    }
+  }
+}
+export function prepareSvgTransform(p,v){
+  return parseTransformSVG.call(this,p,v);
+}
+// returns an obect with current transform attribute value
+export function getStartSvgTransform (tweenProp,value) { 
+  const transformObject = {};
+  const currentTransform = parseTransformString(this.element.getAttribute('transform'));
+  for (const i in value) { 
+    // find a value in current attribute value or add a default value
+    transformObject[i] = i in currentTransform ? currentTransform[i] : (i==='scale'?1:0); 
+  }
+  return transformObject;
+}
+
+export function svgTransformCrossCheck(prop) {
+  if (!this._resetStart) return; // fix since 1.6.1 for fromTo() method
+
+  if ( this.valuesEnd[prop] ) {
+    let valuesStart = this.valuesStart[prop];
+    let valuesEnd = this.valuesEnd[prop];
+    const currentTransform = parseTransformSVG.call(this, prop, parseTransformString(this.element.getAttribute('transform')) );
+
+    // populate the valuesStart first
+    for ( const i in currentTransform ) { 
+      valuesStart[i] = currentTransform[i]; 
+    }
+
+    // now try to determine the REAL translation
+    const parentSVG = this.element.ownerSVGElement;
+    const startMatrix = parentSVG.createSVGTransformFromMatrix(
+      parentSVG.createSVGMatrix()
+      .translate(-valuesStart.origin[0],-valuesStart.origin[1]) // - origin
+      .translate('translate' in valuesStart ? valuesStart.translate[0] : 0,'translate' in valuesStart ? valuesStart.translate[1] : 0) // the current translate
+      .rotate(valuesStart.rotate||0).skewX(valuesStart.skewX||0).skewY(valuesStart.skewY||0).scale(valuesStart.scale||1)// the other functions
+      .translate(+valuesStart.origin[0],+valuesStart.origin[1]) // + origin
+    );
+    valuesStart.translate = [startMatrix.matrix.e,startMatrix.matrix.f]; // finally the translate we're looking for
+    // copy existing and unused properties to the valuesEnd
+    for ( const i in valuesStart) {
+      if ( !(i in valuesEnd) || i==='origin') { 
+        valuesEnd[i] = valuesStart[i]; 
+      }
+    }
+  }
+}
+
+// All Component Functions
+export const svgTransformFunctions = {
+  prepareStart: getStartSvgTransform,
+  prepareProperty: prepareSvgTransform,
+  onStart: svgTransformOnStart,
+  crossCheck: svgTransformCrossCheck
+}
+
+// Component Base
+export const baseSVGTransformOps = {
+  component: 'svgTransformProperty',
+  property: 'svgTransform',
+  // subProperties: ['translate','rotate','skewX','skewY','scale'],
+  // defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1},
+  defaultOptions: {transformOrigin:'50% 50%'},
+  Interpolate: {numbers},
+  functions: {onStart:svgTransformOnStart}
+}
+
+// Component Full
+export const svgTransformOps = {
+  component: 'svgTransformProperty',
+  property: 'svgTransform',
+  // subProperties: ['translate','rotate','skewX','skewY','scale'],
+  defaultOptions: {transformOrigin:'50% 50%'},
+  defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1},
+  Interpolate: {numbers},
+  functions: svgTransformFunctions,
+
+  // export utils to globals for faster execution
+  Util: { parseStringOrigin, parseTransformString, parseTransformSVG }
+}
+
+Components.SVGTransformProperty = svgTransformOps
diff --git a/src/components/textProperties.js b/src/components/textProperties.js
new file mode 100644
index 0000000..aee973b
--- /dev/null
+++ b/src/components/textProperties.js
@@ -0,0 +1,58 @@
+import KUTE from '../core/globals.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {getStyleForProperty} from '../core/process.js'
+import {units} from '../core/interpolate.js' 
+import {trueDimension} from '../util/util.js'
+
+// const opacity = { category : 'textProperties', defaultValues: [0,0,0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart:{} }
+
+// Component Properties
+const textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing']
+const textOnStart = {}
+
+export function textPropOnStart(tweenProp){
+  if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+    KUTE[tweenProp] = (elem, a, b, v) => {
+      elem.style[tweenProp] = units(a.v,b.v,b.u,v);
+    }
+  }
+}
+textProperties.forEach(tweenProp => {
+  textOnStart[tweenProp] = textPropOnStart
+})
+export function getTextProp(prop) {
+  return getStyleForProperty(this.element,prop) || defaultValues[prop];
+}
+export function prepareTextProp(prop,value) {
+  return trueDimension(value);
+}
+
+// All Component Functions
+const textPropFunctions = {
+  prepareStart: getTextProp,
+  prepareProperty: prepareTextProp,
+  onStart: textOnStart
+}
+
+// Component Base
+export const baseTextOps = {
+  component: 'textProperties',
+  category: 'textProps',
+  properties: textProperties,
+  // defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},
+  Interpolate: {units},
+  functions: {onStart:textOnStart}
+}
+
+// Component Full
+export const textOps = {
+  component: 'textProperties',
+  category: 'textProps',
+  properties: textProperties,
+  defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},
+  Interpolate: {units},
+  functions: textPropFunctions,
+  Util: {trueDimension}
+}
+
+Components.TextProperties = textOps
diff --git a/src/components/textWrite.js b/src/components/textWrite.js
new file mode 100644
index 0000000..6d1982a
--- /dev/null
+++ b/src/components/textWrite.js
@@ -0,0 +1,226 @@
+import KUTE,{TweenConstructor} from '../core/globals.js'
+import {numbers} from '../core/interpolate.js' 
+import {defaultOptions,Components} from '../core/objects.js';
+
+// Component Util
+// utility for multi-child targets
+// wrapContentsSpan returns an [Element] with the SPAN.tagName and a desired class
+function wrapContentsSpan(el,classNAME){
+  let textWriteWrapper;
+  let 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 ) {
+    let 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){
+  let elementsArray = []
+  if (el.children.length) {
+    let textParts = [];
+    let remainingMarkup = el.innerHTML;
+    let wrapperParts;
+
+    for ( let i=0, l = el.children.length, currentChild, childOuter, unTaggedContent; i{ s.className += ' oldText'; return s.outerHTML }).join('')
+  target.innerHTML += newTargetSegs.map(s=>{ s.className += ' newText'; return s.outerHTML.replace(s.innerHTML,'') }).join('')
+
+  return [oldTargetSegs,newTargetSegs]
+}
+
+export function createTextTweens(target,newText,options){
+  if (target.playing) return;
+
+  const TC = TweenConstructor.Tween
+
+  options = options || {}
+  options.duration = options.duration === 'auto' ? 'auto' : isFinite(options.duration*1) ? options.duration*1 : 1000;
+
+  const segs = setSegments(target,newText);
+  const oldTargetSegs = segs[0];
+  const newTargetSegs = segs[1];
+  let oldTargets = [].slice.call(target.getElementsByClassName('oldText')).reverse();
+  let newTargets = [].slice.call(target.getElementsByClassName('newText'));
+
+  let textTween = [], totalDelay = 0
+
+  textTween = textTween.concat(oldTargets.map((el,i) => {
+    options.duration = options.duration === 'auto' ? oldTargetSegs[i].innerHTML.length * 75 : options.duration; 
+    options.delay = totalDelay;
+    options.onComplete = null
+
+    totalDelay += options.duration
+    return new TC(el, {text:el.innerHTML}, {text:''}, options );
+  }));
+  textTween = textTween.concat(newTargets.map((el,i)=> {
+    const onComplete = () => {target.innerHTML = newText, target.playing = false};
+
+    options.duration = options.duration === 'auto' ? newTargetSegs[i].innerHTML.length * 75 : options.duration; 
+    options.delay = totalDelay;
+    options.onComplete = i === newTargetSegs.length-1 ? onComplete : null
+    totalDelay += options.duration
+
+    return new TC(el, {text:''}, {text:newTargetSegs[i].innerHTML}, options );
+  }));
+
+  textTween.start = function(){
+    !target.playing && textTween.map(tw=>tw.start()) && (target.playing = true)
+  }
+  
+  return textTween
+}
+
+// Component Values
+const lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
+    upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""), // uppercase
+    nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
+    numeric = String("0123456789").split(""), // numeric
+    alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric), // alpha numeric
+    allTypes = alphaNumeric.concat(nonAlpha); // all caracters
+
+const charSet = {
+  alpha: lowerCaseAlpha, // lowercase
+  upper: upperCaseAlpha, // uppercase
+  symbols: nonAlpha, // symbols
+  numeric: numeric,
+  alphanumeric: alphaNumeric,
+  all: allTypes,
+}
+
+// Component Functions
+export function getWrite(tweenProp,value){
+  return this.element.innerHTML;
+}
+export function prepareText(tweenProp,value) {
+  if( tweenProp === 'number' ) {
+    return parseFloat(value)
+  } else {
+    // empty strings crash the update function
+    return value === '' ? ' ' : value
+  }
+}
+export const onStartWrite = {
+  text: function(tweenProp){
+    if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) {
+      
+      let chars = this._textChars,
+          charsets = chars in charSet ? charSet[chars] 
+                  : chars && chars.length ? chars 
+                  : charSet[defaultOptions.textChars]
+
+      KUTE[tweenProp] = function(elem,a,b,v) {
+        
+        let 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]) { // numbers can be 0
+      KUTE[tweenProp] = (elem, a, b, v) => {
+        elem.innerHTML = numbers(a, b, v)>>0;
+      }
+    }
+  }
+}
+
+// All Component Functions
+export const textWriteFunctions = {
+  prepareStart: getWrite,
+  prepareProperty: prepareText,
+  onStart: onStartWrite
+}
+
+// const textWrite = { category : 'textWrite', defaultValues: {}, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
+
+// Base Component
+export const baseTextWriteOps = {
+  component: 'textWriteProperties',
+  category: 'textWrite',
+  properties: ['text','number'],
+  // defaultValues: {text: ' ',numbers:'0'},
+  defaultOptions: { textChars: 'alpha' },
+  Interpolate: {numbers},
+  functions: {onStart:onStartWrite},
+  // export to global for faster execution
+  Util: { charSet }
+}
+
+// Full Component
+export const textWriteOps = {
+  component: 'textWriteProperties',
+  category: 'textWrite',
+  properties: ['text','number'],
+  defaultValues: {text: ' ',numbers:'0'},
+  defaultOptions: { textChars: 'alpha' },
+  Interpolate: {numbers},
+  functions: textWriteFunctions,
+  // export to global for faster execution
+  Util: { charSet, createTextTweens }
+}
+
+Components.TextWriteProperties = textWriteOps
diff --git a/src/components/transformFunctions.js b/src/components/transformFunctions.js
new file mode 100644
index 0000000..a7cf4cc
--- /dev/null
+++ b/src/components/transformFunctions.js
@@ -0,0 +1,164 @@
+import KUTE from '../core/globals.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {getInlineStyle} from '../core/process.js'
+
+// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
+
+// Component Interpolate functions
+export function perspective(a, b, u, v) {
+  return `perspective(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
+}
+export function translate3d(a, b, u, v) {
+  let translateArray = [];
+  for (let 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(',')})`;
+}
+export function rotate3d(a, b, u, v) {
+  let 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
+}
+export function translate(a, b, u, v) {
+  let 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(',')})`;
+}
+export function rotate(a, b, u, v) {
+  return `rotate(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
+}
+export function skew(a, b, u, v) {
+  let 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(',')})`;
+}
+export function skewX(a, b, u, v) {
+  return `skewX(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
+}
+export function skewY(a, b, u, v) {
+  return `skewY(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})`
+}
+export function scale (a, b, v) {
+  return `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`;
+}
+
+// Component Functions
+export function getTransform(tweenProperty,value){
+  const currentStyle = getInlineStyle(this.element);
+  return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
+}
+export function prepareTransform(prop,obj){
+  let prepAxis = ['X', 'Y', 'Z'], // coordinates
+      translateArray = [], rotateArray = [], skewArray = [], 
+      transformObject = {},
+      arrayFunctions = ['translate3d','translate','rotate3d','skew']
+
+  for (const x in obj) {
+
+    if (arrayFunctions.includes(x)) {
+    const pv = typeof(obj[x]) === 'object' ? obj[x].map(v=>parseInt(v)) : [parseInt(obj[x]),0]
+
+    transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0]
+                       : [pv[0]||0, pv[1]||0,pv[2]||0] // translate3d | rotate3d
+
+    } else if ( /[XYZ]/.test(x) ) {
+      const fn = x.replace(/[XYZ]/,'');
+      const fnId = fn === 'skew' ? fn : `${fn}3d`;
+      const fnArray = fn === 'translate' ? translateArray
+                    : fn === 'rotate' ? rotateArray
+                    : fn === 'skew' ? skewArray : {}
+      for (let fnIndex = 0; fnIndex < 3; fnIndex++) {
+        const fnAxis = prepAxis[fnIndex];
+        fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0; 
+      }
+      transformObject[fnId] = fnArray;
+    } else { // scale | rotate | perspective
+      transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x])
+    }
+  }
+  return transformObject;
+}
+export function onStartTransform(tweenProp){
+  if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+    KUTE[tweenProp] = (elem, a, b, v) => {
+      elem.style[tweenProp] = 
+          (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0
+        + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z]
+        + (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y]
+        + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z]
+        + (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0
+        + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y]
+        + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
+    }
+  }
+}
+export function crossCheckTransform(tweenProp){
+  if (this.valuesEnd[tweenProp]) {  
+    if ( this.valuesEnd[tweenProp] ) {
+      if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
+        this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective
+      }
+    }
+  }
+}
+
+// All Component Functions
+export const transformFunctions = {
+  prepareStart: getTransform,
+  prepareProperty: prepareTransform,
+  onStart: onStartTransform,
+  crossCheck: crossCheckTransform
+}
+
+const supportedTransformProperties = [
+  'perspective', 
+  'translate3d', 'translateX', 'translateY', 'translateZ', 'translate', 
+  'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate', 
+  'skewX', 'skewY', 'skew',
+  'scale'
+]
+
+const defaultTransformValues = {
+  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
+}
+
+// Base Component
+export const baseTransformOps = {
+  component: 'transformFunctions',
+  property: 'transform',
+  subProperties: supportedTransformProperties,
+  // defaultValues: defaultTransformValues,
+  functions: {onStart: onStartTransform},
+  Interpolate: { 
+    perspective: perspective,
+    translate3d: translate3d, 
+    rotate3d: rotate3d,
+    translate: translate, rotate: rotate, scale: scale, skew: skew
+  },
+}
+
+// Full Component
+export const transformOps = {
+  component: 'transformFunctions',
+  property: 'transform',
+  subProperties: supportedTransformProperties,
+  defaultValues: defaultTransformValues,
+  functions: transformFunctions,
+  Interpolate: { 
+    perspective: perspective,
+    translate3d: translate3d, 
+    rotate3d: rotate3d,
+    translate: translate, rotate: rotate, scale: scale, skew: skew
+  },
+}
+
+Components.TransformFunctions = transformOps
diff --git a/src/components/transformMatrix.js b/src/components/transformMatrix.js
new file mode 100644
index 0000000..bbd8887
--- /dev/null
+++ b/src/components/transformMatrix.js
@@ -0,0 +1,173 @@
+import KUTE from '../core/globals.js'
+import {defaultValues,Components} from '../core/objects.js'
+import {numbers,arrays} from '../core/interpolate.js'
+
+// const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
+
+// Component name
+const componentName = 'transformMatrix'
+
+// Component special
+export const CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix 
+                        : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
+                        : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
+                        : typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
+                        : null
+
+// Component Functions
+export function getTransform(tweenProp, value){
+  let transformObject = {}
+
+  if (this.element[componentName]) {
+    const currentValue = this.element[componentName]
+    for (const vS in currentValue) {
+      transformObject[vS] = currentValue[vS]
+    }
+  } else {
+    for (const vE in value){
+      transformObject[vE] = vE === 'perspective' ? value[vE] : defaultValues.transform[vE]
+    }
+  }
+  return transformObject
+}
+export function prepareTransform(tweenProp,value){
+  if ( typeof(value) === 'object' && !value.length) {
+    let transformObject = {},
+        translate3dObj = {},
+        rotate3dObj = {},
+        scale3dObj = {},
+        skewObj = {},
+        axis = [{translate3d:translate3dObj},{rotate3d:rotate3dObj},{skew:skewObj},{scale3d:scale3dObj}];
+
+    for (const prop in value) {
+      if ( /3d/.test(prop) && typeof(value[prop]) === 'object' && value[prop].length ){
+        let pv = value[prop].map( (v) => 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) ) {
+        let obj = /translate/.test(prop) ? translate3dObj 
+                : /rotate/.test(prop) ? rotate3dObj 
+                : /scale/.test(prop) ? scale3dObj 
+                : /skew/.test(prop) ? skewObj : {};
+        let idx = prop.replace(/translate|rotate|scale|skew/,'').toLowerCase()
+        obj[idx] = /scale/.test(prop) ? parseFloat(value[prop]) : parseInt(value[prop])
+      } else if ('skew' === prop ) {
+        let pv = value[prop].map(v => parseInt(v)||0)
+        transformObject[prop] = [pv[0]||0, pv[1]||0]
+      } else { // perspective
+        transformObject[prop] = parseInt(value[prop]);
+      }
+    }
+
+    axis.map((o) => {
+      const tp = Object.keys(o)[0]
+      const 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]; // translate|rotate
+      }
+    })
+    return transformObject;
+  } else { // string | array
+  // if ( typeof (value) === 'object' && value.length ) {
+  // } else if ( typeof (value) === string && value.includes('matrix')) {
+    // decompose matrix to object
+    console.error(`KUTE.js - "${value}" is not valid/supported transform function`)
+  }
+}
+export const onStartTransform = {
+  transform : function(tweenProp) {
+    if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
+      
+      KUTE[tweenProp] = (elem, a, b, v) => {
+        
+        let matrix = new CSS3Matrix()
+        let transformObject = {}
+
+        for ( const p in b ) {
+          transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v)
+        }
+
+        // set perspective
+        transformObject.perspective && (matrix.m34 = -1/transformObject.perspective)
+        // set translate
+        matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix
+        // set rotation
+        matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix
+        // set skew
+        if (transformObject.skew) {
+          matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix;
+          matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix;
+        }
+        // set scale
+        matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix
+
+        // set element style
+        elem.style[tweenProp] = matrix.toString();
+      }
+    }
+  },
+  CSS3Matrix: function(prop) {
+    if (this.valuesEnd.transform){
+      !KUTE[prop] && (KUTE[prop] = CSS3Matrix)
+    }
+  },    
+}
+export function onCompleteTransform(tweenProp){
+  if (this.valuesEnd[tweenProp]) {
+    this.element[componentName] = {}
+    for (const tf in this.valuesEnd[tweenProp]){
+      this.element[componentName][tf] = this.valuesEnd[tweenProp][tf]
+    }
+  }
+}
+export function crossCheckTransform(tweenProp){
+  if (this.valuesEnd[tweenProp]) {
+    if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
+      this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective
+    }
+  }
+}
+
+// All Component Functions
+export const matrixFunctions = {
+  prepareStart: getTransform,
+  prepareProperty: prepareTransform,
+  onStart: onStartTransform,
+  onComplete: onCompleteTransform,
+  crossCheck: crossCheckTransform
+}
+
+// Component Base Object
+export const baseMatrixTransformOps = {
+  component: componentName,
+  property: 'transform',
+  // subProperties: ['perspective','translate3d','translateX','translateY','translateZ','rotate3d','rotateX','rotateY','rotateZ','skew','skewX','skewY','scale3d','scaleX','scaleY','scaleZ'],
+  // 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: {onStart: onStartTransform},
+  Interpolate: {
+    perspective: numbers,
+    translate3d: arrays, 
+    rotate3d: arrays,
+    skew: arrays,
+    scale3d: arrays
+  }
+}
+
+// Component Full Object
+export const matrixTransformOps = {
+  component: componentName,
+  property: 'transform',
+  // subProperties: ['perspective','translate3d','translateX','translateY','translateZ','rotate3d','rotateX','rotateY','rotateZ','skew','skewX','skewY','scale3d','scaleX','scaleY','scaleZ'],
+  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
+  }
+}
+
+Components.TransformMatrix = matrixTransformOps
diff --git a/src/core/globals.js b/src/core/globals.js
new file mode 100644
index 0000000..be9acfe
--- /dev/null
+++ b/src/core/globals.js
@@ -0,0 +1,5 @@
+export const globalObject = typeof (global) !== 'undefined' ? global 
+                          : typeof(self) !== 'undefined' ? self
+                          : typeof(window) !== 'undefined' ? window : {}
+export let TweenConstructor = {}
+export default {}
\ No newline at end of file
diff --git a/src/core/interface.js b/src/core/interface.js
new file mode 100644
index 0000000..574fe15
--- /dev/null
+++ b/src/core/interface.js
@@ -0,0 +1,28 @@
+
+import selector from '../util/selector.js'
+import {TweenConstructor} from './globals.js'
+import TweenCollection from '../tween/tweenCollection.js'
+
+const TC = TweenConstructor.Tween
+
+// main methods
+export function to(element, endObject, optionsObj) {
+  optionsObj = optionsObj || {}
+  optionsObj.resetStart = endObject
+  return new TC(selector(element), endObject, endObject, optionsObj)
+}
+export function fromTo(element, startObject, endObject, optionsObj) {
+  optionsObj = optionsObj || {}
+  return new TC(selector(element), startObject, endObject, optionsObj)
+}
+
+// multiple elements tween objects
+export function allTo(elements, endObject, optionsObj) {
+  optionsObj = optionsObj || {}
+  optionsObj.resetStart = endObject
+  return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
+}
+export function allFromTo(elements, startObject, endObject, optionsObj) {
+  optionsObj = optionsObj || {}
+  return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
+}
\ No newline at end of file
diff --git a/src/core/internals.js b/src/core/internals.js
new file mode 100644
index 0000000..1de5104
--- /dev/null
+++ b/src/core/internals.js
@@ -0,0 +1,116 @@
+// imports
+import {Tweens,onStart,linkProperty,supportedProperties} from './objects.js'
+import KUTE,{globalObject} from './globals.js'
+import Interpolate from './interpolate.js'
+
+
+// KUTE.js INTERNALS
+// =================
+
+export const add = function(tw) { Tweens.push(tw); }
+export const remove = function(tw) { const i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }}
+export const getAll = function() { return Tweens }
+export const removeAll = function() { Tweens.length = 0 }
+
+// KUTE.js render update functions
+// ===============================
+
+export let Tick = 0
+export function Ticker(time) {
+  let i = 0;
+  while ( i < Tweens.length ) {
+    if ( Tweens[i].update(time) ) {
+      i++;
+    } else {
+      Tweens.splice(i, 1);
+    }
+  }
+  Tick = requestAnimationFrame(Ticker);
+}
+
+const Time = {}
+  
+// In node.js, use process.hrtime.
+if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
+	Time.now = function () {
+		var time = process.hrtime();
+		return time[0] * 1000 + time[1] / 1000000;
+	};
+// In a browser, use self.performance.now if it is available.
+} else if (typeof (self) !== 'undefined' &&
+         self.performance !== undefined &&
+		 self.performance.now !== undefined) {
+	Time.now = self.performance.now.bind(self.performance);
+}
+
+export {Time}
+
+// stop requesting animation frame
+export function stop () {
+  setTimeout(() => { // re-added for #81
+    if (!Tweens.length && Tick) { 
+      cancelAnimationFrame(Tick); 
+      Tick = null;
+      for (const obj in onStart) {
+        if (typeof (onStart[obj]) === 'function') {
+          KUTE[obj] && (delete KUTE[obj])
+        } else {
+          for (const prop in onStart[obj]) {
+            KUTE[prop] && (delete KUTE[prop])
+          }
+        }
+      }
+      for (const i in Interpolate) {
+        KUTE[i] && (delete KUTE[i])
+      }
+    }
+  },64)
+}
+
+export function linkInterpolation(){
+  for (const component in linkProperty){
+    const componentLink = linkProperty[component]
+    const componentProps = supportedProperties[component]
+
+    for ( const fnObj in componentLink ) {
+      if ( typeof(componentLink[fnObj]) === 'function' 
+          && Object.keys(this.valuesEnd).some(i => componentProps.includes(i) 
+          || i=== 'attr' && Object.keys(this.valuesEnd[i]).some(j => componentProps.includes(j)) ) ) 
+      { // ATTR, colors, scroll, boxModel, borderRadius
+        !KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj])
+      } else {
+
+        for ( const prop in this.valuesEnd ) {
+          for ( const i in this.valuesEnd[prop] ) {
+            if ( typeof(componentLink[i]) === 'function' ) { // transformCSS3
+              !KUTE[i] && (KUTE[i] = componentLink[i])
+            } else {
+              for (const j in componentLink[fnObj]){
+                if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) { // transformMatrix
+                  !KUTE[j] && (KUTE[j] = componentLink[i][j])
+                }
+              }
+            } 
+          }
+        }
+      }
+    }
+  }
+}
+
+export const Render = {Tick,Ticker,Tweens,Time}
+for (const blob in Render ) {
+  if (!KUTE[blob]) {
+    KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
+  }
+}
+globalObject[`_KUTE`] = KUTE
+
+export default {
+  add,
+  remove,
+  getAll,
+  removeAll,
+  stop,
+  linkInterpolation
+}
\ No newline at end of file
diff --git a/src/core/interpolate.js b/src/core/interpolate.js
new file mode 100644
index 0000000..5f9cffe
--- /dev/null
+++ b/src/core/interpolate.js
@@ -0,0 +1,23 @@
+
+// KUTE.js INTERPOLATE FUNCTIONS
+// =============================
+
+export function numbers(a, b, v) { // number1, number2, progress
+  a = +a; b -= a; return a + b * v;
+}
+export function units(a, b, u, v) { // number1, number2, unit, progress
+  a = +a; b -= a; return ( a + b * v ) + u;
+}
+export function arrays(a,b,v){
+  const result = []
+  for ( let i=0, l=b.length; i> 0 ) / 1000
+  }
+  return result
+}
+
+export default {
+  numbers,
+  units,
+  arrays
+}
\ No newline at end of file
diff --git a/src/core/objects.js b/src/core/objects.js
new file mode 100644
index 0000000..007ee2f
--- /dev/null
+++ b/src/core/objects.js
@@ -0,0 +1,58 @@
+export const Tweens = []
+
+export const Components = {}
+
+export const supportedProperties = {}
+
+export const defaultValues = {}; 
+
+export const defaultOptions = {
+  duration: 700,
+  delay: 0,
+  easing: 'linear'
+}
+
+// check current property value when .to() method is used
+export const prepareStart = {}
+
+// used in preparePropertiesObject
+export const prepareProperty = {} 
+
+// checks for differences between the processed start and end values, 
+// can be set to make sure start unit and end unit are same, 
+// stack transforms, process SVG paths,
+// any type of post processing the component needs
+export const crossCheck = {}
+
+// schedule property specific function on animation complete
+export const onComplete = {}
+
+// schedule property specific function on animation start
+// link property update function to KUTE.js execution context
+export const onStart = {}
+
+// link properties to interpolate functions
+export const linkProperty = {}
+
+// util - a general object for utils like rgbToHex, processEasing
+export const Util = {}
+
+export const BaseObjects = { 
+  defaultOptions,
+  linkProperty,
+  onComplete,
+  onStart,
+  supportedProperties 
+}
+
+export default {
+  supportedProperties,
+  defaultOptions,
+  defaultValues,
+  prepareProperty,
+  prepareStart,
+  crossCheck,
+  onStart,
+  onComplete,
+  linkProperty
+}
diff --git a/src/core/process.js b/src/core/process.js
new file mode 100644
index 0000000..795c12c
--- /dev/null
+++ b/src/core/process.js
@@ -0,0 +1,115 @@
+import {trueProperty} from '../util/util.js'
+import {defaultValues,supportedProperties,prepareStart,prepareProperty} from './objects.js'
+
+// get transform style for element from cssText for .to() method
+export function getInlineStyle(el) {
+  if ( !el.style ) return; // if the scroll applies to `window` it returns as it has no styling
+  const css = el.style.cssText.replace(/\s/g,'').split(';'); // the cssText | the resulting transform object
+  const transformObject = {};
+  const arrayFn = ['translate3d','translate','scale3d','skew']
+
+  // if we have any inline style in the cssText attribute, usually it has higher priority
+  for ( let i=0, csl = css.length; i 0) { 
+      this._repeat = this._repeatOption 
+    }
+    if (this._yoyo && this._reversed===true) { 
+      this.reverse(); 
+      this._reversed = false 
+    }
+  
+    return this 
+  }
+
+  // additions to prototype
+  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();  // restart ticking if stopped
+    }
+    return this;
+  }
+  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;
+  }  
+  reverse() {
+    // if (this._yoyo) {
+      for (const reverseProp in this.valuesEnd) {
+        const tmp = this.valuesRepeat[reverseProp];
+        this.valuesRepeat[reverseProp] = this.valuesEnd[reverseProp];
+        this.valuesEnd[reverseProp] = tmp;
+        this.valuesStart[reverseProp] = this.valuesRepeat[reverseProp];
+      }
+    // }
+  }
+  chain(args) {
+    this._chain = []
+    this._chain = args.length ? args : this._chain.concat(args); 
+    return this; 
+  }
+  stopChainedTweens() {
+    this._chain && this._chain.length && this._chain.map(tw=>tw.stop())
+  }
+  update(time) {
+    time = time !== undefined ? time : KUTE.Time();
+    
+    let 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); // calculate progress
+
+    for (const tweenProp in this.valuesEnd){ // render the update
+      KUTE[tweenProp](this.element,this.valuesStart[tweenProp],this.valuesEnd[tweenProp],progress); 
+    }
+
+    // fire the updateCallback
+    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; //set the right time for delay
+
+        if (this._yoyo) { // handle yoyo
+          this._reversed = !this._reversed;
+          this.reverse();
+        }
+
+        return true;
+
+      } else {
+
+        // fire the complete callback
+        if (this._onComplete) {
+          this._onComplete.call(this);
+        }
+
+        // now we're sure no animation is running
+        this.playing = false;
+
+        //stop ticking when finished
+        this.close();        
+
+        // start animating chained tweens
+        if (this._chain !== undefined && this._chain.length){
+          this._chain.map(tw=>tw.start())
+        }
+      }
+      return false;
+    }
+    return true;
+  }
+}
+
+// Update Tween Interface Update
+TweenConstructor.Tween = Tween
\ No newline at end of file
diff --git a/src/tween/tweenBase.js b/src/tween/tweenBase.js
new file mode 100644
index 0000000..1aa9135
--- /dev/null
+++ b/src/tween/tweenBase.js
@@ -0,0 +1,155 @@
+import KUTE, {TweenConstructor} from '../core/globals.js'
+import {onStart,onComplete,defaultOptions,Util} from '../core/objects.js'
+// import {Util} from '../core/objects.js'
+import {Tick,Ticker,linkInterpolation,add,stop,remove} from '../core/internals.js'
+
+// single Tween object construct
+// TweenBase is meant to be use for pre-processed values
+export default class TweenBase {
+  constructor(targetElement, startObject, endObject, options){
+
+    // element animation is applied to
+    this.element = targetElement; 
+
+    this.playing = false;
+
+    this._startTime = null;
+    this._startFired = false;
+
+    this.valuesEnd = endObject; // valuesEnd
+    this.valuesStart = startObject; // valuesStart
+    
+    // OPTIONS
+    options = options || {}
+    // internal option to process inline/computed style at start instead of init 
+    // used by to() method and expects object : {} / false
+    this._resetStart = options.resetStart || 0; 
+    // you can only set a core easing function as default
+    this._easing = typeof (options.easing) === 'function' ? options.easing : Util.processEasing(options.easing);
+    this._duration = options.duration || defaultOptions.duration; // duration option | default
+    this._delay = options.delay || defaultOptions.delay; // delay option | default
+
+    // set other options
+    for (const op in options) {
+      let internalOption = `_${op}`
+      if( !(internalOption in this ) ) this[internalOption] = options[op]
+    }
+
+    // callbacks should not be set as undefined
+    // this._onStart = options.onStart
+    // this._onUpdate = options.onUpdate
+    // this._onStop = options.onStop
+    // this._onComplete = options.onComplete
+
+    // queue the easing
+    const easingFnName = this._easing.name;
+    if (!onStart[easingFnName]) {
+      onStart[easingFnName] = function(prop){
+        !KUTE[prop] && prop === this._easing.name && (KUTE[prop] = this._easing) 
+      }
+    }
+
+    return this;
+  }
+
+  // tween prototype
+  // queue tween object to main frame update
+  start(time) { // move functions that use the ticker outside the prototype to be in the same scope with it
+    // now it's a good time to start
+    add(this);
+    this.playing = true;
+    
+    this._startTime = time || KUTE.Time();
+    this._startTime += this._delay;
+
+    if (!this._startFired) {
+      if (this._onStart) { 
+        this._onStart.call(this); 
+      }
+
+      // fire onStart actions
+      for (const obj in onStart) {
+        if (typeof (onStart[obj]) === 'function') {
+          onStart[obj].call(this,obj)
+        } else {
+          for (const prop in onStart[obj]) {
+            onStart[obj][prop].call(this,prop);
+          }
+        }
+      }
+      // add interpolations
+      linkInterpolation.call(this)
+
+      this._startFired = true;
+    }
+
+    !Tick && Ticker();
+    return this;
+  }
+  stop() {
+    if (this.playing) {
+      remove(this);
+      this.playing = false;
+
+      if (this._onStop) { 
+        this._onStop.call(this); 
+      }
+      this.close();
+    }
+    return this;
+  }
+  close () {
+    // scroll|transformMatrix need this
+    for (const component in onComplete){ 
+      for (const toClose in onComplete[component]){ 
+        onComplete[component][toClose].call(this,toClose)
+      }
+    }
+    // when all animations are finished, stop ticking after ~3 frames
+    this._startFired = false;
+    stop.call(this); 
+  }
+  update(time) {
+    time = time !== undefined ? time : KUTE.Time();
+
+    let elapsed, progress;
+
+    if ( time < this._startTime && this.playing ) { return true; }
+
+    elapsed = (time - this._startTime) / this._duration;
+    elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
+
+    // calculate progress
+    progress = this._easing(elapsed); 
+
+    // render the update
+    for (const tweenProp in this.valuesEnd){ 
+      KUTE[tweenProp](this.element,this.valuesStart[tweenProp],this.valuesEnd[tweenProp],progress); 
+    }
+  
+    // fire the updateCallback
+    if (this._onUpdate) {
+      this._onUpdate.call(this);
+    }
+
+    if (elapsed === 1) {
+      // fire the complete callback
+      if (this._onComplete) { 
+        this._onComplete.call(this);
+      } 
+
+      // now we're sure no animation is running
+      this.playing = false;
+
+      //stop ticking when finished
+      this.close();
+
+      return false;
+    }    
+  
+    return true;
+  }
+}
+
+// Update Tween Interface
+TweenConstructor.Tween = TweenBase
\ No newline at end of file
diff --git a/src/tween/tweenCollection.js b/src/tween/tweenCollection.js
new file mode 100644
index 0000000..3ee63d8
--- /dev/null
+++ b/src/tween/tweenCollection.js
@@ -0,0 +1,77 @@
+import KUTE, {TweenConstructor} from '../core/globals.js'
+import {defaultOptions} from '../core/objects.js'
+
+// KUTE.js Tween Collection
+// ========================
+
+export default class TweenCollection {
+  constructor(els,vS,vE,Ops){
+    this.tweens = []
+
+    // set default offset
+    !('offset' in defaultOptions) && (defaultOptions.offset = 0);
+
+    // call in the tween constructor
+    const TC = TweenConstructor.Tween
+
+    Ops = Ops || {}
+    Ops.delay = Ops.delay || defaultOptions.delay;
+
+    // set all options
+    const options = [];
+
+    Array.from(els).map((el,i) => {
+      options[i] = Ops || {}; 
+      options[i].delay = i > 0 ? Ops.delay + (Ops.offset||defaultOptions.offset) : Ops.delay;
+      if (el instanceof Element) {
+        this.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
+  }
+  start(time) {
+    time = time === undefined ? KUTE.Time() : time
+    this.tweens.map((tween) => tween.start(time))
+    return this
+  }
+  stop() { 
+    this.tweens.map((tween) => tween.stop(time))
+    return this
+  }
+  pause() { 
+    this.tweens.map((tween) => tween.pause(time))
+    return this
+  }
+  resume() {
+    this.tweens.map((tween) => tween.resume(time))
+    return this
+  }
+  chain(args) {
+    let 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
+  }
+  playing() {
+    return this.tweens.some(tw=>tw.playing); 
+  }
+  removeTweens(){
+    this.tweens = []
+  }
+  getMaxDuration(){
+    let durations = [];
+    this.tweens.forEach(function(tw){
+      durations.push(tw._duration + tw._delay + tw._repeat * tw._repeatDelay);
+    })
+    return Math.max(durations)
+  }
+}
\ No newline at end of file
diff --git a/src/tween/tweenExtra.js b/src/tween/tweenExtra.js
new file mode 100644
index 0000000..1072873
--- /dev/null
+++ b/src/tween/tweenExtra.js
@@ -0,0 +1,45 @@
+import {TweenConstructor} from '../core/globals.js'
+import Tween from './tween.js'
+
+// to do
+// * per property easing 
+// * per property duration
+// * per property callback
+// * per property delay/offset
+// * new update method to work with the above
+// * other cool ideas
+
+export default class TweenExtra extends Tween {
+  constructor(...args) {
+    super(...args) // import constructor of TweenBase -> Tween
+
+    return this;
+  }
+
+  // additional methods
+  // set/override property
+  to(property,value){
+    // TO DO
+    // this.valuesEnd[property] = value // well that's not all
+  }
+  fromTo(property,value){
+    // TO DO
+    // this.valuesEnd[property] = value // well that's not all
+  }
+  getTotalDuration(){
+    // to do
+  }
+  // set callbacks
+  callback(name,fn){
+    if ( ['start','stop','update','complete','pause','resume'].indexOf(name) >-1 ) {
+      this[`_on${name.charAt(0).toUpperCase() + name.slice(1)}`] = fn
+    }
+  }
+  // set options accepting [repeat,yoyo,delay,repeatDelay,easing]
+  option(option,value) {
+    this[`_${option}`] = value
+  }  
+}
+
+// Tween Interface
+TweenConstructor.Tween = TweenExtra
\ No newline at end of file
diff --git a/src/util/polyfill.js b/src/util/polyfill.js
new file mode 100644
index 0000000..8839b9d
--- /dev/null
+++ b/src/util/polyfill.js
@@ -0,0 +1,4 @@
+import 'minifill/src/Multi.addEventListener.js'
+import 'minifill/src/Date.now.js'
+import 'minifill/src/window.performance.now.js'
+import 'minifill/src/window.requestAnimationFrame.js'
\ No newline at end of file
diff --git a/src/util/progress.js b/src/util/progress.js
new file mode 100644
index 0000000..704b65a
--- /dev/null
+++ b/src/util/progress.js
@@ -0,0 +1,70 @@
+import selector from './selector.js'
+import KUTE,{TweenConstructor} from '../core/globals.js'
+
+export default class ProgressBar {
+  constructor(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]
+    
+    // invalidate
+    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)
+  }
+  updateBar(){
+    let tick = 0.0001;
+    let output = this.toolbar.output;
+    let progress = this.paused ? this.toolbar.value
+                 : (KUTE.Time() - this._startTime ) / this._duration;
+    progress = progress > 1-tick ? 1 : progress < 0.01 ? 0 : progress;
+    let value = !this._reversed ? progress : 1-progress
+    this.toolbar.value = value
+    output && (output.value=(value*100).toFixed(2)+'%')
+  }
+  toggleEvents(action){
+    this.element[`${action}EventListener`]('mousemove',this.moveAction,false) // add passive handler ?
+    this.element[`${action}EventListener`]('mouseup',this.upAction,false)
+  }
+  updateTween() {
+    let progress = (!this.tween._reversed ? this.value : 1-this.value) * this.tween._duration - 0.0001 // make sure we never complete the tween
+    this.tween._startTime = 0;
+    this.tween.update(  progress  )
+  }
+  moveAction(){
+    this.toolbar.updateTween.call(this)
+  }
+  downAction(){
+    if (!this.tween.playing) {
+      this.tween.start();
+    }
+    
+    if ( !this.tween.paused ){
+      this.tween.pause()
+      this.toolbar.toggleEvents('add')
+
+      KUTE.Tick = cancelAnimationFrame(KUTE.Ticker); 
+    }
+  }
+  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); 
+    }
+  }
+}
diff --git a/src/util/selector.js b/src/util/selector.js
new file mode 100644
index 0000000..ed4945c
--- /dev/null
+++ b/src/util/selector.js
@@ -0,0 +1,19 @@
+// a public selector utility
+export default function selector(el, multi) {
+  try{
+    let 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 // scroll
+                    ? el : document.querySelector(el);
+    }
+    return requestedElem;
+  } catch(e){
+    console.error(`KUTE.js - Element(s) not found: ${el}.`)
+  }
+}
\ No newline at end of file
diff --git a/src/util/util.js b/src/util/util.js
new file mode 100644
index 0000000..a125d76
--- /dev/null
+++ b/src/util/util.js
@@ -0,0 +1,91 @@
+// returns browser prefix
+export function getPrefix() {
+  const prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
+
+  let thePrefix;
+  for (let i = 0, pfl = prefixes.length; i < pfl; i++) { 
+    if (`${prefixes[i]}Transform` in document.body.style) { thePrefix = prefixes[i]; break; }  
+  }
+  return thePrefix;
+}
+
+// returns prefixed property | property
+export function trueProperty(property) {
+  const prefixRequired = (!(property in document.body.style)) ? true : false; // is prefix required for property | prefix
+
+  const prefix = getPrefix();
+  return prefixRequired ? prefix + (property.charAt(0).toUpperCase() + property.slice(1)) : property;
+}
+
+// angle conversion
+export const radToDeg = a => a*180/Math.PI
+export const degToRad = a => a*Math.PI/180
+
+// true dimension returns { v = value, u = unit }
+export function trueDimension(dimValue, isAngle) {
+  const intValue = parseInt(dimValue) || 0;
+
+  const mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
+  let theUnit;
+  for (let mIndex=0; mIndex r + r + g + g + b + b);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+// the little gems for light builds
+export function toJSON(tween){
+  let obj = {
+    valuesStart: tween.valuesStart,
+    valuesEnd: tween.valuesEnd
+  }
+  return JSON.stringify(obj)
+}
+export function fromJSON(str){
+  let obj = JSON.parse(str)
+  return {
+    valuesStart: obj.valuesStart,
+    valuesEnd: obj.valuesEnd
+  }
+}
\ No newline at end of file

From cb72a478c23b1652b2535bb956b9669a14b10745 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:08:43 +0000
Subject: [PATCH 358/471]

---
 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 9212dcaeecd23e4977c438b2899274ada88a2c5e Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:21:51 +0000
Subject: [PATCH 359/471]

---
 demo/backgroundPosition.html | 2 +-
 demo/borderRadius.html       | 2 +-
 demo/boxModel.html           | 2 +-
 demo/clipProperty.html       | 2 +-
 demo/colorProperties.html    | 2 +-
 demo/filterEffects.html      | 2 +-
 demo/opacityProperty.html    | 2 +-
 demo/progress.html           | 2 +-
 demo/scrollProperty.html     | 2 +-
 demo/shadowProperties.html   | 2 +-
 demo/svgCubicMorph.html      | 2 +-
 demo/svgDraw.html            | 2 +-
 demo/svgMorph.html           | 2 +-
 demo/svgTransform.html       | 2 +-
 demo/textProperties.html     | 2 +-
 demo/textWrite.html          | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/demo/backgroundPosition.html b/demo/backgroundPosition.html
index 90fcd69..715987d 100644
--- a/demo/backgroundPosition.html
+++ b/demo/backgroundPosition.html
@@ -83,7 +83,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the position of the background image, simple and effective.
    
diff --git a/demo/borderRadius.html b/demo/borderRadius.html
index f92e06e..389c946 100644
--- a/demo/borderRadius.html
+++ b/demo/borderRadius.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the radius for all corners or a specific one for a target element.
    
diff --git a/demo/boxModel.html b/demo/boxModel.html
index df5529d..08ac081 100644
--- a/demo/boxModel.html
+++ b/demo/boxModel.html
@@ -83,7 +83,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the width, height, borderWidth or spacing for a target element on all browsers.
    
diff --git a/demo/clipProperty.html b/demo/clipProperty.html
index b8955fa..4daf5da 100644
--- a/demo/clipProperty.html
+++ b/demo/clipProperty.html
@@ -81,7 +81,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the clip property of a target element when certain conditions are met.
    
diff --git a/demo/colorProperties.html b/demo/colorProperties.html
index 3af958f..3197378 100644
--- a/demo/colorProperties.html
+++ b/demo/colorProperties.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate color properties for a target element and updates its CSS style via RGB.
    
diff --git a/demo/filterEffects.html b/demo/filterEffects.html
index 53d08d8..9f04bdc 100644
--- a/demo/filterEffects.html
+++ b/demo/filterEffects.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate filter functions for a target Element and deliver the best possible animation.
    
diff --git a/demo/opacityProperty.html b/demo/opacityProperty.html
index e928e1b..920d9e5 100644
--- a/demo/opacityProperty.html
+++ b/demo/opacityProperty.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the opacity property of a target element.
    
diff --git a/demo/progress.html b/demo/progress.html
index a6a14a9..52f3bc4 100644
--- a/demo/progress.html
+++ b/demo/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/demo/scrollProperty.html b/demo/scrollProperty.html
index fed6a98..8dd9933 100644
--- a/demo/scrollProperty.html
+++ b/demo/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/demo/shadowProperties.html b/demo/shadowProperties.html
index c58bb82..c2e77f5 100644
--- a/demo/shadowProperties.html
+++ b/demo/shadowProperties.html
@@ -90,7 +90,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the shadow properties of a target element.
    
diff --git a/demo/svgCubicMorph.html b/demo/svgCubicMorph.html
index 00f3daa..b481b39 100644
--- a/demo/svgCubicMorph.html
+++ b/demo/svgCubicMorph.html
@@ -83,7 +83,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate SVG paths with cubic-bezier path commands and improved performance.
    
diff --git a/demo/svgDraw.html b/demo/svgDraw.html
index 0cfeb42..69d185b 100644
--- a/demo/svgDraw.html
+++ b/demo/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/demo/svgMorph.html b/demo/svgMorph.html
index 72b3b08..c7d0b3c 100644
--- a/demo/svgMorph.html
+++ b/demo/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/demo/svgTransform.html b/demo/svgTransform.html
index e2de2eb..0bfbcfb 100644
--- a/demo/svgTransform.html
+++ b/demo/svgTransform.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate 2D transform functions on SVG elements on any SVG enabled browser.
    
diff --git a/demo/textProperties.html b/demo/textProperties.html
index 8021bec..426fc10 100644
--- a/demo/textProperties.html
+++ b/demo/textProperties.html
@@ -82,7 +82,7 @@
 
         
    
           
    
-            
    
+            
    
               
    
                 
    Overview
    
                 
    Animate the text size or spacing properties of a target text element.
    
diff --git a/demo/textWrite.html b/demo/textWrite.html
index c10042b..3ffb461 100644
--- a/demo/textWrite.html
+++ b/demo/textWrite.html
@@ -93,7 +93,7 @@
 
     
    
       
    
-        
    
+        
    
           
    
             
    Overview
    
             
    Manipulate string contents with ease.
    

From b51196cb8605b17de79be04201f71981f162631f Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:22:33 +0000
Subject: [PATCH 360/471]

---
 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 c8b6d85ea03d8b7aae2e298e8a4d4db544096b8f Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:23:18 +0000
Subject: [PATCH 361/471]

---
 demo/svgCubicMorph.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/svgCubicMorph.html b/demo/svgCubicMorph.html
index b481b39..1b2c8e1 100644
--- a/demo/svgCubicMorph.html
+++ b/demo/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 1d8cf96422e17ab7096e965aef67193032f6cab8 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 9 Jun 2020 20:23:36 +0000
Subject: [PATCH 362/471]

---
 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 363/471]

---
 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.
      • 
+        
    
+      
    
+
+      
+      
     
 
     
-          
-
         
+
+        
    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 0435d00b1198c3db4009195bf15cb582e371beb4 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 10 Jun 2020 13:24:42 +0000
Subject: [PATCH 368/471] Changes: * fixed polyfill * fixed IE10+ issues with
 scroll * reworked files and folders structure of the sources * solved some
 demo issues * code cleanup * version bump

---
 demo/assets/css/kute.css                      |  17 +-
 demo/assets/js/scrollProperty.js              |   2 +-
 demo/backgroundPosition.html                  |   2 +-
 demo/borderRadius.html                        |   2 +-
 demo/boxModel.html                            |   2 +-
 demo/clipProperty.html                        |   1 +
 demo/colorProperties.html                     |   2 +-
 demo/filterEffects.html                       |   2 +-
 demo/htmlAttributes.html                      |   2 +-
 demo/scrollProperty.html                      |  13 -
 demo/src/kute-base.js                         | 129 ++++---
 demo/src/kute-base.min.js                     |   4 +-
 demo/src/kute-extra.js                        | 352 +++++++++---------
 demo/src/kute-extra.min.js                    |   4 +-
 demo/src/kute.min.js                          |   4 +-
 demo/src/polyfill.min.js                      |   2 +-
 demo/svgTransform.html                        |   2 +-
 demo/textWrite.html                           |  12 -
 dist/kute.esm.js                              | 296 ++++++++-------
 dist/kute.esm.min.js                          |   4 +-
 dist/kute.js                                  | 296 ++++++++-------
 dist/kute.min.js                              |   4 +-
 dist/polyfill.js                              | 173 ++++-----
 dist/polyfill.min.js                          |   2 +-
 package.json                                  |   6 +-
 src/animation/animation.js                    |  24 +-
 src/animation/animationBase.js                |  10 +-
 src/animation/animationDevelopment.js         |   9 +-
 src/components/backgroundPosition.js          |  12 +-
 src/components/borderRadius.js                |  12 +-
 src/components/boxModel.js                    |  11 +-
 src/components/clipProperty.js                |  10 +-
 src/components/colorProperties.js             |  11 +-
 src/components/crossBrowserMove.js            |  11 +-
 src/components/filterEffects.js               |  11 +-
 src/components/htmlAttributes.js              |  13 +-
 src/components/opacityProperty.js             |   8 +-
 src/components/scrollProperty.js              |  14 +-
 src/components/shadowProperties.js            |  11 +-
 src/components/svgCubicMorph.js               |   6 +-
 src/components/svgDraw.js                     |   8 +-
 src/components/svgMorph.js                    |   5 +-
 src/components/svgTransform.js                |   6 +-
 src/components/textProperties.js              |  11 +-
 src/components/textWrite.js                   |   8 +-
 src/components/transformFunctions.js          |   7 +-
 src/components/transformMatrix.js             |   7 +-
 src/core/Render.js                            |  73 ++++
 src/core/add.js                               |   2 +
 src/core/getAll.js                            |   2 +
 src/core/globals.js                           |   5 -
 src/core/interface.js                         |  28 --
 src/core/internals.js                         | 113 +-----
 src/core/linkInterpolation.js                 |  34 ++
 src/core/objects.js                           |  58 ---
 src/core/process.js                           | 115 ------
 src/core/remove.js                            |   5 +
 src/core/removeAll.js                         |   2 +
 src/easing/easing-base.js                     |   2 +-
 src/easing/easing-bezier.js                   |   2 +-
 src/easing/easing.js                          |   2 +-
 src/index-base.js                             |  14 +-
 src/index-extra.js                            |  99 ++---
 src/index.js                                  |  17 +-
 src/interface/allFromTo.js                    |   7 +
 src/interface/allTo.js                        |   9 +
 src/interface/fromTo.js                       |   9 +
 src/interface/to.js                           |  10 +
 src/objects/Components.js                     |   1 +
 .../interpolate.js => objects/Interpolate.js} |   0
 src/objects/KUTE.js                           |   1 +
 src/objects/Objects.js                        |  21 ++
 src/objects/ObjectsBase.js                    |  13 +
 src/objects/TweenConstructor.js               |   1 +
 src/objects/Tweens.js                         |   1 +
 src/objects/Util.js                           |   2 +
 src/objects/crossCheck.js                     |   5 +
 src/objects/defaultOptions.js                 |   6 +
 src/objects/defaultValues.js                  |   1 +
 src/objects/globalObject.js                   |   5 +
 src/objects/linkProperty.js                   |   2 +
 src/objects/onComplete.js                     |   2 +
 src/objects/onStart.js                        |   3 +
 src/objects/prepareProperty.js                |   2 +
 src/objects/prepareStart.js                   |   2 +
 src/objects/supportedProperties.js            |   1 +
 src/process/Process.js                        |  11 +
 src/process/getInlineStyle.js                 |  34 ++
 src/process/getStartValues.js                 |  33 ++
 src/process/getStyleForProperty.js            |  13 +
 src/process/prepareObject.js                  |  31 ++
 src/tween/tween.js                            |  15 +-
 src/tween/tweenBase.js                        |  16 +-
 src/tween/tweenCollection.js                  |   5 +-
 src/tween/tweenExtra.js                       |   2 +-
 src/util/degToRad.js                          |   1 +
 src/util/fromJSON.js                          |   8 +
 src/util/getPrefix.js                         |  10 +
 src/util/hexToRGB.js                          |  11 +
 src/util/polyfill.js                          |   7 +-
 src/util/{progress.js => progressBar.js}      |   3 +-
 src/util/radToDeg.js                          |   3 +
 src/util/rgbToHex.js                          |   4 +
 src/util/toJSON.js                            |   8 +
 src/util/trueColor.js                         |  23 ++
 src/util/trueDimension.js                     |  14 +
 src/util/trueProperty.js                      |   8 +
 src/util/util.js                              |  91 -----
 108 files changed, 1352 insertions(+), 1236 deletions(-)
 create mode 100644 src/core/Render.js
 create mode 100644 src/core/add.js
 create mode 100644 src/core/getAll.js
 delete mode 100644 src/core/globals.js
 delete mode 100644 src/core/interface.js
 create mode 100644 src/core/linkInterpolation.js
 delete mode 100644 src/core/objects.js
 delete mode 100644 src/core/process.js
 create mode 100644 src/core/remove.js
 create mode 100644 src/core/removeAll.js
 create mode 100644 src/interface/allFromTo.js
 create mode 100644 src/interface/allTo.js
 create mode 100644 src/interface/fromTo.js
 create mode 100644 src/interface/to.js
 create mode 100644 src/objects/Components.js
 rename src/{core/interpolate.js => objects/Interpolate.js} (100%)
 create mode 100644 src/objects/KUTE.js
 create mode 100644 src/objects/Objects.js
 create mode 100644 src/objects/ObjectsBase.js
 create mode 100644 src/objects/TweenConstructor.js
 create mode 100644 src/objects/Tweens.js
 create mode 100644 src/objects/Util.js
 create mode 100644 src/objects/crossCheck.js
 create mode 100644 src/objects/defaultOptions.js
 create mode 100644 src/objects/defaultValues.js
 create mode 100644 src/objects/globalObject.js
 create mode 100644 src/objects/linkProperty.js
 create mode 100644 src/objects/onComplete.js
 create mode 100644 src/objects/onStart.js
 create mode 100644 src/objects/prepareProperty.js
 create mode 100644 src/objects/prepareStart.js
 create mode 100644 src/objects/supportedProperties.js
 create mode 100644 src/process/Process.js
 create mode 100644 src/process/getInlineStyle.js
 create mode 100644 src/process/getStartValues.js
 create mode 100644 src/process/getStyleForProperty.js
 create mode 100644 src/process/prepareObject.js
 create mode 100644 src/util/degToRad.js
 create mode 100644 src/util/fromJSON.js
 create mode 100644 src/util/getPrefix.js
 create mode 100644 src/util/hexToRGB.js
 rename src/util/{progress.js => progressBar.js} (93%)
 create mode 100644 src/util/radToDeg.js
 create mode 100644 src/util/rgbToHex.js
 create mode 100644 src/util/toJSON.js
 create mode 100644 src/util/trueColor.js
 create mode 100644 src/util/trueDimension.js
 create mode 100644 src/util/trueProperty.js
 delete mode 100644 src/util/util.js

diff --git a/demo/assets/css/kute.css b/demo/assets/css/kute.css
index 7308775..b6693e8 100644
--- a/demo/assets/css/kute.css
+++ b/demo/assets/css/kute.css
@@ -98,8 +98,6 @@ footer p {margin: 0 0 10px}
 }
 
 .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; }
@@ -121,10 +119,10 @@ footer p {margin: 0 0 10px}
 .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 { display: flex; flex-direction: row; margin: 0; padding: 0 }
 #share li { list-style: none }
 #share a { text-decoration: none; }
-#share .icon {width:26px; height:auto; vertical-align: middle;}
+#share .icon {width:26px; height:26px; 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; }
@@ -136,7 +134,6 @@ footer p {margin: 0 0 10px}
 	.navbar-wrapper h1 {border: 0}
 	.navbar-wrapper .nav,
 	.navbar-wrapper h1 { float: none;  }
-	#share { top: 30px; }
 }
 
 
@@ -275,16 +272,6 @@ h1.example-item span {
 	.col9 { max-width: 66.65%; flex: 0 0 66.65% }
 }
 
-/* @media (min-width: 480px) and (max-width: 768px){
-	.col3,
-	.col4 { width: 50%; flex: 0 0 50% }
-	.col8,
-	.col9 { width: 50%; flex: 0 0 50% }
-}
-@media (max-width: 479px){
-	.columns > [class*="col"] { width: 100%; }
-} */
-
 .table { display: table; height: 480px }
 .cell { display: table-cell; vertical-align: middle }
 
diff --git a/demo/assets/js/scrollProperty.js b/demo/assets/js/scrollProperty.js
index 9ef870d..3271250 100644
--- a/demo/assets/js/scrollProperty.js
+++ b/demo/assets/js/scrollProperty.js
@@ -5,7 +5,7 @@ var scrollProperty = document.getElementById('scrollProperty'),
 
 button.addEventListener('click', function(e){
 	e.preventDefault();
-	let scrollTween = target.scrollTop !==0 ?
+	var scrollTween = target.scrollTop !==0 ?
 		KUTE.to(target,{scroll:0},{duration:2000, easing: "easingCircularOut"}) :
 		KUTE.to(target,{scroll:(target.scrollHeight-target.offsetHeight+10)},{duration:2000, easing: "easingCircularOut"})
 	!scrollTween.playing && scrollTween.start()
diff --git a/demo/backgroundPosition.html b/demo/backgroundPosition.html
index 715987d..26586c9 100644
--- a/demo/backgroundPosition.html
+++ b/demo/backgroundPosition.html
@@ -127,7 +127,7 @@ let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start()
               
  • 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.
    • 
+              
  • This component is bundled with the demo/src/kute-extra.js file.
    • 
 
           
       
diff --git a/demo/borderRadius.html b/demo/borderRadius.html
index 389c946..2305fcd 100644
--- a/demo/borderRadius.html
+++ b/demo/borderRadius.html
@@ -138,7 +138,7 @@ KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start();
               
  • 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.
    • 
+              
  • This component is bundled with demo/src/kute-extra.js file.
    • 
 
           
       
diff --git a/demo/boxModel.html b/demo/boxModel.html
index 08ac081..ef34c1e 100644
--- a/demo/boxModel.html
+++ b/demo/boxModel.html
@@ -147,7 +147,7 @@ let tween8 = KUTE.to('selector1',{margin:'5px'})
               
  • 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.
    • 
+              
  • The baseBoxModel component is featured in all distributions, while the full component is bundled with demo/src/kute-extra.js file.
    • 
           
 
       
diff --git a/demo/clipProperty.html b/demo/clipProperty.html
index 4daf5da..209e92b 100644
--- a/demo/clipProperty.html
+++ b/demo/clipProperty.html
@@ -93,6 +93,7 @@
                 
    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.
    
+                
    This component is bundled with the demo/src/kute-extra.js file.
    
               
             
           
diff --git a/demo/colorProperties.html b/demo/colorProperties.html
index 3197378..ec187b8 100644
--- a/demo/colorProperties.html
+++ b/demo/colorProperties.html
@@ -137,7 +137,7 @@ KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+
           
  • 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.
    • 
+          
  • This component is bundled with the standard kute.js distribution file and the demo/src/kute-extra.js file.
    • 
 
         
 
diff --git a/demo/filterEffects.html b/demo/filterEffects.html
index b14c7d3..5e079dc 100644
--- a/demo/filterEffects.html
+++ b/demo/filterEffects.html
@@ -161,7 +161,7 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop
                   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.
    • 
+              
  • This component is bundled with the demo/src/kute-extra.js file.
    • 
               
           
       
diff --git a/demo/htmlAttributes.html b/demo/htmlAttributes.html
index 75695cc..be6fced 100644
--- a/demo/htmlAttributes.html
+++ b/demo/htmlAttributes.html
@@ -207,7 +207,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
               (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.
    • 
+          
  • This component is bundled with the standard kute.js distribution file and the demo/src/kute-extra.js file.
    • 
         
       
 
diff --git a/demo/scrollProperty.html b/demo/scrollProperty.html
index 8dd9933..897fcd1 100644
--- a/demo/scrollProperty.html
+++ b/demo/scrollProperty.html
@@ -150,21 +150,8 @@ KUTE.to('#myElement',{scroll: 0 }).start()
           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.
    • 
-
       
 
-      
     
 
     
diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js
index a74afbb..966b258 100644
--- a/demo/src/kute-base.js
+++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js
index 6f2920b..98ca310 100644
--- a/demo/src/kute-base.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index b4bc347..e9051a5 100644
--- a/demo/src/kute.min.js
+++ b/demo/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/demo/src/polyfill.min.js b/demo/src/polyfill.min.js
index b279d33..7c165cd 100644
--- a/demo/src/polyfill.min.js
+++ b/demo/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/demo/textWrite.html b/demo/textWrite.html
index 3ffb461..7f78d8f 100644
--- a/demo/textWrite.html
+++ b/demo/textWrite.html
@@ -233,18 +233,6 @@ tweenObjects.start();
         
  • For a full code review, check out the ./assets/js/textWrite.js example source code.
    • 
       
 
-      
     
 
     
diff --git a/dist/kute.esm.js b/dist/kute.esm.js
index fd738a9..a8e6af6 100644
--- a/dist/kute.esm.js
+++ b/dist/kute.esm.js
@@ -1,30 +1,40 @@
 /*!
-* KUTE.js Standard v2.0.0 (http://thednp.github.io/kute.js)
+* KUTE.js Standard 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)
 */
-var version = "2.0.0";
+var version = "2.0.1";
+
+var Util = {};
 
-var Tweens = [];
 var Components = {};
+
 var supportedProperties = {};
+
 var defaultValues = {};
+
 var defaultOptions = {
   duration: 700,
   delay: 0,
   easing: 'linear'
 };
-var prepareStart = {};
+
 var prepareProperty = {};
+
+var prepareStart = {};
+
 var crossCheck = {};
-var onComplete = {};
+
 var onStart = {};
+
+var onComplete = {};
+
 var linkProperty = {};
-var Util = {};
+
 var Objects = {
   supportedProperties: supportedProperties,
-  defaultOptions: defaultOptions,
   defaultValues: defaultValues,
+  defaultOptions: defaultOptions,
   prepareProperty: prepareProperty,
   prepareStart: prepareStart,
   crossCheck: crossCheck,
@@ -33,92 +43,59 @@ var Objects = {
   linkProperty: linkProperty
 };
 
-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>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(w.call(this,a,"end"),this._resetStart?this.valuesStart=n:w.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 w in t.functions[y])!h[y][e]&&(h[y][e]={}),!h[y][e][w]&&(h[y][e][w]=t.functions[y][w]);if(t.Interpolate){for(var b in t.Interpolate){var T=t.Interpolate[b];if("function"!=typeof T||E[b])for(var S in T)"function"!=typeof T[S]||E[b]||(E[b]=T[S]);else E[b]=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 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=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?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&&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=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)?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: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:_},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)}var Xe={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:b,Internals:U,Selector:N,Version:"2.0.0"};export default Xe;
+// KUTE.js Standard v2.0.1 | thednp © 2020 | MIT-License
+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 v(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 d(){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={},v.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:d,prepareObject:v},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(v.call(this,a,"end"),this._resetStart?this.valuesStart=n:v.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,d.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(""),vt=ct.concat(pt,ft),dt=vt.concat(ht),gt={alpha:ct,upper:pt,symbols:ht,numeric:ft,alphanumeric:vt,all:dt};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 v=r[f];h[f]=""+c+v in e?parseInt(e[""+c+v]):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 de(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}}ve(t)}else ve(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:ve,scanSegment:de,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)}var Xe={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"};export default Xe;
diff --git a/dist/kute.js b/dist/kute.js
index a9d6442..93ef0dd 100644
--- a/dist/kute.js
+++ b/dist/kute.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Standard v2.0.0 (http://thednp.github.io/kute.js)
+* KUTE.js Standard 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,38 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.0";
+  var version = "2.0.1";
+
+  var Util = {};
 
-  var Tweens = [];
   var Components = {};
+
   var supportedProperties = {};
+
   var defaultValues = {};
+
   var defaultOptions = {
     duration: 700,
     delay: 0,
     easing: 'linear'
   };
-  var prepareStart = {};
+
   var prepareProperty = {};
+
+  var prepareStart = {};
+
   var crossCheck = {};
-  var onComplete = {};
+
   var onStart = {};
+
+  var onComplete = {};
+
   var linkProperty = {};
-  var Util = {};
+
   var Objects = {
     supportedProperties: supportedProperties,
-    defaultOptions: defaultOptions,
     defaultValues: defaultValues,
+    defaultOptions: defaultOptions,
     prepareProperty: prepareProperty,
     prepareStart: prepareStart,
     crossCheck: crossCheck,
@@ -39,92 +49,59 @@
     linkProperty: linkProperty
   };
 
-  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>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/dist/polyfill.js b/dist/polyfill.js
index a39b65f..8223a6d 100644
--- a/dist/polyfill.js
+++ b/dist/polyfill.js
@@ -1,105 +1,88 @@
 "use strict";
-if (!window.addEventListener||!Window.prototype.addEventListener) {
-  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]);
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+    return function from(arrayLike) {
+      var C = this, items = Object(arrayLike);
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
       }
-    }
-    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];
+      var mapFn = arguments.length > 1 ? arguments[1] : void undefined, T;
+      if (typeof mapFn !== 'undefined') {
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+        if (arguments.length > 2) {
+          T = arguments[2];
         }
       }
+      var len = toLength(items.length);
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+      var k = 0;
+      var kValue;
+      while (k < len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      A.length = len;
+      return A;
     }
+  }());
+}
+
+if (!Array.prototype.includes) {
+  Array.prototype.includes = function(searchElement  ) {
+    var O = Object(this);
+    var len = parseInt(O.length) || 0;
+    if (len === 0) {
+      return false;
+    }
+    var n = parseInt(arguments[1]) || 0;
+    var k;
+    if (n >= 0) {
+      k = n;
+    } else {
+      k = len + n;
+      if (k < 0) {k = 0;}
+    }
+    var currentElement;
+    while (k < len) {
+      currentElement = O[k];
+      if (searchElement === currentElement ||
+         (searchElement !== searchElement && currentElement !== currentElement)) {
+        return true;
+      }
+      k++;
+    }
+    return false;
   };
 }
 
-if(!Date.now){
-  Date.now = function now() {
-    return new Date().getTime();
+if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+    if (start === undefined) { start = 0; }
+    return this.indexOf(search, start) !== -1;
   };
 }
-
-if ( !window.performance ) {
-  window.performance = {};
-}
-if ( !window.performance.now ){
-  var nowOffset = Date.now();
-  window.performance.now = function now(){
-    return Date.now() - nowOffset;
-  };
-}
-
-if (!window.requestAnimationFrame) {
-	var	lastTime = Date.now();
-	window.requestAnimationFrame = function (callback) {
-		if (typeof callback !== 'function') {
-			throw new TypeError(callback + 'is not a function');
-		}
-		var	currentTime = Date.now(),
-			delay = 16 + lastTime - currentTime;
-		if (delay < 0) { delay = 0;	}
-		lastTime = currentTime;
-		return setTimeout(function () {
-			lastTime = Date.now();
-			callback(performance.now());
-		}, delay);
-	};
-	window.cancelAnimationFrame = function (id) {
-		clearTimeout(id);
-	};
-}
diff --git a/dist/polyfill.min.js b/dist/polyfill.min.js
index b279d33..7c165cd 100644
--- a/dist/polyfill.min.js
+++ b/dist/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 {
+  let i = 0;
+  while ( i < Tweens.length ) {
+    if ( Tweens[i].update(time) ) {
+      i++;
+    } else {
+      Tweens.splice(i, 1);
+    }
+  }
+  Tick = requestAnimationFrame(Ticker);
+}
+export {Ticker}
+
+
+// stop requesting animation frame
+export function stop() {
+  setTimeout(() => { // re-added for #81
+    if (!Tweens.length && Tick) { 
+      cancelAnimationFrame(Tick); 
+      Tick = null;
+      for (let obj in onStart) {
+        if (typeof (onStart[obj]) === 'function') {
+          KUTE[obj] && (delete KUTE[obj])
+        } else {
+          for (let prop in onStart[obj]) {
+            KUTE[prop] && (delete KUTE[prop])
+          }
+        }
+      }
+      for (let i in Interpolate) {
+        KUTE[i] && (delete KUTE[i])
+      }
+    }
+  },64)
+}
+
+// KUTE.js render update functions
+// ===============================
+const Render = {Tick,Ticker,Tweens,Time}
+for ( const blob in Render ) {
+  if (!KUTE[blob]) {
+    KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
+  }
+}
+export default Render
+globalObject[`_KUTE`] = KUTE
\ No newline at end of file
diff --git a/src/core/add.js b/src/core/add.js
new file mode 100644
index 0000000..e34d9d3
--- /dev/null
+++ b/src/core/add.js
@@ -0,0 +1,2 @@
+import Tweens from '../objects/Tweens.js'
+export default (tw) => Tweens.push(tw)
\ No newline at end of file
diff --git a/src/core/getAll.js b/src/core/getAll.js
new file mode 100644
index 0000000..151cccf
--- /dev/null
+++ b/src/core/getAll.js
@@ -0,0 +1,2 @@
+import Tweens from '../objects/Tweens.js'
+export default () => Tweens
diff --git a/src/core/globals.js b/src/core/globals.js
deleted file mode 100644
index be9acfe..0000000
--- a/src/core/globals.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const globalObject = typeof (global) !== 'undefined' ? global 
-                          : typeof(self) !== 'undefined' ? self
-                          : typeof(window) !== 'undefined' ? window : {}
-export let TweenConstructor = {}
-export default {}
\ No newline at end of file
diff --git a/src/core/interface.js b/src/core/interface.js
deleted file mode 100644
index 574fe15..0000000
--- a/src/core/interface.js
+++ /dev/null
@@ -1,28 +0,0 @@
-
-import selector from '../util/selector.js'
-import {TweenConstructor} from './globals.js'
-import TweenCollection from '../tween/tweenCollection.js'
-
-const TC = TweenConstructor.Tween
-
-// main methods
-export function to(element, endObject, optionsObj) {
-  optionsObj = optionsObj || {}
-  optionsObj.resetStart = endObject
-  return new TC(selector(element), endObject, endObject, optionsObj)
-}
-export function fromTo(element, startObject, endObject, optionsObj) {
-  optionsObj = optionsObj || {}
-  return new TC(selector(element), startObject, endObject, optionsObj)
-}
-
-// multiple elements tween objects
-export function allTo(elements, endObject, optionsObj) {
-  optionsObj = optionsObj || {}
-  optionsObj.resetStart = endObject
-  return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
-}
-export function allFromTo(elements, startObject, endObject, optionsObj) {
-  optionsObj = optionsObj || {}
-  return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
-}
\ No newline at end of file
diff --git a/src/core/internals.js b/src/core/internals.js
index 1de5104..54aacd4 100644
--- a/src/core/internals.js
+++ b/src/core/internals.js
@@ -1,110 +1,9 @@
-// imports
-import {Tweens,onStart,linkProperty,supportedProperties} from './objects.js'
-import KUTE,{globalObject} from './globals.js'
-import Interpolate from './interpolate.js'
-
-
-// KUTE.js INTERNALS
-// =================
-
-export const add = function(tw) { Tweens.push(tw); }
-export const remove = function(tw) { const i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); }}
-export const getAll = function() { return Tweens }
-export const removeAll = function() { Tweens.length = 0 }
-
-// KUTE.js render update functions
-// ===============================
-
-export let Tick = 0
-export function Ticker(time) {
-  let i = 0;
-  while ( i < Tweens.length ) {
-    if ( Tweens[i].update(time) ) {
-      i++;
-    } else {
-      Tweens.splice(i, 1);
-    }
-  }
-  Tick = requestAnimationFrame(Ticker);
-}
-
-const Time = {}
-  
-// In node.js, use process.hrtime.
-if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
-	Time.now = function () {
-		var time = process.hrtime();
-		return time[0] * 1000 + time[1] / 1000000;
-	};
-// In a browser, use self.performance.now if it is available.
-} else if (typeof (self) !== 'undefined' &&
-         self.performance !== undefined &&
-		 self.performance.now !== undefined) {
-	Time.now = self.performance.now.bind(self.performance);
-}
-
-export {Time}
-
-// stop requesting animation frame
-export function stop () {
-  setTimeout(() => { // re-added for #81
-    if (!Tweens.length && Tick) { 
-      cancelAnimationFrame(Tick); 
-      Tick = null;
-      for (const obj in onStart) {
-        if (typeof (onStart[obj]) === 'function') {
-          KUTE[obj] && (delete KUTE[obj])
-        } else {
-          for (const prop in onStart[obj]) {
-            KUTE[prop] && (delete KUTE[prop])
-          }
-        }
-      }
-      for (const i in Interpolate) {
-        KUTE[i] && (delete KUTE[i])
-      }
-    }
-  },64)
-}
-
-export function linkInterpolation(){
-  for (const component in linkProperty){
-    const componentLink = linkProperty[component]
-    const componentProps = supportedProperties[component]
-
-    for ( const fnObj in componentLink ) {
-      if ( typeof(componentLink[fnObj]) === 'function' 
-          && Object.keys(this.valuesEnd).some(i => componentProps.includes(i) 
-          || i=== 'attr' && Object.keys(this.valuesEnd[i]).some(j => componentProps.includes(j)) ) ) 
-      { // ATTR, colors, scroll, boxModel, borderRadius
-        !KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj])
-      } else {
-
-        for ( const prop in this.valuesEnd ) {
-          for ( const i in this.valuesEnd[prop] ) {
-            if ( typeof(componentLink[i]) === 'function' ) { // transformCSS3
-              !KUTE[i] && (KUTE[i] = componentLink[i])
-            } else {
-              for (const j in componentLink[fnObj]){
-                if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) { // transformMatrix
-                  !KUTE[j] && (KUTE[j] = componentLink[i][j])
-                }
-              }
-            } 
-          }
-        }
-      }
-    }
-  }
-}
-
-export const Render = {Tick,Ticker,Tweens,Time}
-for (const blob in Render ) {
-  if (!KUTE[blob]) {
-    KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
-  }
-}
-globalObject[`_KUTE`] = KUTE
+import add from './add.js'
+import remove from './remove.js'
+import getAll from './getAll.js'
+import removeAll from './removeAll.js'
+import {stop} from './Render.js'
+import linkInterpolation from './linkInterpolation.js'
 
 export default {
   add,
diff --git a/src/core/linkInterpolation.js b/src/core/linkInterpolation.js
new file mode 100644
index 0000000..15f4e71
--- /dev/null
+++ b/src/core/linkInterpolation.js
@@ -0,0 +1,34 @@
+import KUTE from '../objects/KUTE.js'
+import linkProperty from '../objects/linkProperty.js'
+import supportedProperties from '../objects/supportedProperties.js'
+
+export default function() { // DON'T change
+  for (const component in linkProperty){
+    const componentLink = linkProperty[component]
+    const componentProps = supportedProperties[component]
+
+    for ( const fnObj in componentLink ) {
+      if ( typeof(componentLink[fnObj]) === 'function' 
+          && Object.keys(this.valuesEnd).some(i => componentProps && componentProps.includes(i) 
+          || i=== 'attr' && Object.keys(this.valuesEnd[i]).some(j => componentProps && componentProps.includes(j)) ) ) 
+      { // ATTR, colors, scroll, boxModel, borderRadius
+        !KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj])
+      } else {
+
+        for ( const prop in this.valuesEnd ) {
+          for ( const i in this.valuesEnd[prop] ) {
+            if ( typeof(componentLink[i]) === 'function' ) { // transformCSS3
+              !KUTE[i] && (KUTE[i] = componentLink[i])
+            } else {
+              for (const j in componentLink[fnObj]){
+                if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) { // transformMatrix
+                  !KUTE[j] && (KUTE[j] = componentLink[i][j])
+                }
+              }
+            } 
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/core/objects.js b/src/core/objects.js
deleted file mode 100644
index 007ee2f..0000000
--- a/src/core/objects.js
+++ /dev/null
@@ -1,58 +0,0 @@
-export const Tweens = []
-
-export const Components = {}
-
-export const supportedProperties = {}
-
-export const defaultValues = {}; 
-
-export const defaultOptions = {
-  duration: 700,
-  delay: 0,
-  easing: 'linear'
-}
-
-// check current property value when .to() method is used
-export const prepareStart = {}
-
-// used in preparePropertiesObject
-export const prepareProperty = {} 
-
-// checks for differences between the processed start and end values, 
-// can be set to make sure start unit and end unit are same, 
-// stack transforms, process SVG paths,
-// any type of post processing the component needs
-export const crossCheck = {}
-
-// schedule property specific function on animation complete
-export const onComplete = {}
-
-// schedule property specific function on animation start
-// link property update function to KUTE.js execution context
-export const onStart = {}
-
-// link properties to interpolate functions
-export const linkProperty = {}
-
-// util - a general object for utils like rgbToHex, processEasing
-export const Util = {}
-
-export const BaseObjects = { 
-  defaultOptions,
-  linkProperty,
-  onComplete,
-  onStart,
-  supportedProperties 
-}
-
-export default {
-  supportedProperties,
-  defaultOptions,
-  defaultValues,
-  prepareProperty,
-  prepareStart,
-  crossCheck,
-  onStart,
-  onComplete,
-  linkProperty
-}
diff --git a/src/core/process.js b/src/core/process.js
deleted file mode 100644
index 795c12c..0000000
--- a/src/core/process.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import {trueProperty} from '../util/util.js'
-import {defaultValues,supportedProperties,prepareStart,prepareProperty} from './objects.js'
-
-// get transform style for element from cssText for .to() method
-export function getInlineStyle(el) {
-  if ( !el.style ) return; // if the scroll applies to `window` it returns as it has no styling
-  const css = el.style.cssText.replace(/\s/g,'').split(';'); // the cssText | the resulting transform object
-  const transformObject = {};
-  const arrayFn = ['translate3d','translate','scale3d','skew']
-
-  // if we have any inline style in the cssText attribute, usually it has higher priority
-  for ( let i=0, csl = css.length; i { 
+  let i = Tweens.indexOf(tw)
+  i !== -1 && Tweens.splice(i, 1)
+}
diff --git a/src/core/removeAll.js b/src/core/removeAll.js
new file mode 100644
index 0000000..f21c28e
--- /dev/null
+++ b/src/core/removeAll.js
@@ -0,0 +1,2 @@
+import Tweens from '../objects/Tweens.js'
+export default () => { Tweens.length = 0 }
diff --git a/src/easing/easing-base.js b/src/easing/easing-base.js
index 46e8121..ef3e1b3 100644
--- a/src/easing/easing-base.js
+++ b/src/easing/easing-base.js
@@ -1,4 +1,4 @@
-import {Util} from '../core/objects.js'
+import Util from '../objects/Util.js'
 
 // Robert Penner's Easing Functions
 export function linear (t) { return t; }
diff --git a/src/easing/easing-bezier.js b/src/easing/easing-bezier.js
index 79b0a03..83584cb 100644
--- a/src/easing/easing-bezier.js
+++ b/src/easing/easing-bezier.js
@@ -1,4 +1,4 @@
-import {Util} from '../core/objects.js'
+import Util from '../objects/Util.js'
 import CubicBezier from 'cubic-bezier-easing'
 
 const Easing = {
diff --git a/src/easing/easing.js b/src/easing/easing.js
index 4621113..f2a6974 100644
--- a/src/easing/easing.js
+++ b/src/easing/easing.js
@@ -1,4 +1,4 @@
-import {Util} from '../core/objects.js'
+import Util from '../objects/Util.js'
 
 // Robert Penner's Easing Functions
 export function linear (t) { return t; }
diff --git a/src/index-base.js b/src/index-base.js
index 8c70638..29ef1c1 100644
--- a/src/index-base.js
+++ b/src/index-base.js
@@ -1,22 +1,24 @@
 import {version as Version} from './../package.json'
-import {Util, BaseObjects as Objects} from './core/objects.js'
+import Objects from './objects/ObjectsBase.js'
+import Util from './objects/Util.js'
 import Easing from './easing/easing-base.js'
-import Internals,{Render} from './core/internals.js'
+import Internals from './core/Internals.js'
+import Render from './core/Render.js'
 import Selector from './util/selector.js'
-import Interpolate from './core/interpolate.js'
+import Interpolate from './objects/Interpolate.js'
 
-import {default as Animation} from './animation/animationBase.js'
+import Animation from './animation/animationBase.js'
 
 // TweenConstructor
 import TweenBase from './tween/tweenBase.js'
 // Interface only fromTo
-import {fromTo} from './core/interface.js'
+import fromTo from './interface/fromTo.js'
 
 import {baseTransformOps} from './components/transformFunctions.js'
 import {baseBoxModelOps} from './components/boxModel.js'
 import {baseOpacityOps} from './components/opacityProperty.js'
 import {baseScrollOps} from './components/scrollProperty.js'
-// import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
+import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
 
 const BaseTransform = new Animation(baseTransformOps)
 const BaseBoxModel = new Animation(baseBoxModelOps)
diff --git a/src/index-extra.js b/src/index-extra.js
index ed67cbf..fa18988 100644
--- a/src/index-extra.js
+++ b/src/index-extra.js
@@ -1,8 +1,11 @@
 import {version as Version} from './../package.json'
-import Objects,{Util,Components} from './core/objects.js'
-import Interpolate from './core/interpolate.js'
-import Process from './core/process.js'
-import Internals,{Render} from './core/internals.js'
+import Objects from './objects/Objects.js'
+import Util from './objects/Util.js'
+import Components from './objects/Components.js'
+import Interpolate from './objects/Interpolate.js'
+import Process from './process/Process.js'
+import Internals from './core/Internals.js'
+import Render from './core/Render.js'
 import CubicBezier from 'cubic-bezier-easing'
 import Easing from './easing/easing-bezier.js'
 import Selector from './util/selector.js'
@@ -10,10 +13,14 @@ import Selector from './util/selector.js'
 // TweenConstructor
 import TweenExtra from './tween/tweenExtra.js'
 import TweenCollection from './tween/tweenCollection.js'
-import ProgressBar from './util/progress.js'
-import {to,fromTo,allTo,allFromTo} from './core/interface.js'
+import ProgressBar from './util/progressBar.js'
+// interface
+import to from './interface/to.js'
+import fromTo from './interface/fromTo.js'
+import allTo from './interface/allTo.js'
+import allFromTo from './interface/allFromTo.js'
 
-import {default as Animation} from './animation/animationDevelopment.js'
+import Animation from './animation/animationDevelopment.js'
 
 // components
 import {bgPosOps} from './components/backgroundPosition.js'
@@ -33,49 +40,49 @@ import {textOps} from './components/textProperties.js'
 import {textWriteOps} from './components/textWrite.js'
 import {matrixTransformOps} from './components/transformMatrix.js'
 
-const BackgroundPosition = new Animation(bgPosOps)
-const BorderRadius = new Animation(radiusOps)
-const BoxModel = new Animation(boxModelOps)
-const ColorProperties = new Animation(colorsOps)
-const ClipProperty = new Animation(clipOps)
-const FilterEffects = new Animation(filterOps)
-const HTMLAttributes = new Animation(attrOps)
-const OpacityProperty = new Animation(opacityOps)
-const TextProperties = new Animation(textOps)
-const TextWrite = new Animation(textWriteOps)
-const TransformMatrix = new Animation(matrixTransformOps)
-const ScrollProperty = new Animation(scrollOps)
-const ShadowProperties = new Animation(shadowOps)
-const SVGCubicMorph = new Animation(svgCubicMorphOps)
-const SVGDraw = new Animation(svgDrawOps)
-const SVGTransform = new Animation(svgTransformOps)
+// const BackgroundPosition = new Animation(bgPosOps)
+// const BorderRadius = new Animation(radiusOps)
+// const BoxModel = new Animation(boxModelOps)
+// const ColorProperties = new Animation(colorsOps)
+// const ClipProperty = new Animation(clipOps)
+// const FilterEffects = new Animation(filterOps)
+// const HTMLAttributes = new Animation(attrOps)
+// const OpacityProperty = new Animation(opacityOps)
+// const TextProperties = new Animation(textOps)
+// const TextWrite = new Animation(textWriteOps)
+// const TransformMatrix = new Animation(matrixTransformOps)
+// const ScrollProperty = new Animation(scrollOps)
+// const ShadowProperties = new Animation(shadowOps)
+// const SVGCubicMorph = new Animation(svgCubicMorphOps)
+// const SVGDraw = new Animation(svgDrawOps)
+// const SVGTransform = new Animation(svgTransformOps)
 
-// for (let component in Components) {
-//   let compOps = Components[component]
-//   Components[component] = new Animation(compOps)
-// }
+for (let component in Components) {
+  let compOps = Components[component]
+  Components[component] = new Animation(compOps)
+}
 
 export default {
   Animation,
-  // Components,
-  Components: {
-    BackgroundPosition,
-    BorderRadius,
-    BoxModel,
-    ColorProperties,
-    ClipProperty,
-    FilterEffects,
-    HTMLAttributes,
-    OpacityProperty,
-    TextProperties,
-    TextWrite,
-    TransformMatrix,
-    ScrollProperty,
-    ShadowProperties,
-    SVGCubicMorph,
-    SVGDraw,
-    SVGTransform
-  },
+  Components,
+  // Components: {
+  //   BackgroundPosition,
+  //   BorderRadius,
+  //   BoxModel,
+  //   ColorProperties,
+  //   ClipProperty,
+  //   FilterEffects,
+  //   HTMLAttributes,
+  //   OpacityProperty,
+  //   TextProperties,
+  //   TextWrite,
+  //   TransformMatrix,
+  //   ScrollProperty,
+  //   ShadowProperties,
+  //   SVGCubicMorph,
+  //   SVGDraw,
+  //   SVGTransform
+  // },
 
   // Tween Interface
   TweenExtra,
diff --git a/src/index.js b/src/index.js
index 96d0358..84471ff 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,11 @@
 import {version as Version} from './../package.json'
-import Objects, {Util,Components} from './core/objects.js'
-import Process from './core/process.js'
-import Internals,{Render} from './core/internals.js'
-import Interpolate from './core/interpolate.js'
+import Util from './objects/Util.js'
+import Components from './objects/Components.js'
+import Objects from './objects/Objects.js'
+import Process from './process/Process.js'
+import Internals from './core/Internals.js'
+import Render from './core/Render.js'
+import Interpolate from './objects/Interpolate.js'
 import CubicBezier from 'cubic-bezier-easing'
 import Easing from './easing/easing-bezier.js' // and CubicBezier easing functions
 import Selector from './util/selector.js'
@@ -10,7 +13,11 @@ import Selector from './util/selector.js'
 // TweenConstructor
 import Tween from './tween/tween.js'
 import TweenCollection from './tween/tweenCollection.js'
-import {to,fromTo,allTo,allFromTo} from './core/interface.js'
+// interface
+import to from './interface/to.js'
+import fromTo from './interface/fromTo.js'
+import allTo from './interface/allTo.js'
+import allFromTo from './interface/allFromTo.js'
 
 // import {default as Animation} from './animation/animationDevelopment.js'
 import Animation from './animation/animation.js'
diff --git a/src/interface/allFromTo.js b/src/interface/allFromTo.js
new file mode 100644
index 0000000..ee7a677
--- /dev/null
+++ b/src/interface/allFromTo.js
@@ -0,0 +1,7 @@
+import selector from '../util/selector.js'
+import TweenCollection from '../tween/tweenCollection.js'
+
+export default function allFromTo(elements, startObject, endObject, optionsObj) {
+  optionsObj = optionsObj || {}
+  return new TweenCollection(selector(elements,true), startObject, endObject, optionsObj)
+}
\ No newline at end of file
diff --git a/src/interface/allTo.js b/src/interface/allTo.js
new file mode 100644
index 0000000..1f77f1c
--- /dev/null
+++ b/src/interface/allTo.js
@@ -0,0 +1,9 @@
+import selector from '../util/selector.js'
+import TweenCollection from '../tween/tweenCollection.js'
+
+// multiple elements tween objects
+export default function allTo(elements, endObject, optionsObj) {
+  optionsObj = optionsObj || {}
+  optionsObj.resetStart = endObject
+  return new TweenCollection(selector(elements,true), endObject, endObject, optionsObj)
+}
\ No newline at end of file
diff --git a/src/interface/fromTo.js b/src/interface/fromTo.js
new file mode 100644
index 0000000..01a820c
--- /dev/null
+++ b/src/interface/fromTo.js
@@ -0,0 +1,9 @@
+import selector from '../util/selector.js'
+import TweenConstructor from '../objects/TweenConstructor.js'
+
+const TC = TweenConstructor.Tween
+
+export default function fromTo(element, startObject, endObject, optionsObj) {
+  optionsObj = optionsObj || {}
+  return new TC(selector(element), startObject, endObject, optionsObj)
+}
\ No newline at end of file
diff --git a/src/interface/to.js b/src/interface/to.js
new file mode 100644
index 0000000..e6f9114
--- /dev/null
+++ b/src/interface/to.js
@@ -0,0 +1,10 @@
+import selector from '../util/selector.js'
+import TweenConstructor from '../objects/TweenConstructor.js'
+
+const TC = TweenConstructor.Tween
+
+export default function to(element, endObject, optionsObj) {
+  optionsObj = optionsObj || {}
+  optionsObj.resetStart = endObject
+  return new TC(selector(element), endObject, endObject, optionsObj)
+}
\ No newline at end of file
diff --git a/src/objects/Components.js b/src/objects/Components.js
new file mode 100644
index 0000000..56004c9
--- /dev/null
+++ b/src/objects/Components.js
@@ -0,0 +1 @@
+export default {}
\ No newline at end of file
diff --git a/src/core/interpolate.js b/src/objects/Interpolate.js
similarity index 100%
rename from src/core/interpolate.js
rename to src/objects/Interpolate.js
diff --git a/src/objects/KUTE.js b/src/objects/KUTE.js
new file mode 100644
index 0000000..56004c9
--- /dev/null
+++ b/src/objects/KUTE.js
@@ -0,0 +1 @@
+export default {}
\ No newline at end of file
diff --git a/src/objects/Objects.js b/src/objects/Objects.js
new file mode 100644
index 0000000..57b26b4
--- /dev/null
+++ b/src/objects/Objects.js
@@ -0,0 +1,21 @@
+import supportedProperties from './supportedProperties.js'
+import defaultValues from './defaultValues.js'
+import defaultOptions from './defaultOptions.js'
+import prepareProperty from './prepareProperty.js'
+import prepareStart from './prepareStart.js'
+import crossCheck from './crossCheck.js'
+import onStart from './onStart.js'
+import onComplete from './onComplete.js'
+import linkProperty from './linkProperty.js'
+
+export default {
+  supportedProperties,
+  defaultValues,
+  defaultOptions,
+  prepareProperty,
+  prepareStart,
+  crossCheck,
+  onStart,
+  onComplete,
+  linkProperty
+}
\ No newline at end of file
diff --git a/src/objects/ObjectsBase.js b/src/objects/ObjectsBase.js
new file mode 100644
index 0000000..aa8e032
--- /dev/null
+++ b/src/objects/ObjectsBase.js
@@ -0,0 +1,13 @@
+import defaultOptions from './defaultOptions.js'
+import linkProperty from './linkProperty.js'
+import onStart from './onStart.js'
+import onComplete from './onComplete.js'
+import supportedProperties from './supportedProperties.js'
+
+export default { 
+  defaultOptions,
+  linkProperty,
+  onStart,
+  onComplete,
+  supportedProperties 
+}
\ No newline at end of file
diff --git a/src/objects/TweenConstructor.js b/src/objects/TweenConstructor.js
new file mode 100644
index 0000000..56004c9
--- /dev/null
+++ b/src/objects/TweenConstructor.js
@@ -0,0 +1 @@
+export default {}
\ No newline at end of file
diff --git a/src/objects/Tweens.js b/src/objects/Tweens.js
new file mode 100644
index 0000000..4ad71d6
--- /dev/null
+++ b/src/objects/Tweens.js
@@ -0,0 +1 @@
+export default []
\ No newline at end of file
diff --git a/src/objects/Util.js b/src/objects/Util.js
new file mode 100644
index 0000000..1166ac0
--- /dev/null
+++ b/src/objects/Util.js
@@ -0,0 +1,2 @@
+// util - a general object for utils like rgbToHex, processEasing
+export default {}
\ No newline at end of file
diff --git a/src/objects/crossCheck.js b/src/objects/crossCheck.js
new file mode 100644
index 0000000..90bb579
--- /dev/null
+++ b/src/objects/crossCheck.js
@@ -0,0 +1,5 @@
+// checks for differences between the processed start and end values, 
+// can be set to make sure start unit and end unit are same, 
+// stack transforms, process SVG paths,
+// any type of post processing the component needs
+export default {}
\ No newline at end of file
diff --git a/src/objects/defaultOptions.js b/src/objects/defaultOptions.js
new file mode 100644
index 0000000..0aa0121
--- /dev/null
+++ b/src/objects/defaultOptions.js
@@ -0,0 +1,6 @@
+let defaultOptions = {
+  duration: 700,
+  delay: 0,
+  easing: 'linear'
+}
+export default defaultOptions
\ No newline at end of file
diff --git a/src/objects/defaultValues.js b/src/objects/defaultValues.js
new file mode 100644
index 0000000..56004c9
--- /dev/null
+++ b/src/objects/defaultValues.js
@@ -0,0 +1 @@
+export default {}
\ No newline at end of file
diff --git a/src/objects/globalObject.js b/src/objects/globalObject.js
new file mode 100644
index 0000000..43d4f63
--- /dev/null
+++ b/src/objects/globalObject.js
@@ -0,0 +1,5 @@
+const globalObject = typeof (global) !== 'undefined' ? global 
+                  : typeof(self) !== 'undefined' ? self
+                  : typeof(window) !== 'undefined' ? window : {}
+
+export default globalObject
\ No newline at end of file
diff --git a/src/objects/linkProperty.js b/src/objects/linkProperty.js
new file mode 100644
index 0000000..36927ae
--- /dev/null
+++ b/src/objects/linkProperty.js
@@ -0,0 +1,2 @@
+// link properties to interpolate functions
+export default {}
\ No newline at end of file
diff --git a/src/objects/onComplete.js b/src/objects/onComplete.js
new file mode 100644
index 0000000..504a429
--- /dev/null
+++ b/src/objects/onComplete.js
@@ -0,0 +1,2 @@
+// schedule property specific function on animation complete
+export default {}
\ No newline at end of file
diff --git a/src/objects/onStart.js b/src/objects/onStart.js
new file mode 100644
index 0000000..7b3c18a
--- /dev/null
+++ b/src/objects/onStart.js
@@ -0,0 +1,3 @@
+// schedule property specific function on animation start
+// link property update function to KUTE.js execution context
+export default {}
\ No newline at end of file
diff --git a/src/objects/prepareProperty.js b/src/objects/prepareProperty.js
new file mode 100644
index 0000000..76739f0
--- /dev/null
+++ b/src/objects/prepareProperty.js
@@ -0,0 +1,2 @@
+// used in preparePropertiesObject
+export default {} 
\ No newline at end of file
diff --git a/src/objects/prepareStart.js b/src/objects/prepareStart.js
new file mode 100644
index 0000000..2b168ea
--- /dev/null
+++ b/src/objects/prepareStart.js
@@ -0,0 +1,2 @@
+// check current property value when .to() method is used
+export default {}
\ No newline at end of file
diff --git a/src/objects/supportedProperties.js b/src/objects/supportedProperties.js
new file mode 100644
index 0000000..56004c9
--- /dev/null
+++ b/src/objects/supportedProperties.js
@@ -0,0 +1 @@
+export default {}
\ No newline at end of file
diff --git a/src/process/Process.js b/src/process/Process.js
new file mode 100644
index 0000000..468b563
--- /dev/null
+++ b/src/process/Process.js
@@ -0,0 +1,11 @@
+import getInlineStyle from './getInlineStyle.js'
+import getStyleForProperty from './getStyleForProperty.js'
+import getStartValues from './getStartValues.js'
+import prepareObject from './prepareObject.js'
+
+export default {
+  getInlineStyle,
+  getStyleForProperty,
+  getStartValues,
+  prepareObject
+}
\ No newline at end of file
diff --git a/src/process/getInlineStyle.js b/src/process/getInlineStyle.js
new file mode 100644
index 0000000..e50f4c6
--- /dev/null
+++ b/src/process/getInlineStyle.js
@@ -0,0 +1,34 @@
+// getInlineStyle - get transform style for element from cssText for .to() method
+export default function(el) {
+  if ( !el.style ) return; // if the scroll applies to `window` it returns as it has no styling
+  let css = el.style.cssText.replace(/\s/g,'').split(';'), // the cssText | the resulting transform object
+      transformObject = {},
+      arrayFn = ['translate3d','translate','scale3d','skew'];
+
+  // if we have any inline style in the cssText attribute, usually it has higher priority
+  // for ( let i=0, csl = css.length; i {
+    if ( /transform/i.test(cs)) {
+      let tps = cs.split(':')[1].split(')'); //all transform properties
+      tps.map(tpi => {
+        let tpv = tpi.split('('), tp = tpv[0], tv = tpv[1]; // each transform property
+        if ( !/matrix/.test(tp) ){
+          transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
+        }
+      })
+    }
+  })
+  return transformObject;
+}
\ No newline at end of file
diff --git a/src/process/getStartValues.js b/src/process/getStartValues.js
new file mode 100644
index 0000000..ee73fd6
--- /dev/null
+++ b/src/process/getStartValues.js
@@ -0,0 +1,33 @@
+import getInlineStyle from './getInlineStyle.js'
+import prepareObject from './prepareObject.js'
+import defaultValues from '../objects/defaultValues.js'
+import prepareStart from '../objects/prepareStart.js'
+import supportedProperties from '../objects/supportedProperties.js'
+
+// getStartValues - returns the startValue for to() method
+export default function () { 
+  const startValues = {}, 
+        currentStyle = getInlineStyle(this.element);
+
+  for (const tweenProp in this.valuesStart) {
+    for ( const component in prepareStart) {
+      let componentStart = prepareStart[component]
+      for ( const tweenCategory in componentStart) {
+        if ( tweenCategory === tweenProp && componentStart[tweenProp] ) { // clip, opacity, scroll
+          startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp])
+        } else if ( supportedProperties[component] && supportedProperties[component].includes(tweenProp) ) { // find in an array of properties
+          startValues[tweenProp] = componentStart[tweenCategory].call(this,tweenProp,this.valuesStart[tweenProp]) 
+        }
+      }
+    }
+  }
+
+  // stack transformCSS props for .to() chains
+  for ( const current in currentStyle ){ // also add to startValues values from previous tweens
+    if ( !( current in this.valuesStart ) ) {
+      startValues[current] = currentStyle[current] || defaultValues[current];
+    }
+  }
+  this.valuesStart = {}
+  prepareObject.call(this,startValues,'start');
+}
\ No newline at end of file
diff --git a/src/process/getStyleForProperty.js b/src/process/getStyleForProperty.js
new file mode 100644
index 0000000..5667bc1
--- /dev/null
+++ b/src/process/getStyleForProperty.js
@@ -0,0 +1,13 @@
+import defaultValues from '../objects/defaultValues.js'
+
+// getStyleForProperty - get computed style property for element for .to() method 
+export default function(elem, propertyName) {
+  let styleAttribute = elem.style,
+      computedStyle = getComputedStyle(elem) || elem.currentStyle,
+      styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName]) 
+                  ? styleAttribute[propertyName] 
+                  : computedStyle[propertyName];
+  if ( propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute) ) {
+    return styleValue ? styleValue : defaultValues[propertyName];
+  }
+}
\ No newline at end of file
diff --git a/src/process/prepareObject.js b/src/process/prepareObject.js
new file mode 100644
index 0000000..a70a1d3
--- /dev/null
+++ b/src/process/prepareObject.js
@@ -0,0 +1,31 @@
+import prepareProperty from '../objects/prepareProperty.js'
+import supportedProperties from '../objects/supportedProperties.js'
+import defaultValues from '../objects/defaultValues.js'
+
+// prepareObject - returns all processed valuesStart / valuesEnd
+export default function (obj, fn) { // this, props object, type: start/end
+  const propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd
+        
+  for ( const component in prepareProperty ) {
+    let prepareComponent = prepareProperty[component],
+        supportComponent = supportedProperties[component]
+
+    for ( const tweenCategory in prepareComponent ) {
+      let transformObject = {}
+      for (const tweenProp in obj) {
+
+        if ( defaultValues[tweenProp] && prepareComponent[tweenProp] ) { // scroll, opacity, other components
+          propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]); 
+        } else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) { // transform
+          transformObject[tweenProp] = obj[tweenProp]
+        } else if ( !defaultValues[tweenCategory] && supportComponent && supportComponent.includes(tweenProp) ) { // colors, boxModel, category
+          propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]);
+        }
+      }
+      // we filter out older browsers by checking Object.keys
+      if (Object.keys && Object.keys(transformObject).length){
+        propertiesObject[tweenCategory] = prepareComponent[tweenCategory].call(this,tweenCategory,transformObject);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/tween/tween.js b/src/tween/tween.js
index 84da2d5..da87f4a 100644
--- a/src/tween/tween.js
+++ b/src/tween/tween.js
@@ -1,10 +1,15 @@
 
-import KUTE, {TweenConstructor} from '../core/globals.js'
-// import {TweenConstructor} from '../core/globals.js'
+import KUTE from '../objects/KUTE.js'
+import TweenConstructor from '../objects/TweenConstructor.js'
+
 import TweenBase from './tweenBase.js'
-import {add,remove,Tick,Ticker} from '../core/internals.js'
-import {crossCheck,defaultOptions} from '../core/objects.js'
-import {prepareObject,getStartValues} from '../core/process.js'
+import add from '../core/add.js'
+import remove from '../core/remove.js'
+import defaultOptions from '../objects/defaultOptions.js'
+import crossCheck from '../objects/crossCheck.js'
+import prepareObject from '../process/prepareObject.js'
+import getStartValues from '../process/getStartValues.js'
+import {Tick,Ticker} from '../core/Render.js'
 
 defaultOptions.repeat = 0
 defaultOptions.repeatDelay = 0
diff --git a/src/tween/tweenBase.js b/src/tween/tweenBase.js
index 1aa9135..256ef06 100644
--- a/src/tween/tweenBase.js
+++ b/src/tween/tweenBase.js
@@ -1,7 +1,15 @@
-import KUTE, {TweenConstructor} from '../core/globals.js'
-import {onStart,onComplete,defaultOptions,Util} from '../core/objects.js'
-// import {Util} from '../core/objects.js'
-import {Tick,Ticker,linkInterpolation,add,stop,remove} from '../core/internals.js'
+import KUTE from '../objects/KUTE.js'
+import TweenConstructor from '../objects/TweenConstructor.js'
+import onStart from '../objects/onStart.js'
+import onComplete from '../objects/onComplete.js'
+import defaultOptions from '../objects/defaultOptions.js'
+import Util from '../objects/Util.js'
+
+import {Tick,Ticker,stop} from '../core/Render.js'
+
+import add from '../core/add.js'
+import remove from '../core/remove.js'
+import linkInterpolation from '../core/linkInterpolation.js'
 
 // single Tween object construct
 // TweenBase is meant to be use for pre-processed values
diff --git a/src/tween/tweenCollection.js b/src/tween/tweenCollection.js
index 3ee63d8..c5c1f48 100644
--- a/src/tween/tweenCollection.js
+++ b/src/tween/tweenCollection.js
@@ -1,5 +1,6 @@
-import KUTE, {TweenConstructor} from '../core/globals.js'
-import {defaultOptions} from '../core/objects.js'
+import KUTE from '../objects/KUTE.js'
+import TweenConstructor from '../objects/TweenConstructor.js'
+import defaultOptions from '../objects/defaultOptions.js'
 
 // KUTE.js Tween Collection
 // ========================
diff --git a/src/tween/tweenExtra.js b/src/tween/tweenExtra.js
index 1072873..fda2351 100644
--- a/src/tween/tweenExtra.js
+++ b/src/tween/tweenExtra.js
@@ -1,4 +1,4 @@
-import {TweenConstructor} from '../core/globals.js'
+import TweenConstructor from '../objects/TweenConstructor.js'
 import Tween from './tween.js'
 
 // to do
diff --git a/src/util/degToRad.js b/src/util/degToRad.js
new file mode 100644
index 0000000..6fc8690
--- /dev/null
+++ b/src/util/degToRad.js
@@ -0,0 +1 @@
+export default (a) => { a*Math.PI/180 }
\ No newline at end of file
diff --git a/src/util/fromJSON.js b/src/util/fromJSON.js
new file mode 100644
index 0000000..5299f0a
--- /dev/null
+++ b/src/util/fromJSON.js
@@ -0,0 +1,8 @@
+//  toJSON - returns {valuesStart,valuesEnd} object from JSON STRING
+export default (str) => {
+  let obj = JSON.parse(str)
+  return {
+    valuesStart: obj.valuesStart,
+    valuesEnd: obj.valuesEnd
+  }
+}
\ No newline at end of file
diff --git a/src/util/getPrefix.js b/src/util/getPrefix.js
new file mode 100644
index 0000000..c7d80d6
--- /dev/null
+++ b/src/util/getPrefix.js
@@ -0,0 +1,10 @@
+// getPrefix - returns browser prefix
+export default function() {
+  let thePrefix, prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'];
+  for (let i = 0, pfl = prefixes.length; i < pfl; i++) { 
+    if (`${prefixes[i]}Transform` in document.body.style) { 
+      thePrefix = prefixes[i]; break; // !! BREAK
+    }  
+  }
+  return thePrefix;
+}
\ No newline at end of file
diff --git a/src/util/hexToRGB.js b/src/util/hexToRGB.js
new file mode 100644
index 0000000..e4f5a06
--- /dev/null
+++ b/src/util/hexToRGB.js
@@ -0,0 +1,11 @@
+// hexToRGB - returns RGB color object {r,g,b}
+export default (hex) => {
+  const hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  hex = hex.replace(hexShorthand, (m, r, g, b) => r + r + g + g + b + b);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
\ No newline at end of file
diff --git a/src/util/polyfill.js b/src/util/polyfill.js
index 8839b9d..dbe0597 100644
--- a/src/util/polyfill.js
+++ b/src/util/polyfill.js
@@ -1,4 +1,3 @@
-import 'minifill/src/Multi.addEventListener.js'
-import 'minifill/src/Date.now.js'
-import 'minifill/src/window.performance.now.js'
-import 'minifill/src/window.requestAnimationFrame.js'
\ No newline at end of file
+import 'minifill/src/Array.from.js'
+import 'minifill/src/Array.prototype.includes.js'
+import 'minifill/src/String.prototype.includes.js'
\ No newline at end of file
diff --git a/src/util/progress.js b/src/util/progressBar.js
similarity index 93%
rename from src/util/progress.js
rename to src/util/progressBar.js
index 704b65a..74ce861 100644
--- a/src/util/progress.js
+++ b/src/util/progressBar.js
@@ -1,5 +1,6 @@
+import KUTE from '../objects/KUTE.js'
+import TweenConstructor from '../objects/TweenConstructor.js'
 import selector from './selector.js'
-import KUTE,{TweenConstructor} from '../core/globals.js'
 
 export default class ProgressBar {
   constructor(element, tween){
diff --git a/src/util/radToDeg.js b/src/util/radToDeg.js
new file mode 100644
index 0000000..520b9e1
--- /dev/null
+++ b/src/util/radToDeg.js
@@ -0,0 +1,3 @@
+export default (a) => {
+  return a * 180 / Math.PI;
+}
\ No newline at end of file
diff --git a/src/util/rgbToHex.js b/src/util/rgbToHex.js
new file mode 100644
index 0000000..bda6dec
--- /dev/null
+++ b/src/util/rgbToHex.js
@@ -0,0 +1,4 @@
+// rgbToHex - transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
+export default (r, g, b) => {
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+}
\ No newline at end of file
diff --git a/src/util/toJSON.js b/src/util/toJSON.js
new file mode 100644
index 0000000..8ee5363
--- /dev/null
+++ b/src/util/toJSON.js
@@ -0,0 +1,8 @@
+//  toJSON - returns {valuesStart,valuesEnd} from target Tween in JSON string format
+export default (tween) => {
+  let obj = {
+    valuesStart: tween.valuesStart,
+    valuesEnd: tween.valuesEnd
+  }
+  return JSON.stringify(obj)
+}
\ No newline at end of file
diff --git a/src/util/trueColor.js b/src/util/trueColor.js
new file mode 100644
index 0000000..bdec42a
--- /dev/null
+++ b/src/util/trueColor.js
@@ -0,0 +1,23 @@
+import hexToRGB from './hexToRGB.js'
+
+// trueColor - replace transparent and transform any color to rgba()/rgb()
+export default function (colorString) {
+  if (/rgb|rgba/.test(colorString)) { // first check if it's a rgb string
+    const vrgb = colorString.replace(/\s|\)/,'').split('(')[1].split(',');
+
+    const colorAlpha = vrgb[3] ? vrgb[3] : null;
+    if (!colorAlpha) {
+      return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
+    } else {
+      return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(colorAlpha) };
+    }
+  } else if (/^#/.test(colorString)) {
+    const fromHex = hexToRGB(colorString); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
+  } else if (/transparent|none|initial|inherit/.test(colorString)) {
+    return { r: 0, g: 0, b: 0, a: 0 };
+  } else if (!/^#|^rgb/.test(colorString) ) { // maybe we can check for web safe colors
+    const siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString;
+    let webColor = getComputedStyle(siteHead,null).color; webColor = /rgb/.test(webColor) ? webColor.replace(/[^\d,]/g, '').split(',') : [0,0,0];
+    siteHead.style.color = ''; return { r: parseInt(webColor[0]), g: parseInt(webColor[1]), b: parseInt(webColor[2]) };
+  }
+}
\ No newline at end of file
diff --git a/src/util/trueDimension.js b/src/util/trueDimension.js
new file mode 100644
index 0000000..44b8fd0
--- /dev/null
+++ b/src/util/trueDimension.js
@@ -0,0 +1,14 @@
+// trueDimension - returns { v = value, u = unit }
+export default function (dimValue, isAngle) {
+  const intValue = parseInt(dimValue) || 0;
+
+  const mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
+  let theUnit;
+  for (let mIndex=0; mIndex a*180/Math.PI
-export const degToRad = a => a*Math.PI/180
-
-// true dimension returns { v = value, u = unit }
-export function trueDimension(dimValue, isAngle) {
-  const intValue = parseInt(dimValue) || 0;
-
-  const mUnits = ['px','%','deg','rad','em','rem','vh','vw'];
-  let theUnit;
-  for (let mIndex=0; mIndex r + r + g + g + b + b);
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null;
-}
-
-// the little gems for light builds
-export function toJSON(tween){
-  let obj = {
-    valuesStart: tween.valuesStart,
-    valuesEnd: tween.valuesEnd
-  }
-  return JSON.stringify(obj)
-}
-export function fromJSON(str){
-  let obj = JSON.parse(str)
-  return {
-    valuesStart: obj.valuesStart,
-    valuesEnd: obj.valuesEnd
-  }
-}
\ No newline at end of file

From 7e098ab567e19160ed056be5f825ab3d1d7bb3a8 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 10 Jun 2020 13:40:18 +0000
Subject: [PATCH 369/471]

---
 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 f3d07894471208db91138721d5535eae4cf3dc93 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 10 Jun 2020 13:40:52 +0000
Subject: [PATCH 370/471]

---
 demo/src/kute-base.js        |  3 +--
 demo/src/kute-base.min.js    |  2 +-
 demo/src/kute-extra.js       | 10 ++++------
 demo/src/kute-extra.min.js   |  2 +-
 demo/src/kute.min.js         |  2 +-
 dist/kute.esm.js             | 10 ++++------
 dist/kute.esm.min.js         |  2 +-
 dist/kute.js                 | 10 ++++------
 dist/kute.min.js             |  2 +-
 src/interface/fromTo.js      |  4 +---
 src/interface/to.js          |  3 +--
 src/tween/tweenCollection.js |  5 +++--
 12 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js
index 966b258..9676670 100644
--- a/demo/src/kute-base.js
+++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js
index 98ca310..9a8ad31 100644
--- a/demo/src/kute-base.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index e9051a5..af59aa3 100644
--- a/demo/src/kute.min.js
+++ b/demo/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"}}));
diff --git a/dist/kute.esm.js b/dist/kute.esm.js
index a8e6af6..7ae33ed 100644
--- a/dist/kute.esm.js
+++ b/dist/kute.esm.js
@@ -620,11 +620,11 @@ var Tween = (function (TweenBase) {
 }(TweenBase));
 TweenConstructor.Tween = Tween;
 
+var TC = TweenConstructor.Tween;
 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 = [];
@@ -661,7 +661,7 @@ 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){
+  } else if (args instanceof TC){
     lastTween.chain(args);
   } else {
     throw new TypeError('KUTE.js - invalid chain value')
@@ -682,17 +682,15 @@ TweenCollection.prototype.getMaxDuration = function getMaxDuration (){
   return Math.max(durations)
 };
 
-var TC = TweenConstructor.Tween;
 function to(element, endObject, optionsObj) {
   optionsObj = optionsObj || {};
   optionsObj.resetStart = endObject;
-  return new TC(selector(element), endObject, endObject, optionsObj)
+  return new TweenConstructor.Tween(selector(element), endObject, endObject, optionsObj)
 }
 
-var TC$1 = TweenConstructor.Tween;
 function fromTo(element, startObject, endObject, optionsObj) {
   optionsObj = optionsObj || {};
-  return new TC$1(selector(element), startObject, endObject, optionsObj)
+  return new TweenConstructor.Tween(selector(element), startObject, endObject, optionsObj)
 }
 
 function allTo(elements, endObject, optionsObj) {
diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js
index c0efc1b..16165cd 100644
--- a/dist/kute.esm.min.js
+++ b/dist/kute.esm.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Standard v2.0.1 | thednp © 2020 | MIT-License
-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 v(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 d(){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={},v.call(this,t,"start")}var g={getInlineStyle:h,getStyleForProperty:f,getStartValues:d,prepareObject:v},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(v.call(this,a,"end"),this._resetStart?this.valuesStart=n:v.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,d.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(""),vt=ct.concat(pt,ft),dt=vt.concat(ht),gt={alpha:ct,upper:pt,symbols:ht,numeric:ft,alphanumeric:vt,all:dt};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 v=r[f];h[f]=""+c+v in e?parseInt(e[""+c+v]):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 de(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}}ve(t)}else ve(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:ve,scanSegment:de,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)}var Xe={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"};export default Xe;
+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)}var Ve={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"};export default Ve;
diff --git a/dist/kute.js b/dist/kute.js
index 93ef0dd..5d5f905 100644
--- a/dist/kute.js
+++ b/dist/kute.js
@@ -626,11 +626,11 @@
   }(TweenBase));
   TweenConstructor.Tween = Tween;
 
+  var TC = TweenConstructor.Tween;
   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 = [];
@@ -667,7 +667,7 @@
     var lastTween = this.tweens[this.length-1];
     if (args instanceof TweenCollection){
       lastTween.chain(args.tweens);
-    } else if (args instanceof TweenConstructor){
+    } else if (args instanceof TC){
       lastTween.chain(args);
     } else {
       throw new TypeError('KUTE.js - invalid chain value')
@@ -688,17 +688,15 @@
     return Math.max(durations)
   };
 
-  var TC = TweenConstructor.Tween;
   function to(element, endObject, optionsObj) {
     optionsObj = optionsObj || {};
     optionsObj.resetStart = endObject;
-    return new TC(selector(element), endObject, endObject, optionsObj)
+    return new TweenConstructor.Tween(selector(element), endObject, endObject, optionsObj)
   }
 
-  var TC$1 = TweenConstructor.Tween;
   function fromTo(element, startObject, endObject, optionsObj) {
     optionsObj = optionsObj || {};
-    return new TC$1(selector(element), startObject, endObject, optionsObj)
+    return new TweenConstructor.Tween(selector(element), startObject, endObject, optionsObj)
   }
 
   function allTo(elements, endObject, optionsObj) {
diff --git a/dist/kute.min.js b/dist/kute.min.js
index e9051a5..af59aa3 100644
--- a/dist/kute.min.js
+++ b/dist/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"}}));
diff --git a/src/interface/fromTo.js b/src/interface/fromTo.js
index 01a820c..1a4549c 100644
--- a/src/interface/fromTo.js
+++ b/src/interface/fromTo.js
@@ -1,9 +1,7 @@
 import selector from '../util/selector.js'
 import TweenConstructor from '../objects/TweenConstructor.js'
 
-const TC = TweenConstructor.Tween
-
 export default 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)
 }
\ No newline at end of file
diff --git a/src/interface/to.js b/src/interface/to.js
index e6f9114..df44a97 100644
--- a/src/interface/to.js
+++ b/src/interface/to.js
@@ -1,10 +1,9 @@
 import selector from '../util/selector.js'
 import TweenConstructor from '../objects/TweenConstructor.js'
 
-const TC = TweenConstructor.Tween
 
 export default function to(element, endObject, optionsObj) {
   optionsObj = optionsObj || {}
   optionsObj.resetStart = endObject
-  return new TC(selector(element), endObject, endObject, optionsObj)
+  return new TweenConstructor.Tween(selector(element), endObject, endObject, optionsObj)
 }
\ No newline at end of file
diff --git a/src/tween/tweenCollection.js b/src/tween/tweenCollection.js
index c5c1f48..f33cd90 100644
--- a/src/tween/tweenCollection.js
+++ b/src/tween/tweenCollection.js
@@ -2,6 +2,8 @@ import KUTE from '../objects/KUTE.js'
 import TweenConstructor from '../objects/TweenConstructor.js'
 import defaultOptions from '../objects/defaultOptions.js'
 
+let TC = TweenConstructor.Tween
+
 // KUTE.js Tween Collection
 // ========================
 
@@ -13,7 +15,6 @@ export default class TweenCollection {
     !('offset' in defaultOptions) && (defaultOptions.offset = 0);
 
     // call in the tween constructor
-    const TC = TweenConstructor.Tween
 
     Ops = Ops || {}
     Ops.delay = Ops.delay || defaultOptions.delay;
@@ -55,7 +56,7 @@ export default class TweenCollection {
     let lastTween = this.tweens[this.length-1]
     if (args instanceof TweenCollection){
       lastTween.chain(args.tweens); 
-    } else if (args instanceof TweenConstructor){
+    } else if (args instanceof TC){
       lastTween.chain(args); 
     } else {
       throw new TypeError('KUTE.js - invalid chain value')

From 645089f77aece280b01ce8804bb206424889f3b1 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 10 Jun 2020 14:33:11 +0000
Subject: [PATCH 371/471]

---
 demo/src/kute-base.js        |  8 +++++---
 demo/src/kute-base.min.js    |  4 ++--
 demo/src/kute-extra.js       | 10 +++++-----
 demo/src/kute-extra.min.js   |  4 ++--
 demo/src/kute.min.js         |  4 ++--
 dist/kute.esm.js             | 10 +++++-----
 dist/kute.esm.min.js         |  4 ++--
 dist/kute.js                 | 10 +++++-----
 dist/kute.min.js             |  4 ++--
 package.json                 |  2 +-
 src/components/textWrite.js  |  4 +---
 src/interface/TC.js          |  3 +++
 src/interface/fromTo.js      |  4 ++--
 src/interface/to.js          |  5 ++---
 src/tween/tweenCollection.js |  6 +-----
 15 files changed, 40 insertions(+), 42 deletions(-)
 create mode 100644 src/interface/TC.js

diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js
index 9676670..e1f4c3f 100644
--- a/demo/src/kute-base.js
+++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js
index 9a8ad31..d3d3011 100644
--- a/demo/src/kute-base.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index af59aa3..455140b 100644
--- a/demo/src/kute.min.js
+++ b/demo/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"}}));
diff --git a/dist/kute.esm.js b/dist/kute.esm.js
index 7ae33ed..1502f7e 100644
--- a/dist/kute.esm.js
+++ b/dist/kute.esm.js
@@ -1,9 +1,9 @@
 /*!
-* KUTE.js Standard v2.0.1 (http://thednp.github.io/kute.js)
+* KUTE.js Standard 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)
 */
-var version = "2.0.1";
+var version = "2.0.2";
 
 var Util = {};
 
@@ -621,6 +621,7 @@ var Tween = (function (TweenBase) {
 TweenConstructor.Tween = Tween;
 
 var TC = TweenConstructor.Tween;
+
 var TweenCollection = function TweenCollection(els,vS,vE,Ops){
   var this$1 = this;
   this.tweens = [];
@@ -685,12 +686,12 @@ TweenCollection.prototype.getMaxDuration = function getMaxDuration (){
 function to(element, endObject, optionsObj) {
   optionsObj = optionsObj || {};
   optionsObj.resetStart = endObject;
-  return new TweenConstructor.Tween(selector(element), endObject, endObject, optionsObj)
+  return new TC(selector(element), endObject, endObject, optionsObj)
 }
 
 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 allTo(elements, endObject, optionsObj) {
@@ -1081,7 +1082,6 @@ function setSegments(target,newText){
 }
 function createTextTweens(target,newText,options){
   if (target.playing) { return; }
-  var TC = TweenConstructor.Tween;
   options = options || {};
   options.duration = options.duration === 'auto' ? 'auto' : isFinite(options.duration*1) ? options.duration*1 : 1000;
   var segs = setSegments(target,newText);
diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js
index 16165cd..06a4e64 100644
--- a/dist/kute.esm.min.js
+++ b/dist/kute.esm.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.1 | thednp © 2020 | MIT-License
-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)}var Ve={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"};export default Ve;
+// KUTE.js Standard v2.0.2 | thednp © 2020 | MIT-License
+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={},S="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function T(t,e,r){return(t=+t)+(e-=t)*r}var x={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 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*T(r,n,i)>>0)/10:T(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:T},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?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]&&!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: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))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*T(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*T(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:T,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*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 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=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=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 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 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 _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?St(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(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?_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:St,rotate:Tt,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=T(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:T},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*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"}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:T,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),Te(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:Se,rotateRing:Te,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:T},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)}var Ve={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"};export default Ve;
diff --git a/dist/kute.js b/dist/kute.js
index 5d5f905..40697ab 100644
--- a/dist/kute.js
+++ b/dist/kute.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Standard v2.0.1 (http://thednp.github.io/kute.js)
+* KUTE.js Standard 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 Util = {};
 
@@ -627,6 +627,7 @@
   TweenConstructor.Tween = Tween;
 
   var TC = TweenConstructor.Tween;
+
   var TweenCollection = function TweenCollection(els,vS,vE,Ops){
     var this$1 = this;
     this.tweens = [];
@@ -691,12 +692,12 @@
   function to(element, endObject, optionsObj) {
     optionsObj = optionsObj || {};
     optionsObj.resetStart = endObject;
-    return new TweenConstructor.Tween(selector(element), endObject, endObject, optionsObj)
+    return new TC(selector(element), endObject, endObject, optionsObj)
   }
 
   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 allTo(elements, endObject, optionsObj) {
@@ -1087,7 +1088,6 @@
   }
   function createTextTweens(target,newText,options){
     if (target.playing) { return; }
-    var TC = TweenConstructor.Tween;
     options = options || {};
     options.duration = options.duration === 'auto' ? 'auto' : isFinite(options.duration*1) ? options.duration*1 : 1000;
     var segs = setSegments(target,newText);
diff --git a/dist/kute.min.js b/dist/kute.min.js
index af59aa3..455140b 100644
--- a/dist/kute.min.js
+++ b/dist/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"}}));
diff --git a/package.json b/package.json
index bc908a4..3e63c43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "JavaScript animation engine of the future is called KUTE.js.",
   "main": "dist/kute.min.js",
   "module": "dist/kute.esm.js",
diff --git a/src/components/textWrite.js b/src/components/textWrite.js
index a107a6a..7e1b46f 100644
--- a/src/components/textWrite.js
+++ b/src/components/textWrite.js
@@ -1,5 +1,5 @@
 import KUTE from '../objects/KUTE.js'
-import TweenConstructor from '../objects/TweenConstructor.js'
+import TC from '../interface/TC.js'
 import {numbers} from '../objects/Interpolate.js' 
 import defaultOptions from '../objects/defaultOptions.js'
 import Components from '../objects/Components.js'
@@ -82,8 +82,6 @@ function setSegments(target,newText){
 export function createTextTweens(target,newText,options){
   if (target.playing) return;
 
-  const TC = TweenConstructor.Tween
-
   options = options || {}
   options.duration = options.duration === 'auto' ? 'auto' : isFinite(options.duration*1) ? options.duration*1 : 1000;
 
diff --git a/src/interface/TC.js b/src/interface/TC.js
new file mode 100644
index 0000000..1b46fc8
--- /dev/null
+++ b/src/interface/TC.js
@@ -0,0 +1,3 @@
+import TweenConstructor from '../objects/TweenConstructor.js'
+
+export default TweenConstructor.Tween
\ No newline at end of file
diff --git a/src/interface/fromTo.js b/src/interface/fromTo.js
index 1a4549c..4d4d197 100644
--- a/src/interface/fromTo.js
+++ b/src/interface/fromTo.js
@@ -1,7 +1,7 @@
 import selector from '../util/selector.js'
-import TweenConstructor from '../objects/TweenConstructor.js'
+import TC from './TC.js'
 
 export default 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)
 }
\ No newline at end of file
diff --git a/src/interface/to.js b/src/interface/to.js
index df44a97..f7d5231 100644
--- a/src/interface/to.js
+++ b/src/interface/to.js
@@ -1,9 +1,8 @@
 import selector from '../util/selector.js'
-import TweenConstructor from '../objects/TweenConstructor.js'
-
+import TC from './TC.js'
 
 export default function to(element, endObject, optionsObj) {
   optionsObj = optionsObj || {}
   optionsObj.resetStart = endObject
-  return new TweenConstructor.Tween(selector(element), endObject, endObject, optionsObj)
+  return new TC(selector(element), endObject, endObject, optionsObj)
 }
\ No newline at end of file
diff --git a/src/tween/tweenCollection.js b/src/tween/tweenCollection.js
index f33cd90..8876ebd 100644
--- a/src/tween/tweenCollection.js
+++ b/src/tween/tweenCollection.js
@@ -1,8 +1,6 @@
 import KUTE from '../objects/KUTE.js'
-import TweenConstructor from '../objects/TweenConstructor.js'
 import defaultOptions from '../objects/defaultOptions.js'
-
-let TC = TweenConstructor.Tween
+import TC from '../interface/TC.js'
 
 // KUTE.js Tween Collection
 // ========================
@@ -14,8 +12,6 @@ export default class TweenCollection {
     // set default offset
     !('offset' in defaultOptions) && (defaultOptions.offset = 0);
 
-    // call in the tween constructor
-
     Ops = Ops || {}
     Ops.delay = Ops.delay || defaultOptions.delay;
 

From 94fe92738c0b78442f10998e62fa947baec76537 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Wed, 10 Jun 2020 14:34:18 +0000
Subject: [PATCH 372/471]

---
 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 373/471]

---
 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 7a39544cf0316ccd3160d0b26176c622fe9a147d Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 05:03:44 +0000
Subject: [PATCH 374/471] Changes: * demo updates * README.md updates * code
 cleanup

---
 README.md                    |  14 +-
 demo/clipProperty.html       |   2 +-
 demo/filterEffects.html      |   1 -
 demo/shadowProperties.html   |  97 +++++----
 demo/src/kute-extra.js       |  21 +-
 demo/src/kute-extra.min.js   |   2 +-
 demo/src/kute.min.js         |   2 +-
 demo/svgCubicMorph.html      | 394 +++++++++++++++++------------------
 demo/svgDraw.html            |   2 +-
 demo/svgMorph.html           |   8 +-
 demo/svgTransform.html       |   4 +-
 demo/textProperties.html     |  20 +-
 demo/textWrite.html          |   1 +
 demo/transformFunctions.html |   2 +-
 demo/transformMatrix.html    |   2 +-
 dist/kute.esm.js             |  21 +-
 dist/kute.esm.min.js         |   2 +-
 dist/kute.js                 |  21 +-
 dist/kute.min.js             |   2 +-
 package.json                 |   2 +-
 src/components/svgDraw.js    |  46 ++--
 21 files changed, 323 insertions(+), 343 deletions(-)

diff --git a/README.md b/README.md
index 7142f9a..671f4d8 100644
--- a/README.md
+++ b/README.md
@@ -8,18 +8,24 @@ A modern JavaScript animation engine built on ES6/ES7 standards with most essent
 
 KUTE.js packs a series of components for presentation attributes, SVG transform, draw SVG strokes and path morphing, text string write up or number countdowns, plus additional CSS properties like colors, border-radius or typographic properties.
 
-# Demo / Developer Guide
+# Demo
 For components documentation, examples and other cool tips, check the [demo](http://thednp.github.io/kute.js/).
 
 # Wiki
-For usage, installation and stuff like npm, visit the [wiki](https://github.com/thednp/kute.js/wiki).
+For a complete developer guide, usage and stuff like npm, visit the [wiki](https://github.com/thednp/kute.js/wiki).
 
 # Browser Support
 KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy browsers might some help, so give them a small polyfill set with most essential features required by KUTE.js to work, powered by [minifill](https://github.com/thednp/minifill), try it. For broader projects you might want to consider polyfills. 
 
+# Special Thanks
+* [Mike Bostock](https://bost.ocks.org/mike/) for his awesome [D3.js](https://github.com/d3/d3), one of the sources for our reworked [SVGMorph](http://thednp.github.io/kute.js/svgMorph.html) component.
+* [Noah Veltman](https://github.com/veltman) for his awesome [flubber](https://github.com/veltman/flubber), another one of the sources for the svgMorph component.
+* [Andrew Willems](https://stackoverflow.com/users/5218951/andrew-willems) for his awesome [Stackoverflow answer](https://stackoverflow.com/questions/35560989/javascript-how-to-determine-a-svg-path-draw-direction) resulting in the creation of our [SVGCubicMorph](http://thednp.github.io/kute.js/svgCubicMorph.html) component.
+* [Dmitry Baranovskiy](https://dmitry.baranovskiy.com/) for his awesome [Raphael.js](https://dmitrybaranovskiy.github.io/raphael/), another source for out SVGCubicMorph.
+* [@dalisoft](https://github.com/dalisoft) contributed a great deal to the performance and functionality of previous versions of KUTE.js.
+
 # Contributions
-* Dav aka [@dalisoft](https://github.com/dalisoft) contributed a great deal for the performance and functionality of KUTE.js
-* Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project
+* [Contributors / Collaborators](https://github.com/thednp/kute.js/graphs/contributors)
 
 # License
 [MIT License](https://github.com/thednp/kute.js/blob/master/LICENSE)
diff --git a/demo/clipProperty.html b/demo/clipProperty.html
index 209e92b..38df1cc 100644
--- a/demo/clipProperty.html
+++ b/demo/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/demo/filterEffects.html b/demo/filterEffects.html
index 5e079dc..873baf6 100644
--- a/demo/filterEffects.html
+++ b/demo/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/demo/shadowProperties.html b/demo/shadowProperties.html
index c2e77f5..3a09b6a 100644
--- a/demo/shadowProperties.html
+++ b/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js
index b4df83b..10f90e0 100644
--- a/demo/src/kute-extra.js
+++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js
index 7d6c0cf..8f8e8f3 100644
--- a/demo/src/kute-extra.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index 455140b..89d8808 100644
--- a/demo/src/kute.min.js
+++ b/demo/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/demo/svgCubicMorph.html b/demo/svgCubicMorph.html
index 1b2c8e1..0ad0afb 100644
--- a/demo/svgCubicMorph.html
+++ b/demo/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/demo/svgDraw.html b/demo/svgDraw.html
index 69d185b..a0b2848 100644
--- a/demo/svgDraw.html
+++ b/demo/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/demo/svgMorph.html b/demo/svgMorph.html
index c7d0b3c..a07cc81 100644
--- a/demo/svgMorph.html
+++ b/demo/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/demo/svgTransform.html b/demo/svgTransform.html
index e676ae1..e898223 100644
--- a/demo/svgTransform.html
+++ b/demo/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/demo/textProperties.html b/demo/textProperties.html
index 426fc10..c123026 100644
--- a/demo/textProperties.html
+++ b/demo/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/demo/textWrite.html b/demo/textWrite.html
index 7f78d8f..479a115 100644
--- a/demo/textWrite.html
+++ b/demo/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/demo/transformFunctions.html b/demo/transformFunctions.html
index 37b7e7c..038de76 100644
--- a/demo/transformFunctions.html
+++ b/demo/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/demo/transformMatrix.html b/demo/transformMatrix.html
index 0f51f3d..07b864c 100644
--- a/demo/transformMatrix.html
+++ b/demo/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.
    •   
         
       
 
diff --git a/dist/kute.esm.js b/dist/kute.esm.js
index 1502f7e..8df4c78 100644
--- a/dist/kute.esm.js
+++ b/dist/kute.esm.js
@@ -1484,15 +1484,6 @@ var getDraw = function (e, v) {
   }
   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);
 }
@@ -1501,7 +1492,15 @@ function prepareDraw(a,o){
 }
 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 = {
@@ -1513,7 +1512,7 @@ var svgDrawOps = {
   component: 'svgDraw',
   property: 'draw',
   defaultValue: '0% 0%',
-  Interpolate: {numbers: numbers,paintDraw: paintDraw},
+  Interpolate: {numbers: numbers},
   functions: svgDrawFunctions,
   Util: {
     getRectLength: getRectLength,
diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js
index 06a4e64..ffb9b4a 100644
--- a/dist/kute.esm.min.js
+++ b/dist/kute.esm.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Standard v2.0.2 | thednp © 2020 | MIT-License
-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={},S="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function T(t,e,r){return(t=+t)+(e-=t)*r}var x={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 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*T(r,n,i)>>0)/10:T(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:T},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?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]&&!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: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))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*T(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*T(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:T,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*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 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=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=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 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 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 _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?St(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(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?_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:St,rotate:Tt,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=T(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:T},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*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"}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:T,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),Te(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:Se,rotateRing:Te,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:T},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)}var Ve={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"};export default Ve;
+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={},S="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function T(t,e,r){return(t=+t)+(e-=t)*r}var x={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 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*T(r,n,i)>>0)/10:T(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:T},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?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]&&!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: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))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*T(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*T(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:T,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*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 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=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=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 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 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 _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?St(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(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?_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:St,rotate:Tt,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=T(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:T},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*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"})}},Zt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:T},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),Se(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:Se,polygonLength:Te,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:T},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)}var Ne={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"};export default Ne;
diff --git a/dist/kute.js b/dist/kute.js
index 40697ab..3f153ba 100644
--- a/dist/kute.js
+++ b/dist/kute.js
@@ -1490,15 +1490,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);
   }
@@ -1507,7 +1498,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 = {
@@ -1519,7 +1518,7 @@
     component: 'svgDraw',
     property: 'draw',
     defaultValue: '0% 0%',
-    Interpolate: {numbers: numbers,paintDraw: paintDraw},
+    Interpolate: {numbers: numbers},
     functions: svgDrawFunctions,
     Util: {
       getRectLength: getRectLength,
diff --git a/dist/kute.min.js b/dist/kute.min.js
index 455140b..89d8808 100644
--- a/dist/kute.min.js
+++ b/dist/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/package.json b/package.json
index 3e63c43..2f2e295 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "JavaScript animation engine of the future is called KUTE.js.",
   "main": "dist/kute.min.js",
   "module": "dist/kute.esm.js",
diff --git a/src/components/svgDraw.js b/src/components/svgDraw.js
index 1295297..1ac3fd2 100644
--- a/src/components/svgDraw.js
+++ b/src/components/svgDraw.js
@@ -97,42 +97,11 @@ export const getDraw = (e, v) => {
   return { s: start, e: end, l: length };
 }
 
-export const getBaseDraw = (e, v) => {
-  let length = e.getTotalLength(), start, end, d, o;
-
-  if ( v instanceof Object ) {
-    return v;
-  } else if (typeof v === 'string') {
-    v = v.split(/\,|\s/);
-    start = /%/.test(v[0]) ? percent(v[0].trim(),length) : parseFloat(v[0]);
-    end = /%/.test(v[1]) ? percent(v[1].trim(),length) : parseFloat(v[1]);
-  } else if (typeof v === 'undefined') {
-    o = parseFloat(getStyleForProperty(e,'stroke-dashoffset'));
-    d = getStyleForProperty(e,'stroke-dasharray').split(/\,/);
-
-    start = 0-o;
-    end = parseFloat(d[0]) + start || length;
-  }
-  return { s: start, e: end, l: length };
-}
-
 export function resetDraw(elem) {
   elem.style.strokeDashoffset = ``;
   elem.style.strokeDasharray = ``;
 }
 
-// Component Interpolation
-export function paintDraw(elem,a,b,v){
-  let 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`;
-}
-
 // Component Functions
 export function getDrawValue(){
   return getDraw(this.element);
@@ -142,7 +111,16 @@ export function prepareDraw(a,o){
 }
 export function onStartDraw(tweenProp){
   if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
-    KUTE[tweenProp] = (elem,a,b,v) => paintDraw(elem,a,b,v)
+    KUTE[tweenProp] = (elem,a,b,v) => {
+      let 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`;
+    }
   }
 }
 
@@ -157,7 +135,7 @@ const svgDrawFunctions = {
 export const baseSVGDrawOps = {
   component: 'svgDraw',
   property: 'draw',
-  Interpolate: {numbers,paintDraw},
+  Interpolate: {numbers},
   functions: {onStart:onStartDraw}
 }
 
@@ -166,7 +144,7 @@ export const svgDrawOps = {
   component: 'svgDraw',
   property: 'draw',
   defaultValue: '0% 0%',
-  Interpolate: {numbers,paintDraw},
+  Interpolate: {numbers},
   functions: svgDrawFunctions,
   // Export to global for faster execution
   Util: {

From 95947f5af858ac96d3d5bcb0ec38459108a8f7cc Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 05:05:52 +0000
Subject: [PATCH 375/471]

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 671f4d8..e77fe55 100644
--- a/README.md
+++ b/README.md
@@ -19,13 +19,13 @@ KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy b
 
 # Special Thanks
 * [Mike Bostock](https://bost.ocks.org/mike/) for his awesome [D3.js](https://github.com/d3/d3), one of the sources for our reworked [SVGMorph](http://thednp.github.io/kute.js/svgMorph.html) component.
-* [Noah Veltman](https://github.com/veltman) for his awesome [flubber](https://github.com/veltman/flubber), another one of the sources for the svgMorph component.
+* [Noah Veltman](https://github.com/veltman) for his awesome [flubber](https://github.com/veltman/flubber), another one of the sources for the SVGMorph component.
 * [Andrew Willems](https://stackoverflow.com/users/5218951/andrew-willems) for his awesome [Stackoverflow answer](https://stackoverflow.com/questions/35560989/javascript-how-to-determine-a-svg-path-draw-direction) resulting in the creation of our [SVGCubicMorph](http://thednp.github.io/kute.js/svgCubicMorph.html) component.
-* [Dmitry Baranovskiy](https://dmitry.baranovskiy.com/) for his awesome [Raphael.js](https://dmitrybaranovskiy.github.io/raphael/), another source for out SVGCubicMorph.
+* [Dmitry Baranovskiy](https://dmitry.baranovskiy.com/) for his awesome [Raphael.js](https://dmitrybaranovskiy.github.io/raphael/), another source for our SVGCubicMorph component.
 * [@dalisoft](https://github.com/dalisoft) contributed a great deal to the performance and functionality of previous versions of KUTE.js.
 
 # Contributions
-* [Contributors / Collaborators](https://github.com/thednp/kute.js/graphs/contributors)
+* [Contributors & Collaborators](https://github.com/thednp/kute.js/graphs/contributors)
 
 # License
 [MIT License](https://github.com/thednp/kute.js/blob/master/LICENSE)

From 97c795a97252e8c9554d592b0f6ca21849bd8a13 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 15:30:34 +0000
Subject: [PATCH 376/471]

---
 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 e6a776770d4b20f8ce7b5739a5f282c725b12940 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 15:32:05 +0000
Subject: [PATCH 377/471] Changes:

* Removed `scrollProperty` from official build , thanks to `scroll-behavior: smooth`
* Code Cleanup
---
 demo/assets/css/kute.css         |   5 ++
 demo/assets/js/scripts.js        |  11 ----
 demo/assets/js/scrollProperty.js |  10 +++
 demo/scrollProperty.html         |   9 ++-
 demo/src/kute-base.js            | 109 +------------------------------
 demo/src/kute-base.min.js        |   4 +-
 demo/src/kute-extra.js           |   4 +-
 demo/src/kute-extra.min.js       |   4 +-
 demo/src/kute.min.js             |   4 +-
 dist/kute.esm.js                 | 102 +----------------------------
 dist/kute.esm.min.js             |   4 +-
 dist/kute.js                     | 102 +----------------------------
 dist/kute.min.js                 |   4 +-
 src/index-base.js                |   4 +-
 src/index-extra.js               |  17 -----
 src/index.js                     |   1 -
 16 files changed, 41 insertions(+), 353 deletions(-)

diff --git a/demo/assets/css/kute.css b/demo/assets/css/kute.css
index b6693e8..064ecd0 100644
--- a/demo/assets/css/kute.css
+++ b/demo/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/demo/assets/js/scripts.js b/demo/assets/js/scripts.js
index b154cb2..c2d13c3 100644
--- a/demo/assets/js/scripts.js
+++ b/demo/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/demo/assets/js/scrollProperty.js b/demo/assets/js/scrollProperty.js
index 3271250..73869a8 100644
--- a/demo/assets/js/scrollProperty.js
+++ b/demo/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/demo/scrollProperty.html b/demo/scrollProperty.html
index 897fcd1..fced931 100644
--- a/demo/scrollProperty.html
+++ b/demo/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/demo/src/kute-base.js b/demo/src/kute-base.js
index e1f4c3f..0467c71 100644
--- a/demo/src/kute-base.js
+++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js
index d3d3011..7919a8c 100644
--- a/demo/src/kute-base.min.js
+++ b/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js
index 10f90e0..1952b7a 100644
--- a/demo/src/kute-extra.js
+++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js
index 8f8e8f3..0e7eb1f 100644
--- a/demo/src/kute-extra.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index 89d8808..9503ae1 100644
--- a/demo/src/kute.min.js
+++ b/demo/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"}}));
diff --git a/dist/kute.esm.js b/dist/kute.esm.js
index 8df4c78..1301a6b 100644
--- a/dist/kute.esm.js
+++ b/dist/kute.esm.js
@@ -1,9 +1,9 @@
 /*!
-* KUTE.js Standard v2.0.2 (http://thednp.github.io/kute.js)
+* KUTE.js Standard 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)
 */
-var version = "2.0.2";
+var version = "2.0.3";
 
 var Util = {};
 
@@ -1310,104 +1310,6 @@ var transformOps = {
 };
 Components.TransformFunctions = transformOps;
 
-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 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 }
-};
-Components.ScrollProperty = scrollOps;
-
 var percent = function (v, l) { return parseFloat(v) / 100 * l; };
 var getRectLength = function (el) {
   var w = el.getAttribute('width'),
diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js
index ffb9b4a..a72fd5b 100644
--- a/dist/kute.esm.min.js
+++ b/dist/kute.esm.min.js
@@ -1,2 +1,2 @@
-// KUTE.js Standard v2.0.2 | thednp © 2020 | MIT-License
-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={},S="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};function T(t,e,r){return(t=+t)+(e-=t)*r}var x={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 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*T(r,n,i)>>0)/10:T(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:T},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?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]&&!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: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))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*T(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*T(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:T,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*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 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=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=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 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 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 _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?St(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(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?_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:St,rotate:Tt,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=T(e,r,n)>>0})},onComplete:function(t){Ft.call(this)}},Nt={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:T},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*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"})}},Zt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:T},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),Se(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:Se,polygonLength:Te,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:T},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)}var Ne={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"};export default Ne;
+// KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License
+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 S(t,e,r){return(t=+t)+(e-=t)*r}var T={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 F={},U=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};U.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},U.prototype.stop=function(){return this.playing&&(b(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.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)},U.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)},F.Tween=U,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}(U);F.Tween=H;var N=F.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*S(r,n,i)>>0)/10:S(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: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: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?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]&&!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: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))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*S(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*S(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:S,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*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 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=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=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 St(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*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","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?St(r.rotate,n.rotate,"deg",i):"")+(r.skew?Tt(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:St,scale:_t,skew:Tt}};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*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"})}},Ft={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S},functions:jt,Util:{getRectLength:At,getPolyLength:It,getLineLength:kt,getCircleLength:Mt,getEllipseLength:Ot,getTotalLength:Pt,getDraw:Lt,percent:Ct}};function Ut(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=Ft;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"+Ut(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:Ut,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])}}},Se={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:xe,Util:{parseStringOrigin:ye,parseTransformString:be,parseTransformSVG:we}};for(var Te in e.SVGTransformProperty=Se,e){var _e=e[Te];e[Te]=new X(_e)}var Ee={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:T,Process:g,Internals:O,Selector:j,Version:"2.0.3"};export default Ee;
diff --git a/dist/kute.js b/dist/kute.js
index 3f153ba..cd7dd4e 100644
--- a/dist/kute.js
+++ b/dist/kute.js
@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Standard v2.0.2 (http://thednp.github.io/kute.js)
+* KUTE.js Standard 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 Util = {};
 
@@ -1316,104 +1316,6 @@
   };
   Components.TransformFunctions = transformOps;
 
-  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 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 }
-  };
-  Components.ScrollProperty = scrollOps;
-
   var percent = function (v, l) { return parseFloat(v) / 100 * l; };
   var getRectLength = function (el) {
     var w = el.getAttribute('width'),
diff --git a/dist/kute.min.js b/dist/kute.min.js
index 89d8808..9503ae1 100644
--- a/dist/kute.min.js
+++ b/dist/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"}}));
diff --git a/src/index-base.js b/src/index-base.js
index 29ef1c1..9fbb5ee 100644
--- a/src/index-base.js
+++ b/src/index-base.js
@@ -17,13 +17,11 @@ import fromTo from './interface/fromTo.js'
 import {baseTransformOps} from './components/transformFunctions.js'
 import {baseBoxModelOps} from './components/boxModel.js'
 import {baseOpacityOps} from './components/opacityProperty.js'
-import {baseScrollOps} from './components/scrollProperty.js'
-import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
+// import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
 
 const BaseTransform = new Animation(baseTransformOps)
 const BaseBoxModel = new Animation(baseBoxModelOps)
 const BaseOpacity = new Animation(baseOpacityOps)
-const BaseScroll = new Animation(baseScrollOps)
 // const BaseCrossBrowserMove = new Animation(baseCrossBrowserMoveOps)
 // support for kute-base.js ends here
 
diff --git a/src/index-extra.js b/src/index-extra.js
index fa18988..f9da687 100644
--- a/src/index-extra.js
+++ b/src/index-extra.js
@@ -40,23 +40,6 @@ import {textOps} from './components/textProperties.js'
 import {textWriteOps} from './components/textWrite.js'
 import {matrixTransformOps} from './components/transformMatrix.js'
 
-// const BackgroundPosition = new Animation(bgPosOps)
-// const BorderRadius = new Animation(radiusOps)
-// const BoxModel = new Animation(boxModelOps)
-// const ColorProperties = new Animation(colorsOps)
-// const ClipProperty = new Animation(clipOps)
-// const FilterEffects = new Animation(filterOps)
-// const HTMLAttributes = new Animation(attrOps)
-// const OpacityProperty = new Animation(opacityOps)
-// const TextProperties = new Animation(textOps)
-// const TextWrite = new Animation(textWriteOps)
-// const TransformMatrix = new Animation(matrixTransformOps)
-// const ScrollProperty = new Animation(scrollOps)
-// const ShadowProperties = new Animation(shadowOps)
-// const SVGCubicMorph = new Animation(svgCubicMorphOps)
-// const SVGDraw = new Animation(svgDrawOps)
-// const SVGTransform = new Animation(svgTransformOps)
-
 for (let component in Components) {
   let compOps = Components[component]
   Components[component] = new Animation(compOps)
diff --git a/src/index.js b/src/index.js
index 84471ff..045f2b6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,7 +29,6 @@ import {attrOps} from './components/htmlAttributes.js'
 import {opacityOps} from './components/opacityProperty.js'
 import {textWriteOps} from './components/textWrite.js'
 import {transformOps} from './components/transformFunctions.js'
-import {scrollOps} from './components/scrollProperty.js'
 import {svgDrawOps} from './components/svgDraw.js'
 import {svgMorphOps} from './components/svgMorph.js'
 import {svgTransformOps} from './components/svgTransform.js'

From 7c12028d46f0de0e4c75601d68bfe1ab765a2f1d Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 15:41:39 +0000
Subject: [PATCH 378/471]

---
 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 12ad62fd0915e0fd175393ff3ee3df0410ce6501 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Thu, 11 Jun 2020 15:41:55 +0000
Subject: [PATCH 379/471]

---
 demo/assets/css/prism.css | 227 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 225 insertions(+), 2 deletions(-)

diff --git a/demo/assets/css/prism.css b/demo/assets/css/prism.css
index c7ced87..b6092ab 100644
--- a/demo/assets/css/prism.css
+++ b/demo/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 380/471] 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 62d5ae1f83680e1826b330c139fe6fbf0e392d76 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 12 Jun 2020 06:13:10 +0000
Subject: [PATCH 381/471] Changes: * some reorganizing of the index files *
 demo fixes

---
 demo/filterEffects.html    |   4 +-
 demo/scrollProperty.html   |  41 +++-
 demo/src/kute-base.js      | 160 +++++++--------
 demo/src/kute-base.min.js  |   2 +-
 demo/src/kute-extra.js     | 254 ++++++++++++------------
 demo/src/kute-extra.min.js |   2 +-
 demo/src/kute.min.js       |   2 +-
 demo/svgTransform.html     |  36 ++--
 dist/kute.esm.js           | 391 +++++++++++++------------------------
 dist/kute.esm.min.js       |   2 +-
 dist/kute.js               | 391 +++++++++++++------------------------
 dist/kute.min.js           |   2 +-
 src/index-base.js          |   4 +-
 src/index-extra.js         |  24 +--
 src/index.js               |  13 +-
 15 files changed, 545 insertions(+), 783 deletions(-)

diff --git a/demo/filterEffects.html b/demo/filterEffects.html
index 873baf6..23bb722 100644
--- a/demo/filterEffects.html
+++ b/demo/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/demo/scrollProperty.html b/demo/scrollProperty.html
index fced931..2ab83c3 100644
--- a/demo/scrollProperty.html
+++ b/demo/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/demo/src/kute-base.js b/demo/src/kute-base.js
index 0467c71..484b17e 100644
--- a/demo/src/kute-base.js
+++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js
index 7919a8c..8bd9b41 100644
--- a/demo/src/kute-base.min.js
+++ b/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js
index 1952b7a..89ca9c1 100644
--- a/demo/src/kute-extra.js
+++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js
index 0e7eb1f..e76c248 100644
--- a/demo/src/kute-extra.min.js
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index 9503ae1..6bf1f6f 100644
--- a/demo/src/kute.min.js
+++ b/demo/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/demo/svgTransform.html b/demo/svgTransform.html
index e898223..0809c8a 100644
--- a/demo/svgTransform.html
+++ b/demo/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.
    • 
 
         
 
diff --git a/dist/kute.esm.js b/dist/kute.esm.js
index 1301a6b..21d1eb2 100644
--- a/dist/kute.esm.js
+++ b/dist/kute.esm.js
@@ -5,9 +5,85 @@
 */
 var version = "2.0.3";
 
-var Util = {};
+var KUTE = {};
 
-var Components = {};
+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 = {};
 
@@ -25,8 +101,6 @@ var prepareStart = {};
 
 var crossCheck = {};
 
-var onStart = {};
-
 var onComplete = {};
 
 var linkProperty = {};
@@ -43,6 +117,61 @@ var Objects = {
   linkProperty: linkProperty
 };
 
+var Util = {};
+
+var Components = {};
+
+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; }
+
+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
+};
+
 function getInlineStyle(el) {
   if ( !el.style ) { return; }
   var css = el.style.cssText.replace(/\s/g,'').split(';'),
@@ -127,135 +256,6 @@ var Process = {
   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 : {};
-
-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 ) {
-    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;
@@ -2023,131 +2023,6 @@ var svgMorphOps = {
 };
 Components.SVGMorph = svgMorphOps;
 
-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 }
-};
-Components.SVGTransformProperty = svgTransformOps;
-
 for (var component in Components) {
   var compOps = Components[component];
   Components[component] = new Animation(compOps);
diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js
index a72fd5b..86149e3 100644
--- a/dist/kute.esm.min.js
+++ b/dist/kute.esm.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License
-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 S(t,e,r){return(t=+t)+(e-=t)*r}var T={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 F={},U=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};U.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},U.prototype.stop=function(){return this.playing&&(b(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},U.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)},U.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)},F.Tween=U,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}(U);F.Tween=H;var N=F.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*S(r,n,i)>>0)/10:S(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: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: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?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]&&!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: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))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*S(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*S(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:S,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*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 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=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=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 St(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*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","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?St(r.rotate,n.rotate,"deg",i):"")+(r.skew?Tt(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:St,scale:_t,skew:Tt}};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*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"})}},Ft={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:S},functions:jt,Util:{getRectLength:At,getPolyLength:It,getLineLength:kt,getCircleLength:Mt,getEllipseLength:Ot,getTotalLength:Pt,getDraw:Lt,percent:Ct}};function Ut(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}e.SVGDraw=Ft;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"+Ut(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:Ut,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])}}},Se={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:S},functions:xe,Util:{parseStringOrigin:ye,parseTransformString:be,parseTransformSVG:we}};for(var Te in e.SVGTransformProperty=Se,e){var _e=e[Te];e[Te]=new X(_e)}var Ee={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:T,Process:g,Internals:O,Selector:j,Version:"2.0.3"};export default Ee;
+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);C.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 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=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=Ct;var Et=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:Et}};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)}var we={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:E,Selector:j,Version:"2.0.3"};export default we;
diff --git a/dist/kute.js b/dist/kute.js
index cd7dd4e..d9347ab 100644
--- a/dist/kute.js
+++ b/dist/kute.js
@@ -11,9 +11,85 @@
 
   var version = "2.0.3";
 
-  var Util = {};
+  var KUTE = {};
 
-  var Components = {};
+  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 = {};
 
@@ -31,8 +107,6 @@
 
   var crossCheck = {};
 
-  var onStart = {};
-
   var onComplete = {};
 
   var linkProperty = {};
@@ -49,6 +123,61 @@
     linkProperty: linkProperty
   };
 
+  var Util = {};
+
+  var Components = {};
+
+  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; }
+
+  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
+  };
+
   function getInlineStyle(el) {
     if ( !el.style ) { return; }
     var css = el.style.cssText.replace(/\s/g,'').split(';'),
@@ -133,135 +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 : {};
-
-  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 ) {
-      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;
@@ -2029,131 +2029,6 @@
   };
   Components.SVGMorph = svgMorphOps;
 
-  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 }
-  };
-  Components.SVGTransformProperty = svgTransformOps;
-
   for (var component in Components) {
     var compOps = Components[component];
     Components[component] = new Animation(compOps);
diff --git a/dist/kute.min.js b/dist/kute.min.js
index 9503ae1..6bf1f6f 100644
--- a/dist/kute.min.js
+++ b/dist/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/src/index-base.js b/src/index-base.js
index 9fbb5ee..8644627 100644
--- a/src/index-base.js
+++ b/src/index-base.js
@@ -1,11 +1,11 @@
 import {version as Version} from './../package.json'
+import Render from './core/Render.js'
+import Interpolate from './objects/Interpolate.js'
 import Objects from './objects/ObjectsBase.js'
 import Util from './objects/Util.js'
 import Easing from './easing/easing-base.js'
 import Internals from './core/Internals.js'
-import Render from './core/Render.js'
 import Selector from './util/selector.js'
-import Interpolate from './objects/Interpolate.js'
 
 import Animation from './animation/animationBase.js'
 
diff --git a/src/index-extra.js b/src/index-extra.js
index f9da687..906cd75 100644
--- a/src/index-extra.js
+++ b/src/index-extra.js
@@ -1,11 +1,11 @@
 import {version as Version} from './../package.json'
+import Render from './core/Render.js'
+import Interpolate from './objects/Interpolate.js'
 import Objects from './objects/Objects.js'
 import Util from './objects/Util.js'
 import Components from './objects/Components.js'
-import Interpolate from './objects/Interpolate.js'
-import Process from './process/Process.js'
 import Internals from './core/Internals.js'
-import Render from './core/Render.js'
+import Process from './process/Process.js'
 import CubicBezier from 'cubic-bezier-easing'
 import Easing from './easing/easing-bezier.js'
 import Selector from './util/selector.js'
@@ -48,24 +48,6 @@ for (let component in Components) {
 export default {
   Animation,
   Components,
-  // Components: {
-  //   BackgroundPosition,
-  //   BorderRadius,
-  //   BoxModel,
-  //   ColorProperties,
-  //   ClipProperty,
-  //   FilterEffects,
-  //   HTMLAttributes,
-  //   OpacityProperty,
-  //   TextProperties,
-  //   TextWrite,
-  //   TransformMatrix,
-  //   ScrollProperty,
-  //   ShadowProperties,
-  //   SVGCubicMorph,
-  //   SVGDraw,
-  //   SVGTransform
-  // },
 
   // Tween Interface
   TweenExtra,
diff --git a/src/index.js b/src/index.js
index 045f2b6..08b42d2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,13 @@
 import {version as Version} from './../package.json'
-import Util from './objects/Util.js'
-import Components from './objects/Components.js'
-import Objects from './objects/Objects.js'
-import Process from './process/Process.js'
-import Internals from './core/Internals.js'
 import Render from './core/Render.js'
 import Interpolate from './objects/Interpolate.js'
+import Objects from './objects/Objects.js'
+import Util from './objects/Util.js'
+import Components from './objects/Components.js'
+import Internals from './core/Internals.js'
+import Process from './process/Process.js'
 import CubicBezier from 'cubic-bezier-easing'
-import Easing from './easing/easing-bezier.js' // and CubicBezier easing functions
+import Easing from './easing/easing-bezier.js'
 import Selector from './util/selector.js'
 
 // TweenConstructor
@@ -31,7 +31,6 @@ import {textWriteOps} from './components/textWrite.js'
 import {transformOps} from './components/transformFunctions.js'
 import {svgDrawOps} from './components/svgDraw.js'
 import {svgMorphOps} from './components/svgMorph.js'
-import {svgTransformOps} from './components/svgTransform.js'
 
 // init components
 for (let component in Components) {

From dab615ea54673e70d11dae233dae1e649baf43a9 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 12 Jun 2020 08:03:08 +0000
Subject: [PATCH 382/471]

---
 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 fed96627760d390c3923d0f970d23ef9f1086a50 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Fri, 12 Jun 2020 08:04:59 +0000
Subject: [PATCH 383/471] Minor changes

---
 demo/assets/css/kute.css              |  1 +
 demo/scrollProperty.html              | 16 +++++----
 demo/src/kute.min.js                  |  2 +-
 dist/kute.esm.js                      | 27 +++++++--------
 dist/kute.esm.min.js                  |  2 +-
 dist/kute.js                          | 27 +++++++--------
 dist/kute.min.js                      |  2 +-
 src/animation/animation.js            |  4 +--
 src/animation/animationBase.js        |  4 +--
 src/animation/animationDevelopment.js |  2 +-
 src/components/backgroundPosition.js  |  6 ++--
 src/components/borderRadius.js        |  6 ++--
 src/components/boxModel.js            | 33 ++----------------
 src/components/boxModelBase.js        | 30 ++++++++++++++++
 src/components/boxModelEssential.js   | 50 +++++++++++++++++++++++++++
 src/components/clipProperty.js        |  6 ++--
 src/components/colorProperties.js     |  6 ++--
 src/components/filterEffects.js       |  6 ++--
 src/components/htmlAttributes.js      |  6 ++--
 src/components/opacityProperty.js     |  6 ++--
 src/components/scrollProperty.js      |  6 ++--
 src/components/shadowProperties.js    |  6 ++--
 src/components/svgCubicMorph.js       |  6 ++--
 src/components/svgDraw.js             |  6 ++--
 src/components/svgMorph.js            |  4 +--
 src/components/svgTransform.js        |  6 ++--
 src/components/textProperties.js      |  6 ++--
 src/components/textWrite.js           |  8 ++---
 src/components/transformFunctions.js  |  4 +--
 src/components/transformMatrix.js     |  6 ++--
 src/core/Render.js                    |  6 ++--
 src/core/add.js                       |  2 +-
 src/core/getAll.js                    |  2 +-
 src/core/internals.js                 |  2 +-
 src/core/linkInterpolation.js         |  2 +-
 src/core/remove.js                    |  2 +-
 src/core/removeAll.js                 |  2 +-
 src/easing/easing-base.js             |  2 +-
 src/easing/easing-bezier.js           |  2 +-
 src/index-base.js                     | 12 +++----
 src/index-extra.js                    | 14 ++++----
 src/index.js                          | 16 ++++-----
 src/interface/TC.js                   |  2 +-
 src/interface/fromTo.js               |  2 +-
 src/interface/to.js                   |  2 +-
 src/tween/tween.js                    |  6 ++--
 src/tween/tweenBase.js                |  8 ++---
 src/tween/tweenCollection.js          |  4 +--
 src/tween/tweenExtra.js               |  2 +-
 src/util/progressBar.js               |  4 +--
 50 files changed, 223 insertions(+), 171 deletions(-)
 create mode 100644 src/components/boxModelBase.js
 create mode 100644 src/components/boxModelEssential.js

diff --git a/demo/assets/css/kute.css b/demo/assets/css/kute.css
index 064ecd0..4ae05ba 100644
--- a/demo/assets/css/kute.css
+++ b/demo/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/demo/scrollProperty.html b/demo/scrollProperty.html
index 2ab83c3..d17f6d2 100644
--- a/demo/scrollProperty.html
+++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js
index 6bf1f6f..8356fe8 100644
--- a/demo/src/kute.min.js
+++ b/demo/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"}}));
diff --git a/dist/kute.esm.js b/dist/kute.esm.js
index 21d1eb2..763c6bc 100644
--- a/dist/kute.esm.js
+++ b/dist/kute.esm.js
@@ -791,12 +791,6 @@ function trueDimension (dimValue, isAngle) {
   return { v: intValue, u: theUnit };
 }
 
-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) {
@@ -811,22 +805,25 @@ 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 = {
+var essentialBoxProps = ['top','left','width','height'];
+var essentialBoxPropsValues = {top:0,left:0,width:0,height:0};
+var essentialBoxOnStart = {};
+essentialBoxProps.map(function (x){ return essentialBoxOnStart[x] = boxModelOnStart; });
+var essentialBoxModelFunctions = {
   prepareStart: getBoxModel,
   prepareProperty: prepareBoxModel,
-  onStart: boxPropsOnStart
+  onStart: essentialBoxOnStart
 };
-var boxModelOps = {
+var essentialBoxModelOps = {
   component: 'boxModelProps',
   category: 'boxModel',
-  properties: boxModelProperties,
-  defaultValues: boxModelValues,
+  properties: ['top','left','width','height'],
+  defaultValues: essentialBoxPropsValues,
   Interpolate: {numbers: numbers},
-  functions: boxModelFunctions
+  functions: essentialBoxModelFunctions,
+  Util:{trueDimension: trueDimension}
 };
-Components.BoxModelProperties = boxModelOps;
+Components.BoxModelEssentialProperties = essentialBoxModelOps;
 
 function hexToRGB (hex) {
   var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js
index 86149e3..715f14d 100644
--- a/dist/kute.esm.min.js
+++ b/dist/kute.esm.min.js
@@ -1,2 +1,2 @@
 // KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License
-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);C.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 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=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=Ct;var Et=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:Et}};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)}var we={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:E,Selector:j,Version:"2.0.3"};export default we;
+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 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,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||v.duration,this._delay=i.delay||v.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 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},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 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=F,v.repeat=0,v.repeatDelay=0,v.yoyo=!1,v.resetStart=!1;var N=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||v.repeat,this._repeatDelay=o.repeatDelay||v.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||v.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,T(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}(F);U.Tween=N;var H=U.Tween,V=function(t,e,r,n){var i=this;this.tweens=[],!("offset"in v)&&(v.offset=0),(n=n||{}).delay=n.delay||v.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=n||{},a[s].delay=s>0?n.delay+(n.offset||v.offset):n.delay,t instanceof Element?i.tweens.push(new H(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 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 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"})}z.prototype.setComponent=function(t){var e=t.component,r={prepareProperty:d,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},n=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||n)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)v[l]=t.defaultOptions[l];if(t.functions)for(var p in r)if(p in t.functions)if("function"==typeof t.functions[p])!r[p][e]&&(r[p][e]={}),!r[p][e][n||s]&&(r[p][e][n||s]=t.functions[p]);else for(var c in t.functions[p])!r[p][e]&&(r[p][e]={}),!r[p][e][c]&&(r[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:n},functions:{prepareStart:function(t){return A(this.element,t)||f[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:R},Util:{trueDimension:D}};function B(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 K(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+")"}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,r,n,i){t.style[e]=K(r,n,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:n,colors:K},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};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 r={};for(var n in e){var i=tt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=G.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=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,r,n,i){t.setAttribute(e,K(r,n,i))})},r[s]=B(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,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]=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,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]=J)}}},rt={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:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};x.HTMLAttributes=rt;var nt={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})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:n},functions:nt};function at(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 st(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(""),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 vt={text:function(e){if(!t[e]&&this.valuesEnd[e]){var r=this._textChars,n=r in ft?ft[r]:r&&r.length?r:ft[v.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})}},dt={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:vt},Util:{charSet:ft,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=st(t,"text-part"),n=st(at(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 H(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 H(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function gt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function mt(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 yt(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 bt(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 wt(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 xt(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}x.TextWriteProperties=dt;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 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 v=r[f];h[f]=""+p+v in e?parseInt(e[""+p+v]):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?gt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?mt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?bt(r.translate,n.translate,"px",i):"")+(r.rotate3d?yt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?wt(r.rotate,n.rotate,"deg",i):"")+(r.skew?_t(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?xt(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: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(" "),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"})}},Lt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:n},functions:Pt,Util:{getRectLength:Et,getPolyLength:Ct,getLineLength:It,getCircleLength:At,getEllipseLength:Mt,getTotalLength:kt,getDraw:Ot,percent:St}};function jt(t,e,r,n){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,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}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 Bt(t){return t>=48&&t<=57}function Kt(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(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>=zt[r]&&(t.result.push([e].concat(n.splice(0,zt[r]))),zt[r]););}function Gt(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=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(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?$t(t):Zt(t),t.err.length)return;t.data.push(t.param),Yt(t),n=!1,t.index=t.max)break;if(!Kt(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),r=e.max;for(Yt(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Ht(n,i,.5),t.splice(r+1,0,i)}function ce(t,e){var r,n;if("string"==typeof t){var i=re(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ut);if(!he(r=t.slice(0)))throw new TypeError(Ut);return r.length>1&&Vt(r[0],r[r.length-1])&&r.pop(),ue(r)>0&&r.reverse(),!n&&e&&Ft(e)&&e>0&&pe(r,e),r}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,r){var n=ce(t,r=r||v.morphPrecision),i=ce(e,r),a=n.length-i.length;return le(n,a<0?-1*a:0),le(i,a>0?a:0),se(n,i),[n,i]}te.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},te.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 ve={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"+jt(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=fe(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):v.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},de={component:"svgMorph",property:"path",defaultValue:[],Interpolate:jt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ve,Util:{INVALID_INPUT:Ut,isFiniteNumber:Ft,distance:Nt,pointAlong:Ht,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Dt,isSpace:Qt,isCommand:Rt,isArc:Xt,isDigit:Bt,isDigitStart:Kt,State:qt,skipSpaces:Yt,scanFlag:Zt,scanParam:$t,finalizeSegment:Wt,scanSegment:Gt,pathParse:Jt,SvgPath:te,split:ee,pathStringToRing:re,exactRing:ne,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=de,x){var me=x[ge];x[ge]=new z(me)}var ye={Animation:z,Components:x,Tween:N,fromTo:function(t,e,r,n){return n=n||{},new H(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new H(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:L,CubicBezier:P,Render:p,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"};export default ye;
diff --git a/dist/kute.js b/dist/kute.js
index d9347ab..1682504 100644
--- a/dist/kute.js
+++ b/dist/kute.js
@@ -797,12 +797,6 @@
     return { v: intValue, u: theUnit };
   }
 
-  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) {
@@ -817,22 +811,25 @@
     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 = {
+  var essentialBoxProps = ['top','left','width','height'];
+  var essentialBoxPropsValues = {top:0,left:0,width:0,height:0};
+  var essentialBoxOnStart = {};
+  essentialBoxProps.map(function (x){ return essentialBoxOnStart[x] = boxModelOnStart; });
+  var essentialBoxModelFunctions = {
     prepareStart: getBoxModel,
     prepareProperty: prepareBoxModel,
-    onStart: boxPropsOnStart
+    onStart: essentialBoxOnStart
   };
-  var boxModelOps = {
+  var essentialBoxModelOps = {
     component: 'boxModelProps',
     category: 'boxModel',
-    properties: boxModelProperties,
-    defaultValues: boxModelValues,
+    properties: ['top','left','width','height'],
+    defaultValues: essentialBoxPropsValues,
     Interpolate: {numbers: numbers},
-    functions: boxModelFunctions
+    functions: essentialBoxModelFunctions,
+    Util:{trueDimension: trueDimension}
   };
-  Components.BoxModelProperties = boxModelOps;
+  Components.BoxModelEssentialProperties = essentialBoxModelOps;
 
   function hexToRGB (hex) {
     var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
diff --git a/dist/kute.min.js b/dist/kute.min.js
index 6bf1f6f..8356fe8 100644
--- a/dist/kute.min.js
+++ b/dist/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"}}));
diff --git a/src/animation/animation.js b/src/animation/animation.js
index 1030ac2..9c06074 100644
--- a/src/animation/animation.js
+++ b/src/animation/animation.js
@@ -7,8 +7,8 @@ import onStart from '../objects/onStart.js'
 import onComplete from '../objects/onComplete.js'
 import crossCheck from '../objects/crossCheck.js'
 import linkProperty from '../objects/linkProperty.js'
-import Util from '../objects/Util.js'
-import Interpolate from '../objects/Interpolate.js'
+import Util from '../objects/util.js'
+import Interpolate from '../objects/interpolate.js'
 
 // Animation class 
 // * builds KUTE components 
diff --git a/src/animation/animationBase.js b/src/animation/animationBase.js
index e943661..1cbd1c8 100644
--- a/src/animation/animationBase.js
+++ b/src/animation/animationBase.js
@@ -4,8 +4,8 @@ import onStart from '../objects/onStart.js'
 import onComplete from '../objects/onComplete.js'
 import crossCheck from '../objects/crossCheck.js'
 import linkProperty from '../objects/linkProperty.js'
-import Util from '../objects/Util.js'
-import Interpolate from '../objects/Interpolate.js'
+import Util from '../objects/util.js'
+import Interpolate from '../objects/interpolate.js'
 
 // Animation class 
 export default class AnimationBase {
diff --git a/src/animation/animationDevelopment.js b/src/animation/animationDevelopment.js
index 6eb9301..0791114 100644
--- a/src/animation/animationDevelopment.js
+++ b/src/animation/animationDevelopment.js
@@ -3,7 +3,7 @@ import prepareStart from '../objects/prepareStart.js'
 import onStart from '../objects/onStart.js'
 import onComplete from '../objects/onComplete.js'
 import crossCheck from '../objects/crossCheck.js'
-import Interpolate from '../objects/Interpolate.js'
+import Interpolate from '../objects/interpolate.js'
 
 import Animation from './animation.js'
 
diff --git a/src/components/backgroundPosition.js b/src/components/backgroundPosition.js
index 042cdc0..e23e4f5 100644
--- a/src/components/backgroundPosition.js
+++ b/src/components/backgroundPosition.js
@@ -1,8 +1,8 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js'
-import Components from '../objects/Components.js'
+import Components from '../objects/components.js'
 import getStyleForProperty from '../process/getStyleForProperty.js'
-import {numbers} from '../objects/Interpolate.js' 
+import {numbers} from '../objects/interpolate.js' 
 import trueDimension from '../util/trueDimension.js'
 
 // const bgPosProp = { property : 'backgroundPosition', defaultValue: [0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
diff --git a/src/components/borderRadius.js b/src/components/borderRadius.js
index 4440e0e..3a16c9d 100644
--- a/src/components/borderRadius.js
+++ b/src/components/borderRadius.js
@@ -1,9 +1,9 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js'
-import Components from '../objects/Components.js'
+import Components from '../objects/components.js'
 import getStyleForProperty from '../process/getStyleForProperty.js'
 import trueDimension from '../util/trueDimension.js'
-import {units} from '../objects/Interpolate.js' 
+import {units} from '../objects/interpolate.js' 
 
 // const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} }
 
diff --git a/src/components/boxModel.js b/src/components/boxModel.js
index 2b112f3..522635a 100644
--- a/src/components/boxModel.js
+++ b/src/components/boxModel.js
@@ -1,9 +1,9 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js'
-import Components from '../objects/Components.js'
+import Components from '../objects/components.js'
 import getStyleForProperty from '../process/getStyleForProperty.js' 
 import trueDimension from '../util/trueDimension.js' 
-import {numbers} from '../objects/Interpolate.js' 
+import {numbers} from '../objects/interpolate.js' 
 
 // Component Properties
 const boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 
@@ -39,33 +39,6 @@ const boxModelFunctions = {
   onStart: boxPropsOnStart
 }
 
-// Component Base Props
-const baseBoxProps = ['top','left','width','height']
-const baseBoxPropsValues = {top:0,left:0,width:0,height:0}
-const baseBoxOnStart = {}
-baseBoxProps.map(x=>baseBoxOnStart[x] = boxModelOnStart)
-
-// Component Base
-export const baseBoxModelOps = {
-  component: 'boxModelProps',
-  category: 'boxModel',
-  properties: baseBoxProps,
-  // defaultValues: baseBoxPropsValues,
-  Interpolate: {numbers},
-  functions: {onStart: baseBoxOnStart}
-}
-
-// Component Essential
-export const essentialBoxModelOps = {
-  component: 'boxModelProps',
-  category: 'boxModel',
-  properties: ['top','left','width','height'],
-  defaultValues: baseBoxPropsValues,
-  Interpolate: {numbers},
-  functions: boxModelFunctions,
-  Util:{trueDimension}
-}
-
 // Component Full Component
 export const boxModelOps = {
   component: 'boxModelProps',
diff --git a/src/components/boxModelBase.js b/src/components/boxModelBase.js
new file mode 100644
index 0000000..ba37e01
--- /dev/null
+++ b/src/components/boxModelBase.js
@@ -0,0 +1,30 @@
+import KUTE from '../objects/kute.js'
+import Components from '../objects/components.js'
+import {numbers} from '../objects/interpolate.js' 
+
+// Component Functions
+export function boxModelOnStart(tweenProp){
+  if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+    KUTE[tweenProp] = (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`;
+      // elem.style[tweenProp] = `${(numbers(a,b,v) ) >> 0}px`;
+    }
+  }
+}
+
+// Component Base Props
+const baseBoxProps = ['top','left','width','height']
+const baseBoxOnStart = {}
+baseBoxProps.map(x=>baseBoxOnStart[x] = boxModelOnStart)
+
+// Component Base
+export const baseBoxModelOps = {
+  component: 'boxModelProps',
+  category: 'boxModel',
+  properties: baseBoxProps,
+  // defaultValues: baseBoxPropsValues,
+  Interpolate: {numbers},
+  functions: {onStart: baseBoxOnStart}
+}
+
+Components.BoxModelProperties = baseBoxModelOps
diff --git a/src/components/boxModelEssential.js b/src/components/boxModelEssential.js
new file mode 100644
index 0000000..85ad4e8
--- /dev/null
+++ b/src/components/boxModelEssential.js
@@ -0,0 +1,50 @@
+import KUTE from '../objects/kute.js'
+import defaultValues from '../objects/defaultValues.js'
+import Components from '../objects/components.js'
+import getStyleForProperty from '../process/getStyleForProperty.js' 
+import trueDimension from '../util/trueDimension.js' 
+import {numbers} from '../objects/interpolate.js' 
+
+// Component Functions
+export function boxModelOnStart(tweenProp){
+  if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
+    KUTE[tweenProp] = (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`;
+      // elem.style[tweenProp] = `${(numbers(a,b,v) ) >> 0}px`;
+    }
+  }
+}
+export function getBoxModel(tweenProp){
+  return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
+}
+export function prepareBoxModel(tweenProp,value){
+  const boxValue = trueDimension(value), offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth';
+  return boxValue.u === '%' ? boxValue.v * this.element[offsetProp] / 100 : boxValue.v;
+}
+
+// Component Base Props
+const essentialBoxProps = ['top','left','width','height']
+const essentialBoxPropsValues = {top:0,left:0,width:0,height:0}
+const essentialBoxOnStart = {}
+essentialBoxProps.map(x=>essentialBoxOnStart[x] = boxModelOnStart)
+
+// All Component Functions
+const essentialBoxModelFunctions = {
+  prepareStart: getBoxModel,
+  prepareProperty: prepareBoxModel,
+  onStart: essentialBoxOnStart
+}
+
+
+// Component Essential
+export const essentialBoxModelOps = {
+  component: 'boxModelProps',
+  category: 'boxModel',
+  properties: ['top','left','width','height'],
+  defaultValues: essentialBoxPropsValues,
+  Interpolate: {numbers},
+  functions: essentialBoxModelFunctions,
+  Util:{trueDimension}
+}
+
+Components.BoxModelEssentialProperties = essentialBoxModelOps
diff --git a/src/components/clipProperty.js b/src/components/clipProperty.js
index e9300ec..0865cac 100644
--- a/src/components/clipProperty.js
+++ b/src/components/clipProperty.js
@@ -1,8 +1,8 @@
-import KUTE from '../objects/KUTE.js'
-import Components from '../objects/Components.js'
+import KUTE from '../objects/kute.js'
+import Components from '../objects/components.js'
 import getStyleForProperty from '../process/getStyleForProperty.js' 
 import trueDimension from '../util/trueDimension.js' 
-import {numbers} from '../objects/Interpolate.js'
+import {numbers} from '../objects/interpolate.js'
 
 // Component Functions
 export function getClip(tweenProp,v){
diff --git a/src/components/colorProperties.js b/src/components/colorProperties.js
index f25be9f..0832feb 100644
--- a/src/components/colorProperties.js
+++ b/src/components/colorProperties.js
@@ -1,9 +1,9 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js'
-import Components from '../objects/Components.js'
+import Components from '../objects/components.js'
 import getStyleForProperty from '../process/getStyleForProperty.js' 
 import trueColor from '../util/trueColor.js' 
-import {numbers} from '../objects/Interpolate.js' 
+import {numbers} from '../objects/interpolate.js' 
 
 // Component Interpolation
 // rgba1, rgba2, progress
diff --git a/src/components/filterEffects.js b/src/components/filterEffects.js
index a7ce696..36f447f 100644
--- a/src/components/filterEffects.js
+++ b/src/components/filterEffects.js
@@ -1,9 +1,9 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import getStyleForProperty from '../process/getStyleForProperty.js'
 import defaultValues from '../objects/defaultValues.js'
-import Components from '../objects/Components.js'
+import Components from '../objects/components.js'
 import trueColor from '../util/trueColor.js'
-import {numbers} from '../objects/Interpolate.js' 
+import {numbers} from '../objects/interpolate.js' 
 import {colors} from './colorProperties.js' 
 
 // const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
diff --git a/src/components/htmlAttributes.js b/src/components/htmlAttributes.js
index fd715f0..b7d5102 100644
--- a/src/components/htmlAttributes.js
+++ b/src/components/htmlAttributes.js
@@ -1,8 +1,8 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js'
 import onStart from '../objects/onStart.js'
-import Components from '../objects/Components.js'
-import {numbers} from '../objects/Interpolate.js' 
+import Components from '../objects/components.js'
+import {numbers} from '../objects/interpolate.js' 
 import trueColor from '../util/trueColor.js' 
 import trueDimension from '../util/trueDimension.js' 
 import {colors} from './colorProperties.js'
diff --git a/src/components/opacityProperty.js b/src/components/opacityProperty.js
index 95bdf01..d804413 100644
--- a/src/components/opacityProperty.js
+++ b/src/components/opacityProperty.js
@@ -1,7 +1,7 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import getStyleForProperty from '../process/getStyleForProperty.js'
-import Components from '../objects/Components.js'
-import {numbers} from '../objects/Interpolate.js' 
+import Components from '../objects/components.js'
+import {numbers} from '../objects/interpolate.js' 
 
 // const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
 
diff --git a/src/components/scrollProperty.js b/src/components/scrollProperty.js
index fc51765..a7df695 100644
--- a/src/components/scrollProperty.js
+++ b/src/components/scrollProperty.js
@@ -1,6 +1,6 @@
-import KUTE from '../objects/KUTE.js'
-import {numbers} from '../objects/Interpolate.js'
-import Components from '../objects/Components.js'
+import KUTE from '../objects/kute.js'
+import {numbers} from '../objects/interpolate.js'
+import Components from '../objects/components.js'
 
 import {on} from 'shorter-js/src/event/on.js'
 import {off} from 'shorter-js/src/event/off.js'
diff --git a/src/components/shadowProperties.js b/src/components/shadowProperties.js
index 4ac8cb8..bf358b3 100644
--- a/src/components/shadowProperties.js
+++ b/src/components/shadowProperties.js
@@ -1,9 +1,9 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js' 
-import Components from '../objects/Components.js' 
+import Components from '../objects/components.js' 
 import getStyleForProperty from '../process/getStyleForProperty.js' 
 import trueColor from '../util/trueColor.js' 
-import {numbers} from '../objects/Interpolate.js' 
+import {numbers} from '../objects/interpolate.js' 
 import {colors} from './colorProperties.js' 
 
 // Component Properties
diff --git a/src/components/svgCubicMorph.js b/src/components/svgCubicMorph.js
index 569ab2e..e079e84 100644
--- a/src/components/svgCubicMorph.js
+++ b/src/components/svgCubicMorph.js
@@ -1,7 +1,7 @@
-import KUTE from '../objects/KUTE.js'
-import Components from '../objects/Components.js'
+import KUTE from '../objects/kute.js'
+import Components from '../objects/components.js'
 import selector from '../util/selector.js'
-import {numbers} from '../objects/Interpolate.js'
+import {numbers} from '../objects/interpolate.js'
 
 // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
 
diff --git a/src/components/svgDraw.js b/src/components/svgDraw.js
index 1ac3fd2..721b0f6 100644
--- a/src/components/svgDraw.js
+++ b/src/components/svgDraw.js
@@ -1,6 +1,6 @@
-import KUTE from '../objects/KUTE.js'
-import {numbers} from '../objects/Interpolate.js'
-import Components from '../objects/Components.js'
+import KUTE from '../objects/kute.js'
+import {numbers} from '../objects/interpolate.js'
+import Components from '../objects/components.js'
 import getStyleForProperty from '../process/getStyleForProperty.js'
 
 // const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
diff --git a/src/components/svgMorph.js b/src/components/svgMorph.js
index f407ffd..40ecada 100644
--- a/src/components/svgMorph.js
+++ b/src/components/svgMorph.js
@@ -1,7 +1,7 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import selector from '../util/selector.js' 
 import defaultOptions from '../objects/defaultOptions.js' 
-import Components from '../objects/Components.js' 
+import Components from '../objects/components.js' 
 
 // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
 
diff --git a/src/components/svgTransform.js b/src/components/svgTransform.js
index c610e72..cc67e93 100644
--- a/src/components/svgTransform.js
+++ b/src/components/svgTransform.js
@@ -1,6 +1,6 @@
-import KUTE from '../objects/KUTE.js'
-import {numbers} from '../objects/Interpolate.js'
-import Components from '../objects/Components.js'
+import KUTE from '../objects/kute.js'
+import {numbers} from '../objects/interpolate.js'
+import Components from '../objects/components.js'
 
 // const svgTransform = { property : 'svgTransform', subProperties, defaultValue, Interpolate: {numbers}, functions }
 
diff --git a/src/components/textProperties.js b/src/components/textProperties.js
index 74d0fd1..a7c6cdd 100644
--- a/src/components/textProperties.js
+++ b/src/components/textProperties.js
@@ -1,9 +1,9 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js'
-import Components from '../objects/Components.js'
+import Components from '../objects/components.js'
 import getStyleForProperty from '../process/getStyleForProperty.js'
 import trueDimension from '../util/trueDimension.js'
-import {units} from '../objects/Interpolate.js' 
+import {units} from '../objects/interpolate.js' 
 
 // const opacity = { category : 'textProperties', defaultValues: [0,0,0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart:{} }
 
diff --git a/src/components/textWrite.js b/src/components/textWrite.js
index 7e1b46f..f340c8d 100644
--- a/src/components/textWrite.js
+++ b/src/components/textWrite.js
@@ -1,8 +1,8 @@
-import KUTE from '../objects/KUTE.js'
-import TC from '../interface/TC.js'
-import {numbers} from '../objects/Interpolate.js' 
+import KUTE from '../objects/kute.js'
+import TC from '../interface/tc.js'
+import {numbers} from '../objects/interpolate.js' 
 import defaultOptions from '../objects/defaultOptions.js'
-import Components from '../objects/Components.js'
+import Components from '../objects/components.js'
 
 // Component Util
 // utility for multi-child targets
diff --git a/src/components/transformFunctions.js b/src/components/transformFunctions.js
index 89c2617..0d82ed6 100644
--- a/src/components/transformFunctions.js
+++ b/src/components/transformFunctions.js
@@ -1,6 +1,6 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js'
-import Components from '../objects/Components.js'
+import Components from '../objects/components.js'
 import getInlineStyle from '../process/getInlineStyle.js'
 
 // const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
diff --git a/src/components/transformMatrix.js b/src/components/transformMatrix.js
index 08cfb37..5b0f284 100644
--- a/src/components/transformMatrix.js
+++ b/src/components/transformMatrix.js
@@ -1,7 +1,7 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultValues from '../objects/defaultValues.js'
-import Components from '../objects/Components.js'
-import {numbers,arrays} from '../objects/Interpolate.js'
+import Components from '../objects/components.js'
+import {numbers,arrays} from '../objects/interpolate.js'
 
 // const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck }
 
diff --git a/src/core/Render.js b/src/core/Render.js
index 719d5d7..525c19f 100644
--- a/src/core/Render.js
+++ b/src/core/Render.js
@@ -1,8 +1,8 @@
-import KUTE from '../objects/KUTE.js'
-import Tweens from '../objects/Tweens.js'
+import KUTE from '../objects/kute.js'
+import Tweens from '../objects/tweens.js'
 import globalObject from '../objects/globalObject.js'
 
-import Interpolate from  '../objects/Interpolate.js'
+import Interpolate from  '../objects/interpolate.js'
 import onStart from  '../objects/onStart.js'
 
 const Time = {}
diff --git a/src/core/add.js b/src/core/add.js
index e34d9d3..36eb274 100644
--- a/src/core/add.js
+++ b/src/core/add.js
@@ -1,2 +1,2 @@
-import Tweens from '../objects/Tweens.js'
+import Tweens from '../objects/tweens.js'
 export default (tw) => Tweens.push(tw)
\ No newline at end of file
diff --git a/src/core/getAll.js b/src/core/getAll.js
index 151cccf..3180a29 100644
--- a/src/core/getAll.js
+++ b/src/core/getAll.js
@@ -1,2 +1,2 @@
-import Tweens from '../objects/Tweens.js'
+import Tweens from '../objects/tweens.js'
 export default () => Tweens
diff --git a/src/core/internals.js b/src/core/internals.js
index 54aacd4..5f1fd58 100644
--- a/src/core/internals.js
+++ b/src/core/internals.js
@@ -2,7 +2,7 @@ import add from './add.js'
 import remove from './remove.js'
 import getAll from './getAll.js'
 import removeAll from './removeAll.js'
-import {stop} from './Render.js'
+import {stop} from './render.js'
 import linkInterpolation from './linkInterpolation.js'
 
 export default {
diff --git a/src/core/linkInterpolation.js b/src/core/linkInterpolation.js
index 15f4e71..543d53e 100644
--- a/src/core/linkInterpolation.js
+++ b/src/core/linkInterpolation.js
@@ -1,4 +1,4 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import linkProperty from '../objects/linkProperty.js'
 import supportedProperties from '../objects/supportedProperties.js'
 
diff --git a/src/core/remove.js b/src/core/remove.js
index 4270ced..a011a5a 100644
--- a/src/core/remove.js
+++ b/src/core/remove.js
@@ -1,4 +1,4 @@
-import Tweens from '../objects/Tweens.js'
+import Tweens from '../objects/tweens.js'
 export default (tw) => { 
   let i = Tweens.indexOf(tw)
   i !== -1 && Tweens.splice(i, 1)
diff --git a/src/core/removeAll.js b/src/core/removeAll.js
index f21c28e..87d5c71 100644
--- a/src/core/removeAll.js
+++ b/src/core/removeAll.js
@@ -1,2 +1,2 @@
-import Tweens from '../objects/Tweens.js'
+import Tweens from '../objects/tweens.js'
 export default () => { Tweens.length = 0 }
diff --git a/src/easing/easing-base.js b/src/easing/easing-base.js
index ef3e1b3..47d3d30 100644
--- a/src/easing/easing-base.js
+++ b/src/easing/easing-base.js
@@ -1,4 +1,4 @@
-import Util from '../objects/Util.js'
+import Util from '../objects/util.js'
 
 // Robert Penner's Easing Functions
 export function linear (t) { return t; }
diff --git a/src/easing/easing-bezier.js b/src/easing/easing-bezier.js
index 83584cb..5bcecef 100644
--- a/src/easing/easing-bezier.js
+++ b/src/easing/easing-bezier.js
@@ -1,4 +1,4 @@
-import Util from '../objects/Util.js'
+import Util from '../objects/util.js'
 import CubicBezier from 'cubic-bezier-easing'
 
 const Easing = {
diff --git a/src/index-base.js b/src/index-base.js
index 8644627..ca8713d 100644
--- a/src/index-base.js
+++ b/src/index-base.js
@@ -1,10 +1,10 @@
 import {version as Version} from './../package.json'
-import Render from './core/Render.js'
-import Interpolate from './objects/Interpolate.js'
-import Objects from './objects/ObjectsBase.js'
-import Util from './objects/Util.js'
+import Render from './core/render.js'
+import Interpolate from './objects/interpolate.js'
+import Objects from './objects/objectsBase.js'
+import Util from './objects/util.js'
 import Easing from './easing/easing-base.js'
-import Internals from './core/Internals.js'
+import Internals from './core/internals.js'
 import Selector from './util/selector.js'
 
 import Animation from './animation/animationBase.js'
@@ -15,7 +15,7 @@ import TweenBase from './tween/tweenBase.js'
 import fromTo from './interface/fromTo.js'
 
 import {baseTransformOps} from './components/transformFunctions.js'
-import {baseBoxModelOps} from './components/boxModel.js'
+import {baseBoxModelOps} from './components/boxModelBase.js'
 import {baseOpacityOps} from './components/opacityProperty.js'
 // import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js'
 
diff --git a/src/index-extra.js b/src/index-extra.js
index 906cd75..83ad075 100644
--- a/src/index-extra.js
+++ b/src/index-extra.js
@@ -1,11 +1,11 @@
 import {version as Version} from './../package.json'
-import Render from './core/Render.js'
-import Interpolate from './objects/Interpolate.js'
-import Objects from './objects/Objects.js'
-import Util from './objects/Util.js'
-import Components from './objects/Components.js'
-import Internals from './core/Internals.js'
-import Process from './process/Process.js'
+import Render from './core/render.js'
+import Interpolate from './objects/interpolate.js'
+import Objects from './objects/objects.js'
+import Util from './objects/util.js'
+import Components from './objects/components.js'
+import Internals from './core/internals.js'
+import Process from './process/process.js'
 import CubicBezier from 'cubic-bezier-easing'
 import Easing from './easing/easing-bezier.js'
 import Selector from './util/selector.js'
diff --git a/src/index.js b/src/index.js
index 08b42d2..f71a229 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
 import {version as Version} from './../package.json'
-import Render from './core/Render.js'
-import Interpolate from './objects/Interpolate.js'
-import Objects from './objects/Objects.js'
-import Util from './objects/Util.js'
-import Components from './objects/Components.js'
-import Internals from './core/Internals.js'
-import Process from './process/Process.js'
+import Render from './core/render.js'
+import Interpolate from './objects/interpolate.js'
+import Objects from './objects/objects.js'
+import Util from './objects/util.js'
+import Components from './objects/components.js'
+import Internals from './core/internals.js'
+import Process from './process/process.js'
 import CubicBezier from 'cubic-bezier-easing'
 import Easing from './easing/easing-bezier.js'
 import Selector from './util/selector.js'
@@ -23,7 +23,7 @@ import allFromTo from './interface/allFromTo.js'
 import Animation from './animation/animation.js'
 
 // components
-import {essentialBoxModelOps} from './components/boxModel.js'
+import {essentialBoxModelOps} from './components/boxModelEssential.js'
 import {colorsOps} from './components/colorProperties.js'
 import {attrOps} from './components/htmlAttributes.js'
 import {opacityOps} from './components/opacityProperty.js'
diff --git a/src/interface/TC.js b/src/interface/TC.js
index 1b46fc8..d788ba3 100644
--- a/src/interface/TC.js
+++ b/src/interface/TC.js
@@ -1,3 +1,3 @@
-import TweenConstructor from '../objects/TweenConstructor.js'
+import TweenConstructor from '../objects/tweenConstructor.js'
 
 export default TweenConstructor.Tween
\ No newline at end of file
diff --git a/src/interface/fromTo.js b/src/interface/fromTo.js
index 4d4d197..ce197f4 100644
--- a/src/interface/fromTo.js
+++ b/src/interface/fromTo.js
@@ -1,5 +1,5 @@
 import selector from '../util/selector.js'
-import TC from './TC.js'
+import TC from './tc.js'
 
 export default function fromTo(element, startObject, endObject, optionsObj) {
   optionsObj = optionsObj || {}
diff --git a/src/interface/to.js b/src/interface/to.js
index f7d5231..da0b46f 100644
--- a/src/interface/to.js
+++ b/src/interface/to.js
@@ -1,5 +1,5 @@
 import selector from '../util/selector.js'
-import TC from './TC.js'
+import TC from './tc.js'
 
 export default function to(element, endObject, optionsObj) {
   optionsObj = optionsObj || {}
diff --git a/src/tween/tween.js b/src/tween/tween.js
index da87f4a..b7f627f 100644
--- a/src/tween/tween.js
+++ b/src/tween/tween.js
@@ -1,6 +1,6 @@
 
-import KUTE from '../objects/KUTE.js'
-import TweenConstructor from '../objects/TweenConstructor.js'
+import KUTE from '../objects/kute.js'
+import TweenConstructor from '../objects/tweenConstructor.js'
 
 import TweenBase from './tweenBase.js'
 import add from '../core/add.js'
@@ -9,7 +9,7 @@ import defaultOptions from '../objects/defaultOptions.js'
 import crossCheck from '../objects/crossCheck.js'
 import prepareObject from '../process/prepareObject.js'
 import getStartValues from '../process/getStartValues.js'
-import {Tick,Ticker} from '../core/Render.js'
+import {Tick,Ticker} from '../core/render.js'
 
 defaultOptions.repeat = 0
 defaultOptions.repeatDelay = 0
diff --git a/src/tween/tweenBase.js b/src/tween/tweenBase.js
index 256ef06..901e0f4 100644
--- a/src/tween/tweenBase.js
+++ b/src/tween/tweenBase.js
@@ -1,11 +1,11 @@
-import KUTE from '../objects/KUTE.js'
-import TweenConstructor from '../objects/TweenConstructor.js'
+import KUTE from '../objects/kute.js'
+import TweenConstructor from '../objects/tweenConstructor.js'
 import onStart from '../objects/onStart.js'
 import onComplete from '../objects/onComplete.js'
 import defaultOptions from '../objects/defaultOptions.js'
-import Util from '../objects/Util.js'
+import Util from '../objects/util.js'
 
-import {Tick,Ticker,stop} from '../core/Render.js'
+import {Tick,Ticker,stop} from '../core/render.js'
 
 import add from '../core/add.js'
 import remove from '../core/remove.js'
diff --git a/src/tween/tweenCollection.js b/src/tween/tweenCollection.js
index 8876ebd..aaf33ff 100644
--- a/src/tween/tweenCollection.js
+++ b/src/tween/tweenCollection.js
@@ -1,6 +1,6 @@
-import KUTE from '../objects/KUTE.js'
+import KUTE from '../objects/kute.js'
 import defaultOptions from '../objects/defaultOptions.js'
-import TC from '../interface/TC.js'
+import TC from '../interface/tc.js'
 
 // KUTE.js Tween Collection
 // ========================
diff --git a/src/tween/tweenExtra.js b/src/tween/tweenExtra.js
index fda2351..43da8bd 100644
--- a/src/tween/tweenExtra.js
+++ b/src/tween/tweenExtra.js
@@ -1,4 +1,4 @@
-import TweenConstructor from '../objects/TweenConstructor.js'
+import TweenConstructor from '../objects/tweenConstructor.js'
 import Tween from './tween.js'
 
 // to do
diff --git a/src/util/progressBar.js b/src/util/progressBar.js
index 74ce861..14276b4 100644
--- a/src/util/progressBar.js
+++ b/src/util/progressBar.js
@@ -1,5 +1,5 @@
-import KUTE from '../objects/KUTE.js'
-import TweenConstructor from '../objects/TweenConstructor.js'
+import KUTE from '../objects/kute.js'
+import TweenConstructor from '../objects/tweenConstructor.js'
 import selector from './selector.js'
 
 export default class ProgressBar {

From a8c06c1dad84051628023b19eb06e03ead2faeb6 Mon Sep 17 00:00:00 2001
From: thednp 
Date: Tue, 16 Jun 2020 14:37:41 +0000
Subject: [PATCH 384/471]

---
 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 0e7e4ce8170c56a4df2e53930a638389fe461b5b Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 16 Jun 2020 14:40:58 +0000 Subject: [PATCH 385/471] Changes: * added a proper BASE version for all components * replaced transformFunctions with transformMatrix in index-base.js * fixed crossBrowserMove.js sample component * demo fixes --- demo/backgroundPosition.html | 3 +- demo/borderRadius.html | 3 +- demo/boxModel.html | 3 +- demo/clipProperty.html | 4 +- demo/colorProperties.html | 3 +- demo/filterEffects.html | 3 +- demo/htmlAttributes.html | 3 +- demo/index.html | 3 +- demo/opacityProperty.html | 3 +- demo/performance-matrix.html | 4 +- demo/performance-transform.html | 7 +- demo/performance.html | 8 +- demo/progress.html | 5 +- demo/scrollProperty.html | 3 +- demo/shadowProperties.html | 5 +- demo/src/kute-base.js | 169 +++--- demo/src/kute-base.min.js | 2 +- demo/src/kute-extra.js | 676 ++++++++++++----------- demo/src/kute-extra.min.js | 2 +- demo/src/kute.min.js | 2 +- demo/svgCubicMorph.html | 4 +- demo/svgDraw.html | 3 +- demo/svgMorph.html | 6 +- demo/svgTransform.html | 3 +- demo/textProperties.html | 3 +- demo/textWrite.html | 5 +- demo/transformFunctions.html | 5 +- demo/transformMatrix.html | 5 +- dist/kute.esm.js | 347 ++++++------ dist/kute.esm.min.js | 2 +- dist/kute.js | 347 ++++++------ dist/kute.min.js | 2 +- src/animation/animationBase.js | 25 +- src/components/backgroundPosition.js | 31 +- src/components/backgroundPositionBase.js | 22 + src/components/borderRadius.js | 28 +- src/components/borderRadiusBase.js | 29 + src/components/boxModel.js | 22 +- src/components/boxModelBase.js | 10 +- src/components/boxModelEssential.js | 24 +- src/components/clipProperty.js | 35 +- src/components/clipPropertyBase.js | 27 + src/components/colorProperties.js | 48 +- src/components/colorPropertiesBase.js | 44 ++ src/components/crossBrowserMove.js | 29 +- src/components/filterEffects.js | 70 +-- src/components/filterEffectsBase.js | 58 ++ src/components/htmlAttributes.js | 41 +- src/components/htmlAttributesBase.js | 39 ++ src/components/opacityProperty.js | 29 +- src/components/opacityPropertyBase.js | 24 + src/components/scrollProperty.js | 91 +-- src/components/scrollPropertyBase.js | 80 +++ src/components/shadowProperties.js | 37 +- src/components/shadowPropertiesBase.js | 38 ++ src/components/svgCubicMorph.js | 62 +-- src/components/svgCubicMorphBase.js | 44 ++ src/components/svgDraw.js | 55 +- src/components/svgDrawBase.js | 30 + src/components/svgMorph.js | 53 +- src/components/svgMorphBase.js | 37 ++ src/components/svgTransform.js | 58 +- src/components/svgTransformBase.js | 54 ++ src/components/textProperties.js | 36 +- src/components/textPropertiesBase.js | 31 ++ src/components/textWrite.js | 83 +-- src/components/textWriteBase.js | 78 +++ src/components/transformFunctions.js | 91 +-- src/components/transformFunctionsBase.js | 77 +++ src/components/transformMatrix.js | 90 +-- src/components/transformMatrixBase.js | 61 ++ src/core/Render.js | 1 - src/index-base.js | 27 +- src/index-extra.js | 32 +- src/index.js | 16 +- src/objects/ObjectsBase.js | 2 - src/tween/tween.js | 11 +- src/tween/tweenBase.js | 15 +- src/tween/tweenExtra.js | 2 +- src/util/selector.js | 2 +- 80 files changed, 1904 insertions(+), 1668 deletions(-) create mode 100644 src/components/backgroundPositionBase.js create mode 100644 src/components/borderRadiusBase.js create mode 100644 src/components/clipPropertyBase.js create mode 100644 src/components/colorPropertiesBase.js create mode 100644 src/components/filterEffectsBase.js create mode 100644 src/components/htmlAttributesBase.js create mode 100644 src/components/opacityPropertyBase.js create mode 100644 src/components/scrollPropertyBase.js create mode 100644 src/components/shadowPropertiesBase.js create mode 100644 src/components/svgCubicMorphBase.js create mode 100644 src/components/svgDrawBase.js create mode 100644 src/components/svgMorphBase.js create mode 100644 src/components/svgTransformBase.js create mode 100644 src/components/textPropertiesBase.js create mode 100644 src/components/textWriteBase.js create mode 100644 src/components/transformFunctionsBase.js create mode 100644 src/components/transformMatrixBase.js diff --git a/demo/backgroundPosition.html b/demo/backgroundPosition.html index 26586c9..379d0fb 100644 --- a/demo/backgroundPosition.html +++ b/demo/backgroundPosition.html @@ -145,8 +145,7 @@ let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start() - + diff --git a/demo/borderRadius.html b/demo/borderRadius.html index 2305fcd..729bd96 100644 --- a/demo/borderRadius.html +++ b/demo/borderRadius.html @@ -157,8 +157,7 @@ KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start(); - + diff --git a/demo/boxModel.html b/demo/boxModel.html index ef34c1e..913e436 100644 --- a/demo/boxModel.html +++ b/demo/boxModel.html @@ -165,8 +165,7 @@ let tween8 = KUTE.to('selector1',{margin:'5px'}) - + diff --git a/demo/clipProperty.html b/demo/clipProperty.html index 38df1cc..d5bd540 100644 --- a/demo/clipProperty.html +++ b/demo/clipProperty.html @@ -140,10 +140,8 @@ - + - diff --git a/demo/colorProperties.html b/demo/colorProperties.html index ec187b8..79bf27a 100644 --- a/demo/colorProperties.html +++ b/demo/colorProperties.html @@ -156,8 +156,7 @@ KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+ - + diff --git a/demo/filterEffects.html b/demo/filterEffects.html index 23bb722..269f356 100644 --- a/demo/filterEffects.html +++ b/demo/filterEffects.html @@ -177,8 +177,7 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop - + diff --git a/demo/htmlAttributes.html b/demo/htmlAttributes.html index be6fced..069cdb8 100644 --- a/demo/htmlAttributes.html +++ b/demo/htmlAttributes.html @@ -220,8 +220,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
    • - + diff --git a/demo/index.html b/demo/index.html index 9f1496d..db78484 100644 --- a/demo/index.html +++ b/demo/index.html @@ -219,8 +219,7 @@ - + diff --git a/demo/opacityProperty.html b/demo/opacityProperty.html index 920d9e5..363efcb 100644 --- a/demo/opacityProperty.html +++ b/demo/opacityProperty.html @@ -138,8 +138,7 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start() - + diff --git a/demo/performance-matrix.html b/demo/performance-matrix.html index 8fefb2c..59271ce 100644 --- a/demo/performance-matrix.html +++ b/demo/performance-matrix.html @@ -199,10 +199,8 @@
    - + - diff --git a/demo/performance-transform.html b/demo/performance-transform.html index 1ccd009..ae26364 100644 --- a/demo/performance-transform.html +++ b/demo/performance-transform.html @@ -202,13 +202,8 @@
    - - - - + - diff --git a/demo/performance.html b/demo/performance.html index 81dcc03..f8ddaeb 100644 --- a/demo/performance.html +++ b/demo/performance.html @@ -228,15 +228,11 @@ - + - - - - + diff --git a/demo/progress.html b/demo/progress.html index 52f3bc4..c517f51 100644 --- a/demo/progress.html +++ b/demo/progress.html @@ -206,10 +206,7 @@ document.getElementById('rectangle').addEventListener('click',function(){ - - - + diff --git a/demo/scrollProperty.html b/demo/scrollProperty.html index d17f6d2..9d61a44 100644 --- a/demo/scrollProperty.html +++ b/demo/scrollProperty.html @@ -205,8 +205,7 @@ KUTE.to('#myElement',{scroll: 0 }).start() - + diff --git a/demo/shadowProperties.html b/demo/shadowProperties.html index 3a09b6a..056475f 100644 --- a/demo/shadowProperties.html +++ b/demo/shadowProperties.html @@ -179,9 +179,8 @@ var myTSTween2 = KUTE.fromTo( - - + + diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js index 484b17e..51535fc 100644 --- a/demo/src/kute-base.js +++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index 8bd9b41..f1b1b6b 100644 --- a/demo/src/kute-base.min.js +++ b/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js index 89ca9c1..af1177a 100644 --- a/demo/src/kute-extra.js +++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index e76c248..6dccc28 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/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/demo/svgCubicMorph.html b/demo/svgCubicMorph.html index 0ad0afb..b0a071f 100644 --- a/demo/svgCubicMorph.html +++ b/demo/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/demo/svgDraw.html b/demo/svgDraw.html index a0b2848..feb904e 100644 --- a/demo/svgDraw.html +++ b/demo/svgDraw.html @@ -151,8 +151,7 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'}); - + diff --git a/demo/svgMorph.html b/demo/svgMorph.html index a07cc81..f339dbd 100644 --- a/demo/svgMorph.html +++ b/demo/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/demo/svgTransform.html b/demo/svgTransform.html index 0809c8a..812829f 100644 --- a/demo/svgTransform.html +++ b/demo/svgTransform.html @@ -375,8 +375,7 @@ KUTE.fromTo(element, - + diff --git a/demo/textProperties.html b/demo/textProperties.html index c123026..693fad9 100644 --- a/demo/textProperties.html +++ b/demo/textProperties.html @@ -144,8 +144,7 @@ let tween3 = KUTE.to('selector1',{wordSpacing:50}) - + diff --git a/demo/textWrite.html b/demo/textWrite.html index 479a115..15837c4 100644 --- a/demo/textWrite.html +++ b/demo/textWrite.html @@ -247,10 +247,7 @@ tweenObjects.start(); - - - + diff --git a/demo/transformFunctions.html b/demo/transformFunctions.html index 038de76..4bc531b 100644 --- a/demo/transformFunctions.html +++ b/demo/transformFunctions.html @@ -280,10 +280,7 @@ var tween2 = KUTE.fromTo( - - - + diff --git a/demo/transformMatrix.html b/demo/transformMatrix.html index 07b864c..4e29255 100644 --- a/demo/transformMatrix.html +++ b/demo/transformMatrix.html @@ -199,10 +199,7 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,- - - - + diff --git a/dist/kute.esm.js b/dist/kute.esm.js index 763c6bc..8c6bd8f 100644 --- a/dist/kute.esm.js +++ b/dist/kute.esm.js @@ -355,7 +355,7 @@ function selector(el, multi) { 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 @@ -438,6 +438,14 @@ TweenBase.prototype.close = function close () { 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; @@ -457,6 +465,9 @@ TweenBase.prototype.update = function update (time) { } this.playing = false; this.close(); + if (this._chain !== undefined && this._chain.length){ + this._chain.map(function (tw){ return tw.start(); }); + } return false; } return true; @@ -572,14 +583,6 @@ var Tween = (function (TweenBase) { 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; @@ -798,6 +801,17 @@ function boxModelOnStart(tweenProp){ }; } } +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; + function getBoxModel(tweenProp){ return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp]; } @@ -814,8 +828,8 @@ var essentialBoxModelFunctions = { prepareProperty: prepareBoxModel, onStart: essentialBoxOnStart }; -var essentialBoxModelOps = { - component: 'boxModelProps', +var essentialBoxModel = { + component: 'essentialBoxModel', category: 'boxModel', properties: ['top','left','width','height'], defaultValues: essentialBoxPropsValues, @@ -823,7 +837,7 @@ var essentialBoxModelOps = { functions: essentialBoxModelFunctions, Util:{trueDimension: trueDimension} }; -Components.BoxModelEssentialProperties = essentialBoxModelOps; +Components.BoxModelEssential = essentialBoxModel; function hexToRGB (hex) { var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; @@ -866,11 +880,6 @@ function colors(a, b, v) { 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) { @@ -878,6 +887,12 @@ function onStartColors(tweenProp){ }; } } + +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) { @@ -886,25 +901,42 @@ function getColor(prop,value) { 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 = {}; @@ -957,28 +989,12 @@ function prepareAttr(tweenProp,attrObj){ } 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'], @@ -987,14 +1003,8 @@ var attrOps = { functions: attrFunctions, Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension } }; -Components.HTMLAttributes = attrOps; +Components.HTMLAttributes = htmlAttributes; -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) { @@ -1002,19 +1012,76 @@ function onStartOpacity(tweenProp){ }; } } + +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 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; @@ -1107,20 +1174,6 @@ function createTextTweens(target,newText,options){ }; 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; } @@ -1131,47 +1184,12 @@ function prepareText(tweenProp,value) { 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'], @@ -1181,7 +1199,7 @@ var textWriteOps = { functions: textWriteFunctions, Util: { charSet: charSet, createTextTweens: createTextTweens } }; -Components.TextWriteProperties = textWriteOps; +Components.TextWriteProperties = textWrite; function perspective(a, b, u, v) { return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")") @@ -1218,6 +1236,21 @@ function skew(a, b, u, v) { 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):''); + }; + } +} + function getTransform(tweenProperty,value){ var currentStyle = getInlineStyle(this.element); return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty]; @@ -1249,20 +1282,6 @@ function prepareTransform(prop,obj){ } return transformObject; } -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):''); - }; - } -} function crossCheckTransform(tweenProp){ if (this.valuesEnd[tweenProp]) { if ( this.valuesEnd[tweenProp] ) { @@ -1292,7 +1311,7 @@ var defaultTransformValues = { skewX : 0, skewY : 0, skew: [0,0], scale : 1 }; -var transformOps = { +var transformFunctionsComponent = { component: 'transformFunctions', property: 'transform', subProperties: supportedTransformProperties, @@ -1303,17 +1322,33 @@ var transformOps = { translate3d: translate3d, rotate3d: rotate3d, translate: translate, rotate: rotate, scale: scale, skew: skew - }, + } }; -Components.TransformFunctions = transformOps; +Components.TransformFunctions = transformFunctionsComponent; -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) { @@ -1337,23 +1372,23 @@ var getPolyLength = function (el) { 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)) { @@ -1365,8 +1400,8 @@ var getTotalLength = function (el) { } 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 ) { @@ -1382,32 +1417,23 @@ var getDraw = function (e, v) { 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%', @@ -1420,11 +1446,12 @@ var svgDrawOps = { getCircleLength: getCircleLength, getEllipseLength: getEllipseLength, getTotalLength: getTotalLength, + resetDraw: resetDraw, getDraw: getDraw, percent: percent } }; -Components.SVGDraw = svgDrawOps; +Components.SVGDraw = svgDraw; function coords (a, b, l, v) { var points = []; @@ -1436,6 +1463,16 @@ function coords (a, b, l, v) { } return points; } +function onStartSVGMorph(tweenProp){ + if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + KUTE[tweenProp] = function (elem, a, b, v) { + var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString; + pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z"); + elem.setAttribute("d", pathString ); + }; + } +} + var INVALID_INPUT = 'Invalid path value'; function isFiniteNumber(number) { return typeof number === "number" && isFinite(number); @@ -1676,7 +1713,8 @@ function pathParse(svgPath) { err: state.err, segments: state.result }; -}var SvgPath = function SvgPath(path){ +} +var SvgPath = function SvgPath(path){ if (!(this instanceof SvgPath)) { return new SvgPath(path); } var pstate = pathParse(path); this.segments = pstate.segments; @@ -1977,15 +2015,6 @@ function prepareSVGMorph(tweenProp,value){ } return pathObject; } -function onStartSVGMorph(tweenProp){ - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { - var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString; - pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z"); - elem.setAttribute("d", pathString ); - }; - } -} function crossCheckSVGMorph(prop){ if ( this.valuesEnd[prop]){ var pathArray1 = this.valuesStart[prop].pathArray, @@ -2006,7 +2035,7 @@ var svgMorphFunctions = { onStart: onStartSVGMorph, crossCheck: crossCheckSVGMorph }; -var svgMorphOps = { +var svgMorph = { component: 'svgMorph', property: 'path', defaultValue: [], @@ -2018,7 +2047,7 @@ var svgMorphOps = { isDigitStart: isDigitStart,State: State,skipSpaces: skipSpaces,scanFlag: scanFlag,scanParam: scanParam,finalizeSegment: finalizeSegment,scanSegment: scanSegment,pathParse: pathParse,SvgPath: SvgPath,split: split,pathStringToRing: pathStringToRing, exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea,addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints} }; -Components.SVGMorph = svgMorphOps; +Components.SVGMorph = svgMorph; for (var component in Components) { var compOps = Components[component]; diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js index 715f14d..8b18018 100644 --- a/dist/kute.esm.min.js +++ b/dist/kute.esm.min.js @@ -1,2 +1,2 @@ // KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License -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 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,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||v.duration,this._delay=i.delay||v.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 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},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 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=F,v.repeat=0,v.repeatDelay=0,v.yoyo=!1,v.resetStart=!1;var N=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||v.repeat,this._repeatDelay=o.repeatDelay||v.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||v.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,T(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}(F);U.Tween=N;var H=U.Tween,V=function(t,e,r,n){var i=this;this.tweens=[],!("offset"in v)&&(v.offset=0),(n=n||{}).delay=n.delay||v.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=n||{},a[s].delay=s>0?n.delay+(n.offset||v.offset):n.delay,t instanceof Element?i.tweens.push(new H(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 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 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"})}z.prototype.setComponent=function(t){var e=t.component,r={prepareProperty:d,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},n=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||n)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)v[l]=t.defaultOptions[l];if(t.functions)for(var p in r)if(p in t.functions)if("function"==typeof t.functions[p])!r[p][e]&&(r[p][e]={}),!r[p][e][n||s]&&(r[p][e][n||s]=t.functions[p]);else for(var c in t.functions[p])!r[p][e]&&(r[p][e]={}),!r[p][e][c]&&(r[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:n},functions:{prepareStart:function(t){return A(this.element,t)||f[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:R},Util:{trueDimension:D}};function B(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 K(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+")"}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,r,n,i){t.style[e]=K(r,n,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:n,colors:K},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};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 r={};for(var n in e){var i=tt(n).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);r[i]=G.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=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,r,n,i){t.setAttribute(e,K(r,n,i))})},r[s]=B(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,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]=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,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]=J)}}},rt={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:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:D}};x.HTMLAttributes=rt;var nt={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})}},it={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:n},functions:nt};function at(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 st(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(""),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 vt={text:function(e){if(!t[e]&&this.valuesEnd[e]){var r=this._textChars,n=r in ft?ft[r]:r&&r.length?r:ft[v.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})}},dt={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:vt},Util:{charSet:ft,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=st(t,"text-part"),n=st(at(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 H(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 H(n,{text:""},{text:a[i].innerHTML},r)})))).start=function(){!t.playing&&u.map((function(t){return t.start()}))&&(t.playing=!0)},u}}}};function gt(t,e,r,n){return"perspective("+(1e3*(t+(e-t)*n)>>0)/1e3+r+")"}function mt(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 yt(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 bt(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 wt(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 xt(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}x.TextWriteProperties=dt;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 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 v=r[f];h[f]=""+p+v in e?parseInt(e[""+p+v]):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?gt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?mt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?bt(r.translate,n.translate,"px",i):"")+(r.rotate3d?yt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?wt(r.rotate,n.rotate,"deg",i):"")+(r.skew?_t(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?xt(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: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(" "),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"})}},Lt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:n},functions:Pt,Util:{getRectLength:Et,getPolyLength:Ct,getLineLength:It,getCircleLength:At,getEllipseLength:Mt,getTotalLength:kt,getDraw:Ot,percent:St}};function jt(t,e,r,n){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,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}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 Bt(t){return t>=48&&t<=57}function Kt(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(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>=zt[r]&&(t.result.push([e].concat(n.splice(0,zt[r]))),zt[r]););}function Gt(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=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(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?$t(t):Zt(t),t.err.length)return;t.data.push(t.param),Yt(t),n=!1,t.index=t.max)break;if(!Kt(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),r=e.max;for(Yt(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Ht(n,i,.5),t.splice(r+1,0,i)}function ce(t,e){var r,n;if("string"==typeof t){var i=re(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ut);if(!he(r=t.slice(0)))throw new TypeError(Ut);return r.length>1&&Vt(r[0],r[r.length-1])&&r.pop(),ue(r)>0&&r.reverse(),!n&&e&&Ft(e)&&e>0&&pe(r,e),r}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,r){var n=ce(t,r=r||v.morphPrecision),i=ce(e,r),a=n.length-i.length;return le(n,a<0?-1*a:0),le(i,a>0?a:0),se(n,i),[n,i]}te.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},te.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 ve={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"+jt(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=fe(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision):v.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},de={component:"svgMorph",property:"path",defaultValue:[],Interpolate:jt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ve,Util:{INVALID_INPUT:Ut,isFiniteNumber:Ft,distance:Nt,pointAlong:Ht,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Dt,isSpace:Qt,isCommand:Rt,isArc:Xt,isDigit:Bt,isDigitStart:Kt,State:qt,skipSpaces:Yt,scanFlag:Zt,scanParam:$t,finalizeSegment:Wt,scanSegment:Gt,pathParse:Jt,SvgPath:te,split:ee,pathStringToRing:re,exactRing:ne,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=de,x){var me=x[ge];x[ge]=new z(me)}var ye={Animation:z,Components:x,Tween:N,fromTo:function(t,e,r,n){return n=n||{},new H(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new H(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:L,CubicBezier:P,Render:p,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"};export default ye; +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.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,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};F.prototype.start=function(e){if(T(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},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 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(),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 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,T(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.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}(F);U.Tween=N;var H=U.Tween,D=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 H(t,e,r,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 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"})}V.prototype.setComponent=function(t){var e=t.component,r={prepareProperty:v,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},n=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||n)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)d[l]=t.defaultOptions[l];if(t.functions)for(var c in r)if(c in t.functions)if("function"==typeof t.functions[c])!r[c][e]&&(r[c][e]={}),!r[c][e][n||s]&&(r[c][e][n||s]=t.functions[c]);else for(var p in t.functions[c])!r[c][e]&&(r[c][e]={}),!r[c][e][p]&&(r[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:n},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: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},Util:{trueDimension:z}};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 Y(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+")"}function Z(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,r,n,i){t.style[e]=Y(r,n,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:n,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 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]=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 s=rt(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,r,n,i){t.setAttribute(e,Y(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,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,r,i,a){var s=e.replace(c,"");t.setAttribute(s,(1e3*n(r.v,i.v,a)>>0)/1e3+i.u)})},r[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,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]=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:n,colors:Y},functions:nt,Util:{replaceUppercase:rt,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,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};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 r=this._textChars,n=r in ft?ft[r]:r&&r.length?r:ft[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})}};function vt(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 gt(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,c=void 0;s>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 xt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*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","skew("+i.join(",")+")"}function St(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>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 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 c=u.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[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?xt(r.rotate,n.rotate,"deg",i):"")+(r.skew?Tt(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: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(" "),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,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Pt,percent:Ct}};function Ft(t,e,r,n){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,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}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(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++,$t(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?Gt(t):Wt(t),t.err.length)return;t.data.push(t.param),$t(t),n=!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),r=e.max;for($t(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Vt(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(Nt);if(!de(r=t.slice(0)))throw new TypeError(Nt);return r.length>1&&zt(r[0],r[r.length-1])&&r.pop(),ce(r)>0&&r.reverse(),!n&&e&&Ht(e)&&e>0&&he(r,e),r}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,r){var n=fe(t,r=r||d.morphPrecision),i=fe(e,r),a=n.length-i.length;return pe(n,a<0?-1*a:0),pe(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 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=[],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"+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):d.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: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:re,split:ne,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)}var we={Animation:V,Components:x,Tween:N,fromTo:function(t,e,r,n){return n=n||{},new H(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new H(j(t),e,e,r)},TweenCollection:D,allFromTo:function(t,e,r,n){return n=n||{},new D(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new D(j(t,!0),e,e,r)},Objects:w,Util:_,Easing:P,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"};export default we; diff --git a/dist/kute.js b/dist/kute.js index 1682504..802ba1f 100644 --- a/dist/kute.js +++ b/dist/kute.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; @@ -804,6 +807,17 @@ }; } } + 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; + function getBoxModel(tweenProp){ return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp]; } @@ -820,8 +834,8 @@ prepareProperty: prepareBoxModel, onStart: essentialBoxOnStart }; - var essentialBoxModelOps = { - component: 'boxModelProps', + var essentialBoxModel = { + component: 'essentialBoxModel', category: 'boxModel', properties: ['top','left','width','height'], defaultValues: essentialBoxPropsValues, @@ -829,7 +843,7 @@ functions: essentialBoxModelFunctions, Util:{trueDimension: trueDimension} }; - Components.BoxModelEssentialProperties = essentialBoxModelOps; + Components.BoxModelEssential = essentialBoxModel; function hexToRGB (hex) { var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; @@ -872,11 +886,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) { @@ -884,6 +893,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) { @@ -892,25 +907,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 = {}; @@ -963,28 +995,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'], @@ -993,14 +1009,8 @@ functions: attrFunctions, Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension } }; - Components.HTMLAttributes = attrOps; + Components.HTMLAttributes = htmlAttributes; - 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) { @@ -1008,19 +1018,76 @@ }; } } + + 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 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; @@ -1113,20 +1180,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; } @@ -1137,47 +1190,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'], @@ -1187,7 +1205,7 @@ functions: textWriteFunctions, Util: { charSet: charSet, createTextTweens: createTextTweens } }; - Components.TextWriteProperties = textWriteOps; + Components.TextWriteProperties = textWrite; function perspective(a, b, u, v) { return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + u + ")") @@ -1224,6 +1242,21 @@ 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):''); + }; + } + } + function getTransform(tweenProperty,value){ var currentStyle = getInlineStyle(this.element); return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty]; @@ -1255,20 +1288,6 @@ } return transformObject; } - 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):''); - }; - } - } function crossCheckTransform(tweenProp){ if (this.valuesEnd[tweenProp]) { if ( this.valuesEnd[tweenProp] ) { @@ -1298,7 +1317,7 @@ skewX : 0, skewY : 0, skew: [0,0], scale : 1 }; - var transformOps = { + var transformFunctionsComponent = { component: 'transformFunctions', property: 'transform', subProperties: supportedTransformProperties, @@ -1309,17 +1328,33 @@ translate3d: translate3d, rotate3d: rotate3d, translate: translate, rotate: rotate, scale: scale, skew: skew - }, + } }; - Components.TransformFunctions = transformOps; + Components.TransformFunctions = transformFunctionsComponent; - 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) { @@ -1343,23 +1378,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)) { @@ -1371,8 +1406,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 ) { @@ -1388,32 +1423,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%', @@ -1426,11 +1452,12 @@ getCircleLength: getCircleLength, getEllipseLength: getEllipseLength, getTotalLength: getTotalLength, + resetDraw: resetDraw, getDraw: getDraw, percent: percent } }; - Components.SVGDraw = svgDrawOps; + Components.SVGDraw = svgDraw; function coords (a, b, l, v) { var points = []; @@ -1442,6 +1469,16 @@ } return points; } + function onStartSVGMorph(tweenProp){ + if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + KUTE[tweenProp] = function (elem, a, b, v) { + var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString; + pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z"); + elem.setAttribute("d", pathString ); + }; + } + } + var INVALID_INPUT = 'Invalid path value'; function isFiniteNumber(number) { return typeof number === "number" && isFinite(number); @@ -1682,7 +1719,8 @@ err: state.err, segments: state.result }; - }var SvgPath = function SvgPath(path){ + } + var SvgPath = function SvgPath(path){ if (!(this instanceof SvgPath)) { return new SvgPath(path); } var pstate = pathParse(path); this.segments = pstate.segments; @@ -1983,15 +2021,6 @@ } return pathObject; } - function onStartSVGMorph(tweenProp){ - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { - var path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString; - pathString = v === 1 ? b.original : ("M" + (coords( path1, path2, len, v ).join('L')) + "Z"); - elem.setAttribute("d", pathString ); - }; - } - } function crossCheckSVGMorph(prop){ if ( this.valuesEnd[prop]){ var pathArray1 = this.valuesStart[prop].pathArray, @@ -2012,7 +2041,7 @@ onStart: onStartSVGMorph, crossCheck: crossCheckSVGMorph }; - var svgMorphOps = { + var svgMorph = { component: 'svgMorph', property: 'path', defaultValue: [], @@ -2024,7 +2053,7 @@ isDigitStart: isDigitStart,State: State,skipSpaces: skipSpaces,scanFlag: scanFlag,scanParam: scanParam,finalizeSegment: finalizeSegment,scanSegment: scanSegment,pathParse: pathParse,SvgPath: SvgPath,split: split,pathStringToRing: pathStringToRing, exactRing: exactRing,approximateRing: approximateRing,measure: measure,rotateRing: rotateRing,polygonLength: polygonLength,polygonArea: polygonArea,addPoints: addPoints,bisect: bisect,normalizeRing: normalizeRing,validRing: validRing,getInterpolationPoints: getInterpolationPoints} }; - Components.SVGMorph = svgMorphOps; + Components.SVGMorph = svgMorph; for (var component in Components) { var compOps = Components[component]; diff --git a/dist/kute.min.js b/dist/kute.min.js index 8356fe8..57222a8 100644 --- a/dist/kute.min.js +++ b/dist/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 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/src/animation/animationBase.js b/src/animation/animationBase.js index 1cbd1c8..925331a 100644 --- a/src/animation/animationBase.js +++ b/src/animation/animationBase.js @@ -2,7 +2,6 @@ import supportedProperties from '../objects/supportedProperties.js' import defaultOptions from '../objects/defaultOptions.js' import onStart from '../objects/onStart.js' import onComplete from '../objects/onComplete.js' -import crossCheck from '../objects/crossCheck.js' import linkProperty from '../objects/linkProperty.js' import Util from '../objects/util.js' import Interpolate from '../objects/interpolate.js' @@ -10,14 +9,12 @@ import Interpolate from '../objects/interpolate.js' // Animation class export default class AnimationBase { constructor(Component){ - this.Component = Component - return this.setComponent() + return this.setComponent(Component) } - setComponent(){ - const Component = this.Component + setComponent(Component){ const ComponentName = Component.component // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty } - const Functions = { onStart, onComplete, crossCheck } + const Functions = { onStart, onComplete } const Category = Component.category const Property = Component.property @@ -34,8 +31,8 @@ export default class AnimationBase { // set functions if (Component.functions) { for (const 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][ Category||Property ] && (Functions[fn][ Category||Property ] = Component.functions[fn]) !Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {}) !Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn]) @@ -53,9 +50,15 @@ export default class AnimationBase { // set interpolate if (Component.Interpolate) { for (const fn in Component.Interpolate) { - // register new Interpolation functions - if (!Interpolate[fn]) { - Interpolate[fn] = Component.Interpolate[fn]; + const compIntObj = Component.Interpolate[fn] + if ( typeof(compIntObj) === 'function' && !Interpolate[fn] ) { + Interpolate[fn] = compIntObj; + } else { + for ( const sfn in compIntObj ) { + if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn] ) { + Interpolate[fn] = compIntObj[sfn]; + } + } } } linkProperty[ComponentName] = Component.Interpolate diff --git a/src/components/backgroundPosition.js b/src/components/backgroundPosition.js index e23e4f5..74208ba 100644 --- a/src/components/backgroundPosition.js +++ b/src/components/backgroundPosition.js @@ -1,17 +1,17 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import {numbers} from '../objects/interpolate.js' import trueDimension from '../util/trueDimension.js' +import {onStartBgPos} from './backgroundPositionBase.js' // const bgPosProp = { property : 'backgroundPosition', defaultValue: [0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart } // Component Functions -export function getBgPos(prop){ +function getBgPos(prop){ return getStyleForProperty(this.element,prop) || defaultValues[prop]; } -export function prepareBgPos(prop,value){ +function prepareBgPos(prop,value){ if ( value instanceof Array ){ const x = trueDimension(value[0]).v, y = trueDimension(value[1]).v; @@ -23,32 +23,17 @@ export function prepareBgPos(prop,value){ return [ trueDimension(posxy[0]).v, trueDimension(posxy[1]).v ]; } } -export function onStartBgPos(prop){ - if ( this.valuesEnd[prop] && !KUTE[prop]) { // opacity could be 0 - KUTE[prop] = (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)}%`; - } - } -} // All Component Functions -export const bgPositionFunctions = { +const bgPositionFunctions = { prepareStart: getBgPos, prepareProperty: prepareBgPos, onStart: onStartBgPos } -// Component Base Object -export const baseBgPosOps = { - component: 'BgPositionProp', - property: 'backgroundPosition', - Interpolate: {numbers}, - functions: {onStart: onStartBgPos} -} - // Component Full Object -export const bgPosOps = { - component: 'BgPositionProp', +const BackgroundPosition = { + component: 'backgroundPositionProp', property: 'backgroundPosition', defaultValue: [50,50], Interpolate: {numbers}, @@ -56,4 +41,6 @@ export const bgPosOps = { Util: {trueDimension} } -Components.BackgroundPositionProperty = bgPosOps \ No newline at end of file +export default BackgroundPosition + +Components.BackgroundPosition = BackgroundPosition \ No newline at end of file diff --git a/src/components/backgroundPositionBase.js b/src/components/backgroundPositionBase.js new file mode 100644 index 0000000..29c172d --- /dev/null +++ b/src/components/backgroundPositionBase.js @@ -0,0 +1,22 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' + +// const bgPosProp = { property : 'backgroundPosition', defaultValue: [0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart } + +// Component Functions +export function onStartBgPos(prop){ + if ( this.valuesEnd[prop] && !KUTE[prop]) { // opacity could be 0 + KUTE[prop] = (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)}%`; + } + } +} + +// Component Base Object +const baseBgPosOps = { + component: 'baseBackgroundPosition', + property: 'backgroundPosition', + Interpolate: {numbers}, + functions: {onStart: onStartBgPos} +} +export default baseBgPosOps \ No newline at end of file diff --git a/src/components/borderRadius.js b/src/components/borderRadius.js index 3a16c9d..18fb5a9 100644 --- a/src/components/borderRadius.js +++ b/src/components/borderRadius.js @@ -1,9 +1,9 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueDimension from '../util/trueDimension.js' -import {units} from '../objects/interpolate.js' +import {units} from '../objects/interpolate.js' +import {radiusOnStartFn} from './borderRadiusBase.js' // const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} } @@ -14,13 +14,6 @@ const radiusValues = {} radiusProps.map(x => radiusValues[x] = 0); // Component Functions -export function radiusOnStartFn(tweenProp){ - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { - elem.style[tweenProp] = units(a.v,b.v,b.u,v); - } - } -} const radiusOnStart = {} radiusProps.forEach(tweenProp => { radiusOnStart[tweenProp] = radiusOnStartFn @@ -39,18 +32,9 @@ export const radiusFunctions = { onStart: radiusOnStart } -// Base Component -export const baseRadiusOps = { - component: 'borderRadiusProps', - category: 'borderRadius', - properties: radiusProps, - Interpolate: {units}, - functions: {onStart: radiusOnStart} -} - // Full Component -export const radiusOps = { - component: 'borderRadiusProps', +const BorderRadius = { + component: 'borderRadiusProperties', category: 'borderRadius', properties: radiusProps, defaultValues: radiusValues, @@ -59,4 +43,6 @@ export const radiusOps = { Util: {trueDimension} } -Components.BorderRadiusProperties = radiusOps \ No newline at end of file +export default BorderRadius + +Components.BorderRadiusProperties = BorderRadius \ No newline at end of file diff --git a/src/components/borderRadiusBase.js b/src/components/borderRadiusBase.js new file mode 100644 index 0000000..2a2d47f --- /dev/null +++ b/src/components/borderRadiusBase.js @@ -0,0 +1,29 @@ +import KUTE from '../objects/kute.js' +import {units} from '../objects/interpolate.js' + +// const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} } + +// Component Properties +const radiusProps = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'] + +// Component Functions +export function radiusOnStartFn(tweenProp){ + if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { + KUTE[tweenProp] = (elem, a, b, v) => { + elem.style[tweenProp] = units(a.v,b.v,b.u,v); + } + } +} +const radiusOnStart = {} +radiusProps.forEach(tweenProp => { + radiusOnStart[tweenProp] = radiusOnStartFn +}); + +// Base Component +const baseBorderRadius = { + component: 'baseBorderRadius', + category: 'borderRadius', + Interpolate: {units}, + functions: {onStart: radiusOnStart} +} +export default baseBorderRadius \ No newline at end of file diff --git a/src/components/boxModel.js b/src/components/boxModel.js index 522635a..f1b17e6 100644 --- a/src/components/boxModel.js +++ b/src/components/boxModel.js @@ -1,9 +1,9 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueDimension from '../util/trueDimension.js' import {numbers} from '../objects/interpolate.js' +import {boxModelOnStart} from './boxModelBase.js' // Component Properties const boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', @@ -14,18 +14,10 @@ const boxModelValues = {} boxModelProperties.map(x => boxModelValues[x] = 0); // Component Functions -export function boxModelOnStart(tweenProp){ - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = (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`; - // elem.style[tweenProp] = `${(numbers(a,b,v) ) >> 0}px`; - } - } -} -export function getBoxModel(tweenProp){ +function getBoxModel(tweenProp){ return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp]; } -export function prepareBoxModel(tweenProp,value){ +function prepareBoxModel(tweenProp,value){ const boxValue = trueDimension(value), offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth'; return boxValue.u === '%' ? boxValue.v * this.element[offsetProp] / 100 : boxValue.v; } @@ -40,8 +32,8 @@ const boxModelFunctions = { } // Component Full Component -export const boxModelOps = { - component: 'boxModelProps', +const boxModel = { + component: 'boxModelProperties', category: 'boxModel', properties: boxModelProperties, defaultValues: boxModelValues, @@ -49,4 +41,6 @@ export const boxModelOps = { functions: boxModelFunctions } -Components.BoxModelProperties = boxModelOps +export default boxModel + +Components.BoxModelProperties = boxModel diff --git a/src/components/boxModelBase.js b/src/components/boxModelBase.js index ba37e01..15bfddc 100644 --- a/src/components/boxModelBase.js +++ b/src/components/boxModelBase.js @@ -18,13 +18,15 @@ const baseBoxOnStart = {} baseBoxProps.map(x=>baseBoxOnStart[x] = boxModelOnStart) // Component Base -export const baseBoxModelOps = { - component: 'boxModelProps', +const baseBoxModel = { + component: 'baseBoxModel', category: 'boxModel', - properties: baseBoxProps, + // properties: baseBoxProps, // defaultValues: baseBoxPropsValues, Interpolate: {numbers}, functions: {onStart: baseBoxOnStart} } -Components.BoxModelProperties = baseBoxModelOps +export default baseBoxModel + +Components.BoxModelProperties = baseBoxModel diff --git a/src/components/boxModelEssential.js b/src/components/boxModelEssential.js index 85ad4e8..17e9296 100644 --- a/src/components/boxModelEssential.js +++ b/src/components/boxModelEssential.js @@ -1,23 +1,16 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueDimension from '../util/trueDimension.js' import {numbers} from '../objects/interpolate.js' +import {boxModelOnStart} from './boxModelBase.js' + // Component Functions -export function boxModelOnStart(tweenProp){ - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = (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`; - // elem.style[tweenProp] = `${(numbers(a,b,v) ) >> 0}px`; - } - } -} -export function getBoxModel(tweenProp){ +function getBoxModel(tweenProp){ return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp]; } -export function prepareBoxModel(tweenProp,value){ +function prepareBoxModel(tweenProp,value){ const boxValue = trueDimension(value), offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth'; return boxValue.u === '%' ? boxValue.v * this.element[offsetProp] / 100 : boxValue.v; } @@ -35,10 +28,9 @@ const essentialBoxModelFunctions = { onStart: essentialBoxOnStart } - // Component Essential -export const essentialBoxModelOps = { - component: 'boxModelProps', +const essentialBoxModel = { + component: 'essentialBoxModel', category: 'boxModel', properties: ['top','left','width','height'], defaultValues: essentialBoxPropsValues, @@ -47,4 +39,6 @@ export const essentialBoxModelOps = { Util:{trueDimension} } -Components.BoxModelEssentialProperties = essentialBoxModelOps +export default essentialBoxModel + +Components.BoxModelEssential = essentialBoxModel diff --git a/src/components/clipProperty.js b/src/components/clipProperty.js index 0865cac..f9f2dbf 100644 --- a/src/components/clipProperty.js +++ b/src/components/clipProperty.js @@ -1,17 +1,17 @@ -import KUTE from '../objects/kute.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueDimension from '../util/trueDimension.js' import {numbers} from '../objects/interpolate.js' +import {onStartClip} from './clipPropertyBase.js' // Component Functions -export function getClip(tweenProp,v){ +function getClip(tweenProp,v){ const currentClip = getStyleForProperty(this.element,tweenProp), width = getStyleForProperty(this.element,'width'), height = getStyleForProperty(this.element,'height'); return !/rect/.test(currentClip) ? [0, width, height, 0] : currentClip; } -export function prepareClip(tweenProp,value) { +function prepareClip(tweenProp,value) { if ( value instanceof Array ){ return [ trueDimension(value[0]), trueDimension(value[1]), trueDimension(value[2]), trueDimension(value[3]) ]; } else { @@ -20,37 +20,16 @@ export function prepareClip(tweenProp,value) { return [ trueDimension(clipValue[0]), trueDimension(clipValue[1]), trueDimension(clipValue[2]), trueDimension(clipValue[3]) ]; } } -export function onStartClip(tweenProp) { - if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (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})`; - } - } -} // All Component Functions -export const clipFunctions = { +const clipFunctions = { prepareStart: getClip, prepareProperty: prepareClip, onStart: onStartClip } -// Component Base -export const baseClipOps = { - component: 'clipProperty', - property: 'clip', - // defaultValue: [0,0,0,0], - Interpolate: {numbers}, - functions: {onStart:onStartClip} -} - // Component Full -export const clipOps = { + const clipProperty = { component: 'clipProperty', property: 'clip', defaultValue: [0,0,0,0], @@ -59,4 +38,6 @@ export const clipOps = { Util: {trueDimension} } -Components.ClipProperty = clipOps \ No newline at end of file +export default clipProperty + +Components.ClipProperty = clipProperty \ No newline at end of file diff --git a/src/components/clipPropertyBase.js b/src/components/clipPropertyBase.js new file mode 100644 index 0000000..420b08d --- /dev/null +++ b/src/components/clipPropertyBase.js @@ -0,0 +1,27 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' + +// Component Functions +export function onStartClip(tweenProp) { + if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { + KUTE[tweenProp] = (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})`; + } + } +} + +// Component Base +const baseClip = { + component: 'baseClip', + property: 'clip', + // defaultValue: [0,0,0,0], + Interpolate: {numbers}, + functions: {onStart:onStartClip} +} + +export default baseClip \ No newline at end of file diff --git a/src/components/colorProperties.js b/src/components/colorProperties.js index 0832feb..1ca4e7a 100644 --- a/src/components/colorProperties.js +++ b/src/components/colorProperties.js @@ -1,24 +1,11 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueColor from '../util/trueColor.js' import {numbers} from '../objects/interpolate.js' +import {colors,onStartColors} from './colorPropertiesBase.js' // Component Interpolation -// rgba1, rgba2, progress -export function colors(a, b, v) { - let _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; -} - // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) @@ -30,49 +17,34 @@ supportedColors.forEach(tweenProp => { }); // Component Functions -export function onStartColors(tweenProp){ - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { - elem.style[tweenProp] = colors(a,b,v); - } - } -} const colorsOnStart = {} supportedColors.map(x => colorsOnStart[x] = onStartColors) -export function getColor(prop,value) { +function getColor(prop,value) { return getStyleForProperty(this.element,prop) || defaultValues[prop]; } -export function prepareColor(prop,value) { +function prepareColor(prop,value) { return trueColor(value); } // All Component Functions -export const colorsFunctions = { +const colorFunctions = { prepareStart: getColor, prepareProperty: prepareColor, onStart: colorsOnStart } -// Component Base -export const baseColorsOps = { - component: 'colorProps', - category: 'colors', - properties: supportedColors, - // defaultValues: defaultColors, - Interpolate: {numbers,colors}, - functions: {onStart:onStartColors} -} - // Component Full -export const colorsOps = { - component: 'colorProps', +const colorProperties = { + component: 'colorProperties', category: 'colors', properties: supportedColors, defaultValues: defaultColors, Interpolate: {numbers,colors}, - functions: colorsFunctions, + functions: colorFunctions, Util: {trueColor} } -Components.ColorProperties = colorsOps +export default colorProperties + +Components.ColorProperties = colorProperties diff --git a/src/components/colorPropertiesBase.js b/src/components/colorPropertiesBase.js new file mode 100644 index 0000000..0de8c60 --- /dev/null +++ b/src/components/colorPropertiesBase.js @@ -0,0 +1,44 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' + +// Component Interpolation +// rgba1, rgba2, progress +export function colors(a, b, v) { + let _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; +} + +// Component Properties +// supported formats +// 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) +const supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'] + +// Component Functions +export function onStartColors(tweenProp){ + if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { + KUTE[tweenProp] = (elem, a, b, v) => { + elem.style[tweenProp] = colors(a,b,v); + } + } +} +const colorsOnStart = {} +supportedColors.map(x => colorsOnStart[x] = onStartColors) + +// Component Base +export const baseColors = { + component: 'baseColors', + category: 'colors', + // properties: supportedColors, + // defaultValues: defaultColors, + Interpolate: {numbers,colors}, + functions: {onStart:colorsOnStart} +} + +export default baseColors \ No newline at end of file diff --git a/src/components/crossBrowserMove.js b/src/components/crossBrowserMove.js index 1007662..ef8a462 100644 --- a/src/components/crossBrowserMove.js +++ b/src/components/crossBrowserMove.js @@ -1,16 +1,16 @@ -import KUTE from '../objects/KUTE.js' +import KUTE from '../objects/kute.js' import getInlineStyle from '../process/getInlineStyle.js' import defaultValues from '../objects/defaultValues.js' -import Components from '../objects/Components.js' +import Components from '../objects/components.js' import trueProperty from '../util/trueProperty.js' -import {numbers} from '../objects/Interpolate.js' +import {numbers} from '../objects/interpolate.js' // Component Const const transformProperty = trueProperty('transform'); const supportTransform = transformProperty in document.body.style ? 1 : 0; // Component Functions -export function getComponentCurrentValue(tweenProp,value){ +function getComponentCurrentValue(tweenProp,value){ let currentTransform = getInlineStyle(this.element); let left = this.element.style.left; let top = this.element.style.top; @@ -22,12 +22,13 @@ export function getComponentCurrentValue(tweenProp,value){ : defaultValues.move[1]; return [x,y] } -export function prepareComponentValue(tweenProp,value){ +function prepareComponentValue(tweenProp,value){ let x = isFinite(value*1) ? parseInt(value) : parseInt(value[0]) || 0; let y = parseInt(value[1]) || 0; return [ x, y ] } + export function onStartComponent(tweenProp,value){ if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { @@ -38,10 +39,10 @@ export function onStartComponent(tweenProp,value){ } else { KUTE[tweenProp] = (elem, a, b, v) => { if (a[0]||b[0]) { - elem.style.left = numbers(a[0],b[0],v)+'px'; + elem.style.left = numbers(a[0],b[0],v)+'px'; } if (a[1]||b[1]) { - elem.style.top = numbers(a[1],b[1],v)+'px'; + elem.style.top = numbers(a[1],b[1],v)+'px'; } } } @@ -56,21 +57,23 @@ const componentFunctions = { } // Base Component -export const baseCrossBrowserMoveOps = { - component: 'crossBrowserMove', +export const baseCrossBrowserMove = { + component: 'baseCrossBrowserMove', property: 'move', - Interpolate: numbers, + Interpolate: {numbers}, functions: {onStart:onStartComponent} } // Full Component -export const crossBrowserMoveOps = { +const crossBrowserMove = { component: 'crossBrowserMove', property: 'move', defaultValue: [0,0], - Interpolate: numbers, + Interpolate: {numbers}, functions: componentFunctions, Util: {trueProperty} } -Components.CrossBrowserMove = crossBrowserMoveOps \ No newline at end of file +export default crossBrowserMove + +Components.CrossBrowserMove = crossBrowserMove \ No newline at end of file diff --git a/src/components/filterEffects.js b/src/components/filterEffects.js index 36f447f..4f83ba6 100644 --- a/src/components/filterEffects.js +++ b/src/components/filterEffects.js @@ -1,23 +1,14 @@ -import KUTE from '../objects/kute.js' import getStyleForProperty from '../process/getStyleForProperty.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import trueColor from '../util/trueColor.js' import {numbers} from '../objects/interpolate.js' -import {colors} from './colorProperties.js' +import {colors} from './colorPropertiesBase.js' +import {dropShadow,onStartFilter} from './filterEffectsBase.js' // const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } -// Component Interpolation -export function dropShadow(a,b,v){ - let params = [], unit = 'px' - - for (let 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(' ') })` -} - +// Component Util function replaceDashNamespace(str){ return str.replace('-r','R').replace('-s','S') } @@ -40,7 +31,6 @@ function parseDropShadow (shadow){ return newShadow; } -// Component Util function parseFilterString(currentStyle){ let result = {} let fnReg = /(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g @@ -64,7 +54,7 @@ function parseFilterString(currentStyle){ } // Component Functions -export function getFilter(tweenProp,value) { +function getFilter(tweenProp,value) { let currentStyle = getStyleForProperty(this.element,tweenProp), filterObject = parseFilterString(currentStyle), fnp @@ -76,7 +66,7 @@ export function getFilter(tweenProp,value) { } return filterObject; } -export function prepareFilter(tweenProp,value) { +function prepareFilter(tweenProp,value) { let filterObject = {}, fnp // {opacity: [0-100%], blur: [0-Nem], saturate: [0-N%], invert: 0, grayscale: [0-100%], brightness: [0-N%], contrast: [0-N%], sepia: [0-N%], 'hueRotate': [0-Ndeg], 'dropShadow': [0,0,0,(r:0,g:0,b:0)], url:''}, @@ -98,25 +88,8 @@ export function prepareFilter(tweenProp,value) { return filterObject; } -export function onStartFilter(tweenProp) { - if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (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) : '') - } - } -} -export function crossCheckFilter(tweenProp){ + +function crossCheckFilter(tweenProp){ if ( this.valuesEnd[tweenProp] ) { for (const fn in this.valuesStart[tweenProp]){ if (!this.valuesEnd[tweenProp][fn]){ @@ -127,36 +100,15 @@ export function crossCheckFilter(tweenProp){ } // All Component Functions -export const filterFunctions = { +const filterFunctions = { prepareStart: getFilter, prepareProperty: prepareFilter, onStart: onStartFilter, crossCheck: crossCheckFilter } -// Base Component -export const baseFilterOps = { - component: 'filterEffects', - property: 'filter', - // subProperties: ['blur', 'brightness','contrast','dropShadow','hueRotate','grayscale','invert','opacity','saturate','sepia','url'], // opacity function interfere with opacityProperty - // 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,colors,dropShadow} - }, - functions: {onStart:onStartFilter} -} - // Full Component -export const filterOps = { +const filterEffects = { component: 'filterEffects', property: 'filter', // subProperties: ['blur', 'brightness','contrast','dropShadow','hueRotate','grayscale','invert','opacity','saturate','sepia','url'], // opacity function interfere with opacityProperty @@ -177,4 +129,6 @@ export const filterOps = { Util: {parseDropShadow,parseFilterString,replaceDashNamespace,trueColor} } -Components.FilterEffects = filterOps +export default filterEffects + +Components.FilterEffects = filterEffects diff --git a/src/components/filterEffectsBase.js b/src/components/filterEffectsBase.js new file mode 100644 index 0000000..44f126d --- /dev/null +++ b/src/components/filterEffectsBase.js @@ -0,0 +1,58 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' +import {colors} from './colorPropertiesBase.js' + +// const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } + +// Component Interpolation +export function dropShadow(a,b,v){ + let params = [], unit = 'px' + + for (let 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(' ') })` +} +// Component Functions +export function onStartFilter(tweenProp) { + if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { + KUTE[tweenProp] = (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) : '') + } + } +} + + +// Base Component +const baseFilter = { + component: 'baseFilter', + property: 'filter', + // subProperties: ['blur', 'brightness','contrast','dropShadow','hueRotate','grayscale','invert','opacity','saturate','sepia','url'], // opacity function interfere with opacityProperty + // 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,colors,dropShadow} + }, + functions: {onStart:onStartFilter} +} + +export default baseFilter \ No newline at end of file diff --git a/src/components/htmlAttributes.js b/src/components/htmlAttributes.js index b7d5102..d29a654 100644 --- a/src/components/htmlAttributes.js +++ b/src/components/htmlAttributes.js @@ -1,11 +1,11 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import onStart from '../objects/onStart.js' import Components from '../objects/components.js' import {numbers} from '../objects/interpolate.js' import trueColor from '../util/trueColor.js' import trueDimension from '../util/trueDimension.js' -import {colors} from './colorProperties.js' +import {colors} from './colorPropertiesBase.js' +import {attributes,onStartAttr} from './htmlAttributesBase.js' // Component Name let ComponentName = 'htmlAttributes' @@ -13,9 +13,6 @@ let ComponentName = 'htmlAttributes' // Component Properties const svgColors = ['fill','stroke','stop-color']; -// Component Special -let attributes = {}; - // Component Util function replaceUppercase (a) { return a.replace(/[A-Z]/g, "-$&").toLowerCase(); } @@ -71,42 +68,16 @@ export function prepareAttr(tweenProp,attrObj){ // attr (string),attrObj (object } return attributesObject; } -export const onStartAttr = { - attr : function(tweenProp){ - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = (elem, vS, vE, v) => { - for ( const 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 - } - } -} // All Component Functions -export const attrFunctions = { +const attrFunctions = { prepareStart: getAttr, prepareProperty: prepareAttr, onStart: onStartAttr } -// Component Base -export const baseAttrOps = { - component: ComponentName, - property: 'attr', - subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'], // the Animation class will need some values to validate this Object attribute - // 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}, // same here - Interpolate: { numbers,colors }, - functions: {onStart:onStartAttr} -} - // Component Full -export const attrOps = { +const htmlAttributes = { component: ComponentName, property: 'attr', subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'], // the Animation class will need some values to validate this Object attribute @@ -117,4 +88,6 @@ export const attrOps = { Util: { replaceUppercase, trueColor, trueDimension } } -Components.HTMLAttributes = attrOps +export default htmlAttributes + +Components.HTMLAttributes = htmlAttributes diff --git a/src/components/htmlAttributesBase.js b/src/components/htmlAttributesBase.js new file mode 100644 index 0000000..99ba27d --- /dev/null +++ b/src/components/htmlAttributesBase.js @@ -0,0 +1,39 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' +import {colors} from './colorPropertiesBase.js' + +// Component Name +let ComponentName = 'baseHTMLAttributes' + +// Component Special +let attributes = {}; +export {attributes} + +export const onStartAttr = { + attr : function(tweenProp){ + if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + KUTE[tweenProp] = (elem, vS, vE, v) => { + for ( const 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 + } + } +} + +// Component Base +const baseAttributes = { + component: ComponentName, + property: 'attr', + // subProperties: ['fill','stroke','stop-color','fill-opacity','stroke-opacity'], // the Animation class will need some values to validate this Object attribute + // 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}, // same here + Interpolate: { numbers,colors }, + functions: {onStart:onStartAttr} +} + +export default baseAttributes \ No newline at end of file diff --git a/src/components/opacityProperty.js b/src/components/opacityProperty.js index d804413..0ffaf8d 100644 --- a/src/components/opacityProperty.js +++ b/src/components/opacityProperty.js @@ -1,24 +1,18 @@ import KUTE from '../objects/kute.js' import getStyleForProperty from '../process/getStyleForProperty.js' import Components from '../objects/components.js' -import {numbers} from '../objects/interpolate.js' +import {numbers} from '../objects/interpolate.js' +import {onStartOpacity} from './opacityPropertyBase.js' // const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart } // Component Functions -export function getOpacity(tweenProp){ +function getOpacity(tweenProp){ return getStyleForProperty(this.element,tweenProp) } -export function prepareOpacity(tweenProp,value){ +function prepareOpacity(tweenProp,value){ return parseFloat(value); // opacity always FLOAT } -export function onStartOpacity(tweenProp){ - if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // opacity could be 0 - KUTE[tweenProp] = (elem, a, b, v) => { - elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000; - } - } -} // All Component Functions const opacityFunctions = { @@ -27,17 +21,8 @@ const opacityFunctions = { onStart: onStartOpacity } -// Base Component -export const baseOpacityOps = { - component: 'opacityProperty', - property: 'opacity', - // defaultValue: 1, - Interpolate: {numbers}, - functions: {onStart: onStartOpacity} -} - // Full Component -export const opacityOps = { +const opacityProperty = { component: 'opacityProperty', property: 'opacity', defaultValue: 1, @@ -45,4 +30,6 @@ export const opacityOps = { functions: opacityFunctions } -Components.OpacityProperty = opacityOps +export default opacityProperty + +Components.OpacityProperty = opacityProperty diff --git a/src/components/opacityPropertyBase.js b/src/components/opacityPropertyBase.js new file mode 100644 index 0000000..ccfc964 --- /dev/null +++ b/src/components/opacityPropertyBase.js @@ -0,0 +1,24 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' + +// const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart } + +// Component Functions +export function onStartOpacity(tweenProp){ + if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // opacity could be 0 + KUTE[tweenProp] = (elem, a, b, v) => { + elem.style[tweenProp] = ((numbers(a,b,v) * 1000)>>0)/1000; + } + } +} + +// Base Component +const baseOpacity = { + component: 'baseOpacity', + property: 'opacity', + // defaultValue: 1, + Interpolate: {numbers}, + functions: {onStart: onStartOpacity} +} + +export default baseOpacity \ No newline at end of file diff --git a/src/components/scrollProperty.js b/src/components/scrollProperty.js index a7df695..9f9cdd8 100644 --- a/src/components/scrollProperty.js +++ b/src/components/scrollProperty.js @@ -1,107 +1,36 @@ -import KUTE from '../objects/kute.js' import {numbers} from '../objects/interpolate.js' import Components from '../objects/components.js' -import {on} from 'shorter-js/src/event/on.js' -import {off} from 'shorter-js/src/event/off.js' -import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js' -import {mouseHoverEvents} from 'shorter-js/src/strings/mouseHoverEvents.js' -import {supportTouch} from 'shorter-js/src/boolean/supportTouch.js' - -// Component Util -// events preventing scroll -const touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel' - -// true scroll container -// very important and specific to the component -const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement - -// scroll event options -// it's important to stop propagating when animating scroll -const passiveHandler = supportPassive ? { passive: false } : false - -// prevent mousewheel or touch events while tweening scroll -function preventScroll(e) { - this.scrolling && e.preventDefault() -} -function getScrollTargets(){ - let el = this.element - return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el} -} -function scrollIn(){ - let 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(){ //prevent scroll when tweening scroll - let 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 = '' - } -} +import {scrollContainer,onStartScroll,onCompleteScroll,scrollIn,scrollOut,getScrollTargets,preventScroll} from './scrollPropertyBase.js' // Component Functions -export function getScroll(){ - this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element; - - scrollIn.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; } -export function prepareScroll(prop,value){ +function prepareScroll(prop,value){ return parseInt(value); } -export function onStartScroll(tweenProp){ - if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // checking 0 will NOT add the render function - KUTE[tweenProp] = (elem, a, b, v) => { - elem.scrollTop = (numbers(a,b,v))>>0; - }; - } -} -export function onCompleteScroll(tweenProp){ - scrollOut.call(this) -} // All Component Functions -export const scrollFunctions = { +const scrollFunctions = { prepareStart: getScroll, prepareProperty: prepareScroll, onStart: onStartScroll, onComplete: onCompleteScroll } -// Base Component -export const baseScrollOps = { - component: 'scrollProperty', - property: 'scroll', - // defaultValue: 0, - Interpolate: {numbers}, - functions: { - onStart: onStartScroll, - onComplete: onCompleteScroll - }, - // unfortunatelly scroll needs all them no matter the packaging - Util: { preventScroll, scrollIn, scrollOut, scrollContainer, passiveHandler, getScrollTargets } -} - // Full Component -export const scrollOps = { +const scrollProperty = { component: 'scrollProperty', property: 'scroll', defaultValue: 0, Interpolate: {numbers}, functions: scrollFunctions, // export stuff to global - Util: { preventScroll, scrollIn, scrollOut, scrollContainer, passiveHandler, getScrollTargets } - + Util: { preventScroll, scrollIn, scrollOut, getScrollTargets } } -Components.ScrollProperty = scrollOps \ No newline at end of file +export default scrollProperty + +Components.ScrollProperty = scrollProperty \ No newline at end of file diff --git a/src/components/scrollPropertyBase.js b/src/components/scrollPropertyBase.js new file mode 100644 index 0000000..ce542e1 --- /dev/null +++ b/src/components/scrollPropertyBase.js @@ -0,0 +1,80 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' +import Components from '../objects/components.js' + +import {on} from 'shorter-js/src/event/on.js' +import {off} from 'shorter-js/src/event/off.js' +import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js' +import {mouseHoverEvents} from 'shorter-js/src/strings/mouseHoverEvents.js' +import {supportTouch} from 'shorter-js/src/boolean/supportTouch.js' + +// Component Util +// events preventing scroll +const touchOrWheel = supportTouch ? 'touchstart' : 'mousewheel' + +// true scroll container +// very important and specific to the component +export const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAgent) ? document.body : document.documentElement + +// scroll event options +// it's important to stop propagating when animating scroll +const passiveHandler = supportPassive ? { passive: false } : false + +// prevent mousewheel or touch events while tweening scroll +export function preventScroll(e) { + this.scrolling && e.preventDefault() +} +export function getScrollTargets(){ + let el = this.element + return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el} +} +export function scrollIn(){ + let 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' + } +} +export function scrollOut(){ //prevent scroll when tweening scroll + let 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 = '' + } +} + +// Component Functions +export function onStartScroll(tweenProp){ + if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // checking 0 will NOT add the render function + this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element; + scrollIn.call(this); + KUTE[tweenProp] = (elem, a, b, v) => { + elem.scrollTop = (numbers(a,b,v))>>0; + }; + } +} +export function onCompleteScroll(tweenProp){ + scrollOut.call(this) +} + +// Base Component +const baseScroll = { + component: 'baseScroll', + property: 'scroll', + // defaultValue: 0, + Interpolate: {numbers}, + functions: { + onStart: onStartScroll, + onComplete: onCompleteScroll + }, + // unfortunatelly scroll needs all them no matter the packaging + Util: { preventScroll, scrollIn, scrollOut, getScrollTargets } +} + +export default baseScroll \ No newline at end of file diff --git a/src/components/shadowProperties.js b/src/components/shadowProperties.js index bf358b3..d223c04 100644 --- a/src/components/shadowProperties.js +++ b/src/components/shadowProperties.js @@ -1,10 +1,10 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueColor from '../util/trueColor.js' import {numbers} from '../objects/interpolate.js' -import {colors} from './colorProperties.js' +import {colors} from './colorPropertiesBase.js' +import {onStartShadow} from './shadowPropertiesBase.js' // Component Properties const shadowProps = ['boxShadow','textShadow'] @@ -67,44 +67,19 @@ export function prepareShadow(tweenProp,value) { } return value; } -function onStartShadow(tweenProp) { - if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { - // let's start with the numbers | set unit | also determine inset - let 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 (let i=0; i> 0) / 1000) + unit ); - } - // the final piece of the puzzle, the DOM update - elem.style[tweenProp] = inset ? colors(colA,colB,v) + params.join(' ') + inset - : colors(colA,colB,v) + params.join(' '); - } - } -} const shadowPropOnStart = {} shadowProps.map(x=>shadowPropOnStart[x]=onStartShadow) // All Component Functions -export const shadowFunctions = { +const shadowFunctions = { prepareStart: getShadow, prepareProperty: prepareShadow, onStart: shadowPropOnStart } -// Component Base -export const baseShadowOps = { - component: 'shadowProperties', - properties: shadowProps, - // defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px 0px rgb(0,0,0)'}, - Interpolate: {numbers,colors}, - functions: {onStart: shadowPropOnStart} -} - // Component Full -export const shadowOps = { +const shadowProperties = { component: 'shadowProperties', properties: shadowProps, defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px rgb(0,0,0)'}, @@ -113,4 +88,6 @@ export const shadowOps = { Util: { processShadowArray, trueColor } } -Components.ShadowProperties = shadowOps +export default shadowProperties + +Components.ShadowProperties = shadowProperties diff --git a/src/components/shadowPropertiesBase.js b/src/components/shadowPropertiesBase.js new file mode 100644 index 0000000..49aa1e4 --- /dev/null +++ b/src/components/shadowPropertiesBase.js @@ -0,0 +1,38 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' +import {colors} from './colorPropertiesBase.js' + +// Component Properties +const shadowProps = ['boxShadow','textShadow'] + +// Component Functions +export function onStartShadow(tweenProp) { + if ( this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { + KUTE[tweenProp] = (elem, a, b, v) => { + // let's start with the numbers | set unit | also determine inset + let 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 (let i=0; i> 0) / 1000) + unit ); + } + // the final piece of the puzzle, the DOM update + elem.style[tweenProp] = inset ? colors(colA,colB,v) + params.join(' ') + inset + : colors(colA,colB,v) + params.join(' '); + } + } +} +const shadowPropOnStart = {} +shadowProps.map(x=>shadowPropOnStart[x]=onStartShadow) + +// Component Base +const baseShadow = { + component: 'baseShadow', + // properties: shadowProps, + // defaultValues: {boxShadow :'0px 0px 0px 0px rgb(0,0,0)', textShadow: '0px 0px 0px 0px rgb(0,0,0)'}, + Interpolate: {numbers,colors}, + functions: {onStart: shadowPropOnStart} +} + +export default baseShadow \ No newline at end of file diff --git a/src/components/svgCubicMorph.js b/src/components/svgCubicMorph.js index e079e84..463898e 100644 --- a/src/components/svgCubicMorph.js +++ b/src/components/svgCubicMorph.js @@ -1,9 +1,10 @@ -import KUTE from '../objects/kute.js' import Components from '../objects/components.js' import selector from '../util/selector.js' import {numbers} from '../objects/interpolate.js' -// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } +import {toPathString,onStartCubicMorph} from './svgCubicMorphBase.js' + +// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } // Component Util const INVALID_INPUT = 'Invalid path value' @@ -132,7 +133,7 @@ function parsePathString(pathString) { } } -export function pathToAbsolute(pathArray) { +function pathToAbsolute(pathArray) { pathArray = parsePathString(pathArray); if (!pathArray || !pathArray.length) { @@ -350,7 +351,7 @@ function a2c(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursiv } } -export function processPath (path, d, pcom) { +function processPath (path, d, pcom) { let nx, ny; if (!path) { return ["C", d.x, d.y, d.x, d.y, d.x, d.y]; @@ -419,7 +420,7 @@ function fixM (path1, path2, a1, a2, i) { } } -export function fixArc (p, p2, pcoms1, pcoms2, i) { +function fixArc (p, p2, pcoms1, pcoms2, i) { if (p[i].length > 7) { p[i].shift(); const pi = p[i]; @@ -432,7 +433,7 @@ export function fixArc (p, p2, pcoms1, pcoms2, i) { } } -export function path2curve(path, path2) { +function path2curve(path, path2) { const p = pathToAbsolute(path), // holder for previous path command of original path p2 = path2 && pathToAbsolute(path2), // p2 = path2 ? pathToAbsolute(path2) : pathToAbsolute('M0,0L0,0'), @@ -587,23 +588,11 @@ function getRotatedCurve(a,b) { return newPath } -export function toPathString(pathArray) { - let newPath = pathArray.map( (c) => { - if (typeof(c) === 'string') { - return c - } else { - let c0 = c.shift(); - return c0 + c.join(',') - } - }) - return newPath.join(''); -} - // Component Functions -export function getCubicMorph(tweenProp){ +function getCubicMorph(tweenProp){ return this.element.getAttribute('d'); } -export function prepareCubicMorph(tweenProp,value){ +function prepareCubicMorph(tweenProp,value){ // get path d attribute or create a path from string value let pathObject = {}, el = value instanceof SVGElement ? value : /^\.|^\#/.test(value) ? selector(value) : null, @@ -625,7 +614,7 @@ export function prepareCubicMorph(tweenProp,value){ throw TypeError(`KUTE.js - ${INVALID_INPUT} ${e}`) } } -export function crossCheckCubicMorph(tweenProp){ +function crossCheckCubicMorph(tweenProp){ if (this.valuesEnd[tweenProp]) { let pathCurve1 = this.valuesStart[tweenProp].curve, pathCurve2 = this.valuesEnd[tweenProp].curve @@ -644,40 +633,17 @@ export function crossCheckCubicMorph(tweenProp){ } } } -export function onStartCubicMorph(tweenProp){ - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = function(elem,a,b,v){ - let curve = [], path1 = a.curve, path2 = b.curve; - for(let i=0, l=path2.length; i>0)/1000 ); - } - } - elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) ); - } - } -} // All Component Functions -export const svgCubicMorphFunctions = { +const svgCubicMorphFunctions = { prepareStart: getCubicMorph, prepareProperty: prepareCubicMorph, onStart: onStartCubicMorph, crossCheck: crossCheckCubicMorph } -// Component Base -export const baseSvgCubicMorphOps = { - component: 'svgCubicMorph', - property: 'path', - // defaultValue: [], - Interpolate: {numbers,toPathString}, - functions: {onStart:onStartCubicMorph} -} - // Component Full -export const svgCubicMorphOps = { +const svgCubicMorph = { component: 'svgCubicMorph', property: 'path', defaultValue: [], @@ -692,4 +658,6 @@ export const svgCubicMorphOps = { } } -Components.SVGCubicMorph = svgCubicMorphOps +export default svgCubicMorph + +Components.SVGCubicMorph = svgCubicMorph diff --git a/src/components/svgCubicMorphBase.js b/src/components/svgCubicMorphBase.js new file mode 100644 index 0000000..824dfc0 --- /dev/null +++ b/src/components/svgCubicMorphBase.js @@ -0,0 +1,44 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' + +// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } + +// Component Interpolation +export function toPathString(pathArray) { + let newPath = pathArray.map( (c) => { + if (typeof(c) === 'string') { + return c + } else { + let c0 = c.shift(); + return c0 + c.join(',') + } + }) + return newPath.join(''); +} + +// Component Functions +export function onStartCubicMorph(tweenProp){ + if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + KUTE[tweenProp] = function(elem,a,b,v){ + let curve = [], path1 = a.curve, path2 = b.curve; + for(let i=0, l=path2.length; i>0)/1000 ); + } + } + elem.setAttribute("d", v === 1 ? b.original : toPathString(curve) ); + } + } +} + +// Component Base +const baseSvgCubicMorph = { + component: 'baseSVGCubicMorph', + property: 'path', + // defaultValue: [], + Interpolate: {numbers,toPathString}, + functions: {onStart:onStartCubicMorph} +} + +export default baseSvgCubicMorph \ No newline at end of file diff --git a/src/components/svgDraw.js b/src/components/svgDraw.js index 721b0f6..2a1e4cf 100644 --- a/src/components/svgDraw.js +++ b/src/components/svgDraw.js @@ -1,21 +1,23 @@ -import KUTE from '../objects/kute.js' import {numbers} from '../objects/interpolate.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' +import {onStartDraw} from './svgDrawBase.js' // const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart } // Component Util -const percent = (v, l) => parseFloat(v) / 100 * l +function percent (v,l) { + return parseFloat(v) / 100 * l +} // http://stackoverflow.com/a/30376660 -const getRectLength = el => { // returns the length of a Rect +function getRectLength(el) { // returns the length of a Rect let w = el.getAttribute('width'), h = el.getAttribute('height'); return (w*2)+(h*2); } -const getPolyLength = el => { +function getPolyLength(el) { // getPolygonLength / getPolylineLength - return the length of the Polygon / Polyline const points = el.getAttribute('points').split(' '); @@ -45,7 +47,7 @@ const getPolyLength = el => { return len; } -const getLineLength = el => { // return the length of the line +function getLineLength(el) { // return the length of the line const x1 = el.getAttribute('x1'); const x2 = el.getAttribute('x2'); const y1 = el.getAttribute('y1'); @@ -53,17 +55,17 @@ const getLineLength = el => { // return the length of the line return Math.sqrt((x2 - x1) ** 2+(y2 - y1) ** 2); } -const getCircleLength = el => { // return the length of the circle +function getCircleLength(el) { // return the length of the circle const r = el.getAttribute('r'); return 2 * Math.PI * r; } -const getEllipseLength = el => { // returns the length of an ellipse +function getEllipseLength(el) { // returns the length of an ellipse const 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; } -const getTotalLength = el => { // returns the result of any of the below functions +function getTotalLength(el) { // returns the result of any of the below functions if (/rect/.test(el.tagName)) { return getRectLength(el); } else if (/circle/.test(el.tagName)) { @@ -77,7 +79,7 @@ const getTotalLength = el => { // returns the result of any of the below functio } } -export const getDraw = (e, v) => { +function getDraw(e,v) { let length = /path|glyph/.test(e.tagName) ? e.getTotalLength() : getTotalLength(e), start, end, d, o; @@ -97,32 +99,18 @@ export const getDraw = (e, v) => { return { s: start, e: end, l: length }; } -export function resetDraw(elem) { +function resetDraw(elem) { elem.style.strokeDashoffset = ``; elem.style.strokeDasharray = ``; } // Component Functions -export function getDrawValue(){ +function getDrawValue(){ return getDraw(this.element); } -export function prepareDraw(a,o){ +function prepareDraw(a,o){ return getDraw(this.element,o); } -export function onStartDraw(tweenProp){ - if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem,a,b,v) => { - let 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`; - } - } -} // All Component Functions const svgDrawFunctions = { @@ -131,16 +119,8 @@ const svgDrawFunctions = { onStart: onStartDraw } -// Component Base -export const baseSVGDrawOps = { - component: 'svgDraw', - property: 'draw', - Interpolate: {numbers}, - functions: {onStart:onStartDraw} -} - // Component Full -export const svgDrawOps = { +const svgDraw = { component: 'svgDraw', property: 'draw', defaultValue: '0% 0%', @@ -154,9 +134,12 @@ export const svgDrawOps = { getCircleLength, getEllipseLength, getTotalLength, + resetDraw, getDraw, percent } } -Components.SVGDraw = svgDrawOps +export default svgDraw + +Components.SVGDraw = svgDraw diff --git a/src/components/svgDrawBase.js b/src/components/svgDrawBase.js new file mode 100644 index 0000000..c0d2f8b --- /dev/null +++ b/src/components/svgDrawBase.js @@ -0,0 +1,30 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' + +// const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart } + +// Component Functions +export function onStartDraw(tweenProp){ + if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { + KUTE[tweenProp] = (elem,a,b,v) => { + let 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`; + } + } +} + +// Component Base +const baseSVGDraw = { + component: 'baseSVGDraw', + property: 'draw', + Interpolate: {numbers}, + functions: {onStart:onStartDraw} +} + +export default baseSVGDraw \ No newline at end of file diff --git a/src/components/svgMorph.js b/src/components/svgMorph.js index 40ecada..3873133 100644 --- a/src/components/svgMorph.js +++ b/src/components/svgMorph.js @@ -2,21 +2,13 @@ import KUTE from '../objects/kute.js' import selector from '../util/selector.js' import defaultOptions from '../objects/defaultOptions.js' import Components from '../objects/components.js' - +import {onStartSVGMorph,coords} from './svgMorphBase.js' + // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } // Component Interpolation // function function(array1, array2, length, progress) -export function coords (a, b, l, v) { - const points = []; - for(let i=0;i> 0)/1000 ); - } - } - return points; -} + // Component Util const INVALID_INPUT = 'Invalid path value' @@ -319,7 +311,7 @@ function scanSegment(state) { } // Returns array of segments -export function pathParse(svgPath) { +function pathParse(svgPath) { let state = new State(svgPath), max = state.max; skipSpaces(state); @@ -347,9 +339,9 @@ export function pathParse(svgPath) { err: state.err, segments: state.result }; -}; +} -export class SvgPath { +class SvgPath { constructor(path){ if (!(this instanceof SvgPath)) { return new SvgPath(path); } @@ -727,10 +719,10 @@ function getInterpolationPoints(fromShape, toShape, morphPrecision) { // Component functions -export function getSVGMorph(tweenProp){ +function getSVGMorph(tweenProp){ return this.element.getAttribute('d'); } -export function prepareSVGMorph(tweenProp,value){ +function prepareSVGMorph(tweenProp,value){ const pathObject = {}, elem = value instanceof Element ? value : /^\.|^\#/.test(value) ? selector(value) : null, pathReg = new RegExp('\\n','ig'); // remove newlines, they brake JSON strings sometimes @@ -744,16 +736,7 @@ export function prepareSVGMorph(tweenProp,value){ } return pathObject; } -export function onStartSVGMorph(tweenProp){ - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { - let path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString; - pathString = v === 1 ? b.original : `M${coords( path1, path2, len, v ).join('L')}Z`; - elem.setAttribute("d", pathString ); - } - } -} -export function crossCheckSVGMorph(prop){ +function crossCheckSVGMorph(prop){ if ( this.valuesEnd[prop]){ let pathArray1 = this.valuesStart[prop].pathArray, pathArray2 = this.valuesEnd[prop].pathArray @@ -773,26 +756,16 @@ export function crossCheckSVGMorph(prop){ } // All Component Functions -export const svgMorphFunctions = { +const svgMorphFunctions = { prepareStart: getSVGMorph, prepareProperty: prepareSVGMorph, onStart: onStartSVGMorph, crossCheck: crossCheckSVGMorph } -// Component Base -export const baseSVGMorphOps = { - component: 'svgMorph', - property: 'path', - // defaultValue: [], - Interpolate: coords, - defaultOptions: {morphPrecision : 10, reverseFirstShape: false,}, - functions: {onStart:onStartSVGMorph} -} - // Component Full -export const svgMorphOps = { +const svgMorph = { component: 'svgMorph', property: 'path', defaultValue: [], @@ -806,4 +779,6 @@ export const svgMorphOps = { exactRing,approximateRing,measure,rotateRing,polygonLength,polygonArea,addPoints,bisect,normalizeRing,validRing,getInterpolationPoints} } -Components.SVGMorph = svgMorphOps +export default svgMorph + +Components.SVGMorph = svgMorph diff --git a/src/components/svgMorphBase.js b/src/components/svgMorphBase.js new file mode 100644 index 0000000..6c8ee27 --- /dev/null +++ b/src/components/svgMorphBase.js @@ -0,0 +1,37 @@ +import KUTE from '../objects/kute.js' + +// const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } + +// Component Interpolation +// function function(array1, array2, length, progress) +export function coords (a, b, l, v) { + const points = []; + for(let i=0;i> 0)/1000 ); + } + } + return points; +} + +// Component functions +export function onStartSVGMorph(tweenProp){ + if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + KUTE[tweenProp] = (elem, a, b, v) => { + let path1 = a.pathArray, path2 = b.pathArray, len = path2.length, pathString; + pathString = v === 1 ? b.original : `M${coords( path1, path2, len, v ).join('L')}Z`; + elem.setAttribute("d", pathString ); + } + } +} + +// Component Base +const baseSVGMorph = { + component: 'baseSVGMorph', + property: 'path', + Interpolate: coords, + functions: {onStart:onStartSVGMorph} +} + +export default baseSVGMorph \ No newline at end of file diff --git a/src/components/svgTransform.js b/src/components/svgTransform.js index cc67e93..563ef0b 100644 --- a/src/components/svgTransform.js +++ b/src/components/svgTransform.js @@ -1,6 +1,7 @@ import KUTE from '../objects/kute.js' import {numbers} from '../objects/interpolate.js' import Components from '../objects/components.js' +import {svgTransformOnStart} from './svgTransformBase.js' // const svgTransform = { property : 'svgTransform', subProperties, defaultValue, Interpolate: {numbers}, functions } @@ -56,46 +57,11 @@ function parseTransformSVG (p,v){ } // Component Functions -export function svgTransformOnStart (tweenProp){ - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = (l, a, b, v) => { - let x = 0; - let y = 0; - let tmp; - const deg = Math.PI/180; - const scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1; - const rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0; - const sin = Math.sin(rotate*deg); - const cos = Math.cos(rotate*deg); - const skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0; - const skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0; - const complex = rotate||skewX||skewY||scale!==1 || 0; - - // start normalizing the translation, we start from last to first (from last chained translation) - // the normalized translation will handle the transformOrigin tween option and makes sure to have a consistent transformation - x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0; // we start with removing transformOrigin from translation - x *= scale;y *= scale; // we now apply the scale - y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0; // now we apply skews - tmp = cos*x - sin*y; // apply rotation as well - y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x; - x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0; // now we apply the actual translation - 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; // normalizing ends with the addition of the transformOrigin to the translation - - // finally we apply the transform attribute value - 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})` : '' ) ); - } - } -} -export function prepareSvgTransform(p,v){ +function prepareSvgTransform(p,v){ return parseTransformSVG.call(this,p,v); } // returns an obect with current transform attribute value -export function getStartSvgTransform (tweenProp,value) { +function getStartSvgTransform (tweenProp,value) { const transformObject = {}; const currentTransform = parseTransformString(this.element.getAttribute('transform')); for (const i in value) { @@ -105,7 +71,7 @@ export function getStartSvgTransform (tweenProp,value) { return transformObject; } -export function svgTransformCrossCheck(prop) { +function svgTransformCrossCheck(prop) { if (!this._resetStart) return; // fix since 1.6.1 for fromTo() method if ( this.valuesEnd[prop] ) { @@ -145,19 +111,9 @@ export const svgTransformFunctions = { crossCheck: svgTransformCrossCheck } -// Component Base -export const baseSVGTransformOps = { - component: 'svgTransformProperty', - property: 'svgTransform', - // subProperties: ['translate','rotate','skewX','skewY','scale'], - // defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1}, - defaultOptions: {transformOrigin:'50% 50%'}, - Interpolate: {numbers}, - functions: {onStart:svgTransformOnStart} -} // Component Full -export const svgTransformOps = { +export const svgTransform = { component: 'svgTransformProperty', property: 'svgTransform', // subProperties: ['translate','rotate','skewX','skewY','scale'], @@ -170,4 +126,6 @@ export const svgTransformOps = { Util: { parseStringOrigin, parseTransformString, parseTransformSVG } } -Components.SVGTransformProperty = svgTransformOps +export default svgTransform + +Components.SVGTransformProperty = svgTransform diff --git a/src/components/svgTransformBase.js b/src/components/svgTransformBase.js new file mode 100644 index 0000000..549dcbe --- /dev/null +++ b/src/components/svgTransformBase.js @@ -0,0 +1,54 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' + +// const svgTransform = { property : 'svgTransform', subProperties, defaultValue, Interpolate: {numbers}, functions } + +// Component Functions +export function svgTransformOnStart (tweenProp){ + if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + KUTE[tweenProp] = (l, a, b, v) => { + let x = 0; + let y = 0; + let tmp; + const deg = Math.PI/180; + const scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1; + const rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0; + const sin = Math.sin(rotate*deg); + const cos = Math.cos(rotate*deg); + const skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0; + const skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0; + const complex = rotate||skewX||skewY||scale!==1 || 0; + + // start normalizing the translation, we start from last to first (from last chained translation) + // the normalized translation will handle the transformOrigin tween option and makes sure to have a consistent transformation + x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0; // we start with removing transformOrigin from translation + x *= scale;y *= scale; // we now apply the scale + y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0; // now we apply skews + tmp = cos*x - sin*y; // apply rotation as well + y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x; + x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0; // now we apply the actual translation + 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; // normalizing ends with the addition of the transformOrigin to the translation + + // finally we apply the transform attribute value + 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})` : '' ) ); + } + } +} + +// Component Base +const baseSVGTransform = { + component: 'baseSVGTransform', + property: 'svgTransform', + // subProperties: ['translate','rotate','skewX','skewY','scale'], + // defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1}, + defaultOptions: {transformOrigin:'50% 50%'}, + Interpolate: {numbers}, + functions: {onStart:svgTransformOnStart} +} + +export default baseSVGTransform \ No newline at end of file diff --git a/src/components/textProperties.js b/src/components/textProperties.js index a7c6cdd..bf5f288 100644 --- a/src/components/textProperties.js +++ b/src/components/textProperties.js @@ -1,24 +1,18 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueDimension from '../util/trueDimension.js' import {units} from '../objects/interpolate.js' +import {textPropOnStart} from './textPropertiesBase.js' -// const opacity = { category : 'textProperties', defaultValues: [0,0,0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart:{} } +// const textProperties = { category : 'textProperties', defaultValues: [], interpolators: {units} }, functions = { prepareStart, prepareProperty, onStart:{} } // Component Properties -const textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing'] +const textProps = ['fontSize','lineHeight','letterSpacing','wordSpacing'] const textOnStart = {} -export function textPropOnStart(tweenProp){ - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { - elem.style[tweenProp] = units(a.v,b.v,b.u,v); - } - } -} -textProperties.forEach(tweenProp => { +// Component Functions +textProps.forEach(tweenProp => { textOnStart[tweenProp] = textPropOnStart }) export function getTextProp(prop) { @@ -35,25 +29,17 @@ const textPropFunctions = { onStart: textOnStart } -// Component Base -export const baseTextOps = { - component: 'textProperties', - category: 'textProps', - properties: textProperties, - // defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0}, - Interpolate: {units}, - functions: {onStart:textOnStart} -} - // Component Full -export const textOps = { +const textProperties = { component: 'textProperties', - category: 'textProps', - properties: textProperties, + category: 'textProperties', + properties: textProps, defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0}, Interpolate: {units}, functions: textPropFunctions, Util: {trueDimension} } -Components.TextProperties = textOps +export default textProperties + +Components.TextProperties = textProperties diff --git a/src/components/textPropertiesBase.js b/src/components/textPropertiesBase.js new file mode 100644 index 0000000..4435dd6 --- /dev/null +++ b/src/components/textPropertiesBase.js @@ -0,0 +1,31 @@ +import KUTE from '../objects/kute.js' +import {units} from '../objects/interpolate.js' + +// const opacity = { category : 'textProperties', defaultValues: [], interpolators: {units} }, functions = { prepareStart, prepareProperty, onStart:{} } + +// Component Properties +const textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing'] +const textOnStart = {} + +export function textPropOnStart(tweenProp){ + if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { + KUTE[tweenProp] = (elem,a,b,v) => { + elem.style[tweenProp] = units(a.v,b.v,b.u,v); + } + } +} +textProperties.forEach(tweenProp => { + textOnStart[tweenProp] = textPropOnStart +}) + +// Component Base +const baseTextProperties = { + component: 'baseTextProperties', + category: 'textProps', + // properties: textProperties, + // defaultValues: {fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0}, + Interpolate: {units}, + functions: {onStart:textOnStart} +} + +export default baseTextProperties \ No newline at end of file diff --git a/src/components/textWrite.js b/src/components/textWrite.js index f340c8d..739d4c5 100644 --- a/src/components/textWrite.js +++ b/src/components/textWrite.js @@ -1,9 +1,9 @@ -import KUTE from '../objects/kute.js' import TC from '../interface/tc.js' import {numbers} from '../objects/interpolate.js' -import defaultOptions from '../objects/defaultOptions.js' import Components from '../objects/components.js' +import {onStartWrite,charSet} from './textWriteBase.js' + // Component Util // utility for multi-child targets // wrapContentsSpan returns an [Element] with the SPAN.tagName and a desired class @@ -119,28 +119,11 @@ export function createTextTweens(target,newText,options){ return textTween } -// Component Values -const lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase - upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""), // uppercase - nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols - numeric = String("0123456789").split(""), // numeric - alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric), // alpha numeric - allTypes = alphaNumeric.concat(nonAlpha); // all caracters - -const charSet = { - alpha: lowerCaseAlpha, // lowercase - upper: upperCaseAlpha, // uppercase - symbols: nonAlpha, // symbols - numeric: numeric, - alphanumeric: alphaNumeric, - all: allTypes, -} - // Component Functions -export function getWrite(tweenProp,value){ +function getWrite(tweenProp,value){ return this.element.innerHTML; } -export function prepareText(tweenProp,value) { +function prepareText(tweenProp,value) { if( tweenProp === 'number' ) { return parseFloat(value) } else { @@ -148,45 +131,6 @@ export function prepareText(tweenProp,value) { return value === '' ? ' ' : value } } -export const onStartWrite = { - text: function(tweenProp){ - if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) { - - let chars = this._textChars, - charsets = chars in charSet ? charSet[chars] - : chars && chars.length ? chars - : charSet[defaultOptions.textChars] - - KUTE[tweenProp] = function(elem,a,b,v) { - - let 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]) { // numbers can be 0 - KUTE[tweenProp] = (elem, a, b, v) => { - elem.innerHTML = numbers(a, b, v)>>0; - } - } - } -} // All Component Functions export const textWriteFunctions = { @@ -197,21 +141,8 @@ export const textWriteFunctions = { // const textWrite = { category : 'textWrite', defaultValues: {}, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart } -// Base Component -export const baseTextWriteOps = { - component: 'textWriteProperties', - category: 'textWrite', - properties: ['text','number'], - // defaultValues: {text: ' ',numbers:'0'}, - defaultOptions: { textChars: 'alpha' }, - Interpolate: {numbers}, - functions: {onStart:onStartWrite}, - // export to global for faster execution - Util: { charSet } -} - // Full Component -export const textWriteOps = { +export const textWrite = { component: 'textWriteProperties', category: 'textWrite', properties: ['text','number'], @@ -223,4 +154,6 @@ export const textWriteOps = { Util: { charSet, createTextTweens } } -Components.TextWriteProperties = textWriteOps +export default textWrite + +Components.TextWriteProperties = textWrite diff --git a/src/components/textWriteBase.js b/src/components/textWriteBase.js new file mode 100644 index 0000000..0ef3f4c --- /dev/null +++ b/src/components/textWriteBase.js @@ -0,0 +1,78 @@ +import KUTE from '../objects/kute.js' +import {numbers} from '../objects/interpolate.js' +import defaultOptions from '../objects/defaultOptions.js' + +// Component Values +const lowerCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase + upperCaseAlpha = String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""), // uppercase + nonAlpha = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols + numeric = String("0123456789").split(""), // numeric + alphaNumeric = lowerCaseAlpha.concat(upperCaseAlpha,numeric), // alpha numeric + allTypes = alphaNumeric.concat(nonAlpha); // all caracters + +const charSet = { + alpha: lowerCaseAlpha, // lowercase + upper: upperCaseAlpha, // uppercase + symbols: nonAlpha, // symbols + numeric: numeric, + alphanumeric: alphaNumeric, + all: allTypes, +} + +export {charSet} + +// Component Functions +export const onStartWrite = { + text: function(tweenProp){ + if ( !KUTE[tweenProp] && this.valuesEnd[tweenProp] ) { + + let chars = this._textChars, + charsets = chars in charSet ? charSet[chars] + : chars && chars.length ? chars + : charSet[defaultOptions.textChars] + + KUTE[tweenProp] = function(elem,a,b,v) { + + let 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]) { // numbers can be 0 + KUTE[tweenProp] = (elem, a, b, v) => { + elem.innerHTML = numbers(a, b, v)>>0; + } + } + } +} + +// Base Component +export const baseTextWrite = { + component: 'baseTextWrite', + category: 'textWrite', + // properties: ['text','number'], + // defaultValues: {text: ' ',numbers:'0'}, + defaultOptions: { textChars: 'alpha' }, + Interpolate: {numbers}, + functions: {onStart:onStartWrite}, + // export to global for faster execution + Util: { charSet } +} + +export default baseTextWrite diff --git a/src/components/transformFunctions.js b/src/components/transformFunctions.js index 0d82ed6..bb0ae81 100644 --- a/src/components/transformFunctions.js +++ b/src/components/transformFunctions.js @@ -1,59 +1,16 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getInlineStyle from '../process/getInlineStyle.js' +import {onStartTransform, perspective,translate3d, rotate3d, translate, rotate, scale, skew} from './transformFunctionsBase.js' // const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr -// Component Interpolate functions -export function perspective(a, b, u, v) { - return `perspective(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` -} -export function translate3d(a, b, u, v) { - let translateArray = []; - for (let 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(',')})`; -} -export function rotate3d(a, b, u, v) { - let 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 -} -export function translate(a, b, u, v) { - let 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(',')})`; -} -export function rotate(a, b, u, v) { - return `rotate(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` -} -export function skew(a, b, u, v) { - let 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(',')})`; -} -export function skewX(a, b, u, v) { - return `skewX(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` -} -export function skewY(a, b, u, v) { - return `skewY(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` -} -export function scale (a, b, v) { - return `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`; -} - // Component Functions -export function getTransform(tweenProperty,value){ +function getTransform(tweenProperty,value){ const currentStyle = getInlineStyle(this.element); return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty]; } -export function prepareTransform(prop,obj){ +function prepareTransform(prop,obj){ let prepAxis = ['X', 'Y', 'Z'], // coordinates translateArray = [], rotateArray = [], skewArray = [], transformObject = {}, @@ -84,21 +41,8 @@ export function prepareTransform(prop,obj){ } return transformObject; } -export function onStartTransform(tweenProp){ - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { - elem.style[tweenProp] = - (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0 - + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z] - + (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y] - + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z] - + (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0 - + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y] - + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0 - } - } -} -export function crossCheckTransform(tweenProp){ + +function crossCheckTransform(tweenProp){ if (this.valuesEnd[tweenProp]) { if ( this.valuesEnd[tweenProp] ) { if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){ @@ -109,7 +53,7 @@ export function crossCheckTransform(tweenProp){ } // All Component Functions -export const transformFunctions = { +const transformFunctions = { prepareStart: getTransform, prepareProperty: prepareTransform, onStart: onStartTransform, @@ -132,23 +76,8 @@ const defaultTransformValues = { scale : 1 } -// Base Component -export const baseTransformOps = { - component: 'transformFunctions', - property: 'transform', - subProperties: supportedTransformProperties, - // defaultValues: defaultTransformValues, - functions: {onStart: onStartTransform}, - Interpolate: { - perspective: perspective, - translate3d: translate3d, - rotate3d: rotate3d, - translate: translate, rotate: rotate, scale: scale, skew: skew - }, -} - // Full Component -export const transformOps = { +const transformFunctionsComponent = { component: 'transformFunctions', property: 'transform', subProperties: supportedTransformProperties, @@ -159,7 +88,9 @@ export const transformOps = { translate3d: translate3d, rotate3d: rotate3d, translate: translate, rotate: rotate, scale: scale, skew: skew - }, + } } -Components.TransformFunctions = transformOps +export default transformFunctionsComponent + +Components.TransformFunctions = transformFunctionsComponent diff --git a/src/components/transformFunctionsBase.js b/src/components/transformFunctionsBase.js new file mode 100644 index 0000000..256e935 --- /dev/null +++ b/src/components/transformFunctionsBase.js @@ -0,0 +1,77 @@ +import KUTE from '../objects/kute.js' + +// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr + +// Component Interpolate functions +export function perspective(a, b, u, v) { + return `perspective(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` +} +export function translate3d(a, b, u, v) { + let translateArray = []; + for (let 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(',')})`; +} +export function rotate3d(a, b, u, v) { + let 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 +} +export function translate(a, b, u, v) { + let 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(',')})`; +} +export function rotate(a, b, u, v) { + return `rotate(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` +} +export function skew(a, b, u, v) { + let 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(',')})`; +} +export function skewX(a, b, u, v) { + return `skewX(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` +} +export function skewY(a, b, u, v) { + return `skewY(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` +} +export function scale (a, b, v) { + return `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`; +} + +// Component Functions +export function onStartTransform(tweenProp){ + if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + KUTE[tweenProp] = (elem, a, b, v) => { + elem.style[tweenProp] = + (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0 + + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z] + + (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y] + + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z] + + (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0 + + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y] + + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0 + } + } +} + +// Base Component +const BaseTransform = { + component: 'baseTransform', + property: 'transform', + functions: {onStart: onStartTransform}, + Interpolate: { + perspective: perspective, + translate3d: translate3d, + rotate3d: rotate3d, + translate: translate, rotate: rotate, scale: scale, skew: skew + } +} + +export default BaseTransform \ No newline at end of file diff --git a/src/components/transformMatrix.js b/src/components/transformMatrix.js index 5b0f284..f082210 100644 --- a/src/components/transformMatrix.js +++ b/src/components/transformMatrix.js @@ -1,26 +1,19 @@ -import KUTE from '../objects/kute.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import {numbers,arrays} from '../objects/interpolate.js' +import {onStartTransform} from './transformMatrixBase.js' // const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } // Component name -const componentName = 'transformMatrix' - -// Component special -export const CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix - : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix - : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix - : typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix - : null +const matrixComponent = 'transformMatrix' // Component Functions -export function getTransform(tweenProp, value){ +function getTransform(tweenProp, value){ let transformObject = {} - if (this.element[componentName]) { - const currentValue = this.element[componentName] + if (this.element[matrixComponent]) { + const currentValue = this.element[matrixComponent] for (const vS in currentValue) { transformObject[vS] = currentValue[vS] } @@ -31,7 +24,7 @@ export function getTransform(tweenProp, value){ } return transformObject } -export function prepareTransform(tweenProp,value){ +function prepareTransform(tweenProp,value){ if ( typeof(value) === 'object' && !value.length) { let transformObject = {}, translate3dObj = {}, @@ -76,53 +69,16 @@ export function prepareTransform(tweenProp,value){ console.error(`KUTE.js - "${value}" is not valid/supported transform function`) } } -export const onStartTransform = { - transform : function(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - - KUTE[tweenProp] = (elem, a, b, v) => { - - let matrix = new CSS3Matrix() - let transformObject = {} - for ( const p in b ) { - transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v) - } - - // set perspective - transformObject.perspective && (matrix.m34 = -1/transformObject.perspective) - // set translate - matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix - // set rotation - matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix - // set skew - if (transformObject.skew) { - matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix; - matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix; - } - // set scale - matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix - - // set element style - elem.style[tweenProp] = matrix.toString(); - } - } - }, - CSS3Matrix: function(prop) { - if (this.valuesEnd.transform){ - !KUTE[prop] && (KUTE[prop] = CSS3Matrix) - } - }, -} -export function onCompleteTransform(tweenProp){ +function onCompleteTransform(tweenProp){ if (this.valuesEnd[tweenProp]) { - this.element[componentName] = {} + this.element[matrixComponent] = {} for (const tf in this.valuesEnd[tweenProp]){ - this.element[componentName][tf] = this.valuesEnd[tweenProp][tf] + this.element[matrixComponent][tf] = this.valuesEnd[tweenProp][tf] } } } -export function crossCheckTransform(tweenProp){ +function crossCheckTransform(tweenProp){ if (this.valuesEnd[tweenProp]) { if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){ this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective @@ -131,7 +87,7 @@ export function crossCheckTransform(tweenProp){ } // All Component Functions -export const matrixFunctions = { +const matrixFunctions = { prepareStart: getTransform, prepareProperty: prepareTransform, onStart: onStartTransform, @@ -139,25 +95,9 @@ export const matrixFunctions = { crossCheck: crossCheckTransform } -// Component Base Object -export const baseMatrixTransformOps = { - component: componentName, - property: 'transform', - // subProperties: ['perspective','translate3d','translateX','translateY','translateZ','rotate3d','rotateX','rotateY','rotateZ','skew','skewX','skewY','scale3d','scaleX','scaleY','scaleZ'], - // 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: {onStart: onStartTransform}, - Interpolate: { - perspective: numbers, - translate3d: arrays, - rotate3d: arrays, - skew: arrays, - scale3d: arrays - } -} - // Component Full Object -export const matrixTransformOps = { - component: componentName, +const matrixTransform = { + component: matrixComponent, property: 'transform', // subProperties: ['perspective','translate3d','translateX','translateY','translateZ','rotate3d','rotateX','rotateY','rotateZ','skew','skewX','skewY','scale3d','scaleX','scaleY','scaleZ'], 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}, @@ -171,4 +111,6 @@ export const matrixTransformOps = { } } -Components.TransformMatrix = matrixTransformOps +export default matrixTransform + +Components.TransformMatrix = matrixTransform diff --git a/src/components/transformMatrixBase.js b/src/components/transformMatrixBase.js new file mode 100644 index 0000000..f22a715 --- /dev/null +++ b/src/components/transformMatrixBase.js @@ -0,0 +1,61 @@ +import KUTE from '../objects/kute.js' +import {numbers,arrays} from '../objects/interpolate.js' + +// const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } + +// Component name +const matrixComponent = 'transformMatrix' + +// Component special +const CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix + : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix + : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix + : typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix + : null + +// Component Functions +export const onStartTransform = { + transform : function(tweenProp) { + if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { + + KUTE[tweenProp] = (elem, a, b, v) => { + let matrix = new CSS3Matrix(), transformObject = {} + + for ( const 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)// set perspective + matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix // set translate + matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix // set rotation + if (transformObject.skew) { // set 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 // set scale + elem.style[tweenProp] = matrix.toString() // set element style + } + } + }, + CSS3Matrix: function(prop) { + if (this.valuesEnd.transform){ + !KUTE[prop] && (KUTE[prop] = CSS3Matrix) + } + }, +} + +// Component Base Object +export const baseMatrixTransform = { + component: matrixComponent, + property: 'transform', + functions: {onStart: onStartTransform}, + Interpolate: { + perspective: numbers, + translate3d: arrays, + rotate3d: arrays, + skew: arrays, + scale3d: arrays + } +} + +export default baseMatrixTransform \ No newline at end of file diff --git a/src/core/Render.js b/src/core/Render.js index 525c19f..0b4013a 100644 --- a/src/core/Render.js +++ b/src/core/Render.js @@ -1,7 +1,6 @@ import KUTE from '../objects/kute.js' import Tweens from '../objects/tweens.js' import globalObject from '../objects/globalObject.js' - import Interpolate from '../objects/interpolate.js' import onStart from '../objects/onStart.js' diff --git a/src/index-base.js b/src/index-base.js index ca8713d..bdc2d89 100644 --- a/src/index-base.js +++ b/src/index-base.js @@ -14,25 +14,26 @@ import TweenBase from './tween/tweenBase.js' // Interface only fromTo import fromTo from './interface/fromTo.js' -import {baseTransformOps} from './components/transformFunctions.js' -import {baseBoxModelOps} from './components/boxModelBase.js' -import {baseOpacityOps} from './components/opacityProperty.js' -// import {baseCrossBrowserMoveOps} from './components/crossBrowserMove.js' +// import baseTransform from './components/transformFunctionsBase.js' +import baseTransformMatrix from './components/transformMatrixBase.js' +import baseBoxModel from './components/boxModelBase.js' +import baseOpacity from './components/opacityPropertyBase.js' +// import {baseCrossBrowserMove} from './components/crossBrowserMove.js' -const BaseTransform = new Animation(baseTransformOps) -const BaseBoxModel = new Animation(baseBoxModelOps) -const BaseOpacity = new Animation(baseOpacityOps) -// const BaseCrossBrowserMove = new Animation(baseCrossBrowserMoveOps) +// const Transform = new Animation(baseTransform) +const Transform = new Animation(baseTransformMatrix) +const BoxModel = new Animation(baseBoxModel) +const Opacity = new Animation(baseOpacity) +// const Move = new Animation(baseCrossBrowserMove) // support for kute-base.js ends here export default { Animation, Components: { - BaseTransform, - BaseBoxModel, - BaseScroll, - BaseOpacity, - // BaseCrossBrowserMove + Transform, + BoxModel, + Opacity, + // Move }, TweenBase, diff --git a/src/index-extra.js b/src/index-extra.js index 83ad075..9f3a0f0 100644 --- a/src/index-extra.js +++ b/src/index-extra.js @@ -23,22 +23,22 @@ import allFromTo from './interface/allFromTo.js' import Animation from './animation/animationDevelopment.js' // components -import {bgPosOps} from './components/backgroundPosition.js' -import {radiusOps} from './components/borderRadius.js' -import {boxModelOps} from './components/boxModel.js' -import {clipOps} from './components/clipProperty.js' -import {colorsOps} from './components/colorProperties.js' -import {attrOps} from './components/htmlAttributes.js' -import {filterOps} from './components/filterEffects' -import {opacityOps} from './components/opacityProperty.js' -import {svgDrawOps} from './components/svgDraw.js' -import {svgCubicMorphOps} from './components/svgCubicMorph.js' -import {svgTransformOps} from './components/svgTransform.js' -import {scrollOps} from './components/scrollProperty.js' -import {shadowOps} from './components/shadowProperties.js' -import {textOps} from './components/textProperties.js' -import {textWriteOps} from './components/textWrite.js' -import {matrixTransformOps} from './components/transformMatrix.js' +import BackgroundPosition from './components/backgroundPosition.js' +import BorderRadius from './components/borderRadius.js' +import BoxModel from './components/boxModel.js' +import ClipProperty from './components/clipProperty.js' +import ColorProperties from './components/colorProperties.js' +import HTMLAttributes from './components/htmlAttributes.js' +import FilterEffects from './components/filterEffects' +import OpacityProperty from './components/opacityProperty.js' +import SVGDraw from './components/svgDraw.js' +import SVGCubicMorph from './components/svgCubicMorph.js' +import SVGTransform from './components/svgTransform.js' +import ScrollProperty from './components/scrollProperty.js' +import ShadowProperties from './components/shadowProperties.js' +import TextProperties from './components/textProperties.js' +import TextWriteProperties from './components/textWrite.js' +import matrixTransform from './components/transformMatrix.js' for (let component in Components) { let compOps = Components[component] diff --git a/src/index.js b/src/index.js index f71a229..1eea790 100644 --- a/src/index.js +++ b/src/index.js @@ -23,14 +23,14 @@ import allFromTo from './interface/allFromTo.js' import Animation from './animation/animation.js' // components -import {essentialBoxModelOps} from './components/boxModelEssential.js' -import {colorsOps} from './components/colorProperties.js' -import {attrOps} from './components/htmlAttributes.js' -import {opacityOps} from './components/opacityProperty.js' -import {textWriteOps} from './components/textWrite.js' -import {transformOps} from './components/transformFunctions.js' -import {svgDrawOps} from './components/svgDraw.js' -import {svgMorphOps} from './components/svgMorph.js' +import EssentialBoxModel from './components/boxModelEssential.js' +import ColorsProperties from './components/colorProperties.js' +import HTMLAttributes from './components/htmlAttributes.js' +import OpacityProperty from './components/opacityProperty.js' +import TextWrite from './components/textWrite.js' +import TransformFunctions from './components/transformFunctions.js' +import SVGDraw from './components/svgDraw.js' +import SVGMorph from './components/svgMorph.js' // init components for (let component in Components) { diff --git a/src/objects/ObjectsBase.js b/src/objects/ObjectsBase.js index aa8e032..76059fc 100644 --- a/src/objects/ObjectsBase.js +++ b/src/objects/ObjectsBase.js @@ -2,12 +2,10 @@ import defaultOptions from './defaultOptions.js' import linkProperty from './linkProperty.js' import onStart from './onStart.js' import onComplete from './onComplete.js' -import supportedProperties from './supportedProperties.js' export default { defaultOptions, linkProperty, onStart, onComplete, - supportedProperties } \ No newline at end of file diff --git a/src/tween/tween.js b/src/tween/tween.js index b7f627f..c0d6510 100644 --- a/src/tween/tween.js +++ b/src/tween/tween.js @@ -1,7 +1,6 @@ import KUTE from '../objects/kute.js' import TweenConstructor from '../objects/tweenConstructor.js' - import TweenBase from './tweenBase.js' import add from '../core/add.js' import remove from '../core/remove.js' @@ -162,14 +161,6 @@ export default class Tween extends TweenBase { } // } } - chain(args) { - this._chain = [] - this._chain = args.length ? args : this._chain.concat(args); - return this; - } - stopChainedTweens() { - this._chain && this._chain.length && this._chain.map(tw=>tw.stop()) - } update(time) { time = time !== undefined ? time : KUTE.Time(); @@ -216,7 +207,7 @@ export default class Tween extends TweenBase { this.playing = false; //stop ticking when finished - this.close(); + this.close(); // start animating chained tweens if (this._chain !== undefined && this._chain.length){ diff --git a/src/tween/tweenBase.js b/src/tween/tweenBase.js index 901e0f4..c73f1ad 100644 --- a/src/tween/tweenBase.js +++ b/src/tween/tweenBase.js @@ -78,7 +78,7 @@ export default class TweenBase { // fire onStart actions for (const obj in onStart) { if (typeof (onStart[obj]) === 'function') { - onStart[obj].call(this,obj) + onStart[obj].call(this,obj) // easing functions } else { for (const prop in onStart[obj]) { onStart[obj][prop].call(this,prop); @@ -117,6 +117,14 @@ export default class TweenBase { this._startFired = false; stop.call(this); } + chain(args) { + this._chain = [] + this._chain = args.length ? args : this._chain.concat(args); + return this; + } + stopChainedTweens() { + this._chain && this._chain.length && this._chain.map(tw=>tw.stop()) + } update(time) { time = time !== undefined ? time : KUTE.Time(); @@ -152,6 +160,11 @@ export default class TweenBase { //stop ticking when finished this.close(); + // start animating chained tweens + if (this._chain !== undefined && this._chain.length){ + this._chain.map(tw=>tw.start()) + } + return false; } diff --git a/src/tween/tweenExtra.js b/src/tween/tweenExtra.js index 43da8bd..f388072 100644 --- a/src/tween/tweenExtra.js +++ b/src/tween/tweenExtra.js @@ -30,7 +30,7 @@ export default class TweenExtra extends Tween { // to do } // set callbacks - callback(name,fn){ + on(name,fn){ if ( ['start','stop','update','complete','pause','resume'].indexOf(name) >-1 ) { this[`_on${name.charAt(0).toUpperCase() + name.slice(1)}`] = fn } diff --git a/src/util/selector.js b/src/util/selector.js index ed4945c..9e64eb8 100644 --- a/src/util/selector.js +++ b/src/util/selector.js @@ -5,7 +5,7 @@ export default function selector(el, multi) { if (multi){ requestedElem = el instanceof HTMLCollection || el instanceof NodeList - || el instanceof Array && el[0] instanceof Element + || el instanceof Array && el.every(x => x instanceof Element) ? el : document.querySelectorAll(el); } else { requestedElem = el instanceof Element From 4d5c37e958cf71e80ae0a785045b9d2fa0d96d07 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 16 Jun 2020 15:17:53 +0000 Subject: [PATCH 386/471] --- README.md | 29 +++++++++++++++++++++++++++-- demo/index.html | 5 +---- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e77fe55..7b24ee5 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,36 @@ A modern JavaScript animation engine built on ES6/ES7 standards with most essent KUTE.js packs a series of components for presentation attributes, SVG transform, draw SVG strokes and path morphing, text string write up or number countdowns, plus additional CSS properties like colors, border-radius or typographic properties. -# Demo For components documentation, examples and other cool tips, check the [demo](http://thednp.github.io/kute.js/). + +# Components +KUTE.js includes 18 components, but not all of them are bundled with the default distribution package: + +* [backgroundPosition](http://thednp.github.io/kute.js/backgroundPosition.html) - enables the animation for the `backgroundPosition` CSS property +* [borderRadius](http://thednp.github.io/kute.js/borderRadius.html) - enables the animation for all the **borderRadius** properties +* [boxModel](http://thednp.github.io/kute.js/boxModel.html) - enables the animation for the **boxModel** properties like `top` , `left`, `width`, etc +* [clipProperty](http://thednp.github.io/kute.js/clipProperty.html) - enables the animation for the `clip` property +* [colorProperties](http://thednp.github.io/kute.js/colorProperties.html) - enables the animation for the **color** properties like `color`, `backgroundColor` +* [filterEffects](http://thednp.github.io/kute.js/filterEffects.html) - enables the animation for the `filter` property +* [htmlAttributes](http://thednp.github.io/kute.js/htmlAttributes.html) - enables the animation for any numeric as well as some color based **HTML Attributes** +* [opacityProperty](http://thednp.github.io/kute.js/opacityProperty.html) - enables the animation for the `opacity` property +* [scrollProperty](http://thednp.github.io/kute.js/scrollProperty.html) - enables the animation for the window/Element `scrollTop` Object property +* [shadowProperties](http://thednp.github.io/kute.js/shadowProperties.html) - enables the animation for the **shadowProperties** properties: `textShadow` & `boxShadow` +* [svgCubicMorph](http://thednp.github.io/kute.js/svgCubicMorph.html) - enables the animation for the `d` Presentation Attribute of the `` SVGElement targets; this implements some [Raphael.js](https://dmitrybaranovskiy.github.io/raphael/) functionality +* [svgMorph](http://thednp.github.io/kute.js/svgMorph.html) - enables the animation for the `d` Presentation Attribute of the `` SVGElement targets; this component implements some [D3.js](https://github.com/d3/d3) and [flubber](https://github.com/veltman/flubber) functionality +* [svgDraw](http://thednp.github.io/kute.js/svgDraw.html) - enables the animation for the `strokeDasharray` and `strokeDashoffset` CSS properties specific to `` SVGElement +* [svgTransform](http://thednp.github.io/kute.js/svgTransform.html) - enables the animation for the `transform` presentation attribute +* [textProperties](http://thednp.github.io/kute.js/textProperties.html) - enables the animation for numeric `HTMLTextElement` related CSS properties like `fontSize` or `letterSpacing` +* [textWrite](http://thednp.github.io/kute.js/textWrite.html) - enables the animation for the content of various strings +* [transformFunctions](http://thednp.github.io/kute.js/transformFunctions.html) - enables the animation for the `transform` CSS3 property, the default component bundled with the official build +* [transformMatrix](http://thednp.github.io/kute.js/transformMatrix.html) - enables the animation for the `transform` CSS3 property; this component implements `DOMMatrix()` API and is super light + +All above mentioned components have a BASE version which doesn't include value processing, and their purpose is to provide a way to ship your super light version of your application. + + # Wiki -For a complete developer guide, usage and stuff like npm, visit the [wiki](https://github.com/thednp/kute.js/wiki). +For a complete developer guide, usage and stuff like npm, visit [the wiki](https://github.com/thednp/kute.js/wiki). # Browser Support KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy browsers might some help, so give them a small polyfill set with most essential features required by KUTE.js to work, powered by [minifill](https://github.com/thednp/minifill), try it. For broader projects you might want to consider polyfills. diff --git a/demo/index.html b/demo/index.html index db78484..2571666 100644 --- a/demo/index.html +++ b/demo/index.html @@ -216,14 +216,11 @@ - - - - + From 784e09296088d4eedce5c0bc3a1277d9c88b0c32 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 16 Jun 2020 15:18:29 +0000 Subject: [PATCH 387/471] --- 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 388/471] --- 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 5603a3bc8edbdc4e4881520acd283eea8ac61874 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 16 Jun 2020 15:22:17 +0000 Subject: [PATCH 389/471] --- demo/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/index.html b/demo/index.html index 2571666..125e949 100644 --- a/demo/index.html +++ b/demo/index.html @@ -220,7 +220,7 @@ - + From be367debe0a56469d8ec42799cc23f118e3cdd20 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 18 Jun 2020 08:25:35 +0000 Subject: [PATCH 390/471] Changes: * updated `shorter-js` * improved scrollProperty for lighter size --- demo/src/kute-base.js | 7 ++-- demo/src/kute-base.min.js | 4 +-- demo/src/kute-extra.js | 51 +++++++--------------------- demo/src/kute-extra.min.js | 4 +-- demo/src/kute.min.js | 4 +-- dist/kute.esm.js | 16 ++------- dist/kute.esm.min.js | 4 +-- dist/kute.js | 16 ++------- dist/kute.min.js | 4 +-- package.json | 4 +-- src/components/boxModelBase.js | 8 ++--- src/components/boxModelEssential.js | 2 +- src/components/scrollProperty.js | 6 ++-- src/components/scrollPropertyBase.js | 20 ++++++----- src/components/textWrite.js | 2 +- src/easing/easing-base.js | 2 +- src/easing/easing.js | 4 +-- src/interface/fromTo.js | 2 +- src/interface/{TC.js => tcLink.js} | 0 src/interface/to.js | 2 +- src/tween/tweenCollection.js | 2 +- 21 files changed, 61 insertions(+), 103 deletions(-) rename src/interface/{TC.js => tcLink.js} (100%) diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js index 51535fc..c9e8c5f 100644 --- a/demo/src/kute-base.js +++ b/demo/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.51 (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.51"; var KUTE = {}; @@ -141,7 +141,7 @@ 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 @@ -444,6 +444,7 @@ var baseBoxModel = { component: 'baseBoxModel', category: 'boxModel', + properties: baseBoxProps, Interpolate: {numbers: numbers}, functions: {onStart: baseBoxOnStart} }; diff --git a/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index f1b1b6b..ae88e1a 100644 --- a/demo/src/kute-base.min.js +++ b/demo/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.51 | 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"],A={};q.map((function(t){return A[t]=U}));var B={component:"baseBoxModel",category:"boxModel",properties:q,Interpolate:{numbers:i},functions:{onStart:A}};var F={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})}}},j=new E(x),K=new E(B),Q=new E(F);return{Animation:E,Components:{Transform:j,BoxModel:K,Opacity:Q},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.51"}})); diff --git a/demo/src/kute-extra.js b/demo/src/kute-extra.js index af1177a..4c5eb7c 100644 --- a/demo/src/kute-extra.js +++ b/demo/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.51 (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.51"; var KUTE = {}; @@ -1047,16 +1047,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', @@ -2296,25 +2286,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 +2294,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 +2315,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 +2331,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 +2367,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; diff --git a/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index 6dccc28..67464da 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/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>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","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],nt={};et.map((function(t){return nt[t]=0}));var rt={};et.map((function(t){return rt[t]=tt}));var it={component:"boxModelProperties",category:"boxModel",properties:et,defaultValues:nt,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+")"}function ut(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=lt(n,r,i)})}T.ClipProperty=st;var pt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ct={};pt.forEach((function(t){ct[t]="#000"}));var ht={};pt.map((function(t){return ht[t]=ut}));var ft={component:"colorProperties",category:"colors",properties:pt,defaultValues:ct,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={},vt=["fill","stroke","stop-color"];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]=vt.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(vt.includes(a))o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in dt)&&(dt[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 dt)&&(dt[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 dt)&&(dt[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]=dt)}}},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};function Ct(t,e){return parseFloat(t)/100*e}function kt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(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,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Ut,percent:Ct}};function Vt(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}T.SVGDraw=jt;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 Dt(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=[],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 Wt(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 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===i?n.original:Vt(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=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}}}},ne={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:r,toPathString:Vt},functions:ee,Util:{l2c:qt,q2c:Bt,a2c:Xt,catmullRom2bezier:Rt,ellipsePath:Ht,path2curve:Wt,pathToAbsolute:Dt,toPathString:Vt,parsePathString:Nt,getRotatedCurve:te,getRotations:Jt,getRotationSegments:Zt,reverseCurve:$t,getSegments:Gt,createPath:Kt}};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}};T.SVGTransformProperty=oe;var le=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}(),ue="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],pe="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ce=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,he=!!le&&{passive:!1};function fe(t){this.scrolling&&t.preventDefault()}function de(){var t=this.element;return t===ce?{el:document,st:document.body}:{el:t,st:t}}function ve(t,e){e[t](ue[0],fe,he),e[t](pe,fe,he)}function ge(){var t=de.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,ve("addEventListener",t.el),t.st.style.pointerEvents="none")}function me(){var t=de.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ve("removeEventListener",t.el),t.st.style.pointerEvents="")}var ye={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ce,this.element===ce?window.pageYOffset||ce.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:ce,ge.call(this),t[e]=function(t,e,n,i){t.scrollTop=r(e,n,i)>>0})},onComplete:function(t){me.call(this)}},be={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:r},functions:ye,Util:{preventScroll:fe,scrollIn:ge,scrollOut:me,getScrollTargets:de,toggleScrollEvents:ve,supportPassive:le}};function we(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(" ")})}T.ScrollProperty=be;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}))}var Me={};xe.map((function(t){return Me[t]=we}));var Te={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:Me},Util:{processShadowArray:Se,trueColor:ot}};function Ee(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=Te;var _e=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ce={};_e.forEach((function(t){Ce[t]=Ee}));var ke={component:"textProperties",category:"textProperties",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}};T.TextProperties=ke;var Ie=String("abcdefghijklmnopqrstuvwxyz").split(""),Pe=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Oe=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Ae=String("0123456789").split(""),Le=Ie.concat(Pe,Ae),Ue=Le.concat(Oe),Fe={alpha:Ie,upper:Pe,symbols:Oe,numeric:Ae,alphanumeric:Le,all:Ue},je={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Fe?Fe[n]:n&&n.length?n:Fe[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 Ve(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 Re(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 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.51 | 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 R=["top","left","width","height"],X={};R.map((function(t){return X[t]=Q}));var B={component:"essentialBoxModel",category:"boxModel",properties:R,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 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 q(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 Y(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=q(n,r,i)})}x.BoxModelEssential=B;var Z=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};Z.forEach((function(t){$[t]="#000"}));var W={};Z.map((function(t){return W[t]=Y}));var G={component:"colorProperties",category:"colors",properties:Z,defaultValues:$,Interpolate:{numbers:r,colors:q},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return K(e)},onStart:W},Util:{trueColor:K}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var n={};for(var r in e){var i=et(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=tt.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=et(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 J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,q(n,r,i))})},n[s]=K(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 J)&&(J[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 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)}}},rt={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:q},functions:nt,Util:{replaceUppercase:et,trueColor:K,trueDimension:z}};x.HTMLAttributes=rt;var it={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})}},at={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:it};x.OpacityProperty=at;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),ct=st.concat(ot,lt),pt=ct.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:ct,all:pt},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ht?ht[n]:n&&n.length?n:ht[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 dt(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 vt(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 yt(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 bt(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 _t(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}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(",")+")"}function Tt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}x.TextWriteProperties=gt;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=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?mt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?yt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?wt(n.translate,r.translate,"px",i):"")+(n.rotate3d?bt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?_t(n.rotate,r.rotate,"deg",i):"")+(n.skew?xt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?Tt(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:mt,translate3d:yt,rotate3d:bt,translate:wt,rotate:_t,scale:Tt,skew:xt}};function Et(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(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:Pt,Util:{getRectLength:Ct,getPolyLength:It,getLineLength:At,getCircleLength:Mt,getEllipseLength:kt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Lt,percent:Et}};function Ut(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=jt;var Ft="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Ht(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Dt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Vt(t,e){return Ht(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},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 Bt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function qt(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(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 Jt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Bt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=zt[t.path[t.index].toLowerCase()],t.index++,Zt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Wt(t):$t(t),t.err.length)return;t.data.push(t.param),Zt(t),r=!1,t.index=t.max)break;if(!qt(t.path.charCodeAt(t.index)))break}}Gt(t)}else Gt(t);else t.err="KUTE.js - "+Ft}function te(t){var e=new Yt(t),n=e.max;for(Zt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Dt(r,i,.5),t.splice(n+1,0,i)}function he(t,e){var n,r;if("string"==typeof t){var i=re(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ft);if(!fe(n=t.slice(0)))throw new TypeError(Ft);return n.length>1&&Vt(n[0],n[n.length-1])&&n.pop(),le(n)>0&&n.reverse(),!r&&e&&Nt(e)&&e>0&&pe(n,e),n}function fe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Nt(t[0])&&Nt(t[1])}))}function de(t,e,n){var r=he(t,n=n||d.morphPrecision),i=he(e,n),a=r.length-i.length;return ce(r,a<0?-1*a:0),ce(i,a>0?a:0),oe(r,i),[r,i]}ee.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},ee.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 ve={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"+Ut(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=de(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]}}}},ge={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ut,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ve,Util:{INVALID_INPUT:Ft,isFiniteNumber:Nt,distance:Ht,pointAlong:Dt,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Qt,isSpace:Rt,isCommand:Xt,isArc:Bt,isDigit:Kt,isDigitStart:qt,State:Yt,skipSpaces:Zt,scanFlag:$t,scanParam:Wt,finalizeSegment:Gt,scanSegment:Jt,pathParse:te,SvgPath:ee,split:ne,pathStringToRing:re,exactRing:ie,approximateRing:ae,measure:se,rotateRing:oe,polygonLength:ue,polygonArea:le,addPoints:ce,bisect:pe,normalizeRing:he,validRing:fe,getInterpolationPoints:de}};for(var me in x.SVGMorph=ge,x){var ye=x[me];x[me]=new V(ye)}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.51"}})); diff --git a/dist/kute.esm.js b/dist/kute.esm.js index 8c6bd8f..0f4b1e9 100644 --- a/dist/kute.esm.js +++ b/dist/kute.esm.js @@ -1,9 +1,9 @@ /*! -* KUTE.js Standard v2.0.3 (http://thednp.github.io/kute.js) +* KUTE.js Standard v2.0.51 (http://thednp.github.io/kute.js) * Copyright 2015-2020 © thednp * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE) */ -var version = "2.0.3"; +var version = "2.0.51"; var KUTE = {}; @@ -801,16 +801,6 @@ function boxModelOnStart(tweenProp){ }; } } -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; function getBoxModel(tweenProp){ return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp]; @@ -831,7 +821,7 @@ var essentialBoxModelFunctions = { var essentialBoxModel = { component: 'essentialBoxModel', category: 'boxModel', - properties: ['top','left','width','height'], + properties: essentialBoxProps, defaultValues: essentialBoxPropsValues, Interpolate: {numbers: numbers}, functions: essentialBoxModelFunctions, diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js index 8b18018..db486a4 100644 --- a/dist/kute.esm.min.js +++ b/dist/kute.esm.min.js @@ -1,2 +1,2 @@ -// KUTE.js Standard v2.0.3 | thednp © 2020 | MIT-License -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.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,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};F.prototype.start=function(e){if(T(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},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 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(),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 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,T(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.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}(F);U.Tween=N;var H=U.Tween,D=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 H(t,e,r,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 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"})}V.prototype.setComponent=function(t){var e=t.component,r={prepareProperty:v,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},n=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||n)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)d[l]=t.defaultOptions[l];if(t.functions)for(var c in r)if(c in t.functions)if("function"==typeof t.functions[c])!r[c][e]&&(r[c][e]={}),!r[c][e][n||s]&&(r[c][e][n||s]=t.functions[c]);else for(var p in t.functions[c])!r[c][e]&&(r[c][e]={}),!r[c][e][p]&&(r[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:n},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: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},Util:{trueDimension:z}};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 Y(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+")"}function Z(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,r,n,i){t.style[e]=Y(r,n,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:n,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 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]=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 s=rt(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,r,n,i){t.setAttribute(e,Y(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,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,r,i,a){var s=e.replace(c,"");t.setAttribute(s,(1e3*n(r.v,i.v,a)>>0)/1e3+i.u)})},r[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,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]=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:n,colors:Y},functions:nt,Util:{replaceUppercase:rt,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,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};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 r=this._textChars,n=r in ft?ft[r]:r&&r.length?r:ft[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})}};function vt(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 gt(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,c=void 0;s>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 xt(t,e,r,n){return"rotate("+(1e3*(t+(e-t)*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","skew("+i.join(",")+")"}function St(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>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 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 c=u.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[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?xt(r.rotate,n.rotate,"deg",i):"")+(r.skew?Tt(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: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(" "),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,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Pt,percent:Ct}};function Ft(t,e,r,n){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,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}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(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++,$t(t),t.data=[],i){for(n=!1;;){for(a=i;a>0;a--){if(!r||3!==a&&4!==a?Gt(t):Wt(t),t.err.length)return;t.data.push(t.param),$t(t),n=!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),r=e.max;for($t(e);e.index0&&(s=Math.max(s,Math.ceil(r/e)));for(var o=0;oe;)i=Vt(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(Nt);if(!de(r=t.slice(0)))throw new TypeError(Nt);return r.length>1&&zt(r[0],r[r.length-1])&&r.pop(),ce(r)>0&&r.reverse(),!n&&e&&Ht(e)&&e>0&&he(r,e),r}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,r){var n=fe(t,r=r||d.morphPrecision),i=fe(e,r),a=n.length-i.length;return pe(n,a<0?-1*a:0),pe(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 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=[],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"+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):d.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: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:re,split:ne,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)}var we={Animation:V,Components:x,Tween:N,fromTo:function(t,e,r,n){return n=n||{},new H(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new H(j(t),e,e,r)},TweenCollection:D,allFromTo:function(t,e,r,n){return n=n||{},new D(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new D(j(t,!0),e,e,r)},Objects:w,Util:_,Easing:P,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.3"};export default we; +// KUTE.js Standard v2.0.51 | thednp © 2020 | MIT-License +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.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,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||v.duration,this._delay=i.delay||v.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 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},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 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(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},U.Tween=F,v.repeat=0,v.repeatDelay=0,v.yoyo=!1,v.resetStart=!1;var N=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||v.repeat,this._repeatDelay=o.repeatDelay||v.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||v.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,T(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.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}(F);U.Tween=N;var H=U.Tween,D=function(t,e,r,n){var i=this;this.tweens=[],!("offset"in v)&&(v.offset=0),(n=n||{}).delay=n.delay||v.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=n||{},a[s].delay=s>0?n.delay+(n.offset||v.offset):n.delay,t instanceof Element?i.tweens.push(new H(t,e,r,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 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"})}V.prototype.setComponent=function(t){var e=t.component,r={prepareProperty:d,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},n=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||n)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)v[l]=t.defaultOptions[l];if(t.functions)for(var c in r)if(c in t.functions)if("function"==typeof t.functions[c])!r[c][e]&&(r[c][e]={}),!r[c][e][n||s]&&(r[c][e][n||s]=t.functions[c]);else for(var p in t.functions[c])!r[c][e]&&(r[c][e]={}),!r[c][e][p]&&(r[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 R=["top","left","width","height"],X={};R.map((function(t){return X[t]=Q}));var B={component:"essentialBoxModel",category:"boxModel",properties:R,defaultValues:{top:0,left:0,width:0,height:0},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},Util:{trueDimension:z}};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 q(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+")"}function Y(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,r,n,i){t.style[e]=q(r,n,i)})}x.BoxModelEssential=B;var Z=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};Z.forEach((function(t){$[t]="#000"}));var W={};Z.map((function(t){return W[t]=Y}));var G={component:"colorProperties",category:"colors",properties:Z,defaultValues:$,Interpolate:{numbers:n,colors:q},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return K(e)},onStart:W},Util:{trueColor:K}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var rt={prepareStart:function(t,e){var r={};for(var n in e){var i=et(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=et(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 J)&&(J[e]=function(t,e,r,n,i){t.setAttribute(e,q(r,n,i))})},r[s]=K(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 J)&&(J[e]=function(t,e,r,i,a){var s=e.replace(c,"");t.setAttribute(s,(1e3*n(r.v,i.v,a)>>0)/1e3+i.u)})},r[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 J)&&(J[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]=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:n,colors:q},functions:rt,Util:{replaceUppercase:et,trueColor:K,trueDimension:z}};x.HTMLAttributes=nt;var it={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})}},at={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:n},functions:it};x.OpacityProperty=at;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),ct=st.concat(ot,lt),pt=ct.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:ct,all:pt},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var r=this._textChars,n=r in ht?ht[r]:r&&r.length?r:ht[v.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})}};function vt(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 dt(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,c=void 0;s>0)/1e3+r+")"}function yt(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 wt(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 _t(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 Tt(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}x.TextWriteProperties=gt;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 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 c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var v=r[f];h[f]=""+c+v in e?parseInt(e[""+c+v]):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,r,n,i){t.style[e]=(r.perspective||n.perspective?mt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?yt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?wt(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?_t(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?Tt(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:mt,translate3d:yt,rotate3d:bt,translate:wt,rotate:_t,scale:Tt,skew:xt}};function Et(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(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"})}},jt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:n},functions:Pt,Util:{getRectLength:Ct,getPolyLength:It,getLineLength:At,getCircleLength:Mt,getEllipseLength:kt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Lt,percent:Et}};function Ut(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=jt;var Ft="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Ht(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Dt(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function Vt(t,e){return Ht(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},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 Bt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function qt(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>=zt[r]&&(t.result.push([e].concat(n.splice(0,zt[r]))),zt[r]););}function Jt(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=Bt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=zt[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?Wt(t):$t(t),t.err.length)return;t.data.push(t.param),Zt(t),n=!1,t.index=t.max)break;if(!qt(t.path.charCodeAt(t.index)))break}}Gt(t)}else Gt(t);else t.err="KUTE.js - "+Ft}function te(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=Dt(n,i,.5),t.splice(r+1,0,i)}function he(t,e){var r,n;if("string"==typeof t){var i=ne(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ft);if(!fe(r=t.slice(0)))throw new TypeError(Ft);return r.length>1&&Vt(r[0],r[r.length-1])&&r.pop(),le(r)>0&&r.reverse(),!n&&e&&Nt(e)&&e>0&&pe(r,e),r}function fe(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=he(t,r=r||v.morphPrecision),i=he(e,r),a=n.length-i.length;return ce(n,a<0?-1*a:0),ce(i,a>0?a:0),oe(n,i),[n,i]}ee.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 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=[],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},ee.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 de={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"+Ut(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):v.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},ge={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ut,defaultOptions:{morphPrecision:10,morphIndex:0},functions:de,Util:{INVALID_INPUT:Ft,isFiniteNumber:Nt,distance:Ht,pointAlong:Dt,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Qt,isSpace:Rt,isCommand:Xt,isArc:Bt,isDigit:Kt,isDigitStart:qt,State:Yt,skipSpaces:Zt,scanFlag:$t,scanParam:Wt,finalizeSegment:Gt,scanSegment:Jt,pathParse:te,SvgPath:ee,split:re,pathStringToRing:ne,exactRing:ie,approximateRing:ae,measure:se,rotateRing:oe,polygonLength:ue,polygonArea:le,addPoints:ce,bisect:pe,normalizeRing:he,validRing:fe,getInterpolationPoints:ve}};for(var me in x.SVGMorph=ge,x){var ye=x[me];x[me]=new V(ye)}var be={Animation:V,Components:x,Tween:N,fromTo:function(t,e,r,n){return n=n||{},new H(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new H(j(t),e,e,r)},TweenCollection:D,allFromTo:function(t,e,r,n){return n=n||{},new D(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new D(j(t,!0),e,e,r)},Objects:w,Util:_,Easing:P,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.51"};export default be; diff --git a/dist/kute.js b/dist/kute.js index 802ba1f..a8e40b6 100644 --- a/dist/kute.js +++ b/dist/kute.js @@ -1,5 +1,5 @@ /*! -* KUTE.js Standard v2.0.3 (http://thednp.github.io/kute.js) +* KUTE.js Standard v2.0.51 (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.51"; var KUTE = {}; @@ -807,16 +807,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; function getBoxModel(tweenProp){ return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp]; @@ -837,7 +827,7 @@ var essentialBoxModel = { component: 'essentialBoxModel', category: 'boxModel', - properties: ['top','left','width','height'], + properties: essentialBoxProps, defaultValues: essentialBoxPropsValues, Interpolate: {numbers: numbers}, functions: essentialBoxModelFunctions, diff --git a/dist/kute.min.js b/dist/kute.min.js index 57222a8..e2e9f9c 100644 --- a/dist/kute.min.js +++ b/dist/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.51 | 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 R=["top","left","width","height"],X={};R.map((function(t){return X[t]=Q}));var B={component:"essentialBoxModel",category:"boxModel",properties:R,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 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 q(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 Y(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=q(n,r,i)})}x.BoxModelEssential=B;var Z=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};Z.forEach((function(t){$[t]="#000"}));var W={};Z.map((function(t){return W[t]=Y}));var G={component:"colorProperties",category:"colors",properties:Z,defaultValues:$,Interpolate:{numbers:r,colors:q},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return K(e)},onStart:W},Util:{trueColor:K}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var n={};for(var r in e){var i=et(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=tt.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=et(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 J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,q(n,r,i))})},n[s]=K(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 J)&&(J[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 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)}}},rt={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:q},functions:nt,Util:{replaceUppercase:et,trueColor:K,trueDimension:z}};x.HTMLAttributes=rt;var it={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})}},at={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:it};x.OpacityProperty=at;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),ct=st.concat(ot,lt),pt=ct.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:ct,all:pt},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ht?ht[n]:n&&n.length?n:ht[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 dt(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 vt(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 yt(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 bt(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 _t(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}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(",")+")"}function Tt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}x.TextWriteProperties=gt;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=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?mt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?yt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?wt(n.translate,r.translate,"px",i):"")+(n.rotate3d?bt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?_t(n.rotate,r.rotate,"deg",i):"")+(n.skew?xt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?Tt(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:mt,translate3d:yt,rotate3d:bt,translate:wt,rotate:_t,scale:Tt,skew:xt}};function Et(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(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:Pt,Util:{getRectLength:Ct,getPolyLength:It,getLineLength:At,getCircleLength:Mt,getEllipseLength:kt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Lt,percent:Et}};function Ut(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=jt;var Ft="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Ht(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Dt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Vt(t,e){return Ht(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},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 Bt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function qt(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(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 Jt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Bt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=zt[t.path[t.index].toLowerCase()],t.index++,Zt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Wt(t):$t(t),t.err.length)return;t.data.push(t.param),Zt(t),r=!1,t.index=t.max)break;if(!qt(t.path.charCodeAt(t.index)))break}}Gt(t)}else Gt(t);else t.err="KUTE.js - "+Ft}function te(t){var e=new Yt(t),n=e.max;for(Zt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Dt(r,i,.5),t.splice(n+1,0,i)}function he(t,e){var n,r;if("string"==typeof t){var i=re(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ft);if(!fe(n=t.slice(0)))throw new TypeError(Ft);return n.length>1&&Vt(n[0],n[n.length-1])&&n.pop(),le(n)>0&&n.reverse(),!r&&e&&Nt(e)&&e>0&&pe(n,e),n}function fe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Nt(t[0])&&Nt(t[1])}))}function de(t,e,n){var r=he(t,n=n||d.morphPrecision),i=he(e,n),a=r.length-i.length;return ce(r,a<0?-1*a:0),ce(i,a>0?a:0),oe(r,i),[r,i]}ee.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},ee.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 ve={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"+Ut(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=de(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]}}}},ge={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ut,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ve,Util:{INVALID_INPUT:Ft,isFiniteNumber:Nt,distance:Ht,pointAlong:Dt,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Qt,isSpace:Rt,isCommand:Xt,isArc:Bt,isDigit:Kt,isDigitStart:qt,State:Yt,skipSpaces:Zt,scanFlag:$t,scanParam:Wt,finalizeSegment:Gt,scanSegment:Jt,pathParse:te,SvgPath:ee,split:ne,pathStringToRing:re,exactRing:ie,approximateRing:ae,measure:se,rotateRing:oe,polygonLength:ue,polygonArea:le,addPoints:ce,bisect:pe,normalizeRing:he,validRing:fe,getInterpolationPoints:de}};for(var me in x.SVGMorph=ge,x){var ye=x[me];x[me]=new V(ye)}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.51"}})); diff --git a/package.json b/package.json index 2f2e295..09ef7cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kute.js", - "version": "2.0.3", + "version": "2.0.51", "description": "JavaScript animation engine of the future is called KUTE.js.", "main": "dist/kute.min.js", "module": "dist/kute.esm.js", @@ -55,7 +55,7 @@ "dependencies": { "cubic-bezier-easing": "^1.0.2", "minifill": "^0.0.8", - "shorter-js": "^0.0.7" + "shorter-js": "^0.0.8" }, "devDependencies": { "@rollup/plugin-buble": "^0.21.3", diff --git a/src/components/boxModelBase.js b/src/components/boxModelBase.js index 15bfddc..81e5408 100644 --- a/src/components/boxModelBase.js +++ b/src/components/boxModelBase.js @@ -1,5 +1,4 @@ import KUTE from '../objects/kute.js' -import Components from '../objects/components.js' import {numbers} from '../objects/interpolate.js' // Component Functions @@ -21,12 +20,9 @@ baseBoxProps.map(x=>baseBoxOnStart[x] = boxModelOnStart) const baseBoxModel = { component: 'baseBoxModel', category: 'boxModel', - // properties: baseBoxProps, - // defaultValues: baseBoxPropsValues, + properties: baseBoxProps, Interpolate: {numbers}, functions: {onStart: baseBoxOnStart} } -export default baseBoxModel - -Components.BoxModelProperties = baseBoxModel +export default baseBoxModel \ No newline at end of file diff --git a/src/components/boxModelEssential.js b/src/components/boxModelEssential.js index 17e9296..2bd595c 100644 --- a/src/components/boxModelEssential.js +++ b/src/components/boxModelEssential.js @@ -32,7 +32,7 @@ const essentialBoxModelFunctions = { const essentialBoxModel = { component: 'essentialBoxModel', category: 'boxModel', - properties: ['top','left','width','height'], + properties: essentialBoxProps, defaultValues: essentialBoxPropsValues, Interpolate: {numbers}, functions: essentialBoxModelFunctions, diff --git a/src/components/scrollProperty.js b/src/components/scrollProperty.js index 9f9cdd8..1f815e2 100644 --- a/src/components/scrollProperty.js +++ b/src/components/scrollProperty.js @@ -1,7 +1,9 @@ import {numbers} from '../objects/interpolate.js' import Components from '../objects/components.js' +import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js' -import {scrollContainer,onStartScroll,onCompleteScroll,scrollIn,scrollOut,getScrollTargets,preventScroll} from './scrollPropertyBase.js' + +import {scrollContainer,onStartScroll,onCompleteScroll,scrollIn,scrollOut,getScrollTargets,preventScroll,toggleScrollEvents} from './scrollPropertyBase.js' // Component Functions function getScroll(){ @@ -28,7 +30,7 @@ const scrollProperty = { Interpolate: {numbers}, functions: scrollFunctions, // export stuff to global - Util: { preventScroll, scrollIn, scrollOut, getScrollTargets } + Util: { preventScroll, scrollIn, scrollOut, getScrollTargets, toggleScrollEvents, supportPassive } } export default scrollProperty diff --git a/src/components/scrollPropertyBase.js b/src/components/scrollPropertyBase.js index ce542e1..40b5f5b 100644 --- a/src/components/scrollPropertyBase.js +++ b/src/components/scrollPropertyBase.js @@ -1,9 +1,6 @@ import KUTE from '../objects/kute.js' import {numbers} from '../objects/interpolate.js' -import Components from '../objects/components.js' -import {on} from 'shorter-js/src/event/on.js' -import {off} from 'shorter-js/src/event/off.js' import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js' import {mouseHoverEvents} from 'shorter-js/src/strings/mouseHoverEvents.js' import {supportTouch} from 'shorter-js/src/boolean/supportTouch.js' @@ -28,13 +25,18 @@ export function getScrollTargets(){ let el = this.element return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el} } +export function toggleScrollEvents(action,element){ + element[action]( mouseHoverEvents[0], preventScroll, passiveHandler); + element[action]( touchOrWheel, preventScroll, passiveHandler); +} export function scrollIn(){ let 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); + // on( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler); + // on( targets.el, touchOrWheel, preventScroll, passiveHandler); + toggleScrollEvents('addEventListener',targets.el) targets.st.style.pointerEvents = 'none' } } @@ -43,8 +45,10 @@ export function scrollOut(){ //prevent scroll when tweening scroll 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); + // off( targets.el, mouseHoverEvents[0], preventScroll, passiveHandler); + // off( targets.el, touchOrWheel, preventScroll, passiveHandler); + toggleScrollEvents('removeEventListener',targets.el) + targets.st.style.pointerEvents = '' } } @@ -74,7 +78,7 @@ const baseScroll = { onComplete: onCompleteScroll }, // unfortunatelly scroll needs all them no matter the packaging - Util: { preventScroll, scrollIn, scrollOut, getScrollTargets } + Util: { preventScroll, scrollIn, scrollOut, getScrollTargets, supportPassive } } export default baseScroll \ No newline at end of file diff --git a/src/components/textWrite.js b/src/components/textWrite.js index 739d4c5..c09402a 100644 --- a/src/components/textWrite.js +++ b/src/components/textWrite.js @@ -1,4 +1,4 @@ -import TC from '../interface/tc.js' +import TC from '../interface/tcLink.js' import {numbers} from '../objects/interpolate.js' import Components from '../objects/components.js' diff --git a/src/easing/easing-base.js b/src/easing/easing-base.js index 47d3d30..2b104b1 100644 --- a/src/easing/easing-base.js +++ b/src/easing/easing-base.js @@ -34,7 +34,7 @@ const Easing = { export function processEasing(fn) { if ( typeof fn === 'function') { return fn; - } else if ( typeof fn === 'string' ) { + } else if ( typeof Easing[fn] === 'function' ) { return Easing[fn]; // regular Robert Penner Easing Functions } else { return Easing.linear diff --git a/src/easing/easing.js b/src/easing/easing.js index f2a6974..edd751d 100644 --- a/src/easing/easing.js +++ b/src/easing/easing.js @@ -1,4 +1,4 @@ -import Util from '../objects/Util.js' +import Util from '../objects/util.js' // Robert Penner's Easing Functions export function linear (t) { return t; } @@ -98,7 +98,7 @@ const Easing = { export function processEasing(fn) { if ( typeof fn === 'function') { return fn; - } else if ( typeof fn === 'string' ) { + } else if ( typeof Easing[fn] === 'function' ) { return Easing[fn]; // regular Robert Penner Easing Functions } else { return Easing.linear diff --git a/src/interface/fromTo.js b/src/interface/fromTo.js index ce197f4..8be8a08 100644 --- a/src/interface/fromTo.js +++ b/src/interface/fromTo.js @@ -1,5 +1,5 @@ import selector from '../util/selector.js' -import TC from './tc.js' +import TC from './tcLink.js' export default function fromTo(element, startObject, endObject, optionsObj) { optionsObj = optionsObj || {} diff --git a/src/interface/TC.js b/src/interface/tcLink.js similarity index 100% rename from src/interface/TC.js rename to src/interface/tcLink.js diff --git a/src/interface/to.js b/src/interface/to.js index da0b46f..d2a64b5 100644 --- a/src/interface/to.js +++ b/src/interface/to.js @@ -1,5 +1,5 @@ import selector from '../util/selector.js' -import TC from './tc.js' +import TC from './tcLink.js' export default function to(element, endObject, optionsObj) { optionsObj = optionsObj || {} diff --git a/src/tween/tweenCollection.js b/src/tween/tweenCollection.js index aaf33ff..48012aa 100644 --- a/src/tween/tweenCollection.js +++ b/src/tween/tweenCollection.js @@ -1,6 +1,6 @@ import KUTE from '../objects/kute.js' import defaultOptions from '../objects/defaultOptions.js' -import TC from '../interface/tc.js' +import TC from '../interface/tcLink.js' // KUTE.js Tween Collection // ======================== From 18cfa78abba44b9d72c8c835bf48ac8447f920b1 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Jun 2020 09:20:10 +0000 Subject: [PATCH 391/471] --- 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 09:23:25 +0000 Subject: [PATCH 392/471] Code cleanup --- demo/src/kute-base.js | 94 +++++------ demo/src/kute-base.min.js | 4 +- demo/src/kute-extra.js | 70 ++++---- demo/src/kute-extra.min.js | 4 +- demo/src/kute.min.js | 4 +- demo/src/polyfill.min.js | 1 + demo/transformFunctions.html | 3 +- dist/kute.esm.js | 30 ++-- dist/kute.esm.min.js | 4 +- dist/kute.js | 30 ++-- dist/kute.min.js | 4 +- dist/polyfill.js | 7 +- dist/polyfill.min.js | 1 + package.json | 12 +- rollup.config.js | 17 +- rollup.polyfill.js | 56 +++++++ src/components/backgroundPosition.js | 2 +- src/components/backgroundPositionBase.js | 2 +- src/components/borderRadius.js | 2 +- src/components/borderRadiusBase.js | 2 +- src/components/boxModel.js | 2 +- src/components/boxModelBase.js | 2 +- src/components/boxModelEssential.js | 2 +- src/components/clipProperty.js | 2 +- src/components/clipPropertyBase.js | 2 +- src/components/colorProperties.js | 5 +- src/components/colorPropertiesBase.js | 13 +- src/components/crossBrowserMove.js | 2 +- src/components/filterEffects.js | 4 +- src/components/filterEffectsBase.js | 4 +- src/components/htmlAttributes.js | 4 +- src/components/htmlAttributesBase.js | 4 +- src/components/opacityProperty.js | 3 +- src/components/opacityPropertyBase.js | 2 +- src/components/scrollProperty.js | 4 +- src/components/scrollPropertyBase.js | 13 +- src/components/shadowProperties.js | 4 +- src/components/shadowPropertiesBase.js | 4 +- src/components/svgCubicMorph.js | 2 +- src/components/svgCubicMorphBase.js | 2 +- src/components/svgDraw.js | 2 +- src/components/svgDrawBase.js | 2 +- src/components/svgMorph.js | 4 +- src/components/svgMorphBase.js | 14 +- src/components/svgTransform.js | 3 +- src/components/svgTransformBase.js | 2 +- src/components/textProperties.js | 2 +- src/components/textPropertiesBase.js | 2 +- src/components/textWrite.js | 8 +- src/components/textWriteBase.js | 2 +- src/components/transformFunctions.js | 9 +- src/components/transformFunctionsBase.js | 50 +----- src/components/transformMatrix.js | 3 +- src/components/transformMatrixBase.js | 3 +- src/easing/easing-base.js | 53 +++--- src/easing/easing-bezier.js | 7 +- src/easing/easing.js | 156 +++++++----------- src/index-base.js | 1 + src/index-extra.js | 1 + src/index.js | 1 + src/interface/fromTo.js | 4 +- src/interface/tcLink.js | 3 - src/interface/to.js | 4 +- src/interpolation/arrays.js | 7 + src/interpolation/colors.js | 13 ++ src/interpolation/coords.js | 10 ++ src/interpolation/numbers.js | 3 + src/interpolation/perspective.js | 3 + src/interpolation/rotate.js | 3 + src/interpolation/rotate3d.js | 7 + src/interpolation/scale.js | 3 + src/interpolation/skew.js | 6 + src/interpolation/skewX.js | 3 + src/interpolation/skewY.js | 3 + src/interpolation/translate.js | 6 + src/interpolation/translate3d.js | 7 + src/interpolation/units.js | 3 + src/objects/Interpolate.js | 22 +-- src/objects/Objects.js | 1 + src/objects/ObjectsBase.js | 2 +- .../{TweenConstructor.js => connect.js} | 0 src/tween/tween.js | 4 +- src/tween/tweenBase.js | 7 +- src/tween/tweenCollection.js | 6 +- src/tween/tweenExtra.js | 4 +- src/util/progressBar.js | 4 +- 86 files changed, 446 insertions(+), 446 deletions(-) create mode 100644 rollup.polyfill.js delete mode 100644 src/interface/tcLink.js create mode 100644 src/interpolation/arrays.js create mode 100644 src/interpolation/colors.js create mode 100644 src/interpolation/coords.js create mode 100644 src/interpolation/numbers.js create mode 100644 src/interpolation/perspective.js create mode 100644 src/interpolation/rotate.js create mode 100644 src/interpolation/rotate3d.js create mode 100644 src/interpolation/scale.js create mode 100644 src/interpolation/skew.js create mode 100644 src/interpolation/skewX.js create mode 100644 src/interpolation/skewY.js create mode 100644 src/interpolation/translate.js create mode 100644 src/interpolation/translate3d.js create mode 100644 src/interpolation/units.js rename src/objects/{TweenConstructor.js => connect.js} (100%) diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js index c9e8c5f..9046cfb 100644 --- a/demo/src/kute-base.js +++ b/demo/src/kute-base.js @@ -1,5 +1,5 @@ /*! -* KUTE.js Base v2.0.51 (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.51"; + 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,38 +88,31 @@ 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') { @@ -147,7 +123,7 @@ 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'; diff --git a/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index ae88e1a..6d7686a 100644 --- a/demo/src/kute-base.min.js +++ b/demo/src/kute-base.min.js @@ -1,2 +1,2 @@ -// KUTE.js Base v2.0.51 | 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"],A={};q.map((function(t){return A[t]=U}));var B={component:"baseBoxModel",category:"boxModel",properties:q,Interpolate:{numbers:i},functions:{onStart:A}};var F={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})}}},j=new E(x),K=new E(B),Q=new E(F);return{Animation:E,Components:{Transform:j,BoxModel:K,Opacity:Q},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.51"}})); +// 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/demo/src/kute-extra.js b/demo/src/kute-extra.js index 4c5eb7c..9d0b5ce 100644 --- a/demo/src/kute-extra.js +++ b/demo/src/kute-extra.js @@ -1,5 +1,5 @@ /*! -* KUTE.js Extra v2.0.51 (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.51"; + 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) { @@ -1162,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) { @@ -2601,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;}; @@ -2609,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); @@ -2643,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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index 67464da..87f5cb9 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/src/kute-extra.min.js @@ -1,2 +1,2 @@ -// KUTE.js Extra v2.0.51 | 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","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],nt={};et.map((function(t){return nt[t]=0}));var rt={};et.map((function(t){return rt[t]=tt}));var it={component:"boxModelProperties",category:"boxModel",properties:et,defaultValues:nt,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+")"}function ut(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=lt(n,r,i)})}T.ClipProperty=st;var pt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ct={};pt.forEach((function(t){ct[t]="#000"}));var ht={};pt.map((function(t){return ht[t]=ut}));var ft={component:"colorProperties",category:"colors",properties:pt,defaultValues:ct,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={},vt=["fill","stroke","stop-color"];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]=vt.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(vt.includes(a))o.htmlAttributes[a]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in dt)&&(dt[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 dt)&&(dt[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 dt)&&(dt[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]=dt)}}},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};function Ct(t,e){return parseFloat(t)/100*e}function kt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(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,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Ut,percent:Ct}};function Vt(t){return t.map((function(t){return"string"==typeof t?t:t.shift()+t.join(",")})).join("")}T.SVGDraw=jt;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 Dt(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=[],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 Wt(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 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===i?n.original:Vt(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=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}}}},ne={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:r,toPathString:Vt},functions:ee,Util:{l2c:qt,q2c:Bt,a2c:Xt,catmullRom2bezier:Rt,ellipsePath:Ht,path2curve:Wt,pathToAbsolute:Dt,toPathString:Vt,parsePathString:Nt,getRotatedCurve:te,getRotations:Jt,getRotationSegments:Zt,reverseCurve:$t,getSegments:Gt,createPath:Kt}};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}};T.SVGTransformProperty=oe;var le=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}(),ue="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],pe="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",ce=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,he=!!le&&{passive:!1};function fe(t){this.scrolling&&t.preventDefault()}function de(){var t=this.element;return t===ce?{el:document,st:document.body}:{el:t,st:t}}function ve(t,e){e[t](ue[0],fe,he),e[t](pe,fe,he)}function ge(){var t=de.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,ve("addEventListener",t.el),t.st.style.pointerEvents="none")}function me(){var t=de.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,ve("removeEventListener",t.el),t.st.style.pointerEvents="")}var ye={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:ce,this.element===ce?window.pageYOffset||ce.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:ce,ge.call(this),t[e]=function(t,e,n,i){t.scrollTop=r(e,n,i)>>0})},onComplete:function(t){me.call(this)}},be={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:r},functions:ye,Util:{preventScroll:fe,scrollIn:ge,scrollOut:me,getScrollTargets:de,toggleScrollEvents:ve,supportPassive:le}};function we(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(" ")})}T.ScrollProperty=be;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}))}var Me={};xe.map((function(t){return Me[t]=we}));var Te={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:Me},Util:{processShadowArray:Se,trueColor:ot}};function Ee(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=Te;var _e=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ce={};_e.forEach((function(t){Ce[t]=Ee}));var ke={component:"textProperties",category:"textProperties",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}};T.TextProperties=ke;var Ie=String("abcdefghijklmnopqrstuvwxyz").split(""),Pe=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),Oe=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),Ae=String("0123456789").split(""),Le=Ie.concat(Pe,Ae),Ue=Le.concat(Oe),Fe={alpha:Ie,upper:Pe,symbols:Oe,numeric:Ae,alphanumeric:Le,all:Ue},je={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in Fe?Fe[n]:n&&n.length?n:Fe[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 Ve(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 Re(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/demo/src/kute.min.js b/demo/src/kute.min.js index e2e9f9c..58142bc 100644 --- a/demo/src/kute.min.js +++ b/demo/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js Standard v2.0.51 | 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 R=["top","left","width","height"],X={};R.map((function(t){return X[t]=Q}));var B={component:"essentialBoxModel",category:"boxModel",properties:R,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 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 q(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 Y(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=q(n,r,i)})}x.BoxModelEssential=B;var Z=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};Z.forEach((function(t){$[t]="#000"}));var W={};Z.map((function(t){return W[t]=Y}));var G={component:"colorProperties",category:"colors",properties:Z,defaultValues:$,Interpolate:{numbers:r,colors:q},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return K(e)},onStart:W},Util:{trueColor:K}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var n={};for(var r in e){var i=et(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=tt.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=et(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 J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,q(n,r,i))})},n[s]=K(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 J)&&(J[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 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)}}},rt={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:q},functions:nt,Util:{replaceUppercase:et,trueColor:K,trueDimension:z}};x.HTMLAttributes=rt;var it={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})}},at={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:it};x.OpacityProperty=at;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),ct=st.concat(ot,lt),pt=ct.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:ct,all:pt},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ht?ht[n]:n&&n.length?n:ht[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 dt(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 vt(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 yt(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 bt(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 _t(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}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(",")+")"}function Tt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}x.TextWriteProperties=gt;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=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?mt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?yt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?wt(n.translate,r.translate,"px",i):"")+(n.rotate3d?bt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?_t(n.rotate,r.rotate,"deg",i):"")+(n.skew?xt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?Tt(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:mt,translate3d:yt,rotate3d:bt,translate:wt,rotate:_t,scale:Tt,skew:xt}};function Et(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(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:Pt,Util:{getRectLength:Ct,getPolyLength:It,getLineLength:At,getCircleLength:Mt,getEllipseLength:kt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Lt,percent:Et}};function Ut(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=jt;var Ft="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Ht(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Dt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Vt(t,e){return Ht(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},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 Bt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function qt(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(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 Jt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Bt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=zt[t.path[t.index].toLowerCase()],t.index++,Zt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Wt(t):$t(t),t.err.length)return;t.data.push(t.param),Zt(t),r=!1,t.index=t.max)break;if(!qt(t.path.charCodeAt(t.index)))break}}Gt(t)}else Gt(t);else t.err="KUTE.js - "+Ft}function te(t){var e=new Yt(t),n=e.max;for(Zt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Dt(r,i,.5),t.splice(n+1,0,i)}function he(t,e){var n,r;if("string"==typeof t){var i=re(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ft);if(!fe(n=t.slice(0)))throw new TypeError(Ft);return n.length>1&&Vt(n[0],n[n.length-1])&&n.pop(),le(n)>0&&n.reverse(),!r&&e&&Nt(e)&&e>0&&pe(n,e),n}function fe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Nt(t[0])&&Nt(t[1])}))}function de(t,e,n){var r=he(t,n=n||d.morphPrecision),i=he(e,n),a=r.length-i.length;return ce(r,a<0?-1*a:0),ce(i,a>0?a:0),oe(r,i),[r,i]}ee.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},ee.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 ve={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"+Ut(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=de(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]}}}},ge={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ut,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ve,Util:{INVALID_INPUT:Ft,isFiniteNumber:Nt,distance:Ht,pointAlong:Dt,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Qt,isSpace:Rt,isCommand:Xt,isArc:Bt,isDigit:Kt,isDigitStart:qt,State:Yt,skipSpaces:Zt,scanFlag:$t,scanParam:Wt,finalizeSegment:Gt,scanSegment:Jt,pathParse:te,SvgPath:ee,split:ne,pathStringToRing:re,exactRing:ie,approximateRing:ae,measure:se,rotateRing:oe,polygonLength:ue,polygonArea:le,addPoints:ce,bisect:pe,normalizeRing:he,validRing:fe,getInterpolationPoints:de}};for(var me in x.SVGMorph=ge,x){var ye=x[me];x[me]=new V(ye)}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.51"}})); +// 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/demo/src/polyfill.min.js b/demo/src/polyfill.min.js index 7c165cd..ff92dfc 100644 --- a/demo/src/polyfill.min.js +++ b/demo/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 - + + diff --git a/dist/kute.esm.js b/dist/kute.esm.js index 0f4b1e9..652d3d1 100644 --- a/dist/kute.esm.js +++ b/dist/kute.esm.js @@ -1,9 +1,9 @@ /*! -* KUTE.js Standard v2.0.51 (http://thednp.github.io/kute.js) +* KUTE.js Standard 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) */ -var version = "2.0.51"; +var version = "2.0.6"; var KUTE = {}; @@ -305,6 +305,8 @@ CubicBezier.prototype.solveCurveX = function solveCurveX (x) { 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'), @@ -347,7 +349,7 @@ function processBezierEasing(fn) { return Easing.linear } } -Util.processEasing = processBezierEasing; +connect.processEasing = processBezierEasing; function selector(el, multi) { try{ @@ -368,8 +370,6 @@ function selector(el, multi) { } } -var TweenConstructor = {}; - var TweenBase = function TweenBase(targetElement, startObject, endObject, options){ this.element = targetElement; this.playing = false; @@ -379,7 +379,7 @@ var TweenBase = function TweenBase(targetElement, startObject, endObject, option 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) { @@ -472,7 +472,7 @@ TweenBase.prototype.update = function update (time) { } return true; }; -TweenConstructor.Tween = TweenBase; +connect.tween = TweenBase; defaultOptions.repeat = 0; defaultOptions.repeatDelay = 0; @@ -621,9 +621,7 @@ var Tween = (function (TweenBase) { }; return Tween; }(TweenBase)); -TweenConstructor.Tween = Tween; - -var TC = TweenConstructor.Tween; +connect.tween = Tween; var TweenCollection = function TweenCollection(els,vS,vE,Ops){ var this$1 = this; @@ -636,7 +634,7 @@ var TweenCollection = function TweenCollection(els,vS,vE,Ops){ 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]")); } @@ -665,7 +663,7 @@ 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 TC){ + } else if (args instanceof connect.tween){ lastTween.chain(args); } else { throw new TypeError('KUTE.js - invalid chain value') @@ -689,12 +687,12 @@ TweenCollection.prototype.getMaxDuration = function getMaxDuration (){ 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) { @@ -1149,7 +1147,7 @@ function createTextTweens(target,newText,options){ 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;}; @@ -1157,7 +1155,7 @@ function createTextTweens(target,newText,options){ 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); diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js index db486a4..1eb9372 100644 --- a/dist/kute.esm.min.js +++ b/dist/kute.esm.min.js @@ -1,2 +1,2 @@ -// KUTE.js Standard v2.0.51 | thednp © 2020 | MIT-License -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.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,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||v.duration,this._delay=i.delay||v.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 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},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 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(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},U.Tween=F,v.repeat=0,v.repeatDelay=0,v.yoyo=!1,v.resetStart=!1;var N=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||v.repeat,this._repeatDelay=o.repeatDelay||v.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||v.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,T(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.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}(F);U.Tween=N;var H=U.Tween,D=function(t,e,r,n){var i=this;this.tweens=[],!("offset"in v)&&(v.offset=0),(n=n||{}).delay=n.delay||v.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=n||{},a[s].delay=s>0?n.delay+(n.offset||v.offset):n.delay,t instanceof Element?i.tweens.push(new H(t,e,r,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 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"})}V.prototype.setComponent=function(t){var e=t.component,r={prepareProperty:d,prepareStart:g,onStart:a,onComplete:y,crossCheck:m},n=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||n)+" properties"}if(t.defaultOptions)for(var l in t.defaultOptions)v[l]=t.defaultOptions[l];if(t.functions)for(var c in r)if(c in t.functions)if("function"==typeof t.functions[c])!r[c][e]&&(r[c][e]={}),!r[c][e][n||s]&&(r[c][e][n||s]=t.functions[c]);else for(var p in t.functions[c])!r[c][e]&&(r[c][e]={}),!r[c][e][p]&&(r[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 R=["top","left","width","height"],X={};R.map((function(t){return X[t]=Q}));var B={component:"essentialBoxModel",category:"boxModel",properties:R,defaultValues:{top:0,left:0,width:0,height:0},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},Util:{trueDimension:z}};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 q(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+")"}function Y(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,r,n,i){t.style[e]=q(r,n,i)})}x.BoxModelEssential=B;var Z=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};Z.forEach((function(t){$[t]="#000"}));var W={};Z.map((function(t){return W[t]=Y}));var G={component:"colorProperties",category:"colors",properties:Z,defaultValues:$,Interpolate:{numbers:n,colors:q},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return K(e)},onStart:W},Util:{trueColor:K}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var rt={prepareStart:function(t,e){var r={};for(var n in e){var i=et(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=et(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 J)&&(J[e]=function(t,e,r,n,i){t.setAttribute(e,q(r,n,i))})},r[s]=K(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 J)&&(J[e]=function(t,e,r,i,a){var s=e.replace(c,"");t.setAttribute(s,(1e3*n(r.v,i.v,a)>>0)/1e3+i.u)})},r[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 J)&&(J[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]=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:n,colors:q},functions:rt,Util:{replaceUppercase:et,trueColor:K,trueDimension:z}};x.HTMLAttributes=nt;var it={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})}},at={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:n},functions:it};x.OpacityProperty=at;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),ct=st.concat(ot,lt),pt=ct.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:ct,all:pt},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var r=this._textChars,n=r in ht?ht[r]:r&&r.length?r:ht[v.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})}};function vt(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 dt(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,c=void 0;s>0)/1e3+r+")"}function yt(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 wt(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 _t(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 Tt(t,e,r){return"scale("+(1e3*(t+(e-t)*r)>>0)/1e3+")"}x.TextWriteProperties=gt;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 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 c=u.replace(/[XYZ]/,""),p="skew"===c?c:c+"3d",h="translate"===c?n:"rotate"===c?i:"skew"===c?a:{},f=0;f<3;f++){var v=r[f];h[f]=""+c+v in e?parseInt(e[""+c+v]):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,r,n,i){t.style[e]=(r.perspective||n.perspective?mt(r.perspective,n.perspective,"px",i):"")+(r.translate3d?yt(r.translate3d,n.translate3d,"px",i):"")+(r.translate?wt(r.translate,n.translate,"px",i):"")+(r.rotate3d?bt(r.rotate3d,n.rotate3d,"deg",i):"")+(r.rotate||n.rotate?_t(r.rotate,n.rotate,"deg",i):"")+(r.skew?xt(r.skew,n.skew,"deg",i):"")+(r.scale||n.scale?Tt(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:mt,translate3d:yt,rotate3d:bt,translate:wt,rotate:_t,scale:Tt,skew:xt}};function Et(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(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"})}},jt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:n},functions:Pt,Util:{getRectLength:Ct,getPolyLength:It,getLineLength:At,getCircleLength:Mt,getEllipseLength:kt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Lt,percent:Et}};function Ut(t,e,r,n){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=jt;var Ft="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Ht(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Dt(t,e,r){return[t[0]+(e[0]-t[0])*r,t[1]+(e[1]-t[1])*r]}function Vt(t,e){return Ht(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},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 Bt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function qt(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>=zt[r]&&(t.result.push([e].concat(n.splice(0,zt[r]))),zt[r]););}function Jt(t){var e,r,n,i,a,s=t.max;if(t.segmentStart=t.index,r=Bt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=zt[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?Wt(t):$t(t),t.err.length)return;t.data.push(t.param),Zt(t),n=!1,t.index=t.max)break;if(!qt(t.path.charCodeAt(t.index)))break}}Gt(t)}else Gt(t);else t.err="KUTE.js - "+Ft}function te(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=Dt(n,i,.5),t.splice(r+1,0,i)}function he(t,e){var r,n;if("string"==typeof t){var i=ne(t,e);t=i.ring,n=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ft);if(!fe(r=t.slice(0)))throw new TypeError(Ft);return r.length>1&&Vt(r[0],r[r.length-1])&&r.pop(),le(r)>0&&r.reverse(),!n&&e&&Nt(e)&&e>0&&pe(r,e),r}function fe(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=he(t,r=r||v.morphPrecision),i=he(e,r),a=n.length-i.length;return ce(n,a<0?-1*a:0),ce(i,a>0?a:0),oe(n,i),[n,i]}ee.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 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=[],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},ee.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 de={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"+Ut(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):v.morphPrecision);this.valuesStart[t].pathArray=n[0],this.valuesEnd[t].pathArray=n[1]}}}},ge={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ut,defaultOptions:{morphPrecision:10,morphIndex:0},functions:de,Util:{INVALID_INPUT:Ft,isFiniteNumber:Nt,distance:Ht,pointAlong:Dt,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Qt,isSpace:Rt,isCommand:Xt,isArc:Bt,isDigit:Kt,isDigitStart:qt,State:Yt,skipSpaces:Zt,scanFlag:$t,scanParam:Wt,finalizeSegment:Gt,scanSegment:Jt,pathParse:te,SvgPath:ee,split:re,pathStringToRing:ne,exactRing:ie,approximateRing:ae,measure:se,rotateRing:oe,polygonLength:ue,polygonArea:le,addPoints:ce,bisect:pe,normalizeRing:he,validRing:fe,getInterpolationPoints:ve}};for(var me in x.SVGMorph=ge,x){var ye=x[me];x[me]=new V(ye)}var be={Animation:V,Components:x,Tween:N,fromTo:function(t,e,r,n){return n=n||{},new H(j(t),e,r,n)},to:function(t,e,r){return(r=r||{}).resetStart=e,new H(j(t),e,e,r)},TweenCollection:D,allFromTo:function(t,e,r,n){return n=n||{},new D(j(t,!0),e,r,n)},allTo:function(t,e,r){return(r=r||{}).resetStart=e,new D(j(t,!0),e,e,r)},Objects:w,Util:_,Easing:P,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:j,Version:"2.0.51"};export default be; +// KUTE.js Standard v2.0.6 | thednp © 2020 | MIT-License +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={},j={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 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+".")}}P.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof j[t])return j[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."),j.linear};var 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:P.processEasing(i.easing),this._duration=i.duration||v.duration,this._delay=i.delay||v.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(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),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&&(T(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)},P.tween=F,v.repeat=0,v.repeatDelay=0,v.yoyo=!1,v.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||v.repeat,this._repeatDelay=o.repeatDelay||v.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||v.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,S(this),!o&&u()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(T(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);P.tween=N;var H=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in v)&&(v.offset=0),(r=r||{}).delay=r.delay||v.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||v.offset):r.delay,t instanceof Element?i.tweens.push(new P.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};H.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},H.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},H.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},H.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},H.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof H)e.chain(t.tweens);else{if(!(t instanceof P.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},H.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},H.prototype.removeTweens=function(){this.tweens=[]},H.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){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 V(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"})}D.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,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)v[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 b in t.Interpolate){var x=t.Interpolate[b];if("function"!=typeof x||i[b])for(var S in x)"function"!=typeof x[S]||i[b]||(i[b]=x[S]);else i[b]=x}w[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!_[T]&&(_[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:r},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var n=V(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:V}};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 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 q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}x.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:r,colors:K},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};x.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 i in e){var s=tt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(J.includes(s))a.htmlAttributes[s]=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[s]=B(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=V(u).u||V(e[i]).u,c=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[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]=V(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 G)&&(G[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]=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:r,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:V}};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};x.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[v.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 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 vt(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,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=dt;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=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 v=n[f];h[f]=""+c+v in e?parseInt(e[""+c+v]):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?_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:wt,rotate:bt,scale:xt,skew:_t}};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,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"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},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}};function jt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Pt;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 Dt(t,e){return Nt(t,e)<1e-9}var Vt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},zt=[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&&zt.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 Bt(t){return t>=48&&t<=57}function Kt(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>=Vt[n]&&(t.result.push([e].concat(r.splice(0,Vt[n]))),Vt[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=Vt[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(!Kt(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 pe(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&&Dt(n[0],n[n.length-1])&&n.pop(),ue(n)>0&&n.reverse(),!r&&e&&Ft(e)&&e>0&&ce(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=pe(t,n=n||v.morphPrecision),i=pe(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 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},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 ve={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?U(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):v.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},de={component:"svgMorph",property:"path",defaultValue:[],Interpolate:jt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ve,Util:{INVALID_INPUT:Ut,isFiniteNumber:Ft,distance:Nt,pointAlong:Ht,samePoint:Dt,paramCounts:Vt,SPECIAL_SPACES:zt,isSpace:Qt,isCommand:Rt,isArc:Xt,isDigit:Bt,isDigitStart:Kt,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:ce,normalizeRing:pe,validRing:he,getInterpolationPoints:fe}};for(var ge in x.SVGMorph=de,x){var me=x[ge];x[ge]=new D(me)}var ye={Animation:D,Components:x,Tween:N,fromTo:function(t,e,n,r){return r=r||{},new P.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new P.tween(U(t),e,e,n)},TweenCollection:H,allFromTo:function(t,e,n,r){return r=r||{},new H(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new H(U(t,!0),e,e,n)},Objects:b,Util:_,Easing:j,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:U,Version:"2.0.6"};export default ye; diff --git a/dist/kute.js b/dist/kute.js index a8e40b6..718966b 100644 --- a/dist/kute.js +++ b/dist/kute.js @@ -1,5 +1,5 @@ /*! -* KUTE.js Standard v2.0.51 (http://thednp.github.io/kute.js) +* KUTE.js Standard 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.51"; + var version = "2.0.6"; var KUTE = {}; @@ -311,6 +311,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 +355,7 @@ return Easing.linear } } - Util.processEasing = processBezierEasing; + connect.processEasing = processBezierEasing; function selector(el, multi) { try{ @@ -374,8 +376,6 @@ } } - var TweenConstructor = {}; - var TweenBase = function TweenBase(targetElement, startObject, endObject, options){ this.element = targetElement; this.playing = false; @@ -385,7 +385,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 +478,7 @@ } return true; }; - TweenConstructor.Tween = TweenBase; + connect.tween = TweenBase; defaultOptions.repeat = 0; defaultOptions.repeatDelay = 0; @@ -627,9 +627,7 @@ }; return Tween; }(TweenBase)); - TweenConstructor.Tween = Tween; - - var TC = TweenConstructor.Tween; + connect.tween = Tween; var TweenCollection = function TweenCollection(els,vS,vE,Ops){ var this$1 = this; @@ -642,7 +640,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]")); } @@ -671,7 +669,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') @@ -695,12 +693,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) { @@ -1155,7 +1153,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;}; @@ -1163,7 +1161,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); diff --git a/dist/kute.min.js b/dist/kute.min.js index e2e9f9c..b13304a 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js Standard v2.0.51 | 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 R=["top","left","width","height"],X={};R.map((function(t){return X[t]=Q}));var B={component:"essentialBoxModel",category:"boxModel",properties:R,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 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 q(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 Y(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=q(n,r,i)})}x.BoxModelEssential=B;var Z=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],$={};Z.forEach((function(t){$[t]="#000"}));var W={};Z.map((function(t){return W[t]=Y}));var G={component:"colorProperties",category:"colors",properties:Z,defaultValues:$,Interpolate:{numbers:r,colors:q},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return K(e)},onStart:W},Util:{trueColor:K}};x.ColorProperties=G;var J={},tt=["fill","stroke","stop-color"];function et(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var nt={prepareStart:function(t,e){var n={};for(var r in e){var i=et(r).replace(/_+[a-z]+/,""),a=this.element.getAttribute(i);n[i]=tt.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=et(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 J)&&(J[e]=function(t,e,n,r,i){t.setAttribute(e,q(n,r,i))})},n[s]=K(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 J)&&(J[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 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)}}},rt={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:q},functions:nt,Util:{replaceUppercase:et,trueColor:K,trueDimension:z}};x.HTMLAttributes=rt;var it={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})}},at={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:r},functions:it};x.OpacityProperty=at;var st=String("abcdefghijklmnopqrstuvwxyz").split(""),ot=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ut=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),lt=String("0123456789").split(""),ct=st.concat(ot,lt),pt=ct.concat(ut),ht={alpha:st,upper:ot,symbols:ut,numeric:lt,alphanumeric:ct,all:pt},ft={text:function(e){if(!t[e]&&this.valuesEnd[e]){var n=this._textChars,r=n in ht?ht[n]:n&&n.length?n:ht[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 dt(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 vt(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 yt(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 bt(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 _t(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"}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(",")+")"}function Tt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}x.TextWriteProperties=gt;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=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?mt(n.perspective,r.perspective,"px",i):"")+(n.translate3d?yt(n.translate3d,r.translate3d,"px",i):"")+(n.translate?wt(n.translate,r.translate,"px",i):"")+(n.rotate3d?bt(n.rotate3d,r.rotate3d,"deg",i):"")+(n.rotate||r.rotate?_t(n.rotate,r.rotate,"deg",i):"")+(n.skew?xt(n.skew,r.skew,"deg",i):"")+(n.scale||r.scale?Tt(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:mt,translate3d:yt,rotate3d:bt,translate:wt,rotate:_t,scale:Tt,skew:xt}};function Et(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(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:Pt,Util:{getRectLength:Ct,getPolyLength:It,getLineLength:At,getCircleLength:Mt,getEllipseLength:kt,getTotalLength:Ot,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Lt,percent:Et}};function Ut(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=jt;var Ft="Invalid path value";function Nt(t){return"number"==typeof t&&isFinite(t)}function Ht(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function Dt(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function Vt(t,e){return Ht(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},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 Bt(t){return 97==(32|t)}function Kt(t){return t>=48&&t<=57}function qt(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(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 Jt(t){var e,n,r,i,a,s=t.max;if(t.segmentStart=t.index,n=Bt(e=t.path.charCodeAt(t.index)),Xt(e))if(i=zt[t.path[t.index].toLowerCase()],t.index++,Zt(t),t.data=[],i){for(r=!1;;){for(a=i;a>0;a--){if(!n||3!==a&&4!==a?Wt(t):$t(t),t.err.length)return;t.data.push(t.param),Zt(t),r=!1,t.index=t.max)break;if(!qt(t.path.charCodeAt(t.index)))break}}Gt(t)}else Gt(t);else t.err="KUTE.js - "+Ft}function te(t){var e=new Yt(t),n=e.max;for(Zt(e);e.index0&&(s=Math.max(s,Math.ceil(n/e)));for(var o=0;oe;)i=Dt(r,i,.5),t.splice(n+1,0,i)}function he(t,e){var n,r;if("string"==typeof t){var i=re(t,e);t=i.ring,r=i.skipBisect}else if(!Array.isArray(t))throw new TypeError(Ft);if(!fe(n=t.slice(0)))throw new TypeError(Ft);return n.length>1&&Vt(n[0],n[n.length-1])&&n.pop(),le(n)>0&&n.reverse(),!r&&e&&Nt(e)&&e>0&&pe(n,e),n}function fe(t){return t.every((function(t){return Array.isArray(t)&&t.length>=2&&Nt(t[0])&&Nt(t[1])}))}function de(t,e,n){var r=he(t,n=n||d.morphPrecision),i=he(e,n),a=r.length-i.length;return ce(r,a<0?-1*a:0),ce(i,a>0?a:0),oe(r,i),[r,i]}ee.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},ee.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 ve={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"+Ut(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=de(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]}}}},ge={component:"svgMorph",property:"path",defaultValue:[],Interpolate:Ut,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ve,Util:{INVALID_INPUT:Ft,isFiniteNumber:Nt,distance:Ht,pointAlong:Dt,samePoint:Vt,paramCounts:zt,SPECIAL_SPACES:Qt,isSpace:Rt,isCommand:Xt,isArc:Bt,isDigit:Kt,isDigitStart:qt,State:Yt,skipSpaces:Zt,scanFlag:$t,scanParam:Wt,finalizeSegment:Gt,scanSegment:Jt,pathParse:te,SvgPath:ee,split:ne,pathStringToRing:re,exactRing:ie,approximateRing:ae,measure:se,rotateRing:oe,polygonLength:ue,polygonArea:le,addPoints:ce,bisect:pe,normalizeRing:he,validRing:fe,getInterpolationPoints:de}};for(var me in x.SVGMorph=ge,x){var ye=x[me];x[me]=new V(ye)}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.51"}})); +// 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:{};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={},j={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 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+".")}}P.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof j[t])return j[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."),j.linear};var 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:P.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(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),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&&(T(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)},P.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,S(this),!o&&u()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(T(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);P.tween=N;var H=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 P.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};H.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},H.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},H.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},H.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},H.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof H)e.chain(t.tweens);else{if(!(t instanceof P.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},H.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},H.prototype.removeTweens=function(){this.tweens=[]},H.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){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 V(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"})}D.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 b in t.Interpolate){var x=t.Interpolate[b];if("function"!=typeof x||i[b])for(var S in x)"function"!=typeof x[S]||i[b]||(i[b]=x[S]);else i[b]=x}w[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!_[T]&&(_[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:r},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var n=V(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:V}};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 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 q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}x.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:r,colors:K},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};x.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 i in e){var s=tt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(J.includes(s))a.htmlAttributes[s]=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[s]=B(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=V(u).u||V(e[i]).u,c=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[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]=V(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 G)&&(G[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]=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:r,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:V}};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};x.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[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 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,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 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=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?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?_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:wt,rotate:bt,scale:xt,skew:_t}};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,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"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},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}};function jt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Pt;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 Dt(t,e){return Nt(t,e)<1e-9}var Vt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},zt=[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&&zt.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 Bt(t){return t>=48&&t<=57}function Kt(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>=Vt[n]&&(t.result.push([e].concat(r.splice(0,Vt[n]))),Vt[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=Vt[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(!Kt(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 pe(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&&Dt(n[0],n[n.length-1])&&n.pop(),ue(n)>0&&n.reverse(),!r&&e&&Ft(e)&&e>0&&ce(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=pe(t,n=n||d.morphPrecision),i=pe(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 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},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)?U(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:Dt,paramCounts:Vt,SPECIAL_SPACES:zt,isSpace:Qt,isCommand:Rt,isArc:Xt,isDigit:Bt,isDigitStart:Kt,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:ce,normalizeRing:pe,validRing:he,getInterpolationPoints:fe}};for(var ge in x.SVGMorph=ve,x){var me=x[ge];x[ge]=new D(me)}return{Animation:D,Components:x,Tween:N,fromTo:function(t,e,n,r){return r=r||{},new P.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new P.tween(U(t),e,e,n)},TweenCollection:H,allFromTo:function(t,e,n,r){return r=r||{},new H(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new H(U(t,!0),e,e,n)},Objects:b,Util:_,Easing:j,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:U,Version:"2.0.6"}})); diff --git a/dist/polyfill.js b/dist/polyfill.js index 8223a6d..e8f46fa 100644 --- a/dist/polyfill.js +++ b/dist/polyfill.js @@ -1,4 +1,9 @@ -"use strict"; +/*! + * KUTE.js Polyfill v2.0.6 (http://thednp.github.io/kute.js) + * Copyright 2015-2020 © thednp + * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE) + */ + "use strict"; if (!Array.from) { Array.from = (function () { var toStr = Object.prototype.toString; diff --git a/dist/polyfill.min.js b/dist/polyfill.min.js index 7c165cd..ff92dfc 100644 --- a/dist/polyfill.min.js +++ b/dist/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>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; -} // Component Properties // supported formats diff --git a/src/components/crossBrowserMove.js b/src/components/crossBrowserMove.js index ef8a462..86a9c12 100644 --- a/src/components/crossBrowserMove.js +++ b/src/components/crossBrowserMove.js @@ -3,7 +3,7 @@ import getInlineStyle from '../process/getInlineStyle.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import trueProperty from '../util/trueProperty.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' // Component Const const transformProperty = trueProperty('transform'); diff --git a/src/components/filterEffects.js b/src/components/filterEffects.js index 4f83ba6..70b03e8 100644 --- a/src/components/filterEffects.js +++ b/src/components/filterEffects.js @@ -2,8 +2,8 @@ import getStyleForProperty from '../process/getStyleForProperty.js' import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import trueColor from '../util/trueColor.js' -import {numbers} from '../objects/interpolate.js' -import {colors} from './colorPropertiesBase.js' +import numbers from '../interpolation/numbers.js' +import colors from '../interpolation/colors.js' import {dropShadow,onStartFilter} from './filterEffectsBase.js' // const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } diff --git a/src/components/filterEffectsBase.js b/src/components/filterEffectsBase.js index 44f126d..5bde3a0 100644 --- a/src/components/filterEffectsBase.js +++ b/src/components/filterEffectsBase.js @@ -1,6 +1,6 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' -import {colors} from './colorPropertiesBase.js' +import numbers from '../interpolation/numbers.js' +import colors from '../interpolation/colors.js' // const filterEffects = { property : 'filter', subProperties: {}, defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } diff --git a/src/components/htmlAttributes.js b/src/components/htmlAttributes.js index d29a654..d8d660c 100644 --- a/src/components/htmlAttributes.js +++ b/src/components/htmlAttributes.js @@ -1,10 +1,10 @@ import defaultValues from '../objects/defaultValues.js' import onStart from '../objects/onStart.js' import Components from '../objects/components.js' -import {numbers} from '../objects/interpolate.js' import trueColor from '../util/trueColor.js' import trueDimension from '../util/trueDimension.js' -import {colors} from './colorPropertiesBase.js' +import numbers from '../interpolation/numbers.js' +import colors from '../interpolation/colors.js' import {attributes,onStartAttr} from './htmlAttributesBase.js' // Component Name diff --git a/src/components/htmlAttributesBase.js b/src/components/htmlAttributesBase.js index 99ba27d..9f67215 100644 --- a/src/components/htmlAttributesBase.js +++ b/src/components/htmlAttributesBase.js @@ -1,6 +1,6 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' -import {colors} from './colorPropertiesBase.js' +import numbers from '../interpolation/numbers.js' +import colors from '../interpolation/colors.js' // Component Name let ComponentName = 'baseHTMLAttributes' diff --git a/src/components/opacityProperty.js b/src/components/opacityProperty.js index 0ffaf8d..f92082a 100644 --- a/src/components/opacityProperty.js +++ b/src/components/opacityProperty.js @@ -1,7 +1,6 @@ -import KUTE from '../objects/kute.js' import getStyleForProperty from '../process/getStyleForProperty.js' import Components from '../objects/components.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' import {onStartOpacity} from './opacityPropertyBase.js' // const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart } diff --git a/src/components/opacityPropertyBase.js b/src/components/opacityPropertyBase.js index ccfc964..843228c 100644 --- a/src/components/opacityPropertyBase.js +++ b/src/components/opacityPropertyBase.js @@ -1,5 +1,5 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' // const opacityProperty = { property : 'opacity', defaultValue: 1, interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart } diff --git a/src/components/scrollProperty.js b/src/components/scrollProperty.js index 1f815e2..934df97 100644 --- a/src/components/scrollProperty.js +++ b/src/components/scrollProperty.js @@ -1,6 +1,6 @@ -import {numbers} from '../objects/interpolate.js' import Components from '../objects/components.js' -import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js' +import numbers from '../interpolation/numbers.js' +import supportPassive from 'shorter-js/src/boolean/supportPassive.js' import {scrollContainer,onStartScroll,onCompleteScroll,scrollIn,scrollOut,getScrollTargets,preventScroll,toggleScrollEvents} from './scrollPropertyBase.js' diff --git a/src/components/scrollPropertyBase.js b/src/components/scrollPropertyBase.js index 40b5f5b..d3975ed 100644 --- a/src/components/scrollPropertyBase.js +++ b/src/components/scrollPropertyBase.js @@ -1,9 +1,9 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' -import {supportPassive} from 'shorter-js/src/boolean/supportPassive.js' -import {mouseHoverEvents} from 'shorter-js/src/strings/mouseHoverEvents.js' -import {supportTouch} from 'shorter-js/src/boolean/supportTouch.js' +import supportPassive from 'shorter-js/src/boolean/supportPassive.js' +import mouseHoverEvents from 'shorter-js/src/strings/mouseHoverEvents.js' +import supportTouch from 'shorter-js/src/boolean/supportTouch.js' // Component Util // events preventing scroll @@ -34,8 +34,6 @@ export function scrollIn(){ 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' } @@ -45,10 +43,7 @@ export function scrollOut(){ //prevent scroll when tweening scroll 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 = '' } } diff --git a/src/components/shadowProperties.js b/src/components/shadowProperties.js index d223c04..aae7c96 100644 --- a/src/components/shadowProperties.js +++ b/src/components/shadowProperties.js @@ -2,8 +2,8 @@ import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueColor from '../util/trueColor.js' -import {numbers} from '../objects/interpolate.js' -import {colors} from './colorPropertiesBase.js' +import numbers from '../interpolation/numbers.js' +import colors from '../interpolation/colors.js' import {onStartShadow} from './shadowPropertiesBase.js' // Component Properties diff --git a/src/components/shadowPropertiesBase.js b/src/components/shadowPropertiesBase.js index 49aa1e4..0b7761d 100644 --- a/src/components/shadowPropertiesBase.js +++ b/src/components/shadowPropertiesBase.js @@ -1,6 +1,6 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' -import {colors} from './colorPropertiesBase.js' +import numbers from '../interpolation/numbers.js' +import colors from '../interpolation/colors.js' // Component Properties const shadowProps = ['boxShadow','textShadow'] diff --git a/src/components/svgCubicMorph.js b/src/components/svgCubicMorph.js index 463898e..ffd38c8 100644 --- a/src/components/svgCubicMorph.js +++ b/src/components/svgCubicMorph.js @@ -1,6 +1,6 @@ import Components from '../objects/components.js' import selector from '../util/selector.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' import {toPathString,onStartCubicMorph} from './svgCubicMorphBase.js' diff --git a/src/components/svgCubicMorphBase.js b/src/components/svgCubicMorphBase.js index 824dfc0..b4258c2 100644 --- a/src/components/svgCubicMorphBase.js +++ b/src/components/svgCubicMorphBase.js @@ -1,5 +1,5 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } diff --git a/src/components/svgDraw.js b/src/components/svgDraw.js index 2a1e4cf..f5760a9 100644 --- a/src/components/svgDraw.js +++ b/src/components/svgDraw.js @@ -1,6 +1,6 @@ -import {numbers} from '../objects/interpolate.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' +import numbers from '../interpolation/numbers.js' import {onStartDraw} from './svgDrawBase.js' // const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart } diff --git a/src/components/svgDrawBase.js b/src/components/svgDrawBase.js index c0d2f8b..e7e5ef1 100644 --- a/src/components/svgDrawBase.js +++ b/src/components/svgDrawBase.js @@ -1,5 +1,5 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' // const svgDraw = { property : 'draw', defaultValue, Interpolate: {numbers} }, functions = { prepareStart, prepareProperty, onStart } diff --git a/src/components/svgMorph.js b/src/components/svgMorph.js index 3873133..5e714ac 100644 --- a/src/components/svgMorph.js +++ b/src/components/svgMorph.js @@ -1,8 +1,8 @@ -import KUTE from '../objects/kute.js' import selector from '../util/selector.js' import defaultOptions from '../objects/defaultOptions.js' import Components from '../objects/components.js' -import {onStartSVGMorph,coords} from './svgMorphBase.js' +import coords from '../interpolation/numbers.js' +import {onStartSVGMorph} from './svgMorphBase.js' // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } diff --git a/src/components/svgMorphBase.js b/src/components/svgMorphBase.js index 6c8ee27..f97a197 100644 --- a/src/components/svgMorphBase.js +++ b/src/components/svgMorphBase.js @@ -1,20 +1,8 @@ import KUTE from '../objects/kute.js' +import coords from '../Interpolation/coords.js' // const SVGMorph = { property : 'path', defaultValue: [], interpolators: {numbers,coords} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } -// Component Interpolation -// function function(array1, array2, length, progress) -export function coords (a, b, l, v) { - const points = []; - for(let i=0;i> 0)/1000 ); - } - } - return points; -} - // Component functions export function onStartSVGMorph(tweenProp){ if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { diff --git a/src/components/svgTransform.js b/src/components/svgTransform.js index 563ef0b..d6bd268 100644 --- a/src/components/svgTransform.js +++ b/src/components/svgTransform.js @@ -1,5 +1,4 @@ -import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' import Components from '../objects/components.js' import {svgTransformOnStart} from './svgTransformBase.js' diff --git a/src/components/svgTransformBase.js b/src/components/svgTransformBase.js index 549dcbe..56d3824 100644 --- a/src/components/svgTransformBase.js +++ b/src/components/svgTransformBase.js @@ -1,5 +1,5 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' // const svgTransform = { property : 'svgTransform', subProperties, defaultValue, Interpolate: {numbers}, functions } diff --git a/src/components/textProperties.js b/src/components/textProperties.js index bf5f288..24c8ffc 100644 --- a/src/components/textProperties.js +++ b/src/components/textProperties.js @@ -2,7 +2,7 @@ import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getStyleForProperty from '../process/getStyleForProperty.js' import trueDimension from '../util/trueDimension.js' -import {units} from '../objects/interpolate.js' +import units from '../interpolation/units.js' import {textPropOnStart} from './textPropertiesBase.js' // const textProperties = { category : 'textProperties', defaultValues: [], interpolators: {units} }, functions = { prepareStart, prepareProperty, onStart:{} } diff --git a/src/components/textPropertiesBase.js b/src/components/textPropertiesBase.js index 4435dd6..2b15130 100644 --- a/src/components/textPropertiesBase.js +++ b/src/components/textPropertiesBase.js @@ -1,5 +1,5 @@ import KUTE from '../objects/kute.js' -import {units} from '../objects/interpolate.js' +import units from '../interpolation/units.js' // const opacity = { category : 'textProperties', defaultValues: [], interpolators: {units} }, functions = { prepareStart, prepareProperty, onStart:{} } diff --git a/src/components/textWrite.js b/src/components/textWrite.js index c09402a..50b5c9c 100644 --- a/src/components/textWrite.js +++ b/src/components/textWrite.js @@ -1,6 +1,6 @@ -import TC from '../interface/tcLink.js' -import {numbers} from '../objects/interpolate.js' +import connect from '../objects/connect.js' import Components from '../objects/components.js' +import numbers from '../interpolation/numbers.js' import {onStartWrite,charSet} from './textWriteBase.js' @@ -99,7 +99,7 @@ export function createTextTweens(target,newText,options){ 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((el,i)=> { const onComplete = () => {target.innerHTML = newText, target.playing = false}; @@ -109,7 +109,7 @@ export function createTextTweens(target,newText,options){ 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(){ diff --git a/src/components/textWriteBase.js b/src/components/textWriteBase.js index 0ef3f4c..969fef5 100644 --- a/src/components/textWriteBase.js +++ b/src/components/textWriteBase.js @@ -1,5 +1,5 @@ import KUTE from '../objects/kute.js' -import {numbers} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' import defaultOptions from '../objects/defaultOptions.js' // Component Values diff --git a/src/components/transformFunctions.js b/src/components/transformFunctions.js index bb0ae81..fb220ec 100644 --- a/src/components/transformFunctions.js +++ b/src/components/transformFunctions.js @@ -1,7 +1,14 @@ import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' import getInlineStyle from '../process/getInlineStyle.js' -import {onStartTransform, perspective,translate3d, rotate3d, translate, rotate, scale, skew} from './transformFunctionsBase.js' +import perspective from '../interpolation/perspective.js' +import translate3d from '../interpolation/translate3d.js' +import rotate3d from '../interpolation/rotate3d.js' +import translate from '../interpolation/translate.js' +import rotate from '../interpolation/rotate.js' +import scale from '../interpolation/scale.js' +import skew from '../interpolation/skew.js' +import {onStartTransform} from './transformFunctionsBase.js' // const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr diff --git a/src/components/transformFunctionsBase.js b/src/components/transformFunctionsBase.js index 256e935..da7c940 100644 --- a/src/components/transformFunctionsBase.js +++ b/src/components/transformFunctionsBase.js @@ -1,50 +1,14 @@ import KUTE from '../objects/kute.js' +import perspective from '../interpolation/perspective.js' +import translate3d from '../interpolation/translate3d.js' +import rotate3d from '../interpolation/rotate3d.js' +import translate from '../interpolation/translate.js' +import rotate from '../interpolation/rotate.js' +import scale from '../interpolation/scale.js' +import skew from '../interpolation/skew.js' // const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr -// Component Interpolate functions -export function perspective(a, b, u, v) { - return `perspective(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` -} -export function translate3d(a, b, u, v) { - let translateArray = []; - for (let 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(',')})`; -} -export function rotate3d(a, b, u, v) { - let 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 -} -export function translate(a, b, u, v) { - let 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(',')})`; -} -export function rotate(a, b, u, v) { - return `rotate(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` -} -export function skew(a, b, u, v) { - let 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(',')})`; -} -export function skewX(a, b, u, v) { - return `skewX(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` -} -export function skewY(a, b, u, v) { - return `skewY(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` -} -export function scale (a, b, v) { - return `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`; -} - // Component Functions export function onStartTransform(tweenProp){ if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { diff --git a/src/components/transformMatrix.js b/src/components/transformMatrix.js index f082210..3d04a2a 100644 --- a/src/components/transformMatrix.js +++ b/src/components/transformMatrix.js @@ -1,6 +1,7 @@ import defaultValues from '../objects/defaultValues.js' import Components from '../objects/components.js' -import {numbers,arrays} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' +import arrays from '../interpolation/arrays.js' import {onStartTransform} from './transformMatrixBase.js' // const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } diff --git a/src/components/transformMatrixBase.js b/src/components/transformMatrixBase.js index f22a715..0d542ce 100644 --- a/src/components/transformMatrixBase.js +++ b/src/components/transformMatrixBase.js @@ -1,5 +1,6 @@ import KUTE from '../objects/kute.js' -import {numbers,arrays} from '../objects/interpolate.js' +import numbers from '../interpolation/numbers.js' +import arrays from '../interpolation/arrays.js' // const transformMatrix = { property : 'transform', defaultValue: {}, interpolators: {} }, functions = { prepareStart, prepareProperty, onStart, crossCheck } diff --git a/src/easing/easing-base.js b/src/easing/easing-base.js index 2b104b1..59ea57a 100644 --- a/src/easing/easing-base.js +++ b/src/easing/easing-base.js @@ -1,37 +1,27 @@ -import Util from '../objects/util.js' - -// Robert Penner's Easing Functions -export function linear (t) { return t; } -export function easingQuadraticIn (t) { return t*t; } -export function easingQuadraticOut (t) { return t*(2-t); } -export function easingQuadraticInOut (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; } -export function easingCubicIn (t) { return t*t*t; } -export function easingCubicOut (t) { return (--t)*t*t+1; } -export function easingCubicInOut (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; } -export function easingCircularIn (t) { return -(Math.sqrt(1 - (t * t)) - 1); } -export function easingCircularOut (t) { return Math.sqrt(1 - (t = t - 1) * t); } -export function easingCircularInOut (t) { return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); } -export function easingBackIn (t) { const s = 1.70158; return t * t * ((s + 1) * t - s); } -export function easingBackOut (t) { const s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; } -export function easingBackInOut (t) { const s = 1.70158 * 1.525; if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s)); return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2); } +import connect from '../objects/connect.js' +// Select Robert Penner's Easing Functions const 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 : (t) => t, + easingQuadraticIn : (t) => t*t, + easingQuadraticOut : (t) => t*(2-t), + easingQuadraticInOut : (t) => t<.5 ? 2*t*t : -1+(4-2*t)*t, + easingCubicIn : (t) => t*t*t, + easingCubicOut : (t) => (--t)*t*t+1, + easingCubicInOut : (t) => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1, + easingCircularIn : (t) => -(Math.sqrt(1 - (t * t)) - 1), + easingCircularOut : (t) => Math.sqrt(1 - (t = t - 1) * t), + easingCircularInOut : (t) => ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1), + easingBackIn : (t) => { const s = 1.70158; return t * t * ((s + 1) * t - s) }, + easingBackOut : (t) => { const s = 1.70158; return --t * t * ((s + 1) * t + s) + 1 }, + easingBackInOut : (t) => { + const s = 1.70158 * 1.525; + if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s)) + return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2) + } } -export function processEasing(fn) { +function processEasing(fn) { if ( typeof fn === 'function') { return fn; } else if ( typeof Easing[fn] === 'function' ) { @@ -41,7 +31,6 @@ export function processEasing(fn) { } } -// Tween constructor needs to know who will process easing functions -Util.processEasing = processEasing +connect.processEasing = processEasing export default Easing \ No newline at end of file diff --git a/src/easing/easing-bezier.js b/src/easing/easing-bezier.js index 5bcecef..fa747d7 100644 --- a/src/easing/easing-bezier.js +++ b/src/easing/easing-bezier.js @@ -1,4 +1,4 @@ -import Util from '../objects/util.js' +import connect from '../objects/connect.js' import CubicBezier from 'cubic-bezier-easing' const Easing = { @@ -36,7 +36,7 @@ const Easing = { easingBackInOut : new CubicBezier(0.68, -0.55, 0.265, 1.55,'easingBackInOut') } -export function processBezierEasing(fn) { +function processBezierEasing(fn) { if ( typeof fn === 'function') { return fn; } else if (typeof(Easing[fn]) === 'function') { @@ -52,7 +52,6 @@ export function processBezierEasing(fn) { } } -// Tween constructor needs to know who will process easing functions -Util.processEasing = processBezierEasing +connect.processEasing = processBezierEasing export default Easing \ No newline at end of file diff --git a/src/easing/easing.js b/src/easing/easing.js index edd751d..415be1a 100644 --- a/src/easing/easing.js +++ b/src/easing/easing.js @@ -1,101 +1,69 @@ -import Util from '../objects/util.js' +import connect from '../objects/connect.js' // Robert Penner's Easing Functions -export function linear (t) { return t; } -export function easingSinusoidalIn (t) { return -Math.cos(t * Math.PI / 2) + 1; } -export function easingSinusoidalOut (t) { return Math.sin(t * Math.PI / 2); } -export function easingSinusoidalInOut (t) { return -0.5 * (Math.cos(Math.PI * t) - 1); } -export function easingQuadraticIn (t) { return t*t; } -export function easingQuadraticOut (t) { return t*(2-t); } -export function easingQuadraticInOut (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; } -export function easingCubicIn (t) { return t*t*t; } -export function easingCubicOut (t) { return (--t)*t*t+1; } -export function easingCubicInOut (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; } -export function easingQuarticIn (t) { return t*t*t*t; } -export function easingQuarticOut (t) { return 1-(--t)*t*t*t; } -export function easingQuarticInOut (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; } -export function easingQuinticIn (t) { return t*t*t*t*t; } -export function easingQuinticOut (t) { return 1+(--t)*t*t*t*t; } -export function easingQuinticInOut (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; } -export function easingCircularIn (t) { return -(Math.sqrt(1 - (t * t)) - 1); } -export function easingCircularOut (t) { return Math.sqrt(1 - (t = t - 1) * t); } -export function easingCircularInOut (t) { return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); } -export function easingExponentialIn (t) { return 2 ** (10 * (t - 1)) - 0.001; } -export function easingExponentialOut (t) { return 1 - 2 ** (-10 * t); } -export function easingExponentialInOut (t) { return (t *= 2) < 1 ? 0.5 * (2 ** (10 * (t - 1))) : 0.5 * (2 - 2 ** (-10 * (t - 1))); } -export function easingBackIn (t) { const s = 1.70158; return t * t * ((s + 1) * t - s); } -export function easingBackOut (t) { const s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; } -export function easingBackInOut (t) { const s = 1.70158 * 1.525; if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s)); return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2); } -export function easingElasticIn (t) { - let s; - let _kea = 0.1; - const _kep = 0.4; - if ( t === 0 ) return 0;if ( t === 1 ) return 1; - if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2; - return - ( _kea * (2 ** (10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) ); -} -export function easingElasticOut (t) { - let s; - let _kea = 0.1; - const _kep = 0.4; - if ( t === 0 ) return 0;if ( t === 1 ) return 1; - if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ; - return _kea * (2 ** (- 10 * t)) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) + 1; -} -export function easingElasticInOut (t) { - let s; - let _kea = 0.1; - const _kep = 0.4; - if ( t === 0 ) return 0;if ( t === 1 ) return 1; - if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 ; - if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * (2 ** (10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) ); - return _kea * (2 ** (-10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) * 0.5 + 1; -} -export function easingBounceIn (t) { return 1 - easingBounceOut( 1 - t ); } -export function easingBounceInOut (t) { if ( t < 0.5 ) return easingBounceIn( t * 2 ) * 0.5; return easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;} -export function easingBounceOut (t) { - if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; } - else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; } - else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; } - else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; } -} - - const Easing = { - linear : linear, - easingSinusoidalIn : easingSinusoidalIn, - easingSinusoidalOut : easingSinusoidalOut, - easingSinusoidalInOut : easingSinusoidalInOut, - easingQuadraticIn : easingQuadraticIn, - easingQuadraticOut : easingQuadraticOut, - easingQuadraticInOut : easingQuadraticInOut, - easingCubicIn : easingCubicIn, - easingCubicOut : easingCubicOut, - easingCubicInOut : easingCubicInOut, - easingQuarticIn : easingQuarticIn, - easingQuarticOut : easingQuarticOut, - easingQuarticInOut : easingQuarticInOut, - easingQuinticIn : easingQuinticIn, - easingQuinticOut : easingQuinticOut, - easingQuinticInOut : easingQuinticInOut, - easingCircularIn : easingCircularIn, - easingCircularOut : easingCircularOut, - easingCircularInOut : easingCircularInOut, - easingExponentialIn : easingExponentialIn, - easingExponentialOut : easingExponentialOut, - easingExponentialInOut : easingExponentialInOut, - easingBackIn : easingBackIn, - easingBackOut : easingBackOut, - easingBackInOut : easingBackInOut, - easingElasticIn : easingElasticIn, - easingElasticOut : easingElasticOut, - easingElasticInOut : easingElasticInOut, - easingBounceIn : easingBounceIn, - easingBounceOut : easingBounceOut, - easingBounceInOut : easingBounceInOut + linear : (t) => t, + easingSinusoidalIn : (t) => -Math.cos(t * Math.PI / 2) + 1, + easingSinusoidalOut : (t) => Math.sin(t * Math.PI / 2), + easingSinusoidalInOut : (t) => -0.5 * (Math.cos(Math.PI * t) - 1), + easingQuadraticIn : (t) => t*t, + easingQuadraticOut : (t) => t*(2-t), + easingQuadraticInOut : (t) => t<.5 ? 2*t*t : -1+(4-2*t)*t, + easingCubicIn : (t) => t*t*t, + easingCubicOut : (t) => (--t)*t*t+1, + easingCubicInOut : (t) => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1, + easingQuarticIn : (t) => t*t*t*t, + easingQuarticOut : (t) => 1-(--t)*t*t*t, + easingQuarticInOut : (t) => t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t, + easingQuinticIn : (t) => t*t*t*t*t, + easingQuinticOut : (t) => 1+(--t)*t*t*t*t, + easingQuinticInOut : (t) => t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t, + easingCircularIn : (t) => -(Math.sqrt(1 - (t * t)) - 1), + easingCircularOut : (t) => Math.sqrt(1 - (t = t - 1) * t), + easingCircularInOut : (t) => ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1), + easingExponentialIn : (t) => 2 ** (10 * (t - 1)) - 0.001, + easingExponentialOut : (t) => 1 - 2 ** (-10 * t), + easingExponentialInOut : (t) => (t *= 2) < 1 ? 0.5 * (2 ** (10 * (t - 1))) : 0.5 * (2 - 2 ** (-10 * (t - 1))), + easingBackIn : (t) => { const s = 1.70158; return t * t * ((s + 1) * t - s) }, + easingBackOut : (t) => { const s = 1.70158; return --t * t * ((s + 1) * t + s) + 1 }, + easingBackInOut : (t) => { + const s = 1.70158 * 1.525; + if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s)) + return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2) + }, + easingElasticIn : (t) => { + let s, _kea = 0.1, _kep = 0.4 + if ( t === 0 ) return 0;if ( t === 1 ) return 1 + if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 + return - ( _kea * (2 ** (10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) ) + }, + easingElasticOut : (t) => { + let s, _kea = 0.1, _kep = 0.4 + if ( t === 0 ) return 0;if ( t === 1 ) return 1 + if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 + return _kea * (2 ** (- 10 * t)) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) + 1 + }, + easingElasticInOut : (t) => { + let s, _kea = 0.1, _kep = 0.4 + if ( t === 0 ) return 0;if ( t === 1 ) return 1 + if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / Math.PI * 2 + if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * (2 ** (10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) ) + return _kea * (2 ** (-10 * (t -= 1))) * Math.sin( ( t - s ) * Math.PI * 2 / _kep ) * 0.5 + 1 + }, + easingBounceIn : (t) => { return 1 - Easing.easingBounceOut( 1 - t ) }, + easingBounceOut : (t) => { + if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; } + else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; } + else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; } + else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; } + }, + easingBounceInOut : (t) => { + if ( t < 0.5 ) return Easing.easingBounceIn( t * 2 ) * 0.5; + return Easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5 + } } -export function processEasing(fn) { +function processEasing(fn) { if ( typeof fn === 'function') { return fn; } else if ( typeof Easing[fn] === 'function' ) { @@ -106,6 +74,6 @@ export function processEasing(fn) { } // Tween constructor needs to know who will process easing functions -Util.processEasing = processEasing +connect.processEasing = processEasing export default Easing \ No newline at end of file diff --git a/src/index-base.js b/src/index-base.js index bdc2d89..e26bd9a 100644 --- a/src/index-base.js +++ b/src/index-base.js @@ -4,6 +4,7 @@ import Interpolate from './objects/interpolate.js' import Objects from './objects/objectsBase.js' import Util from './objects/util.js' import Easing from './easing/easing-base.js' +// import Easing from './objects/easing.js' import Internals from './core/internals.js' import Selector from './util/selector.js' diff --git a/src/index-extra.js b/src/index-extra.js index 9f3a0f0..0a8880f 100644 --- a/src/index-extra.js +++ b/src/index-extra.js @@ -8,6 +8,7 @@ import Internals from './core/internals.js' import Process from './process/process.js' import CubicBezier from 'cubic-bezier-easing' import Easing from './easing/easing-bezier.js' +// import Easing from './objects/easing.js' import Selector from './util/selector.js' // TweenConstructor diff --git a/src/index.js b/src/index.js index 1eea790..2477dad 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import Internals from './core/internals.js' import Process from './process/process.js' import CubicBezier from 'cubic-bezier-easing' import Easing from './easing/easing-bezier.js' +// import Easing from './objects/easing.js' import Selector from './util/selector.js' // TweenConstructor diff --git a/src/interface/fromTo.js b/src/interface/fromTo.js index 8be8a08..ff0ae55 100644 --- a/src/interface/fromTo.js +++ b/src/interface/fromTo.js @@ -1,7 +1,7 @@ import selector from '../util/selector.js' -import TC from './tcLink.js' +import connect from '../objects/connect.js' export default 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) } \ No newline at end of file diff --git a/src/interface/tcLink.js b/src/interface/tcLink.js deleted file mode 100644 index d788ba3..0000000 --- a/src/interface/tcLink.js +++ /dev/null @@ -1,3 +0,0 @@ -import TweenConstructor from '../objects/tweenConstructor.js' - -export default TweenConstructor.Tween \ No newline at end of file diff --git a/src/interface/to.js b/src/interface/to.js index d2a64b5..997f89d 100644 --- a/src/interface/to.js +++ b/src/interface/to.js @@ -1,8 +1,8 @@ import selector from '../util/selector.js' -import TC from './tcLink.js' +import connect from '../objects/connect.js' export default 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) } \ No newline at end of file diff --git a/src/interpolation/arrays.js b/src/interpolation/arrays.js new file mode 100644 index 0000000..83ccb9e --- /dev/null +++ b/src/interpolation/arrays.js @@ -0,0 +1,7 @@ +export default function(a,b,v){ + const result = [] + for ( let i=0, l=b.length; i> 0 ) / 1000 + } + return result +} \ No newline at end of file diff --git a/src/interpolation/colors.js b/src/interpolation/colors.js new file mode 100644 index 0000000..7a6d5a5 --- /dev/null +++ b/src/interpolation/colors.js @@ -0,0 +1,13 @@ +import numbers from './numbers.js' + +export default function(a, b, v) { + let _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; +} \ No newline at end of file diff --git a/src/interpolation/coords.js b/src/interpolation/coords.js new file mode 100644 index 0000000..3db2ef6 --- /dev/null +++ b/src/interpolation/coords.js @@ -0,0 +1,10 @@ +export default function(a, b, l, v) { + const points = []; + for(let i=0;i> 0)/1000 ); + } + } + return points; +} \ No newline at end of file diff --git a/src/interpolation/numbers.js b/src/interpolation/numbers.js new file mode 100644 index 0000000..e518ce5 --- /dev/null +++ b/src/interpolation/numbers.js @@ -0,0 +1,3 @@ +export default function(a, b, v) { // number1, number2, progress + a = +a; b -= a; return a + b * v; +} \ No newline at end of file diff --git a/src/interpolation/perspective.js b/src/interpolation/perspective.js new file mode 100644 index 0000000..417ba2d --- /dev/null +++ b/src/interpolation/perspective.js @@ -0,0 +1,3 @@ +export default function(a, b, u, v) { + return `perspective(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` +} \ No newline at end of file diff --git a/src/interpolation/rotate.js b/src/interpolation/rotate.js new file mode 100644 index 0000000..16590e5 --- /dev/null +++ b/src/interpolation/rotate.js @@ -0,0 +1,3 @@ +export default function(a, b, u, v) { + return `rotate(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` +} \ No newline at end of file diff --git a/src/interpolation/rotate3d.js b/src/interpolation/rotate3d.js new file mode 100644 index 0000000..13c375e --- /dev/null +++ b/src/interpolation/rotate3d.js @@ -0,0 +1,7 @@ +export default function(a, b, u, v) { + let 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 +} \ No newline at end of file diff --git a/src/interpolation/scale.js b/src/interpolation/scale.js new file mode 100644 index 0000000..c9d5cbe --- /dev/null +++ b/src/interpolation/scale.js @@ -0,0 +1,3 @@ +export default function(a, b, v) { + return `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`; +} \ No newline at end of file diff --git a/src/interpolation/skew.js b/src/interpolation/skew.js new file mode 100644 index 0000000..d022c71 --- /dev/null +++ b/src/interpolation/skew.js @@ -0,0 +1,6 @@ +export default function(a, b, u, v) { + let 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(',')})`; +} \ No newline at end of file diff --git a/src/interpolation/skewX.js b/src/interpolation/skewX.js new file mode 100644 index 0000000..32a9bba --- /dev/null +++ b/src/interpolation/skewX.js @@ -0,0 +1,3 @@ +export default function(a, b, u, v) { + return `skewX(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` +} \ No newline at end of file diff --git a/src/interpolation/skewY.js b/src/interpolation/skewY.js new file mode 100644 index 0000000..433e5af --- /dev/null +++ b/src/interpolation/skewY.js @@ -0,0 +1,3 @@ +export default function(a, b, u, v) { + return `skewY(${((a + (b - a) * v) * 1000 >> 0 ) / 1000}${u})` +} \ No newline at end of file diff --git a/src/interpolation/translate.js b/src/interpolation/translate.js new file mode 100644 index 0000000..8799489 --- /dev/null +++ b/src/interpolation/translate.js @@ -0,0 +1,6 @@ +export default function(a, b, u, v) { + let 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(',')})`; +} \ No newline at end of file diff --git a/src/interpolation/translate3d.js b/src/interpolation/translate3d.js new file mode 100644 index 0000000..0b9f212 --- /dev/null +++ b/src/interpolation/translate3d.js @@ -0,0 +1,7 @@ +export default function(a, b, u, v) { + let translateArray = []; + for (let 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(',')})`; +} \ No newline at end of file diff --git a/src/interpolation/units.js b/src/interpolation/units.js new file mode 100644 index 0000000..3f7488b --- /dev/null +++ b/src/interpolation/units.js @@ -0,0 +1,3 @@ +export default function(a, b, u, v) { // number1, number2, unit, progress + a = +a; b -= a; return ( a + b * v ) + u; +} \ No newline at end of file diff --git a/src/objects/Interpolate.js b/src/objects/Interpolate.js index 5f9cffe..1d4f01d 100644 --- a/src/objects/Interpolate.js +++ b/src/objects/Interpolate.js @@ -1,23 +1,3 @@ - // KUTE.js INTERPOLATE FUNCTIONS // ============================= - -export function numbers(a, b, v) { // number1, number2, progress - a = +a; b -= a; return a + b * v; -} -export function units(a, b, u, v) { // number1, number2, unit, progress - a = +a; b -= a; return ( a + b * v ) + u; -} -export function arrays(a,b,v){ - const result = [] - for ( let i=0, l=b.length; i> 0 ) / 1000 - } - return result -} - -export default { - numbers, - units, - arrays -} \ No newline at end of file +export default {} \ No newline at end of file diff --git a/src/objects/Objects.js b/src/objects/Objects.js index 57b26b4..9f12c03 100644 --- a/src/objects/Objects.js +++ b/src/objects/Objects.js @@ -7,6 +7,7 @@ import crossCheck from './crossCheck.js' import onStart from './onStart.js' import onComplete from './onComplete.js' import linkProperty from './linkProperty.js' +// import connect from './connect.js' export default { supportedProperties, diff --git a/src/objects/ObjectsBase.js b/src/objects/ObjectsBase.js index 76059fc..f0e27fe 100644 --- a/src/objects/ObjectsBase.js +++ b/src/objects/ObjectsBase.js @@ -7,5 +7,5 @@ export default { defaultOptions, linkProperty, onStart, - onComplete, + onComplete } \ No newline at end of file diff --git a/src/objects/TweenConstructor.js b/src/objects/connect.js similarity index 100% rename from src/objects/TweenConstructor.js rename to src/objects/connect.js diff --git a/src/tween/tween.js b/src/tween/tween.js index c0d6510..35cadd7 100644 --- a/src/tween/tween.js +++ b/src/tween/tween.js @@ -1,7 +1,7 @@ import KUTE from '../objects/kute.js' -import TweenConstructor from '../objects/tweenConstructor.js' import TweenBase from './tweenBase.js' +import connect from '../objects/connect.js' import add from '../core/add.js' import remove from '../core/remove.js' import defaultOptions from '../objects/defaultOptions.js' @@ -221,4 +221,4 @@ export default class Tween extends TweenBase { } // Update Tween Interface Update -TweenConstructor.Tween = Tween \ No newline at end of file +connect.tween = Tween \ No newline at end of file diff --git a/src/tween/tweenBase.js b/src/tween/tweenBase.js index c73f1ad..eeb3101 100644 --- a/src/tween/tweenBase.js +++ b/src/tween/tweenBase.js @@ -1,9 +1,8 @@ import KUTE from '../objects/kute.js' -import TweenConstructor from '../objects/tweenConstructor.js' +import connect from '../objects/connect.js' import onStart from '../objects/onStart.js' import onComplete from '../objects/onComplete.js' import defaultOptions from '../objects/defaultOptions.js' -import Util from '../objects/util.js' import {Tick,Ticker,stop} from '../core/render.js' @@ -33,7 +32,7 @@ export default class TweenBase { // used by to() method and expects object : {} / false this._resetStart = options.resetStart || 0; // you can only set a core easing function as default - 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; // duration option | default this._delay = options.delay || defaultOptions.delay; // delay option | default @@ -173,4 +172,4 @@ export default class TweenBase { } // Update Tween Interface -TweenConstructor.Tween = TweenBase \ No newline at end of file +connect.tween = TweenBase \ No newline at end of file diff --git a/src/tween/tweenCollection.js b/src/tween/tweenCollection.js index 48012aa..101e2e2 100644 --- a/src/tween/tweenCollection.js +++ b/src/tween/tweenCollection.js @@ -1,6 +1,6 @@ import KUTE from '../objects/kute.js' import defaultOptions from '../objects/defaultOptions.js' -import TC from '../interface/tcLink.js' +import connect from '../objects/connect.js' // KUTE.js Tween Collection // ======================== @@ -22,7 +22,7 @@ export default class TweenCollection { options[i] = Ops || {}; options[i].delay = i > 0 ? Ops.delay + (Ops.offset||defaultOptions.offset) : Ops.delay; if (el instanceof Element) { - this.tweens.push( new TC(el, vS, vE, options[i]) ); + this.tweens.push( new connect.tween(el, vS, vE, options[i]) ); } else { console.error(`KUTE.js - ${el} not instanceof [Element]`) } @@ -52,7 +52,7 @@ export default class TweenCollection { let 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') diff --git a/src/tween/tweenExtra.js b/src/tween/tweenExtra.js index f388072..7cae999 100644 --- a/src/tween/tweenExtra.js +++ b/src/tween/tweenExtra.js @@ -1,4 +1,4 @@ -import TweenConstructor from '../objects/tweenConstructor.js' +import connect from '../objects/connect.js' import Tween from './tween.js' // to do @@ -42,4 +42,4 @@ export default class TweenExtra extends Tween { } // Tween Interface -TweenConstructor.Tween = TweenExtra \ No newline at end of file +connect.tween = TweenExtra \ No newline at end of file diff --git a/src/util/progressBar.js b/src/util/progressBar.js index 14276b4..926677a 100644 --- a/src/util/progressBar.js +++ b/src/util/progressBar.js @@ -1,5 +1,5 @@ import KUTE from '../objects/kute.js' -import TweenConstructor from '../objects/tweenConstructor.js' +import connect from '../objects/connect.js' import selector from './selector.js' export default class ProgressBar { @@ -13,7 +13,7 @@ export default class ProgressBar { // invalidate 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) From f1dbb2d996e547e47bdbbd45f4eac273335eeab2 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Jun 2020 09:31:19 +0000 Subject: [PATCH 393/471] --- src/index-base.js | 1 - src/index-extra.js | 1 - src/index.js | 1 - 3 files changed, 3 deletions(-) diff --git a/src/index-base.js b/src/index-base.js index e26bd9a..bdc2d89 100644 --- a/src/index-base.js +++ b/src/index-base.js @@ -4,7 +4,6 @@ import Interpolate from './objects/interpolate.js' import Objects from './objects/objectsBase.js' import Util from './objects/util.js' import Easing from './easing/easing-base.js' -// import Easing from './objects/easing.js' import Internals from './core/internals.js' import Selector from './util/selector.js' diff --git a/src/index-extra.js b/src/index-extra.js index 0a8880f..9f3a0f0 100644 --- a/src/index-extra.js +++ b/src/index-extra.js @@ -8,7 +8,6 @@ import Internals from './core/internals.js' import Process from './process/process.js' import CubicBezier from 'cubic-bezier-easing' import Easing from './easing/easing-bezier.js' -// import Easing from './objects/easing.js' import Selector from './util/selector.js' // TweenConstructor diff --git a/src/index.js b/src/index.js index 2477dad..1eea790 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,6 @@ import Internals from './core/internals.js' import Process from './process/process.js' import CubicBezier from 'cubic-bezier-easing' import Easing from './easing/easing-bezier.js' -// import Easing from './objects/easing.js' import Selector from './util/selector.js' // TweenConstructor From 2119e600ef17ba5106209ad835bbda773c10ff04 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Jun 2020 10:07:20 +0000 Subject: [PATCH 394/471] --- src/core/Render.js | 72 ---------------------------------------------- 1 file changed, 72 deletions(-) delete mode 100644 src/core/Render.js diff --git a/src/core/Render.js b/src/core/Render.js deleted file mode 100644 index 0b4013a..0000000 --- a/src/core/Render.js +++ /dev/null @@ -1,72 +0,0 @@ -import KUTE from '../objects/kute.js' -import Tweens from '../objects/tweens.js' -import globalObject from '../objects/globalObject.js' -import Interpolate from '../objects/interpolate.js' -import onStart from '../objects/onStart.js' - -const Time = {} - -// In node.js, use process.hrtime. -if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) { - Time.now = function () { - var time = process.hrtime(); - return time[0] * 1000 + time[1] / 1000000; - }; -// In a browser, use self.performance.now if it is available. -} else if (typeof (self) !== 'undefined' && - self.performance !== undefined && - self.performance.now !== undefined) { - Time.now = self.performance.now.bind(self.performance); -} - -// export {Time} - -let Tick = 0 -export {Tick} - -let Ticker = (time) => { - let i = 0; - while ( i < Tweens.length ) { - if ( Tweens[i].update(time) ) { - i++; - } else { - Tweens.splice(i, 1); - } - } - Tick = requestAnimationFrame(Ticker); -} -export {Ticker} - - -// stop requesting animation frame -export function stop() { - setTimeout(() => { // re-added for #81 - if (!Tweens.length && Tick) { - cancelAnimationFrame(Tick); - Tick = null; - for (let obj in onStart) { - if (typeof (onStart[obj]) === 'function') { - KUTE[obj] && (delete KUTE[obj]) - } else { - for (let prop in onStart[obj]) { - KUTE[prop] && (delete KUTE[prop]) - } - } - } - for (let i in Interpolate) { - KUTE[i] && (delete KUTE[i]) - } - } - },64) -} - -// KUTE.js render update functions -// =============================== -const Render = {Tick,Ticker,Tweens,Time} -for ( const blob in Render ) { - if (!KUTE[blob]) { - KUTE[blob] = blob === 'Time' ? Time.now : Render[blob]; - } -} -export default Render -globalObject[`_KUTE`] = KUTE \ No newline at end of file From ac5c5355b7aeea1078ddf21060703023d2d7e6f6 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Jun 2020 10:07:50 +0000 Subject: [PATCH 395/471] --- src/core/render.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/core/render.js diff --git a/src/core/render.js b/src/core/render.js new file mode 100644 index 0000000..0b4013a --- /dev/null +++ b/src/core/render.js @@ -0,0 +1,72 @@ +import KUTE from '../objects/kute.js' +import Tweens from '../objects/tweens.js' +import globalObject from '../objects/globalObject.js' +import Interpolate from '../objects/interpolate.js' +import onStart from '../objects/onStart.js' + +const Time = {} + +// In node.js, use process.hrtime. +if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) { + Time.now = function () { + var time = process.hrtime(); + return time[0] * 1000 + time[1] / 1000000; + }; +// In a browser, use self.performance.now if it is available. +} else if (typeof (self) !== 'undefined' && + self.performance !== undefined && + self.performance.now !== undefined) { + Time.now = self.performance.now.bind(self.performance); +} + +// export {Time} + +let Tick = 0 +export {Tick} + +let Ticker = (time) => { + let i = 0; + while ( i < Tweens.length ) { + if ( Tweens[i].update(time) ) { + i++; + } else { + Tweens.splice(i, 1); + } + } + Tick = requestAnimationFrame(Ticker); +} +export {Ticker} + + +// stop requesting animation frame +export function stop() { + setTimeout(() => { // re-added for #81 + if (!Tweens.length && Tick) { + cancelAnimationFrame(Tick); + Tick = null; + for (let obj in onStart) { + if (typeof (onStart[obj]) === 'function') { + KUTE[obj] && (delete KUTE[obj]) + } else { + for (let prop in onStart[obj]) { + KUTE[prop] && (delete KUTE[prop]) + } + } + } + for (let i in Interpolate) { + KUTE[i] && (delete KUTE[i]) + } + } + },64) +} + +// KUTE.js render update functions +// =============================== +const Render = {Tick,Ticker,Tweens,Time} +for ( const blob in Render ) { + if (!KUTE[blob]) { + KUTE[blob] = blob === 'Time' ? Time.now : Render[blob]; + } +} +export default Render +globalObject[`_KUTE`] = KUTE \ No newline at end of file From 0e2da1baa12443b4a49e31311c3f2df07ed9a0e6 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Jun 2020 10:08:45 +0000 Subject: [PATCH 396/471] --- src/objects/Components.js | 1 - src/objects/Interpolate.js | 3 --- src/objects/KUTE.js | 1 - src/objects/Objects.js | 22 ---------------------- src/objects/ObjectsBase.js | 11 ----------- src/objects/Tweens.js | 1 - src/objects/Util.js | 2 -- src/objects/connect.js | 1 - src/objects/crossCheck.js | 5 ----- src/objects/defaultOptions.js | 6 ------ src/objects/defaultValues.js | 1 - src/objects/globalObject.js | 5 ----- src/objects/linkProperty.js | 2 -- src/objects/onComplete.js | 2 -- src/objects/onStart.js | 3 --- src/objects/prepareProperty.js | 2 -- src/objects/prepareStart.js | 2 -- src/objects/supportedProperties.js | 1 - 18 files changed, 71 deletions(-) delete mode 100644 src/objects/Components.js delete mode 100644 src/objects/Interpolate.js delete mode 100644 src/objects/KUTE.js delete mode 100644 src/objects/Objects.js delete mode 100644 src/objects/ObjectsBase.js delete mode 100644 src/objects/Tweens.js delete mode 100644 src/objects/Util.js delete mode 100644 src/objects/connect.js delete mode 100644 src/objects/crossCheck.js delete mode 100644 src/objects/defaultOptions.js delete mode 100644 src/objects/defaultValues.js delete mode 100644 src/objects/globalObject.js delete mode 100644 src/objects/linkProperty.js delete mode 100644 src/objects/onComplete.js delete mode 100644 src/objects/onStart.js delete mode 100644 src/objects/prepareProperty.js delete mode 100644 src/objects/prepareStart.js delete mode 100644 src/objects/supportedProperties.js diff --git a/src/objects/Components.js b/src/objects/Components.js deleted file mode 100644 index 56004c9..0000000 --- a/src/objects/Components.js +++ /dev/null @@ -1 +0,0 @@ -export default {} \ No newline at end of file diff --git a/src/objects/Interpolate.js b/src/objects/Interpolate.js deleted file mode 100644 index 1d4f01d..0000000 --- a/src/objects/Interpolate.js +++ /dev/null @@ -1,3 +0,0 @@ -// KUTE.js INTERPOLATE FUNCTIONS -// ============================= -export default {} \ No newline at end of file diff --git a/src/objects/KUTE.js b/src/objects/KUTE.js deleted file mode 100644 index 56004c9..0000000 --- a/src/objects/KUTE.js +++ /dev/null @@ -1 +0,0 @@ -export default {} \ No newline at end of file diff --git a/src/objects/Objects.js b/src/objects/Objects.js deleted file mode 100644 index 9f12c03..0000000 --- a/src/objects/Objects.js +++ /dev/null @@ -1,22 +0,0 @@ -import supportedProperties from './supportedProperties.js' -import defaultValues from './defaultValues.js' -import defaultOptions from './defaultOptions.js' -import prepareProperty from './prepareProperty.js' -import prepareStart from './prepareStart.js' -import crossCheck from './crossCheck.js' -import onStart from './onStart.js' -import onComplete from './onComplete.js' -import linkProperty from './linkProperty.js' -// import connect from './connect.js' - -export default { - supportedProperties, - defaultValues, - defaultOptions, - prepareProperty, - prepareStart, - crossCheck, - onStart, - onComplete, - linkProperty -} \ No newline at end of file diff --git a/src/objects/ObjectsBase.js b/src/objects/ObjectsBase.js deleted file mode 100644 index f0e27fe..0000000 --- a/src/objects/ObjectsBase.js +++ /dev/null @@ -1,11 +0,0 @@ -import defaultOptions from './defaultOptions.js' -import linkProperty from './linkProperty.js' -import onStart from './onStart.js' -import onComplete from './onComplete.js' - -export default { - defaultOptions, - linkProperty, - onStart, - onComplete -} \ No newline at end of file diff --git a/src/objects/Tweens.js b/src/objects/Tweens.js deleted file mode 100644 index 4ad71d6..0000000 --- a/src/objects/Tweens.js +++ /dev/null @@ -1 +0,0 @@ -export default [] \ No newline at end of file diff --git a/src/objects/Util.js b/src/objects/Util.js deleted file mode 100644 index 1166ac0..0000000 --- a/src/objects/Util.js +++ /dev/null @@ -1,2 +0,0 @@ -// util - a general object for utils like rgbToHex, processEasing -export default {} \ No newline at end of file diff --git a/src/objects/connect.js b/src/objects/connect.js deleted file mode 100644 index 56004c9..0000000 --- a/src/objects/connect.js +++ /dev/null @@ -1 +0,0 @@ -export default {} \ No newline at end of file diff --git a/src/objects/crossCheck.js b/src/objects/crossCheck.js deleted file mode 100644 index 90bb579..0000000 --- a/src/objects/crossCheck.js +++ /dev/null @@ -1,5 +0,0 @@ -// checks for differences between the processed start and end values, -// can be set to make sure start unit and end unit are same, -// stack transforms, process SVG paths, -// any type of post processing the component needs -export default {} \ No newline at end of file diff --git a/src/objects/defaultOptions.js b/src/objects/defaultOptions.js deleted file mode 100644 index 0aa0121..0000000 --- a/src/objects/defaultOptions.js +++ /dev/null @@ -1,6 +0,0 @@ -let defaultOptions = { - duration: 700, - delay: 0, - easing: 'linear' -} -export default defaultOptions \ No newline at end of file diff --git a/src/objects/defaultValues.js b/src/objects/defaultValues.js deleted file mode 100644 index 56004c9..0000000 --- a/src/objects/defaultValues.js +++ /dev/null @@ -1 +0,0 @@ -export default {} \ No newline at end of file diff --git a/src/objects/globalObject.js b/src/objects/globalObject.js deleted file mode 100644 index 43d4f63..0000000 --- a/src/objects/globalObject.js +++ /dev/null @@ -1,5 +0,0 @@ -const globalObject = typeof (global) !== 'undefined' ? global - : typeof(self) !== 'undefined' ? self - : typeof(window) !== 'undefined' ? window : {} - -export default globalObject \ No newline at end of file diff --git a/src/objects/linkProperty.js b/src/objects/linkProperty.js deleted file mode 100644 index 36927ae..0000000 --- a/src/objects/linkProperty.js +++ /dev/null @@ -1,2 +0,0 @@ -// link properties to interpolate functions -export default {} \ No newline at end of file diff --git a/src/objects/onComplete.js b/src/objects/onComplete.js deleted file mode 100644 index 504a429..0000000 --- a/src/objects/onComplete.js +++ /dev/null @@ -1,2 +0,0 @@ -// schedule property specific function on animation complete -export default {} \ No newline at end of file diff --git a/src/objects/onStart.js b/src/objects/onStart.js deleted file mode 100644 index 7b3c18a..0000000 --- a/src/objects/onStart.js +++ /dev/null @@ -1,3 +0,0 @@ -// schedule property specific function on animation start -// link property update function to KUTE.js execution context -export default {} \ No newline at end of file diff --git a/src/objects/prepareProperty.js b/src/objects/prepareProperty.js deleted file mode 100644 index 76739f0..0000000 --- a/src/objects/prepareProperty.js +++ /dev/null @@ -1,2 +0,0 @@ -// used in preparePropertiesObject -export default {} \ No newline at end of file diff --git a/src/objects/prepareStart.js b/src/objects/prepareStart.js deleted file mode 100644 index 2b168ea..0000000 --- a/src/objects/prepareStart.js +++ /dev/null @@ -1,2 +0,0 @@ -// check current property value when .to() method is used -export default {} \ No newline at end of file diff --git a/src/objects/supportedProperties.js b/src/objects/supportedProperties.js deleted file mode 100644 index 56004c9..0000000 --- a/src/objects/supportedProperties.js +++ /dev/null @@ -1 +0,0 @@ -export default {} \ No newline at end of file From 591871079bba77993dd1cece9de767b9f0dfa2bc Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Jun 2020 10:13:17 +0000 Subject: [PATCH 397/471] Add files via upload --- src/objects/components.js | 1 + src/objects/connect.js | 1 + src/objects/crossCheck.js | 5 +++++ src/objects/defaultOptions.js | 6 ++++++ src/objects/defaultValues.js | 1 + src/objects/globalObject.js | 5 +++++ src/objects/interpolate.js | 3 +++ src/objects/kute.js | 1 + src/objects/linkProperty.js | 2 ++ src/objects/objects.js | 22 ++++++++++++++++++++++ src/objects/objectsBase.js | 11 +++++++++++ src/objects/onComplete.js | 2 ++ src/objects/onStart.js | 3 +++ src/objects/prepareProperty.js | 2 ++ src/objects/prepareStart.js | 2 ++ src/objects/supportedProperties.js | 1 + src/objects/tweens.js | 1 + src/objects/util.js | 2 ++ 18 files changed, 71 insertions(+) create mode 100644 src/objects/components.js create mode 100644 src/objects/connect.js create mode 100644 src/objects/crossCheck.js create mode 100644 src/objects/defaultOptions.js create mode 100644 src/objects/defaultValues.js create mode 100644 src/objects/globalObject.js create mode 100644 src/objects/interpolate.js create mode 100644 src/objects/kute.js create mode 100644 src/objects/linkProperty.js create mode 100644 src/objects/objects.js create mode 100644 src/objects/objectsBase.js create mode 100644 src/objects/onComplete.js create mode 100644 src/objects/onStart.js create mode 100644 src/objects/prepareProperty.js create mode 100644 src/objects/prepareStart.js create mode 100644 src/objects/supportedProperties.js create mode 100644 src/objects/tweens.js create mode 100644 src/objects/util.js diff --git a/src/objects/components.js b/src/objects/components.js new file mode 100644 index 0000000..56004c9 --- /dev/null +++ b/src/objects/components.js @@ -0,0 +1 @@ +export default {} \ No newline at end of file diff --git a/src/objects/connect.js b/src/objects/connect.js new file mode 100644 index 0000000..56004c9 --- /dev/null +++ b/src/objects/connect.js @@ -0,0 +1 @@ +export default {} \ No newline at end of file diff --git a/src/objects/crossCheck.js b/src/objects/crossCheck.js new file mode 100644 index 0000000..90bb579 --- /dev/null +++ b/src/objects/crossCheck.js @@ -0,0 +1,5 @@ +// checks for differences between the processed start and end values, +// can be set to make sure start unit and end unit are same, +// stack transforms, process SVG paths, +// any type of post processing the component needs +export default {} \ No newline at end of file diff --git a/src/objects/defaultOptions.js b/src/objects/defaultOptions.js new file mode 100644 index 0000000..0aa0121 --- /dev/null +++ b/src/objects/defaultOptions.js @@ -0,0 +1,6 @@ +let defaultOptions = { + duration: 700, + delay: 0, + easing: 'linear' +} +export default defaultOptions \ No newline at end of file diff --git a/src/objects/defaultValues.js b/src/objects/defaultValues.js new file mode 100644 index 0000000..56004c9 --- /dev/null +++ b/src/objects/defaultValues.js @@ -0,0 +1 @@ +export default {} \ No newline at end of file diff --git a/src/objects/globalObject.js b/src/objects/globalObject.js new file mode 100644 index 0000000..43d4f63 --- /dev/null +++ b/src/objects/globalObject.js @@ -0,0 +1,5 @@ +const globalObject = typeof (global) !== 'undefined' ? global + : typeof(self) !== 'undefined' ? self + : typeof(window) !== 'undefined' ? window : {} + +export default globalObject \ No newline at end of file diff --git a/src/objects/interpolate.js b/src/objects/interpolate.js new file mode 100644 index 0000000..1d4f01d --- /dev/null +++ b/src/objects/interpolate.js @@ -0,0 +1,3 @@ +// KUTE.js INTERPOLATE FUNCTIONS +// ============================= +export default {} \ No newline at end of file diff --git a/src/objects/kute.js b/src/objects/kute.js new file mode 100644 index 0000000..56004c9 --- /dev/null +++ b/src/objects/kute.js @@ -0,0 +1 @@ +export default {} \ No newline at end of file diff --git a/src/objects/linkProperty.js b/src/objects/linkProperty.js new file mode 100644 index 0000000..36927ae --- /dev/null +++ b/src/objects/linkProperty.js @@ -0,0 +1,2 @@ +// link properties to interpolate functions +export default {} \ No newline at end of file diff --git a/src/objects/objects.js b/src/objects/objects.js new file mode 100644 index 0000000..9f12c03 --- /dev/null +++ b/src/objects/objects.js @@ -0,0 +1,22 @@ +import supportedProperties from './supportedProperties.js' +import defaultValues from './defaultValues.js' +import defaultOptions from './defaultOptions.js' +import prepareProperty from './prepareProperty.js' +import prepareStart from './prepareStart.js' +import crossCheck from './crossCheck.js' +import onStart from './onStart.js' +import onComplete from './onComplete.js' +import linkProperty from './linkProperty.js' +// import connect from './connect.js' + +export default { + supportedProperties, + defaultValues, + defaultOptions, + prepareProperty, + prepareStart, + crossCheck, + onStart, + onComplete, + linkProperty +} \ No newline at end of file diff --git a/src/objects/objectsBase.js b/src/objects/objectsBase.js new file mode 100644 index 0000000..f0e27fe --- /dev/null +++ b/src/objects/objectsBase.js @@ -0,0 +1,11 @@ +import defaultOptions from './defaultOptions.js' +import linkProperty from './linkProperty.js' +import onStart from './onStart.js' +import onComplete from './onComplete.js' + +export default { + defaultOptions, + linkProperty, + onStart, + onComplete +} \ No newline at end of file diff --git a/src/objects/onComplete.js b/src/objects/onComplete.js new file mode 100644 index 0000000..504a429 --- /dev/null +++ b/src/objects/onComplete.js @@ -0,0 +1,2 @@ +// schedule property specific function on animation complete +export default {} \ No newline at end of file diff --git a/src/objects/onStart.js b/src/objects/onStart.js new file mode 100644 index 0000000..7b3c18a --- /dev/null +++ b/src/objects/onStart.js @@ -0,0 +1,3 @@ +// schedule property specific function on animation start +// link property update function to KUTE.js execution context +export default {} \ No newline at end of file diff --git a/src/objects/prepareProperty.js b/src/objects/prepareProperty.js new file mode 100644 index 0000000..76739f0 --- /dev/null +++ b/src/objects/prepareProperty.js @@ -0,0 +1,2 @@ +// used in preparePropertiesObject +export default {} \ No newline at end of file diff --git a/src/objects/prepareStart.js b/src/objects/prepareStart.js new file mode 100644 index 0000000..2b168ea --- /dev/null +++ b/src/objects/prepareStart.js @@ -0,0 +1,2 @@ +// check current property value when .to() method is used +export default {} \ No newline at end of file diff --git a/src/objects/supportedProperties.js b/src/objects/supportedProperties.js new file mode 100644 index 0000000..56004c9 --- /dev/null +++ b/src/objects/supportedProperties.js @@ -0,0 +1 @@ +export default {} \ No newline at end of file diff --git a/src/objects/tweens.js b/src/objects/tweens.js new file mode 100644 index 0000000..4ad71d6 --- /dev/null +++ b/src/objects/tweens.js @@ -0,0 +1 @@ +export default [] \ No newline at end of file diff --git a/src/objects/util.js b/src/objects/util.js new file mode 100644 index 0000000..1166ac0 --- /dev/null +++ b/src/objects/util.js @@ -0,0 +1,2 @@ +// util - a general object for utils like rgbToHex, processEasing +export default {} \ No newline at end of file From 918d566d1e253d268bfab3d88eb181a678e99d39 Mon Sep 17 00:00:00 2001 From: thednp Date: Sat, 20 Jun 2020 10:23:40 +0000 Subject: [PATCH 398/471] --- 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: Sat, 20 Jun 2020 10:24:37 +0000 Subject: [PATCH 399/471] --- demo/src/kute-base.js | 4 ++-- demo/src/kute-base.min.js | 4 ++-- demo/src/kute-extra.js | 4 ++-- demo/src/kute-extra.min.js | 4 ++-- demo/src/kute.min.js | 4 ++-- demo/src/polyfill.min.js | 2 +- dist/polyfill.js | 2 +- dist/polyfill.min.js | 2 +- package.json | 2 +- 9 files changed, 14 insertions(+), 14 deletions(-) diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js index 9046cfb..aff7481 100644 --- a/demo/src/kute-base.js +++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index 6d7686a..38889df 100644 --- a/demo/src/kute-base.min.js +++ b/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js index 9d0b5ce..96129c9 100644 --- a/demo/src/kute-extra.js +++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index 87f5cb9..5573924 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js index 58142bc..aa00c7d 100644 --- a/demo/src/kute.min.js +++ b/demo/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/demo/src/polyfill.min.js b/demo/src/polyfill.min.js index ff92dfc..f710963 100644 --- a/demo/src/polyfill.min.js +++ b/demo/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);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: Tue, 23 Jun 2020 16:37:54 +0000 Subject: [PATCH 400/471] --- 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 000af8a625b4b2f6331eca500ddbef10cf2d500f Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 23 Jun 2020 16:38:58 +0000 Subject: [PATCH 401/471] --- demo/opacityProperty.html | 6 +- demo/src/kute-base.js | 17 +-- demo/src/kute-base.min.js | 4 +- demo/src/kute-extra.js | 19 +--- demo/src/kute-extra.min.js | 4 +- demo/src/kute.min.js | 4 +- demo/src/polyfill-legacy.min.js | 3 + demo/src/polyfill.min.js | 2 +- demo/transformFunctions.html | 7 +- demo/transformMatrix.html | 29 ++--- dist/polyfill.js | 2 +- dist/polyfill.min.js | 2 +- package.json | 7 +- rollup.polyfill.js | 4 +- src/components/colorProperties.js | 2 +- src/components/transformFunctions.js | 30 +++-- src/components/transformFunctionsBase.js | 2 - src/components/transformLegacy.js | 134 +++++++++++++++++++++++ src/components/transformLegacyBase.js | 56 ++++++++++ src/core/render.js | 17 +-- src/index.js | 1 + src/process/getInlineStyleLegacy.js | 21 ++++ src/tween/tweenBase.js | 2 +- src/util/polyfill-legacy.js | 20 ++++ src/util/polyfill.js | 1 + src/util/supportLegacyTransform.js | 2 + src/util/transformProperty.js | 2 + 27 files changed, 312 insertions(+), 88 deletions(-) create mode 100644 demo/src/polyfill-legacy.min.js create mode 100644 src/components/transformLegacy.js create mode 100644 src/components/transformLegacyBase.js create mode 100644 src/process/getInlineStyleLegacy.js create mode 100644 src/util/polyfill-legacy.js create mode 100644 src/util/supportLegacyTransform.js create mode 100644 src/util/transformProperty.js diff --git a/demo/opacityProperty.html b/demo/opacityProperty.html index 363efcb..1a6206a 100644 --- a/demo/opacityProperty.html +++ b/demo/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/demo/src/kute-base.js b/demo/src/kute-base.js index aff7481..d52ba3d 100644 --- a/demo/src/kute-base.js +++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index 38889df..16b7088 100644 --- a/demo/src/kute-base.min.js +++ b/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js index 96129c9..23bf318 100644 --- a/demo/src/kute-extra.js +++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index 5573924..0c78553 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js index aa00c7d..5c3793c 100644 --- a/demo/src/kute.min.js +++ b/demo/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/demo/src/polyfill-legacy.min.js b/demo/src/polyfill-legacy.min.js new file mode 100644 index 0000000..79c0cbc --- /dev/null +++ b/demo/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,6 +287,7 @@ var tween2 = KUTE.fromTo( + diff --git a/demo/transformMatrix.html b/demo/transformMatrix.html index 4e29255..6670644 100644 --- a/demo/transformMatrix.html +++ b/demo/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.
        diff --git a/dist/polyfill.js b/dist/polyfill.js index 3d22dbb..325b77b 100644 --- a/dist/polyfill.js +++ b/dist/polyfill.js @@ -1,5 +1,5 @@ /*! - * KUTE.js Polyfill v2.0.7 (http://thednp.github.io/kute.js) + * KUTE.js Polyfill v2.0.8 (http://thednp.github.io/kute.js) * Copyright 2015-2020 © thednp * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE) */ diff --git a/dist/polyfill.min.js b/dist/polyfill.min.js index f710963..fc4d313 100644 --- a/dist/polyfill.min.js +++ b/dist/polyfill.min.js @@ -1,3 +1,3 @@ -// KUTE.js Polyfill v2.0.7 | 2020 © thednp | MIT-License +// KUTE.js Polyfill v2.0.8 | 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 { +supportedColors.map(tweenProp => { defaultColors[tweenProp] = '#000' }); diff --git a/src/components/transformFunctions.js b/src/components/transformFunctions.js index fb220ec..ab3718f 100644 --- a/src/components/transformFunctions.js +++ b/src/components/transformFunctions.js @@ -11,6 +11,7 @@ import skew from '../interpolation/skew.js' import {onStartTransform} from './transformFunctionsBase.js' // const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr +// the component developed for modern browsers supporting non-prefixed transform // Component Functions function getTransform(tweenProperty,value){ @@ -19,31 +20,36 @@ function getTransform(tweenProperty,value){ } function prepareTransform(prop,obj){ let prepAxis = ['X', 'Y', 'Z'], // coordinates - translateArray = [], rotateArray = [], skewArray = [], transformObject = {}, + translateArray = [], rotateArray = [], skewArray = [], arrayFunctions = ['translate3d','translate','rotate3d','skew'] for (const x in obj) { + let pv = typeof obj[x] === 'object' && obj[x].length ? obj[x].map(v=>parseInt(v)) : parseInt(obj[x]); if (arrayFunctions.includes(x)) { - const pv = typeof(obj[x]) === 'object' ? obj[x].map(v=>parseInt(v)) : [parseInt(obj[x]),0] + let propId = x === 'translate' || x === 'rotate' ? `${x}3d` : x; - transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0] - : [pv[0]||0, pv[1]||0,pv[2]||0] // translate3d | rotate3d + transformObject[propId] = x === 'skew' ? (pv.length ? [pv[0]||0, pv[1]||0] : [pv||0,0] ) + : x === 'translate' ? (pv.length ? [pv[0]||0, pv[1]||0, pv[2]||0] : [pv||0,0,0] ) + : [pv[0]||0, pv[1]||0,pv[2]||0] // translate3d | rotate3d } else if ( /[XYZ]/.test(x) ) { - const fn = x.replace(/[XYZ]/,''); - const fnId = fn === 'skew' ? fn : `${fn}3d`; - const fnArray = fn === 'translate' ? translateArray - : fn === 'rotate' ? rotateArray - : fn === 'skew' ? skewArray : {} - for (let fnIndex = 0; fnIndex < 3; fnIndex++) { + let fn = x.replace(/[XYZ]/,''), + fnId = fn === 'skew' ? fn : `${fn}3d`, + fnLen = fn === 'skew' ? 2 : 3, + fnArray = fn === 'translate' ? translateArray + : fn === 'rotate' ? rotateArray + : fn === 'skew' ? skewArray : {} + for (let fnIndex = 0; fnIndex < fnLen; fnIndex++) { const fnAxis = prepAxis[fnIndex]; fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0; } transformObject[fnId] = fnArray; - } else { // scale | rotate | perspective - transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x]) + } else if (x==='rotate') { // rotate + transformObject['rotate3d'] = [0,0,pv] + } else { // scale | perspective + transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv } } return transformObject; diff --git a/src/components/transformFunctionsBase.js b/src/components/transformFunctionsBase.js index da7c940..cac0937 100644 --- a/src/components/transformFunctionsBase.js +++ b/src/components/transformFunctionsBase.js @@ -16,9 +16,7 @@ export function onStartTransform(tweenProp){ elem.style[tweenProp] = (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0 + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z] - + (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y] + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z] - + (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0 + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y] + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0 } diff --git a/src/components/transformLegacy.js b/src/components/transformLegacy.js new file mode 100644 index 0000000..c51b867 --- /dev/null +++ b/src/components/transformLegacy.js @@ -0,0 +1,134 @@ +import defaultValues from '../objects/defaultValues.js' +import Components from '../objects/components.js' +import getInlineStyleLegacy from '../process/getInlineStyleLegacy.js' +import perspective from '../interpolation/perspective.js' +import translate3d from '../interpolation/translate3d.js' +import rotate3d from '../interpolation/rotate3d.js' +import translate from '../interpolation/translate.js' +import rotate from '../interpolation/rotate.js' +import scale from '../interpolation/scale.js' +import skew from '../interpolation/skew.js' + +import support3DTransform from 'shorter-js/src/boolean/support3DTransform.js' +import {onStartLegacyTransform} from './transformLegacyBase.js' +import transformProperty from '../util/transformProperty.js' +import supportTransform from '../util/supportLegacyTransform.js' + + +// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr +// the component to handle all kinds of input values and process according to browser supported API, +// the component that handles all browsers IE9+ + +// Component Functions +function getLegacyTransform(tweenProperty,value){ + const currentStyle = getInlineStyleLegacy(this.element); + return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty]; +} +function prepareLegacyTransform(prop,obj){ + let prepAxis = ['X', 'Y', 'Z'], // coordinates + translateArray = [], rotateArray = [], skewArray = [], + transformObject = {}, + arrayFunctions = ['translate3d','translate','rotate3d','skew'] + + for (const x in obj) { + const pv = typeof(obj[x]) === 'object' && obj[x].length ? obj[x].map(v=>parseInt(v)) : parseInt(obj[x]) + + if (arrayFunctions.includes(x)) { + + if (support3DTransform){ + if (x==='translate3d' || x==='rotate3d') { + transformObject[x] = pv + } else if (x==='translate'){ + transformObject['translate3d'] = pv.length ? pv.concat(0) : [pv||0,0,0] + } else if (x==='rotate'){ + transformObject['rotate3d'] = [0,0,pv||0] + } else if (x==='skew'){ + transformObject[x] = pv.length ? pv : [pv||0,0] + } + } else if (supportTransform) { + if (x==='translate3d') { + transformObject['translate'] = [pv[0]||0,pv[1]||0] + } else if (x==='translate' || x==='skew'){ + transformObject[x] = pv.length ? pv : [pv||0,0] + } else if (x==='rotate3d'){ + transformObject['rotate'] = pv[2]||pv[1]||pv[0] + } else if (x==='rotate'){ + transformObject[x] = pv + } + } + + } else if ( /[XYZ]/.test(x) ) { + let fn = x.replace(/[XYZ]/,''), + fnId = fn === 'skew' || !support3DTransform ? fn : `${fn}3d`, + fnLen = fn === 'skew' || (!support3DTransform && fn === 'translate') ? 2 : 3, + fnArray = fn === 'translate' ? translateArray + : fn === 'rotate' && support3DTransform ? rotateArray + : fn === 'skew' ? skewArray : {} + for (let fnIndex = 0; fnIndex < fnLen; fnIndex++) { + let fnAxis = prepAxis[fnIndex]; + fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0; + } + transformObject[fnId] = support3DTransform ? fnArray : fn === 'rotate' ? fnArray[2]||fnArray[1]||fnArray[0] : fnArray; + } else if (x==='rotate') { // 2d rotate + let pType = support3DTransform ? 'rotate3d' : 'rotate'; + transformObject[pType] = support3DTransform ? [0,0,pv] : pv + } else { // scale | perspective + transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv + } + } + return transformObject; +} + +function crossCheckLegacyTransform(tweenProp){ + if (this.valuesEnd[tweenProp]) { + if ( this.valuesEnd[tweenProp] && support3DTransform) { + if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){ + this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective + } + } + } +} + +// All Component Functions +const transformLegacyFunctions = { + prepareStart: getLegacyTransform, + prepareProperty: prepareLegacyTransform, + onStart: onStartLegacyTransform, + crossCheck: crossCheckLegacyTransform +} + +const legacyTransformValues = { + 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 +} + +const legacyTransformProperties = [ + 'perspective', + 'translate3d', 'translateX', 'translateY', 'translateZ', 'translate', + 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate', + 'skewX', 'skewY', 'skew', + 'scale' +] + +// Full Component +const transformLegacyComponent = { + component: 'transformFunctions', + property: 'transform', + subProperties: legacyTransformProperties, + defaultValues: legacyTransformValues, + functions: transformLegacyFunctions, + Interpolate: { + perspective: perspective, + translate3d: translate3d, + rotate3d: rotate3d, + translate: translate, rotate: rotate, scale: scale, skew: skew + }, + Util: [transformProperty] +} + +export default transformLegacyComponent + +Components.TransformLegacy = transformLegacyComponent diff --git a/src/components/transformLegacyBase.js b/src/components/transformLegacyBase.js new file mode 100644 index 0000000..4f48860 --- /dev/null +++ b/src/components/transformLegacyBase.js @@ -0,0 +1,56 @@ +import KUTE from '../objects/kute.js' +import perspective from '../interpolation/perspective.js' +import translate3d from '../interpolation/translate3d.js' +import rotate3d from '../interpolation/rotate3d.js' +import translate from '../interpolation/translate.js' +import rotate from '../interpolation/rotate.js' +import scale from '../interpolation/scale.js' +import skew from '../interpolation/skew.js' + +import support3DTransform from 'shorter-js/src/boolean/support3DTransform.js' +import supportTransform from '../util/supportLegacyTransform.js' +import transformProperty from '../util/transformProperty.js' + + +// const baseLegacyTransform = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr +// the component that handles all browsers IE9+ + +// Component Functions +export function onStartLegacyTransform(tweenProp){ + if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + if (support3DTransform){ + KUTE[tweenProp] = (elem, a, b, v) => { + elem.style[transformProperty] = + (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0 + + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z] + + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z] + + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y] + + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0 + } + } else if (supportTransform) { + KUTE[tweenProp] = (elem, a, b, v) => { + elem.style[transformProperty] = + (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y] + + ((a.rotate||b.rotate) ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0 + + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y] + + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0 + } + } + } +} + +// Base Component +const BaseLegacyTransform = { + component: 'baseLegacyTransform', + property: 'transform', + functions: {onStart: onStartLegacyTransform}, + Interpolate: { + perspective: perspective, + translate3d: translate3d, + rotate3d: rotate3d, + translate: translate, rotate: rotate, scale: scale, skew: skew + }, + Util: {transformProperty} +} + +export default BaseLegacyTransform \ No newline at end of file diff --git a/src/core/render.js b/src/core/render.js index 0b4013a..ae4219c 100644 --- a/src/core/render.js +++ b/src/core/render.js @@ -4,21 +4,10 @@ import globalObject from '../objects/globalObject.js' import Interpolate from '../objects/interpolate.js' import onStart from '../objects/onStart.js' -const Time = {} - -// In node.js, use process.hrtime. -if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) { - Time.now = function () { - var time = process.hrtime(); - return time[0] * 1000 + time[1] / 1000000; - }; -// In a browser, use self.performance.now if it is available. -} else if (typeof (self) !== 'undefined' && - self.performance !== undefined && - self.performance.now !== undefined) { - Time.now = self.performance.now.bind(self.performance); -} +// const Time = window.performance +const Time = {} +Time.now = self.performance.now.bind(self.performance) // export {Time} let Tick = 0 diff --git a/src/index.js b/src/index.js index 1eea790..40865a3 100644 --- a/src/index.js +++ b/src/index.js @@ -29,6 +29,7 @@ import HTMLAttributes from './components/htmlAttributes.js' import OpacityProperty from './components/opacityProperty.js' import TextWrite from './components/textWrite.js' import TransformFunctions from './components/transformFunctions.js' +// import TransformFunctions from './components/transformLegacy.js' import SVGDraw from './components/svgDraw.js' import SVGMorph from './components/svgMorph.js' diff --git a/src/process/getInlineStyleLegacy.js b/src/process/getInlineStyleLegacy.js new file mode 100644 index 0000000..3ddd1e9 --- /dev/null +++ b/src/process/getInlineStyleLegacy.js @@ -0,0 +1,21 @@ +import transformProperty from '../util/transformProperty.js' + +export default function(el) { + if ( !el.style ) return; // if the scroll applies to `window` it returns as it has no styling + let css = el.style.cssText.replace(/\s/g,'').split(';'), // the cssText | the resulting transform object + transformObject = {}, + arrayFn = ['translate3d','translate','scale3d','skew']; + css.map(cs => { + let csi = cs.split(':') + if ( csi[0] === transformProperty ) { + let tps = csi[1].split(')'); //all transform properties + tps.map(tpi => { + let tpv = tpi.split('('), tp = tpv[0], tv = tpv[1]; // each transform property + if ( !/matrix/.test(tp) ){ + transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv; + } + }) + } + }) + return transformObject; +} \ No newline at end of file diff --git a/src/tween/tweenBase.js b/src/tween/tweenBase.js index eeb3101..57ba30c 100644 --- a/src/tween/tweenBase.js +++ b/src/tween/tweenBase.js @@ -66,7 +66,7 @@ export default class TweenBase { 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) { diff --git a/src/util/polyfill-legacy.js b/src/util/polyfill-legacy.js new file mode 100644 index 0000000..958769f --- /dev/null +++ b/src/util/polyfill-legacy.js @@ -0,0 +1,20 @@ +// build this polyfill for IE9+ browser support +// import 'minifill/src/this.Window.js' +// import 'minifill/src/this.Document.js' +// import 'minifill/src/window.HTMLElement.js' + +// import 'minifill/src/Object.defineProperty.js' +// import 'minifill/src/Object.create.js' +import 'minifill/src/Function.prototype.bind.js' + +import 'minifill/src/Array.from.js' +import 'minifill/src/Array.prototype.map.js' +import 'minifill/src/Array.prototype.some.js' +import 'minifill/src/Array.prototype.every.js' +import 'minifill/src/Array.prototype.includes.js' +import 'minifill/src/String.prototype.includes.js' + +// IE9+ +import 'minifill/src/Date.now.js' +import 'minifill/src/window.performance.now.js' +import 'minifill/src/window.requestAnimationFrame.js' \ No newline at end of file diff --git a/src/util/polyfill.js b/src/util/polyfill.js index dbe0597..100e671 100644 --- a/src/util/polyfill.js +++ b/src/util/polyfill.js @@ -1,3 +1,4 @@ +// IE10+ import 'minifill/src/Array.from.js' import 'minifill/src/Array.prototype.includes.js' import 'minifill/src/String.prototype.includes.js' \ No newline at end of file diff --git a/src/util/supportLegacyTransform.js b/src/util/supportLegacyTransform.js new file mode 100644 index 0000000..f236ca9 --- /dev/null +++ b/src/util/supportLegacyTransform.js @@ -0,0 +1,2 @@ +import transformProperty from './transformProperty.js' +export default transformProperty in document.body.style \ No newline at end of file diff --git a/src/util/transformProperty.js b/src/util/transformProperty.js new file mode 100644 index 0000000..04e2bd4 --- /dev/null +++ b/src/util/transformProperty.js @@ -0,0 +1,2 @@ +import trueProperty from './trueProperty.js' +export default trueProperty('transform') From ffa69326af9ef9a0cc1103f44f628e92c9c2f2a6 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 23 Jun 2020 16:41:57 +0000 Subject: [PATCH 402/471] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7b24ee5..3504a4d 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ KUTE.js includes 18 components, but not all of them are bundled with the default * [textProperties](http://thednp.github.io/kute.js/textProperties.html) - enables the animation for numeric `HTMLTextElement` related CSS properties like `fontSize` or `letterSpacing` * [textWrite](http://thednp.github.io/kute.js/textWrite.html) - enables the animation for the content of various strings * [transformFunctions](http://thednp.github.io/kute.js/transformFunctions.html) - enables the animation for the `transform` CSS3 property, the default component bundled with the official build +* transformLegacy - enables the animation for the `transform` CSS3 property on legacy browsers IE9+, not included with the official build, but can be used in your custom builds * [transformMatrix](http://thednp.github.io/kute.js/transformMatrix.html) - enables the animation for the `transform` CSS3 property; this component implements `DOMMatrix()` API and is super light All above mentioned components have a BASE version which doesn't include value processing, and their purpose is to provide a way to ship your super light version of your application. From 610ae90742a2df7fdfe685fe3e61971eacb93a66 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 23 Jun 2020 21:59:48 +0000 Subject: [PATCH 403/471] --- src/process/Process.js | 11 ----------- src/process/prepareObject.js | 2 ++ 2 files changed, 2 insertions(+), 11 deletions(-) delete mode 100644 src/process/Process.js diff --git a/src/process/Process.js b/src/process/Process.js deleted file mode 100644 index 468b563..0000000 --- a/src/process/Process.js +++ /dev/null @@ -1,11 +0,0 @@ -import getInlineStyle from './getInlineStyle.js' -import getStyleForProperty from './getStyleForProperty.js' -import getStartValues from './getStartValues.js' -import prepareObject from './prepareObject.js' - -export default { - getInlineStyle, - getStyleForProperty, - getStartValues, - prepareObject -} \ No newline at end of file diff --git a/src/process/prepareObject.js b/src/process/prepareObject.js index a70a1d3..8c055b9 100644 --- a/src/process/prepareObject.js +++ b/src/process/prepareObject.js @@ -18,6 +18,8 @@ export default function (obj, fn) { // this, props object, type: start/end propertiesObject[tweenProp] = prepareComponent[tweenProp].call(this,tweenProp,obj[tweenProp]); } else if ( !defaultValues[tweenCategory] && tweenCategory === 'transform' && supportComponent.includes(tweenProp) ) { // transform transformObject[tweenProp] = obj[tweenProp] + } else if (!defaultValues[tweenProp] && tweenProp === 'transform') { // allow transformFunctions to work with preprocessed input values + propertiesObject[tweenProp] = obj[tweenProp] } else if ( !defaultValues[tweenCategory] && supportComponent && supportComponent.includes(tweenProp) ) { // colors, boxModel, category propertiesObject[tweenProp] = prepareComponent[tweenCategory].call(this,tweenProp,obj[tweenProp]); } From 3be6838993ff47995268e539fc990591aa4d3322 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 23 Jun 2020 22:00:15 +0000 Subject: [PATCH 404/471] --- src/process/process.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/process/process.js diff --git a/src/process/process.js b/src/process/process.js new file mode 100644 index 0000000..468b563 --- /dev/null +++ b/src/process/process.js @@ -0,0 +1,11 @@ +import getInlineStyle from './getInlineStyle.js' +import getStyleForProperty from './getStyleForProperty.js' +import getStartValues from './getStartValues.js' +import prepareObject from './prepareObject.js' + +export default { + getInlineStyle, + getStyleForProperty, + getStartValues, + prepareObject +} \ No newline at end of file From d6e9319dc32069bba75c8f95692fd0042e8666c1 Mon Sep 17 00:00:00 2001 From: thednp Date: Tue, 23 Jun 2020 22:07:51 +0000 Subject: [PATCH 405/471] --- 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: Tue, 23 Jun 2020 22:08:42 +0000 Subject: [PATCH 406/471] Allow transform components to work with pre-processed values --- demo/src/kute-base.js | 6 +++--- demo/src/kute-base.min.js | 4 ++-- demo/src/kute-extra.js | 6 ++++-- demo/src/kute-extra.min.js | 4 ++-- demo/src/kute.min.js | 4 ++-- demo/src/polyfill-legacy.min.js | 4 ++-- demo/src/polyfill.min.js | 2 +- dist/polyfill.js | 2 +- dist/polyfill.min.js | 2 +- package.json | 4 ++-- src/components/transformMatrixBase.js | 2 +- 11 files changed, 21 insertions(+), 19 deletions(-) diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js index d52ba3d..0cf4288 100644 --- a/demo/src/kute-base.js +++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index 16b7088..cb593d9 100644 --- a/demo/src/kute-base.min.js +++ b/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js index 23bf318..603b8ce 100644 --- a/demo/src/kute-extra.js +++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index 0c78553..b5564bd 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js index 5c3793c..4e91c03 100644 --- a/demo/src/kute.min.js +++ b/demo/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/demo/src/polyfill-legacy.min.js b/demo/src/polyfill-legacy.min.js index 79c0cbc..daea310 100644 --- a/demo/src/polyfill-legacy.min.js +++ b/demo/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);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 407/471] --- 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 072a61533c333b050802f3a30100cb1c7b49b42d Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 24 Jun 2020 05:39:57 +0000 Subject: [PATCH 408/471] --- demo/src/kute-base.js | 4 +- demo/src/kute-base.min.js | 4 +- demo/src/kute-extra.js | 4 +- demo/src/kute-extra.min.js | 4 +- demo/src/kute.min.js | 4 +- dist/kute.esm.js | 120 +++++++++++++++++-------------------- dist/kute.esm.min.js | 4 +- dist/kute.js | 120 +++++++++++++++++-------------------- dist/kute.min.js | 4 +- package.json | 12 ++-- rollup.config.js | 2 +- 11 files changed, 133 insertions(+), 149 deletions(-) diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js index 0cf4288..497e9fa 100644 --- a/demo/src/kute-base.js +++ b/demo/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/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index cb593d9..59f788b 100644 --- a/demo/src/kute-base.min.js +++ b/demo/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/demo/src/kute-extra.js b/demo/src/kute-extra.js index 603b8ce..88cfaa6 100644 --- a/demo/src/kute-extra.js +++ b/demo/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/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index b5564bd..52b6637 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/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/demo/src/kute.min.js b/demo/src/kute.min.js index 4e91c03..90a13e7 100644 --- a/demo/src/kute.min.js +++ b/demo/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"}})); diff --git a/dist/kute.esm.js b/dist/kute.esm.js index 652d3d1..9372083 100644 --- a/dist/kute.esm.js +++ b/dist/kute.esm.js @@ -1,9 +1,9 @@ /*! -* KUTE.js Standard v2.0.6 (http://thednp.github.io/kute.js) +* KUTE.js Standard 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) */ -var version = "2.0.6"; +var version = "2.0.10"; var KUTE = {}; @@ -13,38 +13,12 @@ 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 Interpolate = {}; 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; @@ -214,6 +188,8 @@ function prepareObject (obj, fn) { 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]); } @@ -397,7 +373,7 @@ var TweenBase = function TweenBase(targetElement, startObject, endObject, option 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) { @@ -792,10 +768,14 @@ function trueDimension (dimValue, isAngle) { return { v: intValue, u: theUnit }; } +function coords(a, b, v) { + a = +a; b -= a; return a + b * v; +} + 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"; + elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((coords(a,b,v)*10)>>0)/10 : (coords(a,b,v) ) >> 0) + "px"; }; } } @@ -821,7 +801,7 @@ var essentialBoxModel = { category: 'boxModel', properties: essentialBoxProps, defaultValues: essentialBoxPropsValues, - Interpolate: {numbers: numbers}, + Interpolate: {numbers: coords}, functions: essentialBoxModelFunctions, Util:{trueDimension: trueDimension} }; @@ -865,9 +845,10 @@ function colors(a, b, v) { 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; } + for (c in b) { _c[c] = c !== 'a' ? (coords(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (coords(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) { @@ -878,7 +859,7 @@ function onStartColors(tweenProp){ 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 = {}; @@ -899,7 +880,7 @@ var colorProperties = { category: 'colors', properties: supportedColors, defaultValues: defaultColors, - Interpolate: {numbers: numbers,colors: colors}, + Interpolate: {numbers: coords,colors: colors}, functions: colorFunctions, Util: {trueColor: trueColor} }; @@ -949,7 +930,7 @@ function prepareAttr(tweenProp,attrObj){ 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 ); + elem.setAttribute(_p, ( (coords(a.v,b.v,v)*1000>>0)/1000) + b.u ); }; } }; @@ -958,7 +939,7 @@ function prepareAttr(tweenProp,attrObj){ 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 ); + elem.setAttribute(oneAttr, (coords(a,b,v) * 1000 >> 0) / 1000 ); }; } }; @@ -987,7 +968,7 @@ var 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: numbers,colors: colors }, + Interpolate: { numbers: coords,colors: colors }, functions: attrFunctions, Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension } }; @@ -996,7 +977,7 @@ Components.HTMLAttributes = htmlAttributes; 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; + elem.style[tweenProp] = ((coords(a,b,v) * 1000)>>0)/1000; }; } } @@ -1016,7 +997,7 @@ var opacityProperty = { component: 'opacityProperty', property: 'opacity', defaultValue: 1, - Interpolate: {numbers: numbers}, + Interpolate: {numbers: coords}, functions: opacityFunctions }; Components.OpacityProperty = opacityProperty; @@ -1065,7 +1046,7 @@ var onStartWrite = { number: function(tweenProp) { if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { KUTE[tweenProp] = function (elem, a, b, v) { - elem.innerHTML = numbers(a, b, v)>>0; + elem.innerHTML = coords(a, b, v)>>0; }; } } @@ -1183,7 +1164,7 @@ var textWrite = { properties: ['text','number'], defaultValues: {text: ' ',numbers:'0'}, defaultOptions: { textChars: 'alpha' }, - Interpolate: {numbers: numbers}, + Interpolate: {numbers: coords}, functions: textWriteFunctions, Util: { charSet: charSet, createTextTweens: createTextTweens } }; @@ -1192,6 +1173,7 @@ Components.TextWriteProperties = textWrite; 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++){ @@ -1199,6 +1181,7 @@ function translate3d(a, b, u, v) { } 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 + ")") : ''; @@ -1206,33 +1189,36 @@ function rotate3d(a, b, u, v) { 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 scale(a, b, v) { + return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")"); +} + 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):''); }; @@ -1245,27 +1231,32 @@ function getTransform(tweenProperty,value){ } function prepareTransform(prop,obj){ var prepAxis = ['X', 'Y', 'Z'], - translateArray = [], rotateArray = [], skewArray = [], transformObject = {}, + translateArray = [], rotateArray = [], skewArray = [], arrayFunctions = ['translate3d','translate','rotate3d','skew']; for (var x in obj) { + var pv = typeof obj[x] === 'object' && obj[x].length ? obj[x].map(function (v){ return parseInt(v); }) : parseInt(obj[x]); if (arrayFunctions.includes(x)) { - var pv = typeof(obj[x]) === 'object' ? obj[x].map(function (v){ return parseInt(v); }) : [parseInt(obj[x]),0]; - transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0] - : [pv[0]||0, pv[1]||0,pv[2]||0]; + var propId = x === 'translate' || x === 'rotate' ? (x + "3d") : x; + transformObject[propId] = x === 'skew' ? (pv.length ? [pv[0]||0, pv[1]||0] : [pv||0,0] ) + : x === 'translate' ? (pv.length ? [pv[0]||0, pv[1]||0, pv[2]||0] : [pv||0,0,0] ) + : [pv[0]||0, pv[1]||0,pv[2]||0]; } else if ( /[XYZ]/.test(x) ) { - var fn = x.replace(/[XYZ]/,''); - var fnId = fn === 'skew' ? fn : (fn + "3d"); - var fnArray = fn === 'translate' ? translateArray - : fn === 'rotate' ? rotateArray - : fn === 'skew' ? skewArray : {}; - for (var fnIndex = 0; fnIndex < 3; fnIndex++) { + var fn = x.replace(/[XYZ]/,''), + fnId = fn === 'skew' ? fn : (fn + "3d"), + fnLen = fn === 'skew' ? 2 : 3, + fnArray = fn === 'translate' ? translateArray + : fn === 'rotate' ? rotateArray + : fn === 'skew' ? skewArray : {}; + for (var fnIndex = 0; fnIndex < fnLen; fnIndex++) { var fnAxis = prepAxis[fnIndex]; fnArray[fnIndex] = (("" + fn + fnAxis) in obj) ? parseInt(obj[("" + fn + fnAxis)]) : 0; } transformObject[fnId] = fnArray; + } else if (x==='rotate') { + transformObject['rotate3d'] = [0,0,pv]; } else { - transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x]); + transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv; } } return transformObject; @@ -1318,8 +1309,8 @@ 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, + start = (coords(a.s,b.s,v)*100>>0)/100, + end = (coords(a.e,b.e,v)*100>>0)/100, offset = 0 - start, dashOne = end+offset; elem.style.strokeDashoffset = offset + "px"; @@ -1425,7 +1416,7 @@ var svgDraw = { component: 'svgDraw', property: 'draw', defaultValue: '0% 0%', - Interpolate: {numbers: numbers}, + Interpolate: {numbers: coords}, functions: svgDrawFunctions, Util: { getRectLength: getRectLength, @@ -1441,7 +1432,7 @@ var svgDraw = { }; Components.SVGDraw = svgDraw; -function coords (a, b, l, v) { +function coords$1(a, b, l, v) { var points = []; for(var i=0;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={},j={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 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+".")}}P.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof j[t])return j[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."),j.linear};var 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:P.processEasing(i.easing),this._duration=i.duration||v.duration,this._delay=i.delay||v.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(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),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&&(T(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)},P.tween=F,v.repeat=0,v.repeatDelay=0,v.yoyo=!1,v.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||v.repeat,this._repeatDelay=o.repeatDelay||v.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||v.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,S(this),!o&&u()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(T(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);P.tween=N;var H=function(t,e,n,r){var i=this;this.tweens=[],!("offset"in v)&&(v.offset=0),(r=r||{}).delay=r.delay||v.delay;var a=[];return Array.from(t).map((function(t,s){a[s]=r||{},a[s].delay=s>0?r.delay+(r.offset||v.offset):r.delay,t instanceof Element?i.tweens.push(new P.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};H.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},H.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},H.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},H.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},H.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof H)e.chain(t.tweens);else{if(!(t instanceof P.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},H.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},H.prototype.removeTweens=function(){this.tweens=[]},H.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){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 V(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"})}D.prototype.setComponent=function(t){var e=t.component,n={prepareProperty:d,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)v[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 b in t.Interpolate){var x=t.Interpolate[b];if("function"!=typeof x||i[b])for(var S in x)"function"!=typeof x[S]||i[b]||(i[b]=x[S]);else i[b]=x}w[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!_[T]&&(_[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:r},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var n=V(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:V}};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 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 q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}x.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:r,colors:K},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};x.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 i in e){var s=tt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(J.includes(s))a.htmlAttributes[s]=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[s]=B(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=V(u).u||V(e[i]).u,c=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[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]=V(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 G)&&(G[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]=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:r,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:V}};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};x.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[v.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 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 vt(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,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=dt;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=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 v=n[f];h[f]=""+c+v in e?parseInt(e[""+c+v]):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?_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:wt,rotate:bt,scale:xt,skew:_t}};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,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"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},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}};function jt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Pt;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 Dt(t,e){return Nt(t,e)<1e-9}var Vt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},zt=[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&&zt.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 Bt(t){return t>=48&&t<=57}function Kt(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>=Vt[n]&&(t.result.push([e].concat(r.splice(0,Vt[n]))),Vt[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=Vt[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(!Kt(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 pe(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&&Dt(n[0],n[n.length-1])&&n.pop(),ue(n)>0&&n.reverse(),!r&&e&&Ft(e)&&e>0&&ce(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=pe(t,n=n||v.morphPrecision),i=pe(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 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},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 ve={prepareStart:function(t){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=e instanceof Element?e:/^\.|^\#/.test(e)?U(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):v.morphPrecision);this.valuesStart[t].pathArray=r[0],this.valuesEnd[t].pathArray=r[1]}}}},de={component:"svgMorph",property:"path",defaultValue:[],Interpolate:jt,defaultOptions:{morphPrecision:10,morphIndex:0},functions:ve,Util:{INVALID_INPUT:Ut,isFiniteNumber:Ft,distance:Nt,pointAlong:Ht,samePoint:Dt,paramCounts:Vt,SPECIAL_SPACES:zt,isSpace:Qt,isCommand:Rt,isArc:Xt,isDigit:Bt,isDigitStart:Kt,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:ce,normalizeRing:pe,validRing:he,getInterpolationPoints:fe}};for(var ge in x.SVGMorph=de,x){var me=x[ge];x[ge]=new D(me)}var ye={Animation:D,Components:x,Tween:N,fromTo:function(t,e,n,r){return r=r||{},new P.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new P.tween(U(t),e,e,n)},TweenCollection:H,allFromTo:function(t,e,n,r){return r=r||{},new H(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new H(U(t,!0),e,e,n)},Objects:b,Util:_,Easing:j,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:U,Version:"2.0.6"};export default ye; +// KUTE.js Standard v2.0.10 | thednp © 2020 | MIT-License +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:v,prepareStart:d,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 vt(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=dt;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=E(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:{},v=0;v>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:Ct,getCircleLength:Et,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)}var ve={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:C,Selector:j,Version:"2.0.10"};export default ve; diff --git a/dist/kute.js b/dist/kute.js index 718966b..e873416 100644 --- a/dist/kute.js +++ b/dist/kute.js @@ -1,5 +1,5 @@ /*! -* KUTE.js Standard v2.0.6 (http://thednp.github.io/kute.js) +* KUTE.js Standard 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.6"; + var version = "2.0.10"; var KUTE = {}; @@ -19,38 +19,12 @@ : 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 = {}; 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; @@ -220,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]); } @@ -403,7 +379,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) { @@ -798,10 +774,14 @@ return { v: intValue, u: theUnit }; } + function coords(a, b, v) { + a = +a; b -= a; return a + b * v; + } + 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"; + elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((coords(a,b,v)*10)>>0)/10 : (coords(a,b,v) ) >> 0) + "px"; }; } } @@ -827,7 +807,7 @@ category: 'boxModel', properties: essentialBoxProps, defaultValues: essentialBoxPropsValues, - Interpolate: {numbers: numbers}, + Interpolate: {numbers: coords}, functions: essentialBoxModelFunctions, Util:{trueDimension: trueDimension} }; @@ -871,9 +851,10 @@ 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; } + for (c in b) { _c[c] = c !== 'a' ? (coords(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (coords(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) { @@ -884,7 +865,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 = {}; @@ -905,7 +886,7 @@ category: 'colors', properties: supportedColors, defaultValues: defaultColors, - Interpolate: {numbers: numbers,colors: colors}, + Interpolate: {numbers: coords,colors: colors}, functions: colorFunctions, Util: {trueColor: trueColor} }; @@ -955,7 +936,7 @@ 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 ); + elem.setAttribute(_p, ( (coords(a.v,b.v,v)*1000>>0)/1000) + b.u ); }; } }; @@ -964,7 +945,7 @@ 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 ); + elem.setAttribute(oneAttr, (coords(a,b,v) * 1000 >> 0) / 1000 ); }; } }; @@ -993,7 +974,7 @@ 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 }, + Interpolate: { numbers: coords,colors: colors }, functions: attrFunctions, Util: { replaceUppercase: replaceUppercase, trueColor: trueColor, trueDimension: trueDimension } }; @@ -1002,7 +983,7 @@ 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; + elem.style[tweenProp] = ((coords(a,b,v) * 1000)>>0)/1000; }; } } @@ -1022,7 +1003,7 @@ component: 'opacityProperty', property: 'opacity', defaultValue: 1, - Interpolate: {numbers: numbers}, + Interpolate: {numbers: coords}, functions: opacityFunctions }; Components.OpacityProperty = opacityProperty; @@ -1071,7 +1052,7 @@ number: function(tweenProp) { if ( tweenProp in this.valuesEnd && !KUTE[tweenProp]) { KUTE[tweenProp] = function (elem, a, b, v) { - elem.innerHTML = numbers(a, b, v)>>0; + elem.innerHTML = coords(a, b, v)>>0; }; } } @@ -1189,7 +1170,7 @@ properties: ['text','number'], defaultValues: {text: ' ',numbers:'0'}, defaultOptions: { textChars: 'alpha' }, - Interpolate: {numbers: numbers}, + Interpolate: {numbers: coords}, functions: textWriteFunctions, Util: { charSet: charSet, createTextTweens: createTextTweens } }; @@ -1198,6 +1179,7 @@ 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++){ @@ -1205,6 +1187,7 @@ } 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 + ")") : ''; @@ -1212,33 +1195,36 @@ 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 scale(a, b, v) { + return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")"); + } + 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):''); }; @@ -1251,27 +1237,32 @@ } function prepareTransform(prop,obj){ var prepAxis = ['X', 'Y', 'Z'], - translateArray = [], rotateArray = [], skewArray = [], transformObject = {}, + translateArray = [], rotateArray = [], skewArray = [], arrayFunctions = ['translate3d','translate','rotate3d','skew']; for (var x in obj) { + var pv = typeof obj[x] === 'object' && obj[x].length ? obj[x].map(function (v){ return parseInt(v); }) : parseInt(obj[x]); if (arrayFunctions.includes(x)) { - var pv = typeof(obj[x]) === 'object' ? obj[x].map(function (v){ return parseInt(v); }) : [parseInt(obj[x]),0]; - transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0] - : [pv[0]||0, pv[1]||0,pv[2]||0]; + var propId = x === 'translate' || x === 'rotate' ? (x + "3d") : x; + transformObject[propId] = x === 'skew' ? (pv.length ? [pv[0]||0, pv[1]||0] : [pv||0,0] ) + : x === 'translate' ? (pv.length ? [pv[0]||0, pv[1]||0, pv[2]||0] : [pv||0,0,0] ) + : [pv[0]||0, pv[1]||0,pv[2]||0]; } else if ( /[XYZ]/.test(x) ) { - var fn = x.replace(/[XYZ]/,''); - var fnId = fn === 'skew' ? fn : (fn + "3d"); - var fnArray = fn === 'translate' ? translateArray - : fn === 'rotate' ? rotateArray - : fn === 'skew' ? skewArray : {}; - for (var fnIndex = 0; fnIndex < 3; fnIndex++) { + var fn = x.replace(/[XYZ]/,''), + fnId = fn === 'skew' ? fn : (fn + "3d"), + fnLen = fn === 'skew' ? 2 : 3, + fnArray = fn === 'translate' ? translateArray + : fn === 'rotate' ? rotateArray + : fn === 'skew' ? skewArray : {}; + for (var fnIndex = 0; fnIndex < fnLen; fnIndex++) { var fnAxis = prepAxis[fnIndex]; fnArray[fnIndex] = (("" + fn + fnAxis) in obj) ? parseInt(obj[("" + fn + fnAxis)]) : 0; } transformObject[fnId] = fnArray; + } else if (x==='rotate') { + transformObject['rotate3d'] = [0,0,pv]; } else { - transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x]); + transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv; } } return transformObject; @@ -1324,8 +1315,8 @@ 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, + start = (coords(a.s,b.s,v)*100>>0)/100, + end = (coords(a.e,b.e,v)*100>>0)/100, offset = 0 - start, dashOne = end+offset; elem.style.strokeDashoffset = offset + "px"; @@ -1431,7 +1422,7 @@ component: 'svgDraw', property: 'draw', defaultValue: '0% 0%', - Interpolate: {numbers: numbers}, + Interpolate: {numbers: coords}, functions: svgDrawFunctions, Util: { getRectLength: getRectLength, @@ -1447,7 +1438,7 @@ }; Components.SVGDraw = svgDraw; - function coords (a, b, l, v) { + function coords$1(a, b, l, v) { var points = []; for(var i=0;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={},j={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 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+".")}}P.processEasing=function(t){if("function"==typeof t)return t;if("function"==typeof j[t])return j[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."),j.linear};var 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:P.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(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),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&&(T(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)},P.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,S(this),!o&&u()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(T(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);P.tween=N;var H=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 P.tween(t,e,n,a[s])):console.error("KUTE.js - "+t+" not instanceof [Element]")})),this.length=this.tweens.length,this};H.prototype.start=function(e){return e=void 0===e?t.Time():e,this.tweens.map((function(t){return t.start(e)})),this},H.prototype.stop=function(){return this.tweens.map((function(t){return t.stop(time)})),this},H.prototype.pause=function(){return this.tweens.map((function(t){return t.pause(time)})),this},H.prototype.resume=function(){return this.tweens.map((function(t){return t.resume(time)})),this},H.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof H)e.chain(t.tweens);else{if(!(t instanceof P.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},H.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},H.prototype.removeTweens=function(){this.tweens=[]},H.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){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 V(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"})}D.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 b in t.Interpolate){var x=t.Interpolate[b];if("function"!=typeof x||i[b])for(var S in x)"function"!=typeof x[S]||i[b]||(i[b]=x[S]);else i[b]=x}w[e]=t.Interpolate}if(t.Util)for(var T in t.Util)!_[T]&&(_[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:r},functions:{prepareStart:function(t){return A(this.element,t)||f[t]},prepareProperty:function(t,e){var n=V(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:V}};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 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 q(e){this.valuesEnd[e]&&!t[e]&&(t[e]=function(t,n,r,i){t.style[e]=K(n,r,i)})}x.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:r,colors:K},functions:{prepareStart:function(t,e){return A(this.element,t)||f[t]},prepareProperty:function(t,e){return B(e)},onStart:$},Util:{trueColor:B}};x.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 i in e){var s=tt(i),o=/(%|[a-z]+)$/,u=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(J.includes(s))a.htmlAttributes[s]=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[s]=B(e[i])||f.htmlAttributes[i];else if(null!==u&&o.test(u)){var l=V(u).u||V(e[i]).u,c=/%/.test(l)?"_percent":"_"+l;a.htmlAttributes[s+c]=function(e){this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in G)&&(G[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]=V(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 G)&&(G[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]=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:r,colors:K},functions:et,Util:{replaceUppercase:tt,trueColor:B,trueDimension:V}};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};x.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[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 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,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 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=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?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?_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:wt,rotate:bt,scale:xt,skew:_t}};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,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"})}},Pt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:r},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}};function jt(t,e,n,r){for(var i=[],a=0;a>0)/1e3)}return i}x.SVGDraw=Pt;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 Dt(t,e){return Nt(t,e)<1e-9}var Vt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0},zt=[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&&zt.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 Bt(t){return t>=48&&t<=57}function Kt(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>=Vt[n]&&(t.result.push([e].concat(r.splice(0,Vt[n]))),Vt[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=Vt[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(!Kt(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 pe(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&&Dt(n[0],n[n.length-1])&&n.pop(),ue(n)>0&&n.reverse(),!r&&e&&Ft(e)&&e>0&&ce(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=pe(t,n=n||d.morphPrecision),i=pe(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 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},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)?U(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:Dt,paramCounts:Vt,SPECIAL_SPACES:zt,isSpace:Qt,isCommand:Rt,isArc:Xt,isDigit:Bt,isDigitStart:Kt,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:ce,normalizeRing:pe,validRing:he,getInterpolationPoints:fe}};for(var ge in x.SVGMorph=ve,x){var me=x[ge];x[ge]=new D(me)}return{Animation:D,Components:x,Tween:N,fromTo:function(t,e,n,r){return r=r||{},new P.tween(U(t),e,n,r)},to:function(t,e,n){return(n=n||{}).resetStart=e,new P.tween(U(t),e,e,n)},TweenCollection:H,allFromTo:function(t,e,n,r){return r=r||{},new H(U(t,!0),e,n,r)},allTo:function(t,e,n){return(n=n||{}).resetStart=e,new H(U(t,!0),e,e,n)},Objects:b,Util:_,Easing:j,CubicBezier:L,Render:c,Interpolate:i,Process:O,Internals:C,Selector:U,Version:"2.0.6"}})); +// 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"}})); diff --git a/package.json b/package.json index a860b74..232dfc2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kute.js", - "version": "2.0.9", + "version": "2.0.10", "description": "JavaScript animation engine of the future is called KUTE.js.", "main": "dist/kute.min.js", "module": "dist/kute.esm.js", @@ -15,15 +15,15 @@ "help": "rollup --help", "build": "npm-run-all --parallel copy-build build-*", "custom": "rollup -c --environment", - "copy-build": "rollup -c --environment INPUTFILE:src/index.js,OUTPUTFILE:demo/src/kute.min.js,DIST:standard,MIN:true,FORMAT:umd -c", + "copy-build": "rollup -c --environment OUTPUTFILE:demo/src/kute.min.js,DIST:standard,MIN:true,FORMAT:umd -c", "build-standard": "rollup --environment DIST:standard,MIN:false,FORMAT:umd -c", "build-standard-min": "rollup --environment DIST:standard,MIN:true,FORMAT:umd -c", "build-standard-esm": "rollup --environment DIST:standard,MIN:false,FORMAT:esm -c", "build-standard-esm-min": "rollup --environment DIST:standard,MIN:true,FORMAT:esm -c", - "build-base": "rollup --environment DIST:base,MIN:false,FORMAT:umd -c", - "build-base-min": "rollup --environment DIST:base,MIN:true,FORMAT:umd -c", - "build-extra": "rollup --environment DIST:extra,MIN:false,FORMAT:umd -c", - "build-extra-min": "rollup --environment DIST:extra,MIN:true,FORMAT:umd -c", + "build-base": "rollup --environment OUTPUTFILE:demo/src/kute-base.js,DIST:base,MIN:false,FORMAT:umd -c", + "build-base-min": "rollup --environment OUTPUTFILE:demo/src/kute-base.min.js,DIST:base,MIN:true,FORMAT:umd -c", + "build-extra": "rollup --environment OUTPUTFILE:demo/src/kute-extra.js,DIST:extra,MIN:false,FORMAT:umd -c", + "build-extra-min": "rollup --environment OUTPUTFILE:demo/src/kute-extra.min.js,DIST:extra,MIN:true,FORMAT:umd -c", "polyfill": "npm-run-all --parallel polyfill-unminified polyfill-minified copy-polyfill copy-polyfill-legacy", "copy-polyfill-legacy": "rollup --environment INPUTFILE:src/util/polyfill-legacy.js,OUTPUTFILE:demo/src/polyfill-legacy.min.js,MIN:true -c rollup.polyfill.js", "copy-polyfill": "rollup --environment OUTPUTFILE:demo/src/polyfill.min.js,MIN:true -c rollup.polyfill.js", diff --git a/rollup.config.js b/rollup.config.js index 97e2448..dcd35aa 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -24,7 +24,7 @@ const banner = const miniBanner = `// KUTE.js ${NAME} v${pkg.version} | ${pkg.author} © ${year} | ${pkg.license}-License` INPUTFILE = INPUTFILE ? INPUTFILE : (DIST === 'standard' ? 'src/index.js' : 'src/index-'+DIST+'.js') -OUTPUTFILE = OUTPUTFILE ? OUTPUTFILE : ('demo/src/kute'+(DIST!=='standard'?'-'+DIST:'')+(FORMAT==='esm'?'.esm':'')+(MIN?'.min':'')+'.js') +OUTPUTFILE = OUTPUTFILE ? OUTPUTFILE : ('dist/kute'+(DIST!=='standard'?'-'+DIST:'')+(FORMAT==='esm'?'.esm':'')+(MIN?'.min':'')+'.js') const OUTPUT = { file: OUTPUTFILE, From 997972c35f6bd37aab4dff7725828c565c5efbd4 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 24 Jun 2020 05:44:51 +0000 Subject: [PATCH 409/471] --- 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 ce0a5192b3ed38a0d849ad28cc1fee54e53d7048 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 24 Jun 2020 05:45:15 +0000 Subject: [PATCH 410/471] --- demo/transformFunctions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/transformFunctions.html b/demo/transformFunctions.html index 7e920be..c5e6400 100644 --- a/demo/transformFunctions.html +++ b/demo/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 411/471] --- 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 @@