Best jQuery Animation Plugins & Tutorials with Demo

    JsMorph : JavaScript Motion framework

    JsMorph : JavaScript Motion framework

    jsMorph is a morphing – motion – tweening framework that knows what you need to do… get going! It’s a nice ensemble of best timing, fast, smart and resource saving algorithms and convenience.

    jsMorph is a completely Cross-Browser, pure javaScript animation framework that can manipulate almost any and multiple stylings of multiple HTML elements. It auto detects start positions, auto converts units, automatically adjusts rendering speed and corrects time leaks for smoother rendering experience.

    BWL Searchable Accordion jQuery Plugin

    BWL Searchable Accordion jQuery Plugin

    BWL Searchable Accordion jQuery Plugin provide you a great way to create responsive and animated accordions for your website. This jQuery plugin comes with well commented jQuery code and valid HTML5 markup, so that you can easily customize code without any issue.

    Features:

    • Smooth jQuery & CSS3 based Accordion.
    • Unique search bar to find contents easily.
    • Unlimited Accordions in a single page.
    • 14+ Smooth Animation & Effects.
    • 6 Stylish Predefined Accordion Theme.
    • Less file included for easy CSS customization.
    • Font Awesome.
    • Google Fonts.
    • Retina Ready.
    • Responsive Accordion

    Bounce.js : CSS3 Keyframe Animation Generator

    Bounce.js : CSS3 Keyframe Animation Generator

    Create tasty CSS3 powered animations in no time. Bounce.js is a tool for generating tasty CSS3 powered keyframe animations.

    jQuery Slideout Menu

    jQuery Slideout Menu

    We’ve created an elegant jQuery-powered animated slideout menu. We were inspired by the simple effect found at Outdated Browser and extended the menu to also work in a variety of places. Try it as a top menu, as well as a right-side menu. Let’s dive into some code and learn how to use this drop.

    Flare : jQuery Animated Optical Flare Plugin

    Flare : jQuery Animated Optical Flare Plugin

    This is a plugin for jQuery which animates a colored optical flare to slide across elements. The flare is white in the center and has a customizable colored glow. The plugin also allows change of speed, glow radius, and event triggering the animation. The animation is performed by sliding across an element’s top-left corner to the top-right corner.

    jQuery Smoove – Gorgeous CSS3 Scroll Effects

    jQuery Smoove - Gorgeous CSS3 Scroll Effects

    Smoove makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into the page as your scroll down the page.

    Adjector.js : A Minimal and Elegant Content Flipper

    Adjector.js : A Minimal and Elegant Content Flipper

    In this tutorial I’ll help you add one such snippet to your own website. Adjector.js is a flexible, minimal and elegant content flipper/rotator which takes only a few minutes to integrate.Adjector.js is a great jQuery plugin which anyone can use and make his/her content talk.

    Animated Icons with CSS3

    Animated Icons with CSS3

    A sample pack (10) of animated icons from Kickdrop. Full icon set coming soon! These retina-ready icons were animated in Adobe After Effects and are exported as .png sprites-sheets. Sprite-sheets contain a collage of frame-by-frame stills that make up an animation (This technique has a long history in gaming).

    We used Stitches , a .png sprite sequence generator, to create the final sheets. After generating the sprite sheets, we used pure CSS3 to animate through the sprite sheet on hover. The mixture css animations and sprite-sheets creates an interesting combination to create visually rich, game-like experiences.

    Canvas Headings : jQuery Animated Text Plugin

    Canvas Headings : jQuery Animated Text Plugin

    With this jQuery plugin you can easily create cool looking headings for your pages!

    Features:

    • Canvas headings with a fallback to default HTML
    • Gradient fill text
    • Image fill text animated and non animated
    • Text shadow/glow
    • Normal and gradient strokes
    • Works with all fonts
    • Rotated text
    • 3D text
    • 3D shadows
    • Distorted text

    On-Scroll Animated Header with CSS3 & jQuery

    On-Scroll Animated Header with CSS3 & jQuery

    We present the very popular fixed, on scroll animated header that changes it’s size and the orientation or visibility of the components within based on the user’s scroll action. As the user begins to scroll and engage with content, the header area is elegantly minimized to leave more of the viewport open for content.