AJAX Page Loads Using MooTools Fx.Explode

By  on  

Note: All credit for Fx.Explode goes to Jan Kassens.

One of the awesome pieces of code in MooTools Core Developer Jan Kassens' sandbox is his Fx.Explode functionality. When you click on any of the designated Fx.Explode elements, the elements "explode" off of the screen. Click again and they magically reappear. Don't believe me? Check out Kassens' example!

In speaking with Jan, his idea was to use this effect for page changes but never got around to it. I've completed this goal, albeit with some ugly code, but I think it's worth a look.

Kassens' MooTools Fx.Explode Class

/* created by legendary MooTools developer, Jan Kassens */
Fx.Explode = new Class({
	Extends: Fx.CSS,
	
	options: {
		grow: 0.5,
		expand: 1,
		transition: "expo:out",
		duration: 750
	},

	initialize: function(elements, options){
		this.elements = this.subject = $$(elements);
		this.parent(options);
		this.addEvent('complete', function(){
			this.clones.dispose();
			if (this.inverted) this.elements.setStyle('opacity', 1);
		}, true);
	},

	compute: function(from, to, delta){
		var now = {};
		for (var i in from){
			var iFrom = from[i], iTo = to[i], iNow = now[i] = {};
			for (var p in iFrom) iNow[p] = this.parent(iFrom[p], iTo[p], delta);
		}
		return now;
	},

	set: function(now){
		for (var i in now){
			var iNow = now[i];
			for (var p in iNow) this.render(this.clones[i], p, iNow[p], this.options.unit);
		}
		return this;
	},

	start: function(fromX, fromY, inverted){
		this.inverted = !!inverted;
		var from = {}, to = {};
		this.clones = $$(this.elements.map(function(el, i){
			var clone = el.clone();
			var coords = el.getCoordinates();
			clone.setStyles(coords).setStyle('position', 'absolute').inject(document.body);
			el.setStyle('visibility', 'hidden');
			
			var center = {
				x: coords.left + coords.width / 2,
				y: coords.top + coords.height / 2
			};
			
			var self = this;
			(function(prop, end){
				var parsed = self.prepare(clone, prop, end);
				if (self.inverted) {
					(from[i] = from[i] || {})[prop] = parsed.to;;
					(to[i] = to[i] || {})[prop] = parsed.from;
				} else {
					(from[i] = from[i] || {})[prop] = parsed.from;;
					(to[i] = to[i] || {})[prop] = parsed.to;
				}
				return arguments.callee;
			})
			('top', coords.top + (center.y - fromY) * this.options.expand - coords.height * this.options.grow / 2)
			('left', coords.left + (center.x - fromX) * this.options.expand - coords.width * this.options.grow / 2)
			('width', coords.width * (1 + this.options.grow))
			('height', coords.height * (1 + this.options.grow))
			('opacity', 0);
			
			return clone;
		}, this));
		return this.parent(from, to);
	}
});

My Usage / Example

var init = function (req) {
	var shown = true;
	var running = false;
	var explode = new Fx.Explode('#fx-contain *', {
		duration: 500,
		onComplete: function(){ running = false; }
	});
	var implode = new Fx.Explode('#fx-contain *', {
		onComplete: function(){ running = false; },
		transition: 'sine:in:out',
		duration: 500,
		grow: -1,
		expand: -.8
	});
	
	$$('#fx-contain a').each(function(el) {
		el.addEvent('click', function(e){
			e.stop();
			if (running) return;
			if (shown) explode.start(e.client.x, e.client.y);
			else implode.start(e.client.x, e.client.y, true);
			running = true;
			shown = !shown;
			req.send({
				url: el.get('href')
			});
		});
	});
};

/* making things happen */
window.addEvent('domready', function() {
	var req = new Request({
		method: 'get',
		data: {
			ajax: 1
		},
		onSuccess: function(response) {
			//fade in content
			$('fx-contain').set({
				html: response
			});
			init(req);
		}
	});
	init(req);
});

Like I said, my code isn't pretty but it works. Enjoy!

Recent Features

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    MooTools Wall Plugin

    One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show...

  • By
    MooTools: Set Style Per Media

    I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias.

Discussion

  1. I love it! Maybe you should try setting overflow to hidden so no horizontal scrollbar gets created :) But apart from that, really fun example!

  2. Fabian Beiner

    I don’t like it. It’s to “noisy”…

  3. I really like it, but I surely agree with Chris in what he said. And as for Fabian’s comment, the explode creates a kind of “noisy” effect, could it work as the data just disappear or fades out then the new data loads? I think it’d make it nicer, smoother, and more professional!

  4. emehrkay

    I remember when this was shown in the IRC room. I remember him saying that it would work better with text if the parent element had a set width. You should try it in your example to see if it makes a difference.

  5. cssProdigy

    Great effect. Looks a bit unnecessary and not as smooth as some other things i’ve seen using MooTools.
    Nice job!

  6. People just aren’t ready for it yet. They’re still getting used to content fading in and out and smoothly animated changing heights and widths!

    I’d love to see a professional site utilize this.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!