Wednesday, May 14th, 2008

CSS Animations via MooTools

Category: CSS, MooTools

Chris Schneider has created a javascript implementation of CSS Effects using the MooTools JavaScript library. It basically parses the css and mimics the new Webkit css animations.

With the introduction of CSS we could seperate the presentation layer and the content layer, but we were not able to add animations via CSS. DHTML fixed this misbehavior, but now the presentation and behaviour layer were mixed.

First I tried the concept of adding something like “-moofx-{property}: {from} {to};” to CSS. The disadvantage of this way is that you have to specify the change twice: First in regular CSS to serve the non-JavaScript-users, then for the animation.

After hearing about WebKit’s CSS Animations I changed my concept of CSS animations. Instead of setting an additional target or starting value, both properties are specified ”normally”. The only thing you have to add is a declaration.

The script uses MooTools soon to be release v1.2 and works in Safari 3, Firefox 2 and mostly Internet Explorer 7. The script degrades in Internet Explorer 6, because no dynamic pseudo-classes are supported.

You can see the script in action here.

Posted by Rey Bango at 1:01 pm

4 rating from 53 votes


Comments feed TrackBack URI

I’m still not sold on adding animation information into the CSS, especially if it relies on Javascript. I do use mootools frequently, and their Fx.Morph class does essentially this, but without requiring animation information to be placed in the CSS.

Comment by tj111 — May 14, 2008

I totally dig this. (I hope you get it working in IE6).
+1 or +2 even :)

Comment by jdalton — May 14, 2008

I have my own implementation of this, also in MooTools, will be interesting to see how this differs from it. My biggest problem was dealing with the performance of parsing all the stylesheets and generating events for all the elements. I didn’t think about adding a declaration, thought it would just be ignored, so I was basically applying the animations to all pseudo-classes.

Comment by Matt — May 14, 2008

I love this.

Comment by rsumi — May 14, 2008

We’ve been doing something similar for our Chronoscope charting component, using CSS to style CANVAS charts. This relies on getComputedStyle/currentStyle working perfectly, which is unfortunately not the case, and the cause of frequent headaches. You also can’t implement custom properties, because the CSSDOM ignores them instead of returning them as CSS_UNKNOWN (as the spec permits either way)

To get around this, we implemented CSS parsing using out GwtQuery library so we could have custom declarations. To speed up performance, users may opt to place their styles in a GSS file (graph style sheed) instead of CSS, and when the parser is fetching styles/links, it can be configured to ignore chasing regular CSS and only parse GSS. It’s a little more of a pain to separate the custom rules stuff into a separate file, but it speeds up performance alot.


Comment by cromwellian — May 14, 2008

Looking at how this was done, you could als introduce css vars and go to town. The Reg Expressions need to be cleaned up and cached, but it looks solid!

Comment by silentrob — May 14, 2008

Seems like a bit of a waste to me. The cool thing about Apple’s CSS animation is that it doesn’t rely on javascript and runs natively for a much smoother experience and with even cooler effects than you could do with javascript. It’s gonna be pretty much useless for anything but iPhone pages for the foreseeable future but man will those pages be cool. I would like to see a plugin (jQuery preferably) for using javascript to create/initiate/control the webkit css animations though. It would be great to get that performance advantage while working in a manner that I’m used to. I tried to start a plugin to do just that but after about an hour with pretty poor results I gave up. Maybe I’m just lazy.

Comment by JonBad — May 14, 2008


The author has already mentioned allowing the option of having custom definition names, or using the WebKit declarations.

This way, WebKit & supporting browsers will use their native implementation while other browsers will use the framework for creating the effect.

Kind of like CSS3 support now. Some browsers do support it, but frameworks like Mootools lets you use it in IE6+ also.

Comment by Liquidrums — May 14, 2008

As far as ideals go, doesn’t this put behavior in the presentation?

Comment by PeterMichaux — May 15, 2008

jQuery has .animate() for that, with a little work you could create a bunch of animations like that too.

Comment by Aimos — May 15, 2008

Aimos: MooTools is known for his delicious Effect class (and added also the shortcuts like Element::morph, tween, fade, for the people who love working only with the DOM). That CSS Syntax just another (maybe easier) way to assign them … semantic sugar, nothing for webstandardistas.

Kodus to the author!

Comment by Harald — May 15, 2008

@Peter – That’s an interesting question. There obviously has to be some interation between content, presentation, and behavior for things to happen, but the classic MVC model would say controllers should update views. So I also am not sure that putting properties like “duration” into a stylesheet is the right way to go. Maybe if a technology like XBL was widely supported, that would be a more natural place for effects to be “wired up” to elements?

Comment by K9 — May 15, 2008

I think some are over-thinking this technique. Say you had a typical “suckerfish” drop-down menu. Normally, you would just change display to ‘block’ instead of ‘none’. Using this, you’d be able to make it fade/slide in by only adding a bit of CSS.

Presentation, IMO, belongs with CSS. When you start manipulating the DOM, then we’re outside of that scope, aren’t we?

Comment by Liquidrums — May 17, 2008

Leave a comment

You must be logged in to post a comment.