# 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**.

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-115c04e3defeccc50b4b32297299faebc8d9c4b6%2Fanimation-editor2.png?alt=media)

## Animation Editor Window

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-92e46f08ffb0981a23884832dbce5679c92d45f5%2Fanimation-editor3.png?alt=media)

**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

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-f17de342699b689aa46be7db3e0277dabb17de6b%2Fanimation-editor-top-panel.png?alt=media)

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

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-7adacd8ac44df122f31ff3f261b3761b5c650972%2Fanimation-editor-left-panel-2.png?alt=media)

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**.

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-f470097936608414eac4dda8da3abc5bb92c5f11%2Fanim-editor-run.gif?alt=media)

## Animation Timeline

![](https://3875032344-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSX7w874Eg6ode1ivk0ZM%2Fuploads%2Fgit-blob-16d3ce51f684bbef3972345f3df61b7937fbd6e2%2Fanimation-editor-central.png?alt=media)

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

## See Also

* [**4 Methods of Animation - 1. Animation Editor**](https://docs.incari.com/incari-studio/2021.4/demo-projects/4-methods-of-animation#1-animation-editor)

## External Link

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