Best jQuery Animation Plugins & Tutorials with Demo

    MelonHTML5 – All in One Tab with jQuery

    MelonHTML5 - All in One Tab with jQuery

    This is a fully customizable tab solution with pure HTML5 + CSS3 animations for your website.

    Features:

    • Full HTML5 + CSS3 animations (no jQuery UI)
    • 10 preset animations
    • Customizable tab menu position
    • Sliding control
    • Tab position indicator (Android Style)
    • Dropdown shortcuts
    • Keyboard navigation (Left/Right arrow key control)
    • Slideshow
    • Free support & frequent updates

    oriDomi : jQuery Plugin for Fold up the DOM like paper

    oriDomi : jQuery Plugin for Fold up the DOM like paper

    jQuery plugin for fold up the DOM like paper.riDomi only works in modern browsers that support CSS 3D transforms.

    Features:

    • zero dependencie
    • optional jQuery/&c. support
    • works on iOS
    • fold images, webfonts, animated gifs, almost any DOM element

    jQuery.path : Animatation for arcs and bezier curves with jQuery

    jQuery.path : Animatation for arcs and bezier curves with jQuery

    jQuery.path provides animation along bezier and circular arcs.The animation engine in jQuery is focussed on single dimensional animation – hence it’s difficult to animate two variables along a path.

    This simple plugin provides a method of multidimensional animation, and in particular provides a method for animating along bezier curves and arcs.

    Clip Gallery : jQuery Clip Animation Photo Gallery

    Clip Gallery : jQuery Clip Animation Photo Gallery

    ClipGallery is a new way to show your pics. In combination with jQuery and the ClipFX plugin, it puts your photos in a grid and as the mouse moves over the “thumbs” they expand at full size.

    Jarallax : jQuery Parallax Scrolling Animation Library

    Jarallax : jQuery Parallax Scrolling Animation Library

    Jarallax is an open-source javascript library which makes adjusting css based on interaction easy.With Jarallax it’s easy to create a parallax scrolling website.

    Animations jump, for example, from 70% to 85% progress. This is a jump of 15%. Big Animation jumps can cause animation ghosting when animations end between the jumps. See demo of animation ghosting for more information.

    MelonHTML5 : 3D Cube Gallery in Html5, jQuery & CSS3

    MelonHTML5 : 3D Cube Gallery in Html5, jQuery & CSS3

    This is a flexible and easy to integrate Photo Gallery written in HTML5 , CSS3 and jQuery.

    Features:

    • 3D Cube Animation (Chrome, Safari, Firefox, IE10 )
    • Automatic thumbnail generation
    • Unique animated thumbnail preview
    • Grid or Custom Layout
    • Lightbox
      • Navigation
      • Keyboard Control
      • 3 Animations
      • Slideshow

    Easings.net : jQuery Easing Functions Cheat Sheet

    easings.net : jQuery Easing Functions Cheat Sheet

    Simple cheat sheet to help developers pick the right easing function.jQuery with jQuery Easing Plugin is the easiest way to describe animation with easing.

    The real object doesn’t begin its movement instantly and at a constant rate. When we open the drawer, we first give it acceleration, and then we slow it down. When something falls, it first goes down faster and faster, and then bounces back after it hits the floor.

    Bonsai : A JavaScript Graphics Library

    Bonsai : A Graphics Library

    Bonsai is a JavaScript graphics library.

    Bonsai’s main features include:
    • Architecturally separated runner and renderer
    • iFrame, Worker and Node running contexts
    • Paths
    • Assets (Videos, Images, Fonts, SubMovies)
    • Keyframe and time based animations (easing functions too)
    • Path morphing

    jQuery DragPan

    jQuery DragPan

    Give your website visitors the ability to navigate a large area of rendered HTML quickly. Usefull for creating maps of supermarkets, shopping malls, theme parks, zoos, festival sites, theatres, airports, seating plans in fact anywhere where the map would be larger than the users browser.

    Features:

    • Very few images, mostly CSS
    • Includes 19 different customizable options and 3 callbacks
    • Function to move map to position
    • Doesn’t stop user from dragging beyond map, just bounces back till the whole map fills the screen
    • Scrollbars (Colour changable using CSS )
    • Copyright/help message (You choose the message)
    • Restrict to horizontal/vertical panning
    • Customize grab/grabbing cursor
    • Change return animation speed

    Fireworks.js : Javascript Animation Experiment

    Fireworks.js : Javascript Animation Experiment

    Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it’s a fireworks effect someone could theoretically use on their site. And come on, who doesn’t want something like that? As far as appropriateness is concerned, this effect could be compared to the dripping-blood-line, skull and fireball animated .GIF images so popular on the web in 1997. Exploding firework animations are hot, the new black, the script equivalent of the blink tag. Mmm, blink tag.