Skip to content
Lightest Tweening Engine for jQuery
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
src
LICENSE
README.md
index.html

README.md

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 writing init(), animate() and update() over and over again?
  • Supports most popular transitions such as transform, opacity, color and backgroundPosition for up to 60 frames per second.
  • Can also do smooth scrollTo
  • It's about 8k minified and plus 6k of tween.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

jQueryTween

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 or onComplete 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) and position (top,right,bottom,left)
  • tween control: play/pause/stop
  • tween scrollTo window or target
  • tween text color and background-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.

You can’t perform that action at this time.