jQuery was built to animate. Whether it’s fading out a warning message after a failed login, sliding down a menu control, or even powering a complete side-scrolling, “shoot ’em up” game—it’s all a snap with some powerful built-in methods, augmented with an extensive array of plugins. So here are 25 amazing jQuery Animation Plugins to give your html element stunning visual effect and animations.
Animsition
A simple and easy jQuery plugin for CSS animated page transitions.
Typed.js
It is a jQuery plugin that types. Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.
Oridomi
The web is flat, but now you can fold it up.
textillate.js
It combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
scrollReveal.js
A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by JulianLloyd.
jquery.animate-enhanced plugin
The plugin will analyse the properties you’re animating on, and select the most appropriate method for the browser in use. This means your transitions on left, top and opacity will convert to a CSS3 transition on Webkit & Mozilla agents that support it, and Opera 10.50+. If the user is on a browser that has no CSS3 transitions, this plugin knows about it and won’t get involved. Silent degradation.
Multiple callback mechanisms are created internally to monitor for DOM manipulation and for all ‘transitionend’ CSS3 events to be picked up. This means you have one neat callback() for the whole animation regardless on whether the plugin is using CSS3, DOM, or both for its animations.
animo.js
CSS animations are phenomenal and offer numerous advantages over JavaScript powered animations. First, they’re hardware accelerated, which sometimes hard to notice on a desktop but is unbelievably present when viewing on a mobile browser. Second, I personally feel it’s much easier to visualize and write the animation/transition in CSS using keyframes.
Motio
It is a small JavaScript library for simple but powerful sprite based animations and panning. It takes an element, and changes the background position to create an animation effect.
Minima Anima
Css3 animations with fallback on older browsers. It’s built to have fast animation execution, and it has an api similar to jquery animate, with animations queueing. By default the anima method do automatic fallback animations on browsers without transitions or transform3d, and instant animations on browsers without transform. It also does scale, rotate and skew animations on browsers without transitions thanks to jquery.transform.js included in the plugin.
Turn.js
It is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.
jBlitter
It is a jQuery plugin that allows you to create animated buttons for your web applications. Mouse over the example button below for an idea of what’s possible with jBlitter. IE7 and 8 users, your browser does not support HTML5 canvas and you won’t see the animation.
Lazy Line Painter
The Lazy Line Painter plugin allows you to perform path animations. This means that if you’ve got an image, which consists of lines only (with a start & end, with no fills), then this plugin will allow you to perform an animation which will trace the line to draw the picture – as an animation.
JZoopraxiscope
It is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.
jQuery Transit
Super-smooth CSS3 transformations and transitions for jQuery
Spritely
It is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a ‘sprite’ image contains two or more ‘frames’ of animation, whereas a ‘pan’ image contains a continuous image which pans left or right and then repeats.
Roundabout
It is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.
Flip!
Flip is a jQuery plugin that will flip easily your elements in four directions.
Shadow animation
With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius. Mark Carver contributed code to support rgba-colors (the alpha channel).
Circulate
This is a jQuery plugin, so obviously it relies upon the jQuery library. Specifically, jQuery 1.4 or later, because we are using the .animate() functions new ability to have per property easing. This means we can animate the “top” value with one easing function while animating the “left” value with a different easing function.
jQuery Marquee Animation
Marquee Animation is a jQuery plugin by Fusiondevs.com for creating amazing animated marquees using jQuery and jQuery.easing frameworks.
o’Slider
The o’Slider plug-in has a lot of features of a regular slider. Some of them are auto play, stop on hover, show/hide navigation, bullets list or thumbnails for a navigation, captions and in-line content. But the main cause for creation of the plug-in was to give websites’ users amazing live-background experience.
TextFX
TextFX is a jQuery text animation tool for animating a single line of text. It is built for easy usage, but also lends itself nicely to more advanced coders with it’s flexible script.
jQuery Countdown
jQuery Countdown plugin that doesn’t sucks!
hoverFlow
Another Solution to Animation Queue Buildup in jQuery.
Superscrollorama
The jQuery plugin for supercool scroll animation.
jRumble
jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element.
jQuery Reel Plugin
Reel 1.2 is an established jQuery plugin which takes an ordinary image tag and transforms it into a gorgeous interactive 360° object movie, panorama or stop-motion animation. It is the premier alternative to Flash, Java or Quicktime and is trusted by government agencies and big brands like BMW, Nikon, O2, Blackberry or The New York Times.
You are missing possibly the coolest one of all: Greensock (aka TweenLite) http://www.greensock.com/get-started-js/
Jarallax is also cool http://www.jarallax.com/
wow..thankyou..for all the lists… awesome really inspired for me .