Wouter Beugelsdijk's techblog - tech.wiedo.nl

webdevelopment and other tech related stuff 
Filed under

transition

 

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).

Filed under  //   CSS3   mootools   script   transition  

Comments [4]