# Animation group blending with glb file

**URL:** <https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334>\
**Category:** Questions\
**Tags:** animationblending\
**Created:** [January 12, 2023, 11:41pm UTC](https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334 "2023-01-12T23:41:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aleebster](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@Aleebster](https://forum.babylonjs.com/u/Aleebster)\
**Post date:** [January 12, 2023, 11:41pm UTC](https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334/1 "2023-01-12T23:41:02Z")

</div>

Hi, I am trying to get smooth blending transitions between two animation groups here:

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

Can anyone help or tell me what Im doing wrong?  
Thanks!

FYI I am very new to coding and babylon so I’m going off the great babylon documentation. I would also be interested in some paid mentorship or training if its available?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 13, 2023, 1:53pm UTC](https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334/2 "2023-01-13T13:53:04Z")

</div>

Hello there! @PatrickRyan will be the perfect person to answer this 🙂

---

<div class="post-metadata">

**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\
**Post date:** [January 14, 2023, 1:19am UTC](https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334/3 "2023-01-14T01:19:09Z")

</div>

@Aleebster, when I was looking at your scene, I noticed some strangeness with the animation property overrides. We are looking into it to either update the engine or the docs, but there is something missing. In the meantime, if you use the overrides at the scene level, they will work for you. [I made a couple small changes to your playground](https://playground.babylonjs.com/#P5HRK2#17) to set overrides at the scene level and to add a function to handle the change of the active animation group playing. This way you can easily pass the correct group to switch to and not have to remember what animation group sits at which point of the animation groups array.

Hopefully this unblocks you for today and when I can circle up with the team about the overrides, I will ping back.

---

<div class="post-metadata">

**Author:** ![Aleebster](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@Aleebster](https://forum.babylonjs.com/u/Aleebster)\
**Post date:** [January 14, 2023, 4:30am UTC](https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334/4 "2023-01-14T04:30:47Z")

</div>

Thank you Patrick! You are a gentleman and a scholar 😁  
I have spent way too much time trying to fix this!

---

<div class="post-metadata">

**Author:** ![vx9](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vx9/32/28120_2.png) [@vx9](https://forum.babylonjs.com/u/vx9)\
**Post date:** [February 13, 2023, 8:54am UTC](https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334/5 "2023-02-13T08:54:26Z")

</div>

This is great! I am trying to do something like this too, but I want it so it can push just once and not loop.

I almost have it working, but after several repeated pushes, the blending back to the idle seems to loose it’s smoothness and “snap back”.

Is there any way to fix this?

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

---

<div class="post-metadata">

**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\
**Post date:** [February 13, 2023, 10:45pm UTC](https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334/6 "2023-02-13T22:45:05Z")

</div>

@vx9, I reworked the scene a bit to make it easier to manage clips and how they loop or path to the next animation. You can see in the [reworked playground that I revised the `changeAnimation` function](https://playground.babylonjs.com/#P5HRK2#94). Some of the issue you were running into were that the variable you declared named “done” was undefined, and was causing some issues when testing the value.

You also are adding an observable every time you click the button. The observable list was growing with each click. Using `addOnce` takes care of this since you want to abstract the call to play a new animation without bloating the observable list. Using `addOnce` will add the observable and once it gets used, it is removed from the list.

Some of the issues you were having stemmed from managing clips that had different needs for looping and for pathing to another animation. To help organize this data and remove some of the management of the `changeAnimation` function from managing what clips have what parameters, I set up objects for each animation. This helps you by keeping all the pertinent parameters for each animation clip together in one place. The object holds the animation group to play, the value for loop, and the next animation - if any - to play. Additionally, the next animation parameter holds an array of objects so you could randomly choose between different idle animations for example. And if the next animation array is empty, it will not add the observable and will just continue to loop.

Lastly, calling the `changeAnimation` function again in the `onAnimationEndObservable` rather than using `group.play()` allows more flexibility as you can then path many animations in sequence. Since the group that is playing has it’s own information about the next group to play, each one can path to a new group meaning it will work for a sequence of any size.

I hope this helps unblock you, but ping back with any additional questions.

---

<div class="post-metadata">

**Author:** ![vx9](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vx9/32/28120_2.png) [@vx9](https://forum.babylonjs.com/u/vx9)\
**Post date:** [February 14, 2023, 1:44pm UTC](https://forum.babylonjs.com/t/animation-group-blending-with-glb-file/37334/7 "2023-02-14T13:44:56Z")

</div>

Thank you! This is amazing.
