Best jQuery Animation Plugins & Tutorials with Demo

    Pixi.js : Super fast HTML 5 2D rendering engine

    Pixi.js : Super fast HTML 5 2D rendering engine

    Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback.The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. Also its fast.

    Features:

    • WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
    • Canvas renderer (Fastest in town!)
    • Full scene graph
    • Super easy to use API (similar to the flash display list API)
    • Support for texture atlases
    • Asset loader / sprite sheet loader
    • Auto-detect which renderer should be used
    • Full Mouse and Multi-touch Interaction
    • Text
    • BitmapFont text
    • Multiline Text
    • Render Texture
    • Spine support
    • Primitive Drawing
    • Masking

    Creative Loading Effects with CSS3 & JavaScript

    Creative Loading Effects with CSS3 & JavaScript

    Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube. When loading something on a page, be it images or the next content, we don’t have to be restricted to a tiny loading indicator but we can get creative and big. So the idea is to indicate that something is happening in a stylish way without creating too much distraction for the user. There might be actions where this might not be adequate, but in some situations it might be quite fitting and amplifying for the overall design.

    Super Simple Text Rotator with jQuery

    Super Simple Text Rotator with jQuery

    A light weight jQuery plugin that will allow you to add a super simple rotating text to your website with little to no markup.

    CodingJack’s jQuery Percentage Preloader

    CodingJack's jQuery Percentage Preloader

    In the days of Flash we had lots of beautiful percentage-based preloaders. But when websites starting switching over to HTML/CSS/JavaScript, they’ve become almost extinct. Percentage Preloader isn’t ground-breaking technology. Instead, it’s a a clever script that when used correctly, is a fresh alternative to the typical infinite-based preloaders we’re so used to seeing these days. Percentage Preloader is what developers typically call a “bulk loader”. If you only have a one or two assets you need to preload, Percentage Preloader is not for you. But when used with a large number of assets (5+), Percentage Preloader works great at creating the illusion of progress.

    Features:

    • Dark and Light Color Schemes
    • 8 Pre-Built Preloaders
    • Designed with CSS making them easy to edit and retina-ready.
    • Preload all the images and iframes on your web page by adding a simple data-attribute to your images.

    Animated Buttons using jQuery & CSS3 Transitions and Transforms

    Animated Buttons using jQuery & CSS3 Transitions and Transforms

    As CSS3 is gradually more supported over popular browsers, CSS3 Buttons become great looking replacements for image and script heavy buttons. These buttons use CSS3 transitions and transforms to animate morphing icons to represent different functions. This is a simple demonstration of 5 buttons representing functions like Demo, Download, Digg, Email, and RSS. I may make more if the response is very positive about these buttons.

    AnimatedScroll.js : jQuery Smooth & Animated Document Scroll

    AnimatedScroll.js : jQuery Smooth & Animated Document Scroll

    AnimatedScroll.js  is a jQuery plugin that enables smooth, animated document scroll to a specific element, supporting native jQuery UI easings.

    titlesequence.js : jQuery plugin for doing animated title sequences

    titlesequence.js : jQuery plugin for doing animated title sequences

    This plugin simplifies the creation of animated title sequences in the style of opening titles or closing credits for a movie, or indeed any style you can achieve with HTML and CSS.

    This plugin allows you to define a sequence of events to be played back in the selected container element. Typical events might include:

    • adding text, images etc at particular x/y coordinates
    • fading text in or out by animating opacity
    • scrolling text up or down by animating the position
    • wiping text in or out by animating the element width

    FFForm : jQuery Contact Form Plugin with Validations & Amazing CSS3 Animation

    FFForm : jQuery Contact Form Plugin with Validations & Amazing CSS3 Animation

    The ‘Contact’ form on your website is like your door to rest of the world in the cyberspace. It is the easiest way for website visitors to drop a line and start the conversation.FFForm is a simple jQuery plugin that can be integrated in any website layout to provide a fully functional contact form. Built with jQuery and CSS, FFForm is compatible with all modern web browsers and mobile devices. It also provides various customization options including animations, field validation and notifications.

    Features:

    • AJAX Enabled
    • Cross-Browser Compatible
    • Data Validation
    • Custom handlers for events like onValidation, onSuccess and onError etc.
    • Various Animation Styles

    Paranimator : jQuery Parallax Animation Effects Library

    Paranimator : jQuery Parallax Animation Effects Library

    jQuery Library for easy implementation Parallax Effects.Paranimator provide easy procedures for parallax animation. future, I’ll implement HTML level interface for this module(DataAttribute).

    Features:

    • Animate with mouse scrolling.
    • Pagination (unit mode)
    • on keyframe beginning animation.
    • layerd background scrolling.
    • background auto scrolling.

    AnimateScroll : jQuery Plugin for Animating Scroll

    AnimateScroll : jQuery Plugin for Animating Scroll

    AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.

    It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more. Supports more than 30 unique Scrolling Styles.