Best jQuery Animation Plugins & Tutorials with Demo

    SlidePanel : jQuery Collapsable Panel Plugin

    SlidePanel : jQuery Collapsable Panel Plugin

    Slide Panel is a JQuery plugin that allows elements to expand and collapse creating a sliding panel effect. I know that this is nothing new and there are already a few JQuery panel plugins out there but this one is both highly flexible, has a small footprint and has some unique features.

    PWS Tabs : jQuery Animated Tabs Plugin

    PWS Tabs : jQuery Animated Tabs Plugin

    jQuery Plugin to create tabs.All you need to do is add few divs for your tabs, and script will generate Tabs for you.

    Animated SVG Globe with Markers and Logos

    Animated SVG Globe with Markers and Logos

    Spinning Earth Globe animations with markers and logos’ carousel for Desktop and Mobile. Perfect way to visualize location of event/office/store/city or to showcase partners/sponsors logos.

    Features:

    • Globe rotation made up with flat world maps animated in circle mask
    • Smooth animation (done with Velocity.js)
    • Animation speed and sequence controlled with Javascript (defined variables)
    • Animation shows up when the Globe becomes visible in the browser
    • Resolution independent SVG graphics (perfect for displays with higher pixel density, such as Retina)
    • Easy to change width, colors or visibility of elements, animation parameters

    esKju jQuery ScrollFlow Plugin

    esKju jQuery ScrollFlow Plugin

    Enhance your website by fancy effects based on the user’s scroll index. Pop-in, pop-out, sliding, sticky notes and much more. The plugin supports mobile devices and eldered browsers. It was built using the jQuery library.

    Features:

    • Eased animations for incremental mouse scroll-wheels
    • Adds fancy effects to your homepage
    • Customizable trough settings and CSS
    • Highly compatible
    • Highly customizable
    • Uses CSS3 transitions by default

    CSS3 Image Slide with single Image

    CSS3 Image Slide with single Image

    Nice image slide animation with a single img, animate css and a little jQuery.

    CharCycle : jQuery Cycling Effect Text plugin

    CharCycle : jQuery Cycling Effect Text plugin

    A jQuery plugin to create a cycling effect on selected text at some event.Attach the plugin to the element you want to trigger the cycling, specify the target text you want to produce the effect and include a conditional statement to ensure that cycling isn’t re-triggered while the effect is in progress.

    jQuery Animated Intro Page Loader Plugin

    jQuery Animated Intro Page Loader Plugin

    A jQuery plugin for generate animated Intro Loading Pages.This plugin help jquery beginners to add some cool animated intro page on a website.This plugin is very easy to install and use.

    jQuery Animated Border Plugin

    jQuery Animated Border

    Animated borders for any block level element. This jQuery plugin creates an animated border with configurable thickness and color.

    Inspiration for Text Input Effects with CSS3

    Inspiration for Text Input Effects with CSS3

    Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.

    Form inputs offer a great opportunity to add some subtle and interesting effects to a web page. They are elements that your user will interact with at some point and making them fun to use can enhance the experience. We are used to the default form resembling its paper counterpart but in the digital world we can be more creative. Today we want to share some experimental styles and effects for text inputs with you.

    Textroll.js : jQuery Animated Text Effect Plugin

    Textroll.js : jQuery Animated Text Effect Plugin

    Textroll.js is a jQuery plugin for adding some scroll effect to text.