Best jQuery Animation Plugins & Tutorials with Demo

    Shifty : A teeny tiny tweening engine in JavaScript

    Shifty : A teeny tiny tweening engine in JavaScript

    Shifty is a tweening engine for JavaScript. It is a lightweight library meant to be encapsulated by higher level tools. At its core, Shifty provides:

    • Interpolation of Numbers over time (tweening)
    • Playback control of an individual tween
    • Extensibility hooks for key points in the tweening process

    This is useful because it is the least amount of functionality needed to build customizable animations. Shifty is optimized to run many times a second with minimal processing and memory overhead, which is necessary to achieve smooth animations.

    Walkway.js : Animate SVG elements

    Walkway.js : Animate SVG elements

    Walkway is an easy way to animate SVG elements.

    Options:

    • selector (mandatory) – The selector of the parent element (usually will be a specific svg element)
    • duration – Time the animation should run for, in ms. Default is 400.
    • easing – Name of the easing function used for drawing. Default is ‘easeInOutCubic’. You can also supply your own function that will be passed the progress and should return a value in the range of [0, 1];

    jQuery 3D Fold Scroll Animation

    jQuery 3D Fold Scroll Animation

    Responsive 3D Fold Animation on Scroll a jQuery plugin.

    Story Tale : jQuery CSS3 Animation on Scroll

    Story Tale : jQuery CSS3 Animation on Scroll

    CSS 3 Animations Triggered on Scroll, but with a Twist of a Story.

    3D Rotating Navigation with CSS3

    3D Rotating Navigation with CSS3

    A 3D rotating navigation, powered by CSS transformations. Animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.

    SVG Morpheus : JavaScript library for SVG icons to morph

    SVG Morpheus : JavaScript library for SVG icons to morph

    JavaScript library enabling SVG icons to morph from one to the other.

    ProgressBar.js : Beautiful and Responsive Progress bars

    ProgressBar.js : Beautiful and Responsive Progress bars

    Beautiful and responsive progress bars with animated SVG paths.ProgressBar.js uses shifty tweening library to animate path drawing. So in other words, animation is done with JavaScript using requestAnimationFrame. Animating with JS gives more control over the animation and is supported across major browsers.

    Cloud Slider : Responsive jQuery Slider Plugin

    Cloud Slider : Responsive jQuery Slider Plugin

    This is a responsive jQuery slider plugin. It supports many features like: responsive, touch enabled, smooth layered animation, 2d & 3d transitions, 12 easily customizable built-in skins, unlimited 2d & 3d carousels and category carousel, ken-burns effect, video embedding, powerful APIs.

    Animate Text with SVG Paths & CSS3

    Animate Text with SVG Paths & CSS3

    This technique allows you to animate the drawing of text via converting text to SVG paths.SVG path animation is a trending technique in web-design allowing designers to draw simple and elegant icons. Now, designers can easily apply SVG animations to text.

    Pixel Animation HTML5

    Pixel Animation HTML5

    Pixel animation is an animation script which can animate any image on any webpage. It disintegrates the specified image into pixels and then animates them as per user’s mouse interaction. There are various options that can be specified.

    Features:

    • Great attention grabber.
    • It is very easy to use.
    • No need to create animated gifs or flash. Simply upload an image and it will be animated.
    • Fast animation.
    • Animation interacts with viewer’s mouse movement.
    • Auto stop once the animation completes.
    • Animation automatically pauses when the page is not visible. For ex, when you select a different tab or minimize it..