Once your segments are ready and inputs are defined, you can start wiring up behavior using transitions between states.

A state is a visual moment — a specific segment of your animation. Transitions are the logic that moves the animation from one state to another, based on conditions you set.

This is where everything comes together: inputs, interactions, and segments start to drive the flow.

🟢 State Nodes & Connections

In the Interactivity Panel, each state appears as a draggable node. You can connect them visually:

• The left side of the node (green) is the input — where transitions come in.
• The right side (red) is the output — where transitions lead out.

To create a transition:

• Drag from the red handle of one state to the green handle of another.
• Configure the transition conditions (called guards).

📐 How Transitions Work

Transitions define the rules for when to move from one state to another. These rules are based on the current values of your inputs.

Example — a button interaction:

• Idle → Hover — only when Hovering = true
• Hover → Click — only when Clicking = true
• Hover → Idle — only when Hovering = false