
## Animations and promises
Starting with Babylon.js v3.3, you can use promises to wait for an animatable to end:

```
var anim = scene.beginAnimation(box1, 0, 100, false);

console.log("before");
await anim.waitAsync();
console.log("after");
```

You can find an example here: <Playground id="#HZBCXR" title="Animation End Promise Example" description="An example of waiting for the animation end with promises." image="/img/playgroundsAndNMEs/divingDeeperAdvancedAnimation1.jpg"/>  

## Controlling animations

Each Animation has a property called ```currentFrame``` that indicates the current animation key.

For advanced keyframe animation, you can also define the functions used to interpolate (transition) between keys. By default these functions are the following:

```javascript
BABYLON.Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
  return startValue + (endValue - startValue) * gradient;
};

BABYLON.Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
  return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
};

BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
  return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
};
```

Here is the list of functions that you can change:

* floatInterpolateFunction
* quaternionInterpolateFunction
* quaternionInterpolateFunctionWithTangents
* vector3InterpolateFunction
* vector3InterpolateFunctionWithTangents
* vector2InterpolateFunction
* vector2InterpolateFunctionWithTangents
* sizeInterpolateFunction
* color3InterpolateFunction
* matrixInterpolateFunction

## Helper function

You can use an extended function to create a quick animation:

```javascript
Animation.CreateAndStartAnimation = function(name, mesh, targetProperty, framePerSecond, totalFrame, from, to, loopMode);
```

To be able to use this function, you need to know that :
- Your animation will have predefined key frames (Only 2 keyframes are generated : **Start** and **End**)
- The animation works only on **AbstractMesh** objects.
- The animation is starting right after the method call.

Here is a straightforward sample using the **CreateAndStartAnimation()** function :

```javascript
BABYLON.Animation.CreateAndStartAnimation('boxscale', box1, 'scaling.x', 30, 120, 1.0, 1.5);
```
Fast and easy. :)

## Animation blending

You can start an animation with *enableBlending* = true to enable blending mode. This blended animation will interpolate FROM the current object's state. This would be handy for user-controlled walking characters, or reacting to value changes from an input device. 

In the playground demo below, every time you click on the FPS marker, the new animation is blended with the box's current position: <Playground id="#2BLI9T#368" title="Click to Blend" description="Click on a box to blend a new animation with it's current position" image="/img/playgroundsAndNMEs/divingDeeperAdvancedAnimation1.jpg"/>

Although this playground is blending the same animation into itself, more often, a different animation will be blended-into the original, such as when a walking character changes to running: <Playground id="#IQN716#9" title="Blending Animations Together" description="Example of blending animations with other animations." image="/img/playgroundsAndNMEs/divingDeeperAdvancedAnimation2.jpg"/>

## Animation weights

Starting with Babylon.js 3.2, you can start animations with a specific weight. This means that you can use this API to run multiple animations simultaneously on the same target. The final value will be a mix of all animations weighted based on their weight value.

To start an animation with a weight, you can use the new `scene.beginWeightedAnimation` API:

```
// Will have a weight of 1.0
var idleAnim = scene.beginWeightedAnimation(skeleton, 0, 89, 1.0, true);
// Will have a weight of 0
var walkAnim = scene.beginWeightedAnimation(skeleton, 90, 124, 0, true);
// Will have a weight of 0
var runAnim = scene.beginWeightedAnimation(skeleton, 125, 146, 0, true);
```

This function accepts the following parameters:

| Name | Type | Description | Optional |
|---|---|---|---|
| target | any | The target | No
| from | number | The fps starting frame | No
| to | number | The fps ending frame | No
| weight | number | Weight of this animation. 1.0 by default | Yes
| loop | boolean | If true, the animation will loop (dependent upon BABYLON.Animation.ANIMATIONLOOPMODE) | Yes
| speedRatio | number | default : 1. The speed ratio of this animation | Yes
| onAnimationEnd | () => void | The function triggered on the end of the animation, even if the animation is manually stopped (also dependent upon ANIMATIONLOOPMODE) | Yes
| animatable | Animatable | An optional specific animation | Yes

Like `beginAnimation`, this function returns an animatable but this time with its `weight` property set to a value.

