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.
A simple and easy jQuery plugin for CSS animated page transitions.
Typed.js 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.
The web is flat, but now you can fold it up.
Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
A simple way to create and maintain how elements fade in, triggered when they enter the viewport. An open-source experiment by JulianLloyd.
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.
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.
jBlitter 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 is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.
Super-smooth CSS3 transformations and transitions for jQuery
Spritely 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 is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.
Flip is a jQuery plugin that will flip easily your elements in four directions.
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).
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.
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 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 plugin that doesn’t sucks!
Another Solution to Animation Queue Buildup in jQuery.
The jQuery plugin for supercool scroll animation.
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.