> ## Documentation Index
> Fetch the complete documentation index at: https://rive-scripting-inputs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Design and Animate Modes

> Understand when changes edit your design and when they create animation keys.

Rive has two main editing modes: **Design** and **Animate**.

* **Design Mode** is for creating, editing, importing, and rigging objects.
* **Animate Mode** is for creating timelines, state machines, keys, and animation logic.

Use the **Mode Toggle** in the toolbar, or press `Tab`, to switch between modes.

<img src="https://mintcdn.com/rive-scripting-inputs/4Z8GNQpauTwEwUQD/images/switch.gif?s=7910c541f87928909b87396715f2e760" alt="The Design and Animate mode toggle in the top-right of the toolbar being switched back and forth" width="640" height="382" data-path="images/switch.gif" />

## Avoiding Accidental Keys

When you're in **Animate Mode**, some edits can create animation keys depending on what is selected.

If a **timeline** is selected, changes to animatable properties may be keyed automatically. This can happen when you move, resize, rotate, recolor, or otherwise edit an object while working in a timeline.

<Warning>
  Before making design changes, make sure you're in **Design Mode**, or make sure a timeline is not selected.
</Warning>

## When to Use Design Mode

Use **Design Mode** when you want to change the default design of your file.

Common design changes include:

* Creating or deleting objects
* Moving, resizing, or rotating objects
* Editing fills, strokes, and shape properties
* Importing assets
* Adding bones, constraints, or other rigging

## When to Use Animate Mode

Use **Animate Mode** when you want to create animation behavior.

<img src="https://mintcdn.com/rive-scripting-inputs/Za9h5bHQMi0DOGlx/images/editor/fundamentals/State_Machine.png?fit=max&auto=format&n=Za9h5bHQMi0DOGlx&q=85&s=e89bcb509f7296e180b8691ec64b4064" alt="The Rive editor in Animate Mode showing a state machine graph with Entry, Character idle, and transition states in the bottom panel" width="3456" height="2160" data-path="images/editor/fundamentals/State_Machine.png" />

Common animation tasks include:

* Creating timelines
* Creating state machines
* Adding keys
* Editing key values
* Setting up transitions, listeners, and animation logic
