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.
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!
2011 06 18 - r2
- Added new utility methods getAll and removeAll for getting and removing all tweens (paullewis)
2011 05 18 - r1
- Started using revision numbers in the build file
- Consider this kind of an stable revision :-)
People who have contributed directly or indirectly to this project :-D
sole, mrdoob, Robert Eisele, Robert Penner, Philippe Elsass, Paul Lewis