Animate Mode Overview

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

Editing objects while a timeline is selected can create keys. See Design and Animate Modes to learn how to avoid accidental keying.

Learn more about Animate mode

Timeline

The Rive interface displays a timeline with playback controls and options for the current animation in Animate mode.

Keys

Objects and their properties appear on the Timeline once they have been keyed. There are a few different ways to key a property.

Interpolation (Easing)

When you set two keys on a property, the value in between those keys is automatically calculated. This is called interpolation.

Animating Draw Order

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.