deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Changes:

Browse source 
* removed CSS props from SVG plugins
* improved CSS transform performance by creating a more simple tween object
* improved radius properties performance 
* removed Bezier and Physics plugins
* fixes scroll animation performance bottlenecks
* code cleanup and a more readable code
* documentation updates
This commit is contained in:
thednp 2016-11-23 20:42:01 +02:00
parent 178cac445e
commit 112b35aa5f
23 changed files with 99 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/css/kute.css
View file

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

14
assets/js/easing.js
View file

@ -27,19 +27,19 @@ for (var j=0; j<l; j++) {
easingSelectButton[_j].innerHTML = es;
tweenEasingElements[_j][1].innerHTML = es;
if (es === 'gravity') {
tweenEasing2[_j]._e = g.gravity({elasticity:200,bounciness:600});
tweenEasing2[_j].options.easing = g.gravity({elasticity:200,bounciness:600});
} else if (es === 'forceWithGravity') {
tweenEasing2[_j]._e = g.forceWithGravity({elasticity:100,bounciness:600});
tweenEasing2[_j].options.easing = g.forceWithGravity({elasticity:100,bounciness:600});
} else if (es === 'spring') {
tweenEasing2[_j]._e = g.spring({friction:100,frequency:600});
tweenEasing2[_j].options.easing = g.spring({friction:100,frequency:600});
} else if (es === 'bounce') {
tweenEasing2[_j]._e = g.bounce({friction:100,frequency:600});
tweenEasing2[_j].options.easing = g.bounce({friction:100,frequency:600});
} else if (es === 'bezier') {
tweenEasing2[_j]._e = g.BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
tweenEasing2[_j].options.easing = g.BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
} else if (es === 'multiPointBezier') {
tweenEasing2[_j]._e = g.BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
tweenEasing2[_j].options.easing = g.BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
} else {
tweenEasing2[_j]._e = KUTE.pe(es) || g.Easing.linear;
tweenEasing2[_j].options.easing = KUTE.processEasing(es) || KUTE.processEasing('linear');
}
}
easings[j].addEventListener('click', cHandler, false);

2
assets/js/examples.js
View file

@ -264,7 +264,7 @@ easings.addEventListener('click',function(e){
var es = e.target.innerHTML, g = window;
easingSelectButton.innerHTML = es;
tweenEasingElements[1].innerHTML = es;
tweenEasing2._e = KUTE.pe(es) || g.Easing.linear;
tweenEasing2.options.easing = KUTE.processEasing(es) || KUTE.processEasing('linear');
}
}, false);

1
assets/js/home.js
View file

