
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](/features/featuresDeepDive/animation/animation_introduction) 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

```javascript
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

```javascript
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

```javascript
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 id="#CBGEQX#1" title="Animation Group Example 1" description="First Example of Animation Groups."/>
- <Playground id="#CBGEQX#858" title="Animation Group Example 2" description="Second Example of Animation Groups." isMain={true} category="Animation"/>
- <Playground id="#CBGEQX#3" title="Animation Group Example 3" description="Third Example of Animation Groups."/>

## Speed Ratio for the Group

The **speedRatio** for all animations in the group can be set, for example

```javascript
animationGroup1.speedRatio = 0.25;
animationGroup2.speedRatio = 3;
```

speeding up or slowing down the animation.

- <Playground id="#CBGEQX#5" title="Animation Group Speed Ratio" description="Example of adjust an animation group's speed ratio."/>

## Creating a group from existing animatables

You can create a new AnimationGroup from an animatable by enumerating the animations contained in the animatable:

```javascript
var animationGroup = new BABYLON.AnimationGroup("my-animation-group");

for (anim of idleAnim.getAnimations()) {
    animationGroup.addTargetedAnimation(anim.animation, anim.target);
}
```

Example: - <Playground id="#CBGEQX#5" title="Create AnimationGroup From Animatable" description="Example of creating an animationGroup by enumerating through the animations contained in an animatable."/>

## On Group Animation End

There is an **onAnimationEnd** observable that can be used to trigger a function when the animation ends.

```javascript
animationGroup1.onAnimationEndObservable.add(function() {
  mesh2.material = redMaterial;
});
```

- <Playground id="#CBGEQX#4" title="On Animation Group End" description="Example of executing code after all animations in an animationGroup finish."/>

## On Group Animation Loop

There is an **onAnimationLoop** observable that can be used to trigger a function when the animation loops.

```javascript
animationGroup1.onAnimationLoopObservable.add(function(targetAnimation) {
  console.log(targetAnimation.animation.name);
});
```

There is also an **onAnimationGroupLoop** observable that can be used to trigger a function when all the animation of the group have looped:

```javascript
animationGroup1.onAnimationGroupLoopObservable.add(function(group) {
  console.log("Group looped!");
});
```



## How To Combine Animations

### Concurrent

Simply set up more animations and add to theBabylon.js object's animations array.

For example adding a rotation animation to the very simple slide animtation to get:

<Playground id="#9WUJN#11" title="Simple Slide Animation" description="The simple slide animation example." image="/img/playgroundsAndNMEs/divingDeeperAnimationDesign1.jpg"/>

### Slide and Rotate

```javascript
var yRot = new BABYLON.Animation(
  "yRot",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

var keyFramesR = [];

keyFramesR.push({
  frame: 0,
  value: 0
});

keyFramesR.push({
  frame: frameRate,
  value: Math.PI
});

keyFramesR.push({
  frame: 2 * frameRate,
  value: 2 * Math.PI
});

yRot.setKeys(keyFramesR);
```

- <Playground id="#9WUJN#12" title="Slide and Rotate Animation" description="The simple slide animation with rotation introduced." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations1.jpg" isMain={true} category="Animation"/>

### Slide and Faster Rotation Rate

Changing the rotation values to larger numbers increases the rotation rate

```javascript
var yRot = new BABYLON.Animation(
  "yRot",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

var keyFramesR = [];

keyFramesR.push({
  frame: 0,
  value: 0
});

keyFramesR.push({
  frame: frameRate,
  value: 4 * Math.PI
});

keyFramesR.push({
  frame: 2 * frameRate,
  value: 8 * Math.PI
});

yRot.setKeys(keyFramesR);
```

- <Playground id="#9WUJN#13" title="Slide with Faster Rotation" description="The simple slide animation with faster rotation." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations1.jpg"/>

### Slide and Varying Rotation Rate

Changing the second key frame position to nearer the end of the frames gives a varying rotation rate.

```javascript
var yRot = new BABYLON.Animation(
  "yRot",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

var keyFramesR = [];

keyFramesR.push({
  frame: 0,
  value: 0
});

keyFramesR.push({
  frame: 1.5 * frameRate,
  value: 4 * Math.PI
});

keyFramesR.push({
  frame: 2 * frameRate,
  value: 8 * Math.PI
});

yRot.setKeys(keyFramesR);
```

- <Playground id="#9WUJN#14" title="Slide with Varying Rotation Rate" description="The simple slide animation with varying rotation rates." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations1.jpg"/>

## Consecutive Animations

In order to have one animation follow another then a further parameter needs to be added to the beginDirectAnimation function. This parameter is
itself a function to be called when the animation began by beginDirectAnimation is ended.

In fact two new parameters are needed since the function to be called is the sixth parameter and so the fifth parameter position needs to be filled.

### beginDirectAnimation and Parameters

scene.beginDirectAnimation(target, animations, start frame, end frame, loop, speed, on animation end);

- _target_ - _BabylonJS Object_, theBabylon.js object to be animated

- _animations_ - _array_, of all the animations to apply to the target

- _start frame_ - _number_, the frame at which to start the animation

- _end frame_ - _number_, the frame at which to end the animation

- _loop_ - _boolean : optional_, true when _loop mode_ of the animation is to be activated, false to run animation just once

- _speed_ - _number : optional_, default 1 matches animation frame rate, higher numbers speed up the animation, lower numbers slow it down

- _on animation end_ - _function : optional_, function called when animation ends, requires loop to be false

### Examples

The following are alterations to the slide and rotate example

In the first example the box rotates for 5 seconds then goes into a looped slide.

Code changes to beginDirectAnimation are looping becomes false, speed maintained as default 1, and the function nextAnimation is called as the first ends.

```javascript
scene.beginDirectAnimation(
  box,
  [yRot],
  0,
  2 * frameRate,
  false,
  1,
  nextAnimation
);
```

Additional function added before this is

```javascript
var nextAnimation = function() {
  scene.beginDirectAnimation(box, [xSlide], 0, 2 * frameRate, true);
};
```

- <Playground id="#9WUJN#15" title="Rotate Then Slide" description="The simple slide animation with rotation happening first, then sliding." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations2.jpg"/>

In the second example the rotation is continued as the box goes into a looped slide.

```javascript
var nextAnimation = function() {
  scene.beginDirectAnimation(box, [yRot, xSlide], 0, 2 * frameRate, true);
};
```

- <Playground id="#9WUJN#16" title="Rotate Then Rotate and Slide" description="The simple slide animation with rotation happening first, then rotation and sliding." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations2.jpg"/>





One straight forward method of combining a number of clips to form a cartoon is to give start times to each animation clip.

## Design

### Overview

The camera shows a building with a door. The camera moves closer to the door and stops. The door swings open and the camera enters the room. As the camera enters the room
lights come on in the room. The door closes and the camera sweeps around the room.

Since the aim is to show how the movie clip is made the room and door will be simply made with meshes with no textures.

### Performers

Camera - Universal  
Door - Hinged on right hand side, opening inwards  
Spot Lights - with spheres to show position

### Sequence Timetable

![Time Table](/img/how_to/Animations/seq1.jpg)

For each performer you create an animation with key points for each timed event.

### Animations

_For the Camera_  
Moving the camera changes the position (a vector3) of the camera. Sweeping the camera around is a rotation around the y axis (a float).

Since an animation can only change one property two animations are needed for the camera.

Moving the camera the key points will be at time 0 the camera will start away from the building and move towards and down until it is just outside the door at time 3 seconds.  
The camera will hold its position for 2 seconds as the door opens then at time 5 seconds will move forward into the room at an angle away from the door, stopping at time 8 seconds.

There will be no rotation of the camera for 9 seconds then camera will take until time 14 seconds to rotate 180 degrees to face the door.

Key values for the camera will be its positions at frames 0, 3, 5 and 8 seconds and its rotation at 0, 9 and 14 seconds.

```javascript
//for camera move forward
var movein = new BABYLON.Animation(
  "movein",
  "position",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
  BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
);

var movein_keys = [];

movein_keys.push({
  frame: 0,
  value: new BABYLON.Vector3(0, 5, -30)
});

movein_keys.push({
  frame: 3 * frameRate,
  value: new BABYLON.Vector3(0, 2, -10)
});

movein_keys.push({
  frame: 5 * frameRate,
  value: new BABYLON.Vector3(0, 2, -10)
});

movein_keys.push({
  frame: 8 * frameRate,
  value: new BABYLON.Vector3(-2, 2, 3)
});

movein.setKeys(movein_keys);

//for camera to sweep round
var rotate = new BABYLON.Animation(
  "rotate",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
);

var rotate_keys = [];

rotate_keys.push({
  frame: 0,
  value: 0
});

rotate_keys.push({
  frame: 9 * frameRate,
  value: 0
});

rotate_keys.push({
  frame: 14 * frameRate,
  value: Math.PI
});

rotate.setKeys(rotate_keys);
```

_For the door_  
The door will sweep around a hinge about the y axis a floatin point rotation. The opening and closing rotations will each take 2 seconds.

Key points will be a times 0, 3, 5, and 13 and 15 seconds.

Key values for the sweep will be its rotation about the y axis at frames.

```javascript
//for door to open and close
var sweep = new BABYLON.Animation(
  "sweep",
  "rotation.y",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
);

var sweep_keys = [];

sweep_keys.push({
  frame: 0,
  value: 0
});

sweep_keys.push({
  frame: 3 * frameRate,
  value: 0
});

sweep_keys.push({
  frame: 5 * frameRate,
  value: Math.PI / 3
});

sweep_keys.push({
  frame: 13 * frameRate,
  value: Math.PI / 3
});

sweep_keys.push({
  frame: 15 * frameRate,
  value: 0
});

sweep.setKeys(sweep_keys);
```

_For Lights_
The lights will vary in intensity (float). These will be an array of spot lights.

Key points for lights are remaining off for 7 seconds, coming to full intensity at 10 seconds which stays until going off at 14 seconds.

```javascript
//for light to brighten and dim
var lightDimmer = new BABYLON.Animation(
  "dimmer",
  "intensity",
  frameRate,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
);

var light_keys = [];

light_keys.push({
  frame: 0,
  value: 0
});

light_keys.push({
  frame: 7 * frameRate,
  value: 0
});

light_keys.push({
  frame: 10 * frameRate,
  value: 1
});

light_keys.push({
  frame: 14 * frameRate,
  value: 1
});

light_keys.push({
  frame: 15 * frameRate,
  value: 0
});

lightDimmer.setKeys(light_keys);
```

## Cartoon

Now just run all the clips simulaneously

```javascript
scene.beginDirectAnimation(camera, [movein, rotate], 0, 25 * frameRate, false);
scene.beginDirectAnimation(hinge, [sweep], 0, 25 * frameRate, false);
scene.beginDirectAnimation(
  spotLights[0],
  [lightDimmer],
  0,
  25 * frameRate,
  false
);
scene.beginDirectAnimation(
  spotLights[1],
  [lightDimmer.clone()],
  0,
  25 * frameRate,
  false
);
```

<Playground id="#2L26P1#8" title="Finished Animation Sequence Example" description="An example of sequencing animations one after another." image="/img/playgroundsAndNMEs/divingDeeperAnimationSequence.jpg"/>

Grouping Animations

Forming a Group

Normalize a Group

Speed Ratio for the Group

Creating a group from existing animatables

On Group Animation End

On Group Animation Loop

Related videos