Transitions 2.0 Beta

Beta Demo — 21st July 2010

Transitions 2.0 introduces a range of new transitions based on CSS Transforms. These can do things like animated rotation, scaling, and skewing the image to all kinds of funky angles, and are supported in all the top browsers, including Internet Explorer (as far back as IE5.5, courtesy of its Matrix filter and some not-so-simple maths!)

Here's a selection of teaser demos, to show you round the new features and effects

Feature demos

Transitions 2.0 brings together everything from the v1 scripts, with some bugfixes, and some enhancements to the existing functionality — there are new animation types for crosswipe(), as well as a new control that lets you run the transition in reverse:

You can now also combine crosswipe() and crossfade() together, making for some interesting and striking new effects:

Let's have a look at some of the transforms now, and there are 3 different transforms available — crossgrow(), crosstwist() and crossskew() — each with its own set of animation types:

And just as with crosswipe(), or any transition, you can run it in reverse, and combine it with a fade:

Another new transition is crossslide(), which slides one image over the next, or pushes it off the side:

And finally there's crossbars(), which implements a range of multi-target clip transitions — what you might describe as "blinds" and "checkerboard" effects:

When you add together all the transitions — with all the types available to each, the ability to add a fade, and the ability to run in reverse — Transitions 2.0 can produce 2,289 unique effects!

But still there's more to 2.0 than just the new effects ... new asynchronous callbacks make it trivial to chain transitions together (for slideshows, rotating banners and such-like); all the transitions gracefully-degrade so that browsers which don't support the effect can still do an image-swap; there's comprehensive error reporting for all user-input, backwardly-compatible syntax, and even more besides...

And it's all coming your way very soon