tween.js

Javascript Tweening Engine

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

We are still developing this so the API might change from commit to commit.

Examples

Projects using tween.js

Usage

Download the minified library and include it in your html.

<script type="text/javascript" src="js/Tween.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 type="text/javascript">

	TWEEN.start();

	var output = document.createElement('div');
	var target = document.getElementById('target');
	target.appendChild(output);

	var position = {x: 50, y: 0};
	var tween = new TWEEN.Tween(position).to({x: 400}, 2000).onUpdate(update).start();

	function update() {

		var newX = position.x;

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

	};

</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!

Frequently Asked Questions (FAQ)

Is there a way to control when is update() called? I'd like to use my own interval.

Yes, simply don't call TWEEN.start(), and run TWEEN.update() in your own periodically executing function instead.

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

Use the delay() method: var t = new 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

2011 10 15 - r5

• 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 :-)

Contributors

People who have contributed directly or indirectly to this project :-D

sole, mrdoob, Robert Eisele, Robert Penner, Philippe Elsass, Paul Lewis, Lechecacharro