
JQuery Quicksand plugin - vijaydev
http://razorjack.net/quicksand/
======
threepointone
This is pretty cool. I did a similar thing at my last job with this site -
<http://www.idiom.co.in>

------
lecha
This is powerful feature, but the demo example doesn't really give justice to
it. There needs to be a good reason to use it. Resorting from name to size of
the file it not it.

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.

~~~
systemtrigger
His ajax demo is your first idea:
<http://razorjack.net/quicksand/demos/ajax.html>

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'));
          });
        });
      });
    

For each link:

    
    
      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>

------
boundlessdreamz
Amazing. The animations are so smooth. It is almost addictive to watch the
animations :)

~~~
bd
_The animations are so smooth._

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.

~~~
boundlessdreamz
oh. On chrome mac it is very smooth. On Firefox 3.6 Mac, sometimes the
"rearranging objects" feels non-smooth.

~~~
bd
Rearranging is quite fine, it's crossfade and zoom that is very jerky on my
notebook.

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).

------
nym
Nice, but how many items can it handle without getting choppy? I see 13 items
in that demo. Can it do 30? 50?

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.

------
adamilardi
WOW maybe that can go on the Ipad

------
al_james
Hmmmm... does require the addition of a non-standard attribute ("data-id") to
the HTML/XHTML... so it will be invalid... Shame that cant be done with class
names. E.g. class="data-id-macos".

~~~
rossriley
Yes, that's a standard and valid HTML5 attribute.

~~~
al_james
Oh is it? Whoops!

~~~
nostrademons
<http://dev.w3.org/html5/spec/Overview.html#attr-data>

------
lambdom
The website design is great too. Congrats.

------
gojomo
Love it. Thank you, razorjack -- need this for an upcoming project and thought
I'd have to piece it together myself from other animation primitives.

------
al_james
Anyone know of a mootools equivalent?

------
martincrow
Ya its really work..

------
go2startup
great plugin but still wondering how useful it will be

------
RedWolves
Heard about this plugin on last weeks jQuery Podcast.

------
csomar
The design is terrible

I mean it's VERY VERY nice :D

------
timinman
LOL! That's pretty cool, 'Google Pokemon'.

~~~
timinman
So did I get downgraded for using 'cool', or or 'LOL', or just for laughing at
the Pokemon joke in the demo?

------
jdee
I thought I couldnt love jQuery more than I do until I saw this.

