Fx.Morph with per-property transitions

readme.md

Demo

http://mooshell.net/9WUyz/ http://mooshell.net/9WUyz/2/

Fx.Morph.PerPropTransitions.js

Fx.Morph.implement({
	
	step: function(){
		var time = $time();
		if (time < this.time + this.options.duration){
			var delta = {};
			var d = (time - this.time) / this.options.duration;
			var t = this.transition(d);
			for (p in this.from){
				var trans = this.transitions[p];
				delta[p] = (trans) ? trans(d) : t;
			}
			this.set(this.compute(this.from, this.to, delta));
		} else {
			this.set(this.compute(this.from, this.to, 1));
			this.complete();
		}
	},
	
	compute: function(from, to, delta, time){
		var now = {};
		for (var p in from){
			now[p] = this.parent(from[p], to[p], delta[p]);
		}
		return now;
	},
	
	start: function(properties, transitions){
		if (!this.check(properties, transitions)) return this;
		if (typeof properties == 'string') properties = this.search(properties);
		var from = {}, to = {};
		for (var p in properties){
			var parsed = this.prepare(this.element, p, properties[p]);
			from[p] = parsed.from;
			to[p] = parsed.to;
		}
		this.transitions = transitions || {};
		return this.parent(from, to);
	}
	
});