Updated Features
YUISand now supports curved animations. Check it out here and enjoy.YUISand now also supports CSS3 Transformation. Check it out here and enjoy.
Stay tuned new features coming soon:
Turn collection into sortable once animation has finished,
Scaling fx,
Rotation fx
Examples
Documentation
Getting Started
YUISand has a pretty simple setup. In its most basic form you can be up-and-running by simply calling a new instance of the YUISand object. Your source <ul> will need to have an id of source and the destination <ul> will need an id of destination.
new Y.YUISand();
The most typical implementation of YUISand is to call it when a user clicks a button to toggle between sets of items
YUI().use('gallery-yuisand', function(Y) {
// This assumes that there is a button that has an id of 'sort'
Y.one('#sort').on('click', function(e) {
var s = new Y.YUISand({
// Specifying a class identifier of our source items
source : '.all',
// Specifying a class identifier of the items we want shown on click
destination : '.few',
// Specifying an attribute of data-id to identify unique items
attribute : 'data-id'
});
e.preventDefault();
})
})
Configuration Attributes
- Name
- source
- destination
- attribute
- duration
- easing
- curve
- transform
- Default
- #source
- #destination
- id
- 1000
- Y.Easing.easeOutStrong
- null
- null
- Description
- identifier of the collection that is currently being shown
- identifier of the collection that will be transitioned to
- attribute to use that will identify the items
- duration of the transition in milliseconds
- easing property to be used
- object for curve animations (more info)
- object for CSS3 animations (more info)
