title: Way to detect if a polymer web animation is complete?
body: <p>I'm struggling a bit with trying to find something to detect when the animation is complete. Any ideas? Maybe an event listener or something? I also don't know if this is the best way to actually play the animation..</p>
  
  <pre><code>    $(showMore).click(function () {
                var shrinky = new Animation(showMore, [{transform: 'scale(1)'}, {transform: 'scale(0)'}], {fill: 'forwards', duration: 500, easing: 'ease-out'});
                document.timeline.play(shrinky);
      });
  </code></pre>
  
  <p>Like can I detect when the scale is 0 somehow? Any help would be appreciated, thanks!
  - Shan</p>
  
  <p>edit: it seems that my animation isn't firing a 'finish' event when it's over, and it should. maybe I just made the animation incorrectly..</p>
  
  <p><strong>edit okay the solution is that i was trying to call the 'finish' event on the animation and not the animationPlayer. the proper code is this:</strong></p>
  
  <pre><code>var shrinky = new Animation(showMore, [{transform: 'scale(1)'}, {transform: 'scale(0)'}], {fill: 'forwards', duration: 500, easing: 'ease-out'});
      var playShrink = document.timeline.play(shrinky);
      playShrink.addEventListener('finish', function() {
      console.log('this is done');
  });
  </code></pre>