diff --git a/assets/css/kute.css b/assets/css/kute.css index 3bc23ca..8166ab9 100644 --- a/assets/css/kute.css +++ b/assets/css/kute.css @@ -166,6 +166,18 @@ h1.example-item span { background-color: transparent; border: 0; } +.text-olive { color: #9C27B0;} +.text-indigo { color: #673AB7;} +.text-green { color: #4CAF50;} +.text-red { color: #e91b1f;} +.text-yellow { color: #ffd626;} +.text-blue { color: #2196F3;} +.text-pink { color: #E91E63;} +.text-orange { color: #FF5722;} +.text-lime { color: #CDDC39;} +.text-teal { color: #009688;} +.text-strong { font-weight: bold } + .hidden { display: none !important; visibility: hidden !important; diff --git a/assets/js/easing.js b/assets/js/easing.js index b7ee793..8d62772 100644 --- a/assets/js/easing.js +++ b/assets/js/easing.js @@ -27,19 +27,19 @@ for (var j=0; j0?d=h:b=h;while(Math.abs(g)>j&&++i=c.nms?c.nri(a,i,b,d):0===j?i:c.bS(a,e,k,b,d)},c.pc=function(a,b,d,e){this._p=!0,a==d&&b==e||c.csv(a,b)},b.Ease={},b.Ease.easeIn=function(){return c.pB(.42,0,1,1)},b.Ease.easeOut=function(){return c.pB(0,0,.58,1)},b.Ease.easeInOut=function(){return c.pB(.5,.16,.49,.86)},b.Ease.easeInSine=function(){return c.pB(.47,0,.745,.715)},b.Ease.easeOutSine=function(){return c.pB(.39,.575,.565,1)},b.Ease.easeInOutSine=function(){return c.pB(.445,.05,.55,.95)},b.Ease.easeInQuad=function(){return c.pB(.55,.085,.68,.53)},b.Ease.easeOutQuad=function(){return c.pB(.25,.46,.45,.94)},b.Ease.easeInOutQuad=function(){return c.pB(.455,.03,.515,.955)},b.Ease.easeInCubic=function(){return c.pB(.55,.055,.675,.19)},b.Ease.easeOutCubic=function(){return c.pB(.215,.61,.355,1)},b.Ease.easeInOutCubic=function(){return c.pB(.645,.045,.355,1)},b.Ease.easeInQuart=function(){return c.pB(.895,.03,.685,.22)},b.Ease.easeOutQuart=function(){return c.pB(.165,.84,.44,1)},b.Ease.easeInOutQuart=function(){return c.pB(.77,0,.175,1)},b.Ease.easeInQuint=function(){return c.pB(.755,.05,.855,.06)},b.Ease.easeOutQuint=function(){return c.pB(.23,1,.32,1)},b.Ease.easeInOutQuint=function(){return c.pB(.86,0,.07,1)},b.Ease.easeInExpo=function(){return c.pB(.95,.05,.795,.035)},b.Ease.easeOutExpo=function(){return c.pB(.19,1,.22,1)},b.Ease.easeInOutExpo=function(){return c.pB(1,0,0,1)},b.Ease.easeInCirc=function(){return c.pB(.6,.04,.98,.335)},b.Ease.easeOutCirc=function(){return c.pB(.075,.82,.165,1)},b.Ease.easeInOutCirc=function(){return c.pB(.785,.135,.15,.86)},b.Ease.easeInBack=function(){return c.pB(.6,-.28,.735,.045)},b.Ease.easeOutBack=function(){return c.pB(.175,.885,.32,1.275)},b.Ease.easeInOutBack=function(){return c.pB(.68,-.55,.265,1.55)},b.Ease.slowMo=function(){return c.pB(0,.5,1,.5)},b.Ease.slowMo1=function(){return c.pB(0,.7,1,.3)},b.Ease.slowMo2=function(){return c.pB(0,.9,1,.1)}}); \ No newline at end of file diff --git a/assets/js/kute-bs.js b/assets/js/kute-bs.js index bb7dd31..0360c50 100644 --- a/assets/js/kute-bs.js +++ b/assets/js/kute-bs.js @@ -24,9 +24,9 @@ // filter unsupported browsers if (!('boxShadow' in document.body.style)) {return;} // add a reference to KUTE object - var g = window, K = KUTE, getComputedStyle = K.gCS, - trueColor = K.truC, prepareStart = K.prS, parseProperty = K.pp, DOM = g.dom, - unit = g.Interpolate.unit, color = g.Interpolate.color, + var g = typeof global !== 'undefined' ? global : window, K = KUTE, getComputedStyle = K.getCurrentStyle, + trueColor = K.truC, prepareStart = K.prepareStart, parseProperty = K.parseProperty, DOM = g.dom, + unit = g._unit, color = g._color, // the preffixed boxShadow property, mostly for legacy browsers // maybe the browser is supporting the property with its vendor preffix diff --git a/assets/js/kute-physics.min.js b/assets/js/kute-physics.min.js new file mode 100644 index 0000000..592abf3 --- /dev/null +++ b/assets/js/kute-physics.min.js @@ -0,0 +1,2 @@ +// KUTE.js | © dnp_theme | Physics Plugin | MIT-License +!function(a,b){if("function"==typeof define&&define.amd)define(["kute.js"],b);else if("object"==typeof module&&"function"==typeof require)module.exports=b(require("kute.js"));else{if("undefined"==typeof a.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js");b(a.KUTE)}}(this,function(a){"use strict";var b="undefined"!=typeof global?global:window;b.spring=function(a){a=a||{};var b=Math.max(1,(a.frequency||300)/20),d=Math.pow(20,(a.friction||200)/100),e=a.anticipationStrength||0,f=(a.anticipationSize||0)/1e3;return function(a){var g,h,i,j,k,l,m,n,o=1-f;return l=a/o-f/o,a.001;)h=c.b-c.a,c={a:c.b,b:c.b+h*b,H:c.H*b*b};return c.b}(),function(){var a,d,i,j;for(d=Math.sqrt(2/(f*h*h)),i={a:-d,b:d,H:1},g&&(i.a=0,i.b=2*i.b),c.push(i),a=h,j=[];i.b<1&&i.H>.001;)a=i.b-i.a,i={a:i.b,b:i.b+a*b,H:i.H*e},j.push(c.push(i));return j}(),function(b){var e,f,i;for(f=0,e=c[f];!(b>=e.a&&b<=e.b)&&(f+=1,e=c[f]););return i=e?d.getPointInCurve(e.a,e.b,e.H,b,a,h):g?0:1}};var d=b.gravity.prototype;d.getPointInCurve=function(a,b,c,d,e,f){var g,h;return f=b-a,h=2/f*d-1-2*a/f,g=h*h*c-c+1,e.initialForce&&(g=1-g),g},b.forceWithGravity=function(a){var c=a||{};return c.initialForce=!0,b.gravity(c)},b.BezierMultiPoint=function(a){a=a||{};var b=a.points,c=!1,d=[];return function(){var a,c;for(a in b){if(c=parseInt(a),c>=b.length-1)break;e.fn(b[c],b[c+1],d)}return d}(),function(a){return 0===a?0:1===a?1:e.yForX(a,d,c)}};var e=b.BezierMultiPoint.prototype;e.fn=function(a,b,c){var d=function(c){return e.Bezier(c,a,a.cp[a.cp.length-1],b.cp[0],b)};return c.push(d)},e.Bezier=function(a,b,c,d,e){return{x:Math.pow(1-a,3)*b.x+3*Math.pow(1-a,2)*a*c.x+3*(1-a)*Math.pow(a,2)*d.x+Math.pow(a,3)*e.x,y:Math.pow(1-a,3)*b.y+3*Math.pow(1-a,2)*a*c.y+3*(1-a)*Math.pow(a,2)*d.y+Math.pow(a,3)*e.y}},e.yForX=function(a,b,c){var d,e,f,g,h,i,j,k,l=0,m=b.length;for(d=null,l;l=e(0).x&&a<=e(1).x&&(d=e),null===d);l++);if(!d)return c?0:1;for(k=1e-4,g=0,i=1,h=(i+g)/2,j=d(h).x,f=0;Math.abs(a-j)>k&&f<100;)a>j?g=h:i=h,h=(i+g)/2,j=d(h).x,f++;return d(h).y},b.Physics={physicsInOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-c/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+c/1e3,y:1}]}]})},physicsIn:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-c/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+c/1e3,y:1}]}]})},physicsBackOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+c/1e3,y:1.3}]}]})},physicsBackIn:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.28-c/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsBackInOut:function(a){var c;return a=a||{},c=a.friction||200,b.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.68-c/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+c/1e3,y:1.45}]}]})}}}); \ No newline at end of file diff --git a/assets/js/perf.js b/assets/js/perf.js index 80888c1..70902d4 100644 --- a/assets/js/perf.js +++ b/assets/js/perf.js @@ -115,7 +115,6 @@ function createTest(count, property, engine, repeat) { } } else if (engine==='tween') { - if (property==="left"){ update = updateLeft; } else if (property==="translateX"){ @@ -126,11 +125,11 @@ function createTest(count, property, engine, repeat) { } } if (engine==='tween') { - animate(); - function animate( time ) { + var animate = function( time ) { requestAnimationFrame( animate ); TWEEN.update( time ); } + animate(); } } diff --git a/assets/js/svg.js b/assets/js/svg.js index 240360e..43c2bca 100644 --- a/assets/js/svg.js +++ b/assets/js/svg.js @@ -19,14 +19,14 @@ morphBtn1.addEventListener('click', function(){ }, false); // polygon morph -var morphTween21 = KUTE.fromTo('#triangle', {path: '#triangle', fill: '#673AB7'}, { path: '#square', fill: '#2196F3' }, { +var morphTween21 = KUTE.fromTo('#triangle', {attr: { fill: '#673AB7'}, path: '#triangle' }, { attr: { fill: '#2196F3' }, path: '#square' }, { duration: 1500, easing: 'easingCubicOut', }); -var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', fill: '#2196F3'}, { path: '#star2', fill: 'deeppink' }, { +var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', attr:{ fill: '#2196F3'} }, { path: '#star2', attr:{ fill: 'deeppink' } }, { morphIndex: 9, delay: 500, duration: 1500, easing: 'easingCubicOut' }); -var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', fill: 'deeppink'}, { path: '#triangle', fill: '#673AB7' }, { +var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', attr:{ fill: 'deeppink'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, { delay: 500, duration: 1500, easing: 'easingCubicOut' }); @@ -52,10 +52,10 @@ morphBtn2.addEventListener('click', function(){ // simple multi morph var multiMorphBtn = document.getElementById('multiMorphBtn'); -var multiMorph1 = KUTE.to('#w11', { path: '#w24', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var multiMorph2 = KUTE.to('#w13', { path: '#w21', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var multiMorph3 = KUTE.to('#w14', { path: '#w22', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); -var multiMorph4 = KUTE.to('#w12', { path: '#w23', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var multiMorph1 = KUTE.to('#w11', { path: '#w24', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var multiMorph2 = KUTE.to('#w13', { path: '#w21', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var multiMorph3 = KUTE.to('#w14', { path: '#w22', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var multiMorph4 = KUTE.to('#w12', { path: '#w23', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); multiMorphBtn.addEventListener('click', function(){ !multiMorph1.playing && multiMorph1.start(); @@ -67,7 +67,7 @@ multiMorphBtn.addEventListener('click', function(){ // complex multi morph var compliMorphBtn = document.getElementById('compliMorphBtn'); -var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', fill: "#2196F3"}, { path: '#circle-container', fill: "#FF5722" }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); +var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', attr:{ fill: "#2196F3"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path: '#eye-left' }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'}); @@ -201,42 +201,4 @@ var svgTween52 = KUTE.to(svgm2, { mixedBtn.addEventListener('click', function(){ !svgTween51.playing && svgTween51.start(); !svgTween52.playing && svgTween52.start(); -}, false); - - -// fill HEX/RGBa -var tween1 = KUTE.to('#fillSVG', {fill: '#069'}, {duration: 1500, yoyo:true, repeat: 1}); - -// stroke HEX/RGBa -var tween2 = KUTE.to('#fillSVG',{stroke: '#069'}, {delay: 200, yoyo:true, repeat: 1}); - -// strokeOpacity Number 0-1 -var tween3 = KUTE.to('#fillSVG',{strokeOpacity: 0.6}, {duration: 1500, yoyo:true, repeat: 1}); - -// fillOpacity Number 0-1 -var tween4 = KUTE.to('#fillSVG',{fillOpacity: 0.2}, {yoyo:true, repeat: 1}); - -// strokeWidth Number -var tween5 = KUTE.to('#fillSVG',{strokeWidth: '0px'}, {duration: 1500, yoyo:true, repeat: 1}); - -tween1.chain(tween4); -tween2.chain(tween3,tween5); - -var cssBtn = document.getElementById('cssBtn'); -cssBtn.addEventListener('click',function(){ - !tween1.playing && !tween3.playing && !tween4.playing && !tween5.playing && tween1.start(); - !tween2.playing && !tween3.playing && !tween4.playing && !tween5.playing && tween2.start(); -}, false); - -// stopColor HEX/RGBa -var tween6 = KUTE.to('#stopCSVG',{stopColor: 'rgb(00,66,99)'}, {duration: 1500, yoyo:true, repeat: 1}); - -// stopOpacity Number 0-1 -var tween7 = KUTE.to('#stopOSVG',{stopOpacity: 0}, {duration: 1500, yoyo:true, repeat: 1}); - -tween6.chain(tween7) - -var gradBtn = document.getElementById('gradBtn'); -gradBtn.addEventListener('click', function(){ - !tween6.playing && !tween7.playing && tween6.start(); -}); +}, false); \ No newline at end of file diff --git a/easing.html b/easing.html index c36fbb3..4790517 100644 --- a/easing.html +++ b/easing.html @@ -177,6 +177,7 @@

Cubic Bezier Functions

While modern browsers support CSS3 transition with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5), in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the features page, we are using a modified version of the cubic-bezier by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.

