Best jQuery Animation Plugins & Tutorials with Demo

    Chipmunk.js : JavaScript Physics Library

    Chipmunk.js : JavaScript Physics Library

    This is a port of the Chipmunk Physics library to Javascript!

    • It is slower than the C version (duh, its in javascript). Specifically, physics simulations using chipmunk-js runs about 3 times slower than the C equivalent.
    • I haven’t implemented chipmunk’s spatial hash, and I have no intention to do so.
    • The feature set is lagged a little from the real Chipmunk library

    textChaos : Abstract CSS3 Text Animations

    textChaos : Abstract CSS3 Text Animations

    textChaos allows you to easily add unique and abstract CSS3 text animations to your page. All animations are hardware accelerated and completely random – delivering a different animation experience for every visit.

    • Multiple instance support
    • Easy to setup
    • Lightweight
    • Custom Character Selection
    • Define Color Palettes
    • Set Random Speed Ranges
    • Set Font Size and Scaling Ranges
    • Define Random Rotation Angles
    • No Coding Skills Needed

    Page Scroll Effects with jQuery

    Page Scroll Effects with jQuery

    Introducing a mini-library of experimental page scroll effects.We put together some fancy effects that take place while the user is surfing through the sections of a web page. Some of the effects are quite extreme, but they can prove very useful if your goal is to create an immersive user experience.All animations have been created using Velocity.js.

    pushIn.js : jQuery Push-In Effect on a Div Element

    pushIn.js : jQuery Push-In Effect on a Div Element

    A jQuery plugin that simulates a dolly-in or push-in effect on a div element.All child elements within the div should remain relative to eachother, which creates a decent illusion of perspective as objects grow/shrink.

    Color Extraction Effect with CSS Filters

    Color Extraction Effect with CSS Filters

    Today we’d like to share a fun little color extraction experiment with you. The idea is to create a color palette from an image with a subtle effect on the image itself and some fanciness on the palette. We are using Vibrant.js by Jari Zwarts to extract the colors from the images, and CSS Filters to transition the image to a black and white version. We also implemented a simple slider with a special “curtain” effect.

    Advanced Off Screen Menu with jQuery & CSS3

    Advanced Off Screen Menu with jQuery & CSS3

    Think of it as a full-screen off-screen menu on (a)steroids.It is an HTML5/CSS3 responsive solution for using (and making) animated large off-screen menus. It uses CSS transitions that are hardware accelerated and much faster then jQuey animations.

    • 20 responsive presets. (Check the live preview button to test them.)
    • Browser based Editor with 30 presets.
    • Compatible with all HTML5 browsers INCLUDING MOBILE! (IE10+, Chrome, Safari, Opera, Firefox). Tested on iOS and Android.
    • Simple usage, include 2 files (css and js) and add literally 2 lines of code.
    • requires almost NO change on existing HTML sites.

    Animated Alert with jQuery & CSS3

    Animated Alert wit jQuery & CSS3

    Animated alerts are the JQuery plugin based on css3 animation. Using it you can effectively communicate to users the right information. There are 68 animations, multiple color themes and types of messages and detailed documentation. Also you can develop your own themes, because of the efficient organization of the code. The plugin works in all modern browsers and on all devices.

    superRetroid : jQuery Retro Video Game Galleries

    superRetroid : jQuery Retro Video Game Galleries

    You’re most likely looking for something specific – not a generic plugin that will bend to your needs. CodeDroid12 plugins are not all-in-one or multipurpose. They’re built to serve one specific task well – and usually with a quick Copy & Paste approach.

    • Includes 2 Sega Genesis PSD Mockups
    • Installs in seconds
    • Easily customizable
    • Responsive and lightweight
    • Unique retro video game hover effects

    jQuery Roulette Wheel Plugin

    jQuery Roulette Wheel Plugin

    jQuery Roulette Wheel allows you to convert a canvas in a random selection roulette.

    • Allowing to add any number of options, auto-generating a color for each one.
    • A callback function is called when an item is selected.
    • The spin button is rendered in the center of the wheel, instead of using a <button> element

    Product Comparison Layout & Effect with CSS3

    Product Comparison Layout & Effect with CSS3

    A basic responsive product grid layout with comparison functionality and a slide-in effect.This Blueprint is a responsive product grid layout with comparison functionality. A maximum of three items can be selected for the product comparison. The comparison view shows flexbox-powered columns or rows (depending on the viewport size) that appear with a slide-in effect. There are a couple of example media queries for smaller viewports.