Code cleanup

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<l; i++ ) {
-      result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 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<l; i++ ) {
+      result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
+    }
+    return result
   }
 
   var matrixComponent = 'transformMatrix';

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<l; i++ ) {
-      result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 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<l; i++ ) {
+      result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
+    }
+    return result
+  }
+
   var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
                    : typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
                    : typeof(CSSMatrix) !== 'undefined' ? CSSMatrix

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<f;)u=o[p],c[p]=a?void 0===i?a(u,p):a.call(i,u,p):u,p+=1;return c.length=f,c})),Array.prototype.includes||(Array.prototype.includes=function(r){var t=Object(this),n=parseInt(t.length)||0;if(0===n)return!1;var e,o,i=parseInt(arguments[1])||0;for(i>=0?e=i:(e=n+i)<0&&(e=0);e<n;){if(r===(o=t[e])||r!=r&&o!=o)return!0;e++}return!1}),String.prototype.includes||(String.prototype.includes=function(r,t){if(r instanceof RegExp)throw TypeError("first argument must not be a RegExp");return void 0===t&&(t=0),-1!==this.indexOf(r,t)});

demo/transformFunctions.html

@@ -284,7 +284,8 @@ var tween2 = KUTE.fromTo(
     <!-- Placed at the end of the document so the pages load faster -->
 
     <script src="./src/polyfill.min.js"></script>
-    <script src="./src/kute.min.js"></script>
+    <script src="./src/kute.js"></script>
+    <!-- <script src="../dist/kute.js"></script> -->
     <script src="./assets/js/prism.js"></script>
 
     <script src="./assets/js/transformFunctions.js"></script>

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

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

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;

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<f;)u=o[p],c[p]=a?void 0===i?a(u,p):a.call(i,u,p):u,p+=1;return c.length=f,c})),Array.prototype.includes||(Array.prototype.includes=function(r){var t=Object(this),n=parseInt(t.length)||0;if(0===n)return!1;var e,o,i=parseInt(arguments[1])||0;for(i>=0?e=i:(e=n+i)<0&&(e=0);e<n;){if(r===(o=t[e])||r!=r&&o!=o)return!0;e++}return!1}),String.prototype.includes||(String.prototype.includes=function(r,t){if(r instanceof RegExp)throw TypeError("first argument must not be a RegExp");return void 0===t&&(t=0),-1!==this.indexOf(r,t)});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kute.js",
-  "version": "2.0.51",
+  "version": "2.0.6",
   "description": "JavaScript animation engine of the future is called KUTE.js.",
   "main": "dist/kute.min.js",
   "module": "dist/kute.esm.js",
@@ -24,10 +24,10 @@
     "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"
