Best jQuery Animation Plugins & Tutorials with Demo

    Animated Sign Up Flow with CSS3 & jQuery

    Animated Sign Up Flow with CSS3 & jQuery

    A pricing table that animates into a sign up form once the user selects a plan.

    In most cases, you’ll redirect your users to a sign up page. However, if your checkout process is quite simple, an alternative approach would be to animate the pricing table, and show the checkout form right away, in the same page.

    Detecting CSS Animation & Transition End with JavaScript

    Detecting CSS Animation & Transition End with JavaScript

    Detecting the end of CSS animation and transition could be useful if you want to back up some of your JavaScript behavior on CSS.

    Enhance.js : Zoom & dynamically Crop Images

    Enhance.js : Zoom & dynamically Crop Images

    A simple jQuery plugin for image zooming – now with support for object-fit/object-position, powered by Velocity.js animations, complete with some pre-defined image cropping classes.

    Raindrops.js : Raindrops effect plugin for jQuery

    Raindrops.js : Raindrops effect plugin for jQuery

    Raindrop is a plugin that lets you give the raindrop effect. Just a drop in the ocean is the tagline that fits well with what raindrops plugin does.

    tFigure2 : Animated Image Captions with CSS3

    tFigure2 : Animated Image Captions with CSS3

    Second part of small collection of 5 CSS animated Image Captions. This kit stuff will save you a lot of time when creating websites! They’re really easy to use and have very nice interfaces. Enjoy!

    Responsive Layered Slider with CSS3 & jQuery

    Responsive Layered Slider with CSS3 & jQuery

    In this tutorial you will lean how to create a responsive layered slider. The slider will have multiple slides, each slide will have multiple layers which can have a different fade in effect.

    The entire slider works by using just a JavaScript document and you don’t have to attach any CSS style sheets to use it. Each layer will have 18 possible effects which you can use to your liking. All animations are created by inserting CSS code into the page using JavaScript

    Card Expansion Effect with SVG clipPath & jQuery

    Card Expansion Effect with SVG clipPath & jQuery

    A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.We are going to create a experimental grid layout with “cards” where we’ll animate the card expansion with a morphing effect on the cover image and follow its motion with a delightful animation of a low-poly pattern used as the background of the page.

    Filterable Product Grid with jQuery & CSS3

    Filterable Product Grid with jQuery & CSS3

    A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.This Blueprint is a responsive Isotope-powered product grid layout where each grid item is a Flickity image slider. A small cart icon animation indicates that a product was added to the shopping cart. The product filter utilizes the Isotope filter functionality. Some example media queries are used to show how to make the layout adaptive.

    Animatia : CSS Image Hover Effects

    Animatia : CSS Image Hover Effects

    The aim of this product is to provide quality ‘Image Hover Effects’. So that You may use them in your web projects and enhance the web experience of your users.

    Animatia contains different types of designs like button styles, overlay effects , image effects , details and captions. You can find them all together in one product.

    • Button Styles ( 22 )
    • Overlay Effects ( 27 )
    • Details Styles ( 30 )
    • Captions ( 20 )
    • Images Styles ( 6 )
    • Social Media Icons (8 )

    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