JQuery Quicksand plugin
razorjack.net
razorjack.net
For instance:
- Filtering down to a small subset from a large set of visible items. It makes sense to use this effect in case the selected item's representation is zoomed or displays additional detail. The animation indicates that there's a relation between the selection and the larger set. It also gives a clue original distribution of the selected items within the larger set.
Example: Show all facebook connections groupped by country. Then select those that have a particular interest as a list. The animation would give you a clue about geo-distribution of people having the same interest. This clue is an additional information you could not see by simply showing the selection.
- Reordering (eg. promoting) a small set of items in a large set. The animation shows you how far the item travels when it is promoted.
Example: Display the list of tennis players according to their rank at after a given competition. When the user selects the different competition, the list is reordered. The payers who make big jumps attract more attention.
You can use the ajax demo to make your second idea. Like this:
$(function(){
$('#load-players a.button').click(function(e){
$.get(($this).attr('href'), function(data) {
$('.rank-after').quicksand($(data).find('li'));
});
});
});
event-name.html
<ul class="rank-after">
<li data-id="1"><img src="federer.png" /></li>
<li data-id="2"><img src="roddick.png" /></li>
</ul>Unfortunately not in Firefox, at least for me (FF3.6 / Win7).
Especially this test was horrible:
http://razorjack.net/quicksand/demos/one-set-clone.html
Chrome, Safari and Opera performed much better. Even Explorer had smooth animation, though alpha-channel transparency animation there is broken.
I suspect it could be something about transparencies.
Firefox has long tradition of slowdowns when dealing with alpha-channel transparency, especially when compositing multiple transparent layers (also this demo uses "text-shadow" CSS property which puts additional load on renderer).
I worked on a large project that attempted to do this for new cars, which is a slightly larger dataset, and in the end we went with Flex because it had much of the functionality built in, and could do the animations much more smoothly.
Check it out: http://www.newcars.com/carchooser#6
Try clicking on "Price" in the left hand nav, and then moving the slider.
I mean it's VERY VERY nice :D