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 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-in or 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.
Hi there I wanted to point out another animation library for Javascript:
Greensock Tweening Platform
Greensock was the driving platform behind most good AS3 content and he did a nice job porting the platform to Javascript. Very fast, robust, easy to use, well designed and for free for most of the projects.
Cheers
I just found this post discussing a library called Greensock:
http://ahrengot.com/tutorials/greensock-javascript-animation/
Very impressive animation demonstrated right on that page.
And here’s a GitHub Wiki with some others:
https://github.com/bebraw/jswiki/wiki/Animation-libraries
Cool new library site called JSter, here is their animation libraries page:
http://jster.net/category/animation-libraries
This new framework apparently has animation capabilities:
http://qatrix.com/
Here’s another one called “Collie”:
http://jindo.dev.naver.com/collie/index.html
jQuery.isAlive is a javascript/CSS3 animation plugin for jQuery that allows you to create advance effects like parallax web pages in very a short time without JS experience. It is compatible with IE7 to IE11 and all mobile browsers.
It has touch events included and detects when a browser knows CSS3 animations or will fallback to javascript animations. Best of all it is free to use:
Here is the manual with examples:
http://www.we-code-magic.com/software/isAlive/manual/
And Github link:
https://github.com/georgecheteles/jQuery.isAlive
A site that already use it:
http://www.reea.net/
For any question:
george@we-code-magic.com
Enjoy
Thank you so much for sharing) As you mentioned in your article there are libraries for WebGL technology like three.js. I found an article recently revealing more libraries – https://www.visartech.com/blog/interactive-3d-graphics-with-webgl/. Hope it will be useful. There are also more detailed information about an innovative technology like WebGL.