Solution, Part 2

Solution, Part 2

Topic Progress:

Define the Animation

In the first animation we move the position of the camera, but we also have to rotate it. Therefore we need two <a-animation> commands which begin simultaneously when they receive the command cmd_Start1 (which we defined in the previous topic):

 <!-- To position the camera, set the position on a wrapper <a-entity> -->
 <a-entity id="camera" position ="0 1 5">
    <a-camera  zoom="0.5" user-height="0">
    <!-- 1st Animation -->
    <a-animation id="ani1" easing="linear" begin="cmd_Start1" dur="5000" attribute="position" to="5 1 0"></a-animation>
    <a-animation easing="linear" begin="cmd_Start1" dur="5000" attribute="rotation" to="0 90 0"></a-animation>

The duration of both animations is 5000 milliseconds. What happens after the animation has finished? It triggers an event called animationend. To access the event we have given the animation the id ani1.

We start the second animation when the first one has fired animationend.

Build the animationend Event

We simply add a third event listener. If the event animationend from ani1 is fired, the parent of the animation (the <a-camera> with the id camera) sends (or emits) the command cmd_Start2 to the next <a-animation> tag.

   document.addEventListener('DOMContentLoaded', function(event) {
      document.querySelector('#start_icon').addEventListener('click', function () {
   document.querySelector('#ani1').addEventListener('animationend', function () {







Comments are closed.