Thursday, August 28, 2008

Mootools Block Fx

So I found http://gruppler.dojotoolkit.org/ - 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:
http://b22222.com/files/mooblock.html

2 comments:

Anonymous said...

This is very slow dude, please improve the speed on it!

Unknown said...

yes, i mentioned in my post that it is slow. i may or may not come back to this code... but don't count on it. i purposely put this out so that if someone else was willing then they could improve it.