Item Transition Inspiration with jQuery

Have you seen Mary Lous latest work on codrops, the Inspiration for item transitions? If not, you should check it out first, she does an amazing work as always.

Some of you however might find it a bit hard to integrate into your projects, as there is a huge base of developers using jQuery mostly. I have transformed her work into a jQuery plugin, to make your work faster.

Additions & Improvements

Only dependant on jQuery
Multiple instances on the same page
Handles callbacks
The animation select field is optional

Implementation

4 CSS files are included from the original work, you should all of them to the site head first:

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/fxsmall.css" />
<link rel="stylesheet" type="text/css" href="css/fxfullwidth.css" />

Make sure, that you have the correct path in the href attribute. There is also a fonts and images folder, you might also want to copy those into your project.

The HTML Structure

Lets look at the code from the full-width example:

<section id='itemtransitions_1'>
	<div class="component component-fullwidth">
		<ul class="itemwrap">
			<li class="current"><img src="img/6.jpg" alt="img06"/></li>
			<li><img src="img/7.jpg" alt="img07"/></li>
			<li><img src="img/8.jpg" alt="img08"/></li>
		</ul>
		<nav>
			<a class="prev" href="#">Previous item</a>
			<a class="next" href="#">Next item</a>
		</nav>
	</div>
</section>

The first element doesn’t have to be a section, you can use a div as well. You can also place multiple instances of the plugin on the same page. You can change the navigation as well, because the next/prev button classes are defined in the javascript declaration.

Javascript

First of all, you need to include a jQuery and the plugin itself in your site header (or footer).

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.itemtransitions.js"></script>

Great. Now the plugin declaration looks like this (this goes to the header/footer as well):

jQuery(document).ready(function() {
  jQuery('#itemtransitions_1').itemtransitions({
    componentSel : '.component',
    itemsSel     : 'ul.itemwrap li',
    prevClass : 'prev',
    nextClass : 'next',
    animation : 'fxSoftScale',
    selectName : 'fxselect',
    animationStart : function(event, node, direction) {
       console.log(event, node,direction);
    },
    animationEnd : function(event, node, direction) {
       console.log(event, node,direction);
    }
  });
});

All of these configuration variables are optional, the plugin will work fine without them. A little explanation though:

componentSel – the selector for the component element – this contains the navigation and the elements container
itemSel – the item selector, relative to the transitions container
prevClass – the class of the previous button
nextClass – the class of the next button
animation – the name of the default animation, you can find the full list in the source code or in the fxsmall.css and the fxfullwidth.css file.
selectName – if you want to use an animation selector, then here goes the name of it. If there is no selector found, then the default animation will be used.

There are also two callback methods:

animationStart – fires when the user clicks the prev/next button
animationEnd – fires when the animation is completed

The three paramaters are the event, the container node and the direction of the button pressed (prev, next).

Grab the code

Demo Download