This post presents tween.js and how you can use it to easily smooth your animation. tween.js is a “super simple, fast and easy to use tweening engine” from sole. It provides tweening and full blown animations thanks to chaining. Let’s get started! But first, here is a demo using tween.js. It has basic parameters for you to play with and get a feel of what tweening may be.
Tweening… what’s that?
From wikipedia article, tweening is an abreviation of inbetweening, i
dont know why but i find that funny maybe because inbetweening isnt a word to begin with.
Let’s get back to business, what is a tween? It is a interpolation between 2 values,
source to the
The tween will simply generate the needed values needed inbetween those 2 limits. The key is where
are those values.
This is done with the ease function. The most obvious one is to go straight from
target. This is the linear function you see on on the right.
But some are more funky, you can see Elastic EaseInOut on the left and see Cubic EaseInOut on the right. Many others exist for our delight as you can see here.
First include the library
Now that we got some understanding of concept, let’s see how to use it. We start by simply including the library file in the page. Download it there
Now Let’s Create a Tween
Let’s see how it is used in the demo.
A practical case is less dry than a theorical explaination, and you can tweak the demo after that.
So our case will be to move a sphere
x position back and forth, say between 0 to 400, and
y between 300 to 50.
First we define the original
position and the
position variable will be updated by tween.js with new values until it is equal to
Then we create the tween object which do the job for us.
1 2 3
Noticed the 2000 at the end? It means the tween will last 2 seconds.
tween variable will make position.x goes from 0 to 400 and position.y
from 300 to 50 in 2 seconds. To make the 3D object moves along, we need to be
notified at every modification. This is done with
If you want to be notified at the end of the tween, use
1 2 3 4
Want to Tweak it?
Let’s customise it some more. what is about delaying the begining of the tween by say 500 milliseconds for the fun of it.
Obviously you can change the ease function too.
Choose any one you like among the 31 from tween.js.
Let’s pick the funny one on the right, it is
Ok now the tween is fully configured, let’s run it. First we tell the library the configuration is over and it can start the tween.
Then we periodically update the tweens we got. This code fits well in the render loop.
And you are done. Now you can go crazy and put tweening everywhere! In object position like we did here, in colors, or in scale, anywhere, feel free to use/abuse it.
Chaining Tweens for Animation
has an endless animation, the sphere going back and forth until the end of time.
How do we do that? we chain tweens. They
will be executed one after the other.
chain() provides a easy way
to build longer, more varied animations. Suppose we got
1 2 3 4