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>

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

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

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

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

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,8 +287,10 @@ 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.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>

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>