Best jQuery Animation Plugins & Tutorials with Demo

    Squeezebox Portfolio Template in CSS & jQuery

    Squeezebox Portfolio Template in CSS & jQuery

    An intro block that slides out to uncover a gallery of portfolio items.

    We’ve been experimenting with some motion effects to build a simple portfolio template. The idea is to show a gallery of projects as a separate, secondary module, with the first block still partially visible – just one click away.

    Grid Item Animation Layout with CSS3 & JavaScript

    Grid Item Animation Layout with CSS3 & JavaScript

    oday we’d like to share a simple animated grid layout with you. The responsive layout has a sidebar and grid items that animate to a larger content area when clicked. In the first demo the content area fills the grid and in the second demo, the whole layout moves to the left while the grid item is expanding.

    Cta.js : Animate your Action-to-effect path

    Cta.js : Animate your Action-to-effect path

    cta.js or “Call to Animation” is a light-weight performant library to animate any element (“action”) onto any other element (“effect”) on the page.

    Agile : JavaScript generated pure CSS3 Engine

    Agile : JavaScript generated pure CSS3 Engine

    Agile is a simple, fast and easy to use engine which uses javascript generated pure CSS3.

    Features:

    • Agile uses javascript to generate pure CSS3, without canvas, webGL or SVG.
    • Performant on mobile devices, being truly cross platform.
    • Agile’s API has high similar characteristic with actionscript 3.0, you can learn it in 10 minutes.

    Cquence.js : JavaScript Animation library for Banners & Advertisement

    Cquence.js : JavaScript Animation library for Banners & Advertisement

    Cquence is a very small Javascript animation library developed for banners and advertisement.

    PAXMAN.js : Scrolling Engine with Vector Control

    PAXMAN.js : Scrolling Engine with Vector Control

    A Scrolling Engine for making sweet static single paged websites, quickly, and by using HTML markup as config.

    Features:

    • Parallax scrolling for Backgrounds
    • Anchor triggered Class additions/removals
    • SVG Masking
    • Child Vectors

    Animated SVG Hero Slider

    Animated SVG Hero Slider

    A full page slider, with animated SVG elements used as transition effects.

    ShakeBorder : jQuery Animated Shake & Border Effects

    ShakeBorder : jQuery Animated Shake & Border Effects

    ShakeBorder is a plugin to create Shake and border effects on mouse hover with jQuery.

    jstiles : jQuery Animated Tiles Plugin

    jstiles : jQuery Animated Tiles Plugin

    This is a jQuery plugin that works alongside with Bootstrap and helps you create beautiful tiles.

    As a jQuery – Bootstrap plugin, in order to use jsTiles you have to include both jQuery and Bootstrap into your project. You also have to include jQuery easing in order to let animations get smoothly executed.

    LogosDistort : jQuery Advanced 3d Perspective Distortion

    LogosDistort : jQuery Advanced 3d Perspective Distortion

    This plugin allows you to (currently) do full-page 3d perspective transforms base on mouse position. There are a lot of options you can tweak to your liking, and I’m looking to develop the application of this effect further.