Best jQuery Animation Plugins & Tutorials with Demo

    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.

    3D Curtain Template with CSS3 & jQuery

    3D Curtain Template with CSS3 & jQuery

    A list of split blocks that reunite on scrolling, simulating a movement along the z-axis with the help of CSS transformations and jQuery.

    CM-Rotate.js : Rotate js using CSS transition

    CM-Rotate.js : Rotate js using CSS transition

    Rotate js using CSS translate3d and transition

    • No dependencies
    • Works in all major browsers that support CSS translate3d or transition (IE9+)
    • Works on tablet PC

    SParallax : jQuery Parallax Effects Plugin

    SParallax : jQuery Parallax Effects Plugin

    SParallax is a responsive Jquery plugin that allows you to bind element transitions to the native vertical scroll bar of any web browser, thus allowing you to create parallax effects that are only limited by your imagination.

    Snabbt.js : Fast Animations with javascript and CSS transforms

    Snabbt.js : Fast Animations with javascript and CSS transforms

    Snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices.

    snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that will let the user make smooth animations without needing to know too much about browser rendering.

    Magic Dust : HTML Particles with JavaScript

    Magic Dust : HTML Particles with JavaScript

    Magic Dust is pure html solution for particles based effects. The main benefits of our plugin is easy to use, high performance, responsive and lightweight of plugin. 2.9KB and you can add amazing effects to your html elements. Just few lines of code and magic will happen on your page.

    Features:

    • Pure JS, 2.9KB
    • No jQuery, Vanilla or other libraries required
    • Low CPU and RAM Usage
    • Responsive support, works perfect with relative values like percents, em or rem
    • High customability, 12 parameters
    • Easy to use, just few lines of well documented code
    • Working fine on mobile devices

    Rotating Words using CSS3 Animations

    Rotating Words using CSS3 Animations

    In Modern Web Design, Typography plays a very important role in enhancing the looks of a website. For modular Web Design, selecting right effects is not an easy task. In today’s time, First Impression is the Last Impression. In this tutorial, we’ll create some different types of Animation Effects on rotating words in a sentence.

    Fixed Navigation Transition with CSS3 & jQuery

    Fixed Navigation Transition with CSS3 & jQuery

    Fixed headers are a must for long pages and menus that need to be seen all the time. The transition between an inline menu and a fixed menu is an added effect that really makes your navigation stand out. I have made two different transition effects: A flip effect and an arrow ribbon effect.

    3D Card Previewer with CSS3 & jQuery

    3D Card Previewer with CSS3 & jQuery

    I’ve been working on a movie review based site and I wanted to try and create a movie previewer. I’m incorporating CSS3 transform’s perspective and rotation. The previewer consists of a list of 3D Card movie posters tilted to the right and one featured movie blown up full size. You can switch in between featured movies by clicking on each movie poster.

    Vivus.js : JS library to make Drawing Animation on SVG

    Vivus.js : JS library to make Drawing Animation on SVG

    Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.