Best jQuery Animation Plugins & Tutorials with Demo

    Animated Intro Section with CSS3

    Animated Intro Section with CSS3

    A collection of fancy text effects, to animate the tagline and action buttons of your website intro section.

    Animate.js : Smooth CSS-powered animations in JavaScript

    Animate.js : Smooth CSS-powered animations in JavaScript

    Animate.js is a tiny library that helps you write smooth CSS-powered animations in JavaScript.

    30 CSS Hover Effects For Buttons

    30 CSS Hover Effects For Buttons

    I have created 30 CSS button hover effects that uses only CSS for the animation. In this tutorial I will only explain how the sixth example works. You can view the code for the rest of the buttons by downloading the source code.

    Image Jigsaw Puzzle : jQuery Plugin

    Image Jigsaw Puzzle : jQuery Plugin

    jQuery plugin to easy convert any image to image based jigsaw puzzle.

    Digital Write jQuery plugin

    Digital Write jQuery plugin

    jQuery plugin to write charecters on a 5X5 matrix with colors, animations and size.Using this plugin, you can create such charecters with animations, color options & size options!

    uilang.js : UI-focused Programming Language

    uilang.js : UI-focused Programming Language

    uilang is a dead simple programming language for web designers. With uilang, you write your code just like plain English, straight into your HTML using a <code> element. uilang’s logic relies on manipulating classes on HTML elements and using these classes in CSS to show, hide, animate and transform elements when a click occurs. This simple logic lets designers create most of the typical user interface behaviours: tabs, popovers, overlays, sliding menus, etc.

    Demo 1 Demo 2 Demo 3 Demo 4 Demo 5

    Shakker : Image Shakking jQuery plugin

    Shakker : Image Shakking jQuery plugin

    Its a jQuery plugin to give any image a shakky effect. Its pretty easy to use, just call the jquery method for any image identifier.

    Animate Plus : JavaScript Library for CSS and SVG Animation

    Animate Plus : JavaScript Library for CSS and SVG Animation

    Animate Plus is a performant JavaScript library that helps you animate CSS properties and SVG attributes. Animate Plus is well-suited for quick UI interactions as well as longer animation sequences on both desktop and mobile.

     

    OSG.JS : Javascript Implementation of OpenSceneGraph

    OSG.JS : Javascript Implementation of OpenSceneGraph

    OSGJS is a WebGL framework based on OpenSceneGraph concepts. It allows an individual to use an “OpenSceneGraph-like” toolbox to interact with WebGL via JavaScript, and provides facilities for exporting various assets to the osgjs format. The API is kept as similar to OpenSceneGraph as possible, providing a familiar environment to veterans of the library and introducing newcomers to a popular and heavily-scrutinzed set of interfaces.

    jQuery DrawSVG : Animate SVG paths

    jQuery DrawSVG : Animate SVG paths

    jQuery DrawSVG is lightweight, simple to use jQuery plugin to animate SVG paths.

    This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.