jQueryTween
Lightest Tweening Engine for jQuery
Why jQueryTween?
- 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
,color
andbackgroundPosition
for up to60
frames per second. - Can also do smooth
scrollTo
- It's about
8k
minified and plus6k
oftween.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.js
is not included into the jQueryTween plugin, except for the AIO package. See demo for details.
DEMO
Get to know some features
- 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
onUpdate
oronComplete
events performance
tweaks, 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
scrollTo
window or target - tween text
color
andbackground-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
Quick Example
//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.
Advanced Example
// 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 });
ScrollTo Tweens
// 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 } }); });
Tween Control
// stops all the object's tweens $('.selector').stop(); // pauses all the object's tweens $('.selector').pause(); // resumes all the object's tweens $('.selector').play();
TO DO / known issues
- 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
License
jQueryTween is licensed under MIT.
You want to support the project?
Please feel free to fork, report issues or donate.