title: How do I animate a camera movement in a-frame, using JavaScript?
body: <p>I am working with A-Frame to build a virtual tour, running on a regular webpage, in the desktop. No VR navigation, just moving and clicking the mouse cursor around.</p>
  <p>I will have several buttons above the a-scene. Each button will point the camera at a different direction. I managed to get that working. Next step would be animating it as if the camera is panning to its new direction, instead of jumping right to it.</p>
  <p>Is there a way to achieve this, having the possibility to also set the duration and easing of the animation?</p>
  <p>I know, from <a href="https://stackoverflow.com/questions/39514722/automatically-move-camera-a-frame-js">this SO post</a> how to do that inside a-frame. But since I am calling a function outside of it, I am a bit lost on how to get this working.</p>
  <p>This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function moveCamera() {
    var el = document.querySelector("a-camera");
    el.components["look-controls"].pitchObject.rotation.x = -0.1;
    el.components["look-controls"].yawObject.rotation.y = 0.85;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .sceneWrapper {
      position: relative;
      padding-top: 20px;
      height: 100vh;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://aframe.io/releases/1.0.4/aframe.min.js"&gt;&lt;/script&gt;
  &lt;button id="btn01" type="button" name="button" onclick="moveCamera()"&gt;Move Camera&lt;/button&gt;
  
  &lt;div class="sceneWrapper"&gt;
    &lt;a-scene embedded background="color: #FAFAFA"&gt;
      &lt;a-entity id='cameraWrapper' position="0 0 0"&gt;
        &lt;a-camera wasd-controls-enabled="false" look-controls="reverseMouseDrag:true"&gt;
          &lt;a-animation attribute="position"
                dur="2000"
                easing="linear"
                to="0 1.6 -10"&gt;&lt;/a-animation&gt;
        &lt;/a-camera&gt;
      &lt;/a-entity&gt;
      &lt;a-sky color="#c7dcff"&gt;&lt;/a-sky&gt;
      &lt;a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow&gt;&lt;/a-box&gt;
      &lt;a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow&gt;&lt;/a-sphere&gt;
      &lt;a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow&gt;&lt;/a-cylinder&gt;
      &lt;a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow&gt;&lt;/a-plane&gt;
    &lt;/a-scene&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>