Best jQuery Animation Plugins & Tutorials with Demo

    g9.js : javascript library for Creating Interactive Graphics

    g9.js : javascript library for Creating Interactive Graphics

    g9 is a javascript library for creating automatically interactive graphics.

    With g9, interactive visualization is as easy as visualization that isn’t. Just write a function which draws shapes based on data, and g9 will automatically figure out how to manipulate that data when you drag the shapes around.

    Particles.js : Javascript plugin for Particle Backgrounds

    Particles.js : Javascript plugin for Particle Backgrounds

    Particles.js is a lightweight and dependency-free javascript plugin for particle backgrounds.

    ViewScroller.js : jQuery Fullpage website Scrolling

    ViewScroller.js : jQuery Fullpage website Scrolling

    ViewScroller.js is a  small and easy to use solution that allows you to create fullpage scrolling websites.

    It uses CSS3 transitions and jQuery animations depends on browser abilities. It’s important because some old browsers like IE8 has no CSS3 support.

    mFancyTitle : jQuery Plugin to Animate Your Page Title and Favicon

    mFancyTitle : jQuery Plugin to Animate Your Page Title and Favicon

    mFancyTitle is the jQuery plugin that lets you animate your document <title> & favicon easily with style.

    Text-Spinners : Pure CSS Inline Loading Indicators

    Text-Spinners : Pure CSS Inline Loading Indicators

    Pure text, CSS only, font independent, inline loading indicators.

    Toolgif : Simple jQuery GIF Tooltip Plugin

    Toolgif : Simple jQuery GIF Tooltip Plugin

    Toolgif is a lightweight and very simple jQuery gif tooltip plugin. Also there area some options for customize tooltip.

    Transition Effect with CSS Masks

    Transition Effect with CSS Masks

    Today we’d like to show you how to create an intriguingly simple, yet eye-catching transition effect using CSS Masks. Together with clipping, masking is another way of defining visibility and composite with an element. In the following tutorial we’ll show you how to apply the new properties for a modern transition effect on a simple slideshow. We’ll be applying animations utilizing the steps() timing function and move a mask PNG over an image to achieve an interesting transition effect.

    Choreographer.js : JavaScript Library for Complex CSS Animations

    Choreographer.js : JavaScript Library for Complex CSS Animations

    Choreographer.js is a simple library to take care of complex CSS animations.

    Background Segment Effect with CSS & Anime.js

    Background Segment Effect with CSS & Anime.js

    Today we’d like to share a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same background image and make these boxes move in perspective towards the viewer. Adding a fitting shadow and some parallax makes all this look quite interesting. Furthermore, we’re employing anime.js, the easy-to-use JavaScript animation library by Julian Garnier.

    Fancy SVG Letter Animation

    Fancy SVG Letter Animation

    Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.