
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 a 2D drawing of a character and then modeling it in 3D from head to toe. This is quite a 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.webp)

Once done with the creation of the model, the next step is to bring it to life by adding animations. An easy way to animate a character is with [**Mixamo**](https://www.mixamo.com). Grant Abbit goes over it in detail 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.webp)

- Then pick an animation, "Walk" for instance, and download the result as a .FBX file

![Anim Character in Mixamo](/img/how_to/animatedCharact/animCharact.webp)

## 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 an FBX file must be repeated 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, renaming the loaded animations, displaying the Non-linear Animation tool, deleting the duplicate objects, and adding an action strip for each animation.

The result is exported as a .GLB file and the animation information can be seen by dragging 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.webp)

## Control the movement of the animated character with the keyboard

### Import the model and play animation

The model can be loaded using the [**ImportMesh**](/typedoc/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
// Load hero character and play animation
BABYLON.ImportMeshAsync("https://assets.babylonjs.com/meshes/HVGirl.glb", scene).then(function (result) {
  var hero = result.meshes[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#1144" title="Load Model and Play Animation Group" description="Simple example of loading a gltf/glb asset and playing the animation groups that come with it." image="/img/playgroundsAndNMEs/divingDeeperAnimatedCharacter1.webp" isMain={true} category="Animation"/>

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.webp)

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**](/features/featuresDeepDive/events/actions) can be used to capture the keys pressed on the keyboard:

```javascript
const 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 the relevant animations are also 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 its animations with the keyboard." image="/img/playgroundsAndNMEs/divingDeeperAnimatedCharacter2.webp"/>

This simple example can be enhanced:

- By adding more robust logic to manage the details of selecting multiple keys and combining them
- By using the [**Device Source Manager**](/features/featuresDeepDive/input/deviceSourceManager) instead of the Action Manager for key presses
- With [**animation blending**](/features/featuresDeepDive/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 the _performance_ should be. This defines 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 of design is to sketch what is needed at key time points, a little like designing an animated GIF.

![key frames](/img/features/animation/ani1.webp)

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_ changes the position of the box along the x axis, which is a floating-point number, and it should also loop. It is critical to declare the type for the animation because the animation has no concept of what it is animating. In this case, the animation is simply moving the box's position along the X axis. While the animation will know its target - the box - it has no understanding of what it means to animate its position along the X axis. To combat this, we need to define the type for the animation as a floating point animation with `BABYLON.ANIMATION.ANIMATIONTYPE_FLOAT` and define the property which will accept the input as `position.x`. With these definitions, the animation has a roadmap of how to apply its keyframe data to the target resulting in a very flexible and powerful system that can animate almost anything. In code, this declaration looks like

```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 frameRate. 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 defined and can be applied to the box

```javascript
box.animations.push(xSlide);
```

The _performance_ (_Animatable_) is started with

```javascript
scene.beginAnimation(box, 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.webp" isMain={true} category="Animation"/>

## Reversing an Animation

Fun tip: the second and third arguments for the `beginAnimation` method are a starting frame and an ending frame from your keyFrames list. If you reverse those two values, the animation will play in reverse!

```javascript
const startFrame = 0;
const endFrame = 10;
const frameRate = 10;

const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const keyFrames = [];

keyFrames.push({
  frame: startFrame,
  value: 2,
});

keyFrames.push({
  frame: endFrame,
  value: -2,
});

xSlide.setKeys(keyFrames);

box.animations.push(xSlide);

//backwards animation
scene.beginAnimation(box, endFrame, startFrame, false);
```

Check it out here:
<Playground id="#7V0Y1I#940" title="Playing an Animation in Reverse" description="An example of playing an animation forwards and backwards."/>

## The Animation Curve Editor (ACE)

Now that you're starting to understand the basics of animations in Babylon and how to create them, you'll also want to consider taking a look at the Animation Curve Editor (ACE). This super easy-to-use tool allows you to create full animations in a matter of seconds without writing any code!

[Check it out!](/legacy/inspector/animationCurveEditor)

<img src="/img/tools/ACE/overview.webp" title="Babylon.js Animation Curve Editor"/>



## 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. This introduction should help to understand how Babylon.js goes about animations and how they are 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.webp)

<img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Horse_gif_slow.gif" title="Horse Animation" caption="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, the animation frames per second can be inferred. 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 Babylon.js, as in stop-motion animation, individual objects have to be moved one by one. 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 have the given meaning within this How_To about animating.

- _Performer_ an item that can be animated, could be a mesh, a light, or a camera for example. Performers can, however, be more than just a node in the scene. The performer can also be a value like a color property on a shader, the intensity property of a light, or even the weight property on another animation.

- _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 Babylon.js 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 the 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 `light.intensity`.

- _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.
  BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE_FROM_CURRENT - Relative loop mode (add to current value of animated object, unlike ANIMATIONLOOPMODE_RELATIVE)
  BABYLON.Animation.ANIMATIONLOOPMODE_YOYO - The animation will reverse its direction when it reaches the end instead of restarting from the beginning

## Set Key Frames

The key frames of an animation are held in an array of objects, each containing the following two properties:

- _frame_ - the frame number
- _value_ - for the property being changed

This array will contain one object for each key frame and can contain as many key frames as needed for the desired animation.

```javascript
const myKeys = [
  {
    frame: 0,
    value: 0.5,
  },
  {
    frame: 60,
    value: 1.0,
  },
];
```

Once the key frames array is constructed, in this case an array named _myKeys_, it is added to the animation by setting the keys.

```javascript
myAnim.setKeys(myKeys);
```

## Beginning The Animation

There are several ways to manage the play state of animations. One of the simplest is to add an animation to the _animations_ array property of an object. Objects like Mesh, Material, Light, or Camera have an _animations_ array property defined by default which holds animations which target that specific object.

```javascript
myMaterial.animations.push(myAnim);
```

Additionally, animations can be added to any object that the engine can reach, even if it does not already have an _animations_ array property. Due to the malleable nature of JavaScript, simply declaring a new array property for an object will enable us to store animations on target objects. For example, if we want to target the weight property of an animation with another animation, we can add an _animations_ array property to the animation by declaring it.

```javascript
myAnimation.animations = [];
myAnimation.animations.push(weightAnimation);
```

Remember, above we said that anything that the engine can reach can be animated with our animation system. This also applies to content outside of the canvas. For example, since we can reach any DOM object with Javascript, we can apply an animation to it. If we wanted to, we could use an animation to drive the border-radius of a `<div>` object.

### beginAnimation

Now that we have pushed an animation to a target object, starting the animation is a simple case of telling the scene to begin the animations stored with the target object. Note that when `beginAnimation` is called, every animation stored in the `target.animations` array will start.

```javascript
scene.beginAnimation(target, from, to);
```

- _target_ - _BabylonJS Object_, the Babylon.js object to be animated
- _from_ - _number_, the frame at which to start the animation
- _to_ - _number_, the frame at which to end the animation

If a looping animation is desired, set the fourth parameter to true.

```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.webp"/>

There are a number of further optional parameters that you can find in the _scene_ API.

### beginDirectAnimation

If it is preferable to not store animations with a target object, one or more animations can be applied to a target using:

```javascript
scene.beginDirectAnimation(target, animations, from, to, loop);
```

- _target_ - _BabylonJS Object_, the Babylon.js 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 the animation

Be aware that animations applied with `scene.beginDirectAnimation` do not belong to any object or the scene, so the scene is not aware of them and they do not register in `scene.animations`. However, this method is extremely useful for applying a one-time animation to an object or for animating an object that does not have an _animations_ array property if it is desirable not to alter the target object. Further optional parameters are available and can be found in the _scene_ API. If `scene.beginDirectAnimation` is the preferable method, but additionally having a reference to the animation that can be used in the future is required, an _Animatable_ is exactly what is needed.

<Playground id="#7V0Y1I#1" title="Sliding Box Direct Animation" description="An example of sliding a box with direct animation." image="/img/playgroundsAndNMEs/divingDeeperAnimationDesign1.webp" isMain={true} category="Animation"/>

## Animatable

Both `scene.beginAnimation` and `scene.beginDirectAnimation` return an _Animatable_ object that can be referenced when needed to change the state of the animation. Simply capture the return from one of the methods above to store the reference.

```javascript
const myAnimatable = myscene.beginAnimation(target, from, to, true);
```

Once the animatable is stored, any of the following methods can be called to change the state of the animation as needed.

- _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.webp" isMain={true} category="Animation"/>



## Baked vertex animations

Animations are computed by the CPU, applying the bone effects to the mesh. This is reasonably slow and for several animated objects can be a bottleneck. One way to optimize this is pre-computing (or baking) the animations, storing them into a texture (usually called Vertex Animation Textures, or VAT) and using it in vertex shaders. This frees the CPU, with the trade-off that you need to perform this initial baking step (which can be done at development time), add a new texture file to your downloads and consume more GPU memory. This trade-off is usually quite good, since the CPU tends to be the bottleneck.

A limitation of the current VAT implementation is that you cannot [blend animations to play simultaneously](./advanced_animations#animation-blending). Also, the animations may not be as smooth as when not using BVA because there is no interpolation between frames. The "smoothness" will depend on the number of frames of the animation.

## Baking Vertex Texture Animations

The `VertexAnimationBaker` class generates a texture for you given the animation.

## New Optimized Methods
There is a new synchronous method for baking VAT at runtime on `VertexAnimationBaker` called `bakeVertexDataSync`
The existing methods for baking vertex data remain usable, but this method is much more efficient for runtime and offline baking.
Additionally, for devices that support it, this method can return a `HalfFloat` which uses half the storage on disk and in memory.

Here is the new API:

```javascript
const animationRanges = [
    { from: 0, to: 33 },
    { from: 33, to: 61 },
    { from: 63, to: 91 },
    { from: 93, to: 130 }
];
const importResult = await BABYLON.ImportMeshAsync(
    "https://raw.githubusercontent.com/RaggarDK/Baby/baby/arr.babylon",
    scene,
    undefined
);
scene.onReadyObservable.add(() => {
    const mesh = importResult.meshes[0];
    const baker = new BABYLON.VertexAnimationBaker(scene, mesh);
    // Check engine capabilities to use HalfFloat
    const canUseFloat16 = engine.getCaps().textureHalfFloat;
    // Bake the data synchronously
    // If we can use HalfFloat, this will return a Uint16Array
    const syncVertexData = baker.bakeVertexDataSync(animationRanges, canUseFloat16);
    // textureFromBakedVertexData will now infer type from full floats or half floats
    // and generate a raw texture based on the input
    const vertexTexture = baker.textureFromBakedVertexData(syncVertexData);
    const manager = new BABYLON.BakedVertexAnimationManager(scene);

    manager.texture = vertexTexture;
    manager.animationParameters = new BABYLON.Vector4(
        animationRanges[0].from,
        animationRanges[0].to,
        0,
        30
    );

    mesh.bakedVertexAnimationManager = manager;
    scene.registerBeforeRender(() => {
        manager.time += engine.getDeltaTime() / 1000.0;
    });
})
```

<Playground id="#CP2RN9#304" title="Vertex Texture Animations Sync Baking" description="Example of new sync baking methods"/>



Here is the existing implementation running asynchronously:

```javascript
let baker = null,
  mesh = null;
const animationRanges = [{ from: 1, to: 20, name: "My animation" }];
BABYLON.ImportMeshAsync("https://raw.githubusercontent.com/RaggarDK/Baby/baby/arr.babylon", scene, undefined)
  .then((importResult) => {
    mesh = importResult.meshes[0];
    // create the baker helper, so we can generate the texture
    baker = new BABYLON.VertexAnimationBaker(scene, mesh);
    // you can slice the animation here with several animation ranges.
    return baker.bakeVertexData(ranges);
  })
  .then((vertexData) => {
    // we got the vertex data. create the texture from it:
    const vertexTexture = baker.textureFromBakedVertexData(vertexData);
    // create a manager to store it.
    const manager = new BABYLON.BakedVertexAnimationManager(scene);
    // store the texture
    manager.texture = vertexTexture;

    // set the animation parameters. You can change this at any time.
    manager.setAnimationParameters(
      animationRanges[0].from, // initial frame
      animationRanges[0].to, // last frame
      0, // offset
      30, // frames per second
    );

    // associate the manager with the mesh
    mesh.bakedVertexAnimationManager = manager;

    // update the time to play the animation
    scene.registerBeforeRender(() => {
      manager.time += engine.getDeltaTime() / 1000.0;
    });
  });
```

Here's an example for a single mesh:

<Playground id="#CP2RN9#235" title="Vertex Texture Animations" description="An example of playing a vertex texture animation."/>

## VATs for instances

As explained in [How To Use Instances](/features/featuresDeepDive/mesh/copies/instances), instances are an excellent way to use hardware-accelerated rendering to draw a huge number of identical meshes. VATs can be used further to handle the animations efficiently. In this case you need to register a buffer to set the animation parameters for each instance.

```javascript
// create the instanced buffer
mesh.registerInstancedBuffer("bakedVertexAnimationSettingsInstanced", 4);
// set it for the base mesh
mesh.instancedBuffers.bakedVertexAnimationSettingsInstanced = new BABYLON.Vector4(0, 0, 0, 0);
```

<Playground id="#CP2RN9#290" title="Vertex Texture Animations on instances" description="An example of playing VATs on instances."/>

## VATs for thin instances

VATs can also be used with [thin instances](/features/featuresDeepDive/mesh/copies/thinInstances). Then you set the parameters for the thin instances:

```javascript
// allocate the parameters
const animParameters = new Float32Array(numInstances * 4);

// for each instance
for (let i = 0; i < numInstances; i++) {
  // generate the animation parameters with your code:
  // returns a BABYLON.Vector4()
  const params = setAnimationParameters();

  // store in the base array
  animParameters.set(params.asArray(), i * 4);
}

// update the mesh with all settings
mesh.thinInstanceSetBuffer("bakedVertexAnimationSettingsInstanced", animParameters, 4);
```

Here's an example:

<Playground id="#CP2RN9#291" title="Vertex Texture Animations on thin instances" description="An example of playing VATs on thin instances."/>

### VATs offset

When using VAT with thin instances, you might expect each instance to start its animation with a specific time offset. However, this is **not guaranteed by default**.

This is because multiple instances often share the same `BakedVertexAnimationManager`, which internally handles the
current animation frame globally. To ensure that a specific instance starts at its intended offset you can manually
compute the correct offset using the following formula:

```typescript
function computeOffset(
  fromFrame: number,
  toFrame: number,
  time: number,
  fps: number = 60
): number {
  const totalFrames = toFrame - fromFrame + 1;
  const t = time * fps / totalFrames;
  const frame = Math.floor((t - Math.floor(t)) * totalFrames);
  return totalFrames - frame;
}
```

The `time` parameter can be retrieved directly from the used `BakedVertexAnimationManager` via `manager.time`.

<Playground id="#3NIXCL#737" title="Vertex Texture Animations on thin instances at offset" description="An example of playing VATs on thin instances with specific offset."/>


## Serializing and loading VATs

Baking the texture can be a slow process, and will play the entire animation visibly. In order to avoid this during run-time, it's better to bake the texture data at build time, and just load it at run-time. Here's a sample script to bake the vertex data and get the JSON file to save locally:

```javascript
let baker = null,
  mesh = null;
const animationRanges = [{ from: 1, to: 20, name: "My animation" }];
BABYLON.ImportMeshAsync("http://example.com/arr.babylon", scene, undefined)
  .then((importResult) => {
    mesh = importResult.meshes[0];
    // create the baker helper, so we can generate the texture
    baker = new BABYLON.VertexAnimationBaker(scene, mesh);
    // you can slice the animation here with several animation ranges.
    return baker.bakeVertexData(ranges);
  })
  .then((vertexData) => {
    // we got the vertex data. let's serialize it:
    const vertexDataJSON = baker.serializeBakedVertexDataToJSON(vertexData);
    // and save it to a local JSON file
    let a = document.createElement("a");
    a.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(vertexDataJSON));
    a.setAttribute("download", "vertexData.json");
    a.click();
  });
```

In your application, you can now easily load the JSON file. Here's a simple example:

```javascript
let baker = null,
  mesh = null;
const animationRanges = [{ from: 1, to: 20, name: "My animation" }];

// read your mesh like always
BABYLON.ImportMeshAsync("http://example.com/arr.babylon", scene, undefined)
  .then((importResult) => {
    mesh = importResult.meshes[0];
    // read the vertex data file.
    return fetch("/vertexData.json");
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error("HTTP error " + response.status);
    }
    // convert to json
    return response.json();
  })
  .then((json) => {
    // create the baker helper, so we can generate the texture
    baker = new BABYLON.VertexAnimationBaker(scene, mesh);
    const vertexData = baker.loadBakedVertexDataFromJSON(json);
    // we got the vertex data. create the texture from it:
    const vertexTexture = baker.textureFromBakedVertexData(vertexData);

    // .... and now the same code as above
  });
```



## 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 id="#9WUJN#11" title="Simple Slide Animation" description="The simple slide animation example." image="/img/playgroundsAndNMEs/divingDeeperAnimationDesign1.webp"/>

### 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 id="#9WUJN#12" title="Slide and Rotate Animation" description="The simple slide animation with rotation introduced." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations1.webp" isMain={true} category="Animation"/>

### 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 id="#9WUJN#13" title="Slide with Faster Rotation" description="The simple slide animation with faster rotation." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations1.webp"/>

### 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 id="#9WUJN#14" title="Slide with Varying Rotation Rate" description="The simple slide animation with varying rotation rates." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations1.webp"/>

## 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 id="#9WUJN#15" title="Rotate Then Slide" description="The simple slide animation with rotation happening first, then sliding." image="/img/playgroundsAndNMEs/divingDeeperCombineAnimations2.webp"/>

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 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.webp"/>



An `AnimationGroup` allows you to link together animations and meshes and play them, pause them, and stop them as a group.

## Forming a Group

Follow the tutorial for [creating an animation](/features/featuresDeepDive/animation/animation_introduction) to 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
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 them 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);
```

Because the animations may have been created with different timelines, they may need 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;
```

This speeds up or slows down the animation.

- <Playground id="#CBGEQX#5" title="Animation Group Speed Ratio" description="Example of adjusting 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
const 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 animations in the group have looped:

```javascript
animationGroup1.onAnimationGroupLoopObservable.add(function (group) {
  console.log("Group looped!");
});
```

## Masking animations in a group

Masking allows you to define which animations should or should not be played.

By default (without mask), all animations added to an animation group will be played. If you wish only certain animations to be played, you can create an `AnimationGroupMask`:

```javascript
const mask1 = new BABYLON.AnimationGroupMask([sphereA.name, sphereB.name], BABYLON.AnimationGroupMaskMode.Include); // play only animations affecting sphereA and sphereB
animGroup.mask = mask1;
const mask2 = new BABYLON.AnimationGroupMask([sphereA.name, sphereB.name], BABYLON.AnimationGroupMaskMode.Exclude); // play all animations except those affecting sphereA or sphereB
animGroup.mask = mask2;
```

You can use this Playground to test the `mask` property: <Playground id="#56LX6L#9" title="Animation group mask" description="Demonstrate how to use the mask property"/>

Note that if you use the same mask for the entire lifetime of an animation group, you can save performance and memory by removing from the animation group any animations that are rejected by the mask.
You can do this easily by calling the method `AnimationGroup.removeUnmaskedAnimations()`.

What's more, if you update the mask while the animation group is already playing, you need to call the `AnimationGroup.syncWithMask()` method to ensure that the correct animations are stopped/played according to the new mask.

## Ordering animation groups

The `AnimationGroup.playOrder` property defines the order in which animatables created at animation group startup should be processed in the list of active animatables.

This property can be useful when you want to ensure that certain animation groups / animatables are played before or after others (as in a layered system animation, for example).

By default, when `playOrder` is not set (it defaults to 0), animatables are played in the order in which they were created.

## Miscellaneous

`AnimationGroup.enableBlending`, `AnimationGroup.blendingSpeed` and `AnimationGroup.weight` are helper properties that allow you to easily set these values for all animatables in the animation group at once, without having to go through the list of animatables yourself.



## Animation Using the Render Loop

Babylon.js allows you to change an object's properties immediately before or after a frame is rendered. This is an alternative way of producing animation in a scene.
This type of animation lets you control everything on each frame of the animation (each tick). The code computed at run time must be located in this function:

```javascript
scene.onBeforeRenderObservable.add(() => {
  //Your code here
});
```

The functions added to `onBeforeRenderObservable()` 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#562" title="Render Loop Animation Example" description="A simple example of animation using the scene's render loop." image="/img/playgroundsAndNMEs/divingDeeperRenderLoopAnimation1.webp"/>

This function can be very useful for complex animations, such as games, where characters have to move depending on many parameters.

Don’t hesitate to combine all those types of animations. If done well, 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.



## What root motion is

A walk cycle is authored in one of two ways. In an **in-place** clip the character stays at the origin: the hips sway, the feet slide back under the body, and it is up to your code to move the character node at the right speed. In a clip **with travel** the root bone carries the character forward, so a looping playback walks the character away from its node and snaps it back at every loop.

Either way, the feet skate whenever the movement of the character node and the movement in the pose disagree. Root motion fixes that at the source: the travel is taken out of the clip (or, for an in-place clip, worked out from the feet), the pose plays in place, and the character node is moved by exactly the travel the pose implies, frame by frame. The feet stay planted where they touch down, at any speed ratio, forwards or backwards, blended or not.

Babylon.js does this with two classes:

- `RootMotionClip` analyzes an `AnimationGroup` once and builds an **in-place copy** of it to play. The source group is never changed.
- `RootMotionController` moves a character node by the motion of the clips playing on it.

## Quick start

```javascript no-code-variants
const container = await BABYLON.LoadAssetContainerAsync("https://assets.babylonjs.com/meshes/Xbot.glb", scene);
container.addAllToScene();
const walkGroup = container.animationGroups.find((group) => group.name === "walk");

const walk = new BABYLON.RootMotionClip(walkGroup); // analyzes once; walkGroup is not changed
const controller = new BABYLON.RootMotionController(walk.characterNode, [walk]);
walk.animationGroup.start(true); // play the in-place copy, not the source
```

That is all there is to it. `walk.animationGroup` is a copy of the walk with the travel left out of it, `walk.characterNode` is the node the travel is applied to (the topmost ancestor of the animated hierarchy, the `__root__` node of a glTF asset), and the controller moves that node every frame by as much as the pose advanced.

<Playground id="#ZE8Y5A#1" title="Root Motion" description="Xbot walks and runs on planted feet. Turn root motion off to compare with the raw clip." isMain={true} category="Animation"/>

## How a clip finds the travel

The clip samples the group over its range and looks for the travel in two places, in this order. `clip.source` tells you which one it used.

- **`RootMotionSource.Root`**: the root node's own position animation travels over a cycle. This is the clip's ground truth. Its travel (and its turn, when one is extracted) is removed from the root's keys in the in-place copy and applied to the character instead. The root is the position-animated node with the most animated descendants, usually the hips, unless you pass `rootNode`.
- **`RootMotionSource.FootContact`**: the root stays put, so the clip is in place and the travel is deduced from the contact nodes, usually the feet. Whatever a planted foot gives up in character space over a step is how far the character travels. Nothing is removed from the clip. The contact nodes are the leaf nodes under the root that come closest to the ground, unless you pass `contactNodes`.
- **`RootMotionSource.None`**: neither moves, as in an idle. The clip is still usable; it just produces no motion.

Pass `source` in the options to force one of the first two.

Only the travel is extracted from a root, never the whole animation. By default that is the horizontal travel along the clip's direction of travel: the up and down of the hips stays in the pose, and so does their side to side sway. Set `extractLateralMotion: true` for strafing clips, where the sideways motion is the travel.

### Turning

When a cycle leaves the character facing at least `minimumTurn` (10 degrees by default) away from where it started, the turn about the up axis is extracted too: it is removed from the root's rotation keys and the character is turned by it. A walk's hip twist, or a dance that spins round to face the front again, stays in the pose. A turn that is not in the root's travel (a turn on the spot, or a turn alongside travel deduced from the feet) turns the character about the root's starting point, so a root that sits off the character's axis does not swing at every loop. Set `extractRotation` to force this either way.

### Reading the analysis

Once constructed, a clip tells you what it found:

| Member | Meaning |
| --- | --- |
| `source` | Where the travel comes from: `Root`, `FootContact` or `None`. |
| `rootNode`, `contactNodes`, `characterNode` | The nodes the analysis settled on. |
| `travelDirection` | The direction of travel over a cycle, in character space (unit length). |
| `cycleOffset`, `cycleDistance` | The travel of one cycle, as a vector and as a distance along the direction of travel. |
| `cycleRotation` | The turn of one cycle about the up axis, in radians. Zero unless rotation is extracted. |
| `duration`, `averageSpeed` | The length of one cycle in seconds at a speed ratio of 1, and the speed it implies. |
| `getOffsetAtFrame(frame, result)`, `getRotationAtFrame(frame)` | The travel and the turn reached at a frame, relative to the first frame. |

`averageSpeed` is handy for matching a character controller to a clip, or for picking the speed ratio that makes a walk cover a given distance in a given time.

## The controller

A `RootMotionController` belongs to one character node. Give it every clip that plays on that character, in the constructor or with `addClip`, and it moves the node after the animations every frame. The motion is applied in the node's own local space, so a scaled or rotated character node works as you would expect.

```javascript no-code-variants
const controller = new BABYLON.RootMotionController(walk.characterNode, [walk, run]);
```

### Blending

Clips that play together are blended exactly the way the animation mixer blends their root pose, so the character moves with the pose you see whatever you do with the groups. Weighted groups contribute their share and are normalized once their weights add up to more than one, additive groups add theirs on top, an unweighted group contributes its whole motion only while no weighted group animates the root (among unweighted groups the last one to write wins), and a group blending in with `enableBlending` contributes as much as it is blended in. A cross-fade from a walk to a run gives the blended speed at every step:

```javascript
walk.animationGroup.start(true);
run.animationGroup.start(true);
walk.animationGroup.weight = 1;
run.animationGroup.weight = 0;

// Then, over a few frames, with t going from 0 to 1:
walk.animationGroup.weight = 1 - t;
run.animationGroup.weight = t;
```

### Driving something else

Set `applyToCharacter` to false to consume the motion yourself, for example to feed a physics character controller or `moveWithCollisions`. `deltaPosition` is the travel of the last animation step in world space and `deltaRotation` its turn about the up axis in radians. `onRootMotionObservable` is notified after they are updated.

```javascript
controller.applyToCharacter = false;
controller.onRootMotionObservable.add(() => {
    hero.moveWithCollisions(controller.deltaPosition);
});
```

### Jumps and resets

The motion follows the playback, so starting, stopping, pausing and changing the speed ratio need nothing from you. A jump in the playback is different: after `goToFrame`, or after resetting the group, call `controller.reset()` so the jump is not read as motion.

Moving the character yourself needs no reset. A teleport, a respawn, anything that sets the node's position or rotation: the controller tracks how far the playback advanced, not where the character is, and the next step carries on from wherever you put it. Resetting anyway costs you a step of travel, because the first evaluation after a reset only establishes where the playback resumes and contributes nothing, which is exactly the slip root motion is there to avoid.

## Playback

The motion follows the pose the runtime evaluated, not a clock of its own, so everything the animation group can do moves the character exactly as far as the pose went:

- Every loop mode. The relative modes cycle, the constant mode holds the pose at the end of its first cycle and the character stops with it, and yoyo walks the character back and forth.
- Negative speed ratios walk the character backwards. Changing the speed ratio while playing needs no reset.
- Playing a range with `from` and `to`, and a root keyed over a shorter range than the group, loop by the range the runtime actually evaluates.
- A group synchronized with `syncAllAnimationsWith` follows its master, at the master's speed and through the master's loops, in either direction and down a chain of followers. A master keyed over a shorter range than its follower wraps without that wrap being read as travel, and a follower that does not loop ends at the master's frame.
- A group started with `startWithVirtualTimeline` is carried over the whole of that timeline: the character travels as far as the range covers the clip, wrapping back onto it as many times as it takes, and stops where the range ends. Build the controller before or after starting the playback; both give the same motion.
- A playback that does not loop lands exactly on the clip's full travel when it ends. Calling `stop()` applies nothing more.

## Requirements and limits

- The group must not animate the position or rotation of the character node itself, since the motion applied to it would be overwritten every frame. The constructor throws with a message saying so. Parent the animated node under a new node and pass that as `characterNode`.
- The root must have an ancestor to move. A glTF asset's `__root__` node is found by default; a root node with no parent throws.
- Animations must target transform nodes, as the glTF loader's do. Bones without a linked transform node are not supported yet.
- Additive groups are not accepted as a source. To play a clip additively, create it with `cloneAnimations: true` and make its `animationGroup` additive; the source group's animations are then not changed with it.
- The clips of one controller share an up axis. Pass `upAxis` for a Z-up character.
- The in-place group belongs to the scene. `clip.dispose()` disposes it and leaves the source group untouched (a root that only turns gets its position put back). `controller.dispose()` stops applying the motion and does not dispose the clips.

## Options

`new BABYLON.RootMotionClip(animationGroup, options)` accepts:

| Option | Default | What it does |
| --- | --- | --- |
| `rootNode` | the position-animated node with the most animated descendants | The node whose own travel is tried first. A bone is resolved to its linked transform node. A node the group does not animate is accepted as the base of the hierarchy: the travel then comes from the contact nodes under it. |
| `characterNode` | the topmost ancestor of the root | The node that receives the motion and whose local space the motion is measured in. |
| `contactNodes` | the leaf nodes closest to the ground | The nodes that touch the ground, used when the root does not travel. |
| `source` | root first, then feet | Forces `RootMotionSource.Root` or `RootMotionSource.FootContact`. |
| `extractRotation` | when a cycle turns at least `minimumTurn` | Whether the turn about the up axis is extracted and applied to the character. |
| `extractLateralMotion` | `false` | Extracts all horizontal motion instead of the travel along the direction of travel, for strafing clips. |
| `directionSnapAngle` | 0 for a root, 10 degrees for feet | Snaps a nearly axis-aligned direction of travel onto that axis. |
| `minimumTravel` | 0.1 | Travel below this share of the character's height over a cycle counts as standing still. |
| `minimumTurn` | 10 degrees | Turning below this angle over a cycle counts as twist, not as a turn. |
| `samplesPerSecond` | 60 | How densely the clip is sampled during analysis. |
| `upAxis` | +Y | The up axis in character space. |
| `name` | the source name followed by " (in place)" | The name of the in-place animation group. |
| `cloneAnimations` | `false` | Clones every animation into the in-place group instead of sharing the ones the extraction leaves untouched. |



One straightforward 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 made simply with meshes and 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.webp)

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.

For the camera movement, the key points will be: at time 0 the camera starts away from the building and moves toward 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 the 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
const movein = new BABYLON.Animation("movein", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

const 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
const rotate = new BABYLON.Animation("rotate", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

const 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 with a floating-point rotation. The opening and closing rotations will each take 2 seconds.

Key points will be at times 0, 3, 5, 13, and 15 seconds.

Key values for the sweep will be its rotation about the y axis at the key frames.

```javascript
//for door to open and close
const sweep = new BABYLON.Animation("sweep", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

const 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 spotlights.

Key points for the lights are: remaining off for 7 seconds, coming to full intensity at 10 seconds, and staying there until going off at 14 seconds.

```javascript
//for light to brighten and dim
const lightDimmer = new BABYLON.Animation("dimmer", "intensity", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

const 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 simultaneously.

```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.webp"/>



## Animation

Animation is what makes your game or app come alive. There are two main ways to produce an animation in BABYLON.js. You can change the properties of an object within a scene during the rendering cycle. We will take a look at that after describing the *Animation* method.



## Diving Deeper

We hope you enjoyed splashing around in the Getting Started section and are now ready to dive deeper into what is possible with Babylon.js. If you are looking for something specific and cannot find it in the navigation menu or landing page selections, head to the search bar; the results cover all the documentation, including the API. Below is the surface of the vast ocean that is this intermediate section of Babylon.js—dive in for 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 animate 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.

Baked Texture Animations

Efficient animations on the GPU.

Animation Retargeting

A description of the retargeting system implemented in Babylon.js.

Root Motion

Move a character by the travel in its animation clips, so its feet stay planted instead of sliding.