Menu

10 Impressive JavaScript Animation Frameworks

Advertisement

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

This was published on Jun 28, 2009

48 Comments

Aaron Wright Jun 28 2009

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

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

A different option: use SVG ?

BryanRegencia.com Jun 28 2009

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

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?

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

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

Mohammad Jun 29 2009

Good , Jquery is better and easy !

omtay38 Jun 29 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.

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

Heiko Schmieder Jun 29 2009

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

Krewetka Jun 29 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 Jun 29 2009

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

Santana Jun 29 2009

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

princess Jun 29 2009

yes,they are impressive.

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

@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 Jun 29 2009

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

Paul Radich Jun 29 2009

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

it’s great!

This will be very useful. Time SAVER!

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?

Raphael should be on the list

http://raphaeljs.com/

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 :)

@Dan… Chill man, no one likes you

Kevin Dolan Jul 02 2009

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

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 Jul 04 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 Jul 06 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 Jul 06 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.

Karsten,

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

Chris van Rensburg Jul 27 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 Jul 28 2009

jquery still the best !!

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

Krishna Kishore Sep 11 2009

they are impressive

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 :)

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

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

Antonio Feb 05 2010

Where is animej.codeplex.com?

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

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

Webpolis Aug 24 2010

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

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

awesome js script, best!

hadie danker Dec 02 2010

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

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 Apr 29 2011

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

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners