Grouping Animations

An AnimationGroup allows you to link together animations and meshes and play them, pause them and stop them as a group.

Forming a Group

Following the tutorial for creating an animation set up one or more animations.

For example having created animation1, animation2 and animation3 and also meshes mesh1, mesh2, mesh3 and mesh4 you can form the following animation groups

const animationGroup1 = new BABYLON.AnimationGroup("Group1");
const animationGroup2 = new BABYLON.AnimationGroup("Group2");

and then use the addTargetedAnimation method to link the animations with the meshes and add these to the groups

animationGroup1.addTargetedAnimation(animation1, mesh1);
animationGroup1.addTargetedAnimation(animation3, mesh1);
animationGroup1.addTargetedAnimation(animation2, mesh2);
animationGroup2.addTargetedAnimation(animation2, mesh3);
animationGroup2.addTargetedAnimation(animation1, mesh4);
animationGroup2.addTargetedAnimation(animation2, mesh4);
animationGroup2.addTargetedAnimation(animation3, mesh4);

As the animations may have been created with differing timelines and these have to be aligned using normalize

Normalize a Group

It may be that animation1, animation2 and animation3 have all been created using different numbers of frames. For instance animation1 may go from frame 0 to frame 80, animation2 from frame 0 to 75 and animation3 from frame 0 to frame 100. You can use the normalize method to make the number of frames the same for all animations, as in

animationGroup2.normalize(0, 100);

In general the parameters for normalize are the numbers beginFrame and endFrame.

The beginFrame number must be less than or equal to the smallest begin frame of all animations, for the above examples not greater than 0.
The endFrame number must be greater than or equal to the largest end frame of all animations, for the above examples not less than 100.

Speed Ratio for the Group

The speedRatio for all animations in the group can be set, for example

animationGroup1.speedRatio = 0.25;
animationGroup2.speedRatio = 3;

speeding up or slowing down the animation.

Creating a group from existing animatables

You can create a new AnimationGroup from an animatable by enumerating the animations contained in the animatable:

const animationGroup = new BABYLON.AnimationGroup("my-animation-group");
for (anim of idleAnim.getAnimations()) {

Example: - Create AnimationGroup From Animatable

On Group Animation End

There is an onAnimationEnd observable that can be used to trigger a function when the animation ends.

animationGroup1.onAnimationEndObservable.add(function () {
mesh2.material = redMaterial;

On Group Animation Loop

There is an onAnimationLoop observable that can be used to trigger a function when the animation loops.

animationGroup1.onAnimationLoopObservable.add(function (targetAnimation) {

There is also an onAnimationGroupLoop observable that can be used to trigger a function when all the animation of the group have looped:

animationGroup1.onAnimationGroupLoopObservable.add(function (group) {
console.log("Group looped!");

Related videos