You can also set the `weight` value of any Animatable at any time to switch to a weighted mode. This value has to be between 0 and 1. 
In a same way, you can set it to -1 to turn the weight mode off. If you set the weight to 0, the animation will be considered paused.


```
var idleAnim = scene.beginWeightedAnimation(skeleton, 0, 89, 1.0, true);
var runAnim = scene.beginWeightedAnimation(skeleton, 125, 146, 0, true);

idleAnim.weight = 0.5;
runAnim.weight = 0.5
```

If your animations are not of the same size (same distance between from and to keys) then you will need to turn animation synchronization on with the following code:

```
// Synchronize animations
idleAnim.syncWith(runAnim);		
```

To disable animation synchronization, just call `animation.syncWith(null)`.

A complete demo can be find here: <Playground id="#IQN716#9" title="Animation Weights Example" description="Simple example of animation weights." image=""/>

## Additive animation blending
So far the type of animation blending we've gone over has been override blending. This means that adding influence to an animation takes influence away from other animations that are playing. The result is always normalized, so the more animations playing at the same time, the smaller amount of influence each individual animation has over the final result. All of the keyframes in override animations are stored relative to the object's parent. Say for example you have an object with 2 override animations. The first animation has a translation value of [0, 0, 0] at frame 0, then it interpolates to [0, 2, 0] on frame 30, then back to [0, 0, 0] on frame 60. The second animation has a translation value of [0, 0, 0] at frame 0, interpolates to [0, 0, 2] on frame 30, and then back to [0, 0, 0] on frame 60. If you played these animations simultaneously at full weight, frame 30 would result in a translation value of [0, 1, 1]. Neither the Y or Z axes would ever be able to fully reach a value of 2 with both animations playing. This behavior works great for transitioning between animations, like blending from a walk to a run, but what if you want the motions to build on top of each other? This is where additive animation becomes useful.

Additive animation is unique because it does not use that type of normalization logic. You can have N-number of additive animations playing simultaneously and each one will have the exact amount of influence specified. To accomplish this, additive animation values are relative to the current result of the override animations, not the parent. So if the second animation in the example above were to be played additively, frame 30 would result in a value of [0, 2, 2] because the second animation’s value adds on top of the first.

