# How to trigger one animation

**URL:** <https://forum.8thwall.com/t/how-to-trigger-one-animation/6085>\
**Category:** Technical Support\
**Tags:** studio\
**Created:** [April 16, 2025, 2:34pm UTC](https://forum.8thwall.com/t/how-to-trigger-one-animation/6085 "2025-04-16T14:34:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nwankwo\_Micheal](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@Nwankwo\_Micheal](https://forum.8thwall.com/u/Nwankwo_Micheal)\
**Post date:** [April 16, 2025, 2:34pm UTC](https://forum.8thwall.com/t/how-to-trigger-one-animation/6085/1 "2025-04-16T14:34:49Z")

</div>

Hello Everyone,  
So im currently working with studio and i want to trigger some animations in a model via typescript how do it,  
Also im working with the image target in studio, How do i trigger action only when image target is in frame , and perform another action when image target is lost

---

<div class="post-metadata">

**Author:** ![Herman\_Ptacnik](https://avatars.discourse-cdn.com/v4/letter/h/5f8ce5/32.png) [@Herman\_Ptacnik](https://forum.8thwall.com/u/Herman_Ptacnik)\
**Post date:** [April 16, 2025, 3:48pm UTC](https://forum.8thwall.com/t/how-to-trigger-one-animation/6085/2 "2025-04-16T15:48:35Z")

</div>

> [@Nwankwo\_Micheal](#):
>
> So im currently working with studio and i want to trigger some animations in a model via typescript how do it,  
> Also im working with the image target in studio, How do i trigger action only when image target is in frame , and perform another action when image target is lost

You can use a State Machine: [State Machines | 8th Wall](https://www.8thwall.com/docs/studio/essentials/state-machines/)

By adding your animation and/or logic in an OnEnter function, you can trigger that state to activate it by using onEvent() or triggers.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Nwankwo\_Micheal](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@Nwankwo\_Micheal](https://forum.8thwall.com/u/Nwankwo_Micheal)\
**Post date:** [April 16, 2025, 3:59pm UTC](https://forum.8thwall.com/t/how-to-trigger-one-animation/6085/3 "2025-04-16T15:59:11Z")

</div>

@Herman_Ptacnik thanks for helping out, but i was precisely talking about how select individual animations state .  
in the 8th wall editor i use "animation-mixer=“clip: \*” to select individual animation of my desire whats the replica in studio

 ![Screenshot (210)](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/b/b50bfc232d44fbb229de96ff5495f73da36925aa.png)

---

<div class="post-metadata">

**Author:** ![Herman\_Ptacnik](https://avatars.discourse-cdn.com/v4/letter/h/5f8ce5/32.png) [@Herman\_Ptacnik](https://forum.8thwall.com/u/Herman_Ptacnik)\
**Post date:** [April 16, 2025, 4:11pm UTC](https://forum.8thwall.com/t/how-to-trigger-one-animation/6085/4 "2025-04-16T16:11:09Z")

</div>

Oh, to select or set an animation I believe you can just use this:

```auto
ecs.GltfModel.set(world, component.eid, {
  url: './assets/doty.glb',
  animationClip: 'idle',
  loop: false,
  paused: false,
  time: 0,
  timeScale: 1,
  collider: false,
  reverse: false,
  repetitions: -1,
  crossFadeDuration: 0
})

```

That way you can change its animation Clip.

Extra Info:  
[GltfModel | 8th Wall](https://www.8thwall.com/docs/studio/api/ecs/gltf-model/#properties)

---

<div class="post-metadata">

**Author:** ![Nwankwo\_Micheal](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@Nwankwo\_Micheal](https://forum.8thwall.com/u/Nwankwo_Micheal)\
**Post date:** [April 16, 2025, 5:50pm UTC](https://forum.8thwall.com/t/how-to-trigger-one-animation/6085/5 "2025-04-16T17:50:37Z")

</div>

> [@Herman\_Ptacnik](#):
>
> ```auto
> ecs.GltfModel.set(world, component.eid, {
> url: './assets/doty.glb',
> animationClip: 'idle',
> loop: false,
> paused: false,
> time: 0,
> timeScale: 1,
> collider: false,
> reverse: false,
> repetitions: -1,
> crossFadeDuration: 0
> })
> 
> ```

@Herman_Ptacnik  
Thanks for helping out but it didn’t work with swapping my animation clip maybe i integrated it wrongly. i have the idle animation playing on loop, but when i play it just freezes, my button work but the animation freezes and it also doesn’t swap

```auto
import * as ecs from '@8thwall/ecs'

type AnimationClip = 'idle' | 'walk' | 'attack'
const animationClips: AnimationClip[] = ['idle', 'walk', 'attack']

ecs.registerComponent({
  name: 'AntCntrl',
  schema: {
    nextButton: ecs.eid
  },
  data: {
    currentAnimation: ecs.string
  },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const schema = schemaAttribute.cursor(eid)

    const playAnimation = (clip: AnimationClip) => {
      console.log(`Playing animation: ${clip}`)
      ecs.GltfModel.set(world, eid, {
        animationClip: clip,
        loop: false,
        paused: false,
        time: 0,
        timeScale: 1,
        collider: false,
        reverse: false,
        repetitions: -1,
        crossFadeDuration: 0,
      })
    }

    ecs.defineState('idle')
      .initial()
      .onEnter(() => {
        const initial = 'idle' as AnimationClip
        dataAttribute.set(eid, { currentAnimation: initial })
        playAnimation(initial)

        world.events.addListener(schema.nextButton, ecs.input.SCREEN_TOUCH_START, () => {
          const current = dataAttribute.get(eid)?.currentAnimation as AnimationClip
          const currentIndex = animationClips.indexOf(current)
          const nextIndex = (currentIndex + 1) % animationClips.length
          const nextClip = animationClips[nextIndex]

          dataAttribute.set(eid, { currentAnimation: nextClip })
          playAnimation(nextClip)
        })
      })
  }
})

```

---

<div class="post-metadata">

**Author:** ![Nwankwo\_Micheal](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@Nwankwo\_Micheal](https://forum.8thwall.com/u/Nwankwo_Micheal)\
**Post date:** [April 17, 2025, 11:55am UTC](https://forum.8thwall.com/t/how-to-trigger-one-animation/6085/6 "2025-04-17T11:55:42Z")

</div>

i fixed it with this .

```auto
 stateMachine: ({ world, eid, schemaAttribute, dataAttribute }) => {
    const animations = ['Idle', 'Walk', 'Attack']
    let currentIndex = 0 // To track which animation is next

    // the Function i used to play a specific animation on the player entity
    const playAnimation = (animationName, playSpeed, canLoop) => {
      const animationComponent = ecs.GltfModel.get(world, eid)
      if (animationComponent) {
        ecs.GltfModel.set(world, eid, {
          animationClip: animationName,
          timeScale: playSpeed,
          loop: canLoop,
        })

```

so i just trigger any animation i want via Playanimation

---

<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:** [April 21, 2025, 11:55am UTC](https://forum.8thwall.com/t/how-to-trigger-one-animation/6085/7 "2025-04-21T11:55:50Z")

</div>

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