# Animatable not working

**URL:** <https://forum.babylonjs.com/t/animatable-not-working/50775>\
**Category:** Questions\
**Created:** [May 23, 2024, 6:37am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775 "2024-05-23T06:37:26Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Silver](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/silver/32/31136_2.png) [@Silver](https://forum.babylonjs.com/u/Silver)\
**Post date:** [May 23, 2024, 6:37am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/1 "2024-05-23T06:37:27Z")

</div>

```auto
var extrude = scene.getAnimationGroupByName("Key.Action.001"); // works!
extrude.pause(true); // works! stops the whole animation
extrude.animatables[0].goToFrame(30); //works which goes to the first animatable at frame 30

//This code isn't working
extrude.animatables[0].play(); //plays the whole animation group instead of the first animatable

```

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [May 23, 2024, 7:22am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/2 "2024-05-23T07:22:15Z")

</div>

Please write a valid repro PG that we can test.

---

<div class="post-metadata">

**Author:** ![Silver](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/silver/32/31136_2.png) [@Silver](https://forum.babylonjs.com/u/Silver)\
**Post date:** [May 23, 2024, 7:26am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/3 "2024-05-23T07:26:54Z")

</div>

ok sure, give me a min

---

<div class="post-metadata">

**Author:** ![Silver](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/silver/32/31136_2.png) [@Silver](https://forum.babylonjs.com/u/Silver)\
**Post date:** [May 23, 2024, 7:52am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/4 "2024-05-23T07:52:41Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#B16HRH)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [May 23, 2024, 7:57am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/5 "2024-05-23T07:57:38Z")

</div>

play is not part of animatable [Babylon.js docs](https://doc.babylonjs.com/typedoc/classes/BABYLON.Animatable)  
use restart instead

---

<div class="post-metadata">

**Author:** ![Silver](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/silver/32/31136_2.png) [@Silver](https://forum.babylonjs.com/u/Silver)\
**Post date:** [May 23, 2024, 8:06am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/6 "2024-05-23T08:06:48Z")

</div>

yes, but i just wanted to play it once, when i set it to restart() it keeps looping

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [May 23, 2024, 8:09am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/7 "2024-05-23T08:09:22Z")

</div>

cc @Evgeni_Popov

---

<div class="post-metadata">

**Author:** ![11128](https://avatars.discourse-cdn.com/v4/letter/1/d07c76/32.png) [@11128](https://forum.babylonjs.com/u/11128)\
**Post date:** [May 23, 2024, 8:33am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/8 "2024-05-23T08:33:12Z")

</div>

`animatables[1].goToFrame(number)`is only noticeable when paused or when animation is running.

Also, the relationship between `play` and `pause` is related, and the relationship between `start` and `stop` is related.

Check the following PG for all cases where no error occurs in the given relationship.  
As @Cedric said, you can use restart, but it seems to me that it only works with the `play` and `pause` rules.

> **[Babylon.js Playground](https://playground.babylonjs.com/#B16HRH%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Silver](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/silver/32/31136_2.png) [@Silver](https://forum.babylonjs.com/u/Silver)\
**Post date:** [May 23, 2024, 8:44am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/9 "2024-05-23T08:44:05Z")

</div>

so what do i do to only play it once, the example you gave plays both animatable 0 and 1 at the same time even if it played it once. I just want to play animatable 1 by itself

---

<div class="post-metadata">

**Author:** ![11128](https://avatars.discourse-cdn.com/v4/letter/1/d07c76/32.png) [@11128](https://forum.babylonjs.com/u/11128)\
**Post date:** [May 23, 2024, 9:02am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/10 "2024-05-23T09:02:38Z")

</div>

It’s not smooth  
I have an appointment, so I’ll check further tomorrow. Can someone answer that question?

> **[Babylon.js Playground](https://playground.babylonjs.com/#B16HRH%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 23, 2024, 9:17am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/11 "2024-05-23T09:17:24Z")

</div>

Animatables of an animation group are not really meant to be manipulated individually. They should be managed through the `AnimationGroup` methods only.

If you want to manage animatables individually, you should probably create them yourself by calling `scene.beginDirectAnimation`. See how `AnimationGroup.start` does it:

> <https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Animations/animationGroup.ts#L656-L666>

PG from @11128 does work, but a small correction must be performed in the “3” case:

> **[Babylon.js Playground](https://playground.babylonjs.com/#B16HRH%235)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Silver](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/silver/32/31136_2.png) [@Silver](https://forum.babylonjs.com/u/Silver)\
**Post date:** [May 23, 2024, 9:25am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/12 "2024-05-23T09:25:38Z")

</div>

I’m not sure if that playground demo will scale with my project, for example:

I will have 1 mesh with, say, 15 extrude animations under animatables.  
Using the logic of the playground you made, would I have to stop the remaining 14 animatables manually? how would that even look like

---

<div class="post-metadata">

**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\
**Post date:** [May 23, 2024, 9:59am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/13 "2024-05-23T09:59:57Z")

</div>

Are all of them morph targets? Would it be easier for you manipulating the morph targets directly? [https://playground.babylonjs.com/#B16HRH#6](https://playground.babylonjs.com/#B16HRH#6)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 23, 2024, 2:17pm UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/14 "2024-05-23T14:17:26Z")

</div>

Maybe you could create separate animations in the DCC tool (so that you have separate animation groups), and only play the ones that have to be played?

---

<div class="post-metadata">

**Author:** ![Silver](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/silver/32/31136_2.png) [@Silver](https://forum.babylonjs.com/u/Silver)\
**Post date:** [May 23, 2024, 9:06pm UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/15 "2024-05-23T21:06:24Z")

</div>

The animations are made using blender shape keys, so all the animatable are placed into one animation group. In the playground the mesh has 2 shape keys stored inside, later on it will consist of 15 shape keys under the same animation group.

Solution 1: Have the ability to point to a shape key, aka target, by it’s name

```auto
const morph = scene.getMeshByName("Cube.010").morphTargetManager;
console.log(morph._targets);`

```

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/8/78d7f899da5d0d57362526018b6d42f1f6679535.png)

## `^^^Here we see that the target name is stored`

_`//But when you try to extract it using the `morph.getTarget` it doesn't seem to work`_

```auto
const ext = morph.getTarget("scale_1"); 
console.log(ext); //returns undefined?

```

@Joe_Kerr showed in their attempt

Which means i can’t use the name system to properly locate the shape keys i want to play or stop.  
So, when it comes to managing large numbers of shape keys and individually stopping them and playing them it’s hard to work with using arrays

Solution 2: Just make it so that you can play the animatable by just calling 1 line of code  
`morph.animatables[0].play(); //this can simply isolate that target and play it.`

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/4/049648738eded6df05484f1fb96b5da39c3a05a3.png)  
^^^Here is my blender shape Key property, in babylon it keeps the same array structure so i can know which arrays will store my scale animations and which array will store my extrude animations.

For example i will know:  
my scale array is from `[0] to [1]`  
my extrude array is from `[2] to [3]`  
So, working with the array system will be sufficient as long as it give me the ability to only play the specified target.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 23, 2024, 10:58pm UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/16 "2024-05-23T22:58:47Z")

</div>

`morph.getTarget("scale_1"); //returns undefined?? wtf??!`

I laught 😃

getTarget gets a number 😉

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 23, 2024, 11:01pm UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/17 "2024-05-23T23:01:44Z")

</div>

And because I’m a lovely person:

[add getTargetByName to MorphTargetManager by deltakosh · Pull Request #15134 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/15134)

---

<div class="post-metadata">

**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\
**Post date:** [May 24, 2024, 9:25am UTC](https://forum.babylonjs.com/t/animatable-not-working/50775/18 "2024-05-24T09:25:39Z")

</div>

Oh oops sorry, I forget that one. It was more like a comment to self which got cut off due to split screen 😳