@ -65,7 +65,6 @@ function doBlockAnimations() {
t6 = KUTE.to(bs[i], { backgroundColor: '#fff'}, { easing: 'easingCircularOut', delay: 550+i*50, duration:450, yoyo: true, repeat: 1, complete: fn });
// t6.start();
t1.start();
t1.chain(t2);
t2.chain(t3);

2
assets/js/kute-bezier.min.js vendored Normal file
View file

@ -0,0 +1,2 @@
// KUTE.js | © dnp_theme | Bezier 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("Bezier Easing functions depend on KUTE.js");b(a.KUTE)}}(this,function(a){"use strict";var b="undefined"!=typeof global?global:window;b.Bezier=function(a,b,d,e){return c.pB(a,b,d,e)};var c=b.Bezier.prototype;c.ni=4,c.nms=.001,c.sp=1e-7,c.smi=10,c.ksts=11,c.ksss=1/(c.ksts-1),c.f32as="Float32Array"in b,c.msv=c.f32as?new Float32Array(c.ksts):new Array(c.ksts),c.A=function(a,b){return 1-3*b+3*a},c.B=function(a,b){return 3*b-6*a},c.C=function(a){return 3*a},c.pB=function(a,b,d,e){this._p=!1;var f=this;return function(g){return f._p||c.pc(a,d,b,e),a===b&&d===e?g:0===g?0:1===g?1:c.cB(c.gx(g,a,d),b,e)}},c.cB=function(a,b,d){return((c.A(b,d)*a+c.B(b,d))*a+c.C(b))*a},c.gS=function(a,b,d){return 3*c.A(b,d)*a*a+2*c.B(b,d)*a+c.C(b)},c.bS=function(a,b,d,e,f){var g,h,i=0,j=c.sp,k=c.smi;do h=b+(d-b)/2,g=c.cB(h,e,f)-a,g>0?d=h:b=h;while(Math.abs(g)>j&&++i<k);return h},c.nri=function(a,b,d,e){var f=0,g=c.ni;for(f;f<g;++f){var h=c.gS(b,d,e);if(0===h)return b;var i=c.cB(b,d,e)-a;b-=i/h}return b},c.csv=function(a,b){var d=0,e=c.ksts;for(d;d<e;++d)c.msv[d]=c.cB(d*c.ksss,a,b)},c.gx=function(a,b,d){for(var e=0,f=1,g=c.ksts-1;f!=g&&c.msv[f]<=a;++f)e+=c.ksss;--f;var h=(a-c.msv[f])/(c.msv[f+1]-c.msv[f]),i=e+h*c.ksss,j=c.gS(i,b,d),k=e+c.ksss;return j>=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)}});

6
assets/js/kute-bs.js
View file

@ -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

2
assets/js/kute-physics.min.js vendored Normal file
View file

@ -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<f?(n=f/o-f/o,m=0/o-f/o,k=Math.acos(1/c.A1(a,n)),i=(Math.acos(1/c.A1(a,m))-k)/(b*-f),g=c.A1):(g=c.A2,k=0,i=1),h=g(l,f,e,d),j=b*(a-f)*i+k,1-h*Math.cos(j)}};var c=b.spring.prototype;c.A1=function(a,b,c){var d,e,f,g;return f=b/(1-b),g=0,e=(f-.8*g)/(f-g),d=(.8-e)/f,d*a*c/100+e},c.A2=function(a,b,c,d){return Math.pow(d/10,-a)*(1-a)},b.bounce=function(a){a=a||{};var b=Math.max(1,(a.frequency||300)/20),c=Math.pow(20,(a.friction||200)/100);return function(a){var d=Math.pow(c/10,-a)*(1-a),e=b*a*1+Math.PI/2;return d*Math.cos(e)}},b.gravity=function(a){var b,c,e,f,g,h;return a=a||{},b=(a.bounciness||400)/1250,e=(a.elasticity||200)/1e3,g=a.initialForce||!1,f=100,c=[],h=function(){var a,c;for(a=Math.sqrt(2/f),c={a:-a,b:a,H:1},g&&(c.a=0,c.b=2*c.b);c.H>.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<m&&(e=b[l],a>=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}]}]})}}});

5
assets/js/perf.js
View file

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

56
assets/js/svg.js
View file

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

10
easing.html
View file

