<div class="intro">
<p>This demonstrates how to use the <code>end</code> event.</p>
<p> Click the X in the header to fade out the element and remove it from the document once the fade completes.</p>
</div>
<div class="example">
{{>end-event-source}}
</div>
<h2>Setting up the HTML</h2>
<p>First we add some HTML to animate.</p>
```
{{>end-event-source-html}}
```
<h2>Creating the Anim Instance</h2>
<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the properties to be transitioned and final values.</p>
```
var anim = new Y.Anim({
node: '#demo',
to: { opacity: 0 }
});
```
<h2>Handling the End Event</h2>
<p>We will need a function to run when the <code>end</code> event fires. Note that the context of our handler defaults to <code>anim</code>, so <code>this</code> refers to our Anim instance inside the handler.</p>
```
var onEnd = function() {
var node = this.get('node'); // this === anim
node.get('parentNode').removeChild(node); // node is an instance of Node
};
```
<h2>Listening for the End Event</h2>
<p>Now we will use the <code>on</code> method to subscribe to the <code>end</code> event, passing it our handler.</p>
```
anim.on('end', onEnd);
```
<h2>Running the Animation</h2>
<p>Finally we add an event handler to run the animation.</p>
```
```
<h2>Complete Example Source</h2>
```
{{>end-event-source}}
```