|
Relates:
- Top 10 JavaScript Frameworks by Google, Yahoo, Bing
- MooTools: a Compact JavaScript Framework
- 10 Tiptop Animations with JavaScript Framework
JavaScript is the one of the most utilized and popular programming
language, because a large majority of the browsers are compatible with
it. In addition, JavaScript has become very popular, very quickly,
because it is uncomplicated, straightforward, and has a wide-range of
capabilities. Flash, on the other hand, requires the installation of
Flash player, it is not compatible with all browers, and has problems
with accessibility, though Flash allows for great animation. However,
many developers, myself included, prefer using JavaScript to make
animations because JavaScript is light weight and even if it is
disabled the content will remain accessibile. Here are some examples of
Javascript animation frameworks that are really worth checking out!
Enjoy!
Animator.js
It's a general purpose library for creating animated transitions
between two states. It's small, flexible, and allows you to use CSS as
a language to define the animation states.
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.
Canvas 3D
The Canvas 3D JS Libary (C3DL) is a javascript library that will
make it easier to write 3D applications using canvas 3d. It will
provide a set of math, scene, and 3d object classes to make the canvas
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.
Facebook Animation Library
FBJS exposes a powerful animation library which gives developers an
easy way to improve their user interface with a line of code or two.
All animations are CSS based, so a working knowledge of CSS will really
help you out here. An open-source version of FBJS Animation that will
work on pages outside of Facebook.
$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.)
Glimmer
Glimmer allows you to easily create interactive elements on your web
pages by harnessing the power of the jQuery library. Without having to
hand-craft your JavaScript code, you can use Glimmer's wizards to
generate jQuery scripts for common interactive scenarios. Glimmer also
has an advanced mode, providing a design surface for creating jQuery
effects based on your existing HTML and CSS.
GX
GX is a full-featured, cross-browser, super-tiny (10kb uncompressed)
Javascript Animations Framework. Using GX you can create complex
animations working with every w3c CSS property.
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.
JSTweener
JSTweener is tween library for JavaScript.
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.
Pixastic
Pixastic is a JavaScript library which allows you to perform a
variety of operations, filters and fancy effects on images using just a
bit of JavaScript.
Processing.js
Processing.js is an open programming language for people who want to
program images, animation, and interactions for the web without using
Flash or Java applets. Processing.js uses Javascript to draw shapes and
manipulate images on the HTML5 Canvas element. The code is
light-weight, simple to learn and makes an ideal tool for visualizing
data, creating user-interfaces and developing web-based games.
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.
script.aculo.us
script.aculo.us provides you with easy-to-use, cross-browser user
interface JavaScript libraries to make your web sites and web
applications fly.
Scriptio.us
Scriptio is an open source framework for presenting animations and
educational content in a rich online experience. Featuring an
easy-to-learn scripting language for fast prototyping and
production-quality development, Scriptio is designed for rich Web 2.0
applications.
Scripty2
scripty2 is a powerful, flexible JavaScript framework to help you write your own delicious visual effects & user interfaces
xAnimation
Using xAnimation is easy. Create an xAnimation object and call one
of the animation methods. You can then use the pause/resume methods.
The init/run methods and the xAnimation properties are documented here
to help you write your own animation methods. xAnimation provides an
animation "engine" which supports up to three axes of animation,
multiple acceleration types and an onEnd handler. The onEnd handler can
return true to cause the animation to repeat. It supports a bounce-back
feature. Acceleration is implemented as an array of functions so it is
easy to add custom acceleration types.
|