30 Days of Mootools 1.2 Tutorials - Day 11 - Using Fx.Morph, Fx Options and Fx Events

//first, lets throw our element into a var
var morphElement = $('morph_element');
 
//now, we create our morph
var morphObject = new Fx.Morph(morphElement);
 
//now we can set the style properties just like Fx.Tween
//except now we can set multiple style properties
morphObject.set({
    'width': 100,
    'height': 100,
    'background-color': '#eeeeee'
});
 
//we can also start our morph like we would start a tween
//except we can now input multiple style properties
morphObject.start({
    'width': 300,
    'height': 300,
    'background-color': '#d3715c'
});

var morphSet = function(){
	//now we can set the style properties just like Fx.Tween
	//except now we can set multiple style properties
	this.set({
		'width': 100,
		'height': 100,
		'background-color': '#eeeeee'
	});
}
 
var morphStart = function(){
	//we can also start out morph like we would start a tween
	//except we can now input multiple style properties
	this.start({
		'width': 300,
		'height': 300,
		'background-color': '#d3715c'
	});
}
 
 
var morphReset = function(){
	//set the values back to start
	this.set({
		'width': 0,
		'height': 0,
		'background-color': '#ffffff'
	});
}
 
window.addEvent('domready', function() {
    //first, lets throw our element into a var
	var morphElement = $('morph_element');
 
	//now, we create our morph
	var morphObject = new Fx.Morph(morphElement);
 
	//here we add the click event to the buttons
	//and we bind morphObject and the function
	//allowing us to use "this" above
	$('morph_set').addEvent('click', morphSet.bind(morphObject));  
	$('morph_start').addEvent('click', morphStart.bind(morphObject));
	$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});

<div id="morph_element"></div>
<button id="morph_set">Set</button>
<button id="morph_start">Start</button>
<button id="morph_reset">reset</button>

//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
    //first state the name of the option
    //place a :
    //then define your option
    duration: 'long',
    transition: 'sine:in'
});

//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
    fps: 60
});
 
//or
var framesPerSecond = 60;
 
var tweenObject = new Fx.Tween(tweenElement, {
    fps: framesPerSecond
});

//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
    unit: '%'
});

//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
    link: 'chain'
});

//set up your tween or morph
//then just set up your options between the { }
var morphObject = new Fx.Morph(morphElement, {
    duration: 'long'
});
 
//or
var morphObject = new Fx.Morph(morphElement, {
    duration: 1000
});

var tweenObject = new Fx.Tween(tweenElement, {
    transition: 'quad:in'
});

//first we pass the new Fx.Tween to a variable
//then we define the element to tween
quadIn = new Fx.Tween(quadIn, {
        //here are some options
	link: 'cancel',
	transition: ‘quad:in’,
 
       //here are some events
	onStart: function(passes_tween_element){
                //these event will pass the tween object
                //so here we are applying the "highlight" effect
                //when the animation starts
	        passes_tween_element.highlight('#C54641');
	},
 
        //notice how the commas are consistent
        //between every option and event
        //and NO COMMA AFTER THE LAST option or event  
        onComplete: function(passes_tween_element){
                //and here we apply the highlight effect on complete
	        passes_tween_element.highlight('#C54641');
	}
});

 
//this is the function we use on mouse enter, tweens width to 700px
var enterFunction = function() {
	this.start('width', '700px');
}
 
//this is the function we use on mouse leave, tweens width back to 300px
var leaveFunction = function() {
	this.start('width', '300px');
}
 
window.addEvent('domready', function() {
    //here we create throw some elements into vars
    var quadIn = $('quadin');
    var quadOut = $('quadout');
    var quadInOut = $('quadinout');
 
    //then we create three tween elements, one for each var above
    quadIn = new Fx.Tween(quadIn, {
	link: 'cancel',
	transition: Fx.Transitions.Quad.easeIn,
	onStart: function(passes_tween_element){
		passes_tween_element.highlight('#C54641');
	},
	onComplete: function(passes_tween_element){
		passes_tween_element.highlight('#E67F0E');
	}	
    });
 
   quadOut = new Fx.Tween(quadOut, {
	link: 'cancel',
	transition: 'quad:out'
    });
 
    quadInOut = new Fx.Tween(quadInOut, {
	link: 'cancel',
	transition: 'quad:in:out'
    });
 
    //now we add the mouse enter and mouse leave events
    //notice the use of .addEvents
    //this works just like .addEvent
    //except you can add multiple events using the pattern below 
    $('quadin').addEvents({
        //first, you say what kind of event, place event type inside 'single quotes'
        //then place a :
        //finally you state your function
        //in this case, its a function that binds to the tween
        'mouseenter': enterFunction.bind(quadIn),
        'mouseleave': leaveFunction.bind(quadIn)
    });
 
    $('quadout').addEvents({
        //notice how we reuse the same functions here
        'mouseenter': enterFunction.bind(quadOut),
        'mouseleave': leaveFunction.bind(quadOut)
    });
 
    $('quadinout').addEvents({
        //we also use those same functions here
        //but each time they apply to an event on a different element
        //and bind to a different tween
        'mouseenter': enterFunction.bind(quadInOut),
        'mouseleave': leaveFunction.bind(quadInOut)
    });