Best jQuery Animation Plugins & Tutorials with Demo

    Interactive Animated SVG Drum Kit

    Interactive Animated SVG Drum Kit

    Today we’re going to create an animated SVG drum kit that can be played by clicking, tapping or using your keyboard, and that can also be programmed to play by itself! We’ll be making use of GreenSock’s TweenMax animation library, jQuery and the <audio> element.

    Spring Loaders with Rebound and Canvas

    Spring Loaders with Rebound and Canvas

    A tutorial on how to create a loading spinner made with inscribed polygons and animated with Rebound spring motion.

    Shifting Material Button Modal with CSS3 & jQuery

    Shifting Material Button Modal with CSS3 & jQuery

    Two call-to-action buttons that give context to your modals in a Material Design fashion.

    Hamburgers : Tasty CSS Animated Hamburgers

    Hamburgers : Tasty CSS Animated Hamburgers

    Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

    Creative SVG Letter Animations

    Creative SVG Letter Animations

    An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way.

    Ultimate Image Hover effects using CSS3

    Ultimate Image Hover effects using CSS3

    In this tutorial, total number of 8 ultimate hover effects and every single effect contain 3 different effects using same property of CSS3. So you easily learn the single property like transform, translate and transition use with 3 demos.

    PhysicsJS : Physics engine for JavaScript

    PhysicsJS : Physics engine for JavaScript

    A modular, extendable, and easy-to-use physics engine for javascript.

    Filterizr : jQuery Stunning Filterable Gallery

    Filterizr : jQuery Stunning Filterable Gallery

    Filterizr is a jQuery plugin that sorts, shuffles and applies stunning filters over responsive galleries using CSS3 transitions.

    Features:

    • Pluggable look & feel (write your CSS effects in the box on the right and hit Filterize!)
    • Performant — optimized for smooth experience on mobile devices
    • Lightweight — around 8.5kb, jQuery is its only dependency
    • Responsive — with your Media Queries (resize the window!)
    • Open source

    Scrollex : Nifty scroll events for jQuery

    Scrollex : Nifty scroll events for jQuery

    Adds slick new scroll events to jQuery (like enter and leave) so you can drop scrolling effects like a boss. Requires jQuery 1.11+.

    Icon Animations Powered by mo.js

    Icon Animations Powered by mo.js

    Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot “Like Animation” by Daryl Ginn.