How To

Group Animations

How To Group 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

var animationGroup1 = new BABYLON.AnimationGroup("Group1");
var 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.

Playground Example 1 - Animation Group -

Playground Example 2 - Animation Group -

Playground Example 3 - Animation Group -

Speed Ratio for the Group

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

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

speeding up or slowing down the animation.

Playground Example - Group Speed Ratio -

On Group Animation End

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

    mesh2.material = redMaterial;

Playground Example - On Group Animation End -

Further Reading


Introduction to Animating


A Sequence of Animations
Combining Animations