Best jQuery Animation Plugins & Tutorials with Demo

    On Scroll Header Effects with jQuery & CSS3

    July 18, 2013 | Animation, CSS2 / CSS3.0, Menus
    On Scroll Header Effects with jQuery & CSS3

    You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started.

    Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life.

    Read More Demo

    Two.js : Two-dimensional Drawing API

    July 16, 2013 | Animation, Core Java Script, SVG Tutorial
    Two.js : Two-dimensional Drawing API

    A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.Two.js is deeply inspired by flat motion graphics. As a result, two.js aims to make the creation and animation of flat shapes easier and more concise. At the time of this writing two.js unfortunately does not support text or images.

    Two.js has a built in animation loop. It is simple in nature and can be automated or paired with another animation library.At its core two.js relies on a scenegraph. This means that when you draw or create an object (a Two.Polygon or Two.Group), two actually stores and remembers that. After you make the object you can apply any number of operations to it — e.g: rotation, translation, scale, etc..

    Read More Demo

    PopCircle : jQuery Florid Customize Image Gallery Plugin

    July 13, 2013 | Animation, CSS2 / CSS3.0, Gallery, Plugins
    PopCircle : jQuery Florid Customize Image Gallery Plugin

    Pop Circle is a Florid Jquery Plugin for Customize Image Gallery to turn the Html image element into a Pop Circle..

    Features:

    • Can customize the pop circle limits based on your needs.
    • Can Show the Popcircle around the trigger as full circle, half circle or quarter Circle.
    • Easy to customize animation time and easing functionality
    Read More Demo

    Flare : jQuery Optical Flare FX

    July 13, 2013 | Animation, CSS2 / CSS3.0, Plugins
    Flare : jQuery Optical Flare FX

    This is a plugin for jQuery which animates a colored optical flare to slide across elements. The flare is white in the center and has a customizable colored glow. The plugin also allows change of speed, glow radius, and event triggering the animation. The animation is performed by sliding across an element’s top-left corner to the top-right corner.

    Features:

    • Cool movie-style effect also used in games such as Sleeping Dogs.
    • Works in Chrome, Firefox, and Safari, and IE 10 including mobile.
    • Uses modern CSS techniques.
    • Customizable glow color, speed, glow radius, and trigger event.
    • First Optical flare effect without use of images.
    Read More Demo

    Animated Books with CSS 3D Transforms

    July 12, 2013 | Animation, CSS2 / CSS3.0
    Animated Books with CSS 3D Transforms

    A creative way to show interactive books using CSS 3D Transforms.In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions.
    We’ll show you two types of book designs: hardcover and paperback. Both were made to be easily modifiable in some of their content parts using CSS, images, anchors and some extra little details.

    Read More Demo

    jQuery Spin : Creates Animated loading indicators

    July 11, 2013 | Animation, CSS2 / CSS3.0, Plugins
    jQuery Spin : Creates Animated loading indicators

    Spin is a jQuery plugin that creates animated loading indicators with only CSS and JavaScript.

    Read More Demo

    elementTransitions.js : jQuery CSS3 Transitions Effect Plugin

    July 10, 2013 | Animation, CSS2 / CSS3.0, Plugins
    elementTransitions.js : jQuery CSS3 Transitions Effect Plugin

    This repository is a wrapper around the code provided by a codrops article on page transitions. Their code has been modified to allow more than one animatable element per page. Additionally, you can now add transitions straight from html tags.

    Read More Demo

    Scroll Activated Fixed Header Animations with jQuery & CSS3

    July 7, 2013 | Animation, CSS2 / CSS3.0, Menus
    Scroll Activated Fixed Header Animations with jQuery & CSS3

    It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

    Read More Demo

    Interactive Particles Slideshow with Html5 & JavaScript

    July 4, 2013 | Animation, Core Java Script, HTML5, Slider
    Interactive Particles Slideshow with Html5 & JavaScript

    This is an experimental interactive slideshow component with math shapes and texts using Html5 Canvas. The slideshow consists of pairs of shape and text, both made out of particles that the user can interact with and that transition into the next pair when navigating. With Canvas we can dynamically draw 2D stuff using JavaScript and this experiment shows some of the possibilities.

    Read More Demo

    Flippant.js : JavaScript & CSS3 library for flipping things over

    July 4, 2013 | Animation, Core Java Script, CSS2 / CSS3.0, Popup Window
    Flippant.js : JavaScript & CSS3 library for flipping things over

    Flippant.js is a mini javascript and CSS3 library that lets you flip things over. It has zero dependencies, is easily customized, and exports a single function: flip.

    Read More Demo