How to transition existing divs in yui3 to Overlay bodyContent

Question

I've figured out how to create an Overlay, center it, and set it's bodyContent to be an existing from my page. So far so good - now I want to make the transition happen smoothly over 1 full second instead of instantaneously.

The examples I've seen indicate that one must know the initial and final positions, but in this case, I don't know them, since I'm just saying:

overlay.set('bodyContent', Y.one('#node'));
overlay.set('centered', true)

I've created a jsbin at http://jsbin.com/ovuxan/5/edit that shows the issue.. (my transition is whacky to say the least) and would appreciate some help in making it smoother.

Answer 1

You can use the WidgetAnim plugin to do this for you. It can be cleaner since the animations are stored in the plugin and invoked by the widget's hide/show functions.

I have quickly used the plugin to animate your overlay here: http://jsbin.com/ohafec/1/edit

Helpful links:

• Overlay: Animation Plugin (YUI Blog)
• Plugin.WidgetAnim Class