Isotope has been out in the open for over a month now and I have to say I'm pretty darn happy with the results so far. As per my original goal, it's making money and supporting it has not eaten away too much of my personal time. So far, so good.

A big THANK YOU goes out to all the fantastic people who are supporting my work by purchasing the licenses. It's been enthralling to discover how many folks are willing to say yes to this little experiment.

John McLear asks:

Any info available comparing {Quicksand and Isotope}? Both seem to "tick my box"

First off, I need to give Jacek Galanciak the credit he deserves. Without Quicksand, I would have never found inspiration to build filtering into jQuery Masonry, and subsequently build Isotope into its own filtering and sorting machine. Mr. Razorjack did a superb job of mimicking Mac OS X's animated filters. It was his idea from the beginning and I'm grateful that he brought it to life. Jacek has been credited front and center in the Introduction to Isotope.

My issue with Quicksand is that I never knew how to implement it. To be honest, I've never actually attempted using it. From what I understand, you need to provide duplicate mark up for the group you wish to display. That is: one group for the filtered, one group for all of items, another group for sorted items. There is a way with to filter and sort using only one set of markup with Quicksand, but it requires a fair amount of custom jQuery script to get it working.

As a jQuery user, I was unsatisfied with Quicksand's implementation. The user should not be responsible for building all the sorting and filtering logic. It should be built into the plugin itself. Developing Isotope, I aimed to make filtering and sorting accessible to any user.

I would say ease of use is the principal difference between Quicksand and Isotope. To filter a group with Isotope, you only need to pass in a jQuery selector string to the filter option:

$('#container').isotope({ filter: '.foo' });

But the differences extend beyond that. Here's a list of features you get with Isotope that aren't currently in Quicksand:

• Progressive enhancement on animations with CSS transitions and hardware acceleration when available
• Multiple layout modes
• Caches item elements for better performance
• Plenty of convenient methods
• Plays nice with Infinite Scroll

At first glance, the two plugins are remarkable similar. But I feel once you try putting one into use, it will become clear what Isotope can offer.

Some of my favorite uses of Isotope or Masonry are instances where the plugins are used subtly. Instead of designing the interface around the plugin, they can be used to facilitate the end result.

Over on Stack Overflow, Pedalpete was interested in implementing Isotope:

I've been playing about with isotope a bit and have been trying to create a parent container that remains a fixed size, always having 6 smaller items, and reshuffling to fit the 7th larger item.

The first step is to disable Isotope resizing the container. Set the resizesContainer option to false.

To produce the intended result, I used sorting with fitColumns layout mode and updated the sort data whenever a new item was clicked.

View Isotope - fitColumns in fit container on jsFiddle.

After seeing a whole animated layout with Isotope or Masonry, you might get the idea to animate one of the item elements. But animating the size of an item element will throw off the layout algorithm. Justin Lascelle ran into this issue: Stack Overflow: Need help reversing a function; reverting an animated expansion of a div..

It's a problem I've faced before, so I put together this screencast to go over the most elegant way to resolve it.

View on Vimeo: Isotope: animating item sizes

Try out the results for yourself on jsFiddle

Mr. Chris Armstrong is currently developing a very cool inspiration gallery with Isotope. He recently made this inquiry:

when adding items to isotope, is it possible to have them fade in and come from the bottom (instead of the top left)?

You can see what Chris is talking about in the Infinite Scroll demo. A better effect would be if they were animated from the bottom up, so the new items don't have to traverse the length of the previous content.

It's a issue I had written down for a rainy day, so my thanks go out to Chris to motivate me to find a solution. Here it is...

View on jsFiddle: Isotope - fading in newly appended elements

This example requires Isotope v1.0.110220. If nothing happens when you click the Add Items button, try going to http://isotope.metafizzy.co/jquery.isotope.min.js and doing a hard refresh.

There's a lot of cool things going on here. Let's break it down...

var isotopeData = $container.data('isotope'),

You can get an instance's options and properties using .data('isotope'). This is a perk of using the jQuery UI widget bridge.

applyStyleFnName = isotopeData.applyStyleFnName,

applyStyleFnName is the either jQuery method -- either .css() or .animate() -- used on item elements when applying CSS style. It is dependant on the animationEngine option and if the browser supports CSS transitions.

newStyle = $container.isotope( 'getPositionStyles', $container.width(), 
  $container.height() );

$.extend( newStyle, isotopeData.options.hiddenStyle );
// apply style
$newItems.css( newStyle );

newStyle is going to be the positioning, opacity, and scale style for the new items. Here I set the position to the bottom right of the container, using the undocumented getPositionStyles method. This method returns position styles (top/left, or translate) depending on Isotope options and CSS transform support. This allows you to position elements using the same layout logic that the Isotope instance is using.

I get the zero opacity and tiny scale from the Isotope's instance options. That style gets immediately applied to the new items.

$container.append( $newItems ).isotope( 'appended', $newItems );
// fade new items to full opacity
$newItems[ applyStyleFnName ]( isotopeData.options.visibleStyle, aniOpts);

After the new items get appended, the visible style gets applied via applyStyleFnName.

The result is just what Chris was asking for. Item elements get animated from the bottom, fading in. The best part being that its leveraging the Isotope instance's options to ensure that it performs consistently well with Isotope across browsers.

Working with Isotope can seem a bit constraining as it seems like you totally have to "buy in" to its functionality. This example demonstrates how you can open up the plugin to get it working for you.

If you have more questions about how to get this working, submit a follow up comment to the issue on GitHub.

Although Isotope's documentation and demos are extensive, I feel like I did a poor job of explaining its value. It's awesome (and especially convenient) to have others doing the work for me.

Redditor lowtolerance wrote a terrific overview of Isotope that's worth a read. It's terrific not because it's positive of my work, but because he gets into the nitty gritty. If you want to know what Isotope is all about and why you should use it, there you go.

Filtering and sorting appears to be very powerful without sacrificing clear, concise markup.

Over on Hacker News, Jonathan Davies (JonnieCache) elaborates on the benefits of animation with sorting and filtering better than I ever could:

{Isotope is useful} for sorting and filtering data in a way that implicitly describes the transformations in the presented dataset caused by said sorting/filtering through the animation effects. Information density++

If you didn't have the animation it would not be easy to see which items had risen and which fallen. You would have to compare your memory of the order before the change with what you're looking at. This is cognitively very difficult.

This next line might be going on a t-shirt:

Not all whizzy effects are gimmicks to be sneered at from the terminal.