# Targeted Animation

**URL:** <https://forum.8thwall.com/t/targeted-animation/2336>\
**Category:** Technical Support\
**Tags:** general\
**Created:** [August 6, 2024, 6:09pm UTC](https://forum.8thwall.com/t/targeted-animation/2336 "2024-08-06T18:09:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joao\_Pedro\_Danhoni](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/joao_pedro_danhoni/32/930_2.png) [@Joao\_Pedro\_Danhoni](https://forum.8thwall.com/u/Joao_Pedro_Danhoni)\
**Post date:** [August 6, 2024, 6:09pm UTC](https://forum.8thwall.com/t/targeted-animation/2336/1 "2024-08-06T18:09:35Z")

</div>

Hey there. I have an animated glb file that I need to be played once it recognizes the flat target, which will be on a wall. I used as the template the Jellyfish Project combined with World Effects animation mixer, it was presented on this video:

[![](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/2c7c4db7ace583315aaee46329830bfdee0dc260.jpeg "Quick Tips: Playing Animations") ](https://www.youtube.com/watch?v=J7QE0TYEL6g)

I own a school and we want to animate a wall as a science project. So the animation must be steady in front of the wall, just with the movement of the animation itself.

I didn’t have any success so far.

---

<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:** [August 6, 2024, 7:08pm UTC](https://forum.8thwall.com/t/targeted-animation/2336/2 "2024-08-06T19:08:57Z")

</div>

Can you show what you have so I can point you in the right direction?

---

<div class="post-metadata">

**Author:** ![Joao\_Pedro\_Danhoni](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/joao_pedro_danhoni/32/930_2.png) [@Joao\_Pedro\_Danhoni](https://forum.8thwall.com/u/Joao_Pedro_Danhoni)\
**Post date:** [August 6, 2024, 8:04pm UTC](https://forum.8thwall.com/t/targeted-animation/2336/3 "2024-08-06T20:04:37Z")

</div>

Of course. Thank you!

**body.html:**

````auto
<a-scene
  xrextras-gesture-detector
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true; webgl2: true;"
  xrweb="disableWorldTracking: true">

  <a-assets>
    <a-asset-item id="jelly-glb" src="assets/smalldragon.glb" animation-mixer></a-asset-item>
  </a-assets>

  <a-camera
    position="0 4 10"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>

  <a-light type="directional" intensity="0.5" position="1 1 1"></a-light>

  <a-light type="ambient" intensity="0.7"></a-light>

<!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
  <xrextras-named-image-target name="model-target">
    <!-- Add a child entity that can be rotated independently of the image target. -->
    <a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>
  </xrextras-named-image-target>

</a-scene>```

**head.html:**

````

```

---

<div class="post-metadata">

**Author:** ![Joao\_Pedro\_Danhoni](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/joao_pedro_danhoni/32/930_2.png) [@Joao\_Pedro\_Danhoni](https://forum.8thwall.com/u/Joao_Pedro_Danhoni)\
**Post date:** [August 6, 2024, 8:06pm UTC](https://forum.8thwall.com/t/targeted-animation/2336/4 "2024-08-06T20:06:26Z")

</div>

@GeorgeButler on head.html I added:

````auto
<meta name="8thwall:renderer" content="aframe:1.3.0">

<meta name="8thwall:package" content="@8thwall.xrextras">

<meta name="8thwall:package" content="@8thwall.landing-page">

<!-- Other external scripts and meta tags can also be added. -->

<meta name="apple-mobile-web-app-capable" content="yes">

<script crossorigin="anonymous" src="//cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js"></script>```
````

---

<div class="post-metadata">

**Author:** ![Joao\_Pedro\_Danhoni](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/joao_pedro_danhoni/32/930_2.png) [@Joao\_Pedro\_Danhoni](https://forum.8thwall.com/u/Joao_Pedro_Danhoni)\
**Post date:** [August 7, 2024, 10:46pm UTC](https://forum.8thwall.com/t/targeted-animation/2336/5 "2024-08-07T22:46:38Z")

</div>

Any news @GeorgeButler ? I wasn’t able to make it work.

---

<div class="post-metadata">

**Author:** ![Joao\_Pedro\_Danhoni](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/joao_pedro_danhoni/32/930_2.png) [@Joao\_Pedro\_Danhoni](https://forum.8thwall.com/u/Joao_Pedro_Danhoni)\
**Post date:** [August 13, 2024, 11:54pm UTC](https://forum.8thwall.com/t/targeted-animation/2336/6 "2024-08-13T23:54:30Z")

</div>

@GeorgeButler @Ian  
Can you guys help me out?

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [August 14, 2024, 12:42am UTC](https://forum.8thwall.com/t/targeted-animation/2336/7 "2024-08-14T00:42:10Z")

</div>

You need to write a custom image target component. Please reference the sampe projectcode here:

> **[Image Target Portal with Navigation Mesh | 8th Wall Playground | 8th Wall](https://www.8thwall.com/playground/image-target-portal-nav-mesh/code/components/image-target-portal.js)**
>
> This example showcases how to create a WebAR project with an image target and character navigation mesh.

Essentially you want to add your animation dynamically via the `xrimagefound` event which runs the `xrimagefound` function the code above

so in the `xrimagefound` function you would add something like

```auto
yourModel.setAttribute('animation-mixer', {
        clip: 'yourAnimation',
        loop: 'repeat',
      })

```

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [August 14, 2024, 12:43am UTC](https://forum.8thwall.com/t/targeted-animation/2336/8 "2024-08-14T00:43:54Z")

</div>

Also make sure you have imported the external animation-mixer script

As shown in the example project on line 10 here:

> **[A-Frame: Animation Mixer | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/animation-mixer-aframe/code/head.html#L10)**
>
> This example allows the user to position, scale, rotate, and change between animations embedded in a 3D model.

---

<div class="post-metadata">

**Author:** ![Joao\_Pedro\_Danhoni](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/joao_pedro_danhoni/32/930_2.png) [@Joao\_Pedro\_Danhoni](https://forum.8thwall.com/u/Joao_Pedro_Danhoni)\
**Post date:** [August 14, 2024, 9:55pm UTC](https://forum.8thwall.com/t/targeted-animation/2336/9 "2024-08-14T21:55:57Z")

</div>

Everything worked well! Thank you!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9212a857458f1b03a6accb129e0f8cbea408e3e5.png) [@system](https://forum.8thwall.com/u/system)\
**Post date:** [August 18, 2024, 9:56pm UTC](https://forum.8thwall.com/t/targeted-animation/2336/10 "2024-08-18T21:56:10Z")

</div>

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.