# Targeted Animation using A-Frame

**URL:** <https://forum.8thwall.com/t/targeted-animation-using-a-frame/2358>\
**Category:** Technical Support\
**Created:** [August 8, 2024, 1:36pm UTC](https://forum.8thwall.com/t/targeted-animation-using-a-frame/2358 "2024-08-08T13:36:13Z")\
**Posts on this page:** 1\
**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 8, 2024, 1:36pm UTC](https://forum.8thwall.com/t/targeted-animation-using-a-frame/2358/1 "2024-08-08T13:36:13Z")

</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. **(code below)**

````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:**

````

````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>```

````