<ml-model
                id="leaperVideoTest"
                src="Leaper/RedLeaper.fbx"
                materials="kmat: Leaper/RedLeaper.kmat; textures: Leaper/RedLeaper.png;"
                breadth="1200px"
                model-scale="0.3 0.3 0.3"
                z-offset="-300px">
          </ml-model>

          <ml-quad
                id="magicLeapLogo"
                visibility="hidden"
                src="images/magic-leap-vertical-white.png">
          </ml-quad>

          <video id="portalVideo" class="test-video">
                <source src="portal.webm" type="video/webm">
          </video>

        
      

        
    /* Once the 3d model is ready, play video at 1.25 rate and do transform animation          
              moveTo on the model.*/
          leaperVideoTest.addEventListener('model-displayed', (e) => {
                let vid = document.getElementById('portalVideo');
                vid.playbackRate = 1.25;
                vid.play();

                let leaper = document.getElementById('leaperVideoTest');
                leaper.moveTo = "offset: stay stay 200px; duration: 7s; track: 1;"
          });
    /* When moveTo animation is finished, show logo. */
          leaperVideoTest.addEventListener('transform-animation-end', (e) => {
               document.getElementById("magicLeapLogo").visibility = "show";
          });