Mootools 1.2 beta was released a couple days ago, so I decided to test it out. I’ve been eagerly awaiting to modify my text effect code because Mootools 1.2 supports animating almost any CSS property, including clip. Here’s what I came up with:

$$("#nav li a").each( function (el) {
  var height = el.offsetHeight;
  var width = el.offsetWidth;
  var mid = (width / 2).round();
  var hover = new Element('span', {
    "class": 'hover',
    "styles": {
      "top": 0,
      "left": 0,
      "clip": [0,mid,height,mid]
    },
    "text": el.get('text'),
    "tween": {
      "link": 'cancel',
      "duration": 600,
      "transition": 'quint:out'
    }
  }).inject(el, 'inside');
 
  el.addEvents({
    "mouseover": function () {
      hover.tween('clip', [0, width, height, 0].join(' '));
    },
    "mouseout": function () {
      hover.tween('clip', [0, mid, height, mid].join(' '));
    }
  });
});

There are a few other new things going on there that I’ll explain. You’ll notice that everything for the new element is set upon creation, utilizing the new setters/getters api that has been built into Mootools. I’m even setting an effect! Fx.Style has been renamed to Fx.Tween, and setting an effect on an element allows you to use that element when calling the effect. As you see, when the effects are called, I’m using hover.tween(...).

But wait, won’t that create a memory leak because of the cyclical reference? Nope. Mootools 1.2 also implements it’s own storage api. After glancing at the code, it looks like each extended element is assigned a unique ID, which is used to look up values in storage.

Other changes to note are the link and transition options for effects. The link option replaces the old wait option. Possible values for link include ignore, cancel, and chain. And now strings can be used for defining a transition. The equivalent to what is above is Fx.Transitions.Quint.easeOut.

And I just want to point out one more thing. Math functions are now object-oriented as demonstrated here: (width / 2).round()

Note that for some reason I couldn’t pass an array of clip values to tween so I had to concatenate a string. It might be a bug.I’ve found a temporary solution that allows me to still use an array. I just have to join it with spaces. Mootools is a bit flawed in that it tries to guess if you’re passing a ‘to’ value or ‘from’ and ‘to’ values. Because of that, Fx.Tween can’t accept arrays unless they contain ‘from’ and ‘to’ values.

I’m trying to come up with a simple mod to Mootools, but it becomes complicated when you can pass things like [20, 10] for margins and such. How would Mootools know whether you want the margin to go from 20px to 10px, or if you want the top and bottom margins to go to 20px and the left and right margins to go to 10px? The only solution is to explicitly tell Mootools what you’re passing, either by wrapping the to and/or from values in an object, or by setting a flag that indicates what type of values are being passed.

[Update: 20 Nov 2007] It turns out it was a bug, and it’s been fixed.

Overall, I’m pretty happy about the new Mootools. Some of the names are a little confusing, like dispose, erase, and destroy. And there are set functions all over the place, some of which are setters and some of which aren’t. I guess it’ll just take a little getting used to.

This entry was posted on Friday, November 16th, 2007 at 9:05 am and is filed under scripts and tagged with effect, mootools, v1.2b1. You can follow any responses to this entry through the RSS 2.0 feed.