jsAnim is a little but incredibly powerful JavaScript library entirely devoted to JavaScript animations. After taking a look at the demo page and the online documentation, I decided to try to combine jQuery animations with jsAnim animations to avoid the use of several jQuery plugins to accomplish the same tasks. jsAnim doesn't use any wrapper nor shortcuts and it's extremely easy to use when you get the habit of thinking in a sequential way. In fact, jsAnim animations can actually be split into several steps and, what's more important, you have the total control over these steps even within an animation in progress.
First, you have to create a jsAnim manager object to handle all the animations on a given element. Second, you have to specify an element to be animated, like so:
var jsAManager = new jsAnimManager(40);
var animated = jsAManager.createAnimObject('test');
The parameter of the jsAnimManager indicates the frames per-second within each animation. Instead, the createAnimObject() method accepts as its sole parameter the ID of a given element.
Then you can use the add() method of the newly referenced animated object to create an animation. This method accepts an object literal as its argument with several properties and methods inside (see the documentation for details). For example, we first increase the width and the height of our element:
animated.add({
property: Prop.width,
from: $('#test').width(),
to: 200,
duration: 1000,
onComplete: function() {
animated.add({
property: Prop.height,
from: $('#test').height(),
to: 200,
duration: 1000,
onComplete: function() {
//... more code here
To access a CSS property with jsAnim you have to use the property reference and the Prop object. Then you have to specify an initial value
(from) and a final value (to). In this case we use jQuery's methods to get these values. When an animation is complete, you can invoke the callback function of the onComplete event. In this case we simply add another animation, thus creating a chain.
jsAnim allows also for changing the text color and background color of an element. This is exactly the same thing that you can achieve with the jQuery's Color plugin, but in this case the animation is really smooth:
animated.add({
property: Prop.backgroundColor,
to: new Col(192, 192, 192),
duration: 1000,
// more code here
In this case, the to property accepts the Col object as its value. This object requires the color value to be specified with the RGB notation.
Now let's try something more advanced, such as an elliptical effect:
onComplete: function() {
jsAManager.registerPosition('test');
animated.add({
property: Prop.positionCircle(true),
to: new Pos(250, 50),
duration: 1000,
// more code here
First, we have to get the current position of our target element by calling the registerPosition() method of the jsAnim manager object. Then we can use the positionCircle() method of the Prop object and the set its target position using to and the Pos object. This object accepts two parameters which correspond to the x and y axes.
Now jQuery. We can add the animate() method as follows:
onComplete: function() {
$('#test').css('position', 'absolute').animate({
top: '50%',
left: '50%',
margin: '-50px 0 0 -50px'
}, 1000, function() {
$(this).css('backgroundColor', 'orange').animate({
left: 8,
margin: 0
}, 1000, function() {
$(this).animate({
top: 8,
width: 100,
height: 100
}, 1000);
});
});
}
As you can see, we can use jQuery as always. You can see a demo below.