Most Promising JavaScript Animation Library and Plugin

A showcase of the most promising JavaScript Animation Library and Plugin around the Web and a short tips on how to use them to spice up your design.

1. Scripty2

Scripty2 is a powerful, flexible JavaScript framework to help you write your own delicious visual effects & user interfaces.

Sample Usage

Include this line in your HTML:

view plaincopy to clipboardprint?

1. "prototype.scripty2.min.js" type="text/javascript">  

The following line shows the code used in the scripty2 demo page.

view plaincopy to clipboardprint?

1. //for the snake effect of the cards in the demo  
2.   
3.       document.observe('cards:snake', function(){  
4.         var d = 20;  
5.         names.sortBy(Math.random).each(function(card, index){  
6.           $(card).morph(  
7.             'margin-left:'+[-300,300,-150,150][index%4]+'px;margin-top:'+  
8.             (272+(index-names.length/2)*d)+'px;left:371px;z-index:'+index, {  
9.             propertyTransitions: {  
10.               marginLeft: 'mirror', marginTop: 'bouncePast',  
11.               left: 'swingFromTo', zIndex: zIndexTransition  
12.             },  
13.             duration:2  
14.           }).morph('margin-top:272px;left:'+(371+(index-names.length/2)*d)+'px', {  
15.             propertyTransitions: { marginTop: 'easeInCirc', left: 'linear' },  
16.             duration:1, delay:index/15  
17.           }).morph('margin-top:'+(272-(index-names.length/2)*d)+'px;left:371px', {  
18.             propertyTransitions: { marginTop: 'easeOutCirc', left: 'linear' },  
19.             duration:1  
20.           });  
21.         });  
22.       });  
23.   
24.    (function(){  
25.         document.fire('cards:snake');  
26.       }).delay(2);  
27.     })();  

Visit Scripty2′s Site

2. jsAnim

jsAnim is a powerful, yet easy to use library for adding impressive animations to websites, without sacrificing standards or accessibility. Weighing in at just under 25 kilobytes, jsAnim packs a lot of punch for such a little application.

Sample Usage

Include the following line of code in to your page.

view plaincopy to clipboardprint?

1.   
2. "text/javascript" src="jsAnim.js">  
3. "text/javascript" src="main.js">  

Create your main.js file and paste the following code below.

view plaincopy to clipboardprint?

1. var manager = new jsAnimManager();  
2.   
3. aniMe = document.getElementById("animateMe");  
4.   
5. aniMe.style.position = "relative";  
6.   
7. var anim = manager.createAnimObject("animateMe");  
8.   
9. anim.add({property: Prop.left, to: 500, duration: 2000});  

Visit jsAnim’s Site

3. Spritely

Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a ‘sprite’ image contains two or more ‘frames’ of animation, whereas a ‘pan’ image contains a continuous image which pans left or right and then repeats. Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won’t look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element.

Sample Usage

Here’s a quick example to get you started… The following method animates one of the bird ‘sprites’ flying around this page. The ‘sprite’ is composed of three frames in a transparent png image, where each frame is side by side:

Now we simply need to create a div called ‘bird’, style it to exactly the correct size (180×180 pixels in this case), and animate it with the sprite() method. The two options we need to use are ‘fps’ (frames per second) and ‘no_of_frames’, e.g. three frames for the above image:

view plaincopy to clipboardprint?

1. $('#bird').sprite({fps: 12, no_of_frames: 3});  

To make the mouse attract the sprite when you click the screen, use this:

view plaincopy to clipboardprint?

