title: aframe/animation : how to pause and resume?
body: <p>I have a 360° rotation animation in aframe (ar.js) and I would like to pause and continue it, whereas all that I can do it's pause but restart from the begining.</p>
  
  <pre><code>&lt;a-entity&gt;
      &lt;a-entity
          gltf-model="#tree-gltf"&gt;
      &lt;/a-entity&gt;
      &lt;a-animation
          begin="rotation-begin"
          end="rotation-end"
          attribute="rotation"
          to="0 360 0"
          direction="alternate"
          dur="10000"
          repeat="indefinite"&gt;
      &lt;/a-animation&gt;
  &lt;/a-entity&gt;
  </code></pre>
  
  <p><a href="https://aframe.io/docs/0.7.0/core/animations.html" rel="nofollow noreferrer">Animation documentation</a> give access to "begin" and "end" events, but "begin" restart from the begining and not from the current value when paused.</p>
  
  <p><a href="https://aframe.io/docs/0.7.0/core/entity.html" rel="nofollow noreferrer">Entity documentation</a> give access to pause() and play(), which are the same. Play() doesn't work at all if "begin" attribute exist, so you have to choose between events or functions.
  But play() also restart animation from the begining and not from where the animation was paused.</p>
  
  <p>I also tried an ugly trick by setting attribute "dur" to one hour to slow down animation so it looks like paused, but setting back "dur" to 10 sec doesn't restart it.</p>
  
  <p>Any idea which can help ?</p>