Best jQuery Animation Plugins & Tutorials with Demo

    ScrollMagic : jQuery plugin for Magical Scroll Interactions

    March 10, 2014 | Animation, Plugins, Responsive
    ScrollMagic : jQuery plugin for Magical Scroll Interactions

    ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a progress bar.It’s the plugin for you, if you want to start an animation at a specific scroll position, synchronize an animation to the scrollbar movement, easily add a parallax effect to your website, pin an element at a specific scroll position.

    Features:

    • optimized performance
    • flexibility
    • mobile compatibility
    • ready for responsive webdesign
    • object oriented programming and object chaining
    • event management
    • support for both scroll directions (even different on one page)
    • support for scrolling inside div containers (even multiple on one page)
    • extensive debugging and logging capabilities
    Read More Demo

    flavr – Flat jQuery Popup Dialog

    March 9, 2014 | Animation, Bootstrap, CSS2 / CSS3.0, Plugins, Popup Window, Premium
    flavr - Flat jQuery Popup Dialog

    flavr is a freshly build stylish popup dialog for your next flat website. flavr is built to be responsive, able to adapt its layout and position to any screen size of your viewer with the power of CSS. Just like you, we are avoiding javascript on things we could do with pure CSS.

    Features:

    • Clean & Modern Flat Design
    • Well Documented
    • Fully Responsive
    • Lightweight yet Powerful
    • Bootstrap Compatible
    • CSS3 Animated in Modern Browser
    • jQuery Powered
    • Cross Browser Support
    Read More Demo

    csshake : CSS classes to move your DOM

    March 5, 2014 | Animation, CSS2 / CSS3.0
    csshake : CSS classes to move your DOM

    csshake is a CSS classes to move your DOM  with shake-animation.

    Read More Demo

    CountUp.js : Animates a Numerical value by Counting

    March 2, 2014 | Animation, Core Java Script
    CountUp.js : Animates a Numerical value by Counting

    countUp.js is a dependency-free, lightweight JavaScript “class” that can be used to quickly create animations that display numerical data in a more interesting way.

    Despite its name, countUp can count in either direction, depending on the startVal and endVal params that you pass.

    Read More Demo

    All Animation.css : CSS3 effects with jQuery

    March 1, 2014 | Animation, CSS2 / CSS3.0
    All Animation.css : CSS3 effects with jQuery

    All Animation.css is a set of animations, fun to let your sexiest design. Are cross-browser animations that will give emphasis to your pages but as sliders,’s 3D effects ..

    Read More Demo

    Creating a Border Animation Effect with SVG and CSS

    February 28, 2014 | Animation, CSS2 / CSS3.0, SVG Tutorial
    Creating a Border Animation Effect with SVG and CSS

    Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions.

    Read More Demo

    gifplayer : jQuery plugin to play and stop Animated gifs

    February 26, 2014 | Animation, Plugins
    gifplayer : jQuery plugin to play and stop Animated gifs

    gifplayer is a customizable jQuery plugin to play and stop animated gifs. Similar to 9gag’s.

    Read More Demo

    Placeholdem : Placeholder Caret Animation with JavaScript

    February 25, 2014 | Animation, Core Java Script, Forms
    Placeholdem : Placeholder Caret Animation with JavaScript

    Placeholdem is a JavaScript plugin that animates placeholder carets on inputs and textareas. The placeholder value will incrementally delete on focus, and restore on blur.

    Read More Demo

    Bootstrap Visual FX : jQuery Plugin

    February 24, 2014 | Animation, Bootstrap, Image Effects, Plugins, Premium
    Bootstrap Visual FX : jQuery Plugin

    Bootstrap Visual FX is a fusion between severals of my jQuery plugins, specially adapted to Twitter Bootstrap 2 & 3 .

    Features:

    • Buttons effects (shine, glass)
    • Images effects (shine, glass, grayscale)
    • Full Notification system, with many options (style, buttons, animations, icons, position …)
    • Very easy to use, simply add css class to add effects to yours buttons or images
    • Automatically works with any theme
    • Mobile compatible
    • Documentation , examples and fast start sample page
    • Full modern browsers compatibility : IE8+, Firefox, Chrome, Opera, Safari …
    Read More Demo