# HELP! Animated GLB is complete on Image Target Scan

**URL:** <https://forum.8thwall.com/t/help-animated-glb-is-complete-on-image-target-scan/6944>\
**Category:** Technical Support\
**Tags:** image-targets\
**Created:** [June 10, 2025, 7:46pm UTC](https://forum.8thwall.com/t/help-animated-glb-is-complete-on-image-target-scan/6944 "2025-06-10T19:46:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adam\_Greber](https://avatars.discourse-cdn.com/v4/letter/a/a4c791/32.png) [@Adam\_Greber](https://forum.8thwall.com/u/Adam_Greber)\
**Post date:** [June 10, 2025, 7:46pm UTC](https://forum.8thwall.com/t/help-animated-glb-is-complete-on-image-target-scan/6944/1 "2025-06-10T19:46:48Z")

</div>

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>

```

---

<div class="post-metadata">

**Author:** ![Adam\_Greber](https://avatars.discourse-cdn.com/v4/letter/a/a4c791/32.png) [@Adam\_Greber](https://forum.8thwall.com/u/Adam_Greber)\
**Post date:** [June 10, 2025, 9:08pm UTC](https://forum.8thwall.com/t/help-animated-glb-is-complete-on-image-target-scan/6944/2 "2025-06-10T21:08:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [June 16, 2025, 5:58pm UTC](https://forum.8thwall.com/t/help-animated-glb-is-complete-on-image-target-scan/6944/3 "2025-06-16T17:58:08Z")

</div>

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

> **[Image Target Portal | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/image-target-portal-aframe/code/components.js)**
>
> This example shows off the popular portal illusion in web AR using hider-material and an image target.

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

```