CSS3 Transformations

Options

Transform is an optional object that currently supports 2 options:

Scale - an array used to scale the items up or down
Default:

[ 0, 1, 15 ]

Rotation - an array used to rotate the items
Default:

[ null, null, 15 ]

Each option takes an array of values in this particular order [ start, end, duration ]

Code

YUI().use('io-base', 'node', 'gallery-yuisand', function(Y) {

	// Load the first set
	Y.io( 'io/example6_all.html' );

	current = 'all';

	Y.on('io:complete', function( id, data ) {

		// Add the loaded html to our page
		Y.one('#sink').append( data.responseText );

		// Hide the loader icon
		Y.one('#loader').setStyle('display','none');

		if ( id == 0 ) {

			Y.one('.all').setStyle('display','block');
			Y.one('#sink h2').setContent( current );

			// Sorting isn't initiated until first set is loaded
			sortby();

		} else {

			var pups = new Y.YUISand({
				source			: '.' + current,
				destination		: '.' + which,
				attribute		: 'data-id',
				duration		: 1500,
				easing			: Y.Easing.bounceOut,
				transform		: {
					scale		: [0,.95,10],
					rotate		: [-5,25,10]
				}
			});

			pups.on( 'complete', function() {

				Y.one('#sink h2').setContent( which );

				// Replace the class
				Y.one('#sink-contain').replaceClass( current + '-col', which + '-col' );

				// Set new current
				current = which;

			})

		}

	});

	function sortby() {

		Y.one('#sortby').on( 'change', function(e) {

			// Show the loader icon
			Y.one('#loader').setStyle('display','block');

			which = e.currentTarget.get('value').toLowerCase();

			// Grab the html corresponding to what was selected
			Y.io( 'io/example6_' + which + '.html' );

		})	

	}

})