27 Best jQuery Animation Plugins

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.

animsition-1

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.

typedjs

Oridomi

The web is flat, but now you can fold it up.

oridomi

textillate.js

It combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.

texttillate

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.

scrollreveal

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.

jQuery-Animations-with-automatic-CSS3-transitions

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.

animojs

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.

motio

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.

minima-anima

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.

turn js

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.

ryu-street-fighter-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.

lazyline

JZoopraxiscope

It is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.

jq-animation-1

jQuery Transit

Super-smooth CSS3 transformations and transitions for jQuery

jq-animation-2

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.

jq-animation-3

Roundabout

It is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.

jq-animation-4

Flip!

Flip is a jQuery plugin that will flip easily your elements in four directions.

jq-animation-5

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).

jq-animation-6

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.

jq-animation-7

jQuery Marquee Animation

Marquee Animation is a jQuery plugin by Fusiondevs.com for creating amazing animated marquees using jQuery and jQuery.easing frameworks.

jq-animation-8

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.

jq-animation-9

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.

jq-animation-10

jQuery Countdown

jQuery Countdown plugin that doesn’t sucks!

jq-animation-11

hoverFlow

Another Solution to Animation Queue Buildup in jQuery.

jq-animation-12

Superscrollorama

The jQuery plugin for supercool scroll animation.

jq-animation-13

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.

jq-animation-14

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.

jq-animation-15

3 Comments

  1. You are missing possibly the coolest one of all: Greensock (aka TweenLite) http://www.greensock.com/get-started-js/

  2. ProtoSoupsays:

    Jarallax is also cool http://www.jarallax.com/

  3. wow..thankyou..for all the lists… awesome really inspired for me .

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.