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

Browse source
This commit is contained in:
thednp 2016-09-22 16:20:30 +03:00
parent 576ce620df
commit c83fbc8862
24 changed files with 35 additions and 2174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
build.js
View file

@ -6,13 +6,13 @@
var fs = require('fs');
var path = require('path');
var uglify = require('uglify-js');
console.log('Minified:');
console.log('Minifying..');
// Helper Functions:
function minify(srcPath, writePath) {
fs.writeFile(writePath, (uglify.minify(srcPath).code + '\n'), function (err) {
if (err) return handleError(err);
console.log(srcPath);
console.log(srcPath+' is done.');
});
}
function handleError(err) {
@ -29,3 +29,13 @@ 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');

2
demo/about.html
View file

@ -173,7 +173,7 @@
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>

2
demo/api.html
View file

@ -253,7 +253,7 @@ tween2.chain(tweensCollection2.tweens);
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

4
demo/attr.html
View file

@ -176,8 +176,8 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-attr.js"></script> <!-- KUTE.js Attributes Plugin -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-attr.min.js"></script> <!-- KUTE.js Attributes Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/attr.js"></script> <!-- css plugin examples -->
</body>

4
demo/css.html
View file

@ -225,8 +225,8 @@ KUTE.to('selector1',{outlineColor:'#069'}).start();
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.min.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/css.js"></script> <!-- css plugin examples -->
</body>

6
demo/easing.html
View file

@ -323,9 +323,9 @@ easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]}
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-bezier.js"></script> <!-- KUTE.js Bezier Easing -->
<script src="./src/kute-physics.js"></script> <!-- KUTE.js Physics Easing -->
<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/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/easing.js"></script> <!-- examples stuff -->
</body>

4
demo/examples.html
View file

@ -489,9 +489,7 @@ var myMultiTween2 = KUTE.allFromTo(
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-bezier.js"></script> <!-- KUTE.js Bezier Easing -->
<script src="./src/kute-physics.js"></script> <!-- KUTE.js Physics Easing -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/examples.js"></script> <!-- examples stuff -->
</body>

2
demo/extend.html
View file

@ -351,7 +351,7 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<script src="./assets/js/kute-bs.js"></script> <!-- the boxShadow plugin -->
<script src="./assets/js/extend.js"></script> <!-- examples with boxShadow plugin -->

2
demo/features.html
View file

@ -167,7 +167,7 @@
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

6
demo/index.html
View file

@ -209,9 +209,9 @@
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./src/kute-text.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.min.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./src/kute-text.min.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<script src="./assets/js/home.js"></script> <!-- some stuff -->
</body>

2
demo/options.html
View file

@ -173,7 +173,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

2
demo/performance.html
View file

@ -124,7 +124,7 @@
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="./assets/js/tween.min.js"></script>
<script src="./src/kute.js"></script>
<script src="./src/kute.min.js"></script>
<script src="./assets/js/perf.js"></script>
<!--<![endif]-->
</body>

2
demo/properties.html
View file

@ -236,7 +236,7 @@
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

78
demo/src/kute-attr.js
View file

@ -1,78 +0,0 @@
/* KUTE.js - The Light Tweening Engine
* package - Attributes Plugin
* desc - enables animation for any numeric presentation attribute
* by dnp_theme
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
// Browser globals
factory(KUTE);
} else {
throw new Error("Attributes Plugin require KUTE.js.");
}
}( function (KUTE) {
'use strict';
var K = window.KUTE, DOM = K.dom, prepareStart = K.prS, parseProperty = K.pp, unit = K.Interpolate.unit, number = K.Interpolate.number, atts,
getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
replaceUppercase = function(a) {
return /[A-Z]/g.test(a) ? a.replace(a.match(/[A-Z]/g)[0],'-'+a.match(/[A-Z]/g)[0].toLowerCase()) : a;
};
prepareStart['attr'] = function(el,p,v){
var f = {};
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] = _v || (/opacity/i.test(a) ? 1 : 0);
}
return f;
};
// 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) {
for ( var o in b ){
DOM.attributes[o](l,o,a[o],b[o],v);
}
}
atts = DOM.attributes = {}
}
var ats = {}, p;
for ( p in o ) {
var prop = replaceUppercase(p), cv = getCurrentValue(l,prop.replace(/_+[a-z]+/,''));
if ( /(%|[a-z]+)$/.test(o[p]) || /(%|[a-z]+)$/.test(cv) ) {
var u = K.truD(cv).u || K.truD(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) );
}
}
ats[p+s] = K.truD(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));
}
}
ats[p] = parseFloat(o[p]);
}
}
return ats;
}
}));

178
demo/src/kute-bezier.js
View file

@ -1,178 +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 (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
// Browser globals
window.KUTE.Ease = window.KUTE.Ease || factory(KUTE);
} else {
throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");
}
}( function (KUTE) {
'use strict';
var E = E || {};
E.Bezier = function(mX1, mY1, mX2, mY2) {
return _bz.pB(mX1, mY1, mX2, mY2);
};
var _bz = E.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 window; // 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.r = {};
_bz.pB = function (mX1, mY1, mX2, mY2) {
this._p = false; var self = this;
_bz.r = 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);
};
return _bz.r;
};
// 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);
};
// 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"],
E.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
E.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
E.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
E.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
E.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
E.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
E.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
E.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
E.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
E.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
E.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
E.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
E.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
E.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
E.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
E.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
E.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
E.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
E.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
E.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
E.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
E.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
E.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
E.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
E.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
E.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
E.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
E.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
E.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
E.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
return E;
}));

163
demo/src/kute-css.js
View file

@ -1,163 +0,0 @@
/* KUTE.js - The Light Tweening Engine
* package CSS Plugin
* by dnp_theme
* Licensed under MIT-License
*/
(function(factory){
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if(typeof window.KUTE != "undefined") {
factory(KUTE);
} else {
throw new Error("CSS Plugin require KUTE.js.")
}
})(function(KUTE){
'use strict';
var K = window.KUTE, p, DOM = K.dom, parseProperty = K.pp, prepareStart = K.prS, getComputedStyle = K.gCS,
_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 = K.Interpolate.number, unit = K.Interpolate.unit, color = K.Interpolate.color,
_d = _d || {}; //all properties default values
//populate default values object
for ( var i=0; i< al; i++ ){
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 ( _mg.indexOf(p) !== -1 ) {
_d[p] = 0;
} else if ( _bg.indexOf(p) !== -1 ){
_d[p] = [50,50];
} else if ( p === 'clip' ){
_d[p] = [0,0,0,0];
}
}
// create prepare/process/render functions for additional colors properties
for (var i = 0, l = _cls.length; i<l; i++) {
p = _cls[i];
parseProperty[p] = 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);
};
}
return parseProperty.cls(p,v);
};
prepareStart[p] = function(el,p,v){
return getComputedStyle(el,p) || _d[p];
};
}
// create prepare/process/render functions for additional box model properties
for (var i = 0, l = _mg.length; i<l; i++) {
p = _mg[i];
parseProperty[p] = function(p,v){
if (!(p in DOM)){
DOM[p] = function(l,p,a,b,v){
l.style[p] = unit(a.value,b.value,b.unit,v);
}
}
return parseProperty.box(p,v);
};
prepareStart[p] = function(el,p,v){
return getComputedStyle(el,p) || _d[p];
};
}
//create prepare/process/render functions for radius properties
for (var i = 0, l = _rd.length; i<l; i++) {
p = _rd[i];
parseProperty[p] = function(p,v){
if ( (!(p in DOM)) ) {
if (p === 'borderRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_br] = unit(a.value,b.value,b.unit,v);
}
} else if (p === 'borderTopLeftRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_brtl] = unit(a.value,b.value,b.unit,v);
}
} else if (p === 'borderTopRightRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_brtr] = unit(a.value,b.value,b.unit,v);
}
} else if (p === 'borderBottomLeftRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_brbl] = unit(a.value,b.value,b.unit,v);
}
} else if (p === 'borderBottomRightRadius') {
DOM[p] = function(l,p,a,b,v){
l.style[_brbr] = unit(a.value,b.value,b.unit,v);
}
}
}
return parseProperty.box(p,v);
};
prepareStart[p] = function(el,p,v){
return getComputedStyle(el,p) || _d[p];
};
}
// clip
parseProperty['clip'] = function(p,v){
if ( !(p in DOM) ) {
DOM[p] = function(l,p,a,b,v) {
var h = 0, cl = [];
for (h;h<4;h++){
var c1 = a[h].v, c2 = b[h].v, cu = b[h].u || 'px';
cl[h] = unit(c1,c2,cu,v);
}
l.style[p] = 'rect('+cl+')';
};
}
if ( v instanceof Array ){
return [ K.truD(v[0]), K.truD(v[1]), K.truD(v[2]), K.truD(v[3]) ];
} else {
var ci = v.replace(/rect|\(|\)/g,'');
ci = /\,/g.test(ci) ? ci.split(/\,/g) : ci.split(/\s/g);
return [ K.truD(ci[0]), K.truD(ci[1]), K.truD(ci[2]), K.truD(ci[3]) ];
}
};
prepareStart['clip'] = function(el,p,v){
var c = getComputedStyle(el,p), w = getComputedStyle(el,'width'), h = getComputedStyle(el,'height');
return !/rect/.test(c) ? [0, w, h, 0] : c;
};
// background position
parseProperty['backgroundPosition'] = function(p,v) {
if ( !(p in DOM) ) {
DOM[p] = function(l,p,a,b,v) {
l.style[p] = unit(a.x.v,b.x.v,'%',v) + ' ' + unit(a.y.v,b.y.v,'%',v);
};
}
if ( v instanceof Array ){
return { x: K.truD(v[0])||{ v: 50, u: '%' }, y: K.truD(v[1])||{ v: 50, u: '%' } };
} else {
var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50), xp, yp;
posxy = /\,/g.test(posxy) ? posxy.split(/\,/g) : posxy.split(/\s/g); posxy = posxy.length === 2 ? posxy : [posxy[0],50];
xp = K.truD(posxy[0]); yp = K.truD(posxy[1]);
return { x: xp, y: yp };
}
}
prepareStart['backgroundPosition'] = function(el,p,v){
return getComputedStyle(el,p) || _d[p];
}
return this;
});

