Thursday, August 28, 2008

Mootools Block Fx

So I found - It looks really great - Only problem is I'm a proud Mootools fan... So I whipped together a mimic - Fx.Block.

Fx.Block is a simple way of applying morphs to a set of clipped blocks achieving a greater effect. I thought it might add consistency to use a similar build up as morph and tween. I know my code will serve as an abomination to the general Mootools community; I've most likely transgressed every second Mootools design pattern. The effects are slow and coded ugly. But I achived what I wanted: a start. I encourage everyone to please try do better and leave links to your work in the comments. Hopefully someone else can take this and reshape it into something more production ready.

Ideas moving forward:
  • Chaining effects to produce even more complex animations.
  • Better code and class structure that facilitates extending effects.
  • Fx.Block isnt my favourite name - How about Fx.Compund? Fx.Anim?

An example of using this code:
new Fx.Block($('element'), { effect: Fx.Block.Explode }).start();

If you didn't catch it up top, the code and examples can be found at: