Best jQuery Animation Plugins & Tutorials with Demo

    Animated Page Transition with CSS3 & Ajax

    Animated Page Transition with CSS3 & Ajax

    An ajax powered page transition, with a slide-in content animation triggered by a side tabbed navigation.

    We’ve been experimenting lately with a CSS powered animation that replaces the refresh of the web page while the content is updated using ajax. Today’s nugget is based on the same idea, but with a different execution: this time a simple hover effect turns into a loading bar, that finally expands with new content!

    Playful Interaction for Draggable Elements

    Playful Interaction for Draggable Elements

    A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.We wanted to create a playful dragging interaction that will morph and animate an element depending on its position. If dropped before the bounds we will snap the element back with an elastic effect. We also add some bounciness to inner elements so that everything gets an even more organic feel.

    3D Lines Animation with HTML5 Canvas & JavaScript

    3D Lines Animation with HTML5 Canvas & JavaScript

    3D lines animation with three.js and put a fancy animated background color, adjusted some parameters like number of lines, perspective and colors.

    Magic layout : jQuery plugin to Animate Page Elements

    Magic layout : jQuery plugin to Animate Page Elements

    Magic layout is a JQuery plugin by which you can animate all the elements on the page. There are 36 CSS3 animations that gives a huge advantage in performance. The plugin follow Responsive Web Design and it is fully adapted for mobile devices. Magic layout is simple to set up.

    2 Blocks Template with CSS3 & jQuery

    2 Blocks Template with CSS3 & jQuery

    A template split in 2 animated blocks of content, inspired by dropbox.com/guide.

    On bigger devices, the content is split in two main containers. When the user surfs through the content using the navigation, new content overlaps the old one. On smaller devices, we have a simple gallery of projects, with a slide-in panel containing additional project information.

    Transitioning Buttons with CSS3 & JavaScript

    Transitioning Buttons with CSS3 & JavaScript

    Transitioning Buttons is a collection of flat buttons that morph into components. The examples show different types of components, i.e. fullscreen overlay, modal window and many more. The buttons are easy to integrate, customize and are fully responsive. The collection comes with six color themes including a quick setup guide.

    Tabtab.js : jQuery Animated Tabs Plugin

    Tabtab.js : jQuery Animated Tabs Plugin

    A simple, Accessible, 60+fps, easy-to-use animated tabs plugin for jQuery.The plugin including the velocity.js library.

    jcSlider : jQuery Responsive Slider with CSS Animations

    jcSlider : jQuery Responsive Slider with CSS Animations

    A responsive slider jQuery plugin with CSS animations.This plugin does not use jQuery animations. Only CSS3, because performance matters. No need to calculate distances, sizes or whatever, only add and remove classes to elements to animate them. It couldn’t be easier!

    • Only 1 js file
    • 1Kb minified
    • Responsive
    • Multiple effects (more than 60!)
    • Works with html, images… whatever you want to animate

    jQuery Animated Screenshots Plugin

    jQuery Animated Screenshots Plugin

    jQuery plugin that animates a full height screenshot (or any image) within a parent div to simulate a user scrolling the page.

    All Animation : jQuery CSS3 Multiple Animation Plugin

    All Animation : jQuery CSS3 Multiple Animation Plugin

    All Animation.css is a set of animations, fun to let your sexiest project. They are cross-browser animations but that will emphasize your pages as sliders, 3D effects’s.