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 = {};
 

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 = {};
 

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) {
+var Interpolate = {};
-  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 onStart = {};
 
 var Time = {};
-if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
+Time.now = self.performance.now.bind(self.performance);
-	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;
@@ -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];
+      var propId = x === 'translate' || x === 'rotate' ? (x + "3d") : x;
-    transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0]
+      transformObject[propId] = x === 'skew' ? (pv.length ? [pv[0]||0, pv[1]||0] : [pv||0,0] )
-                       : [pv[0]||0, pv[1]||0,pv[2]||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 fn = x.replace(/[XYZ]/,''),
-      var fnId = fn === 'skew' ? fn : (fn + "3d");
+          fnId = fn === 'skew' ? fn : (fn + "3d"),
-      var fnArray = fn === 'translate' ? translateArray
+          fnLen = fn === 'skew' ? 2 : 3,
-                    : fn === 'rotate' ? rotateArray
+          fnArray = fn === 'translate' ? translateArray
-                    : fn === 'skew' ? skewArray : {};
+                  : fn === 'rotate' ? rotateArray
-      for (var fnIndex = 0; fnIndex < 3; fnIndex++) {
+                  : 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,
+        start = (coords(a.s,b.s,v)*100>>0)/100,
-        end = (numbers(a.e,b.e,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<l;i++) {
     points[i] = [];
@@ -1451,11 +1442,12 @@ 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");
+      pathString = v === 1 ? b.original : ("M" + (coords$1( path1, path2, len, v ).join('L')) + "Z");
       elem.setAttribute("d", pathString );
     };
   }

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) {
+  var Interpolate = {};
-    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 onStart = {};
 
   var Time = {};
-  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
+  Time.now = self.performance.now.bind(self.performance);
-  	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;
@@ -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];
+        var propId = x === 'translate' || x === 'rotate' ? (x + "3d") : x;
-      transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0]
+        transformObject[propId] = x === 'skew' ? (pv.length ? [pv[0]||0, pv[1]||0] : [pv||0,0] )
-                         : [pv[0]||0, pv[1]||0,pv[2]||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 fn = x.replace(/[XYZ]/,''),
-        var fnId = fn === 'skew' ? fn : (fn + "3d");
+            fnId = fn === 'skew' ? fn : (fn + "3d"),
-        var fnArray = fn === 'translate' ? translateArray
+            fnLen = fn === 'skew' ? 2 : 3,
-                      : fn === 'rotate' ? rotateArray
+            fnArray = fn === 'translate' ? translateArray
-                      : fn === 'skew' ? skewArray : {};
+                    : fn === 'rotate' ? rotateArray
-        for (var fnIndex = 0; fnIndex < 3; fnIndex++) {
+                    : 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,
+          start = (coords(a.s,b.s,v)*100>>0)/100,
-          end = (numbers(a.e,b.e,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<l;i++) {
       points[i] = [];
@@ -1457,11 +1448,12 @@
     }
     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");
+        pathString = v === 1 ? b.original : ("M" + (coords$1( path1, path2, len, v ).join('L')) + "Z");
         elem.setAttribute("d", pathString );
       };
     }

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": "rollup --environment OUTPUTFILE:demo/src/kute-base.js,DIST:base,MIN:false,FORMAT:umd -c",
-    "build-base-min": "rollup --environment DIST:base,MIN:true,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 DIST:extra,MIN:false,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 DIST:extra,MIN:true,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",

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,