Best jQuery Animation Plugins & Tutorials with Demo

    fc.tape : jQuery widget for sprite animations like cinema tape

    fc.tape : jQuery widget for sprite animations like cinema tape

    jQuery widget for sprite animations. Background image (sprite) consisting of picture frames like the movie tape is animated. Widget supports options to adjust smothness and speed of animations as well as methods to control animation behavior.

    Background image (sprite) consisting of picture frames is animated like the tape in old-time movie projectors. Widget supports options to adjust smoothness and animation speed as well as methods to control animation behavior. You can create such sprite using console util convert, included in popular image editing tool ImageMagick.

    jQuery pinterest style gallery plugin

    jQuery pinterest style gallery plugin

    Pinterest style layout gallery is a lightbox support image and youtube, vimeo video.CSS3 driven animation, graceful degradation, it will toggle the fade transition in the old browser.Optional animation transition style.Optional go back animation delay.

    jQuery Animated Percentage Loader

    jQuery Animated Percentage Loader

    jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. The plugin takes miniminal installation and is simple and flexibile to use. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional). It uses vectors rather than images so can be easily deployed at various sizes by simply adjusting the initial parameters.

    A jQuery plugin that utilises HTML canvas to show an animated percentage loader widget suitable for loading screens or displaying feedback during long-running tasks.

    jQuery Animate Enhanced Plugin

    jQuery Animate Enhanced Plugin

    jQuery Animations with automatic CSS3 transitions.Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. 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.

    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.

    Progressively enhanced CSS3 animations without having to do any browser detection or special CSS, therefore using the same Javascript across your applications and websites.

    Animate.css – a bunch of plug-and-play CSS animations with jQuery

    Animate.css - a bunch of plug-and-play CSS animations with jQuery

    animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.A big ol’ goody bag filled with CSS animations for WebKit, Firefox and beyond.

    To use animate.css in your website, simply drop the stylesheet into your document’s <head>, and add the class animated to an element, along with any of the animation names. That’s it! You’ve got a CSS animated element. Super!

    You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules.

    Animated Feeds Display with jQuery

    Animated Feeds Display with jQuery

    I like FourSquare.com Animated Updates feed Ticker. I like the way they animate items. In this tutorial i am sharing a simple way to create same rss scrolling ticker using Jquery, so you can implement it on your website!

    SuperScrollorama : jQuery Supercool scroll animation

    SuperScrollorama : jQuery Supercool scroll animation

    Scrollorama jQuery plugin for doing cool scrolly stuff like transitions,fade in, rotate in, fly in, zoom in, parallax.

    Flare Responsive Mobile-Optimized Lightbox Plugin in jQuery

    Flare Responsive Mobile-Optimized Lightbox Plugin in jQuery

    Flare – a custom responsive, touch enabled, mobile optimized lightbox jQuery plugin, which can be used to display single images/videos or entire galleries.

    Image/Video Navigation via:

    • UI buttons
    • Swipe gestures
    • Mousewheel navigation
    • Keyboard arrows

    Transitions:

    • Use hardware acceleratation on CSS transforms
    • Fallbacks to standard jquery animation in older browers

    Media Support:

    • Images
    • Fullscreen Video (YouTube, Vimeo, Vid.ly and local Video)
    • Automatically retrieves cover image for YouTube, Vimeo and Vid.ly videos

    Guggenheim.js : jQuery Gallery plugin with flashy filtering and re-ordering

    Guggenheim.js : jQuery Gallery plugin with flashy filtering and re-ordering

    Guggenheim.js is a framework agnostic plugin for creating sexy interactive galleries. It uses CSS3 animation (with a fallback to Javascript) to create animated filtering, reordering and pagination of your gallery.

    flipCounter : jQuery Counter Plugin

    flipCounter : jQuery Counter Plugin

    flipCounter is a jQuery plugin that turns a boring ‘ole number into a big, beautiful analogue display. Count down the days until the apocalypse, make your own debt clock or throw back to the 90s and resurrect the hit-counter. The possibilities are endless!