demo/opacityProperty.html

@@ -121,6 +121,7 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
           
           <h3>Notes</h3>
           <ul>
+            <li>This demo should work with IE9+ browsers.</li>
             <li>Support for the specific IE8 <code>filter:alpha(opacity=50)</code> have been dropped.</li>
             <li>Early implementations with vendor preffixes such as <code>-o-opacity</code>, <code>-moz-opacity</code> or <code>-ms-opacity</code> are not supported.</li>
             <li>The component is an essential part in ALL KUTE.js distributions.</li>
@@ -140,8 +141,9 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
 
     <!-- JavaScript =============================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="./src/polyfill.min.js"></script>
-    <script src="./src/kute-extra.min.js"></script>
+    <!-- <script src="./src/polyfill-legacy.min.js"></script> -->
+    <script src="./src/polyfill-legacy.min.js"></script>
+    <script src="./src/kute.min.js"></script>
     <script src="./assets/js/prism.js"></script>
 
     <script src="./assets/js/opacityProperty.js"></script>

demo/src/kute-base.js

@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Base v2.0.7 (http://thednp.github.io/kute.js)
+* KUTE.js Base v2.0.8 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.7";
+  var version = "2.0.8";
 
   var KUTE = {};
 
@@ -24,16 +24,7 @@
   var onStart = {};
 
   var Time = {};
-  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
-  	Time.now = function () {
-  		var time = process.hrtime();
-  		return time[0] * 1000 + time[1] / 1000000;
-  	};
-  } else if (typeof (self) !== 'undefined' &&
-           self.performance !== undefined &&
-  		 self.performance.now !== undefined) {
-  	Time.now = self.performance.now.bind(self.performance);
-  }
+  Time.now = self.performance.now.bind(self.performance);
   var Tick = 0;
   var Ticker = function (time) {
     var i = 0;
@@ -276,7 +267,7 @@
   TweenBase.prototype.start = function start (time) {
     add(this);
     this.playing = true;
-    this._startTime = time || KUTE.Time();
+    this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
     this._startTime += this._delay;
     if (!this._startFired) {
       if (this._onStart) {

demo/src/kute-extra.js

@@ -1,5 +1,5 @@
 /*!
-* KUTE.js Extra v2.0.7 (http://thednp.github.io/kute.js)
+* KUTE.js Extra v2.0.8 (http://thednp.github.io/kute.js)
 * Copyright 2015-2020 © thednp
 * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
 */
@@ -9,7 +9,7 @@
   (global = global || self, global.KUTE = factory());
 }(this, (function () { 'use strict';
 
-  var version = "2.0.7";
+  var version = "2.0.8";
 
   var KUTE = {};
 
@@ -24,16 +24,7 @@
   var onStart = {};
 
   var Time = {};
-  if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
-  	Time.now = function () {
-  		var time = process.hrtime();
-  		return time[0] * 1000 + time[1] / 1000000;
-  	};
-  } else if (typeof (self) !== 'undefined' &&
-           self.performance !== undefined &&
-  		 self.performance.now !== undefined) {
-  	Time.now = self.performance.now.bind(self.performance);
-  }
+  Time.now = self.performance.now.bind(self.performance);
   var Tick = 0;
   var Ticker = function (time) {
     var i = 0;
@@ -386,7 +377,7 @@
   TweenBase.prototype.start = function start (time) {
     add(this);
     this.playing = true;
-    this._startTime = time || KUTE.Time();
+    this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
     this._startTime += this._delay;
     if (!this._startFired) {
       if (this._onStart) {
@@ -1162,7 +1153,7 @@
 
   var supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'];
   var defaultColors = {};
-  supportedColors.forEach(function (tweenProp) {
+  supportedColors.map(function (tweenProp) {
     defaultColors[tweenProp] = '#000';
   });
   var colorsOnStart = {};

demo/src/polyfill-legacy.min.js

@@ -0,0 +1,3 @@
+// KUTE.js Polyfill v2.0.8 | 2020 © thednp | MIT-License
+"use strict";
+var r,n,t,e;if(Function.prototype.bind||(Function.prototype.bind=function(){var r=Array.prototype.slice,n=this,t=arguments[0],e=r.call(arguments,1);if("function"!=typeof n)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");return function(){var o=e.concat(r.call(arguments));return n.apply(t,o)}}),Array.from||(Array.from=(r=Object.prototype.toString,n=function(n){return"function"==typeof n||"[object Function]"===r.call(n)},t=Math.pow(2,53)-1,e=function(r){var n=function(r){var n=Number(r);return isNaN(n)?0:0!==n&&isFinite(n)?(n>0?1:-1)*Math.floor(Math.abs(n)):n}(r);return Math.min(Math.max(n,0),t)},function(r){var t=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!n(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var f,u=e(o.length),c=n(t)?Object(new t(u)):new Array(u),p=0;p<u;)f=o[p],c[p]=a?void 0===i?a(f,p):a.call(i,f,p):f,p+=1;return c.length=u,c})),Array.prototype.map||(Array.prototype.map=function(r){var n,t,e;if(null==this)throw new TypeError("this is null or not defined");var o=Object(this),i=o.length>>>0;if("function"!=typeof r)throw new TypeError(r+" is not a function");for(arguments.length>1&&(n=arguments[1]),t=new Array(i),e=0;e<i;){var a,f;e in o&&(a=o[e],f=r.call(n,a,e,o),t[e]=f),e++}return t}),Array.prototype.some||(Array.prototype.some=function(r,n){if(null==this)throw new TypeError("Array.prototype.some called on null or undefined");if("function"!=typeof r)throw new TypeError;for(var t=Object(this),e=t.length>>>0,o=0;o<e;o++)if(o in t&&r.call(n,t[o],o,t))return!0;return!1}),Array.prototype.every||(Array.prototype.every=function(r,n){var t,e;if(null==this)throw new TypeError("this is null or not defined");var o=Object(this),i=o.length>>>0;if("function"!=typeof r&&"[object Function]"!==Object.prototype.toString.call(r))throw new TypeError;for(arguments.length>1&&(t=n),e=0;e<i;){var a;if(e in o)if(a=o[e],!(t?r.call(t,a,e,o):r(a,e,o)))return!1;e++}return!0}),Array.prototype.includes||(Array.prototype.includes=function(r){var n=Object(this),t=parseInt(n.length)||0;if(0===t)return!1;var e,o,i=parseInt(arguments[1])||0;for(i>=0?e=i:(e=t+i)<0&&(e=0);e<t;){if(r===(o=n[e])||r!=r&&o!=o)return!0;e++}return!1}),String.prototype.includes||(String.prototype.includes=function(r,n){if(r instanceof RegExp)throw TypeError("first argument must not be a RegExp");return void 0===n&&(n=0),-1!==this.indexOf(r,n)}),Date.now||(Date.now=function(){return(new Date).getTime()}),self.performance||(self.performance={}),!self.performance.now)if("undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime)self.performance.now=function(){var r=process.hrtime();return 1e3*r[0]+r[1]/1e6};else{var o=Date.now();self.performance.now=function(){return Date.now()-o}}if(!window.requestAnimationFrame){var i=Date.now();window.requestAnimationFrame=function(r){if("function"!=typeof r)throw new TypeError(r+"is not a function");var n=Date.now(),t=16+i-n;return t<0&&(t=0),i=n,setTimeout((function(){i=Date.now(),r(performance.now())}),t)},window.cancelAnimationFrame=function(r){clearTimeout(r)}}

demo/src/polyfill.min.js

@@ -1,3 +1,3 @@
-// KUTE.js Polyfill v2.0.7 | 2020 © thednp | MIT-License
+// KUTE.js Polyfill v2.0.8 | 2020 © thednp | MIT-License
 "use strict";
 var r,t,n,e;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=Math.pow(2,53)-1,e=function(r){var t=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p<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

@@ -91,7 +91,8 @@
                 <p class="condensed text-right">The component to cover animation for most <b>transform</b> functions with improved performance and faster value processing.</p>
               </div>
               <div class="col9 border">
-                <p class="lead condensed">The KUTE.js <b>Transform Functions</b> enables animation for the CSS3 <b>transform</b> style on <b>Element</b> targets on most modern browsers and specific legacy browsers.</p>
+                <p class="lead condensed">The KUTE.js <b>Transform Functions</b> enables animation for the CSS3 <b>transform</b> style on <b>Element</b> targets on modern browsers. For specific legacy browsers there is another
+                  component called <b>Transform Legacy</b> you will find in the source folders.</p>
                 <p>Starting with KUTE.js version 2.0, you can set the <b>perspective</b> function as a tween property, while you can still rely on a parent's perspective but for less performance.</p>
                 <p>All the previous perspective related options have been removed. The <b>transform</b> CSS3 property itself no longer uses preffixes like <b>webkit</b>, <b>moz</b> or <b>ms</b> since all major 
                   browsers are standardized.</p>
@@ -138,6 +139,8 @@
               <li><kbd class="bg-blue">scale</kbd> function will scale a target element on all axes. Eg. <code>scale:1.5</code> will scale up a target element by 50%. <kbd class="bg-lime">IE9+</kbd></li>
               <li><kbd class="bg-red">matrix</kbd> is not supported by this component, but is implemented in the <a href="transformMatrix.html">transformMatrix</a> component.</li>
             </ul>
+            <p>As a quick note, all input values for <kbd class="bg-blue">translate</kbd>, <kbd class="bg-blue">rotate</kbd> or single axis translation, skew or rotation will be all stacked into <kbd class="bg-blue">translate3d</kbd>,
+              <kbd class="bg-blue">skew</kbd> and <kbd class="bg-blue">rotate3d</kbd> respectivelly; this is to further improve performance on modern browsers.</p>
 
             <h3>Translations</h3>
 
@@ -254,6 +257,7 @@ var tween2 = KUTE.fromTo(
 
           <h3>Notes</h3>
           <ul>
+            <li>This demo page should work with IE10+ browsers.</li>
             <li>The order of the transform functions/properties is always the same: <code>perspective</code>, <code>translation</code>, <code>rotation</code>, <code>skew</code>, <code>scale</code>, this way we can prevent 
                 jumpy/janky animations; one of the reasons is consistency in all transform based components and another reason is the order of execution from the draft for 
                 <a href="https://drafts.csswg.org/css-transforms-2/#recomposing-to-a-3d-matrix">matrix3d recomposition</a>.</li>
@@ -283,6 +287,7 @@ var tween2 = KUTE.fromTo(
     <!-- JavaScript =============================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
 
+    <!-- <script src="./src/polyfill-legacy.min.js"></script> -->
     <script src="./src/polyfill.min.js"></script>
     <script src="./src/kute.js"></script>
     <!-- <script src="../dist/kute.js"></script> -->

demo/transformMatrix.html

@@ -171,20 +171,21 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
 
         <h3>Notes</h3>
         <ul>
-            <li>Why no support for the <code>matrix3d</code> function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees. 
-                As <a href="https://stackoverflow.com/a/39870758/803358">explained here</a>, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify 
-                the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.</li>
-            <li>The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable. 
-                Such a feature would allow us to kick start animations directly from <code>matrix3d</code> string/array values, but considering the size of this component, I let you draw the conclusions.</li>
-            <li>Despite the "limitations", we have some tricks available: the <code>fromTo()</code> method will never fail and it's much better when performance and sync are a must, and for <code>to()</code> 
-                method we're storing the values from previous animations to have them ready and available for the next chained animation.</li>
-            <li>The performance of this component is identical with the <b>Transform Functions</b> component, which is crazy and awesome, all that thanks to the <b>DOMMatrix</b> API built into our modern browsers. 
-                If that's not good enough, the API will automatically switch from <code>matrix3d</code> to <code>matrix</code> and vice-versa whenever needed to save power. Neat?</li>
-            <li>The <code>rotate3d</code> property makes alot more sense for this component since the <b>DOMMatrix</b> <code>rotate(angleX,angleY,angleZ)</code> method works exactly the same, while the 
-                <code>rotate3d(vectorX,vectorY,vectorZ,angle)</code> function is a thing of the past, according to <a href="https://css-tricks.com/">Chris Coyier</a> nobody use it.</li>
-            <li>Since the component fully utilize the <b>DOMMatrix</b> API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers 
-                like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.</li>
-            <li>This component is bundled with the <i>demo/src/kute-extra.js</i> distribution file.</li>  
+          <li>This demo page should work with IE10+ browsers.</li>
+          <li>Why no support for the <code>matrix3d</code> function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees. 
+              As <a href="https://stackoverflow.com/a/39870758/803358">explained here</a>, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify 
+              the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.</li>
+          <li>The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable. 
+              Such a feature would allow us to kick start animations directly from <code>matrix3d</code> string/array values, but considering the size of this component, I let you draw the conclusions.</li>
+          <li>Despite the "limitations", we have some tricks available: the <code>fromTo()</code> method will never fail and it's much better when performance and sync are a must, and for <code>to()</code> 
+              method we're storing the values from previous animations to have them ready and available for the next chained animation.</li>
+          <li>The performance of this component is identical with the <b>Transform Functions</b> component, which is crazy and awesome, all that thanks to the <b>DOMMatrix</b> API built into our modern browsers. 
+              If that's not good enough, the API will automatically switch from <code>matrix3d</code> to <code>matrix</code> and vice-versa whenever needed to save power. Neat?</li>
+          <li>The <code>rotate3d</code> property makes alot more sense for this component since the <b>DOMMatrix</b> <code>rotate(angleX,angleY,angleZ)</code> method works exactly the same, while the 
+              <code>rotate3d(vectorX,vectorY,vectorZ,angle)</code> function is a thing of the past, according to <a href="https://css-tricks.com/">Chris Coyier</a> nobody use it.</li>
+          <li>Since the component fully utilize the <b>DOMMatrix</b> API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers 
+              like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.</li>
+          <li>This component is bundled with the <i>demo/src/kute-extra.js</i> distribution file.</li>  
         </ul>
       </div>
 

dist/polyfill.js

@@ -1,5 +1,5 @@
 /*!
-  * KUTE.js Polyfill v2.0.7 (http://thednp.github.io/kute.js)
+  * KUTE.js Polyfill v2.0.8 (http://thednp.github.io/kute.js)
   * Copyright 2015-2020 © thednp
   * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE)
   */

dist/polyfill.min.js

@@ -1,3 +1,3 @@
-// KUTE.js Polyfill v2.0.7 | 2020 © thednp | MIT-License
+// KUTE.js Polyfill v2.0.8 | 2020 © thednp | MIT-License
 "use strict";
 var r,t,n,e;Array.from||(Array.from=(r=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===r.call(t)},n=Math.pow(2,53)-1,e=function(r){var t=function(r){var t=Number(r);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(r);return Math.min(Math.max(t,0),n)},function(r){var n=this,o=Object(r);if(null==r)throw new TypeError("Array.from requires an array-like object - not null or undefined");var i,a=arguments.length>1?arguments[1]:void 0;if(void 0!==a){if(!t(a))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(i=arguments[2])}for(var u,f=e(o.length),c=t(n)?Object(new n(f)):new Array(f),p=0;p<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.7",
+  "version": "2.0.8",
   "description": "JavaScript animation engine of the future is called KUTE.js.",
   "main": "dist/kute.min.js",
   "module": "dist/kute.esm.js",
@@ -24,7 +24,8 @@
     "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 polyfill-unminified polyfill-minified copy-polyfill",
+    "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",
     "polyfill-unminified": "rollup --environment MIN:false -c rollup.polyfill.js",
     "polyfill-minified": "rollup --environment MIN:true -c rollup.polyfill.js"
@@ -54,7 +55,7 @@
   "homepage": "http://thednp.github.io/kute.js",
   "dependencies": {
     "cubic-bezier-easing": "^1.0.2",
-    "minifill": "^0.0.8",
+    "minifill": "^0.0.12",
     "shorter-js": "^0.1.0"
   },
   "devDependencies": {

rollup.polyfill.js

@@ -22,8 +22,8 @@ const miniBanner = `// KUTE.js Polyfill v${pkg.version} | ${year} © ${pkg.autho
 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 INPUTFILE = process.env.INPUTFILE ? process.env.INPUTFILE : 'src/util/polyfill.js'
+const OUTPUTFILE = process.env.OUTPUTFILE ? process.env.OUTPUTFILE : 'dist/polyfill'+(MIN?'.min':'')+'.js'
 
 const OUTPUT = {
   file: OUTPUTFILE,

src/components/colorProperties.js

@@ -13,7 +13,7 @@ import {onStartColors} from './colorPropertiesBase.js'
 const supportedColors = ['color', 'backgroundColor','borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']
 const defaultColors = {}
 
-supportedColors.forEach(tweenProp => {
+supportedColors.map(tweenProp => {
   defaultColors[tweenProp] = '#000'
 });
 

src/components/transformFunctions.js

@@ -11,6 +11,7 @@ import skew from '../interpolation/skew.js'
 import {onStartTransform} from './transformFunctionsBase.js'
 
 // const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
+// the component developed for modern browsers supporting non-prefixed transform
 
 // Component Functions
 function getTransform(tweenProperty,value){
@@ -19,31 +20,36 @@ function getTransform(tweenProperty,value){
 }
 function prepareTransform(prop,obj){
   let prepAxis = ['X', 'Y', 'Z'], // coordinates
-      translateArray = [], rotateArray = [], skewArray = [], 
       transformObject = {},
+      translateArray = [], rotateArray = [], skewArray = [], 
       arrayFunctions = ['translate3d','translate','rotate3d','skew']
 
   for (const x in obj) {
+    let pv = typeof obj[x] === 'object' && obj[x].length ? obj[x].map(v=>parseInt(v)) : parseInt(obj[x]);
 
     if (arrayFunctions.includes(x)) {
-    const pv = typeof(obj[x]) === 'object' ? obj[x].map(v=>parseInt(v)) : [parseInt(obj[x]),0]
+      let propId = x === 'translate' || x === 'rotate' ? `${x}3d` : x;
 
-    transformObject[x] = x === 'skew' || x === 'translate' ? [pv[0]||0, pv[1]||0]
-                       : [pv[0]||0, pv[1]||0,pv[2]||0] // translate3d | rotate3d
+      transformObject[propId] = x === 'skew' ? (pv.length ? [pv[0]||0, pv[1]||0] : [pv||0,0] )
+                              : x === 'translate' ? (pv.length ? [pv[0]||0, pv[1]||0, pv[2]||0] : [pv||0,0,0] )
+                              : [pv[0]||0, pv[1]||0,pv[2]||0] // translate3d | rotate3d
 
     } else if ( /[XYZ]/.test(x) ) {
-      const fn = x.replace(/[XYZ]/,'');
-      const fnId = fn === 'skew' ? fn : `${fn}3d`;
-      const fnArray = fn === 'translate' ? translateArray
-                    : fn === 'rotate' ? rotateArray
-                    : fn === 'skew' ? skewArray : {}
-      for (let fnIndex = 0; fnIndex < 3; fnIndex++) {
+      let fn = x.replace(/[XYZ]/,''),
+          fnId = fn === 'skew' ? fn : `${fn}3d`,
+          fnLen = fn === 'skew' ? 2 : 3,
+          fnArray = fn === 'translate' ? translateArray
+                  : fn === 'rotate' ? rotateArray
+                  : fn === 'skew' ? skewArray : {}
+      for (let fnIndex = 0; fnIndex < fnLen; fnIndex++) {
         const fnAxis = prepAxis[fnIndex];
         fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0; 
       }
       transformObject[fnId] = fnArray;
-    } else { // scale | rotate | perspective
-      transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : parseInt(obj[x])
+    } else if (x==='rotate') { //  rotate 
+      transformObject['rotate3d'] = [0,0,pv]
+    } else { // scale | perspective
+      transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv
     }
   }
   return transformObject;

src/components/transformFunctionsBase.js

@@ -16,9 +16,7 @@ export function onStartTransform(tweenProp){
       elem.style[tweenProp] = 
           (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0
         + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z]
-        + (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y]
         + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z]
-        + (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0
         + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y]
         + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
     }

src/components/transformLegacy.js

@@ -0,0 +1,134 @@
+import defaultValues from '../objects/defaultValues.js'
+import Components from '../objects/components.js'
+import getInlineStyleLegacy from '../process/getInlineStyleLegacy.js'
+import perspective from '../interpolation/perspective.js'
+import translate3d from '../interpolation/translate3d.js'
+import rotate3d from '../interpolation/rotate3d.js'
+import translate from '../interpolation/translate.js'
+import rotate from '../interpolation/rotate.js'
+import scale from '../interpolation/scale.js'
+import skew from '../interpolation/skew.js'
+
+import support3DTransform from 'shorter-js/src/boolean/support3DTransform.js'
+import {onStartLegacyTransform} from './transformLegacyBase.js'
+import transformProperty from '../util/transformProperty.js'
+import supportTransform from '../util/supportLegacyTransform.js'
+
+
+// const transformFunctions = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
+// the component to handle all kinds of input values and process according to browser supported API, 
+// the component that handles all browsers IE9+
+
+// Component Functions
+function getLegacyTransform(tweenProperty,value){
+  const currentStyle = getInlineStyleLegacy(this.element);
+  return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty];
+}
+function prepareLegacyTransform(prop,obj){
+  let prepAxis = ['X', 'Y', 'Z'], // coordinates
+      translateArray = [], rotateArray = [], skewArray = [], 
+      transformObject = {},
+      arrayFunctions = ['translate3d','translate','rotate3d','skew']
+
+  for (const x in obj) {
+    const pv = typeof(obj[x]) === 'object' && obj[x].length ? obj[x].map(v=>parseInt(v)) : parseInt(obj[x])
+
+    if (arrayFunctions.includes(x)) {
+
+      if (support3DTransform){
+        if (x==='translate3d' || x==='rotate3d') {
+          transformObject[x] = pv
+        } else if (x==='translate'){
+          transformObject['translate3d'] = pv.length ? pv.concat(0) : [pv||0,0,0]
+        } else if (x==='rotate'){
+          transformObject['rotate3d'] = [0,0,pv||0]
+        } else if (x==='skew'){
+          transformObject[x] = pv.length ? pv : [pv||0,0]
+        }
+      } else if (supportTransform) {
+        if (x==='translate3d') {
+          transformObject['translate'] = [pv[0]||0,pv[1]||0]
+        } else if (x==='translate' || x==='skew'){
+          transformObject[x] = pv.length ? pv : [pv||0,0]
+        } else if (x==='rotate3d'){
+          transformObject['rotate'] = pv[2]||pv[1]||pv[0]
+        } else if (x==='rotate'){
+          transformObject[x] = pv
+        }
+      }
+
+    } else if ( /[XYZ]/.test(x) ) {
+      let fn = x.replace(/[XYZ]/,''),
+          fnId = fn === 'skew' || !support3DTransform ? fn : `${fn}3d`,
+          fnLen = fn === 'skew' || (!support3DTransform && fn === 'translate') ? 2 : 3,
+          fnArray = fn === 'translate' ? translateArray
+                  : fn === 'rotate' && support3DTransform ? rotateArray
+                  : fn === 'skew' ? skewArray : {}
+      for (let fnIndex = 0; fnIndex < fnLen; fnIndex++) {
+        let fnAxis = prepAxis[fnIndex];
+        fnArray[fnIndex] = (`${fn}${fnAxis}` in obj) ? parseInt(obj[`${fn}${fnAxis}`]) : 0; 
+      }
+      transformObject[fnId] = support3DTransform ? fnArray : fn === 'rotate' ? fnArray[2]||fnArray[1]||fnArray[0] : fnArray;
+    } else if (x==='rotate') { // 2d rotate
+      let pType = support3DTransform ? 'rotate3d' : 'rotate';
+      transformObject[pType] = support3DTransform ? [0,0,pv] : pv
+    } else { // scale | perspective
+      transformObject[x] = x === 'scale' ? parseFloat(obj[x]) : pv
+    }
+  }
+  return transformObject;
+}
+
+function crossCheckLegacyTransform(tweenProp){
+  if (this.valuesEnd[tweenProp]) {  
+    if ( this.valuesEnd[tweenProp] && support3DTransform) {
+      if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective){
+        this.valuesStart[tweenProp].perspective = this.valuesEnd[tweenProp].perspective
+      }
+    }
+  }
+}
+
+// All Component Functions
+const transformLegacyFunctions = {
+  prepareStart: getLegacyTransform,
+  prepareProperty: prepareLegacyTransform,
+  onStart: onStartLegacyTransform,
+  crossCheck: crossCheckLegacyTransform
+}
+
+const legacyTransformValues = {
+  perspective: 400,
+  translate3d: [0,0,0], translateX: 0, translateY: 0, translateZ: 0, translate: [0,0],
+  rotate3d: [0,0,0], rotateX: 0, rotateY: 0, rotateZ: 0, rotate: 0,
+  skewX: 0, skewY: 0, skew: [0,0],
+  scale: 1
+}
+
+const legacyTransformProperties = [
+  'perspective',
+  'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
+  'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
+  'skewX', 'skewY', 'skew',
+  'scale'
+] 
+
+// Full Component
+const transformLegacyComponent = {
+  component: 'transformFunctions',
+  property: 'transform',
+  subProperties: legacyTransformProperties,
+  defaultValues: legacyTransformValues,
+  functions: transformLegacyFunctions,
+  Interpolate: { 
+    perspective: perspective,
+    translate3d: translate3d, 
+    rotate3d: rotate3d,
+    translate: translate, rotate: rotate, scale: scale, skew: skew
+  },
+  Util: [transformProperty]
+}
+
+export default transformLegacyComponent
+
+Components.TransformLegacy = transformLegacyComponent

src/components/transformLegacyBase.js

@@ -0,0 +1,56 @@
+import KUTE from '../objects/kute.js'
+import perspective from '../interpolation/perspective.js'
+import translate3d from '../interpolation/translate3d.js'
+import rotate3d from '../interpolation/rotate3d.js'
+import translate from '../interpolation/translate.js'
+import rotate from '../interpolation/rotate.js'
+import scale from '../interpolation/scale.js'
+import skew from '../interpolation/skew.js'
+
+import support3DTransform from 'shorter-js/src/boolean/support3DTransform.js'
+import supportTransform from '../util/supportLegacyTransform.js'
+import transformProperty from '../util/transformProperty.js'
+
+
+// const baseLegacyTransform = { property : 'transform', subProperties, defaultValues, Interpolate: {translate,rotate,skew,scale}, functions } // same to svg transform, attr
+// the component that handles all browsers IE9+
+
+// Component Functions
+export function onStartLegacyTransform(tweenProp){
+  if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
+    if (support3DTransform){
+      KUTE[tweenProp] = (elem, a, b, v) => {
+        elem.style[transformProperty] = 
+            (a.perspective||b.perspective ? perspective(a.perspective,b.perspective,'px',v) : '') // one side might be 0
+          + (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'') // array [x,y,z]
+          + (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'') // array [x,y,z]
+          + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y]
+          + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
+      }
+    } else if (supportTransform) {
+      KUTE[tweenProp] = (elem, a, b, v) => {
+        elem.style[transformProperty] = 
+            (a.translate ? translate(a.translate,b.translate,'px',v):'') // array [x,y]
+          + ((a.rotate||b.rotate) ? rotate(a.rotate,b.rotate,'deg',v):'') // one side might be 0
+          + (a.skew ? skew(a.skew,b.skew,'deg',v):'') // array [x,y]
+          + (a.scale||b.scale ? scale(a.scale,b.scale,v):'') // one side might be 0
+      }
+    }
+  }
+}
+
+// Base Component
+const BaseLegacyTransform = {
+  component: 'baseLegacyTransform',
+  property: 'transform',
+  functions: {onStart: onStartLegacyTransform},
+  Interpolate: { 
+    perspective: perspective,
+    translate3d: translate3d, 
+    rotate3d: rotate3d,
+    translate: translate, rotate: rotate, scale: scale, skew: skew
+  },
+  Util: {transformProperty}
+}
+
+export default BaseLegacyTransform

src/core/render.js

@@ -4,21 +4,10 @@ import globalObject from '../objects/globalObject.js'
 import Interpolate from  '../objects/interpolate.js'
 import onStart from  '../objects/onStart.js'
 
-const Time = {}
-  
-// In node.js, use process.hrtime.
-if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
-	Time.now = function () {
-		var time = process.hrtime();
-		return time[0] * 1000 + time[1] / 1000000;
-	};
-// In a browser, use self.performance.now if it is available.
-} else if (typeof (self) !== 'undefined' &&
-         self.performance !== undefined &&
-		 self.performance.now !== undefined) {
-	Time.now = self.performance.now.bind(self.performance);
-}
+// const Time = window.performance
 
+const Time = {}
+Time.now = self.performance.now.bind(self.performance)
 // export {Time}
 
 let Tick = 0

src/index.js

@@ -29,6 +29,7 @@ import HTMLAttributes from './components/htmlAttributes.js'
 import OpacityProperty from './components/opacityProperty.js'
 import TextWrite from './components/textWrite.js'
 import TransformFunctions from './components/transformFunctions.js'
+// import TransformFunctions from './components/transformLegacy.js'
 import SVGDraw from './components/svgDraw.js'
 import SVGMorph from './components/svgMorph.js'
 

src/process/getInlineStyleLegacy.js

@@ -0,0 +1,21 @@
+import transformProperty from '../util/transformProperty.js'
+
+export default function(el) {
+  if ( !el.style ) return; // if the scroll applies to `window` it returns as it has no styling
+  let css = el.style.cssText.replace(/\s/g,'').split(';'), // the cssText | the resulting transform object
+      transformObject = {},
+      arrayFn = ['translate3d','translate','scale3d','skew'];
+  css.map(cs => {
+    let csi = cs.split(':')
+    if ( csi[0] === transformProperty ) {
+      let tps = csi[1].split(')'); //all transform properties
+      tps.map(tpi => {
+        let tpv = tpi.split('('), tp = tpv[0], tv = tpv[1]; // each transform property
+        if ( !/matrix/.test(tp) ){
+          transformObject[tp] = arrayFn.includes(tp) ? tv.split(',') : tv;
+        }
+      })
+    }
+  })
+  return transformObject;
+}

src/tween/tweenBase.js

@@ -66,7 +66,7 @@ export default class TweenBase {
     add(this);
     this.playing = true;
     
-    this._startTime = time || KUTE.Time();
+    this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
     this._startTime += this._delay;
 
     if (!this._startFired) {

src/util/polyfill-legacy.js

@@ -0,0 +1,20 @@
+// build this polyfill for IE9+ browser support
+// import 'minifill/src/this.Window.js'
+// import 'minifill/src/this.Document.js'
+// import 'minifill/src/window.HTMLElement.js'
+
+// import 'minifill/src/Object.defineProperty.js'
+// import 'minifill/src/Object.create.js'
+import 'minifill/src/Function.prototype.bind.js'
+
+import 'minifill/src/Array.from.js'
+import 'minifill/src/Array.prototype.map.js'
+import 'minifill/src/Array.prototype.some.js'
+import 'minifill/src/Array.prototype.every.js'
+import 'minifill/src/Array.prototype.includes.js'
+import 'minifill/src/String.prototype.includes.js'
+
+// IE9+
+import 'minifill/src/Date.now.js'
+import 'minifill/src/window.performance.now.js'
+import 'minifill/src/window.requestAnimationFrame.js'

src/util/polyfill.js

@@ -1,3 +1,4 @@
+// IE10+
 import 'minifill/src/Array.from.js'
 import 'minifill/src/Array.prototype.includes.js'
 import 'minifill/src/String.prototype.includes.js'

src/util/supportLegacyTransform.js

@@ -0,0 +1,2 @@
+import transformProperty from './transformProperty.js'
+export default transformProperty in document.body.style

src/util/transformProperty.js

@@ -0,0 +1,2 @@
+import trueProperty from './trueProperty.js'
+export default trueProperty('transform')