Best jQuery Animation Plugins & Tutorials with Demo

    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.

    Material Design Ripple Effects with SVG

    Material Design Ripple Effects with SVG

    An in-depth tutorial on how to build the ripple effect outlined under Google Material Design’s Radial Action specification and combine it with the powers of SVG and GreenSock.

    cardflip : Card flip Animation with jQuery & CSS3

    cardflip : Card flip Animation with jQuery & CSS3

    Simple card flip animation using jQuery and CSS3 animations.

    Fullscreen Video Opening Animation with CSS3

    Fullscreen Video Opening Animation with CSS3

    In this in-depth tutorial we want to show you how to create a similar video opening effect to the one seen on momentsapp.com. If you click the “Watch the video” button on the Moments App page, you will see a new image appearing on the photo stack which contains a video. The animation is a slight rotation of the frame and a subtle scaling of the video, which already starts to play. The whole wrapper expands to full screen without any play controls; just the closing cross will be shown. Once the video ends, or, if the user clicks on the closing cross, the video will simply disappear.