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 de86e786c4
commit 124a0521d1
43 changed files with 441 additions and 1045 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
bower.json
View file

@ -1,11 +1,11 @@
{
"name": "KUTE.js",
"version": "1.5.96",
"version": "1.5.97",
"homepage": "http://thednp.github.io/kute.js",
"authors": [
"thednp"
],
"description": "A minimal Native Javascript animation engine.",
"description": "Complete Native Javascript animation engine.",
"main": "kute.js",
"moduleType": [
"amd",
@ -13,13 +13,15 @@
"node"
],
"keywords": [
"animations",
"kute.js",
"svg morph",
"svg transform",
"tweening engine",
"animation engine",
"javascript animation engine",
"native javascript",
"kute.js",
"tweening",
"engine"
"javascript animation",
"animations",
"native javascript"
],
"license": "MIT",
"ignore": [

6
build.js
View file

@ -18,8 +18,6 @@ function replaceK(s) {
if (/attr/.test(s)) { return 'Attributes Plugin'}
if (/svg/.test(s)) { return 'SVG Plugin'}
if (/css/.test(s)) { return 'CSS Plugin'}
if (/bez/.test(s)) { return 'Bezier Plugin'}
if (/phy/.test(s)) { return 'Physics Plugin'}
if (/jq/.test(s)) { return 'jQuery Plugin'}
if (/text/.test(s)) { return 'Text Plugin'}
} else {
@ -41,20 +39,16 @@ function handleError(err) {
// Minify files
minify('kute-attr.js', 'dist/kute-attr.min.js');
minify('kute-bezier.js', 'dist/kute-bezier.min.js');
minify('kute-css.js', 'dist/kute-css.min.js');
minify('kute-jquery.js', 'dist/kute-jquery.min.js');
minify('kute-physics.js', 'dist/kute-physics.min.js');
minify('kute-svg.js', 'dist/kute-svg.min.js');
minify('kute-text.js', 'dist/kute-text.min.js');
minify('kute.js', 'dist/kute.min.js');
// Now also to the demo
minify('kute-attr.js', 'demo/src/kute-attr.min.js');
minify('kute-bezier.js', 'demo/src/kute-bezier.min.js');
minify('kute-css.js', 'demo/src/kute-css.min.js');
minify('kute-jquery.js', 'demo/src/kute-jquery.min.js');
minify('kute-physics.js', 'demo/src/kute-physics.min.js');
minify('kute-svg.js', 'demo/src/kute-svg.min.js');
minify('kute-text.js', 'demo/src/kute-text.min.js');
minify('kute.js', 'demo/src/kute.min.js');

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

2
demo/src/kute-bezier.min.js vendored
View file

@ -1,2 +0,0 @@
// KUTE.js v1.5.95 | © dnp_theme | Bezier Plugin | MIT-License
!function(n,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 n.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js");n.Ease=e(n.KUTE)}}(this,function(n){"use strict";var e="undefined"!=typeof global?global:window,t={};t.Bezier=e.Bezier=function(n,e,t,u){return r.pB(n,e,t,u)};var r=t.Bezier.prototype=e.Bezier.prototype;return r.ni=4,r.nms=.001,r.sp=1e-7,r.smi=10,r.ksts=11,r.ksss=1/(r.ksts-1),r.f32as="Float32Array"in e,r.msv=r.f32as?new Float32Array(r.ksts):new Array(r.ksts),r.A=function(n,e){return 1-3*e+3*n},r.B=function(n,e){return 3*e-6*n},r.C=function(n){return 3*n},r.pB=function(n,e,t,u){this._p=!1;var s=this;return function(a){return s._p||r.pc(n,t,e,u),n===e&&t===u?a:0===a?0:1===a?1:r.cB(r.gx(a,n,t),e,u)}},r.cB=function(n,e,t){return((r.A(e,t)*n+r.B(e,t))*n+r.C(e))*n},r.gS=function(n,e,t){return 3*r.A(e,t)*n*n+2*r.B(e,t)*n+r.C(e)},r.bS=function(n,e,t,u,s){var a,i,o=0,c=r.sp,f=r.smi;do i=e+(t-e)/2,a=r.cB(i,u,s)-n,a>0?t=i:e=i;while(Math.abs(a)>c&&++o<f);return i},r.nri=function(n,e,t,u){var s=0,a=r.ni;for(s;s<a;++s){var i=r.gS(e,t,u);if(0===i)return e;var o=r.cB(e,t,u)-n;e-=o/i}return e},r.csv=function(n,e){var t=0,u=r.ksts;for(t;t<u;++t)r.msv[t]=r.cB(t*r.ksss,n,e)},r.gx=function(n,e,t){for(var u=0,s=1,a=r.ksts-1;s!=a&&r.msv[s]<=n;++s)u+=r.ksss;--s;var i=(n-r.msv[s])/(r.msv[s+1]-r.msv[s]),o=u+i*r.ksss,c=r.gS(o,e,t),f=u+r.ksss;return c>=r.nms?r.nri(n,o,e,t):0===c?o:r.bS(n,u,f,e,t)},r.pc=function(n,e,t,u){this._p=!0,n==t&&e==u||r.csv(n,e)},e.Ease={},e.Ease.easeIn=function(){return r.pB(.42,0,1,1)},e.Ease.easeOut=function(){return r.pB(0,0,.58,1)},e.Ease.easeInOut=function(){return r.pB(.5,.16,.49,.86)},e.Ease.easeInSine=function(){return r.pB(.47,0,.745,.715)},e.Ease.easeOutSine=function(){return r.pB(.39,.575,.565,1)},e.Ease.easeInOutSine=function(){return r.pB(.445,.05,.55,.95)},e.Ease.easeInQuad=function(){return r.pB(.55,.085,.68,.53)},e.Ease.easeOutQuad=function(){return r.pB(.25,.46,.45,.94)},e.Ease.easeInOutQuad=function(){return r.pB(.455,.03,.515,.955)},e.Ease.easeInCubic=function(){return r.pB(.55,.055,.675,.19)},e.Ease.easeOutCubic=function(){return r.pB(.215,.61,.355,1)},e.Ease.easeInOutCubic=function(){return r.pB(.645,.045,.355,1)},e.Ease.easeInQuart=function(){return r.pB(.895,.03,.685,.22)},e.Ease.easeOutQuart=function(){return r.pB(.165,.84,.44,1)},e.Ease.easeInOutQuart=function(){return r.pB(.77,0,.175,1)},e.Ease.easeInQuint=function(){return r.pB(.755,.05,.855,.06)},e.Ease.easeOutQuint=function(){return r.pB(.23,1,.32,1)},e.Ease.easeInOutQuint=function(){return r.pB(.86,0,.07,1)},e.Ease.easeInExpo=function(){return r.pB(.95,.05,.795,.035)},e.Ease.easeOutExpo=function(){return r.pB(.19,1,.22,1)},e.Ease.easeInOutExpo=function(){return r.pB(1,0,0,1)},e.Ease.easeInCirc=function(){return r.pB(.6,.04,.98,.335)},e.Ease.easeOutCirc=function(){return r.pB(.075,.82,.165,1)},e.Ease.easeInOutCirc=function(){return r.pB(.785,.135,.15,.86)},e.Ease.easeInBack=function(){return r.pB(.6,-.28,.735,.045)},e.Ease.easeOutBack=function(){return r.pB(.175,.885,.32,1.275)},e.Ease.easeInOutBack=function(){return r.pB(.68,-.55,.265,1.55)},e.Ease.slowMo=function(){return r.pB(0,.5,1,.5)},e.Ease.slowMo1=function(){return r.pB(0,.7,1,.3)},e.Ease.slowMo2=function(){return r.pB(0,.9,1,.1)},t});

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

2
demo/src/kute-physics.min.js vendored
View file

@ -1,2 +0,0 @@
// KUTE.js v1.5.95 | © dnp_theme | Physics Plugin | MIT-License
!function(t,n){if("function"==typeof define&&define.amd)define(["kute.js"],n);else if("object"==typeof module&&"function"==typeof require)module.exports=n(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js");t.Physics=n(t.KUTE)}}(this,function(t){"use strict";var n="undefined"!=typeof global?global:window,r={};r.spring=n.spring=function(t){t=t||{};var n=Math.max(1,(t.frequency||300)/20),r=Math.pow(20,(t.friction||200)/100),e=t.anticipationStrength||0,o=(t.anticipationSize||0)/1e3;return function(t){var u,a,c,p,f,y,s,h;return y=t/(1-o)-o/(1-o),t<o?(h=o/(1-o)-o/(1-o),s=0/(1-o)-o/(1-o),f=Math.acos(1/i.A1(t,h)),c=(Math.acos(1/i.A1(t,s))-f)/(n*-o),u=i.A1):(u=i.A2,f=0,c=1),a=u(y,o,e,r),p=n*(t-o)*c+f,1-a*Math.cos(p)}};var i=r.spring.prototype=n.spring.prototype;i.A1=function(t,n,r){var i,e,o,u;return o=n/(1-n),u=0,e=(o-.8*u)/(o-u),i=(.8-e)/o,i*t*r/100+e},i.A2=function(t,n,r,i){return Math.pow(i/10,-t)*(1-t)},r.bounce=n.bounce=function(t){t=t||{};var n=Math.max(1,(t.frequency||300)/20),r=Math.pow(20,(t.friction||200)/100);return function(t){var i=Math.pow(r/10,-t)*(1-t),e=n*t*1+Math.PI/2;return i*Math.cos(e)}},r.gravity=n.gravity=function(t){var n,r,i,o,u,a;return t=t||{},n=(t.bounciness||400)/1250,i=(t.elasticity||200)/1e3,u=t.initialForce||!1,o=100,r=[],a=function(){var t,r;for(t=Math.sqrt(2/o),r={a:-t,b:t,H:1},u&&(r.a=0,r.b=2*r.b);r.H>.001;)a=r.b-r.a,r={a:r.b,b:r.b+a*n,H:r.H*n*n};return r.b}(),function(){var t,e,c,p;for(e=Math.sqrt(2/(o*a*a)),c={a:-e,b:e,H:1},u&&(c.a=0,c.b=2*c.b),r.push(c),t=a,p=[];c.b<1&&c.H>.001;)t=c.b-c.a,c={a:c.b,b:c.b+t*n,H:c.H*i},p.push(r.push(c));return p}(),function(n){var i,o,c;for(o=0,i=r[o];!(n>=i.a&&n<=i.b)&&(o+=1,i=r[o]););return c=i?e.getPointInCurve(i.a,i.b,i.H,n,t,a):u?0:1}};var e=r.gravity.prototype=n.gravity.prototype;e.getPointInCurve=function(t,n,r,i,e,o){var u,a;return o=n-t,a=2/o*i-1-2*t/o,u=a*a*r-r+1,e.initialForce&&(u=1-u),u},r.forceWithGravity=n.forceWithGravity=function(t){var n=t||{};return n.initialForce=!0,r.gravity(n)},r.bezier=n.BezierMultiPoint=function(t){t=t||{};var n=t.points,r=!1,i=[];return function(){var t,r;for(t in n){if(r=parseInt(t),r>=n.length-1)break;o.fn(n[r],n[r+1],i)}return i}(),function(t){return 0===t?0:1===t?1:o.yForX(t,i,r)}};var o=r.bezier.prototype=n.BezierMultiPoint.prototype;return o.fn=function(t,n,r){var i=function(r){return o.Bezier(r,t,t.cp[t.cp.length-1],n.cp[0],n)};return r.push(i)},o.Bezier=function(t,n,r,i,e){return{x:Math.pow(1-t,3)*n.x+3*Math.pow(1-t,2)*t*r.x+3*(1-t)*Math.pow(t,2)*i.x+Math.pow(t,3)*e.x,y:Math.pow(1-t,3)*n.y+3*Math.pow(1-t,2)*t*r.y+3*(1-t)*Math.pow(t,2)*i.y+Math.pow(t,3)*e.y}},o.yForX=function(t,n,r){var i,e,o,u,a,c,p,f,y=0,s=n.length;for(i=null,y;y<s&&(e=n[y],t>=e(0).x&&t<=e(1).x&&(i=e),null===i);y++);if(!i)return r?0:1;for(f=1e-4,u=0,c=1,a=(c+u)/2,p=i(a).x,o=0;Math.abs(t-p)>f&&o<100;)t>p?u=a:c=a,a=(c+u)/2,p=i(a).x,o++;return i(a).y},n.Physics={physicsInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsBackOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+r/1e3,y:1.3}]}]})},physicsBackIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.28-r/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsBackInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.68-r/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+r/1e3,y:1.45}]}]})}},r});

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

File diff suppressed because one or more lines are too long

4
demo/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
demo/src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

8
demo/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
demo/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 -->

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

2
dist/kute-bezier.min.js vendored
View file

@ -1,2 +0,0 @@
// KUTE.js v1.5.95 | © dnp_theme | Bezier Plugin | MIT-License
!function(n,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 n.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js");n.Ease=e(n.KUTE)}}(this,function(n){"use strict";var e="undefined"!=typeof global?global:window,t={};t.Bezier=e.Bezier=function(n,e,t,u){return r.pB(n,e,t,u)};var r=t.Bezier.prototype=e.Bezier.prototype;return r.ni=4,r.nms=.001,r.sp=1e-7,r.smi=10,r.ksts=11,r.ksss=1/(r.ksts-1),r.f32as="Float32Array"in e,r.msv=r.f32as?new Float32Array(r.ksts):new Array(r.ksts),r.A=function(n,e){return 1-3*e+3*n},r.B=function(n,e){return 3*e-6*n},r.C=function(n){return 3*n},r.pB=function(n,e,t,u){this._p=!1;var s=this;return function(a){return s._p||r.pc(n,t,e,u),n===e&&t===u?a:0===a?0:1===a?1:r.cB(r.gx(a,n,t),e,u)}},r.cB=function(n,e,t){return((r.A(e,t)*n+r.B(e,t))*n+r.C(e))*n},r.gS=function(n,e,t){return 3*r.A(e,t)*n*n+2*r.B(e,t)*n+r.C(e)},r.bS=function(n,e,t,u,s){var a,i,o=0,c=r.sp,f=r.smi;do i=e+(t-e)/2,a=r.cB(i,u,s)-n,a>0?t=i:e=i;while(Math.abs(a)>c&&++o<f);return i},r.nri=function(n,e,t,u){var s=0,a=r.ni;for(s;s<a;++s){var i=r.gS(e,t,u);if(0===i)return e;var o=r.cB(e,t,u)-n;e-=o/i}return e},r.csv=function(n,e){var t=0,u=r.ksts;for(t;t<u;++t)r.msv[t]=r.cB(t*r.ksss,n,e)},r.gx=function(n,e,t){for(var u=0,s=1,a=r.ksts-1;s!=a&&r.msv[s]<=n;++s)u+=r.ksss;--s;var i=(n-r.msv[s])/(r.msv[s+1]-r.msv[s]),o=u+i*r.ksss,c=r.gS(o,e,t),f=u+r.ksss;return c>=r.nms?r.nri(n,o,e,t):0===c?o:r.bS(n,u,f,e,t)},r.pc=function(n,e,t,u){this._p=!0,n==t&&e==u||r.csv(n,e)},e.Ease={},e.Ease.easeIn=function(){return r.pB(.42,0,1,1)},e.Ease.easeOut=function(){return r.pB(0,0,.58,1)},e.Ease.easeInOut=function(){return r.pB(.5,.16,.49,.86)},e.Ease.easeInSine=function(){return r.pB(.47,0,.745,.715)},e.Ease.easeOutSine=function(){return r.pB(.39,.575,.565,1)},e.Ease.easeInOutSine=function(){return r.pB(.445,.05,.55,.95)},e.Ease.easeInQuad=function(){return r.pB(.55,.085,.68,.53)},e.Ease.easeOutQuad=function(){return r.pB(.25,.46,.45,.94)},e.Ease.easeInOutQuad=function(){return r.pB(.455,.03,.515,.955)},e.Ease.easeInCubic=function(){return r.pB(.55,.055,.675,.19)},e.Ease.easeOutCubic=function(){return r.pB(.215,.61,.355,1)},e.Ease.easeInOutCubic=function(){return r.pB(.645,.045,.355,1)},e.Ease.easeInQuart=function(){return r.pB(.895,.03,.685,.22)},e.Ease.easeOutQuart=function(){return r.pB(.165,.84,.44,1)},e.Ease.easeInOutQuart=function(){return r.pB(.77,0,.175,1)},e.Ease.easeInQuint=function(){return r.pB(.755,.05,.855,.06)},e.Ease.easeOutQuint=function(){return r.pB(.23,1,.32,1)},e.Ease.easeInOutQuint=function(){return r.pB(.86,0,.07,1)},e.Ease.easeInExpo=function(){return r.pB(.95,.05,.795,.035)},e.Ease.easeOutExpo=function(){return r.pB(.19,1,.22,1)},e.Ease.easeInOutExpo=function(){return r.pB(1,0,0,1)},e.Ease.easeInCirc=function(){return r.pB(.6,.04,.98,.335)},e.Ease.easeOutCirc=function(){return r.pB(.075,.82,.165,1)},e.Ease.easeInOutCirc=function(){return r.pB(.785,.135,.15,.86)},e.Ease.easeInBack=function(){return r.pB(.6,-.28,.735,.045)},e.Ease.easeOutBack=function(){return r.pB(.175,.885,.32,1.275)},e.Ease.easeInOutBack=function(){return r.pB(.68,-.55,.265,1.55)},e.Ease.slowMo=function(){return r.pB(0,.5,1,.5)},e.Ease.slowMo1=function(){return r.pB(0,.7,1,.3)},e.Ease.slowMo2=function(){return r.pB(0,.9,1,.1)},t});

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

2
dist/kute-physics.min.js vendored
View file

@ -1,2 +0,0 @@
// KUTE.js v1.5.95 | © dnp_theme | Physics Plugin | MIT-License
!function(t,n){if("function"==typeof define&&define.amd)define(["kute.js"],n);else if("object"==typeof module&&"function"==typeof require)module.exports=n(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js");t.Physics=n(t.KUTE)}}(this,function(t){"use strict";var n="undefined"!=typeof global?global:window,r={};r.spring=n.spring=function(t){t=t||{};var n=Math.max(1,(t.frequency||300)/20),r=Math.pow(20,(t.friction||200)/100),e=t.anticipationStrength||0,o=(t.anticipationSize||0)/1e3;return function(t){var u,a,c,p,f,y,s,h;return y=t/(1-o)-o/(1-o),t<o?(h=o/(1-o)-o/(1-o),s=0/(1-o)-o/(1-o),f=Math.acos(1/i.A1(t,h)),c=(Math.acos(1/i.A1(t,s))-f)/(n*-o),u=i.A1):(u=i.A2,f=0,c=1),a=u(y,o,e,r),p=n*(t-o)*c+f,1-a*Math.cos(p)}};var i=r.spring.prototype=n.spring.prototype;i.A1=function(t,n,r){var i,e,o,u;return o=n/(1-n),u=0,e=(o-.8*u)/(o-u),i=(.8-e)/o,i*t*r/100+e},i.A2=function(t,n,r,i){return Math.pow(i/10,-t)*(1-t)},r.bounce=n.bounce=function(t){t=t||{};var n=Math.max(1,(t.frequency||300)/20),r=Math.pow(20,(t.friction||200)/100);return function(t){var i=Math.pow(r/10,-t)*(1-t),e=n*t*1+Math.PI/2;return i*Math.cos(e)}},r.gravity=n.gravity=function(t){var n,r,i,o,u,a;return t=t||{},n=(t.bounciness||400)/1250,i=(t.elasticity||200)/1e3,u=t.initialForce||!1,o=100,r=[],a=function(){var t,r;for(t=Math.sqrt(2/o),r={a:-t,b:t,H:1},u&&(r.a=0,r.b=2*r.b);r.H>.001;)a=r.b-r.a,r={a:r.b,b:r.b+a*n,H:r.H*n*n};return r.b}(),function(){var t,e,c,p;for(e=Math.sqrt(2/(o*a*a)),c={a:-e,b:e,H:1},u&&(c.a=0,c.b=2*c.b),r.push(c),t=a,p=[];c.b<1&&c.H>.001;)t=c.b-c.a,c={a:c.b,b:c.b+t*n,H:c.H*i},p.push(r.push(c));return p}(),function(n){var i,o,c;for(o=0,i=r[o];!(n>=i.a&&n<=i.b)&&(o+=1,i=r[o]););return c=i?e.getPointInCurve(i.a,i.b,i.H,n,t,a):u?0:1}};var e=r.gravity.prototype=n.gravity.prototype;e.getPointInCurve=function(t,n,r,i,e,o){var u,a;return o=n-t,a=2/o*i-1-2*t/o,u=a*a*r-r+1,e.initialForce&&(u=1-u),u},r.forceWithGravity=n.forceWithGravity=function(t){var n=t||{};return n.initialForce=!0,r.gravity(n)},r.bezier=n.BezierMultiPoint=function(t){t=t||{};var n=t.points,r=!1,i=[];return function(){var t,r;for(t in n){if(r=parseInt(t),r>=n.length-1)break;o.fn(n[r],n[r+1],i)}return i}(),function(t){return 0===t?0:1===t?1:o.yForX(t,i,r)}};var o=r.bezier.prototype=n.BezierMultiPoint.prototype;return o.fn=function(t,n,r){var i=function(r){return o.Bezier(r,t,t.cp[t.cp.length-1],n.cp[0],n)};return r.push(i)},o.Bezier=function(t,n,r,i,e){return{x:Math.pow(1-t,3)*n.x+3*Math.pow(1-t,2)*t*r.x+3*(1-t)*Math.pow(t,2)*i.x+Math.pow(t,3)*e.x,y:Math.pow(1-t,3)*n.y+3*Math.pow(1-t,2)*t*r.y+3*(1-t)*Math.pow(t,2)*i.y+Math.pow(t,3)*e.y}},o.yForX=function(t,n,r){var i,e,o,u,a,c,p,f,y=0,s=n.length;for(i=null,y;y<s&&(e=n[y],t>=e(0).x&&t<=e(1).x&&(i=e),null===i);y++);if(!i)return r?0:1;for(f=1e-4,u=0,c=1,a=(c+u)/2,p=i(a).x,o=0;Math.abs(t-p)>f&&o<100;)t>p?u=a:c=a,a=(c+u)/2,p=i(a).x,o++;return i(a).y},n.Physics={physicsInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsBackOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+r/1e3,y:1.3}]}]})},physicsBackIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.28-r/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsBackInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.68-r/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+r/1e3,y:1.45}]}]})}},r});

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

File diff suppressed because one or more lines are too long

4
dist/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
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

43
kute-attr.js
View file

@ -18,8 +18,8 @@
}(this, function (KUTE) {
'use strict';
var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom, prepareStart = K.prS, parseProperty = K.pp,
unit = g.Interpolate.unit, number = g.Interpolate.number, color = g.Interpolate.color,
var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom, prepareStart = K.prepareStart, parseProperty = K.parseProperty,
unit = g._unit, number = g._number, color = g._color,
getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
svgColors = ['fill','stroke','stop-color'], trueColor = K.truC, trueDimension = K.truD, atts,
replaceUppercase = function(a) {
@ -27,20 +27,20 @@
};
prepareStart['attr'] = function(el,p,v){
var f = {};
var attsStartValues = {};
for (var a in v){
var _a = replaceUppercase(a).replace(/_+[a-z]+/,''),
_v = getCurrentValue(el,_a); // get the value for 'fill-opacity' not fillOpacity
f[_a] = svgColors.indexOf(replaceUppercase(a)) !== -1 ? (_v || 'rgba(0,0,0,0)') : (_v || (/opacity/i.test(a) ? 1 : 0));
var attribute = replaceUppercase(a).replace(/_+[a-z]+/,''),
currentValue = getCurrentValue(el,attribute); // get the value for 'fill-opacity' not fillOpacity
attsStartValues[attribute] = svgColors.indexOf(replaceUppercase(a)) !== -1 ? (currentValue || 'rgba(0,0,0,0)') : (currentValue || (/opacity/i.test(a) ? 1 : 0));
}
return f;
return attsStartValues;
};
// process attributes object K.pp.attr(t[x])
// and also register their render functions
parseProperty['attr'] = function(a,o,l){
if (!('attr' in DOM)) {
DOM.attr = function(l,p,a,b,v) {
DOM.attr = function(l,p,a,b,v) {
for ( var o in b ){
DOM.attributes[o](l,o,a[o],b[o],v);
}
@ -53,29 +53,26 @@
var prop = replaceUppercase(p), cv = getCurrentValue(l,prop.replace(/_+[a-z]+/,''));
if ( svgColors.indexOf(prop) === -1 && (/(%|[a-z]+)$/.test(o[p]) || /(%|[a-z]+)$/.test(cv)) ) {
var u = trueDimension(cv).u || trueDimension(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
if (!(p+s in atts)) {
atts[p+s] = function(l,p,a,b,v) {
var _p = _p || replaceUppercase(p).replace(s,'');
l.setAttribute(_p, unit(a.v,b.v,b.u,v) );
if (!(prop+s in atts)) {
atts[prop+s] = function(l,p,a,b,v) {
l.setAttribute(p.replace(s,''), unit(a.v,b.v,b.u,v) );
}
}
ats[p+s] = trueDimension(o[p]);
ats[prop+s] = trueDimension(o[p]);
} else if ( svgColors.indexOf(prop) > -1 ) {
if (!(p in atts)) {
atts[p] = function(l,u,a,b,v) {
var _u = _u || replaceUppercase(u);
l.setAttribute(_u, color(a,b,v,o.keepHex));
if (!(prop in atts)) {
atts[prop] = function(l,u,a,b,v) {
l.setAttribute(u, color(a,b,v,o.keepHex));
}
}
ats[p] = trueColor(o[p]);
ats[prop] = trueColor(o[p]);
} else {
if (!(p in atts)) {
atts[p] = function(l,o,a,b,v) {
var _o = _o || replaceUppercase(o);
l.setAttribute(_o, number(a,b,v));
if (!(prop in atts)) {
atts[prop] = function(l,o,a,b,v) {
l.setAttribute(o, number(a,b,v));
}
}
ats[p] = parseFloat(o[p]);
ats[prop] = parseFloat(o[p]);
}
}
return ats;

175
kute-bezier.js
View file

@ -1,175 +0,0 @@
/*
* KUTE.js - The Light Tweening Engine | dnp_theme
* package bezier easing
* BezierEasing by Gaëtan Renaudeau 2014 – MIT License
* optimized by dnp_theme 2015 – MIT License
* Licensed under MIT-License
*/
(function (root,factory) {
if (typeof define === 'function' && define.amd) {
define(['kute.js'], factory);
} else if(typeof module == 'object' && typeof require == 'function') {
module.exports = factory(require('kute.js'));
} else if ( typeof root.KUTE !== 'undefined' ) {
// Browser globals
root.Ease = factory(root.KUTE);
} else {
throw new Error("Bezier Easing functions depend on KUTE.js");
}
}(this, function (KUTE) {
'use strict';
var g = typeof global !== 'undefined' ? global : window, E = {};
E.Bezier = g.Bezier = function(mX1, mY1, mX2, mY2) {
return _bz.pB(mX1, mY1, mX2, mY2);
};
var _bz = E.Bezier.prototype = g.Bezier.prototype;
// These values are established by empiricism with tests (tradeoff: performance VS precision)
_bz.ni = 4; // NEWTON_ITERATIONS
_bz.nms = 0.001; // NEWTON_MIN_SLOPE
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS
_bz.ksts = 11; // k Spline Table Size
_bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
_bz.f32as = 'Float32Array' in g; // float32ArraySupported
_bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
_bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
_bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
_bz.C = function(aA1) { return 3.0 * aA1; };
_bz.pB = function (mX1, mY1, mX2, mY2) {
this._p = false; var self = this;
return function(aX){
if (!self._p) _bz.pc(mX1, mX2, mY1, mY2);
if (mX1 === mY1 && mX2 === mY2) return aX;
if (aX === 0) return 0;
if (aX === 1) return 1;
return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);
};
};
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
_bz.cB = function(aT, aA1, aA2) { // calc Bezier
return ((_bz.A(aA1, aA2)*aT + _bz.B(aA1, aA2))*aT + _bz.C(aA1))*aT;
};
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
_bz.gS = function (aT, aA1, aA2) { // getSlope
return 3.0 * _bz.A(aA1, aA2)*aT*aT + 2.0 * _bz.B(aA1, aA2) * aT + _bz.C(aA1);
};
_bz.bS = function(a, aA, aB, mX1, mX2) { // binary Subdivide
var x, t, i = 0, j = _bz.sp, y = _bz.smi;
do {
t = aA + (aB - aA) / 2.0;
x = _bz.cB(t, mX1, mX2) - a;
if (x > 0.0) {
aB = t;
} else {
aA = t;
}
} while (Math.abs(x) > j && ++i < y);
return t;
};
_bz.nri = function (aX, agt, mX1, mX2) { // newton Raphs on Iterate
var i = 0, j = _bz.ni;
for (i; i < j; ++i) {
var cs = _bz.gS(agt, mX1, mX2);
if (cs === 0.0) return agt;
var x = _bz.cB(agt, mX1, mX2) - aX;
agt -= x / cs;
}
return agt;
};
_bz.csv = function (mX1, mX2) { // calc Sample Values
var i = 0, j = _bz.ksts;
for (i; i < j; ++i) {
_bz.msv[i] = _bz.cB(i * _bz.ksss, mX1, mX2);
}
};
_bz.gx = function (aX,mX1,mX2) { //get to X
var iS = 0.0, cs = 1, ls = _bz.ksts - 1;
for (; cs != ls && _bz.msv[cs] <= aX; ++cs) {
iS += _bz.ksss;
}
--cs;
// Interpolate to provide an initial guess for t
var dist = (aX - _bz.msv[cs]) / (_bz.msv[cs+1] - _bz.msv[cs]),
gt = iS + dist * _bz.ksss,
ins = _bz.gS(gt, mX1, mX2),
fiS = iS + _bz.ksss;
if (ins >= _bz.nms) {
return _bz.nri(aX, gt, mX1, mX2);
} else if (ins === 0.0) {
return gt;
} else {
return _bz.bS(aX, iS, fiS, mX1, mX2);
}
};
_bz.pc = function(mX1, mX2, mY1, mY2) {
this._p = true;
if (mX1 != mY1 || mX2 != mY2)
_bz.csv(mX1, mX2);
};
g.Ease = {}; // export these functions to global for best performance
// predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
// _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
g.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
g.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
g.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
g.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
g.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
g.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
g.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
g.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
g.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
g.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
g.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
g.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
g.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
g.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
g.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
g.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
g.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
g.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
g.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
g.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
g.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
g.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
g.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
g.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
g.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
g.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
g.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
g.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
g.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
g.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
return E;
}));

91
kute-css.js
View file

@ -16,38 +16,38 @@
})(this, function(KUTE){
'use strict';
var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom, parseProperty = K.pp, prepareStart = K.prS,
getCurrentStyle = K.gCS, trueDimension = K.truD, trueColor = K.truC,
_br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'), // all radius props prefixed
_brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'),
_cls = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_rd = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
_bm = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'], // dimensions / box model
_tp = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties
_clp = ['clip'], _bg = ['backgroundPosition'], // clip | background position
_mg = _rd.concat(_bm,_tp), // a merge of all properties with px|%|em|rem|etc unit
_all = _cls.concat(_clp, _rd, _bm, _tp, _bg), al = _all.length,
number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color,
_d = _d || {}; //all properties default values
var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom,
parseProperty = K.parseProperty, prepareStart = K.prepareStart, property = K.property,
getCurrentStyle = K.getCurrentStyle, trueDimension = K.truD, trueColor = K.truC,
number = g._number, unit = g._unit, color = g._color,
_colors = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_radius = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
_boxModel = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'], // dimensions / box model
_textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties
_clip = ['clip'], _bg = ['backgroundPosition'], // clip | background position
_mergeTextAndBox = _boxModel.concat(_textProperties), // a merge of all properties with px|%|em|rem|etc unit
_mergeUnits = _radius.concat(_boxModel,_textProperties), // a merge of all properties with px|%|em|rem|etc unit
_all = _colors.concat(_clip, _radius, _boxModel, _textProperties, _bg), al = _all.length,
_defaults = _defaults || {}; //all properties default values
//populate default values object
for ( var i=0; i< al; i++ ){
if (_cls.indexOf(_all[i]) !== -1){
_d[_all[i]] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1};
} else if ( _mg.indexOf(_all[i]) !== -1 ) {
_d[_all[i]] = 0;
if (_colors.indexOf(_all[i]) !== -1){
_defaults[_all[i]] = 'rgba(0,0,0,0)'; // _defaults[p] = {r:0,g:0,b:0,a:1};
} else if ( _mergeUnits.indexOf(_all[i]) !== -1 ) {
_defaults[_all[i]] = 0;
} else if ( _bg.indexOf(_all[i]) !== -1 ){
_d[_all[i]] = [50,50];
_defaults[_all[i]] = [50,50];
} else if ( _all[i] === 'clip' ){
_d[_all[i]] = [0,0,0,0];
_defaults[_all[i]] = [0,0,0,0];
}
}
// create prepare/process/render functions for additional colors properties
for (var i = 0, l = _cls.length; i<l; i++) {
parseProperty[_cls[i]] = function(p,v) {
for (var i = 0, l = _colors.length; i<l; i++) {
parseProperty[_colors[i]] = function(p,v) {
if (!(p in DOM)) {
DOM[p] = function(l,p,a,b,v,o) {
l.style[p] = color(a,b,v,o.keepHex);
@ -55,14 +55,14 @@
}
return trueColor(v);
};
prepareStart[_cls[i]] = function(el,p,v){
return getCurrentStyle(el,p) || _d[p];
prepareStart[_colors[i]] = function(el,p,v){
return getCurrentStyle(el,p) || _defaults[p];
};
}
// create prepare/process/render functions for additional box model properties
for (var i = 0, l = _mg.length; i<l; i++) {
parseProperty[_mg[i]] = function(p,v){
for (var i = 0, l = _mergeTextAndBox.length; i<l; i++) {
parseProperty[_mergeTextAndBox[i]] = function(p,v){
if (!(p in DOM)){
DOM[p] = function(l,p,a,b,v){
l.style[p] = unit(a.v,b.v,b.u,v);
@ -70,41 +70,24 @@
}
return trueDimension(v);
};
prepareStart[_mg[i]] = function(el,p,v){
return getCurrentStyle(el,p) || _d[p];
prepareStart[_mergeTextAndBox[i]] = function(el,p,v){
return getCurrentStyle(el,p) || _defaults[p];
};
}
//create prepare/process/render functions for radius properties
for (var i = 0, l = _rd.length; i<l; i++) {
parseProperty[_rd[i]] = function(p,v){
for (var i = 0, l = _radius.length; i<l; i++) {
var prefixedProp = property(_radius[i]);
parseProperty[prefixedProp] = function(p,v){
if ( (!(p in DOM)) ) {
if (p === 'borderRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_br] = unit(a.v,b.v,b.u,v);
}
} else if (p === 'borderTopLeftRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_brtl] = unit(a.v,b.v,b.u,v);
}
} else if (p === 'borderTopRightRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_brtr] = unit(a.v,b.v,b.u,v);
}
} else if (p === 'borderBottomLeftRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_brbl] = unit(a.v,b.v,b.u,v);
}
} else if (p === 'borderBottomRightRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_brbr] = unit(a.v,b.v,b.u,v);
}
DOM[p] = function(l,p,a,b,v){
l.style[p] = unit(a.v,b.v,b.u,v);
}
}
return trueDimension(v);
};
prepareStart[_rd[i]] = function(el,p,v){
return getCurrentStyle(el,p) || _d[p];
prepareStart[prefixedProp] = function(el,p,v){
return getCurrentStyle(el,p) || _defaults[p];
};
}
@ -151,7 +134,7 @@
}
}
prepareStart['backgroundPosition'] = function(el,p,v){
return getCurrentStyle(el,p) || _d[p];
return getCurrentStyle(el,p) || _defaults[p];
}
return this;

298
kute-physics.js
View file

@ -1,298 +0,0 @@
/*
* KUTE.js - The Light Tweening Engine | dnp_theme
* package dynamics.js easings pack by Michael Villar
* https://github.com/michaelvillar/dynamics.js
* optimized by dnp_theme 2015 – MIT License
* Licensed under MIT-License
*/
(function(root,factory){
if (typeof define === 'function' && define.amd) {
define(['kute.js'], factory);
} else if(typeof module == 'object' && typeof require == 'function') {
module.exports = factory(require('kute.js'));
} else if ( typeof root.KUTE !== 'undefined' ) {
root.Physics = factory(root.KUTE);
} else {
throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js")
}
})(this, function(KUTE){
'use strict';
var g = typeof global !== 'undefined' ? global : window, P = {};
// spring easing
P.spring = g.spring = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300 ) / 20),
fc = Math.pow(20, (options.friction || 200 ) / 100),
aSt = options.anticipationStrength || 0,
aS = (options.anticipationSize || 0) / 1000;
return function(t) {
var A, At, a, angle, b, frictionT, y0, yS;
frictionT = (t / (1 - aS)) - (aS / (1 - aS));
if (t < aS) {
yS = (aS / (1 - aS)) - (aS / (1 - aS));
y0 = (0 / (1 - aS)) - (aS / (1 - aS));
b = Math.acos(1 / _kps.A1(t,yS));
a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
A = _kps.A1;
} else {
A = _kps.A2;
b = 0;
a = 1;
}
At = A(frictionT,aS,aSt,fc);
angle = fq * (t - aS) * a + b;
return 1 - (At * Math.cos(angle));
};
};
var _kps = P.spring.prototype = g.spring.prototype;
_kps.A1 = function(t,aS,aSt) {
var a, b, x0, x1;
x0 = aS / (1 - aS);
x1 = 0;
b = (x0 - (0.8 * x1)) / (x0 - x1);
a = (0.8 - b) / x0;
return (a * t * aSt / 100) + b;
};
_kps.A2 = function(t,aS,aSt,f) {
return Math.pow(f / 10, -t) * (1 - t);
};
// bounce
P.bounce = g.bounce = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300) / 20),
f = Math.pow(20, (options.friction || 200) / 100);
return function(t) {
var At = Math.pow(f / 10, -t) * (1 - t),
angle = fq * t * 1 + Math.PI / 2;
return At * Math.cos(angle);
};
};
// gravity
P.gravity = g.gravity = function(options) {
var bounciness, curves, elasticity, gravity, initialForce, L;
options = options || {};
bounciness = ( options.bounciness || 400 ) / 1250;
elasticity = ( options.elasticity || 200 ) / 1000;
initialForce = options.initialForce || false;
gravity = 100;
curves = [];
L = (function() {
var b, curve;
b = Math.sqrt(2 / gravity);
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
while (curve.H > 0.001) {
L = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + L * bounciness,
H: curve.H * bounciness * bounciness
};
}
return curve.b;
})();
(function() {
var L2, b, curve, _results;
b = Math.sqrt(2 / (gravity * L * L));
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
curves.push(curve);
L2 = L;
_results = [];
while (curve.b < 1 && curve.H > 0.001) {
L2 = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + L2 * bounciness,
H: curve.H * elasticity
};
_results.push(curves.push(curve));
}
return _results;
})();
return function(t) {
var curve, i, v;
i = 0;
curve = curves[i];
while (!(t >= curve.a && t <= curve.b)) {
i += 1;
curve = curves[i];
if (!curve) {
break;
}
}
if (!curve) {
v = initialForce ? 0 : 1;
} else {
v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, L);
}
return v;
};
};
var _kpg = P.gravity.prototype = g.gravity.prototype;
_kpg.getPointInCurve = function(a, b, H, t, o, L) {
var c, t2;
L = b - a;
t2 = (2 / L) * t - 1 - (a * 2 / L);
c = t2 * t2 * H - H + 1;
if (o.initialForce) {
c = 1 - c;
}
return c;
};
//throw up and pull down by gravity
P.forceWithGravity = g.forceWithGravity = function(o) {
var ops = o || {};
ops.initialForce = true;
return P.gravity(ops);
};
// multi point bezier
P.bezier = g.BezierMultiPoint = function(options) {
options = options || {};
var points = options.points,
returnsToSelf = false, Bs = [];
(function() {
var i, k;
for (i in points) {
k = parseInt(i);
if (k >= points.length - 1) {
break;
}
_kpb.fn(points[k], points[k + 1], Bs);
}
return Bs;
})();
return function(t) {
if (t === 0) {
return 0;
} else if (t === 1) {
return 1;
} else {
return _kpb.yForX(t, Bs, returnsToSelf);
}
};
};
var _kpb = P.bezier.prototype = g.BezierMultiPoint.prototype;
_kpb.fn = function(pointA, pointB, Bs) {
var B2 = function(t) {
return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB);
};
return Bs.push(B2);
};
_kpb.Bezier = function(t, p0, p1, p2, p3) {
return {
x: (Math.pow(1 - t, 3) * p0.x) + (3 * Math.pow(1 - t, 2) * t * p1.x) + (3 * (1 - t) * Math.pow(t, 2) * p2.x) + Math.pow(t, 3) * p3.x,
y: (Math.pow(1 - t, 3) * p0.y) + (3 * Math.pow(1 - t, 2) * t * p1.y) + (3 * (1 - t) * Math.pow(t, 2) * p2.y) + Math.pow(t, 3) * p3.y
};
};
_kpb.yForX = function(xTarget, Bs, rTS) {
var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length;
B = null;
for (_i; _i < _len; _i++) {
aB = Bs[_i];
if (xTarget >= aB(0).x && xTarget <= aB(1).x) {
B = aB;
}
if (B !== null) {
break;
}
}
if (!B) {
return ( rTS ? 0 : 1 );
}
xT = 0.0001; // xTolerance
lower = 0; upper = 1;
percent = (upper + lower) / 2;
x = B(percent).x; i = 0;
while (Math.abs(xTarget - x) > xT && i < 100) {
if (xTarget > x) {
lower = percent;
} else {
upper = percent;
}
percent = (upper + lower) / 2;
x = B(percent).x;
i++;
}
return B(percent).y;
};
// export predefined BezierMultiPoint functions to window
g.Physics = {
physicsInOut : function(options) {
var friction;
options = options || {};
friction = options.friction|| 200;
return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
},
physicsIn : function(options) {
var friction;
options = options || {};
friction = options.friction|| 200;
return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
},
physicsOut : function(options) {
var friction;
options = options || {};
friction = options.friction|| 200;
return g.BezierMultiPoint({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
},
physicsBackOut : function(options) {
var friction;
options = options || {};
friction = options.friction|| 200;
return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:0.735+(friction/1000),y:1.3}]}] });
},
physicsBackIn : function(options) {
var friction;
options = options || {};
friction = options.friction|| 200;
return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0.28-(friction / 1000),y:-0.6}]},{x:1,y:1,cp:[{x:1,y:1}]}] });
},
physicsBackInOut : function(options) {
var friction;
options = options || {};
friction = options.friction|| 200;
return g.BezierMultiPoint({ points: [{x:0,y:0,cp:[{x:0.68-(friction / 1000),y:-0.55}]},{x:1,y:1,cp:[{x:0.265+(friction / 1000),y:1.45}]}] });
}
};
return P;
});

61
kute-svg.js
View file

@ -19,22 +19,23 @@
'use strict';
// variables, reference global objects, prepare properties
var g = typeof global !== 'undefined' ? global : window, K = KUTE, p, DOM = g.dom, parseProperty = K.pp, prepareStart = K.prS, getCurrentStyle = K.gCS,
_isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false,
var g = typeof global !== 'undefined' ? global : window, K = KUTE, p,
DOM = g.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
trueColor = K.truC, trueDimension = K.truD,
_nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
_cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false,
_numeric = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
_colors = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolate functions
array = g.Interpolate.array = function array(a,b,l,v) { // array1, array2, array2.length, progress
var na = [], i;
for(i=0;i<l;i++) { na.push( a[i] === b[i] ? b[i] : number(a[i],b[i],v) ); } // don't do math if not needed
return na;
},
coords = g.Interpolate.coords = function(a,b,l,ll,o,v) { // function(array1, array2, array2.length, coordinates.length, joiner, progress) for SVG morph
var s = [], i;
for(i=0;i<l;i++) { s.push( array( a[i],b[i],ll,v ) ); }
return s.join(o);
number = g._number, unit = g._unit, color = g._color, // interpolate functions
coords = g._coords = function(a,b,l,v) { // function(array1, array2, array2.length, progress) for SVG morph
var points =[];
for(var i=0;i<l;i++) { // for each point
points[i] = [];
for(var j=0;j<2;j++) { // each point coordinate
points[i].push(a[i][j]+(b[i][j]-a[i][j])*v);
}
}
return points;
};
if (_isIE&&_isIE<9) {return;} // return if SVG API is not supported
@ -171,10 +172,10 @@
var p1 = getOnePath(w._vS.path.o), p2 = getOnePath(w._vE.path.o), paths;
// path tween options
this._mpr = w._ops.morphPrecision || 15;
this._idx = w._ops.morphIndex;
this._rv1 = w._ops.reverseFirstPath;
this._rv2 = w._ops.reverseSecondPath;
this._mpr = w.options.morphPrecision || 15;
this._idx = w.options.morphIndex;
this._rv1 = w.options.reverseFirstPath;
this._rv2 = w.options.reverseSecondPath;
// begin processing paths
this._isP = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // check if both shapes are polygons
@ -193,7 +194,7 @@
parseProperty['path'] = function(a,o,l) { // K.pp['path']('path',value,element);
if (!('path' in DOM)) {
DOM['path'] = function(l,p,a,b,v){
l.setAttribute("d", v === 1 ? b.o : 'M' + coords( a['d'],b['d'],b['d'].length,2,'L',v ) + 'Z' );
l.setAttribute("d", v === 1 ? b.o : 'M' + coords( a['d'],b['d'],b['d'].length,v ) + 'Z' );
}
}
return getPath(o);
@ -303,8 +304,8 @@
// SVG CSS Color Properties
for ( var i = 0, l = _cls.length; i< l; i++) {
parseProperty[_cls[i]] = function(p,v){
for ( var i = 0, l = _colors.length; i< l; i++) {
parseProperty[_colors[i]] = function(p,v){
if (!(p in DOM)) {
DOM[p] = function(l,p,a,b,v,o) {
l.style[p] = color(a,b,v,o.keepHex);
@ -312,15 +313,15 @@
}
return trueColor(v);
}
prepareStart[_cls[i]] = function(el,p,v){
prepareStart[_colors[i]] = function(el,p,v){
return getCurrentStyle(el,p) || 'rgb(0,0,0)';
}
}
// Other SVG related CSS props
for ( var i = 0, l = _nm.length; i< l; i++) { // for numeric CSS props from any type of SVG shape
if (_nm[i] === 'strokeWidth'){ // stroke can be unitless or unit | http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg
parseProperty[_nm[i]] = function(p,v){
for ( var i = 0, l = _numeric.length; i< l; i++) { // for numeric CSS props from any type of SVG shape
if (_numeric[i] === 'strokeWidth'){ // stroke can be unitless or unit | http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg
parseProperty[_numeric[i]] = function(p,v){
if (!(p in DOM)) {
DOM[p] = function(l,p,a,b,v) {
l.style[p] = typeof b === 'number' ? number(a,b,v) : unit(a.v,b.v,b.u,v);
@ -329,7 +330,7 @@
return /px|%|em|vh|vw/.test(v) ? trueDimension(v) : parseFloat(v);
}
} else {
parseProperty[_nm[i]] = function(p,v){
parseProperty[_numeric[i]] = function(p,v){
if (!(p in DOM)) {
DOM[p] = function(l,p,a,b,v) {
l.style[p] = number(a,b,v);
@ -338,7 +339,7 @@
return parseFloat(v);
}
}
prepareStart[_nm[i]] = function(el,p,v){
prepareStart[_numeric[i]] = function(el,p,v){
return getCurrentStyle(el,p) || 0;
}
}
@ -354,13 +355,13 @@
}
return c;
},
translateSVG = g.Interpolate.translateSVG = function (s,e,a,b,v){ // translate(i+'(',')',a[i],b[i],v)
translateSVG = g._translateSVG = function (s,e,a,b,v){ // translate(i+'(',')',a[i],b[i],v)
return s + ((a[1] === b[1] && b[1] === 0 ) ? number(a[0],b[0],v) : number(a[0],b[0],v) + ' ' + number(a[1],b[1],v)) + e;
},
rotateSVG = g.Interpolate.rotateSVG = function (s,e,a,b,v){
rotateSVG = g._rotateSVG = function (s,e,a,b,v){
return s + (number(a[0],b[0],v) + ' ' + b[1] + ',' + b[2]) + e;
},
scaleOrSkew = g.Interpolate.scaleOrSkewSVG = function (s,e,a,b,v){ // scale / skew
scaleOrSkew = g._scaleOrSkewSVG = function (s,e,a,b,v){ // scale / skew
return s + number(a,b,v) + e;
},
stackTransform = function (w){ // helper function that helps preserve current transform properties into the objects

29
kute-text.js
View file

@ -16,14 +16,15 @@
}
}(this, function (KUTE) {
'use strict';
var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom, prepareStart = K.prS,
parseProperty = K.pp, number = g.Interpolate.number,
_s = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
_S = String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""), // uparsePropertyercase
_sb = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
_n = String("0123456789").split(""), // numeric
_a = _s.concat(_S,_n), // alpha numeric
_all = _a.concat(_sb), // all caracters
var g = typeof global !== 'undefined' ? global : window,
K = KUTE, DOM = g.dom, prepareStart = K.prepareStart,
parseProperty = K.parseProperty, number = g._number,
_string = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
_stringUppercase = String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""), // uppercase
_symbols = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
_numeric = String("0123456789").split(""), // numeric
_alphanumeric = _string.concat(_stringUppercase,_numeric), // alpha numeric
_all = _alphanumeric.concat(_symbols), // all caracters
random = Math.random, floor = Math.floor, min = Math.min;
prepareStart['text'] = prepareStart['number'] = function(l,p,v){
@ -33,13 +34,13 @@
parseProperty['text'] = function(p,v,l) {
if ( !( 'text' in DOM ) ) {
DOM['text'] = function(l,p,a,b,v,o) {
var tp = tp || o.textChars === 'alpha' ? _s // textChars is alpha
: o.textChars === 'upper' ? _S // textChars is numeric
: o.textChars === 'numeric' ? _n // textChars is numeric
: o.textChars === 'alphanumeric' ? _a // textChars is alphanumeric
: o.textChars === 'symbols' ? _sb // textChars is symbols
var tp = tp || o.textChars === 'alpha' ? _string // textChars is alpha
: o.textChars === 'upper' ? _stringUppercase // textChars is numeric
: o.textChars === 'numeric' ? _numeric // textChars is numeric
: o.textChars === 'alphanumeric' ? _alphanumeric // textChars is alphanumeric
: o.textChars === 'symbols' ? _symbols // textChars is symbols
: o.textChars ? o.textChars.split('') // textChars is a custom text
: _s, ll = tp.length,
: _string, ll = tp.length,
t = tp[floor((random() * ll))], ix = '', tx = '', fi = a.substring(0), f = b.substring(0);
// use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a to do

431
kute.js
View file

@ -14,7 +14,9 @@
"use strict";
// set a custom scope for KUTE.js
var g = typeof global !== 'undefined' ? global : window, K = {}, _tws = g._tweens = [], tick = null, time = g.performance,
var g = typeof global !== 'undefined' ? global : window, time = g.performance,
K = {}, _tws = g._tweens = [], tick = null,
// tools / utils
getPrefix = function() { //returns browser prefix
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'],
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
@ -25,10 +27,10 @@
var r = (!(p in document.body.style)) ? true : false, f = getPrefix(); // is prefix required for property | prefix
return r ? f + (p.charAt(0).toUpperCase() + p.slice(1)) : p;
},
selector = function(el,multi){ // a selector utility
var nl;
selector = function(el,multi){ // a public selector utility
var nl;
if (multi){
nl = typeof el === 'object' ? el : document.querySelectorAll(el);
nl = el instanceof Object || typeof el === 'object' ? el : document.querySelectorAll(el);
} else {
nl = typeof el === 'object' ? el
: /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el);
@ -43,7 +45,7 @@
return { v: x, u: y };
},
trueColor = function (v) { // replace transparent and transform any color to rgba()/rgb()
if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized
if (/rgb|rgba/.test(v)) { // first check if it's a rgb string
var vrgb = v.replace(/[^\d,]/g, '').split(','), y = vrgb[3] ? vrgb[3] : null;
if (!y) {
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
@ -81,15 +83,15 @@
},
getInlineStyle = function(el,p) { // getInlineStyle = get transform style for element from cssText for .to() method, the sp is for transform property
if (!el) return; // if the scroll applies to `window` it returns as it has no styling
var css = css || el.style.cssText.replace(/\s/g,'').split(';'),//the cssText
var css = el.style.cssText.replace(/\s/g,'').split(';'),//the cssText
trsf = {}; //the transform object
// if we have any inline style in the cssText attribute, usually it has higher priority
for ( var i=0, csl = css.length; i<csl; i++ ){
if ( /transform/.test(css[i])) {
if ( /transform/i.test(css[i])) {
var tps = css[i].split(':')[1].split(')'); //all transform properties
for ( var k=0, tpl = tps.length-1; k< tpl; k++){
var tpv = tps[k].split('('), tp = tpv[0], tv = tpv[1]; //each transform property
if ( _tf.indexOf(tp) !== -1 ){
if ( _transform.indexOf(tp) !== -1 ){
trsf[tp] = /translate3d/.test(tp) ? tv.split(',') : tv;
}
}
@ -108,8 +110,8 @@
} else {
return s;
}
} else {
return _d[p];
} else {
return _defaults[p];
}
}
},
@ -119,14 +121,14 @@
removeAll = function () { _tws = []; },
add = function (tw) { _tws.push(tw); },
remove = function (tw) { var i = _tws.indexOf(tw); if (i !== -1) { _tws.splice(i, 1); }},
stop = function () { if (tick) { _caf(tick); tick = null; } },
stop = function () { if (tick) { _cancelAnimationFrame(tick); tick = null; } },
canTouch = ('ontouchstart' in g || navigator.msMaxTouchPoints) || false, // support Touch?
touchOrWheel = canTouch ? 'touchstart' : 'mousewheel', mouseEnter = 'mouseenter', //events to prevent on scroll
_tr = property('transform'),
_raf = g.requestAnimationFrame || g.webkitRequestAnimationFrame || function (c) { return setTimeout(c, 16) },
_caf = g.cancelAnimationFrame || g.webkitCancelRequestAnimationFrame || function (c) { return clearTimeout(c) },
_requestAnimationFrame = g.requestAnimationFrame || g.webkitRequestAnimationFrame || function (c) { return setTimeout(c, 16) },
_cancelAnimationFrame = g.cancelAnimationFrame || g.webkitCancelRequestAnimationFrame || function (c) { return clearTimeout(c) },
transformProperty = property('transform'),
//true scroll container
body = document.body, html = document.getElementsByTagName('HTML')[0],
scrollContainer = /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html,
@ -135,124 +137,125 @@
_isIE8 = _isIE === 8, // check IE8/IE
//supported properties
_cls = ['color', 'backgroundColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_sc = ['scrollTop', 'scroll'], //scroll, it has no default value, it's calculated on tween start
_op = ['opacity'], // opacity
_bm = ['top', 'left', 'width', 'height'], // dimensions / box model
_3d = ['rotateX', 'rotateY','translateZ'], // transform properties that require perspective
_tf = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'], // transform
_all = _cls.concat(_sc, _op, _bm, _tf), al = _all.length,
_d = _d || {}; //all properties default values
_colors = ['color', 'backgroundColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_scroll = ['scrollTop', 'scroll'], //scroll, it has no default value, it's calculated on tween start
_opacity = ['opacity'], // opacity
_boxModel = ['top', 'left', 'width', 'height'], // dimensions / box model
_transform = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'], // transform
_all = _colors.concat(_scroll, _opacity, _boxModel, _transform), al = _all.length,
_defaults = _defaults || {}; //all properties default values
//populate default values object
for ( var i=0; i<al; i++ ){
var p = _all[i];
if (_cls.indexOf(p) !== -1){
_d[p] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1};
} else if ( _bm.indexOf(p) !== -1 ) {
_d[p] = 0;
} else if ( p === 'translate3d' ){
_d[p] = [0,0,0];
} else if ( p === 'translate' ){
_d[p] = [0,0];
} else if ( p === 'rotate' || /X|Y|Z/.test(p) ){
_d[p] = 0;
} else if ( p === 'scale' || p === 'opacity' ){
_d[p] = 1;
if (_colors.indexOf(p) !== -1){
_defaults[p] = 'rgba(0,0,0,0)'; // _defaults[p] = {r:0,g:0,b:0,a:1}; // no unit/suffix
} else if ( _boxModel.indexOf(p) !== -1 ) {
_defaults[p] = 0;
} else if ( p === 'translate3d' ){ // px
_defaults[p] = [0,0,0];
} else if ( p === 'translate' ){ // px
_defaults[p] = [0,0];
} else if ( p === 'rotate' || /X|Y|Z/.test(p) ){ // deg
_defaults[p] = 0;
} else if ( p === 'scale' || p === 'opacity' ){ // unitless
_defaults[p] = 1;
}
p = null;
}
// KUTE.js INTERPOLATORS
var Interpolate = g.Interpolate = {},
number = Interpolate.number = function(a,b,v) { // number1, number2, progress
var /*Interpolate = g.Interpolate = {},*/
number = g._number = function(a,b,v) { // number1, number2, progress
a = +a; b -= a; return a + b * v;
},
unit = Interpolate.unit = function(a,b,u,v) { // number1, number2, unit, progress
unit = g._unit = function(a,b,u,v) { // number1, number2, unit, progress
a = +a; b -= a; return (a + b * v)+u;
},
color = Interpolate.color = function(a,b,v,h){ // rgba1, rgba2, progress, convertToHex(true/false)
color = g._color = function(a,b,v,h){ // rgba1, rgba2, progress, convertToHex(true/false)
var _c = {}, c, n = number, ep = ')', cm =',', r = 'rgb(', ra = 'rgba(';
for (c in b) { _c[c] = c !== 'a' ? (parseInt( number(a[c],b[c],v) ) || 0) : (a[c] && b[c]) ? parseFloat( number(a[c],b[c],v) ) : null; }
return h ? rgbToHex( _c.r, _c.g, _c.b ) : !_c.a ? r + _c.r + cm + _c.g + cm + _c.b + ep : ra + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
},
translate = Interpolate.translate = function (a,b,v){
var ts = {};
translate = g._translate = function (a,b,v){
var translation = {};
for (var ax in b){
var x1 = a[ax].value || 0, x2 = b[ax].value || 0, xu = b[ax].unit || 'px';
ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
translation[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
}
return b.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
return b.x ? 'translate(' + translation.x + ',' + translation.y + ')' :
'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')';
},
rotate = Interpolate.rotate = function (a,b,v){
var rS = {};
rotate = g._rotate = function (a,b,v){
var rotation = {};
for ( var rx in b ){
if ( a[rx] ) {
var a1 = a[rx].value, a2 = b[rx].value, au = b[rx].unit||'deg', av = a1 + (a2 - a1) * v;
rS[rx] = rx === 'z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ')';
rotation[rx] = rx === 'z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ')';
}
}
return b.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
return b.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||'');
},
skew = Interpolate.skew = function (a,b,v){
var sS = {};
skew = g._skew = function (a,b,v){
var skewProp = {};
for ( var sx in b ){
if ( a[sx] ) {
var s1 = a[sx].value, s2 = b[sx].value, su = b[sx].unit||'deg';
sS[sx] = sx + '(' + (s1 + (s2 - s1) * v) + su + ')';
skewProp[sx] = sx + '(' + (s1 + (s2 - s1) * v) + su + ')';
}
}
return (sS.skewX||'') + (sS.skewY||'');
return (skewProp.skewX||'') + (skewProp.skewY||'');
},
scale = Interpolate.scale = function(a,b,v){
var sc1 = a.value, sc2 = b.value;
return 'scale(' + (sc1 + (sc2 - sc1) * v) + ')';
scale = g._scale = function(a,b,v){
var scaleA = a.value, scaleB = b.value;
return 'scale(' + (scaleA + (scaleB - scaleA) * v) + ')';
},
// KUTE.js DOM update functions
DOM = g.dom = {},
ticker = g._ticker = function(t) {
var i = 0, l;
// while ( i < (l=_tws.length) ) {
while ( i < _tws.length ) {
while ( i < (l=_tws.length) ) {
// while ( i < _tws.length ) {
if ( update(_tws[i],t) ) {
i++;
} else {
_tws.splice(i, 1);
}
}
tick = _raf(ticker);
tick = _requestAnimationFrame(ticker);
},
update = g._update = function(w,t) {
t = t || time.now();
if (t < w._sT && w.playing && !w.paused) { return true; }
// if (t < w._startTime && w.playing && !w.paused) { return true; }
if ( t < w._startTime && w.playing ) { return true; }
// element/node, method, (prefixed)property, startValue, endValue, progress
var elapsed = Math.min(( t - w._sT ) / w._dr, 1); // calculate progress
var elapsed = Math.min(( t - w._startTime ) / w.options.duration, 1); // calculate progress
for (var p in w._vE){ DOM[p](w._el,p,w._vS[p],w._vE[p],w._e(elapsed),w._ops); } //render the CSS update
// for (var p in w._vE){ DOM[p](w._el,p,w._vS[p],w._vE[p],w._e(elapsed),w.options); } //render the CSS update
for (var p in w._vE){ DOM[p](w._el,p,w._vS[p],w._vE[p],w.options.easing(elapsed),w.options); } //render the CSS update
if (w._uC) { w._uC.call(); } // fire the updateCallback, try to minimize recursion
if (w.options.update) { w.options.update.call(); } // fire the updateCallback, try to minimize recursion
if (elapsed === 1) {
if (w._r > 0) {
if ( w._r < 9999 ) { w._r--; } else { w._r = 0; } // we have to make it stop somewhere, infinity is too damn much
if (w.options.repeat > 0) {
if ( w.options.repeat < 9999 ) { w.options.repeat--; } else { w.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much
if (w._y) { w.reversed = !w.reversed; reverse.call(w); } // handle yoyo
if (w.options.yoyo) { w.reversed = !w.reversed; reverse.call(w); } // handle yoyo
w._sT = (w._y && !w.reversed) ? t + w._rD : t; //set the right time for delay
w._startTime = (w.options.yoyo && !w.reversed) ? t + w.options.repeatDelay : t; //set the right time for delay
return true;
} else {
if (w._cC) { w._cC.call(); }
if (w.options.complete) { w.options.complete.call(); }
scrollOut.call(w); // unbind preventing scroll when scroll tween finished
// start animating chained tweens
for (var i = 0, ctl = w._cT.length; i < ctl; i++) {
w._cT[i].start();
for (var i = 0, ctl = w.options.chain.length; i < ctl; i++) {
w.options.chain[i].start();
}
//stop ticking when finished
close.call(w);
@ -274,7 +277,7 @@
preparePropertiesObject = function (t, l) {
var skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {}, propertiesObject = {};
for (var x in t) {
if (_tf.indexOf(x) !== -1) { // transform object gets built here
if (_transform.indexOf(x) !== -1) { // transform object gets built here
if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
var ta = ['X', 'Y', 'Z']; //coordinates // translate[x] = pp(x, t[x]);
@ -300,14 +303,14 @@
} else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
transformObject[x] = parseProperty.transform(x, t[x]);
}
propertiesObject['transform'] = transformObject;
propertiesObject[transformProperty] = transformObject;
} else if ( x !== 'transform') {
if ( _bm.indexOf(x) !== -1 ) {
propertiesObject[x] = parseProperty.box(x,t[x]);
} else if (_op.indexOf(x) !== -1 || _sc.indexOf(x) !== -1) {
propertiesObject[x] = parseProperty.unl(x,t[x]);
} else if (_cls.indexOf(x) !== -1) {
propertiesObject[x] = parseProperty.cls(x,t[x]);
if ( _boxModel.indexOf(x) !== -1 ) {
propertiesObject[x] = parseProperty.boxModel(x,t[x]);
} else if (_opacity.indexOf(x) !== -1 || _scroll.indexOf(x) !== -1) {
propertiesObject[x] = parseProperty.unitless(x,t[x]);
} else if (_colors.indexOf(x) !== -1) {
propertiesObject[x] = parseProperty.colors(x,t[x]);
} else if (x in parseProperty) { propertiesObject[x] = parseProperty[x](x,t[x],l); } // or any other property from css/ attr / svg / third party plugins
}
}
@ -317,7 +320,7 @@
// process properties object | registers the plugins prepareStart functions
// string parsing and property specific value processing
parseProperty = {
box : function(p,v){ // box model | text props | radius props
boxModel : function(p,v){ // box model | text props | radius props
if (!(p in DOM)){
DOM[p] = function(l,p,a,b,v){
l.style[p] = unit(a.value,b.value,b.unit,v);
@ -327,7 +330,7 @@
},
transform : function(p,v){ // transform prop / value
if (!('transform' in DOM)) {
DOM.transform = function(l,p,a,b,v,o){
DOM[transformProperty] = function(l,p,a,b,v,o){
var _tS = '', t = '', r = '', sk = '', s = '', pp = pp || o.perspective && parseInt(o.perspective) !== 0 ? 'perspective('+parseInt(o.perspective)+'px) ' : 0;
for (var tp in b){
@ -343,7 +346,7 @@
}
_tS = t + r + sk + s;
l.style[_tr] = pp ? pp + _tS : _tS;
l.style[p] = pp ? pp + _tS : _tS;
}
}
@ -381,11 +384,10 @@
return { value: parseFloat(v) }; // this must be parseFloat(v)
}
},
unl : function(p,v){ // scroll | opacity | unitless
unitless : function(p,v){ // scroll | opacity | unitless
if (/scroll/.test(p) && !(p in DOM) ){
DOM[p] = function(l,p,a,b,v) {
var el = el || (l === undefined || l === null) ? scrollContainer : l;
el.scrollTop = number(a,b,v);
l.scrollTop = number(a,b,v);
};
} else if (p === 'opacity') {
if (!(p in DOM)) {
@ -403,7 +405,7 @@
}
return parseFloat(v);
},
cls : function(p,v){ // colors
colors : function(p,v){ // colors
if (!(p in DOM)) {
DOM[p] = function(l,p,a,b,v,o) {
l.style[p] = color(a,b,v,o.keepHex);
@ -412,8 +414,8 @@
return trueColor(v);
}
},
reverse = function () {
if (this._y) {
reverse = g._reverse = function () {
if (this.options.yoyo) {
for (var p in this._vE) {
var tmp = this._vSR[p];
this._vSR[p] = this._vE[p];
@ -423,9 +425,10 @@
}
},
close = function () { // when animation is finished reset repeat, yoyo&reversed tweens
if (this.repeat > 0) { this._r = this.repeat; }
if (this._y && this.reversed===true) { reverse.call(this); this.reversed = false; }
if (this.repeat > 0) { this.options.repeat = this.repeat; }
if (this.options.yoyo && this.reversed===true) { reverse.call(this); this.reversed = false; }
this.playing = false;
setTimeout(function(){ if (!_tws.length) { stop(); } }, 48); // when all animations are finished, stop ticking after ~3 frames
},
scrollOut = function(){ //prevent scroll when tweening scroll
@ -452,13 +455,82 @@
var bz = es.replace(/bezier|\s|\(|\)/g,'').split(',');
return g.Bezier( bz[0]*1,bz[1]*1,bz[2]*1,bz[3]*1 ); //bezier easing
} else if ( /physics/.test(es) ) {
return g.Physics[es](); // predefined physics bezier based easing functions
return g.Physics[es].apply(this); // predefined physics bezier based easing functions
} else {
return g.Ease[es](); // predefined bezier based easing functions
return g.Ease[es].apply(this); // predefined bezier based easing functions
}
}
},
getStartValues = function () { // stack transform props for .to() chains
var startValues = {}, cs = getInlineStyle(this._el,'transform'),
deg = ['rotate','skew'], ax = ['X','Y','Z'];
for (var p in this._vS){
if ( _transform.indexOf(p) !== -1 ) {
var r2d = (/(rotate|translate|scale)$/.test(p));
if ( /translate/.test(p) && p !== 'translate' ) {
startValues['translate3d'] = cs['translate3d'] || _defaults[p];
} else if ( r2d ) { // 2d transforms
startValues[p] = cs[p] || _defaults[p];
} else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
for (var d=0; d<2; d++) {
for (var a = 0; a<3; a++) {
var s = deg[d]+ax[a];
if (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = cs[s] || _defaults[s]; }
}
}
}
} else {
if ( _scroll.indexOf(p) === -1 ) {
if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
var co = getCurrentStyle(this._el,'filter');
startValues['opacity'] = typeof co === 'number' ? co : _defaults['opacity'];
} else {
if ( _all.indexOf(p) !== -1 ) {
startValues[p] = getCurrentStyle(this._el,p) || d[p];
} else { // plugins register here
startValues[p] = p in prepareStart ? prepareStart[p](this._el,p,this._vS[p]) : 0;
}
}
} else {
startValues[p] = (this._el === null || this._el === undefined) ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop;
}
}
}
for ( var p in cs ){ // also add to _vS values from previous tweens
if ( _transform.indexOf(p) !== -1 && (!( p in this._vS )) ) {
startValues[p] = cs[p] || _defaults[p];
}
}
this._vS = {};
this._vS = preparePropertiesObject(startValues,this._el);
if ( transformProperty in this._vE ){ // stack transform
for ( var sp in this._vS[transformProperty]) {
if (!(sp in this._vE[transformProperty])) { this._vE[transformProperty][sp] = {}; }
for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level
if ( this._vS[transformProperty][sp][spp].value !== undefined ) {
if (!(spp in this._vE[transformProperty][sp])) { this._vE[transformProperty][sp][spp] = {}; }
for ( var sppp in this._vS[transformProperty][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d
if ( !(sppp in this._vE[transformProperty][sp][spp])) {
this._vE[transformProperty][sp][spp][sppp] = this._vS[transformProperty][sp][spp][sppp]; // sppp = unit | value
}
}
}
}
if ( 'value' in this._vS[transformProperty][sp] && (!('value' in this._vE[transformProperty][sp])) ) { // 2nd level
for ( var spp1 in this._vS[transformProperty][sp] ) { // scale
if (!(spp1 in this._vE[transformProperty][sp])) {
this._vE[transformProperty][sp][spp1] = this._vS[transformProperty][sp][spp1]; // spp = unit | value
}
}
}
}
}
},
prepareStart = {},
crossCheck = {},
// core easing functions
easing = g.Easing = {};
@ -516,15 +588,16 @@
easing.easingBounceInOut = function(t) { if ( t < 0.5 ) return easing.easingBounceIn( t * 2 ) * 0.5; return easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
// these methods run faster when defined outside
var start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
var start = g._start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
scrollIn.call(this);
perspective(this._el,this._ops); // apply the perspective and transform origin
if ( this._rpr ) { this.getStartValues(); } // on start we reprocess the valuesStart for TO() method
perspective(this._el,this.options); // apply the perspective and transform origin
if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
K.svg && K.svq(this); // SVG Plugin | on start we process the SVG paths and SVG transforms
for ( var e in this._vE ) {
if (e in crossCheck) crossCheck[e]; // this is where we do the valuesStart and valuesEnd check
this._vSR[e] = this._vS[e];
}
@ -532,22 +605,22 @@
add(this);
this.playing = true;
this.paused = false;
this._sCF = false;
this._sT = t || time.now();
this._sT += this._dl;
this._startFired = false;
this._startTime = t || time.now();
this._startTime += this.options.delay;
if (!this._sCF) {
if (this._sC) { this._sC.call(); }
this._sCF = true;
if (!this._startFired) {
if (this.options.start) { this.options.start.call(); }
this._startFired = true;
}
!tick && ticker();
return this;
},
play = function () {
play = g._play = function () {
if (this.paused && this.playing) {
this.paused = false;
if (this._rC !== null) { this._rC.call(); }
this._sT += time.now() - this._pST;
if (this.options.resume) { this.options.resume.call(); }
this._startTime += time.now() - this._pauseTime;
add(this);
!tick && ticker(); // restart ticking if stopped
}
@ -555,46 +628,40 @@
},
// single Tween object construct
Tween = g._tween = function (_el, _vS, _vE, _o) {
this._el = _el; // element animation is applied to
this._vSR = {}; // internal valuesStartRepeat
this._vS = _vS; // valuesStart
this._vE = _vE; // valuesEnd
this._y = _o.yoyo || false; // _yoyo
Tween = g._Tween = function (_el, _vS, _vE, _o) {
this._el = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to
this.playing = false; // _isPlaying
this.reversed = false; // _reversed
this.paused = false; //_paused
this._sT = null; // startTime
this._pST = null; //_pauseStartTime
this._rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
this._dr = _o.duration || 700; //duration
this._r = _o.repeat || 0; // _repeat
this._rD = _o.repeatDelay || 0; // _repeatDelay
this._dl = _o.delay || 0; //delay
this._e = _o && _o.easing && typeof processEasing(_o.easing) === 'function' ? processEasing(_o.easing) : easing.linear; // _easing function
this._cT = []; //_chainedTweens
this._sCF = false; //_on StartCallbackFIRED
this._sC = _o.start || null; // _on StartCallback
this._uC = _o.update || null; // _on UpdateCallback
this._cC = _o.complete || null; // _on CompleteCallback
this._pC = _o.pause || null; // _on PauseCallback
this._rC = _o.play || null; // _on ResumeCallback
this._stC = _o.stop || null; // _on StopCallback
this.repeat = this._r; // we cache the number of repeats to be able to put it back after all cycles finish
this._ops = {};
this._startTime = null; // startTime
this._pauseTime = null; //_pauseTime
this._startFired = false; //_on StartCallbackFIRED
this._vSR = {}; // internal valuesStartRepeat
this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart
this._vE = preparePropertiesObject(_vE,_el); // valuesEnd
this.options = {}; for (var o in _o) { this.options[o] = _o[o]; }
this.options.chain = []; //_chainedTweens
this.options.easing = _o.easing && typeof processEasing(_o.easing) === 'function' ? processEasing(_o.easing) : easing.linear;
this.options.repeat = _o.repeat || 0;
this.options.repeatDelay = _o.repeatDelay || 0;
this.options.yoyo = _o.yoyo || false; // _yoyo
this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
this.options.duration = _o.duration || 700; //duration
this.options.delay = _o.delay || 0; //delay
this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish
this.start = start; this.play = play; this.resume = play;
//also add plugins options or transform perspective TO DO : split this damn regex into an array and do an indexOf or a simple ||
for (var o in _o) { if (!(o in this) && !/delay|rpr|duration|repeat|start|stop|update|complete|pause|play|yoyo|easing/i.test(o) ) { this._ops[o] = _o[o]; } }
this.pause = function() {
if (!this.paused && this.playing) {
remove(this);
this.paused = true;
this._pST = time.now();
if (this._pC !== null) {
this._pC.call();
}
this._pauseTime = time.now();
if (this.options.pause) { this.options.pause.call(); }
}
return this;
};
@ -605,88 +672,18 @@
this.paused = false;
scrollOut.call(this);
if (this._stC !== null) {
this._stC.call();
}
if (this.options.stop) { this.options.stop.call(); }
this.stopChainedTweens();
close.call(this);
}
return this;
};
this.chain = function () { this._cT = arguments; return this; };
this.chain = function () { this.options.chain = arguments; return this; };
this.stopChainedTweens = function () {
for (var i = 0, ctl =this._cT.length; i < ctl; i++) {
this._cT[i].stop();
for (var i = 0, ctl =this.options.chain.length; i < ctl; i++) {
this.options.chain[i].stop();
}
};
this.getStartValues = function () { // stack transform props for .to() chains
var startValues = {}, cs = getInlineStyle(this._el,'transform'),
deg = ['rotate','skew'], ax = ['X','Y','Z'];
for (var p in _vS){
if ( _tf.indexOf(p) !== -1 ) {
var r2d = (/(rotate|translate|scale)$/.test(p));
if ( /translate/.test(p) && p !== 'translate' ) {
startValues['translate3d'] = cs['translate3d'] || _d[p];
} else if ( r2d ) { // 2d transforms
startValues[p] = cs[p] || _d[p];
} else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
for (var d=0; d<2; d++) {
for (var a = 0; a<3; a++) {
var s = deg[d]+ax[a];
if (_tf.indexOf(s) !== -1 && (s in _vS) ) { startValues[s] = cs[s] || _d[s]; }
}
}
}
} else {
if ( _sc.indexOf(p) === -1 ) {
if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
var co = getCurrentStyle(this._el,'filter');
startValues['opacity'] = typeof co === 'number' ? co : _d['opacity'];
} else {
if ( _all.indexOf(p) !== -1 ) {
startValues[p] = getCurrentStyle(this._el,p) || d[p];
} else { // plugins register here
startValues[p] = p in prepareStart ? prepareStart[p](this._el,p,_vS[p]) : 0;
}
}
} else {
startValues[p] = (this._el === null || this._el === undefined) ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop;
}
}
}
for ( var p in cs ){ // also add to _vS values from previous tweens
if ( _tf.indexOf(p) !== -1 && (!( p in _vS )) ) {
startValues[p] = cs[p] || _d[p];
}
}
this._vS = {};
this._vS = preparePropertiesObject(startValues,this._el);
if ( 'transform' in this._vE ){ // stack transform
var transform = 'transform';
for ( var sp in this._vS['transform']) {
if (!(sp in this._vE[transform])) { this._vE[transform][sp] = {}; }
for ( var spp in this._vS[transform][sp] ) { // 3rd level
if ( this._vS[transform][sp][spp].value !== undefined ) {
if (!(spp in this._vE[transform][sp])) { this._vE[transform][sp][spp] = {}; }
for ( var sppp in this._vS[transform][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d
if ( !(sppp in this._vE[transform][sp][spp])) {
this._vE[transform][sp][spp][sppp] = this._vS[transform][sp][spp][sppp]; // sppp = unit | value
}
}
}
}
if ( 'value' in this._vS[transform][sp] && (!('value' in this._vE[transform][sp])) ) { // 2nd level
for ( var spp1 in this._vS[transform][sp] ) { // scale
if (!(spp1 in this._vE[transform][sp])) {
this._vE[transform][sp][spp1] = this._vS[transform][sp][spp1]; // spp = unit | value
}
}
}
}
}
}
},
// the multi elements Tween constructs
@ -716,22 +713,22 @@
},
stop : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].stop(); } return this; },
pause : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].pause(); } return this; },
chain : function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; },
chain : function(){ this.tweens[this.tweens.length-1].options.chain = arguments; return this; },
play : function(){ for ( var i = 0, tl = this.tweens.length; i < tl; i++ ) { this.tweens[i].play(); } return this; },
resume : function() {return this.play()}
},
// main methods
to = function (el, to, o) {
var _el = selector(el),
_vS = to, _vE = preparePropertiesObject(to,_el); o = o || {}; o.rpr = true;
return new Tween(_el, _vS, _vE, o);
var _el = selector(el); o = o || {}; o.rpr = true;
return new Tween(_el, to, to, o);
},
fromTo = function (el, f, to, o) {
var _el = selector(el), _vS = preparePropertiesObject(f,_el), _vE = preparePropertiesObject(to,_el); o = o || {};
var tw = new Tween(_el, _vS, _vE, o); K.svg && K.svq(tw); // on init we process the SVG paths
var _el = selector(el); o = o || {};
var tw = new Tween(_el, f, to, o); K.svg && K.svq(tw); // on init we process the SVG paths
return tw;
},
// multiple elements tweening
allTo = function (els, to, o) {
var _els = selector(els,true);
@ -743,9 +740,9 @@
};
return K = { // export core methods to public for plugins
property: property, getPrefix: getPrefix, selector: selector, pe : processEasing, // utils
property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
pp: parseProperty, prS: prepareStart, //Tween : Tween, // property parsing & preparation | Tween
truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, gCS: getCurrentStyle, // property parsing
parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, // Tween : Tween, // property parsing & preparation | Tween | crossCheck
truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing
};
}));

7
package.json
View file

@ -1,7 +1,7 @@
{
"name": "kute.js",
"version": "1.5.96",
"description": "A minimal Native Javascript animation engine.",
"version": "1.5.97",
"description": "Complete Native Javascript animation engine.",
"main": "kute.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
@ -13,6 +13,9 @@
},
"keywords": [
"kute.js",
"svg morph",
"svg transform",
"tweening engine",
"animation engine",
"javascript animation engine",
"javascript animation",