Design Pattern: Transition

By YUI TeamMay 9th, 2006

In this release of the Yahoo! Design Pattern Library we are offering a set of 11 patterns for creating visual transitions. These come under the umbrella of the Transition pattern.

There is no doubt that visual transitions can be abused. In fact, many of them could become in Web 2.0 what the <blink> tag became for Web 1.0.

We offer this set of patterns to help create a language around the various effects as well as hopefully provide some sane guidance to their use.

I recently wrote a detailed blog article on this topic. It’s called Mind Hacking Visual Transitions. In it I explore what makes transitions work. Here’s a hint: the brain has a special processing place for visual transitions! That’s right. That’s why ads are often so distracting. I invite you to read the article and then check out our set of Transition patterns.


  1. the link to transitions is broken (transition is mispelled “transtion”)


  2. Thanks for the catch Tim, I just fixed it.


  3. Can anyone tell me where i can have a look at the transition code? – in particular i’d like to create the effect of the spotlight transition at I’ve downloaded the library but the examples are simplistic? – anyone?

  4. Which transitions are you interested in? They YUI library supports a number of animations which can be found at:

    In addition, several of the specific transition patterns have sample code associated with them.

  5. This blog post is over a year old, obviously, but I implemented this pattern in YUI: