Animation Scripts, Libraries and Plugins

Recently, I’ve bookmarked a bunch of animation-related scripts, libraries, and plugins. Although CSS3 has certainly made animation easier for us, sometimes we need a little bit of help.

There are other libraries that are more popular than these (like Raphaël.js), but these are some mostly lesser-known scripts that I’ve stumbled across in recent months.

prepareTransition (jQuery plugin)
“The prepareTransition plugin sets display and visibility to override any existing display and visibility properties. This ensures that the element can still animate without issue.”

Rekapi (library)
This library helps you make “beautiful <canvas> and DOM animations”. Some demos provided include an animated graph, animating the GitHub mascot, and animated pie charts. Rekapi also allows you to export your DOM animations to CSS3 keyframes.

GFX (library)
“GFX integrates CSS3 transforms and transitions into jQuery, making it stupidly simple to create sophisticated and gorgeous animations.” The main page has four cool examples.

CAAT (toolkit)
This one seems quite complex, but looks mega-cool. It’s described as “a multi-instance director-based scene-graph manager [that] is able to render using Canvas, WebGL and CSS with the same code base.” Probably not for everyone, but an option for those looking for more fine-grained control over animations.

three.js (library)
“Three.js is a a library that makes WebGL – 3D in the browser – very easy. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.”

tQuery API (library)
This small library that mimics the jQuery API and works on top of three.js, helping developers have an easier time writing plugins based on three.js.

EasyTransform (library)
Not strictly animation related, but in the same area, and might be used along with animations. This API lets you manipulate already transformed elements using JavaScript, but it simplifies the API so that it’s easier to work with than what JavaScript offers natively.

jCS Media Library (library)
jCS helps you “create complex animations that look the same on IE7+, Android, and iPhone/iPad”, without Flash, Silverlight, or HTML5.

jQuery Transit (jQuery plugin)
“Super-smooth CSS3 transformations and transitions for jQuery.” Lots of simple examples on the main page.

Morf.js (library)
“Morf.js is a JavaScript work-around for hardware accelerated CSS3 transitions with custom easing functions.” With it you can “produce CSS transitions with more compelling effects than just linear, ease, ease-out, ease-inor cubic-bezier.”

More?

There are a bunch more available on Micro.js (which is a JavaScript library search engine thingy). If you know of any others or if you’ve produced an animation-related script or plugin, feel free to share it in the comments.

Related posts:

1. Parallax Scrolling Scripts and Plugins
2. Triggering CSS3 Transitions With JavaScript
3. Introducing: Animation Fill Code