Best jQuery Animation Plugins & Tutorials with Demo

    jSprouts : jQuery Creative Slider with Innovative Animations

    jSprouts : jQuery Creative Slider with Innovative Animations

    jSprouts is a creative slider with gorgeous and innovative animations. Thumbnails are shown on mouseover surrounding the slider. jSprout can handle also custom HTML contents, videos, flash and even Google Maps, very useful for mini-sites, vCard sites, personal sites or portfolio sites.

    Interactive Infographic with SVG and CSS Animations

    Interactive Infographic with SVG and CSS Animations

    Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.One of the less talked about features of newer browsers is increasing support for the SVG file format. If you are unfamiliar with SVG, it stands for Scalable Vector Graphics. Unlike raster image formats like PNG, JPG or GIF, the vector graphics contained within SVG files are completely scalable to any size and will display at any resolution or screen density without quality loss. In many cases, SVG files will also be much smaller in filesize and download quicker.

    With the right techniques and modern browser support, developers can now produce some pretty impressive animations, effects and interactions using SVG. Today we will explore the possibilities of SVG and test the capabilities of modern browsers by creating an interactive vector infographic for the web.

    HexaFlip: A Flexible 3D Cube Plugin with CSS3 & JavaScript

    HexaFlip: A Flexible 3D Cube Plugin with CSS3 & JavaScript

    HexaFlip is a JavaScript UI plugin that let’s you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins.

    I originally developed a simpler version of HexaFlip for an iPhone app I built called ChainCal where it served as a time-picker interface for setting alarms. Most mobile time-picker widgets are fashioned after a dial, but I reasoned that rotating cubes would serve for a more unique and memorable experience. As we all know, a cube has six (i.e. “hexa”) faces, but when rotating it around a single axis, we only have four to work with (front, top, back, and bottom). Thus if we built a cube interface using CSS alone, our interface would be limited to four options per choice. HexaFlip solves this issue and playfully challenges the user’s expectations by allowing the cube to cycle over a list of any length.

    jKit : jQuery based UI Toolkit

    jKit : jQuery based UI Toolkit

    A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things!

    jquery.transformlist : CSS3 transform styles and animations for jQuery

    jquery.transformlist : CSS3 transform styles and animations for jQuery

    jquery.transformlist is a Javascript plugin for jQuery to add support for styling and correctly animating CSS3 transforms that make use of multiple transform functions.

    jquery.transformlist is not intended to provide animation between arbitrary transform styles – it doesn’t provide the matrix decomposition required for that task. Instead it aims to assist you in creating a transform list of several transform functions that are composited for a specific task, and then provides you with means to use jQuery.animate() between different sets of arguments for those transform functions.

    That’s a little unclear, so imagine you set up a “camera” transform list allowing you to adjust the X, Y, and Z of the focal point; and then the rotation around, elevation above or below, and distance from the focal point.

    MetTile : A Package of jQuery Metro UI Tiles

    MetTile : A Package of jQuery Metro UI Tiles

    MetTile is a jQuery Plugin to add different custom Metro UI Tiles on your website. This plugin automatically generate different animated tiles which are also called Live Tiles. Its a good plugin to quickly make some animated tiles on your website.

    Features:

    • Supports sliding images, news ticker etc. in each Tile.
    • Supports unlimited content to animate inside each Tile.
    • Very lightweight, only 7KB of Javascript.(minified version is 4KB)
    • Control settings of each different Tiles.
    • Control appearance through CSS, so it can be restyled.
    • Specially developed for Windows 8 lovers.

    Anima.js : CSS animations with a soul

    Anima.js : CSS animations with a soul

    With Anima it’s easy to animate over a hundred objects at a time.Anima gives you the ability to use delays and durations normally, even for pure CSS animations. It has two modes: JS and CSS. The first one doesn’t really use CSS transitions or @keyframes. On the contrary, it uses CSS transforms and 3d-transforms together with Javascript to create animation. You have full control over the flow, so you can start, stop, cancel animations and even create event-based stuff. CSS mode allows you to generate pure CSS animations, but it has limitations for parallel animations.

    Speedo Harlem : jQuery plugin to entertain your visitors

    Speedo Harlem : jQuery plugin to entertain your visitors

    Speedo Harlem is a jQuery plugin to entertain your visitors and let them shake your website.In the wake of the Harlem Shake viral video trend we realized that dancing is not for everyone, so why not learn our website how to shake it in trend? Now is very simple.

    You want to see your website how is shaking? Now is posible. All you have to do is to load our plugin and css files and the shake will begin.

    Why? You ever thought that your html element are bored in a static page? Let`s do a party for them.