Design Pattern: Transition

May 9, 2006 at 5:37 pm by Bill Scott | In Design |

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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

6 Comments »

RSS feed for comments on this post. TrackBack URI

  1. […] Design Pattern: Transition […]

    Pingback by » New stuff from Yahoo! Developer Network Nate Koechley’s Blog — May 9, 2006 #

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

    http://developer.yahoo.com/ypatterns/parent.php?pattern=transition

    cheers,
    tim

    Comment by tim — May 12, 2006 #

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

    Thanks,
    Nate

    Comment by Nate Koechley — May 12, 2006 #

  4. 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 http://developer.yahoo.com/ypatterns/parent.php?pattern=transition. I’ve downloaded the library but the examples are simplistic? - anyone?

    Comment by Richard — August 30, 2006 #

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

    http://developer.yahoo.com/yui/animation/

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

    Comment by Bill Scott — August 30, 2006 #

  6. This blog post is over a year old, obviously, but I implemented this pattern in YUI: http://20bits.com/2007/05/25/slide-transition-pattern-in-yui/

    Comment by Jesse — June 22, 2007 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Hosted by Yahoo!

Copyright © 2007 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.