There are a few ways you can specify that you want an animation to be evaluated additively. First, an optional boolean `isAdditive` parameter has been added to all of the Scene methods for beginning animations. Check the [Scene API documentation](/api/classes/babylon.scene) to see the most up to date parameter lists for each method. This parameter is false by default and will set the new boolean `isAdditive` property of the resulting [Animatable](/api/classes/babylon.animatable#isadditive). This `isAdditive` property controls whether the Animatable should be evaluated additively and can be changed at any time. [AnimationGroups](/api/classes/babylon.animationgroup#isadditive) also now have an `isAdditive` accessor which is false by default. Setting this accessor will set the `isAdditive` properties of all of the Animatables controlled by the group.

One issue with additive animations is the problem of authoring for hierarchies. Because additive animations are evaluated relative to the result of other animations rather than the object's parent, it is not very intuitive to create them directly. To ease this burden, static `MakeAnimationAdditive` methods have been added to the [AnimationGroup](/api/classes/babylon.animationgroup#makeanimationadditive), [Skeleton](/api/classes/babylon.skeleton#makeanimationadditive) and [Animation](/api/classes/babylon.animation#makeanimationadditive) classes. These methods allow you to specify a frame in an existing animation and subtract it out of the rest of the keyframes in the animation to make them all relative to that specific pose.

The following example demonstrates how to convert animations to additive and blend them on top of override animations. The UI buttons allow you to blend between several override animations and the sliders blend in additive animations on top.
<Playground id="#6I67BL#2" title="Additive Animation Example" description="Demo of converting animations to additive and blending them on top of override animations." image="/img/playgroundsAndNMEs/divingDeeperAdvancedAnimation3.jpg"/>

## Overriding properties
When you have a mesh with multiple animations or a skeleton (where all bones can be animated) you can use an animationPropertiesOverride to specify some general properties for all child animations. These properties will override local animation properties:

```
var overrides = new BABYLON.AnimationPropertiesOverride();

overrides.enableBlending = true;
overrides.blendingSpeed = 0.1;

skeleton.animationPropertiesOverride = overrides;
```

Here is the list of properties that can be overridden:
* enableBlending
* blendingSpeed
* loopMode

Please note that the scene.animationPropertiesOverride will be used if animation target does not contain one.

## Easing functions

You can add some behaviors to your animations, using easing functions. 
If you want more information about easing functions, here are some useful links : 
- [MSDN Easing functions documentation](https://msdn.microsoft.com/en-us/library/ee308751.aspx)
- [Easing functions cheat sheet](https://easings.net)

All those easing functions are implemented in BABYLON, allowing you to apply custom mathematical formulas to your animations.

Here are the predefined easing functions you can use : 
- ```BABYLON.CircleEase()```
- ```BABYLON.BackEase(amplitude)```
- ```BABYLON.BounceEase(bounces, bounciness)```
- ```BABYLON.CubicEase()```
- ```BABYLON.ElasticEase(oscillations, springiness)```
- ```BABYLON.ExponentialEase(exponent)```
- ```BABYLON.PowerEase(power)```
- ```BABYLON.QuadraticEase()```
- ```BABYLON.QuarticEase()```
- ```BABYLON.QuinticEase()```
- ```BABYLON.SineEase()```
- ```BABYLON.BezierCurveEase()```

You can use the **EasingMode** property to alter how the easing function behaves, that is, change how the animation interpolates. 
There are three possible values you can give for EasingMode: 

- ```BABYLON.EasingFunction.EASINGMODE_EASEIN``` : Interpolation follows the mathematical formula associated with the easing function.
- ```BABYLON.EasingFunction.EASINGMODE_EASEOUT``` : Interpolation follows 100% interpolation minus the output of the formula associated with the easing function.
- ```BABYLON.EasingFunction.EASINGMODE_EASEINOUT``` : Interpolation uses EaseIn for the first half of the animation and EaseOut for the second half.

Here is a straightforward sample to animate a torus within a ```CircleEase``` easing function :

```javascript
//Create a Vector3 animation at 30 FPS
var animationTorus = new BABYLON.Animation("torusEasingAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

// the torus destination position
var nextPos = torus.position.add(new BABYLON.Vector3(-80, 0, 0));

// Animation keys
var keysTorus = [];
keysTorus.push({ frame: 0, value: torus.position });
keysTorus.push({ frame: 120, value: nextPos });
animationTorus.setKeys(keysTorus);

// Creating an easing function
var easingFunction = new BABYLON.CircleEase();

// For each easing function, you can choose between EASEIN (default), EASEOUT, EASEINOUT
easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

// Adding the easing function to the animation
animationTorus.setEasingFunction(easingFunction);

// Adding animation to my torus animations collection
torus.animations.push(animationTorus);

//Finally, launch animations on torus, from key 0 to key 120 with loop activated
scene.beginAnimation(torus, 0, 120, true);
```

You can play with bezier curve algorithm too, using the **BezierCurveEase(x1, y1, x2, y2)** function. 
For purpose, here is a good reference to create your curve algorithm : [http://cubic-bezier.com](http://cubic-bezier.com)

Here is a pretty cool implementation using the bezier curve algorithm :

![](/img/how_to/Animations/bezier.jpg)

```javascript
var bezierEase = new BABYLON.BezierCurveEase(0.32, -0.73, 0.69, 1.59);
```

Finally, you can extend the **EasingFunction** base function to create your own easing function, like this :

```javascript
var FunnyEase = (function (_super) {
  __extends(FunnyEase, _super);
  function FunnyEase() {
    _super.apply(this, arguments);
  ;}
  FunnyEase.prototype.easeInCore = function (gradient) {
    // Here is the core method you should change to make your own Easing Function
    // Gradient is the percent of value change
    return Math.pow(Math.pow(gradient, 4), gradient);

  };
  return FunnyEase;
})(BABYLON.EasingFunction);
```
You will find a complete demonstration of the easing functions behaviors, in this playground: <Playground id="#8ZNVGR" title="Easing Behavior Examples" description="Examples of the easing functions available." image="/img/playgroundsAndNMEs/divingDeeperAdvancedAnimation4.jpg"/>



## Attach events to animations

From Babylon.js version 2.3, you can attach [animation events](/typedoc/classes/babylon.animationevent) to specific frames on an animation.

An event is a function that will be called at a given frame.

It's very simple to do this:
```javascript
// 3 parameters to create an event:
// - The frame at which the event will be triggered
// - The action to execute
// - A boolean if the event should execute only once (false by default)
var event1 = new BABYLON.AnimationEvent(50, function() { console.log("Yeah!"); }, true);
// Attach your event to your animation
animation.addEvent(event1);
```

## Deterministic lockstep
Sometimes it is important to make sure animations, physics and game logic code are in sync and decoupled by frame-rate variance. This might be useful to be able to replay how a scene evolved, given the same initial condition and inputs, or to minimize differences on multiple clients in a multi-user environment.

The principle is to quantize the state execution time, by updating the state at a fixed frequency with discrete time steps, keeping an accumulator so to carry over exceeding time to the next frame update.

To achieve this, Babylon engine needs to be created passing the following two options:

```javascript
this.engine = new BABYLON.Engine(theCanvas, true, {
  deterministicLockstep: true,
  lockstepMaxSteps: 4
});
```
This way, the scene will render quantizing physics and animation steps by discrete chunks of the timeStep amount, as set in the physics engine. For example:
```javascript
var physEngine = new BABYLON.CannonJSPlugin(false);
newScene.enablePhysics(this.gravity, physEngine);
physEngine.setTimeStep(1/60);
```
With the code above, the engine will run discrete steps at 60Hz (0.01666667s) and, in case of a late frame render time, it will try to calculate a maximum of 4 steps (lockstepMaxSteps) to recover eventual accumulated delay, before rendering the frame.

Note that when explicitly creating the CannonJSPlugin, it is important to pass false as _useDeltaForWorldStep parameter in its constructor, to disable CannonJS internal accumulator.

To run logic code in sync with the steps, there are the two following observables on the scene:

```javascript
newScene.onBeforeStepObservable.add(function(theScene){
  console.log("Performing game logic, BEFORE animations and physics for stepId: "+theScene.getStepId());
});

newScene.onAfterStepObservable.add(function(theScene){
  console.log("Performing game logic, AFTER animations and physics for stepId: "+theScene.getStepId());
});
```
Using them allows running arbitrary logic code before and after animations and physics are updated.

In the following example, you can see in the console the stepId in which the sphere is considered at rest and the rotation value for the rotating box. Multiple runs will always result in the same values, whatever the frame-rate.

<Playground id="#DU4FPJ#3" title="Logging stepId For Sphere at Rest" description="Console logging of the stepId in which a sphere is considered at rest and the rotation value for a rotating box." image="/img/playgroundsAndNMEs/divingDeeperAdvancedAnimation5.jpg"/>




This "How To" goes over an end to end workflow from creating a character in Blender, adding animations to it with [**Mixamo**](http://www.mixamo.com) and combining them into a single model, to controlling the movement of the animated character with the keyboard.

## Detailed workflow

There are of course different tools and possible workflows to create an animated model that can be used in a Babylon.js project. Below is the detailed workflow of this How To:
- Use Blender to create the model
- Export the model as .FBX
- Load the model in Mixamo to rig it and add animations
- Download animated models as .FBX files
- Use Blender to combine the animated models into one
- Export as .GLB (animation as Animation Group)
- Load the .GLB in a Babylon.js Playground and control the model movement via keyboard


## Create a character with animation

The first step is to create a character (a low poly character in this example). It usually involves starting from the 2D drawing of a character and then model it in 3D from head to toes. This is a quite long but fun experience. [**Blender**](https://www.blender.org) can be used to model a low poly character such as in Grant Abbitt's Low-Poly anime girl tutorial: 

<Youtube id="E5HnnGcGvmc"/>

![Create Character in Blender](/img/how_to/animatedCharact/createCharact.jpg)

Once done with the creation of the model, the next step is to bring it to life by adding animations. The easy way to animate a character is with [**Mixamo**](https://www.mixamo.com). Grant Abbit goes over it in details in this video.

<Youtube id="k-ZeLNV4zPw"/>

 It involves going through the following:
- In Blender, export the model as an .FBX file and upload it on Mixamo
- In Mixamo, start with auto-rigging the model: after mapping key points of the model (e.g. chin, wrist, elbows etc… ), a rigging algorithm creates the skeleton onto which the animations will be applied

![Rig Character in Mixamo](/img/how_to/animatedCharact/rigCharact.jpg)

- Then pick an animation, "Walk" for instance,  and download the result as a .FBX file

![Anim Character in Mixamo](/img/how_to/animatedCharact/animCharact.jpg)


## Add and combine several animations into a character

As several animations are needed for a character (e.g. Idle, Walk, Walk backwards, etc…), the previous step of exporting an animation into a FBX file must be done for each animation (animation packs, such as "Basic Locomotion Pack", are available but they are just a zip with many .FBX files). 

The key step to finish the character is to combine the animations, each contained in a .FBX file, into a unique model with several animations. Ben Rigby has a very simple tutorial for it here: 

<Youtube id="9EWJhqPafpk"/>

It involves importing all the FBX files into an empty Blender project making sure to rename the loaded animations,  displaying the Non-linear Animation tool, deleting the duplicate objects and adding an actions strip for each animation.  

The result is exported as a .GLB file and the animation information can be seen by drag and dropping the file in the [**Sandbox**](https://sandbox.babylonjs.com/) as Animation Groups (the .GLB file example is available [**here**](https://assets.babylonjs.com/meshes/HVGirl.glb)).

![View Character in Sandbox](/img/how_to/animatedCharact/viewCharact.jpg)

## Control the movement of the animated character with the keyboard

### Import the model and play animation

The model can be loaded using the [**ImportMesh**](/api/classes/babylon.sceneloader#importmesh) method of the SceneLoader class and making sure to add the animationGroups parameter as it is used to get and play the animations.

```javascript
BABYLON.SceneLoader.ImportMesh("", "https://assets.babylonjs.com/meshes/", "HVGirl.glb", scene, function (newMeshes, particleSystems, skeletons, animationGroups) {
    var hero = newMeshes[0];

    //Scale the model down        
    hero.scaling.scaleInPlace(0.1);

    //Lock camera on the character 
    camera1.target = hero;

    //Get the Samba animation Group
    const sambaAnim = scene.getAnimationGroupByName("Samba");

    //Play the Samba animation  
    sambaAnim.start(true, 1.0, sambaAnim.from, sambaAnim.to, false);

});
```
<Playground id="#Z6SWJU#5" title="Load Model and Play Animation Group" description="Simple example of loading an object and playing the animation groups tha come with it." image="/img/playgroundsAndNMEs/divingDeeperAnimatedCharacter1.jpg"/>


The names of the AnimationGroups can be found in the Sandbox via the Inspector, by loading the model and selecting the Animation Group in the Scene Explorer.

![View animation info](/img/how_to/animatedCharact/viewAnim.jpg)

By default the animationGroups[0] is played when loading a model with an animation Group. To stop it: 

```javascript
animationGroups[0].stop();
```

### Control animations via keyboard

The [**Action Manager**](/divingDeeper/events/actions) can be used to capture the keys pressed on the keyboard:

```javascript
var inputMap = {};
scene.actionManager = new BABYLON.ActionManager(scene);
scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) {
    inputMap[evt.sourceEvent.key] = evt.sourceEvent.type == "keydown";
}));
scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) {
    inputMap[evt.sourceEvent.key] = evt.sourceEvent.type == "keydown";
}));
```

Then in the rendering loop, which is executed every frame, the position and direction of the hero character are updated:

```javascript
if (inputMap["w"]) {
    hero.moveWithCollisions(hero.forward.scaleInPlace(heroSpeed));
    keydown = true;
}
if (inputMap["s"]) {
    hero.moveWithCollisions(hero.forward.scaleInPlace(-heroSpeedBackwards));
    keydown = true;
}
if (inputMap["a"]) {
    hero.rotate(BABYLON.Vector3.Up(), -heroRotationSpeed);
    keydown = true;
}
if (inputMap["d"]) {
    hero.rotate(BABYLON.Vector3.Up(), heroRotationSpeed);
    keydown = true;
}
if (inputMap["b"]) {
    keydown = true;
}
```

And also the relevant animation are played:

```javascript
if (keydown) {
    if (!animating) {
        animating = true;
        if (inputMap["s"]) {
            //Walk backwards
            walkBackAnim.start(true, 1.0, walkBackAnim.from, walkBackAnim.to, false);
        }
        else if
            (inputMap["b"]) {
            //Samba!
            sambaAnim.start(true, 1.0, sambaAnim.from, sambaAnim.to, false);
        }
        else {
            //Walk
            walkAnim.start(true, 1.0, walkAnim.from, walkAnim.to, false);
        }
    }
}
```

<Playground id="#AHQEIB#17" title="Load a Character with Keyboard Control" description="Load a character and control it's animations with the keyboard." image="/img/playgroundsAndNMEs/divingDeeperAnimatedCharacter2.jpg"/>

This simple example can be enhanced:
- By adding a more robust logic to manage the details of selecting multiple keys and combining them
- By using the [**Device Source Manager**](/divingDeeper/input/deviceSourceManager) instead of the Action Manager for key presses
- With [**animation blending**](/divingDeeper/animation/advanced_animations#animation-blending) to ensure much more natural transitions between animations


## Designing a Clip

The first step is to decide what you want to see in a _clip_, that is what is the _performance_ to be. This gives the performer and its animation.

In this _game clip_ a box, the _performer_, is to slide between two places once every second. The box will be able to be viewed from any angle.

The first stage design is to sketch what is needed at key time points, a little like an animated gif design.

![key frames](/img/features/animation/ani1.jpg)

After one second the box should be in its new position and one second later in its start position. This sequence is then continually repeated.

In Babylon.js the _Animation_ is changing the position of the box along the x axis and its x position is a floating point number and

the _animation_ should loop. In code the animation which slides an item in the x direction becomes

```javascript
const frameRate = 10;

const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
```

The key frames are at 0, 1 and 2 seconds. To find the frame number after t seconds multiply the time by the frame rate, i.e. t x frameRate.  
In this case the key frames are at frame numbers, 0, 1 x frameRate and 2 x frame Rate.

Starting the box at x = 2 and sliding it to x = -2, gives the x positional values of the box after 0, 1 and 2 seconds as 2, -2 and 2 respectively.

The key frames are set into an array of JavaScript objects with properties for frame (number) and value and added to the animation, as in

```javascript
const keyFrames = [];

keyFrames.push({
    frame: 0,
    value: 2,
});

keyFrames.push({
    frame: frameRate,
    value: -2,
});

keyFrames.push({
    frame: 2 * frameRate,
    value: 2,
});

xSlide.setKeys(keyFrames);
```

The animation is now fully made and can be applied to the box 

```javascript
box.animations.push(xSlide);
```
The _performance_ (*Animatable*) is started with

```javascript
scene.beginAnimation(box, [xSlide], 0, 2 * frameRate, true);
```

You can see the result here  
<Playground id="#7V0Y1I" title="Basic Sliding Box Animation" description="An example of basic animation by sliding a box." image="/img/playgroundsAndNMEs/divingDeeperAnimationDesign1.jpg"/>



## An Introduction to Animation

However animation is achieved it has to take into account the action wanted, timing, the number of frames needed to produce the required fluidity and key points within the sequence. To help understand how BabylonJS goes about animation how animation is achieved.

Animations are produced by a sequence of images, _frames_, which are displayed one after the other. This sequence of _frames_ can be individual drawings or for, stop motion animation, photographs of models that are moved slightly frame by frame

![Horse - Frames](/img/features/animation/horse_frames.jpg)

![Horse Animation](/img/features/animation/Horse_gif_slow.gif) from [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Horse_gif_slow.gif)


During the design stage the creator will need to consider how long a sequence should take and how smooth it needs to be. The smoother the movement the more frames are required. Once the number of frames is known then the animation frames per second can be found. Also knowing the object's start position and end position and how many frames are required will determine the object's movement per frame.

In BabylonJS, as in stop motion animation, individual objects have to be moved one by. Whereas we might talk about the overall finished piece as an animation in Babylon.js an _Animation_ is also a specific object that details a transformation, timing and looping that can then be applied to any mesh, camera or light. To this data is added values at key frames from which Babylon.js calculates the transformations to take place for the in between frames.

## Terminology Used in the Animation Documentation

The following terms will have the given meaning within the How_To about animating.

-   _Performer_ an item that can be animated, could be a mesh, a light or camera for example.

-   _Frame_ - an animation frame not a rendered frame of the scene.

-   _Animation_ - similar to a play or film script but applies to just one property of a performer. It consists of

    -   the property to be changed, for example, position, intensity or rotation
    -   the rate of change of the property in frames per second,
    -   the type of the property being changed, for example vector, floating point number or matrix,
    -   looping conditions,
    -   key values of the property at key frames.

-   _Scripted Performer_ - The performer plus all the animations to be undertaken by the performer.

-   _Performance_ - The scripted performer and the actions done by the performer following the script. In BabylonJS this is the _animatable_ object.

-   _Clip_ - The viewable result of a performance. In practice there are two types of _clip_ a
    _game clip_ and a _movie clip_. In a _movie clip_ the user has no control over the camera and the _clip_ is viewed according to the _animation_ of the camera  as set by the creator of the _clip_. In a _game clip_ the user is able to move the camera as determined by the type of camera used in the scene. Unless it is likely to cause any confusion just the term _clip_ will be used throughout the documentation when writing about animating.

-   _Cartoon_ - A series of _clips_ played at timed intervals.


# The Animation Method

## Creating the animation
```javascript
const myAnim = new BABYLON.Animation(name, property, frames per second, property type, loop mode)
```
-   _name_ - _string_, name of animation

-   _property_ - _string_, a property of the object that the animation will be applied to. For example a Vector3 property such as position or a floating number property such as position.x

-   _frames per second_ - _number_, the number of animation frames per second (independent of the scene rendering frames per second)

-   _property type_ - _number_, the property type of the _property_ parameter. This can be set using the following constants

    BABYLON.Animation.ANIMATIONTYPE_COLOR3  
    BABYLON.Animation.ANIMATIONTYPE_FLOAT  
    BABYLON.Animation.ANIMATIONTYPE_MATRIX  
    BABYLON.Animation.ANIMATIONTYPE_QUATERNION  
    BABYLON.Animation.ANIMATIONTYPE_VECTOR2  
    BABYLON.Animation.ANIMATIONTYPE_VECTOR3

-   _loop mode_ - _number optional_, This can be set using the following Parameters

    BABYLON.Animation.ANIMATIONLOOPMODE*CYCLE - Restart the animation from initial value  
    BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT - Pause the animation at the final value  
    BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE - Repeat the animation incrementing using key value gradients. In this way, for example, a \_clip* showing a character's legs in a walking motion can be looped to show the character progressing across the scene.

## Set Key Frames
This is an array, *myKeys* of objects. Each object having the two properties 

- _frame_ - the frame number
- _value_ - for the property being changed

Once constructed this is added to the animation

```javascript
myAnim.setKeys(myKeys);
```

## Beginning The Animation

To run the animation it is pushed onto the *animations* array property of the mesh

```javascript
mesh.animations.push(myAnim)
```

and started with these required parameters
```javascript
scene.beginAnimation(target, from, to);
```

-   _target_ - _BabylonJS Object_, the BabylonJS object to be animated
-   _from_ - _number_, the frame at which to start the animation
-   _end frame_ - _number_, the frame at which to end the animation


When you want the animation to loop you and true as the fourth parameter
```javascript
scene.beginAnimation(target, from, to, true)
```

<Playground id="#7V0Y1I" title="Basic Sliding Box Animation" description="An example of basic animation by sliding a box." image="/img/playgroundsAndNMEs/divingDeeperAnimationDesign1.jpg"/>

The are a number of further optional parameters than you can find in the *scene* API

You can apply several animations to a target using
```javascript
scene.beginAnimation(target, animations, from, to, loop)
```

-   _target_ - _BabylonJS Object_, the BabylonJS object to be animated

-   _animations_ - _array_, of all the animations to apply to the target

-   _from_ - _number_, the frame at which to start the animation

-   _to_ - _number_, the frame at which to end the animation

-   _loop_ - _boolean_, optional, default *false*, when *true* repeats thee animation

Further optional parameters are available and can be found at the *scene* API

<Playground id="#7V0Y1I#1" title="Sliding Box Direct Animation" description="An example of sliding a box with direct animation." image="/img/playgroundsAndNMEs/divingDeeperAnimationDesign1.jpg"/> 

## Animatable

Both methods of starting an animation return an *Animatable* object 

```javascript
const myAnimatable = myscene.beginAnimation(target, from, to, true)
```

which supports the following methods

- _pause()_
- _restart()_
- _stop()_
- _reset()_

<Playground id="#7V0Y1I#2" title="Box animation stop after 5 secs" description="An example of stopping an animation after specific amount of time." image="/img/playgroundsAndNMEs/divingDeeperAnimationDesign1.jpg"/>  


## How To Combine Animations

### Concurrent

Simply set up more animations and add to the BabylonJS 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"/>

### 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 Rotatation" 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 Rotatation 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.beginAnimation(target, start frame, end frame, loop, speed, on animation end);

- _target_ - _BabylonJS Object_, the BabylonJS 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"/>





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](/divingDeeper/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." image="/img/playgroundsAndNMEs/divingDeeperAnimationGroup1.jpg"/>
- <Playground id="#CBGEQX#2" title="Animation Group Example 2" description="Second Example of Animation Groups." image="/img/playgroundsAndNMEs/divingDeeperAnimationGroup1.jpg"/>
- <Playground id="#CBGEQX#3" title="Animation Group Example 3" description="Third Example of Animation Groups." image="/img/playgroundsAndNMEs/divingDeeperAnimationGroup1.jpg"/>

## 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." image="/img/playgroundsAndNMEs/divingDeeperAnimationGroup2.jpg"/>

## 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." image="/img/playgroundsAndNMEs/divingDeeperAnimationGroup3.jpg"/>

## 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." image="/img/playgroundsAndNMEs/divingDeeperAnimationGroup1.jpg"/>

## 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 ahve looped:

```javascript
animationGroup1.onAnimationGroupLoopObservable.add(function(group) {
  console.log("Group looped!");
});
```


## Animation Using the Render Loop

Babylon.js allows to change an objects properties immediately before or after a frame is rendered. This is an alternative way of producing animation in a scene.
The complex animation lets you choose everything at each frame of the animation (each tick). The code computed at run time must be located in this function:
```javascript
scene.registerBeforeRender(function () {
  //Your code here
});
```

The function set by ```registerBeforeRender()``` is run before every frame (usually
~60 times per second) so animation is created by making small changes to object
properties very quickly.

A simple demonstration of complex animation can be found in the playground here:
<Playground id="#YJVTI6" title="Render Loop Animation Example" description="A simple example of animation using the scene's render loop." image="/img/playgroundsAndNMEs/divingDeeperRenderLoopAnimation1.jpg"/>

This function can be very useful for complex animation like games, where characters have to move depending on many parameters.

Don’t hesitate to combine all those types of animations. If well done, it’s very powerful.

Don't forget to [visit our API documentation](/typedoc) in order to learn more about the [**Babylon.js Animation**](/typedoc/classes/babylon.animation) and [**Babylon.js Animatable**](/typedoc/classes/babylon.animatable) classes.



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"/>


## Diving Deeper

We hope you have enjoyed splashing around in the Getting Started section and are now ready to plunge into understanding more of what is possible with Babylon.js. Looking for something specific and cannot find it within the navigation menu or landing page selections then head for the search bar and the results will cover the all the documentation including the API. Below shows you the surface of the vast ocean that is this intermediate section of Babylon.js, dive in to get a deeper understanding.

Animation

Animation

Coming next

Introduction to Animations

A deeper overview of animation and how to leverage it in Babylon.js.

Designing Animations

A deeper overview of animation and how to leverage it in Babylon.js.

The Animation Method

A description of the animation method and approach in Babylon.js.

Sequencing Animations

Learn how to sequence animations one after another.

Grouping Animations

Learn how to group animations together for easier management.

Combining Animations

Learn how to combine animations together.

Animating Characters

Learn how to animated Mixamo characters with input control.

Advanced Animation Methods

Dive into some deeper animation methods and techniques.

Animation Using the Render Loop

Understand how to animate objects with the scene's render loop.