Best jQuery Animation Plugins & Tutorials with Demo

    Loading Effects for Grid Items with CSS Animations & JavaScript

    Loading Effects for Grid Items with CSS Animations & JavaScript

    Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration. Some of the effects are from the awesome CSS3 scroll effects by Hakim El Hattab and the idea is inspired by the tile animation seen in the Google Plus app.

    Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo. If you’d like to use something else or no library at all, you’ll have to remove the initialization from the script and adjust the selectors etc. That should be pretty straightforward.

    Blueprint : Responsive Icon Grid with CSS3

    Blueprint : Responsive Icon Grid with CSS3

    A responsive grid of anchors with icons, text and some example hover transitions.A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.

    Shuffle : jQuery Categorize, sort, and filter a responsive grid of items

    Shuffle : jQuery Categorize, sort, and filter a responsive grid of items

    jQuery Shuffle Plugin categorize, sort, and filter a responsive grid of items.

    Features:

    • Uses CSS Transitions!
    • Responsive
    • Filter items by groups
    • Items can have multiple groups
    • Sort elements
    • Advanced filtering method (like searching)

    Animelt : jQuery plugin for complex animations

    Animelt : jQuery plugin for complex animations

    The jQuery plugin for complex animations.

    Expanding Search Bar Deconstructed with JavaScript & CSS3

    Expanding Search Bar Deconstructed with JavaScript & CSS3

    One of the things we thought might be nice to change is the search input. We’ve put it from the sidebar into the header and we use a common effect where you have to click to expand the input. We have received many requests on explaining how we did it and today we’d like to show you how to create a search input like that from scratch. The aim is to maximize compatibility for mobile devices and older browsers (down to IE8). Although this might seem like a super-easy thing, we’ll have to apply some tricks in order to make it work properly.

    Horizontal Portfolio Layout with CSS3 Animations & jQuery

    Horizontal Portfolio Layout with CSS3 Animations & jQuery

    In this tutorial today we’re going to create a horizontal portfolio layout with cool hover effects inspired. The website is made in Flash, so I thought it would be nice to recreate the flash hover effect of the portfolio items using CSS3 animations and transitions, and some jQuery to replicate the image pan effect on hover.

    I’ve also added a simple falling down effect on scroll, where the portfolio items fall down as soon as they enter the visible area of the viewport.

    Magic : CSS3 Animation framework with jQuery

    Magic : CSS3 Animation framework with jQuery

    Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible.

    Nyan Bars : jQuery Animated text progress bars

    Nyan Bars : jQuery Animated text progress bars

    Animated text progress bars parsed from a simple string language.

    Create Apple navigation using jQuery Greensock

    Create Apple navigation using jQuery Greensock

    Apple’s website is always full of small innovative details and fancy CSS3 transitions. Designers talk about the clean and simple interface, while front-end developers wonder how some of these elements were created.

    Today we will recreate the new Apple navigation using jQuery Greensock. If you look at it in a desktop browser, you will see a nice elastic animation between the two slides and that’s our goal for today.

    flipGallery : jQuery Powered Animated Photo Gallery

    flipGallery : jQuery Powered Animated Photo Gallery

    flipGallery is a free and lightweight jQuery powered photo gallery with sleek flipping transitions between thumbnails and lightbox enlargements. Other features include dynamic image streaming, auto pagination, auto cropping and transparent image overlay. It only takes a few minutes to set-up and the layout, speed, co-ordination and text can easily be modified in the settings.