10 Impressive JavaScript Animation Frameworks

Jun 28 2009 by Jacob Gube | 48 Comments

Complex and slick JavaScript-based animation has been made easier with the emergence of frameworks and libraries that give developers the ability to create stunning and eye-grabbing animation and transition effects that make it easy these complex tasks.

In this article, you will read about the top 10 JavaScript-based animation frameworks and libraries that will enable you to create engaging and captivating user experiences.

1. $fx

$fx

$fx is a compact and lightweight JavaScript animation library which extends native JavaScript DOM methods with its own animation methods and functions. Its small file size (weighing in at only 3.7 KB), hassle-free implementation, and low learning curve makes $fx a powerful option for adding eye-popping animation effects to your web projects. Check out the Examples section on the Manuals page to see the library in action.

2. jsAnim

jsAnim

Created by web developer Kevin Dolan, jsAnim is a JavaScript animation framework for creating high-impact and slick animation sequences for web interfaces. Crafted with standards and best practices in mind, jsAnim allows you to create stunning animation effects without sacrificing web accessibility of your web projects.

3. scripty2

scripty2

scripty2 is a flexible and lightweight JavaScript animation framework for developing delicious visual effects. The project is still young (alpha), but you can already see its impressive capabilities in the scripty2 demo page which shows examples that rival Flash-based objects in smooth, seamless, and complex animations.

4. GX

GX

GX, developed by Italian web developer Riccardo Degni, is a compact (10KB uncompressed animation effects library that puts strict web standards and best practices at the forefront of its development philosophy. Built on top of jQuery, but heavily influenced by MooTools development patterns, you can customize your GX download to include only the parts you need, making your scripts optimized for file size. Check out the GX Demos to see its capabilities.

5. Glimmer

Glimmer

Glimmer is a framework for easily creating interactive elements on your web pages. Glimmer comes with wizards GUIs, reducing your coding requirements and guaranteeing standardization across your projects. Check out the Image-Sequencer demo to see Glimmer’s animation capabilities. It’s written on top of the popular jQuery library.

6. Animator.js

Animator.js

Animator.js is a class-based way for implementing JavaScript-based animation effects. Its design and development principles follow OOAD, which promotes maintainable and high-lifetime development of applications. Thus, it syntax is prototypal and object-oriented, reminiscent of MooTools and Prototype.js syntax.

7. Scriptio

Scriptio

Scriptio is an open source framework for animation and presentational elements to enhance and enrich the learner’s web experience. Scriptio is easy to learn and its terse syntax makes it great for fast prototyping. View the Scriptio Examples page where you will find eight cool demos that exemplify this framework’s abilities.

8. Processing.js

Processing.js

Processing.js is a fully featured framework for scripting images, animation, and interaction developed by jQuery library creator, John Resig. Processing.js is a JavaScript port of the open source Processing project. You should check out the Exhibits page to see full-production implementations of Processing.js.

9. Run

Run

For developers looking for a simple means of animating content, Run, a universal JavaScript animation framework, is the definitive way to go. Run emphasizes on ease-of-use as shown by its intuitive syntax and copious amounts of documentation. Run has also been tested on a wide array of web browsers, ensuring utmost cross-browser compatibility. Head over to Run’s Example page to see the project in action.

10. Burst Engine

Burst Engine

Burst Engine is an open source vector animation framework for HTML 5’s Canvas element. Burst provides smooth, slick, and complex animations that will surely leave a memorable impression upon viewers. To see Burst in action, check out the 3D Engine demo (and prepare to get very impressed).

Related content

48 Comments

Aaron Wright

June 28th, 2009

How didn’t moo.fx make this list?! I thought it was hugely popular…

syikin

June 28th, 2009

interesting.. i should try them out, need one of those to put up in my sites

stelt

June 28th, 2009

A different option: use SVG ?

BryanRegencia.com

June 28th, 2009

Good stuffs! Can these be done in jQuery as well? Btw, thanks for sharing.

Eric

June 28th, 2009

What exactly is the biggest animated-JS framework?
These are impressive (esp. “$fx”) but what’s the one that everyone is using? What’s the one that is the most expansive in terms of creativity?

tim

June 29th, 2009

How could scriptaculous didn’t make it to the list?

joe

June 29th, 2009

i am not sure how you choose these as top ten. But apparently, YUI and jQuery can perform similar task.

Mohammad

June 29th, 2009

Good , Jquery is better and easy !

omtay38

June 29th, 2009

Neat list. Never thought of javascript frameworks from just an animation standpoint. As for me, I think I’ll stick to my tried-and-true jQuery.

明城

June 29th, 2009

there is another animation toolkit which named “Motion”(Chinese): http://lab.gracecode.com/motion/

Heiko Schmieder

June 29th, 2009

Great list! Remember used jScript in the 90s for menus.
thx | bookmarked

Krewetka

June 29th, 2009

“Can these be done in jQuery as well?”

This libraries are something different…these are ANIMATION libraries which are made with purpose of making animation easier :)

This is something more that jQuery, Prototype or MooTools :)

Personally I tried Processing (but not js version) and I loved it :) It’s something like modified version of java language created for animation purposes

Check this example http://balldroppings.com/js/

Nicolas

June 29th, 2009

the infovis toolkit ain’t bad either http://thejit.org

Santana

June 29th, 2009

w0o0w great stuff thank u i like the first one and second one and glimmer thank u nice site!! =]

