Custom Easing/Duration Example

Y.Easing.elasticBoth Y.Easing.backOut Y.Easing.bounceOut Y.Easing.easeBoth
  • Apples
  • Oranges
  • Grapes
  • Kiwis
  • Pineapples

Code

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

	lastClicked = 'ease1';

	Y.one('#a').on('click', function(e) {

		new Y.YUISand({
			source: '#' + lastClicked,
			destination: '#ease2',
			easing: Y.Easing.elasticBoth,
			duration: 3000
		});
		lastClicked = 'ease2';
		e.preventDefault();
	})

	Y.one('#b').on('click', function(e) {

		new Y.YUISand({
			source: '#' + lastClicked,
			destination: '#ease3',
			easing: Y.Easing.backOut,
			duration: 750
		});
		lastClicked = 'ease3';
		e.preventDefault();

	})

	Y.one('#c').on('click', function(e) {

		new Y.YUISand({
			source: '#' + lastClicked,
			destination: '#ease4',
			easing: Y.Easing.bounceOut,
			duration: 750
		});
		lastClicked = 'ease4';
		e.preventDefault();

	})

	Y.one('#d').on('click', function(e) {

		new Y.YUISand({
			source: '#' + lastClicked,
			destination: '#ease5',
			easing: Y.Easing.easeBoth,
			duration: 750
		});
		lastClicked = 'ease5';
		e.preventDefault();

	})

})