Sep 29 2008


Transitions for Mootools

Transitions provides image transition effects that until now have been limited to flash. Transitions uses css in a creative way to perform the effects. By creating a grid and offsetting the background images in each cell a multitude of effects can be achieved. This script pushes the limits of what a browser can do, and in doing so, it is not an ideal fit in all situations. Use with caution.

Currently, Transitions provides 4 different types of image transitions.

  • Disolve: Parts of the image randomly disappear.
  • Sweep: The picture is removed from a defined point in the picture, the effect spreads out in all directions from that point
  • Blinds: The picture is removed like a blind closing from a direction (left,right,top,bottom)
  • Gobble: Removes a row at a time moving left to right, and right to left zigzagging until the image is removed

Each effect has multiple options, including random. The class itself also provides the ability to randomize the effect.

I highly encourage you to play with the ‘animation option’ on the top of this blog to get a better idea of what each effect does. I strongly suggest that you do not turn on the fade option unless you have a very modern computer. The save button will save your settings in a cookie, and restore the effects to your liking the next time you visit this blog.

Click to Download Transitions for Mootools 1.2

Requires: Mootools Core, Assets

I will have a follow up post shortly that will provide documentation and examples.

Upcoming Features:

  • Standard Fade ( for completeness )
  • Randomize image rotation option
  • Add Events for better control and features
  • More Transitions!


View Demo

Tags: , ,

9 Responses to “Transitions for Mootools”

  1. Fabio M. Costa says:

    wow! very nice transitions (these are the same you use on the top of the site right?). I said “this flash at the top is sucking” hehe!

  2. nwhite says:

    Yeah the transition on the top is an example. I know it a bit clunky, currently its a proof of concept. I haven’t seen anyone pull off these type of effects with pure javascript before. I have some plans to make some improvements and add a few more effects. I encourage you to play with the ‘animation options’ tab on the top of the blog to see all the options.

    Part of the problem with this approach is what it does to the DOM. Its pretty abusive. The above example inserts 400 elements in order to create the effects (20px x 20px squares). I might experiment with making the blocks larger to see what kind of improvements I can get.

  3. hartum says:

    Hi I have benn looking for an example, to use this class but i don’t found nothing, can you send me a simple example of code, or tell to me an url where found it?

    Thank you very much!!!!

    p.d:sorry for my English

  4. Cyrille says:

    Can you give an example using it?

  5. Image Transitions for Mootools | says:

    [...] I first launched my blog I released the Transitions class at the same time. The header of my blog at that time was my demo. I have since changed the [...]

  6. nwhite says:
  7. Pat says:

    howdy Mr White,.. a while back i made an animation thing-a-ma-bob,..
    can be viewed here:
    it was very experimental; never really finished or optimized it. your effect is very nice. thanks for the post.

  8. nwhite says:

    Pat, Great Stuff! I really enjoyed the explode effect. I’ll probably go poking around with that later.

  9. Mr. Philliphuc says:

    Well, the amazing mootools effect. I’m finding the effct which change the small part of larger image contain it. Thanks for your sharing!

Leave a Reply