Thursday, February 18th, 2010

Quicksand: transition and filtering effect

Category: JavaScript, jQuery


Jacek Galanciak has created a nice visual transition library, Quicksand, that filters and shows a set of data in an interesting way.

The jQuery plugin has you quickly calling quicksand like this:


  1. $('#source').quicksand( $('#destination li') );

and you have the data to transition between:

  1. <ul id="source">
  2.     <li data-id="iphone">iPhone OS</li>
  3.     <li data-id="android">Android</li>
  4.     <li data-id="winmo">Windows Mobile</li>
  5. </ul>
  7. <ul id="destination" class="hidden">
  8.     <li data-id="macosx">Mac OS X</li>
  9.     <li data-id="macos9">Mac OS 9</li>
  10.     <li data-id="iphone">iPhone OS</li>
  11. </ul>

You can customize the effect (set the easing, setup data, and the like). Seethe docs and demos for more.

Posted by Dion Almaer at 6:55 am

3.6 rating from 35 votes


Comments feed TrackBack URI

Looks nice but i would advice name-spacing the data-* attribute to prevent collision other library who will be using the new data-* attributes of HTML

data-id => data-quicksand-id

Comment by V1 — February 18, 2010

This is very nice. However, performance is an issue – only Chrome was able to do the animations smoothly – on Safari and Firefox they were pretty choppy :/. Very nice work and let’s wait for faster computers and browsers, so we can use it in real-life apps.

Comment by jx12345 — February 18, 2010

I’m curious as to why performance is an issue on Firefox/Safari since it doesn’t look like it’s doing anything that advanced. Is it just the number of objects being manipulated at the same time?

Comment by travisalmand — February 18, 2010

performance is no issue with me, i tested it in ie7, ie8 and firefox 3.5.7 and everything is smooth. (average pc, not too slow, not very fast). I like the effect!

Comment by daanlib — February 18, 2010

Very cool! It’s stuff like this that is so cool I want to find a place to use it in my app to show off how cool it is.

Performance wasn’t an issue for me on Safari or Firefox.

Comment by chuckles1313 — February 18, 2010

Performance issue on FF up to 3.7

Comment by nasp — February 18, 2010

Another similar filtering mechanism via jQuery at

Comment by cancelbubble — February 18, 2010

love how there is no zooming in IE, when IE was the first browser to implement zoom on all elements. way to go.

Comment by leptons — February 18, 2010

This is very sweet, and a nice simple API to use as well. I need to look out for an opportunity to use it!

Comment by Skilldrick — February 19, 2010

Hi everyone, thanks for your good words. I’ve just released v1.2 with major performance improvements. There are even further performance tweaks possible (see I found 4-year-old PC with Windows XP and everything was smooth in all browsers.

Comment by RazorJack — February 19, 2010

“No Internet Explorer 6 support is planned. Ever”

Fail. There are tons of IE6 users out there. Many are corporate users who are not allowed to “just download FireFox”. They don’t want to hear it and one thing they all have in common is a job, so they likely have some sort of disposable income to spend online.

You can pretend they don’t exist and they will reciprocate by pretending your clients’ sites don’t exist. ;)

Comment by DavidMark — February 20, 2010

The one demo sort of worked in IE6 (meaning it at least didn’t break). But the buttons were completely fouled up (look completely different from the other browsers, labels half-visible, etc.) Why not at least test your CSS in IE6 (or a multi-IE tester of some sort?)

It’s all (untested) style and graphics and very little substance. And oh BTW, it won’t work without jQuery (automatic failure). ;)

Comment by DavidMark — February 20, 2010

This sort of says it all:-

if ($.browser.msie || (typeof($.fn.scale) == ‘undefined’)) {
// Got IE and want scaling effect? Kiss my ass.
options.useScaling = false;

…and it says “don’t use this (or anything like it)”. These “rebels” who want to pretend IE doesn’t exist are hopelessly deluded. Notice how nasty this guy is about it. His world would be so much simpler if it weren’t for that darned Microsoft browser. Windows isn’t going away, so you better get used to supporting IE. ;)

And a browser sniffer to boot. :(

Comment by DavidMark — February 20, 2010


Quicksand does work in IE7 and IE8 flawlessly. What’s more, you can use it in your wep app that supports IE6! When you call Quicksand to replace one collection with another, even on IE6 the collection gets replaced. The only difference is that you won’t see any animation on Internet Explorer 6. But if the script produces target outcome, I think it’s fair. If you want animation, eyecandies and CSS3, get a modern browser. Otherwise, you’ll get something that just works. Fair, isn’t it?

We didn’t test the project website on IE6 because IE6 users aren’t it’s target. I’m sure there are no web developers who use IE6 as their primary browser of choice.

About disabling scaling effect: there is no Internet Explorer version that supports CSS3 transforms. Why shouldn’t I disable it when the browser cannot use it?

It’s not me who pretends that IE6 doesn’t exist. Youtube, most Google apps, 37singals (Basecamp, Highrise) – they’re all big names. And these big names wll drop IE6 support this year.

Just look at your websites’ statistics and relax. There will be no IE6 in 2011, or at least nobody will care. :)

Comment by RazorJack — February 21, 2010

Nasp, your sript is juste great, congratulations

Comment by agenceweb — March 16, 2010

One issue I have found is using Quicksand with FancyBox ( FancyBox work just fine without sorting, however once a category is sorted, the FancyBox pop-ups break. Anyone have any ideas?

Comment by sjhilbel — April 13, 2010

I’m sure this sounds ridiculous, but I’m having trouble getting this to work at all. I’ve spent my whole career in Flash and am trying to venture into the jQuery world. Does anyone have a fully working page example of “Advanced: Sorting one set of HTML” that I could take a look at? Thiis looks amazing, but i think I’m having a hard time structuring the file correctly. Thanks!

Comment by asteenberge — April 29, 2010

Leave a comment

You must be logged in to post a comment.