Quicksand For Mac

Reorder and filter items with a nice shuffling animation.

Home

'Ah, I let you win! ' ― Wario, Mario and Sonic at the Olympic Games Wario (ワリオ Wario?) is a character in the Mario series. He is the counterpart of Mario and is known to be very greedy. Although he began as an antagonist, he developed into more of an anti-hero, starring in his spin-off titles such as Wario Land. 1 Profile 1.1 Personality traits 2 Biography 2.1 Mario and Wario 2.2. Filter which items are to be displayed below. Notifications for standings updates are shared across all Worlds. Notifications for PvP team formations are shared for all languages.

About

I love Mac apps, especially for their attention to detail. CoreAnimation makes it so easy to create usefuland eye-pleasing effects, like the one inthis video. Quicksand aims at providing a similar experience for users on the web.

Documentation

How it works

At the very basic level, Quicksand replaces one collection of items with another. All youneed to do is provide those two sets of items. You can do it in a couple of ways:

Use plain HTML, like an unordered list.
Download data by an Ajax call
Transform HTML items by JavaScript (for example, sort them differently)

Calling

This will work for the following HTML:

Please note that data-* is a perfectly valid HTML5 attribute. Ifyou’re using older doctype, you can use a different attribute or even a custom function toidentify unique elements. See the examples for more.

First container (source) is visible to the user. Second container (destination)is provided as the first argument of Quicksand.

Quicksand Mac App

You need data-id attributes so that the plugin can identify the same elements within sourceand destination collections. If elements exists in both collections (the same data-id), it’s thesame to Quicksand.

If you want to include a callback function, add it as a last argument:

Quicksand Formation

CSS recommendations

Quicksand Machine

When styling your items and their container, please use CSS class. Using ID may lead to strange results. Quicksand clones the container to simulate destination frame of the animation. Since it's impossible for two elements of the same ID to exist, styling your items/container via container ID should be avoided.
Quicksand needs to know the margin of body, container and collection items. If these elements have their margins, please use px (pixels), not ems. The plugin doesn't understand ems for now.

Parameters

You can modify Quicksand by using optional parameters argument.

List of available params:

Name	Default	Description
`adjustHeight`	`'call'`	Adjusts the height of container to fit all the items, `'call'` for automatically adjusting before or after the animation (determined automatically), `'dynamic'` for height adjustment animation, `'auto'` to set the value to `'auto'`, `false` for not doing absolutely anything about it (useful on responsive pages).
`adjustWidth`	`false`	Adjusts the width of container to fit all the items, `'call'` for automatically adjusting before or after the animation (determined automatically), `'dynamic'` for width adjustment animation, `'auto'` to set the value to `'auto'`, `false` for not doing absolutely anything about it (useful on responsive pages).
`attribute`	`'data-id'`	Attribute used to match items in collections. You can provide custom function to extract unique values (see the demos)
`duration`	`750`	How long the animation will take. In milliseconds.
`easing`	`'swing'`	Easing for the animation. Use jQuery easing plugin for more easing options.
`enhancement`	`function() {}`	Since v1.5, this shouldn't be needed in most cases. If you wish to integrate their visual enhancements (eg. font replacement) or attach click/hover events on new sorted elements, specify a function that refreshes or re-applies enhancement to an item during the animation.
`useScaling`	`false`	Use scaling (CSS3 transform) animation. Requires to include this plugin to your project.
`retainExisting`	`true`	By default, Quicksand reuses existing DOM elements instead of replacing them (new in v1.3). Set this option to `false` to brutally replace the collection with a fresh one when the animation ends. This in most cases shouldn't be required, but might be useful in some circumstances.
`maxWidth`	`0`	Hide all elements whose `left` CSS property is greater than this value. Setting this option to `0` turns this behavior off.
`atomic`	`false`	Set to `true` to swap the DOM elements immediately. Turning this option on will make the animation look less effective but will make your life easier if you intend to modify the DOM during the animation.

Performance

Version 1.2 brought major performance tweaks out of the box. To improve performance, you can:

turn off useScaling option to stop using CSS3 transforms in the animation
stop using adjustHeight: 'dynamic' in favor of false or 'auto'.

Integration with other plugins

When your items have functional enhancements (eg. tooltips), remember to use callback to apply them on newly cloned objects:

When your items are visually enhanced (eg. font replacement), use enhancement function to refresh/apply the effect during the animation:

Examples

As it was stated earlier, Quicksand works by comparing two collections of items and replacing them. It’sthat simple.

Advanced demonstrations include custom jQuery code to achieve some of the goals, like sorting or makingAjax calls. This code can be copied & used freely, but it’s not part of the plugin.

So, go ahead and…

FAQ

Quicksand Font For Mac

Can I use use Quicksand in commercial projects?
Yes! You can use it commercially without limitation, you can even use it in website templates you sell on ThemeForest.
I get an error TypeError: Result of expression ... easing ... [undefined] is not a function. What happened?
You are using easing effect that's not built-in and forgot to include jQuery.easing plugin. You can download it from its home page. Alternatively, remove easing from your Quicksand options to stick with the default swing effect. It's not that bad!
I would like to filter my items in a different way. How can I do it?
There's only one thing that Quicksand can do and it's performing the animation. Quicksand does not filter and does not do any sorting. It's up to you to provide initial collection and destination collection. A little bit of custom programming is required.
How can I use Quicksand with radio buttons instead of links? I want to combine criteria when filtering my collection.
You need to learn how to use callbacks in jQuery to handle changes in forms. Next, you have to study jQuery selectors to filter items the way you like. Quicksand generates the animated transition between elements. It's up to you to filter and sort.
I'm a designer and I don't know how to start...
This plugin requires basic programming skills: using jQuery selectors and callbacks is a minimum knowledge required to implement it on your website. Copy-paste is cool but sorry, not this time. Good luck studying jQuery, it's not that hard!

Other crap

Requirements and dependencies

Required: jQuery. Any version equal or greater than 1.6.1 should work. This includes jQuery 2.0+ and jQuery 3.0+.
Optional: Use jQuery Easing for additional easing options (the best – easeInOutQuad)
Optional: Use jquery.transform2d.js for additional CSS3 scaling animation; works fine without this plugin (utilizes fade efect instead)

Browser compatibility

The plugin should work in all browsers, including versions a few years behind. Internet Explorer 7 is the lowest supported version of IE.

Extra credits

Huge thanks go to Piotr Petrus for organizing the documentation, makingdemos and creating this stunning design.

Visitload47