@ -177,6 +177,7 @@
<h3>Cubic Bezier Functions</h3>
<p>While modern browsers support CSS3 <code>transition</code> with <code>transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5)</code>, in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the <a href="features.html">features page</a>, we are using a modified version of the <a href="https://github.com/gre/bezier-easing" target="_blank">cubic-bezier</a> by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.</p>
<p>You can use them either with <code>easing: Bezier(mX1, mY1, mX2, mY2)</code> or <code>easing: 'bezier(mX1, mY1, mX2, mY2)'</code>, where mX1, mY1, mX2, mY2 are <em>Float</em> values from 0 to 1. You can find the right values you need <a href="http://cubic-bezier.com/" target="_blank">right here</a>.</p>
<p><span class="text-blue text-strong">NOTE:</span> 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 <a href="https://github.com/thednp/kute.js/tree/experiments">Experiments repository on Github</a>.</p>
<p>There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:</p>
<ul>
<li>Equivalents of the browser's <strong>generic</strong> timing functions: <kbd>easeIn</kbd>, <kbd>easeOut</kbd> and <kbd>easeInOut</kbd></li>
@ -240,6 +241,7 @@
<h3>Physics Based Functions</h3>
<p>KUTE.js also packs the <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> 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.</p>
<p><span class="text-blue text-strong">NOTE:</span> 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 <a href="https://github.com/thednp/kute.js/tree/experiments">Experiments repository on Github</a>.</p>
<p>You can use them either with regular Javascript invocation as shown below and configure / visualize them on the <a href="http://dynamicsjs.com/" target="_blank">author's website</a>, while you can also use the pack of presets featuring mostly <kbd>bezier</kbd> based functions. Ok now, let's get to it:</p>
<ul>
@ -303,12 +305,12 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
</div>
<!-- FOOTER -->
<footer>
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</footer>
</div><!-- /.site-wrapper -->
@ -324,8 +326,8 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-bezier.min.js"></script> <!-- KUTE.js Bezier Easing -->
<script src="./src/kute-physics.min.js"></script> <!-- KUTE.js Physics Easing -->
<script src="./assets/js/kute-bezier.min.js"></script> <!-- KUTE.js Bezier Easing -->
<script src="./assets/js/kute-physics.min.js"></script> <!-- KUTE.js Physics Easing -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/easing.js"></script> <!-- examples stuff -->
</body>

2
examples.html
View file

