This example demonstrates how to instantiate a panel and use it in conjunction with the `"transition"` module to create an animated panel.

Creating an animated panel

Setting Up The YUI Instance

To create an instance of a Panel on your page, the only module you need to request is the `panel` module. The `panel` module will pull in the `widget`, `widget-stack`, `widget-position`, `widget-position-align`, `widget-position-constrain`, `widget-stdmod`, `widget-buttons`, `widget-modality` and `widget-autohide` extensions it uses.

For this example, we also need to use the `transition` module. This module allows us to easily create animations using CSS3 transitions, with a JavaScript timer fallback.

```javascript YUI().use('panel', 'transition', function (Y) { // We'll write example code here }); ```

Note, using the `panel` module, will also pull down the default CSS required for panel. The CSS that styles the Panel requires you to have the class `yui3-skin-sam` on a parent element, commonly the `` tag.

{{>need-skin-note}} ``` {{>need-skin-comment}} ```

Instantiating the Panel

For this example, we'll instantiate a modal panel, set its visibility to false, and set some CSS properties. The following HTML will be used as the markup for the panel.

```html

```

The JavaScript to instantiate the panel is as follows:

```javascript var panel = new Y.Panel({ srcNode: '#panelContent', width : 330, xy : [300, -300], zIndex : 5, modal : true, visible: false, render : true, buttons: [ { value : 'Close the panel', section: 'footer', action : function (e) { e.preventDefault(); hidePanel(); } } ] }); ```

Adding Animation

To create the animations, we need to set up transition properties on the panel's `boundingBox`. These properties consist of key/value pairs of CSS properties that we want to alter.

We define two methods `showPanel()` and `hidePanel()` that define transitions. We could also use the `visibleChange` event to toggle the animation based on the state. However, the benefit of this method is that it allows us to use callback functions after the `transition` has ended.

```javascript function showPanel() { panel.show(); bb.transition({ duration: 0.5, top : '80px' }); } function hidePanel() { bb.transition({ duration: 0.5, top : '-300px' }, function () { panel.hide(); }); } ```

Adding Buttons to toggle visibility

Finally, we create two buttons, one to show the panel and one to hide it.

The button to close the panel was specified in the instantiation of the panel. The button to open the panel can be defined as:

```javascript // Add Panel show button. openBtn.on('click', function (e) { showPanel(); }); ```

Complete Example Source

``` {{>panel-animate-source}} ```