Blog	\|	Projects	\|	Photos	\|	About	\|	Contact
Feed Twitter

Page Transition Effects

I've just started using a simple IE fade effect between pages to smooth out the navigation experience. Does it help?

Recently, I made a small modification to my pages to include an interpage transition effect using the following meta tag:

<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(duration=.5)" />

By default, when navigating from page to page in the browser, the current page "flashes" away, and the new page shows up in its place. This effect changes this default behavior and causes the current page to fade away instead of immediately disappearing. Even though this is done over just 0.5 seconds, it seems to create the illusion of smoother navigation. Or so I think (esp. when navigating between photo pages in my photo gallery)... note that this is feature is IE-only.

Click on a few links, and see if you notice the effect. Does it help smooth things out?

Posted on Tuesday, 5/31/2005 @ 4:24 PM | #My Site

Comments

21 comments have been posted.

M. Rajesh

Posted on 5/31/2005 @ 8:33 PM

Yes of course the page transition effect is seen and it is pretty good. And it gives a new style to loading of pages.

But how will this perform when it is applied to the page on the library pages in http://msdn.microsoft.com.

when the page loads, there is a considerable time to load the tree view on the left side. Let me know.

Richard Hsu

Posted on 5/31/2005 @ 10:33 PM

now a days, i use firefox and therefore totally missed it, although i did notice the neat partial border thing on comments. :-)

i am just waiting for IE7 to give me tabbed browsing [my main reason for using firefox] and then probably i will not miss the cool IE-only experiences.

About the transition effect, anything that helps towards lesser flashing will definitely be good in the long term. Given that it will not hurt while viewing in non IE browsers, its something worth having in pages. Nice.

RichB

Posted on 5/31/2005 @ 11:32 PM

The page has to load completely before display commences. Therefore, users with slower links will take longer to see the page. For example, I'm currently on 46K dial-up, although I often use GPRS.

Ervw

Posted on 6/1/2005 @ 5:04 AM

Performance of the fade kinda sucks over remote desktop, but looks fine on a fat client.

Thea Burger

Posted on 6/1/2005 @ 5:40 AM

I love it, adding it to the site I am working on, but reading the other comments it looks like I will have to see whether it has a performance impact.

jswanson

Posted on 6/1/2005 @ 6:41 AM

In your photo gallery it seems to make the pictures display, then blink and display again. I'm not sure what is causing that double-draw (it happens with both the light and dark themes). IE 6.0 on XP

Otherwise the effect is quite pleasing.

Nikhil Kothari

Posted on 6/1/2005 @ 11:18 AM

Rajesh: The tree view (and other AJAX-like scenarios) load data into the page asynchronously once the page itself has loaded. So the transition isn't going to be blocked waiting for data to be loaded.

Rich: I agree, it might seem that the page transition would be blocked on page loading on slow connections. Though I thought IE started rendering as soon as it could, which means it should be able to play the transition once it has at least enough of the new page to fill the visible portion of the page.

Ervw: I did try it under a term serv - seems to work ok for me on text pages such as blog entries, and a bit blocky on image-heavy pages such as the photos page. Perhaps it depends on the color depth of the terminal server session. A potentially interesting setting in Internet Options|Advanced is the "Force offscreen compositing even under Terminal Server" setting (that I haven't been able to fully interpret). Mine is unchecked. I would have expected IE to be intelligent, and not do page transitions under terminal server automatically...

Joseph Cooney

Posted on 6/1/2005 @ 4:34 PM

jswanson - I didn't notice any picture re-display "blink"

jsmags

Posted on 6/1/2005 @ 9:55 PM

I've been using the following tag for a while and it has been around for a while:
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.3)">

you can see one of my sites using this tag:
http://brando.crosscity.com/

I like your site and visit it often...regards,
jsmags

jsmags

Posted on 6/1/2005 @ 10:02 PM

forgot to mention- not sure if blendTrans eventually translates to the prog id: fade. But, I believe blendTrans has been around before MS filters/transitions and such (?).

ciao.

Robert

Posted on 6/5/2005 @ 12:47 AM

Page transitions are a horrible idea. Why introduce an artificial wait between pages? When I click a link, I want the contents of that page fast, before I lose interest. Page transitions have been in IE for ages, but you won't find web sites that use them, and for good reason too. Keep It Simple, Stupid!

Sonu Kapoor

Posted on 6/8/2005 @ 10:32 AM

I dont really like the effect. It was much nicer without it. However the overall design of the complete Blog is really awesome. I love the design.

Nikhil Kothari

Posted on 6/12/2005 @ 9:27 PM

Hmmm... sounds like some people like it, and others don't. I'll have to see what I think of it as I experience it more...

One thing I wanted to mention - specifically to Robert's comment - there shouldn't be a significant artificial wait caused by the transition itself, which is set to play for .5 seconds, and should start as soon as the browser has enough from the next page to fill a screen. The idea is downloading and processing the content takes time, and this remains the same even with the transition. Without the transition, the browser can either wait on the current page, or display a blank window.

oVan

Posted on 7/18/2005 @ 3:09 AM

For those that don't like these transitions: whenever you hit the Escape key as soon as the effect begins, the effect will be aborted and you will have an immediate view of whatever content was already visible. This is very handy for those sites that have longer transition durations, or where the directx transition effect is software emulated because your display driver doesn't hardware accelerate it.

oVan

Posted on 7/18/2005 @ 3:12 AM

Forgot to mention: when you hit Escape after the transition has finished, you are actually stopping the loading of the page contents (obviously). And when you hit Escape after the whole page has been loaded, you are stopping all animated gif's from animating.

Maulik Soni

Posted on 11/25/2005 @ 1:13 PM

When i visited MSDN2 website today, and what i found is, microsoft is using page transition effect for world standard heavly used MSDN2 library ? I was surprised. I think this use is the answer to all the users who don't like page transition effects.

think for a moment, microsoft had made 124 reaserch before finalizing the page transition effect on his MSDN page.

guys better look at msdn2 for tihs. Still i am not sure whether microsoft using the same technique. but i am sure , web platform is changes, they are will be out who are does not accept the CHANGE !

ms_sonihotmail.com
thanks, nikhil,
i am using this code in my current project and its appriciated by the clients..!

Mahesh bla Babu

Posted on 2/20/2006 @ 12:23 PM

I have hacked a pc of a innocent lady due my insanity and maybe frustations.... Am i the personification of the evil?

Sue's little edream

Posted on 4/4/2006 @ 6:59 AM

Personaly, I don't like transition effect. It can be cool in some place but not the entire web site. It has the same effect of midi music starts when page loaded. it quickly become annoying after the "first happy surprise". Web page is the place we go the get information, I value a fast page over a fancy and slow one. Transition effect only good when we have bunches of time on hand, sipping coffee in front of fireplace in a cold winter time, browsing some breath taking photograph with Sarah Brightman's music in the background... How many of us have this luxury?

Just my personal opinion :-)

Puneet verma

Posted on 4/14/2006 @ 1:24 PM

very good work.you are the best.

crish

Posted on 6/1/2006 @ 3:31 AM

Thats a nice article on transitions.. I want to apply the same to an .aspx page.... If so do let me know how can I accomplish the same....

Thanks in advance..

Ricaute Jiménez Sánchez

Posted on 6/1/2006 @ 11:48 AM

I use this:

<html>
<head>
<title></title>
<meta http-equiv="Page-Enter" content="Alpha(opacity=100)"> 
..
..
</head>
<body ...

The discussion on this post has been closed. Please use my contact form to provide comments.