princess

June 29th, 2009

yes,they are impressive.

adam

June 29th, 2009

yep, jQuery has both pre-defined animation shortcuts and several “roll your own” methods, along with even more options in the UI effects library.

The basics (provides a few prebuilt effects and all the “roll your own” functions required:

http://docs.jquery.com/Effects

UI (provides easing and some additional pre-built effects):

http://docs.jquery.com/UI/Effects

Dman

June 29th, 2009

@BryanRegencia
-Read the description for #5 all the through to get your answer.

On topic….

I checked them all out and I like what I see. They will definitely be of help. Thanks!

Oliver Burkill

June 29th, 2009

You missed this, most impressive of all I think
http://code.google.com/p/cakejs/

Paul Radich

June 29th, 2009

Some of these have nice specialty functions but for my every day it’s jQuery.

woniu

June 29th, 2009

it’s great!

Thad

June 29th, 2009

This will be very useful. Time SAVER!

Dan

June 29th, 2009

This list is bizarre. Glimmer is not a framework, it’s a GUI tool for implementing jQuery effects.

Scripty2 reference doesn’t make note that it is the second version of Scriptaculous.

Has the author even tried these tools? Or are they just randomly posting crap?

Ben

June 29th, 2009

Raphael should be on the list

http://raphaeljs.com/

Janko

June 30th, 2009

I use jQuery for simple animations, but I’ll have to give one of these a try just to make sure they can’t do better than jQuery. I that case, I will have one more framework to deal with :)

Justin

July 1st, 2009

@Dan… Chill man, no one likes you

Kevin Dolan

July 2nd, 2009

I especially like jsAnim, the second one on the list! ;)

Danny

July 3rd, 2009

Hmm, just quickly tested some of the scripts with the examples on their websites. What struck me is that ‘Run’ doesn’t appear to work in my firefox 3 browser. It does however work in IE6. Don’t know if I would like to call ‘Run’ impressive.

Ryan Morr

July 4th, 2009

No love for FX? That’s OK, but for anyone who is interested, I just released version 2 over at my blog: http://ryanmorr.com/archives/fx-2-0-the-full-featured-animation-framework

Frank West

July 6th, 2009

A remember years back a discussion I had with a colleague… One day Javascript will be a better alternative to Flash. He never listened.

Good article!

Karsten Januszewski

July 6th, 2009

Hi – First thanks for the shout out about Glimmer –http://visitmix.com/lab/glimmer

Second, for those asking about using jQuery, that’s what Glimmer in fact does: it is an IDE for jQuery, allowing a designer to create animations and, under the hood, Glimmer generates jQuery code. One of the main reasons we wrote Glimmer was when we realized the kind of animation that one can do with javascript. However, it is still pretty tough for a designer to create animations, which is why we built the Glimmer tool.

Philip

July 12th, 2009

Karsten,

I think your market could expand if you create your tool for Mac OSX as well.

Chris van Rensburg

July 27th, 2009

The UIZE JavaScript Framework has just released an upgrade to its animation system. Tasty new motion effects are now possible with the support for curve functions. The Curve Explorer tool lets you experiment with, visualize, and preview curves that can be used to control motion… http://www.uize.com/tools/curve-explorer.html

Boussacsou

July 28th, 2009

jquery still the best !!

John

August 11th, 2009

Here u can see an example of animation widh prototype and scriptaculous:

http://sviudes.blogspot.com/2009/08/quieres-poner-shin-chan-paseando-por-tu.html

Ocim

September 11th, 2009

they are impressive

Emma

September 13th, 2009

hi – ive been playing around with jsAnim but theres not too much in terms of support considering im pretty much a javascript newbie :S Im progressing a little but wondered if maybe I could ask a couple questions to some one whos more familiar with it?

Happy to credit you :)

Any help would be great, the project is a gift for someone id like to impress them :)

F1LT3R

September 18th, 2009

Yeah I feel like Raphael was missing too. Especially with it’s tweening functions.

Sahin

December 5th, 2009

Excellent group of tools. I love the $fx. That is really helpful.

Antonio

February 5th, 2010

Where is animej.codeplex.com?

Luke

February 19th, 2010

Love your list! Having tried some out, I decided to make my own very light library. It’s not as good as these, but has 14 REALLY easy to use operations. It allows for movement around the page, growing and shrinking and fading in and out. I use it as it is simple to call, and writing wrapper functions for it are not hard. Anyhow, if anyone wants to try it out, here it is: http://opensourcesurfer.co.uk/index.php?p=simple_anim

Kria

April 29th, 2010

I guess the author has not made a detailed study before publishing this list.. not so accurate

Webpolis

August 24th, 2010

Nothing new. jQuery does the same and much more. Its ‘animate’ method will ease your work.

Julien

September 21st, 2010

processingjs is by far the most impressive, add that to jQuery and you’re ready to forget flash

Roy

September 22nd, 2010

awesome js script, best!

hadie danker

December 2nd, 2010

Yeah I feel like Raphael was missing too. Especially with it’s tweening functions.

Alex

February 19th, 2011

Hm… Nice list) And what do you think about my js framework – jCanvaScript? Is it good for work with canvas? You can read documentation at http://jcscript.com/documentation

shekhar_pro

April 29th, 2011

Really nice list..
Is burstengin is the only one for or there are others too..

Leave a Comment

Subscribe to the comments on this article.