| dist | ||
| kute-dev.js | ||
| kute.full.js | ||
| kute.js | ||
| LICENSE | ||
| README.md | ||
kute.js
A minimal Native Javascript tweening engine forked from tween.js. Since most of web developers don't actually use yoyo, repeat, play/pause/resume/timeline/whatever or tweening array values (processed with array interpolation functions), I've removed them. kute.js is like a merge of my own jQueryTween with tween.js, but generally it's a much more smarter build. You link the script at your ending <body> tag and write one line to do just about any animation you can think of.
CDN
Thanks to jsdelivr, we have CDN link here.
Basic Usage
At a glance, you can write one line and you're done.
//vanilla js
new KUTE.Animate(el,options);
//with jQuery plugin
$('selector').Kute(options);
Advanced Usage
Quite easily, you can write 'bit more lines and you're making the earth go round.
//vanilla js
new KUTE.Animate(el, {
//options
from : {},
to : {},
duration: 500,
delay : 0,
easing : 'exponentialInOut',
start : functionOne, // run function when tween starts
finish : functionTwo, // run function when tween finishes
special : functionThree // run function while tween runing
}
);
//with jQuery plugin
$('selector'). Kute({
//options
from : {},
to : {},
duration: 500,
delay : 0,
easing : 'exponentialInOut',
start : functionOne, // run function when tween starts
finish : functionTwo, // run function when tween finishes
special : functionThree // run function while tween runing
}
);
Full distribution (12Kb min)
It does most of the animation work you need.
- size: width and height
- colors: text color and background-color (values )
- transform: translate3D, scale, rotateX, rotateY, rotateZ
- position: top, left (ideal for IE9- translate3D(left,top,0) fallback)
- zoom: for scale on IE8 fallback
- backgroundPosition
- window scroll
Base Distribution (9Kb min)
This distribution is much lighter and more suitable for most projects:
- size: width and height
- transform: translate3D, scale, rotateX, rotateY, rotateZ
- position: top, left (ideal for IE9- translate3D(left,top,0) fallback)
- zoom: for scale on IE8 fallback
- window scroll
#jQuery Plugin That's right, there you have it, just a few bits of code to bridge the awesome kute.js to your jQuery projects.
What else it does
- computes option values properly according to their measurement unit (px,%,deg,etc)
- properly handles IE10+ 3D transforms when elements have a perspective
- it converts RGBA & HEX colors to RGB and tweens the inner values, then ALWAYS updates color via HEX
- 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 style property value as initial value (via currentStyle || getComputedStyle)
- allows you to add 3 different callbacks: start, update, finish, and they can be set as tween options (so no more nested functions needed)
- since
translate3Dis best for performance, kute.js will always uses it - accepts "nice & easy string" easing functions, like 'linear' or 'exponentialOut' (removes the use of the evil
eval, making development easier and closer to fast development standards :) - uses 31 easing functions, all Robert Penner's easing equations
- like mentioned above, for IE8
zoomis used fortransform: scale(0.5), it's not perfect as the object moves from it's floating point to the middle, and some left & top adjustments can be done, but to keep it simple and performance driven, I leave it as is, it's better than nothing.
Browser Support
Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills.io. Also kute.js needs to know when doing stuff for IE9- like my other scripts here, I highy recommend Paul Irish's conditional stylesheets guides to add ie ie[version] to your site's HTML tag.
Demo
coming soon..