49
demo/src/kute-jquery.js
View file

@ -1,49 +0,0 @@
/* KUTE.js - The Light Tweening Engine
* package jQuery Plugin
* by dnp_theme
* Licensed under MIT-License
*/
(function(factory){
// We need to require the root KUTE and jQuery.
if (typeof define === 'function' && define.amd) {
define(["./kute.js", "jquery"], function(KUTE, $){
factory($, KUTE);
return KUTE;
});
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
var $ = require("jquery");
// Export the modified one. Not really required, but convenient.
module.exports = factory($, KUTE);
} else if (typeof window.KUTE !== "undefined" && (typeof window.$ !== 'undefined' || typeof window.jQuery !== 'undefined' ) ) {
// jQuery always has two ways of existing... Find one, and pass.
var $ = window.jQuery || window.$, KUTE = window.KUTE;
$.fn.KUTE = factory($, KUTE);
} else {
throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");
}
})(function($, KUTE) {
'use strict';
var $K = function( method, start, end, ops ) { // method can be fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length;
for (i=0;i<l;i++){
var mt = this[i][method];
if ( typeof mt === 'function' ) {
mt.apply(this[i]);
}
if ( method === 'to' ) {
tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
} else if ( method === 'fromTo' || method === 'Animate' ) {
tws.push( new KUTE[method]( this[i], start, end, ops ) );
} else if ( method === 'chain' ) {
this[i].chain.apply(this[i],start);
}
}
return tws;
};
return $K;
});

322
demo/src/kute-physics.js
View file

@ -1,322 +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(factory){
// Obtain a reference to the base KUTE.
// Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if(typeof window.KUTE != "undefined") {
window.KUTE.Physics = window.KUTE.Physics || factory(KUTE);
} else {
throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.")
}
})(function(KUTE){
'use strict';
var P = P || {}, _hPI = Math.PI / 2;
// spring easing
P.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;
_kps.run = 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));
};
return _kps.run;
};
var _kps = P.spring.prototype;
_kps.run = {};
_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 = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300) / 20),
f = Math.pow(20, (options.friction || 200) / 100);
_kpo.run = function(t) {
var At = Math.pow(f / 10, -t) * (1 - t),
angle = fq * t * 1 + _hPI;
return At * Math.cos(angle);
};
return _kpo.run;
};
var _kpo = P.bounce.prototype;
_kpo.run = {};
// gravity
P.gravity = function(options) {
var bounciness, curves, elasticity, gravity, initialForce;
options = options || {};
bounciness = ( options.bounciness || 400 ) / 1250;
elasticity = ( options.elasticity || 200 ) / 1000;
initialForce = options.initialForce || false;
gravity = 100;
curves = [];
_kpg.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) {
_kpg.L = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + _kpg.L * bounciness,
H: curve.H * bounciness * bounciness
};
}
return curve.b;
})();
(function() {
var L2, b, curve, _results;
b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
curves.push(curve);
L2 = _kpg.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;
})();
_kpg.fn = 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, _kpg.L);
}
return v;
};
return _kpg.fn;
};
var _kpg = P.gravity.prototype;
_kpg.L = {};
_kpg.fn = {};
_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 = function(o) {
var ops = o || {};
ops.initialForce = true;
return P.gravity(ops);
};
// multi point bezier
P.bezier = 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;
})();
_kpb.run = function(t) {
if (t === 0) {
return 0;
} else if (t === 1) {
return 1;
} else {
return _kpb.yForX(t, Bs, returnsToSelf);
}
};
return _kpb.run;
};
var _kpb = P.bezier.prototype;
_kpb.B2 = {};
_kpb.run = {};
_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;
};
P.physicsInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ 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 } ] } ] });
};
P.physicsIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
};
P.physicsOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
};
P.physicsBackOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
};
P.physicsBackIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
};
P.physicsBackInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ 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;
});

507
demo/src/kute-svg.js
View file

