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

NPM/Bower and UMD support.

Browse source 
- Supports `require()` and `define()` style loading.
- Is available on Bower through Git tags. Not yet via NPM. (run `npm publish` inside the project to do so)
- README updated with hint of usability with module loaders

In the code:
- Implemented UMD method, using AMD in first instance.
- Error is thrown is the root KuteJS could not be found.

What is missing:
- Sub-modules should export their factory rather than doing this on their own.
This commit is contained in:
Ingwie Phoenix 2015-11-01 21:51:51 +01:00
parent 37348c3609
commit e2aa72e14b
7 changed files with 718 additions and 580 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
README.md
View file

@ -6,6 +6,13 @@ A minimal <b>native Javascript</b> tweening engine with <b>jQuery</b> plugin, fo
# CDN # CDN
Thanks to jsdelivr, we have CDN link <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a>. Thanks to jsdelivr, we have CDN link <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a>.
# NPM/Bower
You can install this through NPM or bower respectively:
$ npm install kute.js
# or
$ bower install kute.js
# Basic Usage # Basic Usage
At a glance, you can write one line and you're done. At a glance, you can write one line and you're done.
```javascript ```javascript
@ -16,6 +23,23 @@ new KUTE.fromTo('selector', fromValues, toValues, options);
$('selector').KUTE('fromTo', fromValues, toValues, options); $('selector').KUTE('fromTo', fromValues, toValues, options);
``` ```
# CommonJS/AMD support
You can use this module through any of the common javascript module systems. For instance:
```javascript
// NodeJS/CommonJS style
var kute = require("kute.js");
// Add Bezier/Easing...
require("kute.js/kute-bezier");
// AMD
define([
"kute.js",
"kute.js/kute-bezier.js"
], function(KUTE){
// ...
});
```
# Advanced Usage # Advanced Usage
Quite easily, you can write 'bit more lines and you're making the earth go round. Quite easily, you can write 'bit more lines and you're making the earth go round.
@ -26,9 +50,9 @@ KUTE.fromTo(el, {
{ translate: 0, opacity: 1 }, // fromValues { translate: 0, opacity: 1 }, // fromValues
{ translate: 150, opacity: 0 }, // toValues { translate: 150, opacity: 0 }, // toValues
{ duration: 500, delay: 0, easing : 'exponentialInOut', // basic options { duration: 500, delay: 0, easing : 'exponentialInOut', // basic options
//callbacks //callbacks
start: functionOne, // run function when tween starts start: functionOne, // run function when tween starts
complete: functionTwo, // run function when tween animation is finished complete: functionTwo, // run function when tween animation is finished
update: functionThree // run function while tween running update: functionThree // run function while tween running
stop: functionThree // run function when tween stopped stop: functionThree // run function when tween stopped
@ -39,7 +63,7 @@ KUTE.fromTo(el, {
); );
``` ```
# Demo # Demo
For documentation, examples and other cool tips, check the <a href="http://thednp.github.io/kute.js/">demo</a>. For documentation, examples and other cool tips, check the <a href="http://thednp.github.io/kute.js/">demo</a>.
#jQuery Plugin #jQuery Plugin
@ -51,7 +75,7 @@ That's right, there you have it, just a few bits of code to bridge the awesome `
* computes properties' values properly according to their measurement unit (px,%,deg,etc) * computes properties' values properly according to their measurement unit (px,%,deg,etc)
* properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent * properly handles cross browser 3D `transform` with `perspective` and `perspective-origin` for element or it's parent
* converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB` * converts `HEX` colors to `RGB` and tweens the numeric values, then ALWAYS updates color via `RGB`
* properly replaces `top`, `centered` or any other background position with proper value to be able to tween * properly replaces `top`, `centered` or any other background position with proper value to be able to tween
* for most supported properties it reads the current element computed style property value as initial value (via `currentStyle || getComputedStyle`) * for most supported properties it reads the current element computed style property value as initial value (via `currentStyle || getComputedStyle`)
* because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's `.to()` method * because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's `.to()` method
* allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options * allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options

30
bower.json Normal file
View file

@ -0,0 +1,30 @@
{
"name": "KUTE.js",
"version": "0.9.4",
"homepage": "http://thednp.github.io/kute.js",
"authors": [
"thednp"
],
"description": "A minimal Native Javascript animation engine with jQuery plugin.",
"main": "kute.js",
"moduleType": [
"amd",
"globals",
"node"
],
"keywords": [
"animations",
"native-javascript",
"kute.js",
"tweening",
"engine"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

301
kute-bezier.js
View file

@ -6,154 +6,173 @@
* Licensed under MIT-License * Licensed under MIT-License
*/ */
KUTE.Ease = {}; (function(kute_ea){
// Obtain a reference to the base KUTE.
KUTE.Ease.bezier = function(mX1, mY1, mX2, mY2) { // Since KUTE supports a variety of module systems,
return _bz.pB(mX1, mY1, mX2, mY2); // we need to pick up which one to use.
}; if(define == "function") {
define(["./kute.js"], function(KUTE){ kute_ea(KUTE); return KUTE; });
var _bz = KUTE.Ease.bezier.prototype; } else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
// These values are established by empiricism with tests (tradeoff: performance VS precision) var KUTE = require("./kute.js");
_bz.ni = 4; // NEWTON_ITERATIONS kute_ea(KUTE);
_bz.nms = 0.001; // NEWTON_MIN_SLOPE // Export the modified one. Not really required, but convenient.
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION module.exports = KUTE;
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS } else if(typeof root.KUTE != "undefined") {
kute_ea(root.KUTE);
_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 { } else {
return _bz.bS(aX, iS, fiS, mX1, mX2); throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
} }
}; })(function(KUTE){
KUTE.Ease = {};
_bz.pc = function(mX1, mX2, mY1, mY2) { KUTE.Ease.bezier = function(mX1, mY1, mX2, mY2) {
this._p = true; return _bz.pB(mX1, mY1, mX2, mY2);
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"],
KUTE.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
KUTE.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
KUTE.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
KUTE.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
KUTE.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
KUTE.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
KUTE.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); }; var _bz = KUTE.Ease.bezier.prototype;
KUTE.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
KUTE.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
KUTE.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); }; // These values are established by empiricism with tests (tradeoff: performance VS precision)
KUTE.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); }; _bz.ni = 4; // NEWTON_ITERATIONS
KUTE.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); }; _bz.nms = 0.001; // NEWTON_MIN_SLOPE
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS
KUTE.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); }; _bz.ksts = 11; // k Spline Table Size
KUTE.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); }; _bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
KUTE.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
KUTE.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); }; _bz.f32as = 'Float32Array' in window; // float32ArraySupported
KUTE.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); }; _bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
KUTE.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
KUTE.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
KUTE.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
KUTE.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
KUTE.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); }; _bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
KUTE.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); }; _bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
KUTE.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); }; _bz.C = function(aA1) { return 3.0 * aA1; };
KUTE.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); }; _bz.r = {};
KUTE.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); }; _bz.pB = function (mX1, mY1, mX2, mY2) {
KUTE.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); }; this._p = false; var self = this;
KUTE.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); }; _bz.r = function(aX){
KUTE.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); }; if (!self._p) _bz.pc(mX1, mX2, mY1, mY2);
KUTE.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); }; 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"],
KUTE.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
KUTE.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
KUTE.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
KUTE.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
KUTE.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
KUTE.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
KUTE.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
KUTE.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
KUTE.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
KUTE.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
KUTE.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
KUTE.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
KUTE.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
KUTE.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
KUTE.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
KUTE.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
KUTE.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
KUTE.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
KUTE.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
KUTE.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
KUTE.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
KUTE.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
KUTE.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
KUTE.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
KUTE.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
KUTE.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
KUTE.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
KUTE.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
KUTE.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
KUTE.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
});

35
kute-jquery.js
View file

@ -4,23 +4,44 @@
* Licensed under MIT-License * Licensed under MIT-License
*/ */
(function($) { (function(kutejQuery){
$.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause() // We need to require the root KUTE and jQuery.
if(define == "function") {
define(["./kute.js", "jQuery"], function(KUTE, $){
kutejQuery($, 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");
kutejQuery($, KUTE);
// Export the modified one. Not really required, but convenient.
module.exports = $;
} else if(typeof root.KUTE != "undefined") {
// jQuery always has two ways of existing... Find one, and pass.
var $ = root.jQuery || root.$;
kutejQuery($, root.KUTE);
} else {
throw new Error("KUTE.js jQuery depends on KUTE.js and jQuery. Read the docs for more info.")
}
})(function($, KUTE) {
$.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length; var tws = [], i, l = this.length;
for (i=0;i<l;i++){ for (i=0;i<l;i++){
var mt = this[i][method]; var mt = this[i][method];
if ( typeof mt === 'function' ) { if ( typeof mt === 'function' ) {
mt.apply(this[i]); mt.apply(this[i]);
} }
if ( method === 'to' ) { if ( method === 'to' ) {
tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
} else if ( method === 'fromTo' || method === 'Animate' ) { } else if ( method === 'fromTo' || method === 'Animate' ) {
tws.push( new KUTE[method]( this[i], start, end, ops ) ); tws.push( new KUTE[method]( this[i], start, end, ops ) );
} else if ( method === 'chain' ) { } else if ( method === 'chain' ) {
this[i].chain.apply(this[i],start); this[i].chain.apply(this[i],start);
} }
} }
return tws; return tws;
}; };
})(jQuery); });

555
kute-physics.js
View file

@ -2,301 +2,320 @@
* KUTE.js - The Light Tweening Engine | dnp_theme * KUTE.js - The Light Tweening Engine | dnp_theme
* package dynamics.js easings pack by Michael Villar * package dynamics.js easings pack by Michael Villar
* https://github.com/michaelvillar/dynamics.js * https://github.com/michaelvillar/dynamics.js
* optimized by dnp_theme 2015 – MIT License * optimized by dnp_theme 2015 – MIT License
* Licensed under MIT-License * Licensed under MIT-License
*/ */
KUTE.Physics = {};
var _kp = KUTE.Physics, _hPI = Math.PI / 2;
// spring easing (function(kutePhysics){
_kp.spring = function(options) { // Obtain a reference to the base KUTE.
options = options || {}; // Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
var fq = Math.max(1, (options.frequency || 300 ) / 20), if(define == "function") {
fc = Math.pow(20, (options.friction || 200 ) / 100), define(["./kute.js"], function(KUTE){ kutePhysics(KUTE); return KUTE; });
aSt = options.anticipationStrength || 0, } else if(typeof module == "object" && typeof require == "function") {
aS = (options.anticipationSize || 0) / 1000; // We assume, that require() is sync.
var KUTE = require("./kute.js");
_kps.run = function(t) { kutePhysics(KUTE);
var A, At, a, angle, b, frictionT, y0, yS; // Export the modified one. Not really required, but convenient.
module.exports = KUTE;
frictionT = (t / (1 - aS)) - (aS / (1 - aS)); } else if(typeof root.KUTE != "undefined") {
if (t < aS) { kutePhysics(root.KUTE);
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 { } else {
A = _kps.A2; throw new Error("KUTE.js Physics depends on KUTE.js. Read the docs for more info.")
b = 0;
a = 1;
} }
At = A(frictionT,aS,aSt,fc); })(function(KUTE){
angle = fq * (t - aS) * a + b; KUTE.Physics = {};
return 1 - (At * Math.cos(angle)); var _kp = KUTE.Physics, _hPI = Math.PI / 2;
};
return _kps.run;
};
var _kps = _kp.spring.prototype; // spring easing
_kps.run = {}; _kp.spring = function(options) {
_kps.A1 = function(t,aS,aSt) { options = options || {};
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);
};
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;
// bounce _kps.run = function(t) {
_kp.bounce = function(options) { var A, At, a, angle, b, frictionT, y0, yS;
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 = _kp.bounce.prototype; frictionT = (t / (1 - aS)) - (aS / (1 - aS));
_kpo.run = {}; if (t < aS) {
yS = (aS / (1 - aS)) - (aS / (1 - aS));
y0 = (0 / (1 - aS)) - (aS / (1 - aS));
// gravity b = Math.acos(1 / _kps.A1(t,yS));
_kp.gravity = function(options) { a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
var bounciness, curves, elasticity, gravity, initialForce; A = _kps.A1;
} else {
options = options || {}; A = _kps.A2;
bounciness = ( options.bounciness || 400 ) / 1250; b = 0;
elasticity = ( options.elasticity || 200 ) / 1000; a = 1;
initialForce = options.initialForce || false; }
At = A(frictionT,aS,aSt,fc);
gravity = 100; angle = fq * (t - aS) * a + b;
curves = []; return 1 - (At * Math.cos(angle));
_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() { return _kps.run;
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; var _kps = _kp.spring.prototype;
curve.b = curve.b * 2; _kps.run = {};
} _kps.A1 = function(t,aS,aSt) {
curves.push(curve); var a, b, x0, x1;
L2 = _kpg.L; x0 = aS / (1 - aS);
_results = []; x1 = 0;
while (curve.b < 1 && curve.H > 0.001) { b = (x0 - (0.8 * x1)) / (x0 - x1);
L2 = curve.b - curve.a; a = (0.8 - b) / x0;
curve = { return (a * t * aSt / 100) + b;
a: curve.b, };
b: curve.b + L2 * bounciness, _kps.A2 = function(t,aS,aSt,f) {
H: curve.H * elasticity return Math.pow(f / 10, -t) * (1 - t);
};
// bounce
_kp.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);
}; };
_results.push(curves.push(curve)); return _kpo.run;
} };
return _results;
})(); var _kpo = _kp.bounce.prototype;
_kpg.fn = function(t) { _kpo.run = {};
var curve, i, v;
i = 0;
curve = curves[i]; // gravity
while (!(t >= curve.a && t <= curve.b)) { _kp.gravity = function(options) {
i += 1; var bounciness, curves, elasticity, gravity, initialForce;
curve = curves[i];
if (!curve) { options = options || {};
break; 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 = _kp.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;
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; //throw up and pull down by gravity
}; _kp.forceWithGravity = function(o) {
var ops = o || {};
var _kpg = _kp.gravity.prototype; ops.initialForce = true;
_kpg.L = {}; return _kp.gravity(ops);
_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
_kp.forceWithGravity = function(o) {
var ops = o || {};
ops.initialForce = true;
return _kp.gravity(ops);
};
// multi point bezier // multi point bezier
_kp.bezier = function(options) { _kp.bezier = function(options) {
options = options || {}; options = options || {};
var points = options.points, var points = options.points,
returnsToSelf = false, Bs = []; returnsToSelf = false, Bs = [];
(function() { (function() {
var i, k; var i, k;
for (i in points) { for (i in points) {
k = parseInt(i); k = parseInt(i);
if (k >= points.length - 1) { 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 = _kp.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; break;
} }
_kpb.fn(points[k], points[k + 1], Bs);
} }
return Bs; if (!B) {
})(); return ( rTS ? 0 : 1 );
_kpb.run = function(t) {
if (t === 0) {
return 0;
} else if (t === 1) {
return 1;
} else {
return _kpb.yForX(t, Bs, returnsToSelf);
} }
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;
}; };
return _kpb.run;
};
var _kpb = _kp.bezier.prototype; _kp.physicsInOut = function(options) {
_kpb.B2 = {}; var friction;
_kpb.run = {}; options = options || {};
friction = options.friction|| 500;
return _kp.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 } ] } ] });
};
_kpb.fn = function(pointA, pointB, Bs) { _kp.physicsIn = function(options) {
var B2 = function(t) { var friction;
return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB); options = options || {};
}; friction = options.friction|| 500;
return Bs.push(B2); return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
}; };
_kpb.Bezier = function(t, p0, p1, p2, p3) { _kp.physicsOut = function(options) {
return { var friction;
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, options = options || {};
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 friction = options.friction|| 500;
}; return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
}; };
_kpb.yForX = function(xTarget, Bs, rTS) { _kp.physicsBackOut = function(options) {
var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length; var friction;
B = null; options = options || {};
for (_i; _i < _len; _i++) { friction = options.friction|| 500;
aB = Bs[_i]; return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
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;
};
_kp.physicsInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.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 } ] } ] });
};
_kp.physicsIn = function(options) { _kp.physicsBackIn = function(options) {
var friction; var friction;
options = options || {}; options = options || {};
friction = options.friction|| 500; friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] }); return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
}; };
_kp.physicsOut = function(options) { _kp.physicsBackInOut = function(options) {
var friction; var friction;
options = options || {}; options = options || {};
friction = options.friction|| 500; friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] }); return _kp.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}]}] });
}; };
});
_kp.physicsBackOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
};
_kp.physicsBackIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
};
_kp.physicsBackInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.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}]}] });
};

320
kute.js
View file

@ -4,23 +4,23 @@
*/ */
(function (root, factory) { (function (root, factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
define(['KUTE'], factory); // AMD. Register as an anonymous module. define([], factory); // AMD. Register as an anonymous module.
} else if (typeof exports == 'object') { } else if (typeof exports == 'object') {
module.exports = factory(); // Node, not strict CommonJS module.exports = factory(); // Node, not strict CommonJS
} else { } else {
// Browser globals // Browser globals
root.KUTE = root.KUTE || factory(); root.KUTE = root.KUTE || factory();
} }
}(this, function () { }(this, function () {
var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick, var K = K || {}, _tws = [], _t, _stk = false, // _stoppedTick // _tweens // KUTE, _tween, _tick,
_pf = getPrefix(), // prefix _pf = getPrefix(), // prefix
_rafR = _rafR || ((!('requestAnimationFrame' in window)) ? true : false), // is prefix required for requestAnimationFrame _rafR = _rafR || ((!('requestAnimationFrame' in window)) ? true : false), // is prefix required for requestAnimationFrame
_pfT = _pfT || ((!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for transform _pfT = _pfT || ((!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for transform
_pfB = _pfB || ((!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for border-radius _pfB = _pfB || ((!('border-radius' in document.getElementsByTagName('div')[0].style)) ? true : false), // is prefix required for border-radius
_tch = _tch || (('ontouchstart' in window || navigator.msMaxTouchPoints) || false), // support Touch? _tch = _tch || (('ontouchstart' in window || navigator.msMaxTouchPoints) || false), // support Touch?
_ev = _ev || (_tch ? 'touchstart' : 'mousewheel'), //event to prevent on scroll _ev = _ev || (_tch ? 'touchstart' : 'mousewheel'), //event to prevent on scroll
_bd = document.body, _bd = document.body,
_htm = document.getElementsByTagName('HTML')[0], _htm = document.getElementsByTagName('HTML')[0],
_sct = (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm), _sct = (/webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? _bd : _htm),
@ -39,16 +39,16 @@
_brbr = _brbr || _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius', _brbr = _brbr || _pfB ? _pf + 'BorderBottomRightRadius' : 'borderBottomRightRadius',
_raf = _raf || _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'], _raf = _raf || _rafR ? window[_pf + 'RequestAnimationFrame'] : window['requestAnimationFrame'],
_caf = _caf || _rafR ? window[_pf + 'CancelAnimationFrame'] : window['cancelAnimationFrame'], _caf = _caf || _rafR ? window[_pf + 'CancelAnimationFrame'] : window['cancelAnimationFrame'],
//supported properties //supported properties
_cls = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0) _cls = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'], // 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 _sc = ['scrollTop', 'scroll'], //scroll, it has no default value, it's calculated on tween start
_clp = ['clip'], // clip _clp = ['clip'], // clip
_op = ['opacity'], // opacity _op = ['opacity'], // opacity
_rd = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any _rd = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
_bm = ['top', 'left', 'right', 'bottom', _bm = ['top', 'left', 'right', 'bottom',
'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight', 'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'], // dimensions / box model 'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'], // dimensions / box model
_tp = ['fontSize','lineHeight','letterSpacing'], // text properties _tp = ['fontSize','lineHeight','letterSpacing'], // text properties
_bg = ['backgroundPosition'], // background position _bg = ['backgroundPosition'], // background position
@ -64,22 +64,22 @@
if (_cls.indexOf(p) !== -1){ if (_cls.indexOf(p) !== -1){
_d[p] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1}; _d[p] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1};
} else if ( _rd.indexOf(p) !== -1 || _bm.indexOf(p) !== -1 || _tp.indexOf(p) !== -1) { } else if ( _rd.indexOf(p) !== -1 || _bm.indexOf(p) !== -1 || _tp.indexOf(p) !== -1) {
_d[p] = 0; _d[p] = 0;
} else if ( _bg.indexOf(p) !== -1 ){ } else if ( _bg.indexOf(p) !== -1 ){
_d[p] = [50,50]; _d[p] = [50,50];
} else if ( p === 'clip' ){ } else if ( p === 'clip' ){
_d[p] = [0,0,0,0]; _d[p] = [0,0,0,0];
} else if ( p === 'translate3d' ){ } else if ( p === 'translate3d' ){
_d[p] = [0,0,0]; _d[p] = [0,0,0];
} else if ( p === 'translate' ){ } else if ( p === 'translate' ){
_d[p] = [0,0]; _d[p] = [0,0];
} else if ( p === 'rotate' || /X|Y|Z/.test(p) ){ } else if ( p === 'rotate' || /X|Y|Z/.test(p) ){
_d[p] = 0; _d[p] = 0;
} else if ( p === 'scale' || p === 'opacity' ){ } else if ( p === 'scale' || p === 'opacity' ){
_d[p] = 1; _d[p] = 1;
} }
} }
//more internals //more internals
K.getAll = function () { return _tws; }; K.getAll = function () { return _tws; };
K.removeAll = function () { _tws = []; }; K.removeAll = function () { _tws = []; };
@ -106,16 +106,16 @@
_stk = false; _stk = false;
return true; return true;
}; };
// internal stopTick // internal stopTick
K.s = function () { K.s = function () {
if ( _stk === false ) { if ( _stk === false ) {
_caf(_t); _caf(_t);
_stk = true; _stk = true;
_t = null; _t = null;
} }
}; };
//main methods //main methods
K.to = function (el, to, o) { K.to = function (el, to, o) {
if ( o === undefined ) { o = {}; } if ( o === undefined ) { o = {}; }
@ -136,8 +136,8 @@
var _o = o; var _o = o;
_o.easing = _o && K.pe(_o.easing) || K.Easing.linear; _o.easing = _o && K.pe(_o.easing) || K.Easing.linear;
var _vS = K.prP(f, false), var _vS = K.prP(f, false),
_vE = K.prP(to, true), _vE = K.prP(to, true),
_tw = new K.Tween(_el, _vS, _vE, _o); _tw = new K.Tween(_el, _vS, _vE, _o);
return _tw; return _tw;
@ -160,7 +160,7 @@
tv = v1 + (v2 - v1) * v, tv = v1 + (v2 - v1) * v,
u = _end.unit, u = _end.unit,
// checking array on every frame takes time so let's cache these // checking array on every frame takes time so let's cache these
cls = _cls.indexOf(p) !== -1, cls = _cls.indexOf(p) !== -1,
bm = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1, bm = _tp.indexOf(p) !== -1 || _bm.indexOf(p) !== -1,
rd = _rd.indexOf(p) !== -1 && !_isIE8, rd = _rd.indexOf(p) !== -1 && !_isIE8,
sc = _sc.indexOf(p) !== -1, sc = _sc.indexOf(p) !== -1,
@ -168,7 +168,7 @@
clp = _clp.indexOf(p) !== -1, clp = _clp.indexOf(p) !== -1,
op = _op.indexOf(p) !== -1, op = _op.indexOf(p) !== -1,
tf = p === 'transform' && !_isIE8; tf = p === 'transform' && !_isIE8;
//process styles by property / property type //process styles by property / property type
if ( rd ) { if ( rd ) {
if (p === 'borderRadius') { if (p === 'borderRadius') {
@ -181,53 +181,53 @@
css[_brbl] = tv + u; css[_brbl] = tv + u;
} else if (p === 'borderBottomRightRadius') { } else if (p === 'borderBottomRightRadius') {
css[_brbr] = tv + u; css[_brbr] = tv + u;
} }
} else if (tf) { } else if (tf) {
var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) '; //transform style & property var _tS = '', tP, rps, pps = 'perspective('+w._pp+'px) '; //transform style & property
for (tP in _end) { for (tP in _end) {
var t1 = _start[tP], t2 = _end[tP]; var t1 = _start[tP], t2 = _end[tP];
rps = _3d.indexOf(tP) !== -1 && !_isIE; rps = _3d.indexOf(tP) !== -1 && !_isIE;
if ( tP === 'translate' ) { if ( tP === 'translate' ) {
var tls = '', ts = {}, ax; var tls = '', ts = {}, ax;
for (ax in t2){ for (ax in t2){
var x1 = t1[ax].value || 0, x2 = t2[ax].value || 0, xu = t2[ax].unit || 'px'; 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; ts[ax] = x1===x2 ? x2+xu : (x1 + ( x2 - x1 ) * v) + xu;
} }
tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' : tls = t2.x ? 'translate(' + ts.x + ',' + ts.y + ')' :
'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')'; 'translate3d(' + ts.translateX + ',' + ts.translateY + ',' + ts.translateZ + ')';
_tS = (_tS === '') ? tls : (tls + ' ' + _tS); _tS = (_tS === '') ? tls : (tls + ' ' + _tS);
} else if ( tP === 'rotate' ) { } else if ( tP === 'rotate' ) {
var rt = '', rS = {}, rx; var rt = '', rS = {}, rx;
for ( rx in t2 ){ for ( rx in t2 ){
if ( t1[rx] ) { if ( t1[rx] ) {
var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg', var a1 = t1[rx].value, a2 = t2[rx].value, au = t2[rx].unit||'deg',
av = a1 + (a2 - a1) * v; av = a1 + (a2 - a1) * v;
rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') '; rS[rx] = rx ==='z' ? 'rotate('+av+au+')' : rx + '(' + av + au + ') ';
} }
} }
rt = t2.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||''); rt = t2.z ? rS.z : (rS.rotateX||'') + (rS.rotateY||'') + (rS.rotateZ||'');
_tS = (_tS === '') ? rt : (_tS + ' ' + rt); _tS = (_tS === '') ? rt : (_tS + ' ' + rt);
} else if (tP==='skew') { } else if (tP==='skew') {
var sk = '', sS = {}; var sk = '', sS = {};
for ( var sx in t2 ){ for ( var sx in t2 ){
if ( t1[sx] ) { if ( t1[sx] ) {
var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg', var s1 = t1[sx].value, s2 = t2[sx].value, su = t2[sx].unit||'deg',
sv = s1 + (s2 - s1) * v; sv = s1 + (s2 - s1) * v;
sS[sx] = sx + '(' + sv + su + ') '; sS[sx] = sx + '(' + sv + su + ') ';
} }
} }
sk = (sS.skewX||'') + (sS.skewY||''); sk = (sS.skewX||'') + (sS.skewY||'');
_tS = (_tS === '') ? sk : (_tS + ' ' + sk); _tS = (_tS === '') ? sk : (_tS + ' ' + sk);
} else if (tP === 'scale') { } else if (tP === 'scale') {
var sc1 = t1.value, sc2 = t2.value, var sc1 = t1.value, sc2 = t2.value,
s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')'; s = sc1 + (sc2 - sc1) * v, scS = tP + '(' + s + ')';
_tS = (_tS === '') ? scS : (_tS + ' ' + scS); _tS = (_tS === '') ? scS : (_tS + ' ' + scS);
} }
} }
@ -237,45 +237,45 @@
for (c in v2) { for (c in v2) {
if ( c !== 'a' ){ if ( c !== 'a' ){
_c[c] = parseInt(v1[c] + (v2[c] - v1[c]) * v)||0; _c[c] = parseInt(v1[c] + (v2[c] - v1[c]) * v)||0;
} else { } else {
_c[c] = (v1[c] && v2[c]) ? parseFloat(v1[c] + (v2[c] - v1[c]) * v) : null; _c[c] = (v1[c] && v2[c]) ? parseFloat(v1[c] + (v2[c] - v1[c]) * v) : null;
} }
} }
if ( w._hex ) { if ( w._hex ) {
css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) ); css[p] = K.rth( parseInt(_c.r), parseInt(_c.g), parseInt(_c.b) );
} else { } else {
css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')'; css[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
} }
} else if ( bm ) { } else if ( bm ) {
css[p] = tv+u; css[p] = tv+u;
} else if ( sc ) { } else if ( sc ) {
ets.scrollTop = v1 + ( v2 - v1 ) * v; ets.scrollTop = v1 + ( v2 - v1 ) * v;
} else if ( bg ) { } else if ( bg ) {
var px1 = _start.x.v, px2 = _end.x.v, py1 = _start.y.v, py2 = _end.y.v, var px1 = _start.x.v, px2 = _end.x.v, py1 = _start.y.v, py2 = _end.y.v,
px = (px1 + ( px2 - px1 ) * v), pxu = '%', px = (px1 + ( px2 - px1 ) * v), pxu = '%',
py = (py1 + ( py2 - py1 ) * v), pyu = '%'; py = (py1 + ( py2 - py1 ) * v), pyu = '%';
css[p] = px + pxu + ' ' + py + pyu; css[p] = px + pxu + ' ' + py + pyu;
} else if ( clp ) { } else if ( clp ) {
var h = 0, cl = []; var h = 0, cl = [];
for (h;h<4;h++){ for (h;h<4;h++){
var c1 = _start[h].v, c2 = _end[h].v, cu = _end[h].u || 'px'; var c1 = _start[h].v, c2 = _end[h].v, cu = _end[h].u || 'px';
cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu; cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu;
} }
css[p] = 'rect('+cl+')'; css[p] = 'rect('+cl+')';
} else if ( op ) { } else if ( op ) {
css[opp] = !_isIE8 ? tv : "alpha(opacity=" + parseInt(tv*100) + ")"; css[opp] = !_isIE8 ? tv : "alpha(opacity=" + parseInt(tv*100) + ")";
} }
} }
}; };
K.perspective = function (l,w) { K.perspective = function (l,w) {
if ( w._ppo !== undefined ) { l.style[_pfo] = w._ppo; } // element perspective 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._ppp !== undefined ) { l.parentNode.style[_pfp] = w._ppp + 'px'; } // parent perspective
if ( w._pppo !== undefined ) { l.parentNode.style[_pfo] = w._pppo; } // parent perspective origin if ( w._pppo !== undefined ) { l.parentNode.style[_pfo] = w._pppo; } // parent perspective origin
}; };
K.Tween = function (_el, _vS, _vE, _o) { K.Tween = function (_el, _vS, _vE, _o) {
this._el = this._el || _el; // element animation is applied to this._el = this._el || _el; // element animation is applied to
this._dr = this._dr || _o&&_o.duration || 700; //duration this._dr = this._dr || _o&&_o.duration || 700; //duration
@ -290,11 +290,11 @@
this._dl = this._dl || _o&&_o.delay || 0; //delay this._dl = this._dl || _o&&_o.delay || 0; //delay
this._sT = null; // startTime this._sT = null; // startTime
this.paused = false; //_paused this.paused = false; //_paused
this._pST = null; //_pauseStartTime this._pST = null; //_pauseStartTime
this._pp = this._pp || _o.perspective; // perspective this._pp = this._pp || _o.perspective; // perspective
this._ppo = this._ppo || _o.perspectiveOrigin; // perspective origin this._ppo = this._ppo || _o.perspectiveOrigin; // perspective origin
this._ppp = this._ppp || _o.parentPerspective; // parent perspective this._ppp = this._ppp || _o.parentPerspective; // parent perspective
this._pppo = this._pppo || _o.parentPerspectiveOrigin; // parent perspective origin this._pppo = this._pppo || _o.parentPerspectiveOrigin; // parent perspective origin
this._rpr = this._rpr || _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false this._rpr = this._rpr || _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
this._hex = this._hex || _o.keepHex || false; // option to keep hex for color tweens true/false this._hex = this._hex || _o.keepHex || false; // option to keep hex for color tweens true/false
this._e = this._e || _o.easing; // _easing this._e = this._e || _o.easing; // _easing
@ -305,23 +305,23 @@
this._cC = _o&&_o.complete || null; // _on CompleteCallback this._cC = _o&&_o.complete || null; // _on CompleteCallback
this._pC = _o&&_o.pause || null; // _on PauseCallback this._pC = _o&&_o.pause || null; // _on PauseCallback
this._rC = _o&&_o.play || null; // _on ResumeCallback this._rC = _o&&_o.play || null; // _on ResumeCallback
this._stC = _o&&_o.stop || null; // _on StopCallback this._stC = _o&&_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.repeat = this._r; // we cache the number of repeats to be able to put it back after all cycles finish
}; };
var w = K.Tween.prototype; var w = K.Tween.prototype;
w.start = function (t) { w.start = function (t) {
this.scrollIn(); this.scrollIn();
var f = {}; var f = {};
K.perspective(this._el,this); // apply the perspective K.perspective(this._el,this); // apply the perspective
if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method if ( this._rpr ) { // on start we reprocess the valuesStart for TO() method
f = this.prS(); f = this.prS();
this._vS = {}; this._vS = {};
this._vS = K.prP(f,false); this._vS = K.prP(f,false);
for ( p in this._vS ) { for ( p in this._vS ) {
if ( p === 'transform' && (p in this._vE) ){ if ( p === 'transform' && (p in this._vE) ){
for ( var sp in this._vS[p]) { for ( var sp in this._vS[p]) {
@ -336,10 +336,10 @@
} }
} }
} }
if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level if ( 'value' in this._vS[p][sp] && (!('value' in this._vE[p][sp])) ) { // 2nd level
for ( var spp in this._vS[p][sp] ) { // scale for ( var spp in this._vS[p][sp] ) { // scale
if (!(spp in this._vE[p][sp])) { if (!(spp in this._vE[p][sp])) {
this._vE[p][sp][spp] = this._vS[p][sp][spp]; // spp = unit | value this._vE[p][sp][spp] = this._vS[p][sp][spp]; // spp = unit | value
} }
} }
} }
@ -347,12 +347,12 @@
} }
} }
} }
for ( p in this._vE ) { for ( p in this._vE ) {
this._vSR[p] = this._vS[p]; this._vSR[p] = this._vS[p];
} }
// now it's a good time to start // now it's a good time to start
K.add(this); K.add(this);
this.playing = true; this.playing = true;
this.paused = false; this.paused = false;
@ -362,7 +362,7 @@
if (!_t) K.t(); if (!_t) K.t();
return this; return this;
}; };
//main worker, doing update on tick //main worker, doing update on tick
w.u = function(t) { w.u = function(t) {
t = t || window.performance.now(); t = t || window.performance.now();
@ -375,49 +375,49 @@
var e = ( t - this._sT ) / this._dr; //elapsed var e = ( t - this._sT ) / this._dr; //elapsed
e = e > 1 ? 1 : e; e = e > 1 ? 1 : e;
//render the CSS update //render the CSS update
K.r(this,this._e(e)); K.r(this,this._e(e));
if (this._uC) { this._uC.call(); } if (this._uC) { this._uC.call(); }
if (e === 1) { if (e === 1) {
if (this._r > 0) { if (this._r > 0) {
if ( this._r !== Infinity ) { this._r--; } if ( this._r !== Infinity ) { this._r--; }
if (this._y) { this.reversed = !this.reversed; this.reverse(); } // handle yoyo if (this._y) { this.reversed = !this.reversed; this.reverse(); } // handle yoyo
this._sT = (this._y && !this.reversed) ? t + this._rD : t; //set the right time for delay this._sT = (this._y && !this.reversed) ? t + this._rD : t; //set the right time for delay
return true; return true;
} else { } else {
if (this._cC) { this._cC.call(); } if (this._cC) { this._cC.call(); }
//stop preventing scroll when scroll tween finished //stop preventing scroll when scroll tween finished
this.scrollOut(); this.scrollOut();
var i = 0, ctl = this._cT.length; var i = 0, ctl = this._cT.length;
for (i; i < ctl; i++) { for (i; i < ctl; i++) {
this._cT[i].start(this._sT + this._dr); this._cT[i].start(this._sT + this._dr);
} }
//stop ticking when finished //stop ticking when finished
this.close(); this.close();
return false; return false;
} }
} }
return true; return true;
}; };
w.stop = function () { w.stop = function () {
if (!this.paused && this.playing) { if (!this.paused && this.playing) {
K.remove(this); K.remove(this);
this.playing = false; this.playing = false;
this.paused = false; this.paused = false;
this.scrollOut(); this.scrollOut();
if (this._stC !== null) { if (this._stC !== null) {
this._stC.call(); this._stC.call();
} }
this.stopChainedTweens(); this.stopChainedTweens();
this.close(); this.close();
} }
@ -427,8 +427,8 @@
w.pause = function() { w.pause = function() {
if (!this.paused && this.playing) { if (!this.paused && this.playing) {
K.remove(this); K.remove(this);
this.paused = true; this.paused = true;
this._pST = window.performance.now(); this._pST = window.performance.now();
if (this._pC !== null) { if (this._pC !== null) {
this._pC.call(); this._pC.call();
} }
@ -436,13 +436,13 @@
return this; return this;
}; };
w.play = function () { w.play = function () {
if (this.paused && this.playing) { if (this.paused && this.playing) {
this.paused = false; this.paused = false;
if (this._rC !== null) { if (this._rC !== null) {
this._rC.call(); this._rC.call();
} }
this._sT += window.performance.now() - this._pST; this._sT += window.performance.now() - this._pST;
K.add(this); K.add(this);
if (!_t) K.t(); // restart ticking if stopped if (!_t) K.t(); // restart ticking if stopped
} }
@ -456,13 +456,13 @@
for (var p in this._vE) { for (var p in this._vE) {
var tmp = this._vSR[p]; var tmp = this._vSR[p];
this._vSR[p] = this._vE[p]; this._vSR[p] = this._vE[p];
this._vE[p] = tmp; this._vE[p] = tmp;
this._vS[p] = this._vSR[p]; this._vS[p] = this._vSR[p];
} }
} }
return this; return this;
}; };
w.chain = function () { this._cT = arguments; return this; }; w.chain = function () { this._cT = arguments; return this; };
w.stopChainedTweens = function () { w.stopChainedTweens = function () {
@ -471,14 +471,14 @@
this._cT[i].stop(); this._cT[i].stop();
} }
}; };
w.scrollOut = function(){ //prevent scroll when tweening scroll w.scrollOut = function(){ //prevent scroll when tweening scroll
if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) { if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
this.removeListeners(); this.removeListeners();
document.body.removeAttribute('data-tweening'); document.body.removeAttribute('data-tweening');
} }
}; };
w.scrollIn = function(){ w.scrollIn = function(){
if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) { if ( 'scroll' in this._vE || 'scrollTop' in this._vE ) {
if (!document.body.getAttribute('data-tweening') ) { if (!document.body.getAttribute('data-tweening') ) {
@ -487,7 +487,7 @@
} }
} }
}; };
w.addListeners = function () { w.addListeners = function () {
document.addEventListener(_ev, K.preventScroll, false); document.addEventListener(_ev, K.preventScroll, false);
}; };
@ -495,57 +495,57 @@
w.removeListeners = function () { w.removeListeners = function () {
document.removeEventListener(_ev, K.preventScroll, false); document.removeEventListener(_ev, K.preventScroll, false);
}; };
w.prS = function () { //prepare valuesStart for .to() method w.prS = function () { //prepare valuesStart for .to() method
var f = {}, el = this._el, to = this._vS, cs = this.gIS('transform'), deg = ['rotate','skew'], ax = ['X','Y','Z']; var f = {}, el = this._el, to = this._vS, cs = this.gIS('transform'), deg = ['rotate','skew'], ax = ['X','Y','Z'];
for (var p in to){ for (var p in to){
if ( _tf.indexOf(p) !== -1 ) { if ( _tf.indexOf(p) !== -1 ) {
var r2d = (p === 'rotate' || p === 'translate' || p === 'scale'); var r2d = (p === 'rotate' || p === 'translate' || p === 'scale');
if ( /translate/.test(p) && p !== 'translate' ) { if ( /translate/.test(p) && p !== 'translate' ) {
f['translate3d'] = cs['translate3d'] || _d[p]; f['translate3d'] = cs['translate3d'] || _d[p];
} else if ( r2d ) { // 2d transforms } else if ( r2d ) { // 2d transforms
f[p] = cs[p] || _d[p]; f[p] = cs[p] || _d[p];
} else if ( !r2d && /rotate|skew/.test(p) ) { // all angles } else if ( !r2d && /rotate|skew/.test(p) ) { // all angles
for (var d=0; d<2; d++) { for (var d=0; d<2; d++) {
for (var a = 0; a<3; a++) { for (var a = 0; a<3; a++) {
var s = deg[d]+ax[a]; var s = deg[d]+ax[a];
if (_tf.indexOf(s) !== -1 && (s in to) ) { f[s] = cs[s] || _d[s]; } if (_tf.indexOf(s) !== -1 && (s in to) ) { f[s] = cs[s] || _d[s]; }
} }
} }
} }
} else { } else {
if ( _sc.indexOf(p) === -1 ) { if ( _sc.indexOf(p) === -1 ) {
if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
var co = this.gCS('filter'); var co = this.gCS('filter');
f['opacity'] = typeof co === 'number' ? co : _d['opacity']; f['opacity'] = typeof co === 'number' ? co : _d['opacity'];
} else { } else {
f[p] = this.gCS(p) || _d[p]; f[p] = this.gCS(p) || _d[p];
} }
} else { } else {
f[p] = (el === null || el === undefined) ? (window.pageYOffset || _sct.scrollTop) : el.scrollTop; 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 for ( var p in cs ){ // also add to _vS values from previous tweens
if ( _tf.indexOf(p) !== -1 && (!( p in to )) ) { if ( _tf.indexOf(p) !== -1 && (!( p in to )) ) {
f[p] = cs[p] || _d[p]; f[p] = cs[p] || _d[p];
} }
} }
return f; return f;
}; };
w.gIS = function(p) { // gIS = get transform style for element from cssText for .to() method, the sp is for transform property w.gIS = function(p) { // gIS = get transform style for element from cssText for .to() method, the sp is for transform property
if (!this._el) return; // if the scroll applies to `window` it returns as it has no styling if (!this._el) return; // if the scroll applies to `window` it returns as it has no styling
var l = this._el, cst = l.style.cssText,//the cssText var l = this._el, cst = l.style.cssText,//the cssText
trsf = {}; //the transform object trsf = {}; //the transform object
// if we have any inline style in the cssText attribute, usually it has higher priority // 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; var css = cst.replace(/\s/g,'').split(';'), i=0, csl = css.length;
for ( i; i<csl; i++ ){ for ( i; i<csl; i++ ){
if ( /transform/.test(css[i])) { if ( /transform/.test(css[i])) {
var tps = css[i].split(':')[1].split(')'), k=0, tpl = tps.length; //all transform properties var tps = css[i].split(':')[1].split(')'), k=0, tpl = tps.length; //all transform properties
for ( k; k< tpl; k++){ for ( k; k< tpl; k++){
var tp = tps[k].split('('); //each transform property var tp = tps[k].split('('); //each transform property
if ( tp[0] !== '' && _tf.indexOf(tp) ){ if ( tp[0] !== '' && _tf.indexOf(tp) ){
trsf[tp[0]] = /translate3d/.test(tp[0]) ? tp[1].split(',') : tp[1]; trsf[tp[0]] = /translate3d/.test(tp[0]) ? tp[1].split(',') : tp[1];
} }
@ -554,7 +554,7 @@
} }
return trsf; return trsf;
}; };
w.gCS = function (p) { // gCS = get style property for element from computedStyle for .to() method w.gCS = function (p) { // gCS = get style property for element from computedStyle for .to() method
var el = this._el, cs = window.getComputedStyle(el) || el.currentStyle, //the computed style var el = this._el, cs = window.getComputedStyle(el) || el.currentStyle, //the computed style
ppp = ( !_isIE8 && _pfT && ( /transform|Radius/.test(p) ) ) ? ('-'+ _pf.toLowerCase()+'-'+p) : p, //prefixed property for CSS match ppp = ( !_isIE8 && _pfT && ( /transform|Radius/.test(p) ) ) ? ('-'+ _pf.toLowerCase()+'-'+p) : p, //prefixed property for CSS match
@ -569,26 +569,26 @@
return si; return si;
} else { } else {
return s; return s;
} }
} else { } else {
return _d[p]; return _d[p];
} }
} }
}; };
w.close = function () { w.close = function () {
var self = this; var self = this;
setTimeout(function(){ setTimeout(function(){
var i = _tws.indexOf(self); var i = _tws.indexOf(self);
if (i === _tws.length-1) { K.s(); } if (i === _tws.length-1) { K.s(); }
if (self.repeat > 0) { self._r = self.repeat; } if (self.repeat > 0) { self._r = self.repeat; }
if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; } if (self._y && self.reversed===true) { self.reverse(); self.reversed = false; }
self.playing = false; self.playing = false;
},100) },100)
}; };
// process properties // process properties
K.prP = function (t, e) { // process tween properties for .fromTo() method K.prP = function (t, e) { // process tween properties for .fromTo() method
var _st = {}, var _st = {},
tr = e === true ? _tfE : _tfS, tr = e === true ? _tfE : _tfS,
tl = e === true ? _tlE : _tlS, tl = e === true ? _tlE : _tlS,
@ -598,14 +598,14 @@
for (var x in t) { for (var x in t) {
if (_tf.indexOf(x) !== -1) { if (_tf.indexOf(x) !== -1) {
if (x !== 'translate' && /translate/.test(x)) { //process translate3d
var ta = ['X', 'Y', 'Z'], f = 0; //coordinates // translate[x] = pp(x, t[x]);
for (f; f < 3; f++) { if (x !== 'translate' && /translate/.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]; var a = ta[f];
if ( /3d/.test(x) ) { if ( /3d/.test(x) ) {
tl['translate' + a] = K.pp('translate' + a, t[x][f]); tl['translate' + a] = K.pp('translate' + a, t[x][f]);
} else { } else {
tl['translate' + a] = ('translate' + a in t) ? K.pp('translate' + a, t['translate' + a]) : { value: 0, unit: 'px' }; tl['translate' + a] = ('translate' + a in t) ? K.pp('translate' + a, t['translate' + a]) : { value: 0, unit: 'px' };
} }
@ -613,15 +613,15 @@
tr['translate'] = tl; tr['translate'] = tl;
} else if ( x !== 'rotate' && /rotate|skew/.test(x)) { //process rotation } else if ( x !== 'rotate' && /rotate|skew/.test(x)) { //process rotation
var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], r = 0, var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'], r = 0,
_rt = {}, _sk = {}, rt = ap === 'rotate' ? _rt : _sk; _rt = {}, _sk = {}, rt = ap === 'rotate' ? _rt : _sk;
for (r; r < 3; r++) { for (r; r < 3; r++) {
var v = ra[r]; var v = ra[r];
if ( t[ap+v] !== undefined && x !== 'skewZ' ) { if ( t[ap+v] !== undefined && x !== 'skewZ' ) {
rt[ap+v] = K.pp(ap + v, t[ap+v]); rt[ap+v] = K.pp(ap + v, t[ap+v]);
} }
} }
tr[ap] = rt; tr[ap] = rt;
} else if ( x === 'translate' || x === 'rotate' || x === 'scale' ) { //process 2d translation / rotation } else if ( x === 'translate' || x === 'rotate' || x === 'scale' ) { //process 2d translation / rotation
tr[x] = K.pp(x, t[x]); tr[x] = K.pp(x, t[x]);
@ -635,13 +635,13 @@
} }
return _st; return _st;
}; };
// _cls _sc _op _bm _tp _bg _tf // _cls _sc _op _bm _tp _bg _tf
K.pp = function(p, v) {//process single property K.pp = function(p, v) {//process single property
if (_tf.indexOf(p) !== -1) { if (_tf.indexOf(p) !== -1) {
var t = p.replace(/X|Y|Z/, ''), tv; var t = p.replace(/X|Y|Z/, ''), tv;
if (p === 'translate3d') { if (p === 'translate3d') {
tv = v.split(','); tv = v.split(',');
return { return {
translateX : { value: K.truD(tv[0]).v, unit: K.truD(tv[0]).u }, translateX : { value: K.truD(tv[0]).v, unit: K.truD(tv[0]).u },
translateY : { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u }, translateY : { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u },
@ -658,7 +658,7 @@
t2d.y = { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u } t2d.y = { value: K.truD(tv[1]).v, unit: K.truD(tv[1]).u }
} else { } else {
t2d.x = { value: K.truD(tv).v, unit: K.truD(tv).u }, t2d.x = { value: K.truD(tv).v, unit: K.truD(tv).u },
t2d.y = { value: 0, unit: 'px' } t2d.y = { value: 0, unit: 'px' }
} }
return t2d; return t2d;
} else if (p === 'rotate') { } else if (p === 'rotate') {
@ -681,36 +681,36 @@
if (_clp.indexOf(p) !== -1) { if (_clp.indexOf(p) !== -1) {
if ( v instanceof Array ){ if ( v instanceof Array ){
return [ K.truD(v[0]), K.truD(v[1]), K.truD(v[2]), K.truD(v[3]) ]; return [ K.truD(v[0]), K.truD(v[1]), K.truD(v[2]), K.truD(v[3]) ];
} else { } else {
var ci; var ci;
if ( /rect/.test(v) ) { if ( /rect/.test(v) ) {
ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/); ci = v.replace(/rect|\(|\)/g,'').split(/\s|\,/);
} else if ( /auto|none|initial/.test(v) ){ } else if ( /auto|none|initial/.test(v) ){
ci = _d[p]; ci = _d[p];
} }
return [ K.truD(ci[0]), K.truD(ci[1]), K.truD(ci[2]), K.truD(ci[3]) ]; return [ K.truD(ci[0]), K.truD(ci[1]), K.truD(ci[2]), K.truD(ci[3]) ];
} }
} }
if (_cls.indexOf(p) !== -1) { if (_cls.indexOf(p) !== -1) {
return { value: K.truC(v) }; return { value: K.truC(v) };
} }
if (_bg.indexOf(p) !== -1) { if (_bg.indexOf(p) !== -1) {
if ( v instanceof Array ){ if ( v instanceof Array ){
return { x: K.truD(v[0])||{ v: 50, u: '%' }, y: K.truD(v[1])||{ v: 50, u: '%' } }; return { x: K.truD(v[0])||{ v: 50, u: '%' }, y: K.truD(v[1])||{ v: 50, u: '%' } };
} else { } else {
var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g), var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/,50).split(/\s|\,/g),
xp = K.truD(posxy[0]), yp = K.truD(posxy[1]); xp = K.truD(posxy[0]), yp = K.truD(posxy[1]);
return { x: xp, y: yp }; return { x: xp, y: yp };
} }
} }
if (_rd.indexOf(p) !== -1) { if (_rd.indexOf(p) !== -1) {
var rad = K.truD(v); var rad = K.truD(v);
return { value: rad.v, unit: rad.u }; return { value: rad.v, unit: rad.u };
} }
}; };
K.truD = function (d,p) { //true dimension returns { v = value, u = unit } K.truD = 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, var x = parseInt(d) || 0, mu = ['px','%','deg','rad','em','rem','vh','vw'], l = mu.length,
y = getU(); y = getU();
function getU() { function getU() {
var u,i=0; var u,i=0;
@ -720,14 +720,14 @@
} }
return { v: x, u: y }; return { v: x, u: y };
}; };
K.preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll K.preventScroll = function (e) { // prevent mousewheel or touch events while tweening scroll
var data = document.body.getAttribute('data-tweening'); var data = document.body.getAttribute('data-tweening');
if (data && data === 'scroll') { if (data && data === 'scroll') {
e.preventDefault(); e.preventDefault();
} }
}; };
K.truC = function (v) { // replace transparent and transform any color to rgba()/rgb() K.truC = function (v) { // replace transparent and transform any color to rgba()/rgb()
var vrgb, y; var vrgb, y;
if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized if (/rgb|rgba/.test(v)) { //rgb will be fastest initialized
@ -745,7 +745,7 @@
return { r: 0, g: 0, b: 0, a: 0 }; return { r: 0, g: 0, b: 0, a: 0 };
} }
}; };
K.rth = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA K.rth = 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); return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}; };
@ -762,34 +762,34 @@
g: parseInt(result[2], 16), g: parseInt(result[2], 16),
b: parseInt(result[3], 16) b: parseInt(result[3], 16)
} : null; } : null;
}; };
K.pe = function (es) { //process easing K.pe = function (es) { //process easing
if ( typeof es === 'function') { if ( typeof es === 'function') {
return es; return es;
} else if ( typeof es === 'string' ) { } else if ( typeof es === 'string' ) {
if ( /easing|linear/.test(es) ) { if ( /easing|linear/.test(es) ) {
return K.Easing[es]; //regular Robert Penner Easing Functions return K.Easing[es]; //regular Robert Penner Easing Functions
} else if ( /bezier/.test(es) ) { } else if ( /bezier/.test(es) ) {
var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','), i = 0, l = bz.length; var bz = es.replace(/bezier|\s|\(|\)/g,'').split(','), i = 0, l = bz.length;
for (i; i<l;i++) { bz[i] = parseFloat(bz[i]); } for (i; i<l;i++) { bz[i] = parseFloat(bz[i]); }
return K.Ease.bezier(bz[0],bz[1],bz[2],bz[3]); //bezier easing return K.Ease.bezier(bz[0],bz[1],bz[2],bz[3]); //bezier easing
} else if ( /physics/.test(es) ) { } else if ( /physics/.test(es) ) {
return K.Physics[es](); // predefined physics bezier based easing functions return K.Physics[es](); // predefined physics bezier based easing functions
} else { } else {
return K.Ease[es](); // predefined bezier based easing functions return K.Ease[es](); // predefined bezier based easing functions
} }
} }
}; };
K.Easing = {}; // we build nice ease objects here K.Easing = {}; // we build nice ease objects here
//high performance for accuracy (smoothness) trade //high performance for accuracy (smoothness) trade
K.Easing.linear = function (t) { return t; }; K.Easing.linear = function (t) { return t; };
var _PI = Math.PI, _2PI = Math.PI * 2, _hPI = Math.PI / 2, var _PI = Math.PI, _2PI = Math.PI * 2, _hPI = Math.PI / 2,
_kea = 0.1, _kep = 0.4; _kea = 0.1, _kep = 0.4;
K.Easing.easingSinusoidalIn = function(t) { return -Math.cos(t * _hPI) + 1; }; K.Easing.easingSinusoidalIn = function(t) { return -Math.cos(t * _hPI) + 1; };
K.Easing.easingSinusoidalOut = function(t) { return Math.sin(t * _hPI); }; K.Easing.easingSinusoidalOut = function(t) { return Math.sin(t * _hPI); };
K.Easing.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(_PI * t) - 1); }; K.Easing.easingSinusoidalInOut = function(t) { return -0.5 * (Math.cos(_PI * t) - 1); };
@ -835,21 +835,21 @@
}; };
K.Easing.easingBounceIn = function(t) { return 1 - K.Easing.easingBounceOut( 1 - t ); }; K.Easing.easingBounceIn = function(t) { return 1 - K.Easing.easingBounceOut( 1 - t ); };
K.Easing.easingBounceOut = function(t) { K.Easing.easingBounceOut = function(t) {
if ( t < ( 1 / 2.75 ) ) { return 7.5625 * t * 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 / 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 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; } else {return 7.5625 * ( t -= ( 2.625 / 2.75 ) ) * t + 0.984375; }
}; };
K.Easing.easingBounceInOut = function(t) { if ( t < 0.5 ) return K.Easing.easingBounceIn( t * 2 ) * 0.5; return K.Easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;}; K.Easing.easingBounceInOut = function(t) { if ( t < 0.5 ) return K.Easing.easingBounceIn( t * 2 ) * 0.5; return K.Easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
//returns browser prefix //returns browser prefix
function getPrefix() { function getPrefix() {
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length, 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']; s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } } for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } }
div = null; div = null;
} }
return K; return K;
})); }));

25
package.json Normal file
View file

@ -0,0 +1,25 @@
{
"name": "kute.js",
"version": "0.9.4",
"description": "A minimal Native Javascript animation engine with jQuery plugin.",
"main": "kute.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/thednp/kute.js.git"
},
"keywords": [
"kute.js",
"animation",
"animations",
"native-javascript"
],
"author": "thednp",
"license": "MIT",
"bugs": {
"url": "https://github.com/thednp/kute.js/issues"
},
"homepage": "https://github.com/thednp/kute.js#readme"
}