Rive State Machines

  • rive listner’s action > input change

In Rive, you can switch between different State Machines without using JavaScript by utilizing Events and Inputs within the Rive Editor itself. However, note that fully dynamic switching between State Machines at runtime typically requires code (JS/Flutter/etc.).

That said, here are ways to simulate State Machine switching inside Rive Editor without external code:


Method 1: Use a “Master State Machine” to Control Others

If you have multiple State Machines (e.g., Movement and Combat), you can create a “Controller” State Machine that toggles between them using Boolean Inputs.

Steps:

  1. Create a new State Machine (e.g., Controller).
  2. Add Boolean Inputs (e.g., isInCombat).
  3. Use Conditions to enable/disable animations from other State Machines.

Example Flow:

  • If isInCombat = false → Play Movement animations.
  • If isInCombat = true → Play Combat animations.

Limitation: This doesn’t truly “unload” a State Machine but rather mutes one while activating another.


Method 2: Use a Single State Machine with Sub-States

Instead of multiple State Machines, combine them into one using nested logic.

Steps:

  1. Create “Mode” Boolean Inputs (e.g., isWalkingMode, isFightingMode).
  2. Inside a single State Machine:
    • Group Walk, Idle, Run under isWalkingMode = true.
    • Group Attack, Block under isFightingMode = true.
  3. Use Transitions to switch modes.

Example:

Entry → [isWalkingMode?] → Walk
       [isFightingMode?] → Attack

Method 3: Use Events to Trigger State Changes

Rive supports Events (timeline markers) that can fire when an animation reaches a certain point.

Steps:

  1. Add an Event in an animation timeline.
  2. In the State Machine, use the Event to trigger a transition.

Example:

  • An Attack animation finishes → Fires attackEnd Event → Returns to Idle.

Limitation: This only works within one State Machine, not across multiple ones.


Method 4: Export and Manually Switch in Host App (No Code Workaround)

If you don’t want to use JavaScript/Flutter, you can:

  1. Export multiple .riv files (each with its own State Machine).
  2. Use a no-code tool (like Webflow, Unity, or Unreal Blueprints) to swap Rive files based on UI interactions.

Example:

  • Button A → Loads character_movement.riv.
  • Button B → Loads character_combat.riv.

Which Method Should You Use?

MethodProsConsBest For
Master State MachineNo code neededLimited to toggling, not true switchingSimple mode changes
Single State MachineClean logicCan get complexGames/UI with modes
EventsBuilt into RiveOnly works per-State MachineAnimation sequencing
Multiple .riv FilesTruly separate logicRequires external toolNo-code platforms

Best Solution?

If you absolutely cannot use code, Method 1 (Master State Machine) or Method 4 (Multiple .riv Files) are your best options.

Would you like a step-by-step Rive Editor guide for any of these? 🎨