Skip to main content
A state machine connects your timelines with logic. It decides which animation plays, when it changes, and how it blends into the next one, based on data, user interaction, or time. This is what makes a Rive graphic interactive, and it’s what your app or game controls at runtime. For example, a button might have Idle, Hover, and Pressed timelines. A state machine plays Idle by default, switches to Hover when the pointer moves over the button, and to Pressed when it’s clicked.

How a state machine works

A state machine is made of:
  • States: what’s playing, usually a timeline or a blend of timelines.
  • Transitions: the connections between states, with conditions that decide when the state machine moves from one state to another.
  • Layers: each layer is its own graph of states and transitions. Layers play at the same time.
The state machine is driven by:
  • Data binding: transition conditions can check view model properties, so your app can change a value and the state machine responds.
  • Listeners: respond to pointer, keyboard, and other interactions on the artboard.
  • Time: a transition can wait until a timeline finishes, or reaches a set point, with Exit Time.
Older files use Inputs to drive state machines. Use data binding for new work.

Creating a state machine

Every artboard starts with one state machine, and you can add as many as you need. Your app chooses which state machine to play at runtime.
1
In the Animations list, click + and select State Machine.
2
Select the state machine to open its graph in place of the timeline.
The graph is where you add states and connect them with transitions. A new state machine’s graph has the Entry, Any State, and Exit states. See Default states. The state machine graph with the Entry, Any State, and Exit states, and the Animations list on the left To preview the state machine, click the play button above the graph. It runs on the stage the same way it will at runtime, so you can click, hover, and change bound values to test it.

Layers

A layer plays one state at a time. To play more than one animation at once, add more layers. For example, one layer can play a character’s idle and walk cycle while another layer plays its blinking.

Adding a layer

Click + in the Layers tab. Adding a new layer

Layer order

When two layers animate the same property, the layer lower in the list wins. If your layers animate different properties, their order doesn’t matter. To change the order, drag layers up or down in the Layers tab. Reordering state machine layers by dragging them in the Layers tab

Layer options

Click the … button next to a layer to open its options. Layer menu with Delete, Duplicate, Disable, and Snapping
  • Delete: Deletes the layer.
  • Duplicate: Creates a copy of the layer, with its states and transitions.
  • Disable: Stops the layer from playing without deleting it. Useful for testing one layer at a time.
  • Snapping: Turns snapping on or off for states and transitions in the layer’s graph.