@ -1,507 +0,0 @@
/* KUTE.js - The Light Tweening Engine
* package - SVG Plugin
* desc - draw strokes, morph paths and SVG color props
* by dnp_theme
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
// Browser globals
window.KUTE.svg = window.KUTE.svg || factory(KUTE);
} else {
throw new Error("SVG Plugin require KUTE.js.");
}
}( function (KUTE) {
'use strict';
var K = window.KUTE, p, DOM = K.dom, parseProperty = K.pp, prepareStart = K.prS, getComputedStyle = K.gCS,
_isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
_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)
pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
// interpolate functions
number = K.Interpolate.number, color = K.Interpolate.color,
array = K.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 = K.Interpolate.coords = function(a,b,l,ll,o,v) { // array1, array2, array2.length, coordinates.length, joiner, progress for SVG stuff
var s = [], i;
for(i=0;i<l;i++) { s.push( array( a[i],b[i],ll,v ) ); }
return s.join(o);
};
if (_isIE&&_isIE<9) {return;} // return if SVG API is not supported
// SVG MORPH
var getSegments = function(s,e,r){ // getSegments returns an array of points based on a sample size morphPrecision
var s1 = [], e1 = [], le1 = s.getTotalLength(), le2 = e.getTotalLength(), ml = Math.max(le1,le2),
d = r, ar = ml / r, j = 0, sl = ar*r; // sl = sample length
while ( (j += r) < sl ) { // populate the points arrays based on morphPrecision as sample size
s1.push( [s.getPointAtLength(j).x, s.getPointAtLength(j).y]);
e1.push( [e.getPointAtLength(j).x, e.getPointAtLength(j).y]);
}
return [s1,e1];
},
getClosestPoint = function(p,t,s){ // getClosestPoint for polygon paths it returns a close point from the original path (length,pointAtLength,smallest); // intervalLength
var x, y, a = [], l = s.length, dx, nx, pr;
for (i=0; i<l; i++){
x = Math.abs(s[i][0] - t.x);
y = Math.abs(s[i][1] - t.y);
a.push( Math.sqrt( x * x + y * y ) );
}
dx = a.indexOf(Math.min.apply(null,a));
pr = !!s[dx-1] ? dx-1 : l-1;
nx = !!s[dx+1] ? dx+1 : 0;
return Math.abs(s[pr][0] - t.x) < p && Math.abs(s[pr][1] - t.y) < p ? s[pr]
: Math.abs(s[nx][0] - t.x) < p && Math.abs(s[nx][1] - t.y) < p ? s[nx]
: Math.abs(s[dx][0] - t.x) < p && Math.abs(s[dx][1] - t.y) < p ? s[dx]
: [t.x,t.y];
},
getBestIndex = function(s,e){ // getBestIndex for shape rotation
var s1 = clone(s), e1 = clone(e), d = [], i, l = e.length, t, ax, ay;
for (i=0; i<l; i++){
t = e1.splice(i,l-i); e1 = t.concat(e1);
ax = Math.abs(s1[i][0] - e1[i][0]);
ay = Math.abs(s1[i][1] - e1[i][1]);
d.push( Math.sqrt( ax * ax + ay * ay ) );
e1 = []; e1 = clone(e); t = null;
}
return d.indexOf(Math.min.apply(null,d));
},
pathToAbsolute = function(p) { // simple pathToAbsolute for polygons | this is still BETA / a work in progress
var np = p.match(pathReg), wp = [], l = np.length, s, c, r, x = 0, y = 0;
for (var i = 0; i<l; i++){
np[i] = np[i]; c = np[i][0]; r = new RegExp(c+'[^\\d|\\-]*','i');
np[i] = np[i].replace(/(^|[^,])\s*-/g, '$1,-').replace(/(\s+\,|\s|\,)/g,',').replace(r,'').split(',');
np[i][0] = parseFloat(np[i][0]);
np[i][1] = parseFloat(np[i][1]);
if (i === 0) { x+=np[i][0]; y +=np[i][1]; }
else {
x = np[i-1][0];
y = np[i-1][1];
if (/l/i.test(c)) {
np[i][0] = c === 'l' ? np[i][0] + x : np[i][0];
np[i][1] = c === 'l' ? np[i][1] + y : np[i][1];
} else if (/h/i.test(c)) {
np[i][0] = c === 'h' ? np[i][0] + x : np[i][0];
np[i][1] = y;
} else if (/v/i.test(c)) {
np[i][0] = x;
np[i][1] = c === 'v' ? np[i][0] + y : np[i][0];
}
}
}
return np;
},
getOnePath = function(p){ return p.split(/z/i).shift() + 'z'; }, // getOnePath, first path only
createPath = function (p){ // createPath
var c = document.createElementNS(ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p;
c.setAttribute('d',d); return c;
},
forcePath = function(p){ // forcePath for glyph elements
if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future
var c = createPath(p); p.parentNode.appendChild(c); return c;
}
return p;
},
clone = function(a) {
var copy;
if (a instanceof Array) {
copy = [];
for (var i = 0, len = a.length; i < len; i++) {
copy[i] = clone(a[i]);
}
return copy;
}
return a;
},
getPath = function(e){ // get path d attribute or create a path from string value
var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null;
if ( el && /path|glyph/.test(el.tagName) ) {
p.e = forcePath(el);
p.o = el.getAttribute('d');
} else if (!el && /[a-z][^a-z]*/ig.test(e)) { // maybe it's a string path already
p.e = createPath(e.trim());
p.o = e;
}
return p;
},
showCircles = 1,
S = K.svg = {
showStartingPoints : function(s,e,v){ // showPoints helper function to visualize the points on the path
if (showCircles){
var c, a = arguments, cl, p, l;
for (var i=0; i<2; i++){
p = a[i]; l = p.length; cl = i=== 0 ? { f: 'DeepPink', o: 'HotPink' } : { f: 'Lime', o: 'LimeGreen' };
for (var j=0; j<l; j++) {
c = document.createElementNS(ns,'circle');
c.setAttribute('cx',p[j][0]); c.setAttribute('cy',p[j][1]);
c.setAttribute('r', j===0 ? 20 : 10 ); c.setAttribute('fill', j===0 ? cl.f : cl.o);
if (this._isp) { v.appendChild(c); } else if (!this._isp && j===0 ) { v.appendChild(c);}
}
}
showCircles = 0; c = null;
}
},
_pathCross : function(s,e,svg){ // pathCross
var s1, e1, arr, idx, arL, sm, lg, smp, lgp, nsm = [], sml, cl = [], len, tl, cs;
if (!this._isp) {
s = createPath(s); e = createPath(e);
arr = getSegments(s,e,this._mpr);
s1 = arr[0]; e1 = arr[1]; arL = e1.length;
} else {
s = pathToAbsolute(s); e = pathToAbsolute(e);
if ( s.length !== e.length ){
arL = Math.max(s.length,e.length);
if ( arL === e.length) { sm = s; lg = e; } else { sm = e; lg = s; }
sml = sm.length;
smp = createPath('M'+sm.join('L')+'z'); len = smp.getTotalLength() / arL;
for (var i=0; i<arL; i++){
tl = smp.getPointAtLength(len*i);
cs = getClosestPoint(len,tl,sm);
nsm.push( [ cs[0], cs[1] ] );
}
if (arL === e.length) { e1 = lg; s1 = nsm; } else { s1 = lg; e1 = nsm; }
} else {
s1 = s; e1 = e;
}
}
// reverse arrays
if (this._rv1) { s1.reverse(); }
if (this._rv2) { e1.reverse(); }
// determine index for best/minimum distance between points
if (this._smi) { idx = getBestIndex(s1,e1); }
// shift second array to for smallest tween distance
if (this._midx) {
var e11 = e1.splice(this._midx,arL-this._midx);
e1 = e11.concat(e1);
}
// the console.log helper utility
if (this._smi) {
// also show the points
this.showStartingPoints(s1,e1,svg);
var mpi = this._isp ? 'the polygon with the most points.\n' : (this._mpr === 25 ? 'the default' : 'your') +' morphPrecision value of '+this._mpr+'.\n';
console.log( 'KUTE.js Path Morph Log\nThe morph used ' + arL + ' points to draw both paths based on '+mpi
+ (this._midx ? 'You\'ve configured the morphIndex to ' + this._midx + ' while the recommended is ' + idx+ '.\n' : 'You may also consider a morphIndex for the second path. Currently the best index seems to be ' + idx + '.\n')
+ (
!this._rv1 && !this._rv2 ? 'If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.' :
'You\'ve chosen that the first path to have ' + ( this._rv1 ? 'REVERSED draw direction, ' : 'UNCHANGED draw direction, ') + 'while second path is to be ' + (this._rv2 ? 'REVERSED.\n' : 'UNCHANGED.\n')
)
);
}
s = e = null;
return [s1,e1]
},
pathCross : function(w){ // pathCross
// path tween options
this._mpr = w._ops.morphPrecision || 15;
this._midx = w._ops.morphIndex;
this._smi = w._ops.showMorphInfo;
this._rv1 = w._ops.reverseFirstPath;
this._rv2 = w._ops.reverseSecondPath;
var p1 = getOnePath(w._vS.path.o), p2 = getOnePath(w._vE.path.o), arr;
this._isp = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // both shapes are polygons
arr = this._pathCross(p1,p2,w._el.ownerSVGElement);
// arr = this._pathCross(p1,p2,w._el.parentNode);
w._vS.path.d = arr[0];
w._vE.path.d = arr[1];
}
};
// a shortHand pathCross && SVG transform stack
K.svq = function(w){ if ( w._vE.path ) S.pathCross(w); if ( w._vE.svgTransform ) stackTransform(w); }
// process path object and also register the render function
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' );
}
}
return getPath(o);
};
prepareStart['path'] = function(el,p,v){
return el.getAttribute('d');
};
// SVG DRAW
var percent = function(v,l){ return parseFloat(v) / 100 * l;}, // percent
// SVG DRAW UTILITITES
// http://stackoverflow.com/a/30376660
getRectLength = function(el){ // getRectLength - return the length of a Rect
var w = el.getAttribute('width');
var h = el.getAttribute('height');
return (w*2)+(h*2);
},
getPolyLength = function(el){ // getPolygonLength / getPolylineLength - return the length of the Polygon / Polyline
var points = el.getAttribute('points').split(' '), len = 0;
if (points.length > 1) {
var coord = function (p) {
var c = p.split(',');
if (c.length != 2) { return; } // return undefined
if (isNaN(c[0]) || isNaN(c[1])) { return; }
return [parseFloat(c[0]), parseFloat(c[1])];
};
var dist = function (c1, c2) {
if (c1 != undefined && c2 != undefined) {
return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2));
}
return 0;
};
if (points.length > 2) {
for (var i=0; i<points.length-1; i++) {
len += dist(coord(points[i]), coord(points[i+1]));
}
}
len += dist(coord(points[0]), coord(points[points.length-1]));
}
return len;
},
getLineLength = function(el){ // getLineLength - return the length of the line
var x1 = el.getAttribute('x1');
var x2 = el.getAttribute('x2');
var y1 = el.getAttribute('y1');
var y2 = el.getAttribute('y2');
return Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2));
},
getCircleLength = function(el){ // getCircleLength - return the length of the circle
var r = el.getAttribute('r');
return 2 * Math.PI * r;
},
getEllipseLength = function(el) { // getEllipseLength - returns the length of an ellipse
var rx = el.getAttribute('rx'), ry = el.getAttribute('ry'),
len = 2*rx, wid = 2*ry;
return ((Math.sqrt(.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2;
},
getTotalLength = function(el){ // getLength - returns the result of any of the below functions
if (/rect/.test(el.tagName)) {
return getRectLength(el);
} else if (/circle/.test(el.tagName)) {
return getCircleLength(el);
} else if (/ellipse/.test(el.tagName)) {
return getEllipseLength(el);
} else if (/polygon|polyline/.test(el.tagName)) {
return getPolyLength(el);
} else if (/line/.test(el.tagName)) {
return getLineLength(el);
}
},
getDraw = function(e,v){
var l = /path|glyph/.test(e.tagName) ? e.getTotalLength() : getTotalLength(e), start, end, d, o;
if ( v instanceof Object ) {
return v;
} else if (typeof v === 'string') {
v = v.split(/\,|\s/);
start = /%/.test(v[0]) ? percent(v[0].trim(),l) : parseFloat(v[0]);
end = /%/.test(v[1]) ? percent(v[1].trim(),l) : parseFloat(v[1]);
} else if (typeof v === 'undefined') {
o = parseFloat(getComputedStyle(e,'stroke-dashoffset'));
d = getComputedStyle(e,'stroke-dasharray').split(/\,/);
start = 0-o;
end = parseFloat(d[0]) + start || l;
}
return { s: start, e: end, l: l }
};
parseProperty['draw'] = function(a,o,f){ // register the draw property
if (!('draw' in DOM)) {
DOM['draw'] = function(l,p,a,b,v){
var ll = a.l, s = number(a.s,b.s,v), e = number(a.e,b.e,v), o = 0 - s;
l.style.strokeDashoffset = o +'px';
l.style.strokeDasharray = e+o<1 ? '0px, ' + ll + 'px' : (e+o) + 'px, ' + ll + 'px';
}
}
return getDraw(f,o);
}
prepareStart['draw'] = function(el,p,v){
return getDraw(el);
}
// SVG CSS Color Properties
for ( var i = 0, l = _cls.length; i< l; i++) {
p = _cls[i];
parseProperty[p] = 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);
};
}
return K.truC(v);
}
prepareStart[p] = function(el,p,v){
return getComputedStyle(el,p) || 'rgba(0,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
p = _nm[i];
if (p === 'strokeWidth'){ // stroke can be unitless or unit | http://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg
parseProperty[p] = function(p,v){
if (!(p in DOM)) {
DOM[p] = function(l,p,a,b,v) {
var _u = _u || typeof b === 'number';
l.style[p] = !_u ? unit(a.value,b.value,b.unit,v) : number(a,b,v);
}
}
return /px|%|em|vh|vw/.test(v) ? parseProperty.box(p,v) : parseFloat(v);
}
} else {
parseProperty[p] = function(p,v){
if (!(p in DOM)) {
DOM[p] = function(l,p,a,b,v) {
l.style[p] = number(a,b,v);
}
}
return parseFloat(v);
}
}
prepareStart[p] = function(el,p,v){
return getComputedStyle(el,p) || 0;
}
}
// SVG Transform
var parseTransform = function (a){ // helper function that turns transform value from string to object
var d = a && /\)/.test(a) ? a.split(')') : 'none', j, c ={}, p;
if (d instanceof Array) {
for (j=0; j<d.length; j++){
p = d[j].split('('); p[0] !== '' && (c[p[0].replace(/\s/,'')] = p[1] );
}
}
return c;
},
stackTransform = function (w){ // helper function that helps preserve current transform properties into the objects
var bb = w._el.getBBox(), ctr = parseTransform(w._el.getAttribute('transform')), r, t, i,
cx = bb.x + bb.width/2, cy = bb.y + bb.height/2;
for ( i in ctr ) { // populate the valuesStart
if (i === 'translate'){
t = ctr[i] instanceof Array ? ctr[i] : /\,|\s/.test(ctr[i]) ? ctr[i].split(/\,|\s/) : [ctr[i]*1,0];
w._vS.svgTransform[i] = [t[0] * 1||0, t[1] * 1||0];
} else if (i === 'scale'){
w._vS.svgTransform[i] = ctr[i] * 1||1;
} else if (i === 'rotate'){
r = ctr[i] instanceof Array ? ctr[i]
: /\s/.test(ctr[i]) ? [ctr[i].split(' ')[0]*1, ctr[i].split(' ')[1].split(',')[0]*1, ctr[i].split(' ')[1].split(',')[1]*1]
: [ctr[i]*1,cx,cy];
w._vS.svgTransform[i] = r;
} else if (/skew/.test(i)) {
w._vS.svgTransform[i] = ctr[i] * 1||0;
}
}
for (var i in w._vS.svgTransform) {
if (!(i in w._vE.svgTransform)) { // copy existing and unused properties to the valuesEnd
w._vE.svgTransform[i] = w._vS.svgTransform[i];
}
if (i === 'rotate' in w._vS.svgTransform && 'rotate' in w._vE.svgTransform){ // make sure to use the right transform origin when rotation is used
w._vE.svgTransform.rotate[1] = w._vS.svgTransform.rotate[1] = cx;
w._vE.svgTransform.rotate[2] = w._vS.svgTransform.rotate[2] = cy;
}
}
};
parseProperty['svgTransform'] = function(p,v,l){
// register the render function
if (!('svgTransform' in DOM)) {
DOM['svgTransform'] = function(l,p,a,b,v){
var tr = '', i;
for (i in b){
tr += i + '('; // start string
if ( i === 'translate'){ // translate
tr += (a[i][1] === b[i][1] && b[i][1] === 0 )
? number(a[i][0],b[i][0],v)
: number(a[i][0],b[i][0],v) + ' ' + number(a[i][1],b[i][1],v);
} else if ( i === 'rotate'){ // rotate
tr += number(a[i][0],b[i][0],v) + ' ';
tr += b[i][1] + ',' + b[i][2];
} else { // scale, skewX or skewY
tr += number(a[i],b[i],v);
}
tr += ') '; // end string
}
l.setAttribute('transform', tr.trim() );
}
}
// now prepare transform
var tf = {}, bb = l.getBBox(), cx = bb.x + bb.width/2, cy = bb.y + bb.height/2, r, cr, t, ct;
for ( i in v ) { // populate the valuesStart and / or valuesEnd
if (i === 'rotate'){
r = v[i] instanceof Array ? v[i]
: /\s/.test(v[i]) ? [v[i].split(' ')[0]*1, v[i].split(' ')[1].split(',')[0]*1, v[i].split(' ')[1].split(',')[1]*1]
: [v[i]*1,cx,cy];
tf[i] = r;
} else if (i === 'translate'){
t = v[i] instanceof Array ? v[i] : /\,|\s/.test(v[i]) ? v[i].split(/\,|\s/) : [v[i]*1,0];
tf[i] = [t[0] * 1||0, t[1] * 1||0];
} else if (i === 'scale'){
tf[i] = v[i] * 1||1;
} else if (/skew/.test(i)) {
tf[i] = v[i] * 1||0;
}
}
// try to adjust translation when scale is used, probably we should do the same when using skews, but I think it's a waste of time
// http://www.petercollingridge.co.uk/interactive-svg-components/pan-and-zoom-control
if ('scale' in tf) {
!('translate' in tf) && ( tf['translate'] = [0,0] ); // if no translate is found in current value or next value, we default to 0
tf['translate'][0] += (1-tf['scale']) * bb.width/2;
tf['translate'][1] += (1-tf['scale']) * bb.height/2;
// adjust rotation transform origin and translation when skews are used, to make the animation look exactly the same as if we were't using svgTransform
// http://stackoverflow.com/questions/39191054/how-to-compensate-translate-when-skewx-and-skewy-are-used-on-svg/39192565#39192565
if ('rotate' in tf) {
tf['rotate'][1] -= 'skewX' in tf ? Math.tan(tf['skewX']) * bb.height : 0;
tf['rotate'][2] -= 'skewY' in tf ? Math.tan(tf['skewY']) * bb.width : 0;
}
tf['translate'][0] += 'skewX' in tf ? Math.tan(tf['skewX']) * bb.height*2 : 0;
tf['translate'][1] += 'skewY' in tf ? Math.tan(tf['skewY']) * bb.width*2 : 0;
} // more variations here https://gist.github.com/thednp/0b93068e20adb84658b5840ead0a07f8
return tf;
}
// KUTE.prepareStart prepareStart[p](el,p,to[p])
// returns an obect with current transform attribute value
prepareStart['svgTransform'] = function(l,p,t) {
var tr = {}, i, ctr = parseTransform(l.getAttribute('transform'));
for (i in t) { tr[i] = i in ctr ? ctr[i] : (i==='scale'?1:0); } // find a value in current attribute value or add a default value
return tr;
}
return S;
}));

