jQueryTween is not the lightest anymore, I highly recommend using my kute.js
Lightest Tweening Engine for jQuery / busted
- A super light & simple jQuery plugin that works as a controller for
tween.js(javascript animation engine), and for jQuery users, makes work alot easier. Imagine writinginit(),animate()andupdate()over and over again? - Supports most popular transitions such as
transform,opacity,colorandbackgroundPositionfor up to60frames per second. - Can also do smooth
scrollTo - It's about
8kminified and plus6koftween.js, you can do a ton of cool things without the need to use expensive or complicated animation engines. - This one is simple, light and I dare to say it's much more performance driven when it comes to simple tweens.
- Keep in mind that
tween.jsis not included into the jQueryTween plugin, except for the AIO package. See demo for details.
- works with jQuery, yes I know it's cool for n00bs and scary for advanced devs
- developer friendly and heavily documented
- commercial use friendly license
- can use all tween.js easing functions, can do delays and repeats
- supports callback functions to be used for
onUpdateoronCompleteevents performancetweaks, when only a few tween properties are used, the others don't update- for most properties you don't need to set an initial value, it gets it's current properties values, except
transform(translate,rotate,scale) andposition(top,right,bottom,left) - tween control: play/pause/stop
- tween
scrollTowindow or target - tween text
colorandbackground-color - tween
position: top, bottom, left, right (for absolute/relative positioned objects) - tween
background-position, but only when using percent values for X and Y - tween
transform-translate3d - tween
transform-rotateX,rotateY,rotateZ - tween
transform-scale - tween
opacity
//Simple example jQueryTween syntax, very simple indeed
$('#selector').jQueryTween({ to: { opacity: 0.5, translate: {y: 50} }, duration: 700 });
Please notice that it's best to use a unique ID selector to perform an jQueryTween animation, you don't want all your things to fly around.
// Complex example jQueryTween syntax
$('#selector').jQueryTween({
from: {
opacity: 1,
translate: {x:0, y:0, z:0},
rotate: {x:0, y:0, z:0},
scale: 1
},
to: {
opacity: 0.5,
translate: {x: 150, y: 50, z: -100},
rotate: {x: 5, y:15, z:-25},
scale: 1.5
},
repeat: 2, // can be number or 'Infinity'
duration: 1500,
easing: TWEEN.Easing.Exponential.InOut, // my favorite
delay: 500,
}, function() {
//do some cool stuff when tween finished animating
}, function() {
//do some cool stuff while tween is running
});
// Scroll to top of window
$('#button').on('click', function() {
$('body').jQueryTween({ to: { scroll: 0 } });
});
// Scroll to element when clicking anchor links
$('a#button').on('click', function(e) {
var target = $( $.attr(this, 'href') );
$('#element').jQueryTween({ to: { scroll: $(target).offset().top } });
});
// stops all the object's tweens
$('.selector').stop();
// pauses all the object's tweens
$('.selector').pause();
// resumes all the object's tweens
$('.selector').play();
- tween to relative values (such as "+200" or "-150") does not work properly with some properties
- tweening background position only works for percent values
- tween chaining is not implemented
- does not tween text properties, spacing, etc, only what's shown in the examples
- scroll events are only available for document.body, no other containers available
jQueryTween is licensed under MIT.
Please feel free to fork, report issues or donate.
