====== Fx.Morph ====== Here is the [[http://docs.mootools.net/Fx/Fx.Morph|documentation for Fx.Morph.js]] //Fx.Morph// is very similar to [[01-fx.tween|Fx.Tween]] (if you haven't read about Fx.Tween yet, you should start there), except you can alter more than one property at once. You should use this over having two //Fx.Tween// properties because each property will be altered in tandem with //Fx.Morph//. It's also less resource intensive.


var exampleFx = new Fx.Morph('fxTarget');
exampleFx.start({
	'width':[0,100],
	'height':[0,100]
});


var exampleFx = new Fx.Morph('fxTarget', {
	duration: 1000
});
exampleFx.start({
	'opacity':[0,1],
	'padding':[0,10]
});

===== Element.morph ===== Just like //Element.tween//, //.morph// returns an //Fx.Morph//. So the examples [[01-fx.tween|on the Fx.Tween page]] could look like this:


$('fxTarget').morph({
	'width':[0,100],
	'height':[0,100]
});


$('fxTarget').morph({
	'opacity':[0,1],
	'padding':[0,10]
});

As with //.tween// (see the [[01-fx.tween#the-built-in-fx.tween-object|Fx.Tween section for more elaboration]]), you can configure the effect with numerous options, regardless of which syntax you use, with the //set// method:


$('fxTarget').set('morph', {
	duration: 1000,
	transition: Fx.Transitions.Bounce.easeOut,
	link: 'chain'
});
$('fxTarget').morph({
	'width':0,
	'height':0
}).morph({
	'width':100,
	'height':100
});

===== Using Fx.Morph with CSS Classes ===== A new trick in MooTools 1.2 is the ability to transition to and from the CSS properties defined in a CSS class. For instance, let's say we have these two classes:


.one {
	background-color: #fff;
	color: #000;
	border: 3px solid #000;
	padding: 10px;
	width: 300px;
}
.two {
	background-color: #000;
	color: #fff;
	border: 1px solid #999;
	padding: 5px;
}

This paragraph starts off with the //.one// CSS class applied to it. Using the morph instructions below we'll transition between the two.


$('morphExample').set('morph', {
	link: 'chain'
});
$('morphExample').morph('.two').morph('.one');

This provides a very nice method to separate your design (CSS) from your interaction code (JavaScript). Doing this is a good idea for the same reason that moving your CSS (design) out of your HTML (data) is a good idea and it makes maintaining the look of your user experience easier. **NOTE**: Using //Fx.Morph// with CSS classes only works with numerical values found in the class. If, for example, one class has //display: block// and the other //display: none//, these values will not be applied. Also note that the class itself is not applied to the element - if you execute //$('morphExample').morph('.two')// the element still has the class //.one// and does NOT have //.two//, even though its styles have been altered.