Best jQuery Animation Plugins & Tutorials with Demo

    30 Photo Animations with JavaScript

    November 8, 2013 | Animation, Image Effects, Premium
    30 Photo Animations with JavaScript

    All animations and styles can be combined to create a unique experience for your image galleries.Use the Fig Configurator to quickly generate Fig HTML snippets ready to be copy and pasted to your website.

    The package contains the original source files so if you’re a webdeveloper you can tweak the library to your own liking.

    Animation Effects :

    • 7 load animations. Animate a photo in to view in six different ways, pick from zooming in or out, fading, or rotating in various directions.
    • 8 hover animations. Bring a certain area of the photo in to focus on hover or move the photo around when the user interacts with it.
    • 9 caption animations. Slide, fade or push the caption into view from various directions.
    • 6 text animations. Animate the caption text into view via fading, sliding or stacking.
    Read More Demo

    PACE : Automatic page load progress bar

    November 7, 2013 | Ajax, Animation, Web
    PACE : Automatic page load progress bar

    An automatic web page progress bar.Include pace.js and a theme of your choice to your page and you are done!

    Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress.

    If you use AMD or Browserify, require pace.js and call pace.start() as early in the loading process as is possible.

    Read More Demo

    Delete Records with Multiple Animations using jQuery

    November 4, 2013 | Animation
    Delete Records with Multiple Animations using jQuery

    Every language & libraries has its own competitors. jQuery is hardly competitor to Flash. Now a days every web developers prefer to choose jQuery instead of Flash because of its ultimate UI Effects. jQuery leads when its come to SEO point of view where Flash doesn’t.

    Deleting records in your web applications is must. So today I am going to tell you how to add multiple animations to delete records using jQuery.

    Read More Demo

    JellyBoxes : Decorative jQuery extension

    October 29, 2013 | Animation
    JellyBoxes : Decorative jQuery extension

    A small jQuery extension that adds a function, .jellyBoxes([options]), to any positioned (non-static), square DOM element. JellyBoxes empties the element, then fills it with a number of randomly-colored squares that animate into random positions within a diamond on setup, and on every mouseover after that.

    Read More Demo

    EnterIN : An Inception Effect plugin for jQuery

    October 29, 2013 | Animation, Plugins
    EnterIN : An Inception Effect plugin for jQuery

    An Inception Effect plugin for jQuery.

    Read More Demo

    jQuery Metro Tooltip with Cool Animations

    October 25, 2013 | Animation, Plugins, Premium
    jQuery Metro Tooltip with Cool Animations

    Powerful jQuery Tooltip for your website.

    Features:

    – Lightweight (js 4 kb and css 28kb)
    – Easy to set up
    – Customizable
    – Mac Retina Ready
    – All the HTML colors
    – Can hold custom HTML like links, images, iframes, Youtube Videos even Google Maps
    – Sticky ones with a close icon.
    – Inteligent autoposition if the tooltip don’t fit in the screen
    – 24 different animation
    – Can hold an small Icon
    – Icon pack ready to use
    – And more

    Read More Demo

    Animations for Thumbnail Grids with CSS3 & JavaScript

    October 24, 2013 | Animation, CSS2 / CSS3.0, Slider
    Animations for Thumbnail Grids with CSS3 & JavaScript

    Today we’d like to share some fancy animations for thumbnails in a grid with you. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. Not only can we apply the delays in order, but randomly or reversed.

    Read More Demo

    SVG.js : A lightweight library for manipulating and animating SVG

    October 24, 2013 | Animation, SVG Tutorial
    SVG.js : A lightweight library for manipulating and animating SVG

    A lightweight library for manipulating and animating SVG.Svg.js has no dependencies and aims to be as small as possible.With svg.js you have all the power of vector graphics at pocket size.

    Read More Demo

    Animated Checkboxes and Radio Buttons with SVG

    October 17, 2013 | Animation, Core Java Script, CSS2 / CSS3.0, Forms, SVG Tutorial
    Animated Checkboxes and Radio Buttons with SVG

    By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.

    Read More Demo

    jQuery Flot Animator

    October 16, 2013 | Animation, Chart & Graph, Plugins
    jQuery Flot Animator

    Flot Animator is a free jQuery plugin that will add smooth or gradual animations to Flot charts.It will allow you to highlight and draw attention to some charts and/or series by easily adding animation to your existing charts.

    This plugin will read the original data array and will build a second array containing all the frames needed for the animation: the new array length will be equal the total animation frames.

    Read More Demo