Image Transitions 2.0
Version 2.0 — 8th May 2011
Image Transitions 2.0 is a collection of stylish transition effects, that can add a touch of class to any image swap! Version 2.0 introduces a bunch of amazing new transform effects, that can twist, scale and skew the image to all kinds of funky angles! This version also adds new synchronisation capabilities, that make it trivial to sequence transitions together, for slideshows and other automation. A complete re-development of this widely-used and popular script, Image Transitions 2.0 works in all modern browsers — including full support for IE6 and above. What's new in Version 2.0
More Demos and Instant Code-Examples
Get the script
Download the zipfile [328K], unpack it into your site directory and add the script to your page; it can go anywhere:
Once you have the script in place you'll be able to use its methods
(as detailed in the Image Transitions Manual).
Method-calls can come from anywhere on the page and don't have to wait for
but they obviously must be after both the script itself
and the image(s) you're working with. The simplest, and arguably the best thing
to do, is to put all your scripting at the end of the
The download archive contains two versions of the script — one for development, and one for production use:
This version of the script can be used during initial development — it has comprehensive error-handling and friendly debugging information, giving you details of any invalid data passed to any of the script's methods. This version is also extensively commented, for your interest and reference.
This is the main production-version — to be used when deploying to a live site or application. This version is aggressively compressed to make it a much smaller download, and provides no error-handling or debugging information.
Image Transitions Manual
To begin with, you should check the basic guide, called Using the Script, which will show you how to use the transition methods, how to use the script to pre-load images, and edit its global configuration. There's also information to help you understand the script's debugging messages.
There's also a more advanced guide, Further Development, which focuses on how to synchronise transitions, such as triggering one from another to create interesting two-stage effects. It will also show you how to synchronise longer, more complex sequences, for things like slideshows, presentations and image-rotation scripts.
The script provides two levels of browser support — those which support every transition, and those which support all except the transform-based transitions. But when a transform-based transition is run in a browser that doesn't support them, it will still do a basic image-swap as its fallback behavior (which is also what happens when images are disabled).
- These or later browser-versions support every transition:
- Opera 10.5
- Firefox 3.5 (or equivalent Gecko 1.9.1)
- Safari 4 / Chrome 2 (or equivalent Webkit 531)
- Internet Explorer 5.5
- These browser-versions support all except the transforms:
- Opera 9–10.1
- Firefox 3.0 (or equivalent Gecko 1.9.0)
What's new in Version 2.0
Image Transitions 2.0 has been completely re-written from the ground up, with many improvements, enhancements and fixes, and a host of exciting new features
The most significant upgrade is the range of new transitions:
grow()is a transform-based scaling transition with 15 different effects.
twist()is a transform-based rotation transition with 16 different effects.
skew()is a transform-based geometric-distortion transition with 30 different effects.
slide()is a position-based sliding or pushing transition with 13 different effects.
bars()creates multiple clip-based bars, squares and checkerboard transitions with 21 different core effects and hundreds of permutations!
There are also some helpful new utility methods:
cache()method can pre-load any number of images.
pictures()method can tell you whether images are enabled in the browser.
define()method is used for configuring global behaviors.
And a whole bunch of other new features and updates:
- New asynchronous callback function for all transition methods, makes it easy to synchronise transitions for slideshows and other automation.
fade depthargument for all transitions (except fade itself), makes it possible to add an opacity cross-fade to any transition, in addition to its main effect. The depth of the fade is configurable from zero to
reverseargument for all transitions (except fade), which allows you to reverse the effect of any transition. For example, instead of wiping left-to-right and covering the original image with the new one, it would wipe right-to-left and reveal the new image underneath.
"RND"value for the animation type, can be passed to any of the transitions (except fade) to specify a random effect.
- Self-correcting clock produces super-accurate transition times, so that the duration you specify is dang-near exactly what you get. The typical timing-drift is only 0.2% (eg. a two-second transition would actually take 2.004s).
- Super-accurate positioning for superimposed images, avoids the rounding-errors that sometimes appeared in the previous version.
- Automatically detects when images are disabled in the browser, and adjusts its behavior to match that fallback condition.
- Detailed validation and error reporting for all method arguments, when using the debug version of the script.
- Universal syntax and data-typing, makes it easy to learn and easy to generate programatically.