Best jQuery Animation Plugins & Tutorials with Demo

    Material Design Hierarchical Display

    Material Design Hierarchical Display

    The jQuery plugin for Material Design hierarchical display animation effect.

    Dual Sliding Panels with CSS3 & JavaScript

    Dual Sliding Panels with CSS3 & JavaScript

    Dual sliding panels for presenting content in a fun way. Built with Stylus and vanilla JavaScript.

    Shazam-Like Morphing Button Effect

    Shazam-Like Morphing Button Effect

    A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg. We’ll animate some musical notes that fly from outside of the viewport to the listening button to indicate listening activity. Finally, the listening button will transform into a music player with album info of the “identified” song.

    jQuery Audio Equalizer Animation

    jQuery Audio Equalizer Animation

    jQuery Audio Equalizer Animation is simple jQuery based equalizer for <audio></audio> tags.

    Pt : Experimental Library on Point, form and Space

    Pt : Experimental Library on Point, form and Space

    Pt is an experimental library on point, form, and space. It is experimental and fun, and I hope you will use it to make crazy, strange, awesome things.

    Roll.js : JavaScript Roll & Scroll Tracking

    Roll.js : JavaScript Roll & Scroll Tracking

    A little js library (~8kb min, 3kb gzip, no dependencies) to help you keep track of position, scrolling, and pagination.

    Animating an SVG Menu Icon with Segment

    Animating an SVG Menu Icon with Segment

    A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.

    Animated Arrow Navigations With FlexSlider And CSS3

    Animated Arrow Navigations With FlexSlider And CSS3

    All of you should be quite familiar with Codrop’s  “Arrow Navigation Styles” tutorials. They are really inspiring and creative. I played with the Arrow Navigation styles demo, I’m impressed. And I wondered how hard would it be to really implement it on Slider without actually create a slider that does that. First slider that immediately came into my mind is FlexSlider.

    Interactive Room Display with JavaScript & CSS

    Interactive Room Display with JavaScript & CSS

    Today we’d like to share a little experiment based on a Dribbble shot by Bilal Mechairia’s, called “Spaces”. The idea is to show an interactive room with several items that all float in 3D space and move according to the position of the mouse. Once an item is clicked, more details pop up. Navigating between the room “slides” will rotate the different wall sections and add some interesting dynamic to the whole thing.

    Twitter Heart Button CSS3 Animation

    Twitter Heart Button CSS3 Animation

    Today twitter has been introduced a new heart (like) button, it is actually a replacement for favorite button. I love the way twitter has implemented cool animation effect for click action. This post will explain you, how to implement this using CSS3 and Jquery.