HELP! Animated GLB is complete on Image Target Scan

Hello! DESPERATE for help.

I have looked at every previous forum subject about this, and pleaded with ChatGPT to help. But my animation is STILL complete when I scan the printed target Image.

Below is the code I am using in a “index.html” file. The image name is “AR” and the animation name is “24Mill.glb”


GLB Animation on Image Target
<!-- A-Frame and 8thWall -->
<script src="https://cdn.8thwall.com/web/aframe/8frame/8frame.js"></script>

<script>
  AFRAME.registerComponent('toggle-visibility-on-target', {
    init: function () {
      const model = document.querySelector('#model');
      let animationMixer;

      model.addEventListener('model-loaded', () => {
        animationMixer = model.components['animation-mixer'];
        if (animationMixer) {
          animationMixer.pause();
          console.log('Animation Mixer ready and paused');
        }
      });

      this.el.addEventListener('targetFound', () => {
        console.log('Target found');
        model.setAttribute('visible', true);
        if (animationMixer) {
          // Play all clips if multiple or play first clip explicitly
          animationMixer.play(); // should work for all clips if clip: * is set
          // Or, to be sure, play clip by name like:
          // animationMixer.play('YourClipName');
        }
      });

      this.el.addEventListener('targetLost', () => {
        console.log('Target lost');
        model.setAttribute('visible', false);
        if (animationMixer) {
          animationMixer.pause();
          animationMixer.stop();
        }
      });
    },
  });
</script>
  <!-- Use a-entity with image-target component -->
  <a-entity image-target="name: AR" toggle-visibility-on-target position="0 0 0">
    <a-entity
      id="model"
      gltf-model="#model-asset"
      animation-mixer="paused: true"
      scale="0.5 0.5 0.5"
      visible="false">
    </a-entity>
  </a-entity>
</a-scene>

Also… I’ve tried to debug this multiple times and no issues arise. Clearly this is user error on my part.

Looks like you’re not using the correct name for the Image Target events:

this.el.sceneEl.addEventListener('xrimagefound', imageFound)
this.el.sceneEl.addEventListener('xrimageupdated', showImage)
this.el.sceneEl.addEventListener('xrimagelost', imageLost)