index.html

---
title: Animation.onfinish
slug: Web/API/Animation/onfinish
tags:
- API
- Animation
- Event Handler
- Property
- Reference
- Web Animations
- events
- onfinish
- waapi
- web animations api
browser-compat: api.Animation.onfinish
---
<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>

<p>The {{domxref("Animation")}} interface's <code><strong>onfinish</strong></code>
  property (from the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations
    API</a>) is the event handler for the {{event("finish")}} event. This event is sent
  when the animation finishes playing.</p>

<p>The <code>finish</code> event occurs when the animation completes naturally, as well as
  when the {{domxref("Animation.finish()")}} method is called to immediately cause the
  animation to finish up.</p>

<div class="note">
  <p><strong>Note:</strong> The <code>"paused"</code> play state supersedes the <code>"finished"</code> play
    state; if the animation is both paused and finished, the <code>"paused"</code> state
    is the one that will be reported. You can force the animation into the
    <code>"finished"</code> state by setting its {{domxref("Animation.startTime",
    "startTime")}} to
    <code>document.timeline.currentTime - (<em>Animation</em>.currentTime * <em>Animation</em>.playbackRate)</code>.
  </p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">var <em>finishHandler</em> = <em>Animation</em>.onfinish;

<em>Animation</em>.onfinish = <em>finishHandler</em>;</pre>

<h3 id="Value">Value</h3>

<p>A function to be called to handle the {{event("finish")}} event, or <code>null</code>
  if no <code>finish</code> event handler is set.</p>

<h2 id="Examples">Examples</h2>

<p><code>Animation.onfinish</code> is used several times in the Alice in Web Animations
  API Land <a
    href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice
    Game</a>. Here is one instance where we add pointer events back to an element after
  its opacity animation has faded it in:</p>

<pre class="brush: js">// Add an animation to the game's ending credits
var endingUI = document.getElementById("ending-ui");
var bringUI = endingUI.animate(keysFade, timingFade);

// Pause said animation's credits
bringUI.pause();

// This function removes pointer events on the credits.
hide(endingUI);

// When the credits are later faded in,
// we re-add the pointer events when they're done
bringUI.onfinish = function() {
  endingUI.style.pointerEvents = 'auto';
};
</pre>

<h2 id="Specifications">Specifications</h2>

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
  <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
  <li>{{domxref("Animation")}}</li>
  <li>{{domxref("Animation.finish()")}}</li>
</ul>