tween.js

Javascript Tweening Engine

Super simple, fast and easy to use tweening engine which incorporates optimised Robert Penner's equations.

Contributors

Examples

Projects using tween.js

Usage

Download the minified library and include it in your html.

<script src="js/tween.min.js"></script>

The following code creates a Tween which will change the x attribute in a position variable, so that it goes from 50 to 400 in 2 seconds. The anonymous function set up with an interval will update the screen so that we can see something happening:

<script>

	init();
	animate();

	function init() {

		var output = document.createElement( 'div' );
		output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px';
		document.body.appendChild( output );

		var tween = new TWEEN.Tween( { x: 50, y: 0 } )
			.to( { x: 400 }, 2000 )
			.easing( TWEEN.Easing.Elastic.InOut )
			.onUpdate( function () {

				output.innerHTML = 'x == ' + Math.round( this.x );
				output.style.left = this.x + 'px';

			} )
			.start();

	}

	function animate() {

		requestAnimationFrame( animate ); // js/RequestAnimationFrame.js needs to be included too.
		TWEEN.update();

	}

</script>

Note: this corresponds to the example 04_simplest.html that you can find in the examples folder.

Have a look at that folder to discover more functionalities of the library!

Also, Jerome Etienne has written a tutorial demonstrating how to use tween.js with three.js, and it's also great for understanding how tweens work!

FAQ

How do you set a tween to start after a while?

Use the delay() method: var t = new TWEEN.Tween({...}).delay(1000);

Is there a jQuery plug-in?

No, we like to keep it simple and free of dependencies. Feel free to make one yourself, though! :-)

Change log

2013 03 03 - r10 (5,342 KB, gzip: 2,010 KB)

• Added the ability to tween using relative values with to() (endel)

2013 02 04 - r9 (5,224 KB, gzip: 1,959 KB)

• Use window.performance.now() if available for even smoother animations (tdreyno, mrdoob and sole)
• Added tween.repeat() (sole)
• Improve example_01 performance (mrdoob)
• Use CONTRIBUTING.md instead of having the section on README.md (sole)

2013 01 04 - r8 (4,961 KB, gzip: 1,750 KB)

• New Date.now() shim by roshambo makes the lib compatible with IE
• Fix for checking undefined duration (deanm)
• Add unit tests (sole)
• Fixed non-existing properties sent in to and ending up as NaN in the target object (sole)
• Add missing example screenshot (sole)
• Add CONTRIBUTING section in README (sole)

2012 10 27 - r7 (4,882 KB, gzip: 1,714 KB)

• Fixed start time of chained tweens when using custom timing. (egraether)
• TWEEN.update() now returns a boolean (tweens pending or not). (mrdoob)
• Added tween.onStart(). (mrdoob)
• tween.chain() now accepts multiple tweens. (mrdoob)

2012 04 10 - r6 (4,707 KB, gzip: 1,630 KB)

• Returning instance also in .chain(). (mrdoob)
• Refactoring and code clean up. (egraether)
• Simplified easing formulas. (infusion)
• Added support to arrays in .to() using linear, catmull-rom or bezier .interpolation(). (egraether)
• Removed autostart/stop. (mrdoob)
• Renamed EaseNone, EaseIn, EaseOut ane EaseInOut, to None, In, Out and InOut. (mrdoob)
• Made .to() values dynamic. (egraether and jeromeetienne)

2011 10 15 - r5 (4,733 KB, gzip: 1,379 KB)

• Add autostart/stop functionalities (jocafa and sole)
• Add 07_autostart example demonstrating the new functionalities (sole)

2011 10 15 - r4

• Use Date.now() instead of new Date.getTime() as it's faster (mrdoob)

2011 09 30 - r3

• Added new time parameter to TWEEN.update, in order to allow synchronizing the tweens to an external timeline (lechecacharro)
• Added example to demonstrate the new synchronizing feature. (sole)

2011 06 18 - r2

• Added new utility methods getAll and removeAll for getting and removing all tweens (Paul Lewis)

2011 05 18 - r1

• Started using revision numbers in the build file
• Consider this kind of an stable revision :-)