Best jQuery Animation Plugins & Tutorials with Demo

    ProgressBarWars : jQuery Animated Progress Bar

    ProgressBarWars : jQuery Animated Progress Bar

    ProgressBarWars is a simple (star Wars Tribute ), light-weight jQuery plugin that allows you to display an animated horizontal progress meter. Just pass in the goal and amount raised or completed, and the rest is optional.

    Material Design Shape Slider with jQuery & SVG

    Material Design Shape Slider with jQuery & SVG

    Get your geometry on with this Material Design inspired shape slider. Developed with SVG shapes and CSS transforms.We’re using SVG’s to draw each shape you see on the left side of the screen. When a shape is clicked we transform the shape with CSS and simultaneously transform the content container to show the correct content for the shape that was clicked.

    Interactive Bar Graph with CSS & jQuery

    Interactive Bar Graph with CSS & jQuery

    An interactive bar graph packed with animations and information. Built with CSS and jQuery.

    Animated Map Path for Interactive Storytelling

    Animated Map Path for Interactive Storytelling

    Today we’d like to share an experimental demo with you. This demo is an interactive map that will animate a map path while scrolling the page. The main idea is to connect the story being told with the path itself. The journey can also contain images that will indicate where they have been taken with a semi-transparent cone. It will appear as soon as the image is in the visible viewport.

    Material Design Slider Animation with CSS3

    Material Design Slider Animation with CSS3

    A Material Design inspired slider with effective communicating animations.Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.

    Ultimate Grid Pro with HTML5 & JavaScript

    Ultimate Grid Pro with HTML5 & JavaScript

    Ultimate Grid Pro is indeed the ultimate responsive multimedia grid builder packed with an insane set of features that allows to create unlimited, filterable / sortable multimedia portfolios, product swhowcase, image galleries with unlimited possibilities. It includes five grid types with vertical or horizontal layout variation (dynamic, classic, masonary, flexible and infinite) that allow to display various multimedia content in a highly customizable way. It runs on all major browsers with support for older browsers like IE8 and mobile devices like iPhone, iPad, IOS, Android or Windows mobile.

    Responsive layout. Five grid layouts included with vertical and horizontal variation (dynamic, masonry, classic, flexible and infinite).

    Flipside : CSS3 Animated Confirmation Popup

    Flipside : CSS3 Animated Confirmation Popup

    Flipside is a button that seamlessly transitions from action to confirmation.

    jQuery Collapsible Fieldset

    jQuery Collapsible Fieldset

    JQuery Plugin for creating a cool collapsible fieldset.This plugin can collapsed or hide fieldset and it’s content by clicking it’s legend. You can also decide the initial state for your fieldset wheter it’s expanded or collapsed. The separated CSS file will also useful if you need to modify the fieldset appearance.

    Hybicon.js : Hybrid icons with SVG & JavaScript

    Hybicon.js : Hybrid icons with SVG & JavaScript

    JavaScript library for synergistic SVG icons. It works with HTML5 data attributes. There is a primary and a secondary icon and they can be animated with hover and click.

    Animated Fixed Menu with CSS3 & jQuery

    Animated Fixed Menu with CSS3 & jQuery

    Fixed menus are a definitive a great ux resource for our website. They look good, and they are also super useful for visitors. Today, I’m showing you how you can create a very simple fixed menu with CSS3 transition