> For the complete documentation index, see [llms.txt](https://docs.incari.com/incari-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.incari.com/incari-studio/2024.1/modules/animation-editor.md).

# Animation Editor

## Overview

The **Animation Editor** is used for creating and editing **Keyframe**-based timeline animations, which have the file extension `.incani`. It can either be opened from the `View` drop-down Menu on the top panel of **Incari**, or by right-clicking on the Menu bar in **Incari** and clicking on **Animation Editor** from the drop-down list, or simply by double-clicking an **Animation** **Asset** in the **Asset Manager**.

The **Animation Editor** can be used to animate **Objects** in both **Scenes** and **Scene2Ds**.

![](/files/rAjhB8FPlEsMshxJdXGf)

What is capable of being animated depends on the **Attributes** of the **Object**. For example, a **Cube** in a **Scene** can have its `Transformation` **Attributes** and `Opacity` animated, as displayed in the image below:

![](/files/fdbUfVG80Vm8qPrQ8Gtb)

On the other hand, an **Ellipse** in a **Scene2D** can have additional **Attributes** animated, such as `Stroke` and `Fill`, as can be seen in the following image:

![](/files/wFengu0klfFUSeZDQ2mj)

## Animation Editor Window

![](/files/vbGCet0KmjnPFmFlmxUB)

**Animation Editor** - The main window, which contains all the options to create and edit an **Animation**. The specifics of its sections are described below.

## Toolbar

![](/files/nPVrk7DYGHAzErMv7SqF)

The **Toolbar** offers several options to modify an **Animation**, such as adding or deleting an **Animation** **Block**, adding or deleting a **Keyframe**, and modifying the type of interpolation used. It also provides options for a better visualization of the timeline, such as a focus on just the visible lines and a toggle for the visibility of the tangent lines. The rest of the options are for enabling the preview, playing, and controlling of the **Animation**.

## Left Panel

![](/files/T4Z7LmJyItDVmbg5ShQU)

The **Left Panel** shows the **Animation Blocks** with their **Transformation Attributes** and corresponding **Keyframes**, which are highlighted in blue.

A **Keyframe** consists of two parts:

* The **Keyframe** itself, which holds a value at a specific time.
* The curve handles, which control the easing and interpolation between frames.

To add a **Keyframe**, simply right-click an **Attribute** and select `Add Keyframe` from the context menu. This will create a **Keyframe** at whatever time the playhead is currently on. The curve handles can then be adjusted to fine-tune the intermediate frames.

When a **Keyframe** is selected, its corresponding Bézier curve is shown in the **Animation Timeline**.

When the **Animation** is run, the **Left Panel** shows the evolving values of the **Transformation Attributes**.

![](/files/TIYn0bO7WiCPjcOv7Sf6)

## Animation Timeline

![](/files/0UMRlc0OLPoFTfLSikn0)

The **Animation Timeline** shows a graph with the Bézier curves of the **Transformation Attributes**.

## See Also

* [**4 Methods of Animation - 1. Animation Editor**](/incari-studio/2024.1/demo-projects/4-methods-of-animation.md#1-animation-editor)

## External Link

* [*Bézier Curve*](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) on Wikipedia.