Skip to main content

State Machine

What Is a State Machine?​

A State Machine connects your animations and defines the rules for moving between them. Think of it like a traffic light controller: it knows which light is on, watches for the right signal, and switches to the next light at the right moment.

State Machines bridge design and development. Designers control the logic visually. Developers implement it with minimal code.

Use a State Machine to build interactive graphics — buttons, characters, UI components — that respond to user input, data changes, and events.

Every artboard gets one State Machine by default. Create more by clicking + in the Animations List and choosing State Machine.

Anatomy of a State Machine​

A State Machine has four main parts:

  • Graph — The visual canvas where you add states and draw transitions.
  • States — Timeline animations that represent a condition (e.g. Idle, Hovered, Clicked).
  • Transitions — Arrows connecting states. They define when and how the machine moves from one state to another.
  • Layers — Multiple layers let different parts of the graphic run independent state logic at the same time.

The Graph​

The Graph replaces the Timeline when a State Machine is selected. This is where you arrange states and connect them with transitions.

State Machine Graph

States​

A state holds a timeline animation. It represents one condition your graphic can be in.

For example, a button might have three states:

  • Idle — The button at rest
  • Hovered — The button when the cursor is over it
  • Clicked — The button when pressed

States example

Transitions​

Transitions connect states. They form the map the State Machine follows to move from one animation to the next.

Each transition has conditions. For example: "move to Hovered when the pointer enters the graphic."

Creating transitions

Next Steps​