Polymer paper-ripple programatically trigger downAction at given x,y coordinates
<p>I am trying to trigger a ripple animation programatically at a given x,y coordinate, but I can't seem to get it right.</p>

<p>I have found a few helpful answers like these:</p>

<ol>
<li><a href="https://stackoverflow.com/questions/33060861/paper-ripple-mousedown-event-handler-downaction-override">paper-ripple mouseDown event handler downAction Override</a></li>
<li><a href="https://stackoverflow.com/questions/32668506/polymer-paper-ripple">Polymer paper ripple</a></li>
<li><a href="https://stackoverflow.com/questions/32277017/how-to-trigger-polymer-paper-ripple-animation-by-api-code">How to trigger Polymer paper ripple animation by API code?</a></li>
</ol>

<p>I didn't find a way to apply the first two since at this stage I'm simply using a paper-ripple element without creating a custom element. The first answer is somewhat helpful, but I'd like to control the x,y coordinates of the ripple.</p>

<p>Here's how I tried to do this, using Jacek's snippet fro the 3rd answer:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;base href="https://polygit.org"&gt;
      &lt;script src="/components/webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
      &lt;link rel="import" href="/components/polymer/polymer.html"&gt;
      &lt;link rel="import" href="/components/paper-ripple/paper-ripple.html"&gt;
      &lt;style&gt;
        .card {
          position: relative;
          display: inline-block;
          width: 300px;
          height: 240px;
          vertical-align: top;
          background-color: #fff;
          box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;      
      &lt;template id="demo" is="dom-bind"&gt;
        &lt;div class="card"&gt;
          &lt;paper-ripple recenters&gt;&lt;/paper-ripple&gt;
        &lt;/div&gt;
      &lt;/template&gt;
    &lt;/body&gt;


    &lt;script&gt;
      var demo = document.querySelector('#demo');  
      
      var mouseDown = new MouseEvent("mouseDown",{"clientX":30,"clientY":30,"screenX":30,"screenY":30});
      var mouseUp = new MouseEvent("mouseUp",{"clientX":30,"clientY":30,"screenX":30,"screenY":30});
      
      demo.addEventListener('dom-change', function() {
        setInterval(triggerRippleDown, 1000);
        setInterval(triggerRippleUp, 1200);
      });
      
      var triggerRippleDown = function() {
        var paperRipple = document.querySelector('paper-ripple');
        paperRipple.downAction(mouseDown);
      }
      var triggerRippleUp = function() {
        var paperRipple = document.querySelector('paper-ripple');
        paperRipple.upAction(mouseUp);
      }
    &lt;/script&gt;
    &lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>This passing x,y properties via mouse event doesn't seem to work, although this part of the documentation suggests so:</p>

<pre><code>downAction: function(e) {
  this.$.ripple.downAction({x: e.x, y: e.y});
}
</code></pre>

<p>Any hints on what's the recommended way to trigger a ripple programatically outside of a custom component ?</p>