Best jQuery Animation Plugins & Tutorials with Demo

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.

Demo 1  Demo 2  Demo 3 Demo 4

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.

Actuate.js : jQuery wrapper for Animate.css

Actuate.js : jQuery wrapper for Animate.css

A jQuery wrapper for animate.css that makes it one line easy to start using css animations. The plugin includes a bunch of swaggy animations but can be used to initialise any animation you like.

Elastic Progress with SVG & CSS

Elastic Progress with SVG & CSS

An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax.

SVG Modal Window with CSS3

SVG Modal Window with CSS3

A simple modal window with an SVG background animated using Snap.svg.



Best jQuery websites design awards