Sunday, November 5th, 2006

moo.fx 2.0: a whole new mooing

Category: JavaScript, Library, UI

A new moo.fx has been released, version 2.0. You can get a couple of versions of moo.fx: moo.fx for mootools and moof.fx for Prototype (note how it groks the anchor to open that div).

What’s New in moo.fx 2

moo.fx2 Introduces a lot of new stuff: beginning with Fx.Style, to modify any chosen CSS property, then Fx.Styles, to modify any number of CSS properties at once. Those two are the most powerful effects, and if you’re hardcore enough, the ones you’ll ever need. They are infact included in the basic package, moo.fx.js.

Then in moo.fx.pack we have Fx.Color, to modify the color properties of your elements and Fx.Scroll, to internally scroll your long divs.

A completely rewritten Accordion has its own script now, with multiple options to let you decide every aspect of it.
For the nostalgics there is even moo.fx.utils, containing Fx.Height, Fx.Width and Fx.Opacity. moo.fx.utils is only useful if you want to toggle your values, and toggle only works with no padding/margin/borders, and in a strict doctype.

If it werent enough, moo.fx is now fully compatible with Robert Penner Easing equations, so there’s also moo.fx.transitions in the package. Use it if you like to give your page a more personalized look!

moo.fx2 introduces a radical architecture change. Scripts written for older versions might not work on v2.

Check out the demos including a fun physics experiment

Posted by Dion Almaer at 1:58 am

4.2 rating from 49 votes


Comments feed TrackBack URI

Thnx for the update.

Comment by rxbbx — November 5, 2006

The “demos” link is broken.

Comment by Phil Freo — November 5, 2006

They do all look the same, now.


effect = new Fx.Styles('demoElement');
'opacity': [1,0.3],
'margin-left': [0, 300],
'height': [40, 100],
'font-size': [25, 60]


new Animator().addSubject(new CSSStyleSubject(
"width: 10em; background-color: rgb(256, 256, 256); border-width: 1px;",
"width: 40em; background-color: #F39; border-width: 5px;"));


'opacity': [1,0.3],
'margin-left': [0, 300],
'height': [40, 100],
'font-size': [25, 60]

Comment by Jack — November 5, 2006

[…] moo.fx has been updated, there are some very neat and usefull functions that we can use on our website. referring you to this site; “Sliding the contents of a div“. That one we can use to show/hide additional information about the music video clip which a visitor s currently watching. (Source) Search […]

Pingback by moo.fx 2.0 at school — November 6, 2006

long live moo.

Comment by Karl Moz — November 6, 2006

Why do we need moo.fx for mootools when it was already absorbed into mootools? Either way Valerio’s done a great job of making a lean javascript framework, I just hope he’ll finally get around to documenting Mootools before he starts working on something new again.

Comment by Mike Ritchie — November 6, 2006

Link Listing – November 8, 2006

New and Notable 120 [Via: SamGentile ] Top Five Developer API’s [Via: Scott Watermasysk ] ClickOnce…

Trackback by Christopher Steen — November 8, 2006

[…] Ajaxian: moo.fx 2.0: a whole new mooing Visual effects and more, for mootools and Prototype. […]

Pingback by Filter for 7/11 2006 - Felt — November 10, 2006

THanks for the update

Comment by Timur Asaliev — November 11, 2006

Leave a comment

You must be logged in to post a comment.