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:
JAVASCRIPT:
-
-
$('#source').quicksand( $('#destination li') );
-
and you have the data to transition between:
HTML:
You can customize the effect (set the easing, setup data, and the like). Seethe docs and demos for more.
Related Content:
3.6 rating from 33 votes
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
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.
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?
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!
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.
Performance issue on FF up to 3.7
Another similar filtering mechanism via jQuery at http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
love how there is no zooming in IE, when IE was the first browser to implement zoom on all elements. way to go.
This is very sweet, and a nice simple API to use as well. I need to look out for an opportunity to use it!
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 http://razorjack.net/quicksand/docs-and-demos.html#performance). I found 4-year-old PC with Windows XP and everything was smooth in all browsers.
“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. ;)
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). ;)
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. :(
David,
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. :)
Nasp, your sript is juste great, congratulations
One issue I have found is using Quicksand with FancyBox (http://fancybox.net/). FancyBox work just fine without sorting, however once a category is sorted, the FancyBox pop-ups break. Anyone have any ideas?
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!