@ -419,7 +419,7 @@ var myMultiTween2 = KUTE.allFromTo(
<h3>Easing Functions</h3>
<p>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 <code>linear</code> 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.</p>
<p>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 <code>linear</code> easing function and the second will use another function you choose.</p>
<div class="featurettes">
<div class="example-item easing-example example-box bg-green">Linear</div>
<div class="example-item easing-example example-box bg-pink"></div>

49
extend.html
View file

@ -117,18 +117,18 @@
<p>As suggested in the above template, your function body could be written with one or more of the examples below.</p>
<h3>Extend Tween Control</h3>
<p>In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check <code>KUTE.Tween</code> function to get the internal references notation:</p>
<pre><code class="language-javascript">//add a reference to KUTE object
var K = window.KUTE;
<p>In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check <code>Tween</code> function to get the internal references notation:</p>
<pre><code class="language-javascript">//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
</code></pre>
<p>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.</p>
@ -167,17 +166,17 @@ K.Tween.prototype.onUpdate = function(){
<p>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.</p>
<p>We need basically 3 functions:</p>
<ul>
<li><code>KUTE.prS['propertyName']</code> a <strong>prepareStart</strong> function to get the current value of the property required for the <code>.to()</code> method;</li>
<li><code>KUTE.pp['propertyName']</code> a <strong>processProperty</strong> function to process the user value / current value to have it ready to tween;</li>
<li><code>KUTE.prepareStart['propertyName']</code> a function to get the current value of the property required for the <code>.to()</code> method;</li>
<li><code>KUTE.parseProperty['propertyName']</code> a function to process the user value / current value to have it ready to tween;</li>
<li><code>window.dom['propertyName']</code> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
<li><strong>optional</strong> a function that will work as an utility for your value processing.</li>
</ul>
<p>So let's add support for <kbd class="bg-olive">boxShadow</kbd>! 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:</p>
<pre><code class="language-javascript">// 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}
<pre><code class="language-javascript">// 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){
};
</code></pre>
<p>Next we'll need to write a <code>processProperty</code> function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the <code>K.dom['boxShadow']</code> function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.</p>
<p>Next we'll need to write a <code>processProperty</code> function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the <code>window.dom['boxShadow']</code> function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.</p>
<pre><code class="language-javascript">// 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']}
<li><kbd class="bg-lime">KUTE.selector(selector,multi)</kbd> is the selector utility that uses <code>getElementById</code> or <code>querySelector</code> when <code>multi</code> argument is <strong>null</strong> or <strong>false</strong>, BUT when <strong>true</strong>, <code>querySelectorAll</code> is used and returns a HTMLCollection object.</li>
<li><kbd class="bg-lime">KUTE.property(propertyName)</kbd> is the <strong>autoPrefix</strong> 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 <strong>undefinedPropertyName</strong> and that would be an easy way to detect support for that property on most legacy browsers: <pre><code class="language-javascript">if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }</code></pre></li>
<li><kbd class="bg-lime">KUTE.getPrefix()</kbd> returns a vendor preffix even if the browser supports a specific preffixed property or not.</li>
<li><kbd class="bg-lime">KUTE.gCS(element,property)</kbd> a hybrid <code>getComputedStyle</code> function to get the current value of the property required for the <code>.to()</code> method; it actually checks in <code>element.style</code>, <code>element.currentStyle</code> and <code>window.getComputedStyle(element,null)</code> to make sure it won't miss the property value;</li>
<li><kbd class="bg-lime">KUTE.getCurrentStyle(element,property)</kbd> a hybrid <code>getComputedStyle</code> function to get the current value of the property required for the <code>.to()</code> method; it actually checks in <code>element.style</code>, <code>element.currentStyle</code> and <code>window.getComputedStyle(element,null)</code> to make sure it won't miss the property value;</li>
<li><kbd class="bg-lime">KUTE.truD(value)</kbd> a function that accepts String and Number and returns a <code>{v: 150, u: 'px'}</code> 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 <i>true</i> it will return an object with value and unit specific for rotation angles and skews.</li>
<li><kbd class="bg-lime">KUTE.truC(color)</kbd> a function that returns an <code>{r: 150, g: 150, b: 0}</code> color object ready to tween; if the color value is a <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe color</a>, the IE9+ browsers will be able to return the rgb object we need.</li>
<li><kbd class="bg-lime">KUTE.htr(hex)</kbd> a function that accepts HEX formatted colors and returns an <code>{r: 150, g: 150, b: 0}</code> color object;</li>
<li><kbd class="bg-lime">KUTE.rth(r,g,b)</kbd> a function that accepts numeric values for red, blue and green and returns a HEX format <code>#006699</code> color string.</li>
<li><kbd class="bg-lime">Interpolate.number</kbd> is most essential interpolation tool when developing plugins for various properties not supported in the core.</li>
<li><kbd class="bg-lime">Interpolate.unit</kbd> is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like <code>width: 250px</code></li>
<li><kbd class="bg-lime">Interpolate.color</kbd> is a very fast interpolation function for colors, as used in the above example.</li>
<li><kbd class="bg-lime">Interpolate.array</kbd> and <kbd class="bg-lime">Interpolate.coords</kbd> are SVG Plugin only, but you can have a look anytime when you're out of ideas.</li>
<li><kbd class="bg-lime">window._number</kbd> is most essential interpolation tool when developing plugins for various properties not supported in the core.</li>
<li><kbd class="bg-lime">window._unit</kbd> is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like <code>width: 250px</code></li>
<li><kbd class="bg-lime">window._color</kbd> is a very fast interpolation function for colors, as used in the above example.</li>
<li><kbd class="bg-lime">window._coords</kbd> is SVG Plugin only, but you can have a look anytime when you're out of ideas.</li>
</ul>
<ul id="share" class="nav">

8
index.html
View file