You can use them either with easing: Bezier(mX1, mY1, mX2, mY2) or easing: 'bezier(mX1, mY1, mX2, mY2)', where mX1, mY1, mX2, mY2 are Float values from 0 to 1. You can find the right values you need right here.

+

NOTE: Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.

There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:

  • Equivalents of the browser's generic timing functions: easeIn, easeOut and easeInOut
    • @@ -240,6 +241,7 @@

    Physics Based Functions

    KUTE.js also packs the dynamics physics easing functions by Michael Villar and I have to say these functions are amazing in terms of flexibility, control and performance. They allow you to control the friction, bounciness, frequency, elasticity, or multiple bezier points for your animations.

    +

    NOTE: Starting with KUTE.js v 1.6.0 the Physics Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.

    You can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly bezier based functions. Ok now, let's get to it:

      @@ -303,12 +305,12 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{" - @@ -324,8 +326,8 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{" - - + + diff --git a/examples.html b/examples.html index dee8f81..84a44ae 100644 --- a/examples.html +++ b/examples.html @@ -419,7 +419,7 @@ var myMultiTween2 = KUTE.allFromTo(

      Easing Functions

      -

      We've talked about KUTE.js featuring many easing functions, so let's go ahead and create some examples. The first box below will animate with linear easing function and the second will use another function you choose. The example features the core easing functions from the Robert Penner's easing functions.

      +

      KUTE.js core engine comes with Robert Penner's easing functions, but it can also work with any other easing functions, including custom functions. In the example below the first box animation uses the linear easing function and the second will use another function you choose.

      Linear
      diff --git a/extend.html b/extend.html index f6458af..d7baea3 100644 --- a/extend.html +++ b/extend.html @@ -117,18 +117,18 @@

      As suggested in the above template, your function body could be written with one or more of the examples below.

      Extend Tween Control

      -

      In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check KUTE.Tween function to get the internal references notation:

      -
      //add a reference to KUTE object
-var K = window.KUTE;
+		
      In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check Tween function to get the internal references notation:
      
+
      //add a reference to _tween function
+var Tween = window._Tween;
 
 // let's add a timescale method
-K.Tween.prototype.timescale = function(factor){
-    this._dr *= factor; // this._dr is the internal tween duration
+Tween.prototype.timescale = function(factor){
+    this.options.duration *= factor;
     return this;
 }
 
 // or let's add a reverse method
-K.Tween.prototype.reverse = function(){
+Tween.prototype.reverse = function(){
     for (var p in this._vE) {
         var tmp = this._vSR[p];         // we cache this object first
         this._vSR[p] = this._vE[p];     // this._vSR is the internal valuesStartRepeat object
@@ -139,13 +139,13 @@ K.Tween.prototype.reverse = function(){
 }
 
 // go back in time
-K.Tween.prototype.seek = function (time) {
-    this._sT -= time;  // this._sT is the startTime
+Tween.prototype.seek = function (time) {
+    this._startTime -= time;
     return this;
 };
 
 // how about a restart method
-K.Tween.prototype.restart = function(){
+Tween.prototype.restart = function(){
     if (this.playing) {
         this.stop();
         this.start();
@@ -154,12 +154,11 @@ K.Tween.prototype.restart = function(){
 }
 
 // methods to queue callbacks with ease
-K.Tween.prototype.onUpdate = function(){
-    this._uC = arguments; 
+Tween.prototype.onUpdate = function(){
+    this.options.update = arguments; 
     return this;
 }
-// _sC = startCallback | _cC = completeCallback | _stC = stopCallback
-// _pC = pauseCallback | _rC = resumeCallback
+
 
      
         
      For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very secific need.
      
         
@@ -167,17 +166,17 @@ K.Tween.prototype.onUpdate = function(){
 		
      KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and you'll master it real quick, it's very easy.
       
         
      We need basically 3 functions:
      
         
        
-            
      • KUTE.prS['propertyName'] a prepareStart function to get the current value of the property required for the .to() method;
        • 
-            
      • KUTE.pp['propertyName'] a processProperty function to process the user value / current value to have it ready to tween;
        • 
+            
      • KUTE.prepareStart['propertyName'] a function to get the current value of the property required for the .to() method;
        • 
+            
      • KUTE.parseProperty['propertyName'] a function to process the user value / current value to have it ready to tween;
        • 
             
      • window.dom['propertyName'] a domUpdate function that will update the property value into the DOM;
        • 
             
      • optional a function that will work as an utility for your value processing.
        • 
         
      
         
      So let's add support for boxShadow! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template and let's break it down to pieces:
      
 
      // add a reference to global and KUTE object
-var g = window, K = KUTE, 
+var g = typeof global !== 'undefined' ? global : window, K = KUTE, 
     // add a reference to KUTE utilities
-    prepareStart = K.prS, DOM = g.dom, parseProperty = K.pp, trueColor = K.truC,
-    color = g.Interpolate.color, unit = g.Interpolate.unit, getComputedStyle = K.gCS;
+    prepareStart = K.prepareStart, DOM = g.dom, parseProperty = K.parseProperty, trueColor = K.truC,
+    color = g._color, unit = g._unit, getComputedStyle = K.getCurrentStyle;
 
 // filter unsupported browsers
 if (!('boxShadow' in document.body.style)) {return;}
@@ -192,7 +191,7 @@ var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}
 
      // for the .to() method, you need to prepareStart the boxShadow property
 // which means you need to read the current computed value
 prepareStart['boxShadow'] = function(element,property,value){
-    var cssBoxShadow = getComputedStyle(element,'boxShadow'); // where K.gCS()/getComputedStyle is an accurate getComputedStyle() core method
+    var cssBoxShadow = getComputedStyle(element,'boxShadow'); // where K.getCurrentStyle() is an accurate getComputedStyle() core method
     return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
 }
 
@@ -231,7 +230,7 @@ var processBoxShadowArray = function(shadow){
 };
 
        
 
-        
      Next we'll need to write a processProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the K.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
      
+        
      Next we'll need to write a processProperty function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the window.dom['boxShadow'] function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.
      
         
 
      // the processProperty for boxShadow 
 // registers the window.dom['boxShadow'] function 
@@ -305,15 +304,15 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
             
    • KUTE.selector(selector,multi) is the selector utility that uses getElementById or querySelector when multi argument is null or false, BUT when true, querySelectorAll is used and returns a HTMLCollection object.
      • 
             
    • KUTE.property(propertyName) is the autoPrefix function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function returns undefinedPropertyName and that would be an easy way to detect support for that property on most legacy browsers: 
      if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }
      • 
             
    • KUTE.getPrefix() returns a vendor preffix even if the browser supports a specific preffixed property or not.
      • 
-            
    • KUTE.gCS(element,property) a hybrid getComputedStyle function to get the current value of the property required for the .to() method; it actually checks in element.style, element.currentStyle and window.getComputedStyle(element,null) to make sure it won't miss the property value;
      • 
+            
    • KUTE.getCurrentStyle(element,property) a hybrid getComputedStyle function to get the current value of the property required for the .to() method; it actually checks in element.style, element.currentStyle and window.getComputedStyle(element,null) to make sure it won't miss the property value;
      • 
             
    • KUTE.truD(value) a function that accepts String and Number and returns a {v: 150, u: 'px'} object for any box model or a single numeric value based property and make it ready to tween. When a second parameter is set to true it will return an object with value and unit specific for rotation angles and skews.
      • 
             
    • KUTE.truC(color) a function that returns an {r: 150, g: 150, b: 0} color object ready to tween; if the color value is a web safe color, the IE9+ browsers will be able to return the rgb object we need.
      • 
             
    • KUTE.htr(hex) a function that accepts HEX formatted colors and returns an {r: 150, g: 150, b: 0} color object;
      • 
             
    • KUTE.rth(r,g,b) a function that accepts numeric values for red, blue and green and returns a HEX format #006699 color string.
      • 
-            
    • Interpolate.number is most essential interpolation tool when developing plugins for various properties not supported in the core.
      • 
-            
    • Interpolate.unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
      • 
-            
    • Interpolate.color is a very fast interpolation function for colors, as used in the above example.
      • 
-            
    • Interpolate.array and Interpolate.coords are SVG Plugin only, but you can have a look anytime when you're out of ideas.
      • 
+            
    • window._number is most essential interpolation tool when developing plugins for various properties not supported in the core.
      • 
+            
    • window._unit is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like width: 250px
      • 
+            
    • window._color is a very fast interpolation function for colors, as used in the above example.
      • 
+            
    • window._coords is SVG Plugin only, but you can have a look anytime when you're out of ideas.
      •
    @@ -104,6 +105,7 @@

    These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, here's how.

    +

    Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.

    Do not try this test on lower end or mobile devices.

    diff --git a/properties.html b/properties.html index b816c9a..4f81335 100644 --- a/properties.html +++ b/properties.html @@ -123,7 +123,8 @@

    The SVG Plugin can animate the d attribute of a given <path> or <glyph> element with the tween property called path. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to the D3.js examples for wider usability.

    Further more, the SVG Plugin can animate the stroke in a way that you probably know as drawSVG. KUTE.js implements it as draw tween property that deals with the well known CSS properties: strokeDasharray and strokeDashoffset. -

    The SVG Plugin also manages animation for most useful CSS properties that are specific to SVG elements, since SMIL animations tend to go extinct, this plugin can get quite useful.

    + +

    Box Model Properties

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

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

    Presentation Attributes

    The Attributes Plugin can animate any numerical presentation attribute such as width, cx or stop-opacity, but the values can be also suffixed: 150px or 50%, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.

    The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance KUTE.to('selector', {attr:{width:150}}) is clearly different from KUTE.to('selector', {width:150}) which is the the CSS property with the same name.

    +

    Starting KUTE.js 1.6.0 the Attributes Plugin can also animate color attributes such as stroke, fill or stop-color, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file. More details to come.

    Typography Properties

    The CSS Plugin also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.

    diff --git a/src/kute-attr.min.js b/src/kute-attr.min.js index 1db299e..5e98bb3 100644 --- a/src/kute-attr.min.js +++ b/src/kute-attr.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © dnp_theme | Attributes Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prS,u=n.pp,a=r.Interpolate.unit,f=r.Interpolate.number,s=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=v(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(v(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var b=v(u),g=c(n,b.replace(/_+[a-z]+/,""));if(l.indexOf(b)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(g))){var y=d(g).u||d(r[u]).u,A=/%/.test(y)?"_percent":"_"+y;u+A in e||(e[u+A]=function(t,e,r,n,i){var o=o||v(e).replace(A,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),o[u+A]=d(r[u])}else l.indexOf(b)>-1?(u in e||(e[u]=function(t,e,n,i,o){var u=u||v(e);t.setAttribute(u,s(n,i,o,r.keepHex))}),o[u]=p(r[u])):(u in e||(e[u]=function(t,e,r,n,i){var o=o||v(e);t.setAttribute(o,f(r,n,i))}),o[u]=parseFloat(r[u]))}return o}}); \ No newline at end of file +// KUTE.js v1.5.97 | © dnp_theme | Attributes Plugin | MIT-License +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prepareStart,u=n.parseProperty,a=r._unit,f=r._number,s=r._color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=b(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(b(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var v=b(u),y=c(n,v.replace(/_+[a-z]+/,""));if(l.indexOf(v)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(y))){var _=d(y).u||d(r[u]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){t.setAttribute(e.replace(g,""),a(r.v,n.v,n.u,i))}),o[v+g]=d(r[u])}else l.indexOf(v)>-1?(v in e||(e[v]=function(t,e,n,i,o){t.setAttribute(e,s(n,i,o,r.keepHex))}),o[v]=p(r[u])):(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,f(r,n,i))}),o[v]=parseFloat(r[u]))}return o}}); \ No newline at end of file diff --git a/src/kute-css.min.js b/src/kute-css.min.js index 60926c0..290ae4f 100644 --- a/src/kute-css.min.js +++ b/src/kute-css.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © dnp_theme | CSS Plugin | MIT-License -!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,i=e.pp,n=e.prS,d=e.gCS,u=e.truD,f=e.truC,a=e.property("borderRadius"),p=e.property("borderTopLeftRadius"),g=e.property("borderTopRightRadius"),l=e.property("borderBottomLeftRadius"),c=e.property("borderBottomRightRadius"),s=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],b=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],v=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],y=["backgroundPosition"],R=b.concat(h,v),T=s.concat(m,b,h,v,y),x=T.length,B=(r.Interpolate.number,r.Interpolate.unit),L=r.Interpolate.color,C=C||{},W=0;W1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this}); \ No newline at end of file diff --git a/src/kute-svg.min.js b/src/kute-svg.min.js index bff3581..b2ad32a 100644 --- a/src/kute-svg.min.js +++ b/src/kute-svg.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © dnp_theme | SVG Plugin | MIT-License -!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("SVG Plugin require KUTE.js.");t.KUTE.svg=e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,r=t,n=e.dom,a=r.pp,s=r.prS,i=r.gCS,o=!(!navigator||null===new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent))&&parseFloat(RegExp.$1),l=r.truC,u=r.truD,h=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"],f=["fill","stroke","stopColor"],p=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gim,g="http://www.w3.org/2000/svg",v=e.Interpolate.number,c=e.Interpolate.unit,d=e.Interpolate.color,m=e.Interpolate.array=function(t,e,r,n){var a,s=[];for(a=0;a1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s1){var n=function(t){var e=t.split(",");if(2==e.length&&!isNaN(e[0])&&!isNaN(e[1]))return[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!=t&&void 0!=e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var s=0;s,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},u.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,u){var s=s||"alpha"===u.textChars?o:"upper"===u.textChars?a:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?l:u.textChars?u.textChars.split(""):o,m=s.length,b=s[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},u.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(s(n,r,i))}),parseInt(e)||0},this}); \ No newline at end of file +// KUTE.js v1.5.97 | © dnp_theme | Text Plugin | MIT-License +!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=e.dom,i=n.prepareStart,s=n.parseProperty,u=e._number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},s.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?p:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,m=u.length,b=u[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this}); \ No newline at end of file diff --git a/src/kute.min.js b/src/kute.min.js index 61b8880..3bb9047 100644 --- a/src/kute.min.js +++ b/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js v1.5.95 | © dnp_theme | Core Engine | MIT-License -!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.KUTE=e()}(this,function(){"use strict";for(var t="undefined"!=typeof global?global:window,e={},n=t._tweens=[],r=null,i=t.performance,a=(function(){for(var t=document.createElement("div"),e=0,n=["Moz","moz","Webkit","webkit","O","o","Ms","ms"],r=["MozTransform","mozTransform","WebkitTransform","webkitTransform","OTransform","oTransform","MsTransform","msTransform"],e=0,i=n.length;e0)return t._r<9999?t._r--:t._r=0,t._y&&(t.reversed=!t.reversed,J.call(t)),t._sT=t._y&&!t.reversed?e+t._rD:e,!0;t._cC&&t._cC.call(),et.call(t);for(var a=0,s=t._cT.length;a0&&(this._r=this.repeat),this._y&&this.reversed===!0&&(J.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){n.length||_()},48)},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(m,c,!1),document.removeEventListener(w,c,!1),document.body.removeAttribute("data-tweening"))},nt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(m,c,!1),document.addEventListener(w,c,!1),document.body.setAttribute("data-tweening","scroll"))},rt=function(e){if("function"==typeof e)return e;if("string"==typeof e){if(/easing|linear/.test(e))return at[e];if(/bezier/.test(e)){var n=e.replace(/bezier|\s|\(|\)/g,"").split(",");return t.Bezier(1*n[0],1*n[1],1*n[2],1*n[3])}return/physics/.test(e)?t.Physics[e]():t.Ease[e]()}},it={},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)))},at.easingElasticOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/r)+1)},at.easingElasticInOut=function(t){var e,n=.1,r=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=r/4):e=r*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/r)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var st=function(t){nt.call(this),W(this._el,this._ops),this._rpr&&this.getStartValues(),e.svg&&e.svq(this);for(var n in this._vE)this._vSR[n]=this._vS[n];return d(this),this.playing=!0,this.paused=!1,this._sCF=!1,this._sT=t||i.now(),this._sT+=this._dl,this._sCF||(this._sC&&this._sC.call(),this._sCF=!0),!r&&U(),this},ot=function(){return this.paused&&this.playing&&(this.paused=!1,null!==this._rC&&this._rC.call(),this._sT+=i.now()-this._pST,d(this),!r&&U()),this},ut=t._tween=function(e,n,r,a){this._el=e,this._vSR={},this._vS=n,this._vE=r,this._y=a.yoyo||!1,this.playing=!1,this.reversed=!1,this.paused=!1,this._sT=null,this._pST=null,this._rpr=a.rpr||!1,this._dr=a.duration||700,this._r=a.repeat||0,this._rD=a.repeatDelay||0,this._dl=a.delay||0,this._e=a&&a.easing&&"function"==typeof rt(a.easing)?rt(a.easing):at.linear,this._cT=[],this._sCF=!1,this._sC=a.start||null,this._uC=a.update||null,this._cC=a.complete||null,this._pC=a.pause||null,this._rC=a.play||null,this._stC=a.stop||null,this.repeat=this._r,this._ops={},this.start=st,this.play=ot,this.resume=ot;for(var s in a)s in this||/delay|rpr|duration|repeat|start|stop|update|complete|pause|play|yoyo|easing/i.test(s)||(this._ops[s]=a[s]);this.pause=function(){return!this.paused&&this.playing&&(g(this),this.paused=!0,this._pST=i.now(),null!==this._pC&&this._pC.call()),this},this.stop=function(){return!this.paused&&this.playing&&(g(this),this.playing=!1,this.paused=!1,et.call(this),null!==this._stC&&this._stC.call(),this.stopChainedTweens(),tt.call(this)),this},this.chain=function(){return this._cT=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this._cT.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ft(t[i],e,r[i]))},ct=function(t,e,n,r){this.tweens=[];for(var i=[],a=0,s=t.length;a0?r.delay+(r.offset||0):r.delay,this.tweens.push(ht(t[a],e,n,i[a]))},ft=(lt.prototype=ct.prototype={start:function(t){t=t||i.now();for(var e=0,n=this.tweens.length;e0)return t.options.repeat<9999?t.options.repeat--:t.options.repeat=0,t.options.yoyo&&(t.reversed=!t.reversed,J.call(t)),t._startTime=t.options.yoyo&&!t.reversed?n+t.options.repeatDelay:n,!0;t.options.complete&&t.options.complete.call(),tt.call(t);for(var s=0,a=t.options.chain.length;s0&&(this.options.repeat=this.repeat),this.options.yoyo&&this.reversed===!0&&(J.call(this),this.reversed=!1),this.playing=!1,setTimeout(function(){i.length||y()},48)},tt=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&document.body.getAttribute("data-tweening")&&(document.removeEventListener(_,c,!1),document.removeEventListener(w,c,!1),document.body.removeAttribute("data-tweening"))},et=function(){("scroll"in this._vE||"scrollTop"in this._vE)&&!document.body.getAttribute("data-tweening")&&(document.addEventListener(_,c,!1),document.addEventListener(w,c,!1),document.body.setAttribute("data-tweening","scroll"))},nt=function(e){if("function"==typeof e)return e;if("string"==typeof e){if(/easing|linear/.test(e))return at[e];if(/bezier/.test(e)){var n=e.replace(/bezier|\s|\(|\)/g,"").split(",");return t.Bezier(1*n[0],1*n[1],1*n[2],1*n[3])}return/physics/.test(e)?t.Physics[e].apply(this):t.Ease[e].apply(this)}},it=function(){var e={},n=h(this._el,"transform"),i=["rotate","skew"],r=["X","Y","Z"];for(var s in this._vS)if(X.indexOf(s)!==-1){var a=/(rotate|translate|scale)$/.test(s);if(/translate/.test(s)&&"translate"!==s)e.translate3d=n.translate3d||F[s];else if(a)e[s]=n[s]||F[s];else if(!a&&/rotate|skew/.test(s))for(var o=0;o<2;o++)for(var u=0;u<3;u++){var l=i[o]+r[u];X.indexOf(l)!==-1&&l in this._vS&&(e[l]=n[l]||F[l])}}else if(P.indexOf(s)===-1)if("opacity"===s&&S){var c=v(this._el,"filter");e.opacity="number"==typeof c?c:F.opacity}else A.indexOf(s)!==-1?e[s]=v(this._el,s)||o[s]:e[s]=s in rt?rt[s](this._el,s,this._vS[s]):0;else e[s]=null===this._el||void 0===this._el?t.pageYOffset||x.scrollTop:this._el.scrollTop;for(var s in n)X.indexOf(s)===-1||s in this._vS||(e[s]=n[s]||F[s]);if(this._vS={},this._vS=K(e,this._el),O in this._vE)for(var p in this._vS[O]){p in this._vE[O]||(this._vE[O][p]={});for(var f in this._vS[O][p])if(void 0!==this._vS[O][p][f].value){f in this._vE[O][p]||(this._vE[O][p][f]={});for(var d in this._vS[O][p][f])d in this._vE[O][p][f]||(this._vE[O][p][f][d]=this._vS[O][p][f][d])}if("value"in this._vS[O][p]&&!("value"in this._vE[O][p]))for(var g in this._vS[O][p])g in this._vE[O][p]||(this._vE[O][p][g]=this._vS[O][p][g])}},rt={},st={},at=t.Easing={};at.linear=function(t){return t},at.easingSinusoidalIn=function(t){return-Math.cos(t*Math.PI/2)+1},at.easingSinusoidalOut=function(t){return Math.sin(t*Math.PI/2)},at.easingSinusoidalInOut=function(t){return-.5*(Math.cos(Math.PI*t)-1)},at.easingQuadraticIn=function(t){return t*t},at.easingQuadraticOut=function(t){return t*(2-t)},at.easingQuadraticInOut=function(t){return t<.5?2*t*t:-1+(4-2*t)*t},at.easingCubicIn=function(t){return t*t*t},at.easingCubicOut=function(t){return--t*t*t+1},at.easingCubicInOut=function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},at.easingQuarticIn=function(t){return t*t*t*t},at.easingQuarticOut=function(t){return 1- --t*t*t*t},at.easingQuarticInOut=function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},at.easingQuinticIn=function(t){return t*t*t*t*t},at.easingQuinticOut=function(t){return 1+--t*t*t*t*t},at.easingQuinticInOut=function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},at.easingCircularIn=function(t){return-(Math.sqrt(1-t*t)-1)},at.easingCircularOut=function(t){return Math.sqrt(1-(t-=1)*t)},at.easingCircularInOut=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)},at.easingExponentialIn=function(t){return Math.pow(2,10*(t-1))-.001},at.easingExponentialOut=function(t){return 1-Math.pow(2,-10*t)},at.easingExponentialInOut=function(t){return(t*=2)<1?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))},at.easingBackIn=function(t){var e=1.70158;return t*t*((e+1)*t-e)},at.easingBackOut=function(t){var e=1.70158;return--t*t*((e+1)*t+e)+1},at.easingBackInOut=function(t){var e=2.5949095;return(t*=2)<1?.5*(t*t*((e+1)*t-e)):.5*((t-=2)*t*((e+1)*t+e)+2)},at.easingElasticIn=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,-(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)))},at.easingElasticOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,n*Math.pow(2,-10*t)*Math.sin((t-e)*Math.PI*2/i)+1)},at.easingElasticInOut=function(t){var e,n=.1,i=.4;return 0===t?0:1===t?1:(!n||n<1?(n=1,e=i/4):e=i*Math.asin(1/n)/Math.PI*2,(t*=2)<1?-.5*(n*Math.pow(2,10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)):n*Math.pow(2,-10*(t-=1))*Math.sin((t-e)*Math.PI*2/i)*.5+1)},at.easingBounceIn=function(t){return 1-at.easingBounceOut(1-t)},at.easingBounceOut=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},at.easingBounceInOut=function(t){return t<.5?.5*at.easingBounceIn(2*t):.5*at.easingBounceOut(2*t-1)+.5};var ot=t._start=function(t){et.call(this),W(this._el,this.options),this.options.rpr&&it.apply(this),n.svg&&n.svq(this);for(var i in this._vE)i in st&&st[i],this._vSR[i]=this._vS[i];return d(this),this.playing=!0,this.paused=!1,this._startFired=!1,this._startTime=t||e.now(),this._startTime+=this.options.delay,this._startFired||(this.options.start&&this.options.start.call(),this._startFired=!0),!r&&H(),this},ut=t._play=function(){return this.paused&&this.playing&&(this.paused=!1,this.options.resume&&this.options.resume.call(),this._startTime+=e.now()-this._pauseTime,d(this),!r&&H()),this},lt=t._Tween=function(t,n,i,r){this._el="scroll"in i&&(void 0===t||null===t)?x:t,this.playing=!1,this.reversed=!1,this.paused=!1,this._startTime=null,this._pauseTime=null,this._startFired=!1,this._vSR={},this._vS=r.rpr?n:K(n,t),this._vE=K(i,t),this.options={};for(var s in r)this.options[s]=r[s];this.options.chain=[],this.options.easing=r.easing&&"function"==typeof nt(r.easing)?nt(r.easing):at.linear,this.options.repeat=r.repeat||0,this.options.repeatDelay=r.repeatDelay||0,this.options.yoyo=r.yoyo||!1,this.options.rpr=r.rpr||!1,this.options.duration=r.duration||700,this.options.delay=r.delay||0,this.repeat=this.options.repeat,this.start=ot,this.play=ut,this.resume=ut,this.pause=function(){return!this.paused&&this.playing&&(g(this),this.paused=!0,this._pauseTime=e.now(),this.options.pause&&this.options.pause.call()),this},this.stop=function(){return!this.paused&&this.playing&&(g(this),this.playing=!1,this.paused=!1,tt.call(this),this.options.stop&&this.options.stop.call(),this.stopChainedTweens(),V.call(this)),this},this.chain=function(){return this.options.chain=arguments,this},this.stopChainedTweens=function(){for(var t=0,e=this.options.chain.length;t0?n.delay+(n.offset||0):n.delay,this.tweens.push(ft(t[r],e,i[r]))},pt=function(t,e,n,i){this.tweens=[];for(var r=[],s=0,a=t.length;s0?i.delay+(i.offset||0):i.delay,this.tweens.push(ht(t[s],e,n,r[s]))},ft=(ct.prototype=pt.prototype={start:function(t){t=t||e.now();for(var n=0,i=this.tweens.length;n 
    // AMD style
@@ -111,8 +109,6 @@ define([
     "kute.js/kute-css.js", // optional for additional CSS properties
     "kute.js/kute-attr.js", // optional for animating presentation attributes
     "kute.js/kute-text.js" // optional for string write and number incrementing animations
-    "kute.js/kute-bezier.js", // optional for more accurate easing functions
-    "kute.js/kute-physics.js" // optional for more flexible & accurate easing functions
 ], function(KUTE){
     // ...
 });
@@ -126,8 +122,6 @@ define([
 
 		
    The CDN repositories receive latest updates here and right here. You might also want to include the tools that you need for your project:
    
 
    <script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
-<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSS Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVG Plugin -->
 <script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-text.min.js"></script> <!-- Text Plugin -->
@@ -135,8 +129,6 @@ define([
 
    
         
    Alternate CDN links:
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSS Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVG Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-text.min.js"></script> <!-- Text Plugin -->
diff --git a/svg.html b/svg.html
index 4a93b01..d0179b4 100644
--- a/svg.html
+++ b/svg.html
@@ -163,7 +163,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
-

CSS Properties Specific to SVGs

-

As you probably noticed in the above examples we've animated the background color for some of the shapes, that is fill, one of the properties supported by the SVG Plugin, so let's create some tweens real quick:

-
// fill HEX/RGBa
-var tween1 = KUTE.to('selector', {fill: '#069'});
-    
-// fillOpacity Number 0-1
-var tween2 = KUTE.to('selector',{fillOpacity: 0.2});
 
-// stroke HEX/RGBa
-var tween3 = KUTE.to('selector',{stroke: 'rgba(00,66,99,0.8)'});
-    
-// strokeOpacity Number 0-1
-var tween4 = KUTE.to('selector',{strokeOpacity: 0.6});
-    
-// strokeWidth Number / String
-var tween5 = KUTE.to('selector',{strokeWidth: '10px'});
-
-

A quick demo with the above:

-
- - - - -
- Start -
-
-

Please note that strokeWidth is a very interesting property that acts very different: when number is provided the rendered stroke will scale depending on viewBox and/or width and height, but if String is provided you can actually force the browser to scale the stroke as you like.

-

Now let's have a look at gradients, here we can animate the stopColor defined within the SVG's <linearGradient> element.

-
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
-    <stop offset="0%" style="stop-color: #ffd626; stop-opacity:1"></stop>
-    <!-- our tween object targets the element below -->
-    <stop id="myStopColor" offset="100%" style="stop-color: #FF5722; stop-opacity:1"></stop> 
-</linearGradient>
-
-
// stopColor HEX/RGBa
-var tween6 = KUTE.to('#myStopColor',{stopColor: 'rgb(00,66,99)'});
-
- -

Same as above, for stopOpacity we also target the right element defined within the SVG's <linearGradient> element.

-
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
-    <stop offset="0%" style="stop-color: #2196F3; stop-opacity:1"></stop>
-    <!-- our tween object targets the element below -->
-    <stop id="myStopOpacity" offset="100%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
-</linearGradient>
-
-
// stopOpacity Number 0-1
-var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
-
- -
- - - - - - - - - - - - - - - - - - -
- Start -
-

The SVG Plugin can be combined with the Attributes Plugin to enable even more advanced/complex animations for SVG elements.

Future Plans

@@ -545,6 +470,7 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2}); +