title: aframe-spritesheet-component freezing webvr environment in browser?
body: <p>This is my first attempt at building an a-frame experience, and I'm doing so by cobbling together multiple community components.</p>
  
  <p>I'm currently attempting to implement a spritesheet animation using aframe-spritesheet-component ( <a href="https://github.com/EkoLabs/aframe-spritesheet-component" rel="nofollow noreferrer">https://github.com/EkoLabs/aframe-spritesheet-component</a> ) and having an issue getting it to play well with others.</p>
  
  <p>My build here: <a href="https://afantasy.github.io/spritetest/" rel="nofollow noreferrer">https://afantasy.github.io/spritetest/</a></p>
  
  <p>So far, I've managed to get the spritesheet animation to loop through once, after which it causes a total freeze of the entire environment.</p>
  
  <p>I am not sure whether it's a bad interaction with the other components I've installed, or with the aframe framework itself. </p>
  
  <p>From what I gather from the console, something is up with the update / tick functions.</p>
  
  <p>I've managed to isolate the direct cause to this bit of code I grabbed directly from the aframe-spritesheet-component example on github ( <a href="https://ekolabs.github.io/aframe-spritesheet-component/examples/rowscols/" rel="nofollow noreferrer">https://ekolabs.github.io/aframe-spritesheet-component/examples/rowscols/</a> )</p>
  
  <pre><code>&lt;!-- SPRITE ANIMATION LOOP --&gt;
  &lt;script type="text/javascript"&gt;
    var animation = { progress: 0 };
  
    var tween = new TWEEN.Tween(animation)
        .to({ progress: 1 }, 1000)
        .onUpdate(function(){
            document.querySelector('a-image').setAttribute('sprite-sheet', 'progress', animation.progress);
        });
  
    tween.onComplete(function() { animation.progress = 0; });
    tween.chain(tween);
    tween.start();
  &lt;/script&gt;
  </code></pre>
  
  <p>Super stumped and sure how to proceed from here, any hints would be appreciated.</p>