Best jQuery Animation Plugins & Tutorials with Demo

    Animated Checkboxes and Radio Buttons with SVG

    Animated Checkboxes and Radio Buttons with SVG

    By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.

    jQuery Flot Animator

    jQuery Flot Animator

    Flot Animator is a free jQuery plugin that will add smooth or gradual animations to Flot charts.It will allow you to highlight and draw attention to some charts and/or series by easily adding animation to your existing charts.

    This plugin will read the original data array and will build a second array containing all the frames needed for the animation: the new array length will be equal the total animation frames.

    Matrix Effect Using HTML5 and Javascript

    Matrix Effect Using HTML5 and Javascript

    Now a days I am playing around with HTML5 Canvas API and Java Script. It’s an amazing option to create animations.

    This weekend I saw The Matrix movie.This film known for it’s visual effect.
    I wrote one Matrix function In which I am filling canvas with “Matrix” word at random locations using Canvas fillText method. And I am calling that function using Javascript setInterval Method.

    Walking Man Effect Using CSS3 Animation

    Walking Man Effect Using CSS3 Animation

    CSS3 is great way to create animations, we can replace flash animations,animated images and Javascript with CSS3 Animation properties.

    In this tutorial I will explain how to create walking man Animation effect using CSS3 alone as shown below.

    Yummi-loader : Css classes for a fancy page load with jQuery

    Yummi-loader : Css classes for a fancy page load with jQuery

    The Yummi-loader is nothing more than a simple LESS file with some CSS3 animations. Use them just adding ‘off’ class on your body element and changing it with ‘on’ on $(window).load() or $(document).ready() events.

    Custombox : jQuery Modal Window Effects with transitions CSS3

    Custombox : jQuery Modal Window Effects with transitions CSS3

    jQuery Modal Window Effects with transitions CSS3.This plugin is created with native JavaScript but works perfectly with jQuery.

    These animations only works as intended in browsers that support the respective CSS properties.Internet Explorer 8 and 9 works, but without animations.

    Transfer Numbers : jQuery Plugin

    Transfer Numbers : jQuery Plugin

    jQuery Transfer Numbers is a plugin that transfers numbers by flying from one element to another.

    Features:

    • Increments and Decrements Values
    • Transfer speed is customizable
    • Gamification style for your Web Apps
    • Bind to most event listeners
    • Stops at 0

    Animated Border Menus with CSS3 & JavaScript

    Animated Border Menus with CSS3 & JavaScript

    A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

    Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).

    Animate to Hide and Slide Content with jQuery

    Animate to Hide and Slide Content with jQuery

    In this tutorial I want to demonstrate how we can build a similar interface using jQuery animation. These codes are fairly basic and should work in any fixed-style website layout. This type of design leaves room for hidden content, along with main content cascading down the page.

    Ideally we will be using jQuery animations powered by jQuery UI easing effects. I have created a live example with the navigation bar fixed onto each corner of the webpage. Check out some of my demos and see if this interface could work well in any upcoming design projects.

    Create a Pentagon Hover Effect with CSS3 and jQuery

    Create a Pentagon Hover Effect with CSS3 and jQuery

    This is a new series that will focus on cool web elements on the web. My goal is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way. It’s a portfolio site that implements a cool pentagon hover effect for displaying his work. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image. Note: This is using CSS3 Transitions which is still not completely standard and browser compatibility may be limited.