{image && })
}
{riv && !image && }
{learnByExample ? "Learn by Example" : title}
{description && !learnByExample &&
{{description}
} {source && source.length > 0 &&{source.map((item, index) => { if (source.length == 1) { return <>Open the Rive file.; } if (index == 0) { return <>Open Rive file 1; } return <>, file {index + 1}; })}
}
{runtimesInOrder.map(currentRuntime => {
if (runtime && currentRuntime !== runtime) return;
return
}
Once you connect two states, the transition path shows a circle with an arrow icon indicating the transition direction. In this example, the State Machine can move from Timeline 1 to Timeline 2, but not from Timeline 2 back to Timeline 1.
To allow the State Machine to move back to Timeline 1, create another transition path starting from Timeline 2.
You can create multiple transitions between the same two states. Each transition can have different [conditions](#transition-conditions), allowing you to create “or” logic.
## Transition Conditions
Conditions determine when a transition can occur.
#### The Source Value
Conditions can be driven by many different sources, including:
* View Model properties
* Events
* Built-in properties such as artboard width, height, and ratio
#### The Operator
Conditions can use comparisons such as equals, does not equal, greater than, greater than or equal to, less than, and less than or equal to. The available comparisons depend on the type of value being compared.
#### Comparison Value
The comparison value is the value the source value is compared against.
You can enter a fixed comparison value, such as `true`, `100`, or `"mobile"`. You can also data bind the comparison value to another property, allowing the transition to compare against dynamic data.
For example, a transition might occur when `speed` is greater than a data-bound `walkThreshold` value.
### Adding Multiple Conditions
You can add multiple conditions to a single transition. All conditions must be met before the transition occurs.
## Transition Properties
Once you’ve added a transition, selecting the direction indicator will allow you to configure the transition. There are three different sections to the transition panel, the transition properties, conditions, and interpolation.
### Duration
The duration property describes how long it takes for a transition to occur.
The duration is set to zero by default, meaning the transition happens immediately. So, when we transition between these two animations, it appears as though the object snaps from one side of the artboard to the other.
### Pause Source When Exiting
**Pause Source When Exiting** pauses the animation in the state you are leaving while the transition plays.
In this example, the up-and-down motion pauses as soon as the transition begins.
### Allow Exit During Transition
**Allow exit during transition** controls whether the State Machine can leave a transition before that transition finishes.
For example, if a button is transitioning from **Idle** to **Hover** and the user moves their cursor away, **Allow exit during transition** lets it transition back to Idle immediately.
### Interpolation
You can add interpolation to your transition at the bottom of the Transitions Panel. By default, the interpolation is set to linear, but you can use the cubic and other interpolations.
If you are unfamiliar with the basics of Interpolation, see [Interpolation (Easing)](/editor/animate-mode/interpolation-easing).
## Actions
Transitions can also perform actions when the transition occurs.
Unlike conditions, which determine whether a transition can happen, actions perform an operation when the transition is triggered.
Actions can be used to:
* Set property values
* Report events
* Align targets
* Control focus
* Fire a scripted action