@ -125,7 +125,7 @@
</div>
<div class="col2">
<h3>Prefix Free</h3>
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> for <code>transform</code> and <code>border-radius</code>, and even use the utilities yourself, so hustle free for older Gecko/Webkit/IE browsers.</p>
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> for <code>transform</code> and <code>border-radius</code>, and allows you to work with the utilities yourself, hustle free with legacy browsers.</p>
</div>
</div>
<div class="columns hiddenoverflow">
@ -145,7 +145,7 @@
</div>
<div class="col2">
<h3>Plenty Of Properties</h3>
<p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph and other specific CSS properties, then <code>transform</code>, <code>scroll</code>, <code>border-radius</code>, and almost the full box model and also text properties.</p>
<p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph &amp; transform and other specific CSS properties, then CSS3 <code>transform</code>, <code>scroll</code>, <code>border-radius</code>, and almost the full box model or text properties.</p>
</div>
</div>
<div class="columns hiddenoverflow">
@ -192,12 +192,12 @@
</div>
<!-- FOOTER -->
<footer>
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</footer>
</div><!-- /.site-wrapper -->

6
performance.html
View file

@ -33,6 +33,7 @@
.padding {padding: 20px}
.btn-group { margin-bottom: 15px; }
.btn {font-size: 13px; }
.text-note {color: #069}
.text-danger {font-weight: bold}
</style>
<!-- Polyfill -->
@ -89,8 +90,8 @@
<li><a id="800" href="#">800</a></li>
<li><a id="900" href="#">900</a></li>
<li><a id="1000" href="#">1000</a></li>
<!--<li><a id="1500" href="#">1500</a></li>
<li><a id="2000" href="#">2000</a></li>-->
<li><a id="1500" href="#">1500</a></li>
<li><a id="2000" href="#">2000</a></li>
</ul>
</span>
@ -104,6 +105,7 @@
<!--[if IE]><p class="text-danger">The test page is not intended for legacy browsers.</p><![endif]-->
<!--[if !IE ]><!-->
<p>These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
<p class="text-note">Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.</p>
<p class="text-danger">Do not try this test on lower end or mobile devices.</p>
<!--<![endif]-->

6
properties.html
View file

@ -123,7 +123,8 @@
<p>The <a href="svg.html">SVG Plugin</a> can animate the <code>d</code> attribute of a given <code>&lt;path&gt;</code> or <code>&lt;glyph&gt;</code> element with the tween property called <kbd class="bg-olive">path</kbd>. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">the D3.js examples</a> for wider usability.</p>
<p>Further more, the SVG Plugin can animate the stroke in a way that you probably know as <code>drawSVG</code>. KUTE.js implements it as <kbd class="bg-olive">draw</kbd> tween property that deals with the well known CSS properties: <kbd>strokeDasharray</kbd> and <kbd>strokeDashoffset</kbd>.
<p>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.</p>
<!--<p>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.</p>
<ul>
<li><kbd class="bg-olive">strokeWidth</kbd> allows you to animate the <code>stroke-width</code> for a given SVG element.</li>
<li><kbd class="bg-olive">strokeOpacity</kbd> allows you to animate the <code>stroke-opacity</code> for a given SVG element.</li>
@ -132,7 +133,7 @@
<li><kbd class="bg-olive">fill</kbd> allows you to animate the <code>fill</code> color property for a given SVG element.</li>
<li><kbd class="bg-olive">stroke</kbd> allows you to animate the <code>stroke</code> color for a given SVG element.</li>
<li><kbd class="bg-olive">stopColor</kbd> allows you to animate the <code>stop-color</code> for a given gradient SVG element.</li>
</ul>
</ul>-->
<h3>Box Model Properties</h3>
<p>The core engine supports <code>width</code>, <code>height</code>, <code>left</code> and <code>top</code> while the <a href="css.html">CSS Plugin</a> adds support for all other box-model properties.</p>
@ -171,6 +172,7 @@
<h3>Presentation Attributes</h3>
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>, but the values can be also suffixed: <code>150px</code> or <code>50%</code>, 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.</p>
<p>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 <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, 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.</p>
<h3>Typography Properties</h3>
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code> on browsers that don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>

4
src/kute-attr.min.js vendored
View file

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

4
src/kute-css.min.js vendored
View file

@ -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;W<x;W++)s.indexOf(T[W])!==-1?C[T[W]]="rgba(0,0,0,0)":R.indexOf(T[W])!==-1?C[T[W]]=0:y.indexOf(T[W])!==-1?C[T[W]]=[50,50]:"clip"===T[W]&&(C[T[W]]=[0,0,0,0]);for(var W=0,S=s.length;W<S;W++)i[s[W]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,i,n){t.style[r]=L(e,o,i,n.keepHex)}),f(r)},n[s[W]]=function(t,r,e){return d(t,r)||C[r]};for(var W=0,S=R.length;W<S;W++)i[R[W]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,i){t.style[r]=B(e.v,o.v,o.u,i)}),u(r)},n[R[W]]=function(t,r,e){return d(t,r)||C[r]};for(var W=0,S=b.length;W<S;W++)i[b[W]]=function(t,r){return t in o||("borderRadius"===t?o[t]=function(t,r,e,o,i){t.style[a]=B(e.v,o.v,o.u,i)}:"borderTopLeftRadius"===t?o[t]=function(t,r,e,o,i){t.style[p]=B(e.v,o.v,o.u,i)}:"borderTopRightRadius"===t?o[t]=function(t,r,e,o,i){t.style[g]=B(e.v,o.v,o.u,i)}:"borderBottomLeftRadius"===t?o[t]=function(t,r,e,o,i){t.style[l]=B(e.v,o.v,o.u,i)}:"borderBottomRightRadius"===t&&(o[t]=function(t,r,e,o,i){t.style[c]=B(e.v,o.v,o.u,i)})),u(r)},n[b[W]]=function(t,r,e){return d(t,r)||C[r]};return i.clip=function(t,r){if(t in o||(o[t]=function(t,r,e,o,i){var n=0,d=[];for(n;n<4;n++){var u=e[n].v,f=o[n].v,a=o[n].u||"px";d[n]=B(u,f,a,i)}t.style[r]="rect("+d+")"}),r instanceof Array)return[u(r[0]),u(r[1]),u(r[2]),u(r[3])];var e=r.replace(/rect|\(|\)/g,"");return e=/\,/g.test(e)?e.split(/\,/g):e.split(/\s/g),[u(e[0]),u(e[1]),u(e[2]),u(e[3])]},n.clip=function(t,r,e){var o=d(t,r),i=d(t,"width"),n=d(t,"height");return/rect/.test(o)?o:[0,i,n,0]},i.backgroundPosition=function(t,r){if(t in o||(o[t]=function(t,r,e,o,i){t.style[r]=B(e.x.v,o.x.v,"%",i)+" "+B(e.y.v,o.y.v,"%",i)}),r instanceof Array)return{x:u(r[0])||{v:50,u:"%"},y:u(r[1])||{v:50,u:"%"}};var e,i,n=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g),n=2===n.length?n:[n[0],50],e=u(n[0]),i=u(n[1]),{x:e,y:i}},n.backgroundPosition=function(t,r,e){return d(t,r)||C[r]},this});
// KUTE.js v1.5.97 | © 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,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=s.concat(h),y=p.concat(s,h),x=l.concat(b,p,s,h,m),R=x.length,C=C||{},T=0;T<R;T++)l.indexOf(x[T])!==-1?C[x[T]]="rgba(0,0,0,0)":y.indexOf(x[T])!==-1?C[x[T]]=0:m.indexOf(x[T])!==-1?C[x[T]]=[50,50]:"clip"===x[T]&&(C[x[T]]=[0,0,0,0]);for(var T=0,W=l.length;T<W;T++)n[l[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n,i){t.style[r]=g(e,o,n,i.keepHex)}),a(r)},i[l[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=v.length;T<W;T++)n[v[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[v[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=p.length;T<W;T++){var S=u(p[T]);n[S]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[S]=function(t,r,e){return d(t,r)||C[r]}}return n.clip=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){var i=0,u=[];for(i;i<4;i++){var d=e[i].v,f=o[i].v,a=o[i].u||"px";u[i]=c(d,f,a,n)}t.style[r]="rect("+u+")"}),r instanceof Array)return[f(r[0]),f(r[1]),f(r[2]),f(r[3])];var e=r.replace(/rect|\(|\)/g,"");return e=/\,/g.test(e)?e.split(/\,/g):e.split(/\s/g),[f(e[0]),f(e[1]),f(e[2]),f(e[3])]},i.clip=function(t,r,e){var o=d(t,r),n=d(t,"width"),i=d(t,"height");return/rect/.test(o)?o:[0,n,i,0]},n.backgroundPosition=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.x.v,o.x.v,"%",n)+" "+c(e.y.v,o.y.v,"%",n)}),r instanceof Array)return{x:f(r[0])||{v:50,u:"%"},y:f(r[1])||{v:50,u:"%"}};var e,n,i=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return i=/\,/g.test(i)?i.split(/\,/g):i.split(/\s/g),i=2===i.length?i:[i[0],50],e=f(i[0]),n=f(i[1]),{x:e,y:n}},i.backgroundPosition=function(t,r,e){return d(t,r)||C[r]},this});

