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

# Animate Mode Overview

Use [animate mode](https://rive.app/docs/editor/fundamentals/design-vs-animate-mode) to create timelines, state machines, keys, transitions, and interactive animation logic.

In Animate Mode, the editor shows animation tools such as the timeline, animations list, key controls, and interpolation options.

> [!WARNING]
>
> Editing objects while a timeline is selected can create keys. See [Design and Animate Modes](https://rive.app/docs/editor/fundamentals/design-vs-animate-mode) to learn how to avoid accidental keying.

[YouTube video player](https://www.youtube.com/embed/4U3er1uSjBw)

### Learn more about Animate Mode

> [card] [Timeline](https://rive.app/docs/editor/animate-mode/timeline.md)
>
> The Rive interface displays a timeline with playback controls and options for the current animation in Animate mode.

> [card] [Keys](https://rive.app/docs/editor/animate-mode/keys.md)
>
> Objects and their properties appear on the Timeline once they have been keyed. There are a few different ways to key a property.

> [card] [Interpolation (Easing)](https://rive.app/docs/editor/animate-mode/interpolation-easing.md)
>
> When you set two keys on a property, the value in between those keys is automatically calculated. This is called interpolation.

> [card] [Animating Draw Order](https://rive.app/docs/editor/animate-mode/animating-draw-order.md)
>
> You can change the draw order of your graphics at design time by moving items up and down the Hierarchy.

## Use case: building a bouncing ball

This video walks you through animating a bouncing ball in Rive. We cover keyframes, interpolation and a couple classic principles of animation.

[YouTube video player](https://www.youtube.com/embed/DitdOy_HxKc)