Best jQuery Animation Plugins & Tutorials with Demo

    jQuery Async : Plugin to Animate buttons when an asynchronous process

    jQuery Async : Plugin to Animate buttons when an asynchronous process

    jQuery Async is a library made to easily animate clickable buttons triggering asynchronous processes such as Ajax requests This library is made on top of jQuery and Bootstrap.

    MixItUp : A CSS3 and jQuery Filter & Sort Plugin

    MixItUp : A CSS3 and jQuery Filter & Sort Plugin

    MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It’s perfect for portfolios, galleries, blogs, or any categorized or ordered content!

    MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations. It’s an extremely efficient approach that makes the most of your modern browser’s rendering power, and avoids more resource-heavy approaches involving jQuery .animate() and position: absolute.

    LivIcons : 303 Truly Animated Vector Icons with jQuery

    LivIcons : 303 Truly Animated Vector Icons with jQuery

    So what is LivIcons? They are a cross browser vector icons, built with JavaScript, with individual mini animation for every icon. They based on SVG (scalable vector graphic) in modern browsers and VML (vector markup language) in IE6 – IE8 for clean and perfect look at any devices (Yes. Retina too).

    Features:

    • 303 live icons – one script.
    • New step in interactivity and brand New – such animation methods for interface elements were never created before.
    • Animated and can be static of course
    • Any color, any size
    • Retina perfect
    • 16 pixel perfect
    • Flexible settings of behaviour and appearence
    • Bootstrap compatible
    • Easy integration – just one string of code for an icon.
    • IE6+ support
    • All browsers

    Create A Google Plus App Tile Animation with CSS3 and jQuery

    Create A Google Plus App Tile Animation with CSS3 and jQuery

     

    I have always been fascinated by the new Google Plus app on iPhone and Android. Every interaction seems to be very fluid and make sense without sacrificing the performance. The tile animation while scrolling through news feeds makes it even more enjoyable to scroll through content. Wouldn’t it be nice to have such an animation on your website? Today, I am going to show you how to create a beautiful tile animation like in the Google Plus app using CSS3 and jQuery. (Webkit-Browser Only)

     

    TextFX2 : CSS3 Text Animations

    TextFX2 : CSS3 Text Animations

    TextFX2 is a CSS3 Transition + CSS3 3D Transform plugin, and as stated above, all animations will revert to a simple fade for IE8, IE9 and Opera.

    Features:

    • Easily create animated sequences like the one shown in the demo. No manual scripting involved!
    • Animate multiple lines of text, examples included in source.
    • Option to automatically loop sequenced animations.
    • Option to randomize a sequence.
    • Hyperlink animated text.
    • Animate text on the fly with TextFX2’s API methods.
    • Free from jQuery = no jQuery conflicts!

    Creating Windows-8-like 3D animations with CSS3 and jQuery

    Creating Windows-8-like 3D animations with CSS3 and jQuery

    I have recently realized that it’s been such a long time since CSS3 animations were introduced into the web, and yet I haven’t really experimented or made any demos with them before.
    I’ve also been using Windows 8 for a while now (and loving it), and the first thing I thought was impressive about it, was the transitions and animations built into the dashboard, so I thought it would be really cool if my first experiment with 3D would be to duplicate the effects I saw in windows 8 into a demo of my own.

    Mate Hover : jQuery Image hover animations Plugin

    Mate Hover : jQuery Image hover animations Plugin

    Mate Hover – is a jQuery plugin for image hover animations. You can change the appearance of pop-up elements. You can embed your icons, text etc.

    Features:

    • Ready to Responsive and Adaptive
    • Simple to use
    • Cross Browsers
    • Allow multiple connections
    • Auto Size(on/off)
    • Inhirit Padding(on/off)
    • Supports thirty animation effects from jQuery Easing
    • Overlay Style: classic,rolling(top,bottom,right,left),double(vertical,horizontal),four

    jQuery Animated Table Sorter

    jQuery Animated Table Sorter

    jQuery Animated Table Sorter is a simple html table sorter, with the added benefit of animating the sorting operation.

    Have you ever wanted to deliver unexciting content in a very exciting way? Me neither.However, now we can.

    jQuery CSS3 App Showcase with Grid Overlay

    jQuery CSS3 App Showcase with Grid Overlay

    Today we will be creating a little app showcase with a neat effect in jQuery and CSS3. The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle: the device moves back and the grid fades in and scales up. When clicking on another screenshot, the device image gets updated and the grid disappears again.

    jQuery Real 3D Cloud Gallery/Tags/Menu

    jQuery Real 3D Cloud Gallery/Tags/Menu

    Real 3d animated cloud gallery in jQuery with following features :

    Features :

    • Real 3D.
    • Ten predefined templates.
    • Custom templates support.
    • Great for tags cloud and perfect for image gallery.
    • Works with modal window.
    • External control support.
    • Responsive.
    • Requires no knowledge to use.
    • Cross browser compatibility.