# How do I start an animation clip on detection of an image target?
**URL:** https://forum.8thwall.com/t/how-do-i-start-an-animation-clip-on-detection-of-an-image-target/1548
**Category:** Technical Support
**Created:** [June 4, 2024, 11:57am UTC](https://forum.8thwall.com/t/how-do-i-start-an-animation-clip-on-detection-of-an-image-target/1548 "2024-06-04T11:57:29Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@6\_Smith](https://forum.8thwall.com/u/6_Smith)
#### Post date: [June 4, 2024, 11:57am UTC](https://forum.8thwall.com/t/how-do-i-start-an-animation-clip-on-detection-of-an-image-target/1548/1 "2024-06-04T11:57:29Z")
Hi all.
I have an animated .GLB file that plays fine on detection of the image target, but when the model instantiates the animation is already quite a way in and missing a critical part, presumably because it starts running as soon as the project loads? How can I delay the animation and trigger the start on detection of the target?
---
### Author:  [@Ian](https://forum.8thwall.com/u/Ian)
#### Post date: [June 4, 2024, 4:39pm UTC](https://forum.8thwall.com/t/how-do-i-start-an-animation-clip-on-detection-of-an-image-target/1548/2 "2024-06-04T16:39:49Z")
I would suggest creating your own custom image target component and listening on the `xrimagefound` event.
Here is an example project that has a custom image target component
> **[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.
---
### Author:  [@Ian](https://forum.8thwall.com/u/Ian)
#### Post date: [June 4, 2024, 4:41pm UTC](https://forum.8thwall.com/t/how-do-i-start-an-animation-clip-on-detection-of-an-image-target/1548/3 "2024-06-04T16:41:13Z")
something like this:
```auto
const imageTargetAnimationComponent = () => ({
schema: {
name: {type: 'string'},
},
init() {
const {object3D} = this.el
const {name} = this.data
object3D.visible = false
const model = document.getElementById('yourModel')
const imageFound = ({detail}) => {
if (name !== detail.name) {
return
}
object3D.position.copy(detail.position)
object3D.quaternion.copy(detail.rotation)
object3D.scale.set(detail.scale, detail.scale, detail.scale)
model.setAttribute('animation-mixer', {
clip: 'yourAnimation',
})
object3D.visible = true
}
const imageUpdate = ({detail}) => {
if (name !== detail.name) {
return
}
object3D.position.copy(detail.position)
object3D.quaternion.copy(detail.rotation)
object3D.scale.set(detail.scale, detail.scale, detail.scale)
}
const imageLost = (e) => {
object3D.visible = false
}
this.el.sceneEl.addEventListener('xrimagefound', imageFound)
this.el.sceneEl.addEventListener('xrimageupdated', imageUpdate)
this.el.sceneEl.addEventListener('xrimagelost', imageLost)
},
})
export {imageTargetAnimationComponent}
```
---
### Author:  [@6\_Smith](https://forum.8thwall.com/u/6_Smith)
#### Post date: [June 5, 2024, 7:50am UTC](https://forum.8thwall.com/t/how-do-i-start-an-animation-clip-on-detection-of-an-image-target/1548/4 "2024-06-05T07:50:51Z")
Thank you. I shall try that!