Animate Mode

Rive has two modes: Design and Animate. Animate mode is where you bring your designs to life — it shows the timeline, animation list, and interpolation panel (controls how the animation moves between keyframes — smoothly, sharply, or in custom curves).

Press Tab to switch between Design and Animate modes.

In Animate mode, properties that can be animated show a key icon in the Inspector. Click it to set a keyframe (a snapshot of a property's value at a point in time).

Animation Topics

Timeline

Create animations using the timeline, playback controls, and keyframes.

Keys

Objects appear on the timeline once a property is keyed. Learn the different ways to set keys.

Interpolation (Easing)

Rive automatically calculates values between keyframes. Control the curve to create natural-feeling motion.

Animating Draw Order

Change the render order of objects over time using the timeline.

Example: Bouncing Ball

This video walks through animating a bouncing ball — covering keyframes, interpolation, and classic animation principles.