# Combining Animations

> Learn how to combine animations together.

Source: https://doc.babylonjs.com/features/featuresDeepDive/animation/combineAnimations

## How To Combine Animations

### Concurrent

Simply set up more animations and add them to the Babylon.js object's animations array.

For example, adding a rotation animation to the very simple slide animation to get:

- [Playground: Simple Slide Animation](https://playground.babylonjs.com/#9WUJN#11) - The simple slide animation example.

### Slide and Rotate

```javascript
const yRot = new BABYLON.Animation("yRot", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const 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: Slide and Rotate Animation](https://playground.babylonjs.com/#9WUJN#12) - The simple slide animation with rotation introduced.

### Slide and Faster Rotation Rate

Changing the rotation values to larger numbers increases the rotation rate.

```javascript
const yRot = new BABYLON.Animation("yRot", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const 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: Slide with Faster Rotation](https://playground.babylonjs.com/#9WUJN#13) - The simple slide animation with faster rotation.

### Slide and Varying Rotation Rate

Changing the second key frame position to closer to the end of the frame range gives a varying rotation rate.

```javascript
const yRot = new BABYLON.Animation("yRot", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const 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: Slide with Varying Rotation Rate](https://playground.babylonjs.com/#9WUJN#14) - The simple slide animation with varying rotation rates.

## Consecutive Animations

In order to have one animation follow another, a further parameter needs to be added to the `beginDirectAnimation` function. This parameter is itself a function to be called when the animation started by `beginDirectAnimation` ends.

In fact, two new parameters are needed because the function to be called is the sixth parameter, so the fifth parameter position also needs to be filled.

### beginDirectAnimation and Parameters

scene.beginDirectAnimation(target, animations, start frame, end frame, loop, speed, on animation end);

- _target_ - _BabylonJS Object_, the Babylon.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 changes to the slide and rotate example

In the first example the box rotates for 5 seconds then goes into a looped slide.

The changes to `beginDirectAnimation` are that looping becomes false, the speed remains the default 1, and the `nextAnimation` function is called when the first animation ends.

```javascript
scene.beginDirectAnimation(box, [yRot], 0, 2 * frameRate, false, 1, nextAnimation);
```

The additional function added before this is

```javascript
const nextAnimation = function () {
  scene.beginDirectAnimation(box, [xSlide], 0, 2 * frameRate, true);
};
```

- [Playground: Rotate Then Slide](https://playground.babylonjs.com/#9WUJN#15) - The simple slide animation with rotation happening first, then sliding.

In the second example, the rotation continues as the box goes into a looped slide.

```javascript
const nextAnimation = function () {
  scene.beginDirectAnimation(box, [yRot, xSlide], 0, 2 * frameRate, true);
};
```

- [Playground: Rotate Then Rotate and Slide](https://playground.babylonjs.com/#9WUJN#16) - The simple slide animation with rotation happening first, then rotation and sliding.