65
demo/src/kute-text.js
View file

@ -1,65 +0,0 @@
/* KUTE.js - The Light Tweening Engine
* package - KUTE.js Text Plugin
* desc - adds the tween numbers incremental and cool string writing/scrambling
* by dnp_theme & @dalisoft
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
var KUTE = require("./kute.js");
module.exports = factory();
} else if ( typeof window.KUTE !== 'undefined' ) {
factory();
} else {
throw new Error("Text-Plugin requires KUTE.js.");
}
}( function (KUTE) {
'use strict';
var K = window.KUTE, DOM = K.dom, prepareStart = K.prS,
parseProperty = K.pp, number = K.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
random = Math.random, floor = Math.floor, min = Math.min;
prepareStart['text'] = prepareStart['number'] = function(l,p,v){
return l.innerHTML;
}
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
: o.textChars ? o.textChars.split('') // textChars is a custom text
: _s, 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 ?
ix = a !== '' ? fi.substring(fi.length,floor(min(v * fi.length, fi.length))) : ''; // initial text, A value
tx = f.substring(0,floor(min(v * f.length, f.length))); // end text, B value
l.innerHTML = v < 1 ? tx + t + ix : b;
}
}
return v;
}
parseProperty['number'] = function(p,v,l) {
if ( !( 'number' in DOM ) ) {
DOM['number'] = function(l,p,a,b,v) {
l.innerHTML = parseInt( number(a, b, v));
}
}
return parseInt(v) || 0;
}
return this;
}));

784
demo/src/kute.js
View file

@ -1,784 +0,0 @@
/* KUTE.js - The Light Tweening Engine
* by dnp_theme
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define([], factory); // AMD. Register as an anonymous module.
} else if (typeof exports == 'object') {
module.exports = factory(); // Node, not strict CommonJS
} else {
// Browser globals
window.KUTE = window.KUTE || factory();
}
}( function () {
"use strict";
var K = K || {}, _tws = [], _t = null,
getPrefix = function() { //returns browser prefix
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } }
div = null;
},
property = function(p){ // returns prefixed property | property
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;
if (multi){
nl = typeof el === 'object' ? el : document.querySelectorAll(el);
} else {
nl = typeof el === 'object' ? el
: /^#/.test(el) ? document.getElementById(el.replace('#','')) : document.querySelector(el);
}
if (nl === null && el !== 'window') throw new TypeError('Element not found or incorrect selector: '+el);
return nl;
},
trueDimension = function (d,p) { //true dimension returns { v = value, u = unit }
var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length,
y = getU();
function getU() {
var u,i=0;
for (i;i<l;i++) { if ( typeof d === 'string' && d.indexOf(mu[i]) !== -1 ) u = mu[i]; }
u = u !== undefined ? u : (p ? 'deg' : 'px')
return u;
}
return { v: x, u: y };
},
trueColor = function (v) { // replace transparent and transform any color to rgba()/rgb()
var vrgb, y;
if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized
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]) };
} else {
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: y*1 };
}
}
if (/#/.test(v)) {
vrgb = hexToRGB(v); return { r: vrgb.r, g: vrgb.g, b: vrgb.b };
}
if (/transparent|none|initial|inherit/.test(v)) {
return { r: 0, g: 0, b: 0, a: 0 };
}
if (!/#|rgb/.test(v) ) { // maybe we can check for web safe colors
var h = document.getElementsByTagName('head')[0]; h.style.color = v; vrgb = window.getComputedStyle(h,null).color;
h.style.color = ''; return v !== vrgb ? trueColor(vrgb) : {r:0,g:0,b:0};
}
},
preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll
var data = document.body.getAttribute('data-tweening');
if (data && data === 'scroll') { e.preventDefault(); }
},
rgbToHex = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
},
hexToRGB = function (hex) {
var shr = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
hex = hex.replace(shr, function (m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
},
gIS = function(el,p) { // gIS = 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 cst = el.style.cssText,//the cssText
trsf = {}; //the transform object
// if we have any inline style in the cssText attribute, usually it has higher priority
var css = cst.replace(/\s/g,'').split(';'), i=0, csl = css.length;
for ( i; i<csl; i++ ){
if ( /transform/.test(css[i])) {
var tps = css[i].split(':')[1].split(')'), k=0, tpl = tps.length; //all transform properties
for ( k; k< tpl; k++){
var tp = tps[k].split('('); //each transform property
if ( tp[0] !== '' && _tf.indexOf(tp) ){
trsf[tp[0]] = /translate3d/.test(tp[0]) ? tp[1].split(',') : tp[1];
}
}
}
}
return trsf;
},
getComputedStyle = function (el,p) { // gCS = get style property for element from computedStyle for .to() method
var es = el.style, cs = window.getComputedStyle(el,null) || el.currentStyle, pp = property(p), //the computed style | prefixed property
s = es[p] && !/auto|initial|none|unset/.test(es[p]) ? es[p] : cs[pp]; // s the property style value
if ( p !== 'transform' && (pp in cs || pp in es) ) {
if ( s ){
if (pp==='filter') { // handle IE8 opacity
var si1 = parseInt(s.split('=')[1].replace(')','')), si = parseFloat(si1/100);
return si;
} else {
return s;
}
} else {
return _d[p];
}
}
},
processEasing = function (es) { //process easing
if ( typeof es === 'function') {
return es;
} else if ( typeof es === 'string' ) {
if ( /easing|linear/.test(es) ) {
return easing[es]; // regular Robert Penner Easing Functions
} else if ( /bezier/.test(es) ) {
var bz = es.replace(/bezier|\s|\(|\)/g,'').split(',');
return K.Ease.Bezier( bz[0]*1,bz[1]*1,bz[2]*1,bz[3]*1 ); //bezier easing
} else if ( /physics/.test(es) ) {
return K.Physics[es](); // predefined physics bezier based easing functions
} else {
return K.Ease[es](); // predefined bezier based easing functions
}
}
},
_tch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false, // support Touch?
_ev = _tch ? 'touchstart' : 'mousewheel', _evh = 'mouseenter', //events to prevent on scroll
_pfto = property('transformOrigin'), //assign preffix to DOM properties
_pfp = property('perspective'),
_pfo = property('perspectiveOrigin'),
_tr = property('transform'),
_raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function (c) { return setTimeout(c, 16) },
_caf = window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || function (c) { return clearTimeout(c) },
//true scroll container
_bd = document.body, _htm = document.getElementsByTagName('HTML')[0],
_sct = /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm,
_isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
_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
//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;
}
}
// main methods
var to = function (el, to, o) {
var _el = selector(el),
_vS = to, _vE = preparePropertiesObject(to, {}, _el)[0]; o = o || {}; o.rpr = true;
return new Tween(_el, _vS, _vE, o);
},
fromTo = function (el, f, to, o) {
var _el = selector(el), ft = preparePropertiesObject(f, to, _el), _vS = ft[0], _vE = ft[1]; o = o || {};
var tw = new Tween(_el, _vS, _vE, 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);
return new TweensTO(_els, to, o);
},
allFromTo = function (els, f, to, o) {
var _els = selector(els,true);
return new TweensFT(_els, f, to, o);
},
// KUTE.js INTERPOLATORS
number = function number(a,b,v) { // number1, number2, progress
a = +a; b -= a; return a + b * v;
},
unit = window.unit = function unit(a,b,u,v) { // number1, number2, unit, progress
a = +a; b -= a; return (a + b * v)+u;
},
color = function color(a,b,v,h){ // rgba1, rgba2, progress, convertToHex(true/false)
var _c = {}, c, n = number, rt = rgbToHex, 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 ? rt( _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;
},
// KUTE.js DOM update functions
DOM = {},
_tk = function _tk(t) {
var i = 0;
while ( i < _tws.length ) {
if ( _u(_tws[i],t) ) {
i++;
} else {
_tws.splice(i, 1);
}
}
_t = _raf(_tk);
},
_u = function _u(w,t) {
t = t || window.performance.now();
if (t < w._sT && w.playing && !w.paused) { return true; }
// element/node, method, (prefixed)property, startValue, endValue, progress
var p, e = Math.min(( t - w._sT ) / w._dr, 1); // calculate progress
for (p in w._vE){ DOM[p].call(this,w._el,p,w._vS[p],w._vE[p],w._e(e),w._ops); } //render the CSS update
if (w._uC) { w._uC.call(); } // fire the updateCallback
if (e === 1) {
if (w._r > 0) {
if ( w._r < 9999 ) { w._r--; } // we have to make it stop somewhere, infinity is too damn much
if (w._y) { w.reversed = !w.reversed; w.rvs(); } // handle yoyo
w._sT = (w._y && !w.reversed) ? t + w._rD : t; //set the right time for delay
return true;
} else {
if (w._cC) { w._cC.call(); }
w.scrollOut(); // unbind preventing scroll when scroll tween finished
// start animating chained tweens
var i = 0, ctl = w._cT.length;
for (i; i < ctl; i++) {
w._cT[i].start(w._sT + w._dr);
}
//stop ticking when finished
w.close();
return false;
}
}
return true;
},
// applies the transform origin and perspective
perspective = function (l,w) {
if ( w._to !== undefined ) { l.style[_pfto] = w._to; } // element transform origin
if ( w._ppo !== undefined ) { l.style[_pfo] = w._ppo; } // element perspective origin
if ( w._ppp !== undefined ) { l.parentNode.style[_pfp] = w._ppp + 'px'; } // parent perspective
if ( w._pppo !== undefined ) { l.parentNode.style[_pfo] = w._pppo; } // parent perspective origin
},
//more internals
getAll = function () { return _tws; },
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 () { _t && _caf(_t); _t = null; },
// process properties for _vE and _vS or one of them
preparePropertiesObject = function (e, s, l) {
var i, pl = arguments.length, _st = []; pl = pl > 2 ? 2 : pl;
for (i=0; i<pl; i++) {
var t = arguments[i], x, sk = {}, rt = {}, tl = {}, tr = {}; _st[i] = {};
for (x in t) {
if (_tf.indexOf(x) !== -1) { // transform object gets built here
if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
var ta = ['X', 'Y', 'Z'], f = 0; //coordinates // translate[x] = pp(x, t[x]);
for (f; f < 3; f++) {
var a = ta[f];
if ( /3d/.test(x) ) {
tl['translate' + a] = parseProperty.tf('translate' + a, t[x][f]);
} else {
tl['translate' + a] = ('translate' + a in t) ? parseProperty.tf('translate' + a, t['translate' + a]) : { value: 0, unit: 'px' };
}
}
tr['translate'] = tl;
} else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], r = 0,
rtp = ap === 'rotate' ? rt : sk;
for (r; r < 3; r++) {
var v = ra[r];
if ( t[ap+v] !== undefined && x !== 'skewZ' ) {
rtp[ap+v] = parseProperty.tf(ap+v, t[ap+v]);
}
}
tr[ap] = rtp;
} else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
tr[x] = parseProperty.tf(x, t[x]);
}
_st[i]['transform'] = tr;
} else if ( x !== 'transform') {
if ( _bm.indexOf(x) !== -1 ) {
_st[i][x] = parseProperty.box(x,t[x]);
} else if (_op.indexOf(x) !== -1 || _sc.indexOf(x) !== -1) {
_st[i][x] = parseProperty.unl(x,t[x]);
} else if (_cls.indexOf(x) !== -1) {
_st[i][x] = parseProperty.cls(x,t[x]);
} else if (x in K.pp) { _st[i][x] = K.pp[x](x,t[x],l); } // or any other property from css/ attr / svg / third party plugins
}
}
}
return _st;
},
// 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
if (!(p in DOM)){
DOM[p] = function(l,p,a,b,v){
l.style[p] = unit(a.value,b.value,b.unit,v);
}
}
return { value: trueDimension(v).v, unit: trueDimension(v).u };
},
tf : function(p,v){ // transform prop / value
if (!('transform' in DOM)) {
DOM['transform'] = function(l,p,a,b,v,o){
var _tS = '', tP, pp = pp || o.perspective && parseInt(o.perspective) !== 0 ? 'perspective('+parseInt(o.perspective)+'px) ' : false;
for (tP in b) {
var t1 = a[tP], t2 = b[tP];
if ( tP === 'translate' ) {
var tls = '', ts = {}, ax;
for (ax in t2){
var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px';
ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
}
tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
_tS = (_tS === '') ? tls : (tls + ' ' + _tS);
} else if ( tP === 'rotate' ) {
var rt = '', rS = {}, rx;
for ( rx in t2 ){
if ( t1[rx] ) {
var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg',
av = a1 + (a2 - a1) * v;
rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
}
}
rt = t2.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
_tS = (_tS === '') ? rt : (_tS + ' ' + rt);
} else if (tP==='skew') {
var sk = '', sS = {};
for ( var sx in t2 ){
if ( t1[sx] ) {
var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg',
sv = s1 + (s2 - s1) * v;
sS[sx] = sx + '(' + sv + su + ') ';
}
}
sk = (sS.skewX||'') + (sS.skewY||'');
_tS = (_tS === '') ? sk : (_tS + ' ' + sk);
} else if (tP === 'scale') {
var sc1 = t1.value, sc2 = t2.value,
s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';
_tS = (_tS === '') ? scS : (_tS + ' ' + scS);
}
}
l.style[_tr] = pp ? pp + _tS : _tS;
}
}
// process each transform property
if (p === 'translate3d') {
var t3d = v.split(',');
return {
translateX : { value: trueDimension(t3d[0]).v, unit: trueDimension(t3d[0]).u },
translateY : { value: trueDimension(t3d[1]).v, unit: trueDimension(t3d[1]).u },
translateZ : { value: trueDimension(t3d[2]).v, unit: trueDimension(t3d[2]).u }
};
} else if (/^translate(?:[XYZ])$/.test(p)) {
return { value: trueDimension(v).v, unit: (trueDimension(v).u||'px') };
} else if (/^rotate(?:[XYZ])$|skew(?:[XY])$/.test(p)) {
return { value: trueDimension(v,true).v, unit: (trueDimension(v,true).u||'deg') };
} else if (p === 'translate') {
var tv = typeof v === 'string' ? v.split(',') : v, t2d = {};
if (tv instanceof Array) {
t2d.x = { value: trueDimension(tv[0]).v, unit: trueDimension(tv[0]).u },
t2d.y = { value: trueDimension(tv[1]).v, unit: trueDimension(tv[1]).u }
} else {
t2d.x = { value: trueDimension(tv).v, unit: trueDimension(tv).u },
t2d.y = { value: 0, unit: 'px' }
}
return t2d;
} else if (p === 'rotate') {
var r2d = {};
r2d.z = { value: trueDimension(v,true).v, unit: (trueDimension(v,true).u||'deg') };
return r2d;
} else if (p === 'scale') {
return { value: parseFloat(v) }; // this must be parseFloat(v)
}
},
unl : 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) ? _sct : l;
el.scrollTop = number(a,b,v);
};
} else if (p === 'opacity') {
if (!(p in DOM)) {
if (_isIE8) {
DOM[p] = function(l,p,a,b,v) {
var st = "alpha(opacity=", ep = ')';
l.style.filter = st + (number(a,b,v) * 100) + ep;
};
} else {
DOM[p] = function(l,p,a,b,v) {
l.style.opacity = number(a,b,v);
};
}
}
}
return parseFloat(v);
},
cls : 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);
};
}
return trueColor(v);
}
},
prepareStart = {},
// core easing functions
easing = {}, _PI = Math.PI, _2PI = Math.PI * 2, _hPI = Math.PI / 2, _kea = 0.1, _kep = 0.4;
easing.linear = function (t) { return t; };
easing.easingSinusoidalIn = function(t) { return -Math.cos(t * _hPI) + 1; };
easing.easingSinusoidalOut = function(t) { return Math.sin(t * _hPI); };
easing.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(_PI * t) - 1); };
easing.easingQuadraticIn = function (t) { return t*t; };
easing.easingQuadraticOut = function (t) { return t*(2-t); };
easing.easingQuadraticInOut = function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; };
easing.easingCubicIn = function (t) { return t*t*t; };
easing.easingCubicOut = function (t) { return (--t)*t*t+1; };
easing.easingCubicInOut = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; };
easing.easingQuarticIn = function (t) { return t*t*t*t; };
easing.easingQuarticOut = function (t) { return 1-(--t)*t*t*t; };
easing.easingQuarticInOut = function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; };
easing.easingQuinticIn = function (t) { return t*t*t*t*t; };
easing.easingQuinticOut = function (t) { return 1+(--t)*t*t*t*t; };
easing.easingQuinticInOut = function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; };
easing.easingCircularIn = function(t) { return -(Math.sqrt(1 - (t * t)) - 1); };
easing.easingCircularOut = function(t) { return Math.sqrt(1 - (t = t - 1) * t); };
easing.easingCircularInOut = function(t) { return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1); };
easing.easingExponentialIn = function(t) { return Math.pow(2, 10 * (t - 1)) - 0.001; };
easing.easingExponentialOut = function(t) { return 1 - Math.pow(2, -10 * t); };
easing.easingExponentialInOut = function(t) { return (t *= 2) < 1 ? 0.5 * Math.pow(2, 10 * (t - 1)) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))); };
easing.easingBackIn = function(t) { var s = 1.70158; return t * t * ((s + 1) * t - s); };
easing.easingBackOut = function(t) { var s = 1.70158; return --t * t * ((s + 1) * t + s) + 1; };
easing.easingBackInOut = function(t) { var s = 1.70158 * 1.525; if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s)); return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2); };
easing.easingElasticIn = function(t) {
var s;
if ( t === 0 ) return 0; if ( t === 1 ) return 1;
if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI;
return - ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI / _kep ) );
};
easing.easingElasticOut = function(t) {
var s;
if ( t === 0 ) return 0; if ( t === 1 ) return 1;
if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI ;
return ( _kea * Math.pow( 2, - 10 * t) * Math.sin( ( t - s ) * _2PI / _kep ) + 1 );
};
easing.easingElasticInOut = function(t) {
var s;
if ( t === 0 ) return 0; if ( t === 1 ) return 1;
if ( !_kea || _kea < 1 ) { _kea = 1; s = _kep / 4; } else s = _kep * Math.asin( 1 / _kea ) / _2PI ;
if ( ( t *= 2 ) < 1 ) return - 0.5 * ( _kea * Math.pow( 2, 10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI / _kep ) );
return _kea * Math.pow( 2, -10 * ( t -= 1 ) ) * Math.sin( ( t - s ) * _2PI / _kep ) * 0.5 + 1;
};
easing.easingBounceIn = function(t) { return 1 - easing.easingBounceOut( 1 - t ); };
easing.easingBounceOut = function(t) {
if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * t; }
else if ( t < ( 2 / 2.75 ) ) { return 7.5625 * ( t -= ( 1.5 / 2.75 ) ) * t + 0.75; }
else if ( t < ( 2.5 / 2.75 ) ) { return 7.5625 * ( t -= ( 2.25 / 2.75 ) ) * t + 0.9375; }
else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
};
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;};
var start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
this.scrollIn();
perspective(this._el,this); // apply the perspective and transform origin
if ( this._rpr ) { this.stack(); } // on start we reprocess the valuesStart for TO() method
for ( var e in this._vE ) {
this._vSR[e] = this._vS[e];
}
// now it's a good time to start
add(this);
this.playing = true;
this.paused = false;
this._sCF = false;
this._sT = t || window.performance.now();
this._sT += this._dl;
if (!this._sCF) {
if (this._sC) { this._sC.call(); }
this._sCF = true;
}
if (!_t) _tk();
return this;
},
play = function () {
if (this.paused && this.playing) {
this.paused = false;
if (this._rC !== null) { this._rC.call(); }
this._sT += window.performance.now() - this._pST;
add(this);
if (!_t) _tk(); // restart ticking if stopped
}
return this;
},
// single Tween object construct
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
this.playing = false; // _isPlaying
this.reversed = false; // _reversed
this.paused = false; //_paused
this._sT = null; // startTime
this._pST = null; //_pauseStartTime
this._hex = _o.keepHex || false; // option to keep hex for color tweens true/false
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._to = _o.transformOrigin; // transform-origin
this._pp = _o.perspective && parseInt(_o.perspective) !== 0 ? 'perspective('+parseInt(_o.perspective)+'px) ' : false; // perspective
this._ppo = _o.perspectiveOrigin; // perspective origin
this._ppp = _o.parentPerspective; // parent perspective
this._pppo = _o.parentPerspectiveOrigin; // parent perspective origin
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.start = Tween.prototype.start = start;
this.play = Tween.prototype.play = this.resume = Tween.prototype.resume = play;
//also add plugins options or transform perspective
for (var o in _o) { if (!(o in this) && !/delay|duration|repeat|origin|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 = window.performance.now();
if (this._pC !== null) {
this._pC.call();
}
}
return this;
}
this.stop = function () {
if (!this.paused && this.playing) {
remove(this);
this.playing = false;
this.paused = false;
this.scrollOut();
if (this._stC !== null) {
this._stC.call();
}
this.stopChainedTweens();
this.close();
}
return this;
}
this.rvs = function () {
if (this._y) {
for (var p in this._vE) {
var tmp = this._vSR[p];
this._vSR[p] = this._vE[p];
this._vE[p] = tmp;
this._vS[p] = this._vSR[p];
}
}
}
this.chain = function () { this._cT = arguments; return this; };
this.stopChainedTweens = function () {
var i = 0, ctl =this._cT.length;
for (i; i < ctl; i++) {
this._cT[i].stop();
}
}
this.scrollOut = function(){ //prevent scroll when tweening scroll
if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
this.removeListeners();
document.body.removeAttribute('data-tweening');
}
}
this.scrollIn = function(){
if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
if (!document.body.getAttribute('data-tweening') ) {
document.body.setAttribute('data-tweening', 'scroll');
this.addListeners();
}
}
}
this.addListeners = function () {
document.addEventListener(_ev, preventScroll, false);
document.addEventListener(_evh, preventScroll, false);
}
this.removeListeners = function () {
document.removeEventListener(_ev, preventScroll, false);
document.removeEventListener(_evh, preventScroll, false);
}
this.stack = function () { // stack transform props for .to() chains
var f = this.prS();
this._vS = {};
this._vS = preparePropertiesObject(f,{},this._el)[0];
for ( var p in this._vS ) {
if ( p === 'transform' && (p in this._vE) ){
for ( var sp in this._vS[p]) {
if (!(sp in this._vE[p])) { this._vE[p][sp] = {}; }
for ( var spp in this._vS[p][sp] ) { // 3rd level
if ( this._vS[p][sp][spp].value !== undefined ) {
if (!(spp in this._vE[p][sp])) { this._vE[p][sp][spp] = {}; }
for ( var sppp in this._vS[p][sp][spp]) { // spp = translateX | rotateX | skewX | rotate2d
if ( !(sppp in this._vE[p][sp][spp])) {
this._vE[p][sp][spp][sppp] = this._vS[p][sp][spp][sppp]; // sppp = unit | value
}
}
}
}
if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level
for ( var spp1 in this._vS[p][sp] ) { // scale
if (!(spp1 in this._vE[p][sp])) {
this._vE[p][sp][spp1] = this._vS[p][sp][spp1]; // spp = unit | value
}
}
}
}
}
}
K.svg && K.svq(this); // SVG Plugin | on start we process the SVG paths and transforms
}
//prepare valuesStart for .to() method
this.prS = function () {
var f = {}, el = this._el, to = this._vS, cs = gIS(el,'transform'), deg = ['rotate','skew'], ax = ['X','Y','Z'];
for (var p in to){
if ( _tf.indexOf(p) !== -1 ) {
var r2d = (/(rotate|translate|scale)$/.test(p));
if ( /translate/.test(p) && p !== 'translate' ) {
f['translate3d'] = cs['translate3d'] || _d[p];
} else if ( r2d ) { // 2d transforms
f[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 to) ) { f[s] = cs[s] || _d[s]; }
}
}
}
} else {
if ( _sc.indexOf(p) === -1 ) {
if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
var co = getComputedStyle(el,'filter');
f['opacity'] = typeof co === 'number' ? co : _d['opacity'];
} else {
if ( _all.indexOf(p) !== -1 ) {
f[p] = getComputedStyle(el,p) || d[p];
} else { // plugins register here
f[p] = p in K.prS ? K.prS[p](el,p,to[p]) : 0;
}
}
} else {
f[p] = (el === null || el === undefined) ? (window.pageYOffset || _sct.scrollTop) : el.scrollTop;
}
}
}
for ( var p in cs ){ // also add to _vS values from previous tweens
if ( _tf.indexOf(p) !== -1 && (!( p in to )) ) {
f[p] = cs[p] || _d[p];
}
}
return f;
}
this.close = function () {
var self = this;
setTimeout(function(){
var i = _tws.indexOf(self);
if (i === _tws.length-1) { stop(); }
if (self.repeat > 0) { self._r = self.repeat; }
if (self._y && self.reversed===true) { self.rvs(); self.reversed = false; }
self.playing = false;
},64)
}
},
// the multi elements Tween constructs
TweensTO = function (els, vE, o) { // .to
this.tweens = []; var i, tl = els.length, _o = [];
for ( i = 0; i < tl; i++ ) {
_o[i] = o || {}; o.delay = o.delay || 0;
_o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
this.tweens.push( to(els[i], vE, _o[i]) );
}
},
TweensFT = function (els, vS, vE, o) { // .fromTo
this.tweens = []; var i, tl = els.length, _o = [];
for ( i = 0; i < tl; i++ ) {
_o[i] = o || {}; o.delay = o.delay || 0;
_o[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
this.tweens.push( fromTo(els[i], vS, vE, _o[i]) );
}
},
ws = TweensTO.prototype = TweensFT.prototype = {
start : function(t){
t = t || window.performance.now();
var i, tl = this.tweens.length;
for ( i = 0; i < tl; i++ ) {
this.tweens[i].start(t);
}
return this;
},
stop : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].stop(); } return this; },
pause : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].pause(); } return this; },
chain : function(){ this.tweens[this.tweens.length-1]._cT = arguments; return this; },
play : function(){ for ( var i = 0; i < this.tweens.length; i++ ) { this.tweens[i].play(); } return this; },
resume :function() {return this.play()}
};
return K = { // export core methods to public for plugins
property: property, getPrefix: getPrefix, selector: selector, pe : processEasing, // utils
to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
Interpolate: {number: number, unit: unit, color: color }, // interpolators ?? move array & coords to svg and leave color
dom: DOM, // DOM manipulation
pp: parseProperty, prS: prepareStart, // init
truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, gCS: getComputedStyle, // property parsing
Easing: easing,
ticker: _tk, tick : _t, tweens: _tws, update: _u, // experiment
};
}));

2
demo/start.html
View file

@ -179,7 +179,7 @@ define([
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

5
demo/svg.html
View file

@ -557,9 +557,8 @@ var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<!--<script src="./../dist/kute-svg.min.js"></script> some stuff -->
<script src="./src/kute-svg.js"></script> <!-- some stuff -->
<script src="./src/kute.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 -->
</body>

4
demo/text.html
View file

@ -167,8 +167,8 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other &lt;span&
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.5.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-text.js"></script> <!-- KUTE.js Text Plugin -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-text.min.js"></script> <!-- KUTE.js Text Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/text.js"></script> <!-- css plugin examples -->
</body>