title: How to animate the change when setting attribute using Javascript in A-frame
body: <p>I am brand new to A-frame so apologies if this is a very obvious question.
  Using A-frame with javascript, I am changing the attribute of various elements when an event occurs (in this case a mouseover of another element but I don't only want to be able to affect the moused element). How can you animate a change to an attribute within the component? Please see below an example of my question, when you gazeover the blue box the red box shifts position. This is a simple example but this is a more general question though about how to achieve this behaviour. You can see I include the animation script in the head but in the examples of this used it is only for constant behaviour and I don't know how to update it dynamically. I'm also aware of the animation tag I could add to the HTML but again I don't know how to affect this. Many thanks for any advice.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Example&lt;/title&gt;
  &lt;meta name="description" content="Hello, WebVR! - A-Frame"&gt;
  &lt;!-- a-frame library --&gt;
  &lt;script src="https://aframe.io/releases/0.7.0/aframe.min.js"&gt;&lt;/script&gt;
  &lt;!-- a-frame animation plugin --&gt;
  &lt;script src="scripts/animation.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      AFRAME.registerComponent('cursor-listener', {
          //initiate
          init: function () {
              //add behaviour for mouse enter (or gaze enter)
              this.el.addEventListener('mouseenter', function (evt) {
                  var otherBox = document.querySelector('#otherbox');
                  otherBox.setAttribute('position', '-2 1 -4');
              });
          }//end initiate
      });//end registerComponent
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a-scene&gt;
  &lt;a-sky&gt;
  &lt;/a-sky&gt;
  &lt;a-box cursor-listener position="0 1 -4" color="blue"&gt;
  &lt;/a-box&gt;
  &lt;a-box id="otherbox" position="-1 1 -4" color="red"&gt;
  &lt;/a-box&gt;
  &lt;a-camera&gt;
  &lt;a-cursor&gt;
  &lt;/a-cursor&gt;
  &lt;/a-camera&gt;
  &lt;/a-scene&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>