MooTools Demos - Transitions

Transitions

Shows the transitions

Click somewhere on the gray area to see the transition

<div id="fxNavigation">
    <label for="fxTransition">Transition</label>:
    <select id="fxTransition">
        <option value="linear">Linear</option>
        <option value="Quad">Quadratic</option>
        <option value="Cubic">Cubic</option>
        <option value="Quart">Quartic</option>
        <option value="Quint">Quintic</option>
        <option value="Sine">Sinusoidal</option>
        <option value="Expo">Exponential</option>
        <option value="Circ">Circular</option>
        <option value="Bounce">Bouncing</option>
        <option value="Back">Back</option>
        <option value="Elastic">Elastic</option>
    </select>
    <select id="fxEase">
        <option value="easeIn">easeIn</option>
        <option value="easeOut">easeOut</option>
        <option value="easeInOut">easeInOut</option>
    </select>
    <label for="duration">duration</label>: <input type="text" id="duration" value="1000" size="5" />
    <b id="result"></b>
</div>

window.addEvent('domready', function(){

// First we create a Fx.Morph instance which we will use to move the red box
	var target = $('target');
	var fx = new Fx.Morph(target, {
		duration: 1000,
		link: 'chain'
	});

// The big gray erea
	var box = $('box');

target.setStyles({
		top: box.getTop(),
		left: box.getLeft()
	});

var selectTransition = $('fxTransition'),
		selectEase = $('fxEase'),
		durationInput = $('duration'),
		result = $('result');

// Run the event if one of the select boxes has changed
	$$(selectEase, selectTransition).addEvent('change', function(){
		var transition = selectTransition.get('value');

// This is where we set the transition option to the selected value
		if (transition == 'linear'){
			fx.options.transition = Fx.Transitions.linear;
			transition = 'Fx.Transitions.linear';
		} else {
			var ease = selectEase.get('value');
			fx.options.transition = Fx.Transitions[transition][ease];
			transition = 'Fx.Transitions.' + transition + '.' + ease;
		}
		result.set('html', transition);

});

// Run the above event on once on startup
	selectEase.fireEvent('change');

// Set the duration option if it has changed
	durationInput.addEvent('keyup', function(){
		fx.options.duration = parseFloat(durationInput.get('value'));
	});

// If you click anywhere on the gray box, the red box should morph to the clicked coordinates
	box.addEvent('mousedown', function(event){
		event.stop();
		fx.start({
			// The clicked coordinates are stored in the event.page property
			top: [event.page.y - 25],
			left: [event.page.x - 25]
		});
	});

});

Demo
Docs
CSS
HTML
JavaScript

Transition: duration:

Documentation References:

window.addEvent('domready', function(){

// First we create a Fx.Morph instance which we will use to move the red box
	var target = $('target');
	var fx = new Fx.Morph(target, {
		duration: 1000,
		link: 'chain'
	});

// The big gray erea
	var box = $('box');

target.setStyles({
		top: box.getTop(),
		left: box.getLeft()
	});

var selectTransition = $('fxTransition'),
		selectEase = $('fxEase'),
		durationInput = $('duration'),
		result = $('result');

// Run the event if one of the select boxes has changed
	$$(selectEase, selectTransition).addEvent('change', function(){
		var transition = selectTransition.get('value');

});

// Run the above event on once on startup
	selectEase.fireEvent('change');

// Set the duration option if it has changed
	durationInput.addEvent('keyup', function(){
		fx.options.duration = parseFloat(durationInput.get('value'));
	});

});

MooTools

Demos

Slick

Drag and Drop

Effects

Events

Request

Plugins

Transitions

Documentation References: