Best jQuery Animation Plugins & Tutorials with Demo

    Nanimator : jQuery Nano Animation Library

    Nanimator : jQuery Nano Animation Library

    I got the idea for Nanimator Library while working with jQuery Transit library and CSS3 transforms a couple of days ago. I was chaining the animation of numbers of objects by writing callbacks for each of them and suddenly I got the idea that I can actually do it pretty easily by converting the whole thing as a jQuery Plugin. This is how Nanimator was born. It’s primary purpose is to animate a set of DOM elements inside a container, mainly translate, translateX, translateY, and opacity. It also reduces your code by writing almost nothing at all, except initializing the library.

    Nanimator serves its purpose pretty well by queueing the DOM elements in a stack, maintaining a chain among them (which you can also break, but I will highlight that later in this article). Nanimator uses the fantastic jQuery Transit plugin under the hood to wrap everything up for you.

    Metro Modal with jQuery & CSS3 Animation

    Metro Modal with jQuery & CSS3 Animation

    Metro Modal, is a jQuery plugin that creates or turn DIVs into modal popups in metro style.The modals are draggable, has controls to Maximize, Close and Restores, basic fadeIn/fadeOut animation for old browsers that has no support for css3 animations.

    Features:

    • There are 19 properties that you may change.
    • 23 different animations.
    • Responsive design
    • Resize window, also resizes de modal if is needed, animation to move around to the new screen location.
    • Support iFrames and custom HTML code
    • Support multiple color background with animations, works with HTML color pallet.

    Building a Circular Navigation with CSS Transforms & JavaScript

    Building a Circular Navigation with CSS Transforms & JavaScript

    In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.

    Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. But don’t worry, the math is really very simple and I’ll be going through it step by step.

    jQuery.twinkle : Twinkle Animation Plugin

    jQuery.twinkle : Twinkle Animation Plugin

    Draw your visitor’s attention to special parts of your website. Examples of the different effects and options are right below.

    jQuery X-Transition-Boxes

    jQuery X-Transition-Boxes

    X-Transition-Boxes veri nise application for presentation your product into web.

    Features:

    • Infinite scroll
    • 8 different transition with masonry
    • Zoom effect for images
    • Responsive 100%
    • Easy to use!!

    Effeckt.css : CSS3 Performant transitions & animations with jQuery

    Effeckt.css : CSS3 Performant transitions & animations with jQuery

    Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?

    Designing and developing UIs for the mobile web is tricky, but it’s extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

    Creative Add/Remove Effects for List Items with CSS3 & jQuery

    Creative Add/Remove Effects for List Items with CSS3 & jQuery

    In today’s tutorial, we’ll be creating some creative animations and transitions for adding and removing items from a list, inspired by the concept from Pasquale D’Silva’s article on Medium. Chris Coyier coded the transitions from Pasquale’s article.

    In this tutorial I’m extending Pasquale’s example, adding more animations and transitional effects, and I’ll also be using a small snippet from Chris’s article to add an extra step in each animation, which “makes room” for the added items before they are actually added.

    Jumble : jQuery plugin that jumbles the Colours of Text & Animate

    Jumble : jQuery plugin that jumbles the Colours of Text & Animate

    A jQuery plugin that jumbles up the colours of your text headers, and can also animate them. Choose a colour range for the colours to be jumbled amongst, and set params for whether the shuffle is based on brightness or satuation hue.

    S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations

    S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations

    S Gallery is a responsive jQuery gallery plugin with CSS3  animations.It is inspired from SONY’s products gallery which is made in Flash.The gallery is accessible by keyboard and you can navigate through the images via keyboard shortcuts.

    The plugin makes use of HTML5’s FullScreen API, and relies heavily on CSS3 animations goodness and CSS3 transforms, so it will work only in browsers that support these features.

    Blueprint : On Scroll Effect Layout with CSS3 & JavaScript

    Blueprint : On Scroll Effect Layout with CSS3 & JavaScript

    An on scroll effect template that animates the sides of sections once they are in the viewport.This Blueprint is a template for a on scroll effect layout. We’ve had some requests on how to achieve this effect of animating elements once they are in the viewport and decided to create a Blueprint for it. It works with adding a class for animating the two sides of a section. There is an example effect defined and also some media queries for dealing with smaller screens.