1. $('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();  
2. $('body').flyToTap();  

The active() method makes this sprite the active sprite on launch – otherwise a sprite withactiveOnClick() becomes active only when you click it (or touch it using an iPhone/iPad).

The $('body').flyToTap() method watches for a click on the page at which point, after any current move is complete, the sprite moves to the clicked location. After a few second, if a random movement method has been applied (see below), it then moves away again.

Visit Spritely’s Site

4. $fx()

$fx() is a tiny, self-contained Javascript library for animating HTML elements. It doesn’t require any other library to function and [should] play well with any other libraries you are using (Prototype, JQuery, Moo tools, etc.)

$fx() allows you to alter any CSS property along a timeline, allowing animated effects to play in succession — i.e. in the order you want them to. It handles all of the headaches of timer controls and makes it easy to animate anything from simple, subtle animations.

$fx() also offers the ability to combine adjustments to CSS properties for combined effects, and allows you to set multiple callbacks, offering more flexibility.

Sample Usage

How to add and run single, simple effect

First you will need an element. Any element will do (let’s assume it’s:

). You then call $fx() and pass reference to the element as described above.

view plaincopy to clipboardprint?

1. $fx('myDiv')  

Then, you can add effects by calling to $fxAdd(...).

view plaincopy to clipboardprint?

1. $fx('myDiv').fxAdd({type: 'fontSize', from: 12, to: 72, step: 1, delay: 20});  

Then run it!

view plaincopy to clipboardprint?

1. $fx('myDiv').fxAdd({type: 'fontSize', from: 12, to: 72, step: 1, delay: 20}).fxRun(null,-1);  

Visit $fx() Site

5. moo.fx

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.

It’s very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won’t let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it.

Sample Usage

Code below is used for the draggable ball in the moo.fx’s homepage.

view plaincopy to clipboardprint?

1. var ball = $('header').getElement('h1');  
2. var ballfx = new Fx.Styles(ball, {duration: 1000, 'transition': Fx.Transitions.Elastic.easeOut});  
3. new Drag.Base(ball, {  
4.     onComplete: function(){  
5.         ballfx.start({'top': 13, 'left': 358});  
6.     }  
7. });  

Visit moo.fx’s Site

6. Raphael

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Sample Usage

View this animation demo here to see how awesome this framework is.

Code below is used in the demo which transforms the circle to ellipse from one place to another.

view plaincopy to clipboardprint?

1. // Ellipse  
2. (function () {  
3.     r.circle(40, 90, 20).attr(dashed);  
4.     r.ellipse(140, 90, 20, 10).attr({fill: "none", stroke: "#666", "stroke-dasharray": "- ", rotation: 45});  
5.     var el = r.ellipse(40, 90, 20, 20).attr({fill: "none", stroke: "#fff", "stroke-width": 2}),  
6.         elattrs = [{ry: 10, cx: 140, rotation: 45}, {ry: 20, cx: 40, rotation: 0}],  
7.         now = 0;  
8.     r.arrow(90, 90).node.onclick = function () {  
9.         el.animate(elattrs[now++], 1000);  
10.         if (now == 2) {  
11.             now = 0;  
12.         }  
13.     };  
14. })();  

View more demo in their homepage.

Visit Raphaël’s Site

7. Burst Engine

The Burst Engine is an OpenSource vector animation engine for the HTML5 Canvas Element. Burst provides similar web functionality to Flash and contains a layer based animation system like After Effects. Burst uses a very light-weight JavaScript frame, meaning your animations will download un-noticeably quick and can be controlled using very simple JavaScript methods.

Sample Usage

Burst allows you to build complex animation chains very quickly and easily hook them into the view & control layers of any web application. Being able to chain, clone, ease and callback your animations allows the kind of script building flexibility found in jQuery.

view plaincopy to clipboardprint?

1. Burst.timeline("party", 0, 800, 1, false)  
2.   .shape("balloon", "balloon3.svg", "svg", 0, 0, .5, 0)  
3.   .shape("cake", "cake2.svg", "svg", 0, 0, 1, 0)  
4.     .track("left")  
5.       .key(1, -320, 'easeInOutQuad')  
6.       .key(200, 0)  
7.   .shape("balloon")  
8.     .track("top")  
9.       .key(0,320)  
10.       .key(100,320)  
11.       .key(800, -320)  
12.     .track("left")  
13.       .key(0,0)  
14.       .key(100, 0, 'easeOutBounce')  
15.       .key(800,120);  
16.   
17. Burst.start("party;", function(){  
18.     alert("Time for bed!");  
19. });      
20.   
21. Burst.play();  

Run this Code!

8. Canvas 3d JS Library (C3DL)

The Canvas 3D JS Libary (C3DL) is a JavaScript library that will make it easier to write 3D applications using WebGL. It provides a set of math, scene, and 3d object classes that makes WebGL more accessible for developers that want to develop 3D content in browser but do not want to have to deal in depth with the 3D math needed to make it work.

Visit C3DL’s Site

Thanks for taking your time to read.