Best jQuery Animation Plugins & Tutorials with Demo

    Add to Cart Interaction with CSS & jQuery

    Add to Cart Interaction with CSS & jQuery

    A floating cart that slides in when the user decides to buy an item.

    We’re used to different patterns when it comes to the “add to cart” process. The basic idea behind this pattern is to notify the user that an item has been added to the cart, and provide her/him with a link to proceed to the checkout.

    phAnimate : jQuery Animated Placeholder Plugin

    phAnimate : jQuery Animated Placeholder Plugin

    phAnimate is a jQuery plugin that animates placeholder on inputs.

    Prelodr : Preloader inspired in Google Inbox

    Prelodr : Preloader inspired in Google Inbox

    A simple Material preloader with javascript inspired in Google Inbox.

    JS Fireworks – Realistic JavaScript Animation

    JS Fireworks - Realistic JavaScript Animation
    • Create realistic fireworks of any color
    • Visually-rich animation with just one line of code
    • Easy to use (just basic html knowdlege required)
    • Well documented (instructions file, example, comments on code)
    • 10 KB JavaScript library (+19 KB for optional explosion sound)
    • Doesn’t require jQuery or any other library
    • Smooth animation that works over any html element

    Levelup : jQuery Point Increment Decrement Animation

    Levelup : jQuery Point Increment Decrement Animation

    Simple +1/-1 Animation similar to point accumulation in a video game.

    Hoverify Bootnav : jQuery Animated Menu Effects

    Hoverify Bootnav : jQuery Animated Menu Effects

    jQuery hoverfiyBootnav is a simple bootstrap addon to add a nice effect on nav’s hover.

    WAIT! Animate : Insert a delay between each Animation Iteration

    WAIT! Animate : Insert a delay between each Animation Iteration

    Provides an easy way to calculate CSS keyframe percentages so that you can insert a delay between each animation iteration.

    Radial SVG Responsive Slider

    Radial SVG Responsive Slider

    A simple, responsive slider, with a radial transition effect powered by SVG clipPath and mask elements.

    Spin2Win Wheel – Spin It 2 Win It!

    Spin2Win Wheel - Spin It 2 Win It!

    Built using Scalable Vector Graphics Spin2Win Wheel is a responsive, flexible, customisable, resolution independent spin wheel game whose outcomes you control.

    Spin results, prizes, win/lose, number of spins and more can be controlled using JSON data. You can also customise the look and feel of Spin2Win.

    Multi-Layer Page Reveal Effects with CSS & JavaScript

    Multi-Layer Page Reveal Effects with CSS & JavaScript

    Today we’d like to show you how to create a simple and modern page transition effect. Maybe you have spotted some of the cool effects seen on sites like Nation or Keep Portland Weird, where two or more layers of overlays are animated across the page to reveal some new content. Let’s see how we can do something like that. We’ll focus on the animation part only, not the loading of content. For the effects we’ll be using CSS Animations.