# Animation Plugin

This example shows how you can use Widget's plugin infrastructure to customize the existing behavior of a widget.

We create an Animation plugin class for Overlay called `AnimPlugin` which changes the way Overlay instances are shown/hidden, by fading them in and out. The Overlay is initially constructed with the `AnimPlugin` plugged in (with the duration set to 2 seconds). Clicking the "Unplug AnimPlugin" button, will restore the original non-Animated Overlay show/hide behavior. Clicking on the "Plug AnimPlugin" button will plug in the `AnimPlugin` again, but with a shorter duration.

NOTE: This example serves as a tutorial for how to build your own plugins. A packaged animation plugin based on this example is available by using the `widget-anim` module, which sets up a `Y.Plugin.WidgetAnim` class, similar to the one discussed in this example.

Overlay Header
Overlay Body
Overlay Footer