Wouter Beugelsdijk's techblog - tech.wiedo.nl

webdevelopment and other tech related stuff 
« Back to blog

Mootools CSS3 transitions script

Screen_shot_2010-05-24_at_6

I'm quite busy with a sort of webapplication with a lot of fade animations. In an attempt to speed up those animations I tried CSS3 animations (dropping the fps and use a linear transition didn't help). Afterwards it seemed to perform a lot better in (especially) Safari. I made the script work for Opera, Webkit browsers and a future version of Firefox (i'm using 3.5.9). If the browser isn't supported, the script automatically switches back to a normal Mootools transistion.

If you want to try the script you can download it here. You can use .tween and .fade, just replace the first letter to a capital (like: .Tween). Not everything is working yet, just look in the source for further information.

I didn't test anything accept my own webapplication, so use it at your own risk!

You can see a very (very) basic demo here:
CSS3 transition demo

I made this script for a webapplication (also the advanced demo), you can check it out here:
Archive of moments(dutch)
Blog item about the archive of moments

Download zipped version here:
css3-transitions.zip

Please note me if you like it and you're using it (it's free to use and adopt upon and do whatever you like with it, but i like to know)!

If you don't like my implementation, check out the script of André Fiedler here: Mootools Forge Fx.Tween.CSS3 (i found this after writing my own script, i used a snipped of him found on the web and used it in my script). I use .tween and .fade very frequently, so that's why i prefer my script more (didn't try André's script yet).

Comments (4)

Jun 16, 2010
sonnenkiste said...
You can replace the original Mootools Tween Class with Mootools Forge Fx.Tween.CSS3. Just include the Fx.Tween.CSS3.Replacement.js after the mootools.js. Now every call of el.fade() or el.tween() and so on should work using css3 transition (if possible). All events are fireing too!

greetings André

Jun 17, 2010
wow, thanks André, didn't know that.. it's probably a little too late for now, but i'll use your script next time. I learned much by building this one though :).

I also like to try your HTML5 database script soon.

Jun 17, 2010
sonnenkiste said...
really n.p. :o)

The database wrapper does actual work, but there´s a lot work left! For example the query-rollback isn´t implemented yet. If you have time, you can fork and extand it. Would be great!
There´s a lot potential to make the wrapper easier and more functional. But i didn´t have enough spare time by now. :(

Jun 17, 2010
I also don't have the time now and probably not even the skills, but sure i wan't to try. It would be nice to easily do queries, maybe the way PDO is doing it for PHP (i red somewhere it was also a little different in every browser).

Leave a comment...