10 CSS And Javascript Animation Plugins, Frameworks and Libraries

Written by Kevin Liew on 29 Nov 2011
63,605 Views • Javascript


Website animation has became one of the design trend this year, check out my previous about about website with javascript animation effects. A lot of company has started to move forward and embrace HTML5, CSS3 and Javascript trinity, though not much of intensive animation like flash, with good planning and creative thinking, simple animation with those technology are good enough to impress most of us.

Also, CSS3 animation has been a popular topic due to the rise of CSS3 even though not all browsers support it yet. Webkit browsers support CSS3 animation pretty well, firefox is getting into it. Not IE, except version 10.

In this post, I have found several javascript and CSS animation frameworks which I believe can be pretty useful to some of us who wants to start putting animation on websites.

  • jQuery TransitjQuery TransitThis jQuery plugin extends the functionality of jQuery animate and added CSS3 features such as rotate, skew, scale etc.
  • Transform.jsTransform.jsIt's a jQuery plugin but it extends the functionality of animate() and css() methods. You will able to execute a series of animation with CSS3 properties.
  • Paper.jsPaper.jsPaper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
  • Move.jsMove.jsMove.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.
  • JSAnim JSAnim http://jsanim.com/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.
  • GXGXGX 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.
  • AnimatableAnimatablePure CSS3 animation solution. Here you can see the demo of all the possible animations you can use.
  • Animate.cssAnimate.cssanimate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. A pure CSS3 animation library with predefined animation sequences.
  • $fxfxA compact, lightweight Javascript Library for animation.
  • Scripty2scriptyscripty2 is a powerful flexible Javascript framework to help you write your own delicious visual effects and user interfaces.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

1 comment
Dariel Noel 10 years ago
AniJS is another library, that allows to handle css animations easily. You can see at http://anijs.github.io/