title: A-Frame animations via JavaScript
body: <p>I started with A-Frame VR framework. I have a simple box that I want to animate.</p>
  
  <p>This box will be floating, when looking to the box, it will scale up, on click it will rotate:</p>
  
  <pre><code>&lt;a-box id="boxID" position="0 2 -5" rotation="0 45 45" scale="2 2 2" src="#boxTexture"&gt;
              &lt;a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"&gt;&lt;/a-animation&gt;
  
  &lt;!-- These animations will start when the box is looked at. --&gt;
  &lt;a-animation attribute="scale" begin="mouseenter" dur="300" to="2.3 2.3 2.3"&gt;&lt;/a-animation&gt;
  &lt;a-animation attribute="scale" begin="mouseleave" dur="300" to="2 2 2"&gt;&lt;/a-animation&gt;
  &lt;a-animation attribute="rotation" begin="click" dur="2000" to="360 405 45"&gt;&lt;/a-animation&gt;
  </code></pre>
  
  <p></p>
  
  <p>I would like to create above with Javascript. I started with the following:</p>
  
  <pre><code>AFRAME.registerComponent('scale-on-interact', {
      schema: {
          to: {default: '2.5 2.5 2.5'}
      }, 
  
      init: function () {
          var data = this.data;
  
      }, 
  
      update: function() {
          var data = this.data;
          console.log(data.color);
  
          // MOUSE ENTER EVENT
          this.el.addEventListener('mouseenter', function() {
              console.log("enter");
              this.setAttribute('to', data.to);
          });
  
          // CLICK EVENT
          this.el.addEventListener('click', function() {
              console.log("click");
          });
  
          // MOUSE LEAVE EVENT
          this.el.addEventListener('mouseleave', function() {
              console.log("leave");
          });
      }
  });
  </code></pre>
  
  <p>I receive the logs, but for example on mouse enter, the box doesn't scale up. Also I doesn't know and can't find how to create multiple schema's so I can create one 'to' property for on mouse enter and one for on click.</p>