+    "polyfill": "npm-run-all --parallel polyfill-unminified polyfill-minified copy-polyfill",
+    "copy-polyfill": "rollup --environment OUTPUTFILE:demo/src/polyfill.min.js,MIN:true -c rollup.polyfill.js",
+    "polyfill-unminified": "rollup --environment MIN:false -c rollup.polyfill.js",
+    "polyfill-minified": "rollup --environment MIN:true -c rollup.polyfill.js"
   },
   "repository": {
     "type": "git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "cubic-bezier-easing": "^1.0.2",
     "minifill": "^0.0.8",
-    "shorter-js": "^0.0.8"
+    "shorter-js": "^0.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.3",

rollup.config.js

@@ -6,26 +6,25 @@ 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
+
+let INPUTFILE = process.env.INPUTFILE
+let OUTPUTFILE = 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 NAME = 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";':
+const banner = 
 `/*!
 * 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 miniBanner = `// 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')
+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')
 
 const OUTPUT = {
   file: OUTPUTFILE,

rollup.polyfill.js

@@ -0,0 +1,56 @@
+'use strict'
+import buble from '@rollup/plugin-buble'
+import node from '@rollup/plugin-node-resolve'
+import json from '@rollup/plugin-json'
+import {terser} from 'rollup-plugin-terser'
+import cleanup from 'rollup-plugin-cleanup'
+import * as pkg from "./package.json";
+
+// set headers
+const year = (new Date).getFullYear()
+const banner = `/*!
+  * KUTE.js Polyfill v${pkg.version} (${pkg.homepage})
+  * Copyright 2015-${year} © ${pkg.author}
+  * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE)
+  */
+ "use strict";`
+
+const miniBanner = `// KUTE.js Polyfill v${pkg.version} | ${year} © ${pkg.author} | ${pkg.license}-License
+"use strict";`
+
+// set config
+const MIN = process.env.MIN === 'true' // true/false|unset
+const FORMAT = 'esm' // umd|iife|esm|cjs
+
+const INPUTFILE = './src/util/polyfill.js'
+const OUTPUTFILE = process.env.OUTPUTFILE ? process.env.OUTPUTFILE : './dist/polyfill'+(MIN?'.min':'')+'.js'
+
+const OUTPUT = {
+  file: OUTPUTFILE,
+  format: FORMAT, // or iife
+}
+
+const PLUGINS = [
+  node(),
+  json(),
+  buble(),
+  cleanup()
+]
+
+if (MIN){
+  PLUGINS.push(terser({output: {preamble: miniBanner}}));
+} else {
+  OUTPUT.banner = banner;
+}
+
+// if (FORMAT!=='esm') {
+//   OUTPUT.name = 'BSN';
+// }
+
+export default [
+  {
+    input: INPUTFILE,
+    output: OUTPUT,
+    plugins: PLUGINS
+  }
+]

src/components/backgroundPosition.js

@@ -1,7 +1,7 @@
 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 numbers from '../interpolation/numbers.js' 
 import trueDimension from '../util/trueDimension.js'
 import {onStartBgPos} from './backgroundPositionBase.js'
 

src/components/backgroundPositionBase.js

@@ -1,5 +1,5 @@
 import KUTE from '../objects/kute.js'
-import {numbers} from '../objects/interpolate.js' 
+import numbers from '../interpolation/numbers.js' 
 
 // const bgPosProp = { property : 'backgroundPosition', defaultValue: [0,0], interpolators: {numbers} }, functions = { prepareStart, prepareProperty, onStart }
 

src/components/borderRadius.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 {radiusOnStartFn} from './borderRadiusBase.js'
 
 // const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} }

src/components/borderRadiusBase.js

@@ -1,5 +1,5 @@
 import KUTE from '../objects/kute.js'
-import {units} from '../objects/interpolate.js' 
+import units from '../interpolation/units.js' 
 
 // const borderRadius = { category : 'borderRadius', properties : [..], defaultValues: {..}, interpolation: {units} }
 

src/components/boxModel.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 {numbers} from '../objects/interpolate.js' 
+import numbers from '../interpolation/numbers.js' 
 import {boxModelOnStart} from './boxModelBase.js'
 
 // Component Properties

src/components/boxModelBase.js

@@ -1,5 +1,5 @@
 import KUTE from '../objects/kute.js'
-import {numbers} from '../objects/interpolate.js' 
+import numbers from '../interpolation/numbers.js' 
 
 // Component Functions
 export function boxModelOnStart(tweenProp){

src/components/boxModelEssential.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 {numbers} from '../objects/interpolate.js' 
+import numbers from '../interpolation/numbers.js' 
 import {boxModelOnStart} from './boxModelBase.js' 
 
 

src/components/clipProperty.js

@@ -1,7 +1,7 @@
 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 '../interpolation/numbers.js' 
 import {onStartClip} from './clipPropertyBase.js'
 
 // Component Functions

src/components/clipPropertyBase.js

@@ -1,5 +1,5 @@
 import KUTE from '../objects/kute.js'
-import {numbers} from '../objects/interpolate.js'
+import numbers from '../interpolation/numbers.js' 
 
 // Component Functions
 export function onStartClip(tweenProp) {

src/components/colorProperties.js

@@ -2,8 +2,9 @@ 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' 
+import numbers from '../interpolation/numbers.js' 
+import colors from '../interpolation/colors.js' 
+import {onStartColors} from './colorPropertiesBase.js' 
 
 // Component Interpolation
 // Component Properties

src/components/colorPropertiesBase.js

@@ -1,19 +1,10 @@
 import KUTE from '../objects/kute.js'
-import {numbers} from '../objects/interpolate.js' 
+import numbers from '../interpolation/numbers.js' 
+import colors from '../interpolation/colors.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

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

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 }

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 }
 

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

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'

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 }

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 }
 

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'

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 = ''
   }
 }

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

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']

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'
 

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 }
 

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 }

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 }
 

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 }
 

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<l;i++) { // for each point
-    points[i] = [];
-    for(let j=0;j<2;j++) { // each point coordinate
-      points[i].push( ((a[i][j]+(b[i][j]-a[i][j])*v) * 1000 >> 0)/1000 );
-    }
-  }
-  return points;
-}
-
 // Component functions
 export function onStartSVGMorph(tweenProp){
   if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {

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'
 

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 }
 

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:{} }

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:{} }
 

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

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

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
 

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]) {

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 }

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 }
 

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

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

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

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'
 

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

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

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

src/interface/tcLink.js

@@ -1,3 +0,0 @@
-import TweenConstructor from '../objects/tweenConstructor.js'
-
-export default TweenConstructor.Tween

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

src/interpolation/arrays.js

@@ -0,0 +1,7 @@
+export default function(a,b,v){
+  const result = []
+  for ( let i=0, l=b.length; i<l; i++ ) {
+    result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000
+  }
+  return result
+}

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

src/interpolation/coords.js

@@ -0,0 +1,10 @@
+export default function(a, b, l, v) {
+  const points = [];
+  for(let i=0;i<l;i++) { // for each point
+    points[i] = [];
+    for(let j=0;j<2;j++) { // each point coordinate
+      points[i].push( ((a[i][j]+(b[i][j]-a[i][j])*v) * 1000 >> 0)/1000 );
+    }
+  }
+  return points;
+}

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

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

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

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

src/interpolation/scale.js

@@ -0,0 +1,3 @@
+export default function(a, b, v) {
+  return `scale(${((a + (b - a) * v) * 1000 >> 0 ) / 1000})`;
+}

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(',')})`;
+}

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

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

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(',')})`;
+}

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(',')})`;
+}

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

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<l; i++ ) {
-    result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000
-  }
-  return result
-}
-
-export default {
-  numbers,
-  units,
-  arrays
-}
+export default {}

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,

src/objects/ObjectsBase.js

@@ -7,5 +7,5 @@ export default {
   defaultOptions,
   linkProperty,
   onStart,
-  onComplete,
+  onComplete
 }

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
+connect.tween = Tween

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
+connect.tween = TweenBase

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

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
+connect.tween = TweenExtra

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)