2
src/kute-jquery.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.95 | © dnp_theme | jQuery Plugin | MIT-License
// KUTE.js v1.5.97 | © dnp_theme | jQuery Plugin | MIT-License
!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;r.fn.KUTE=t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?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});

4
src/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
src/kute-text.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.95 | © 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.prS,u=n.pp,s=e.Interpolate.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},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});
// 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});

4
src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

8
start.html
View file

@ -99,8 +99,6 @@ require("kute.js/kute-svg"); // Add SVG Plugin
require("kute.js/kute-css"); // Add CSS Plugin
require("kute.js/kute-attr"); // Add Attributes Plugin
require("kute.js/kute-text"); // Add Text Plugin
require("kute.js/kute-bezier"); // Add Bezier Easing
require("kute.js/kute-physics"); // Add Physics Easing
</code></pre>
<pre><code class="language-javascript">// 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([
<p>The CDN repositories receive latest updates <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a> and <a href="https://cdnjs.com/libraries/kute.js" target="_blank">right here</a>. You might also want to include the tools that you need for your project:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-easing.min.js">&lt;/script> &lt;!-- Bezier Easing Functions -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-physics.min.js">&lt;/script> &lt;!-- Physics Easing Functions -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-text.min.js">&lt;/script> &lt;!-- Text Plugin -->
@ -135,8 +129,6 @@ define([
</code></pre>
<p>Alternate CDN links:</p>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-easing.min.js">&lt;/script> &lt;!-- Bezier Easing Functions -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-physics.min.js">&lt;/script> &lt;!-- Physics Easing Functions -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-text.min.js">&lt;/script> &lt;!-- Text Plugin -->

88
svg.html
View file

@ -163,7 +163,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
<path id="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
<path id="triangle" class="bg-indigo" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
<path id="triangle" fill="#673AB7" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
<path id="star2" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011z"/>
@ -214,10 +214,10 @@ var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550" >
<path id="w11" class="bg-red" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
<path id="w12" class="bg-orange" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
<path id="w13" class="bg-green" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
<path id="w14" class="bg-blue" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
<path id="w11" fill="#e91b1f" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
<path id="w12" fill="#FF5722" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
<path id="w13" fill="#4CAF50" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
<path id="w14" fill="#2196F3" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
<path id="w21" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
<path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
@ -255,7 +255,7 @@ var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, {
<path id="mouth" style="visibility: hidden;" d="M250.172 416c-59.621 0-111.929-32.14-141.446-80.476 35.205 27.53 97.267 32.905 162.644 19.989 70.124-13.853 124.555-45.771 144.227-88.297-10.827 83.98-80.759 148.784-165.425 148.784z"></path>
</mask>
</defs>
<path id="rectangle-container" class="bg-blue" mask="url(#symbol)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z" style="fill: rgb(33, 150, 243);"></path>
<path id="rectangle-container" fill="#2196F3" mask="url(#symbol)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path id="circle-container" style="visibility: hidden;" d="M256 0c-141.385 0-256 114.614-256 256s114.614 256 256 256c141.385 0 256-114.615 256-256 0-141.386-114.615-256-256-256z"></path>
</svg>
@ -435,82 +435,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: [150, svgOriginX, s
<li>Rotations will always use the <i>valuesEnd</i> value of the transform origin and cannot be animated, so that translations don't get messed up.</li>
</ul>
<h3>CSS Properties Specific to SVGs</h3>
<p>As you probably noticed in the above examples we've animated the background color for some of the shapes, that is <code>fill</code>, one of the properties supported by the SVG Plugin, so let's create some tweens real quick:</p>
<pre><code class="language-javascript">// 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'});
</code></pre>
<p>A quick demo with the above:</p>
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<path class="bg-orange" id="fillSVG" style="stroke-width: 110px; stroke: #FF5722; transform: scale(0.85) translate(60px,60px); -webkit-transform: scale(0.85) translate(60px,60px);" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
</svg>
<div class="example-buttons">
<a id="cssBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Please note that <code>strokeWidth</code> is a very interesting property that acts very different: when number is provided the rendered stroke will scale depending on <code>viewBox</code> and/or <code>width</code> and <code>height</code>, but if String is provided you can actually force the browser to <a href="http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg" target="_blank">scale the stroke</a> as you like.</p>
<p>Now let's have a look at gradients, here we can animate the <code>stopColor</code> defined within the SVG's <code>&lt;linearGradient&gt;</code> element.</p>
<pre><code class="language-markup">&lt;linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
&lt;stop offset="0%" style="stop-color: #ffd626; stop-opacity:1">&lt;/stop>
&lt;!-- our tween object targets the element below -->
&lt;stop id="myStopColor" offset="100%" style="stop-color: #FF5722; stop-opacity:1">&lt;/stop>
&lt;/linearGradient>
</code></pre>
<pre><code class="language-javascript">// stopColor HEX/RGBa
var tween6 = KUTE.to('#myStopColor',{stopColor: 'rgb(00,66,99)'});
</code></pre>
<p>Same as above, for <code>stopOpacity</code> we also target the right element defined within the SVG's <code>&lt;linearGradient&gt;</code> element.</p>
<pre><code class="language-markup">&lt;linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
&lt;stop offset="0%" style="stop-color: #2196F3; stop-opacity:1">&lt;/stop>
&lt;!-- our tween object targets the element below -->
&lt;stop id="myStopOpacity" offset="100%" style="stop-color: #e91b1f; stop-opacity:1">&lt;/stop>
&lt;/linearGradient>
</code></pre>
<pre><code class="language-javascript">// stopOpacity Number 0-1
var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
</code></pre>
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #ffd626; stop-opacity:1"></stop>
<stop id="stopCSVG" offset="100%" style="stop-color: #FF5722; stop-opacity:1"></stop>
</linearGradient>
</defs>
<path fill="url(#gradient1)" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
</svg>
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<defs>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #2196F3; stop-opacity:1"></stop>
<stop id="stopOSVG" offset="100%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
</linearGradient>
</defs>
<path fill="url(#gradient2)" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
</svg>
<div class="example-buttons">
<a id="gradBtn" class="btn btn-yellow" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The SVG Plugin can be combined with the <a href="attr.html">Attributes Plugin</a> to enable even more advanced/complex animations for SVG elements.</p>
<h3>Future Plans</h3>
@ -545,6 +470,7 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./src/kute-attr.min.js"></script> <!-- some stuff -->
<script src="./src/kute-svg.min.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/svg.js"></script> <!-- css plugin stuff -->