Transition Animation

Many sites across the web use in-page, JavaScript driven, popups in their UI instead of opening windows or loading a new page. When these popups are open/closed, they are frequently animated using a fade in/out (opacity) or slide in/out (position) animation. The approach we took at was to animate the opacity to fade the popups in and out.

However, I have never been satisfied with these animations. The purpose of the animation is to make the transition from the page to the popup less jarring, but the fade (or slide) animations don&rsquot;t maintain the context of the user action triggering the popup. Most of the time a popup is triggered by a click somewhere on the page, and it seems the best animation would cause the popup to appear as if coming from where the user clicked. A transition animation if you will.

The transition animation should animate the popup into existence from the triggering user action (a click in most cases). So the popup would initially be rendered small and near the position in the DOM where the user clicked, then it would move its top and left positions as it also increases its width and height until the popup is in the desired region. Ideally, when the popup closes it would transition back to the region where it started, returning the user back to the context that triggered the popup.

To explore the viability of a transition animation, I put together a Transition Animation Test Page to explore the performance of the animation on an empty div, an image, and on a realistic div with context similar to what might actually appear on a site. Additionally, you can edit the duration and easing method. I used the following animation:

Example 1: Animation Code

var myAnim = new Y.Anim({
	duration: 0.5,
	easing: Y.Easing.easeBoth,
	node: container,
	to: {
		left: left,
		top: top,
		width: width,
		height: height

As expected, I found that the empty div performs the best, but was please that the realistic div performed almost as well. The image div performed the worst, probably do to the browsers having to re-render the image as it changed shape. Across browsers, I found the performance to be comparable, except in IE 6, which was abysmally slow at times. Consequently, I believe animating popups with a transition animation is viable, except in IE 6, where I would skip the animation.