Transitions

Documentation Index

Fetch the complete documentation index at: https://uat.rive.app/docs/llms.txt

Use this file to discover all available pages before exploring further.

Transitions supply the logical map for the state machine to follow. There are a number of considerations and configurable properties for transitions that we will cover below. Note that we’ll briefly discuss Inputs as well, so be sure to read more about those as well here.

​

Creating a new Transition

To create a transition, place your mouse near the state you want to leave until you notice the ellipse appear. Click and drag the ellipse to the state you want to transition to. Once you’ve connected two states, you’ll notice an ellipse with an arrow icon indicating the transition’s direction. Note that you can create multiple transitions from one state to another. Each of these transitions can require a different condition to be met, which will fire the transition, thus giving you the ability to make “or” conditions.

​

Configuring a Transition

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.

​

Transition properties

The transition properties allow you to customize how a transition occurs.

​

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. If we increase the duration, you’ll notice that the higher the number, the longer the transition takes. In a way, transitions act as their own animation. The starting properties (coming from the state your state machine is leaving from) will be interpolated to the ending properties (the starting properties of the state your state machine is going to). If the starting properties are the first key on a timeline, and the ending properties are the second key, the duration is the timing between those two keys. Transitions are much more complex than this, but thinking about transitions this way will help you diagnose issues with your state machine. Much like keys on our timeline, we can change the interpolation, which we’ll discuss more below.

​

Exit Time

Exit Time tells the state machine how much of the state must play before transitioning. By default, Exit Time is unchecked. If you want to enable the Exit Time, use the check box. Once the setting is enabled, you can use either a time value or percent. For example, if you want the state machine to play the entire animation before transitioning, you can either enter the duration of the animation, or use 100%.

​

Pause when exiting

The Pause When Exiting option pauses the animation you are leaving from during the transition. As we discussed in the duration section, when a transition happens, properties from the first state are mixed with the first key of the next state. In reality, the animation your state machine leaves from continues to play as the transition happens.

​

Conditions

Conditions are the rules for our transitions. Without conditions, our transitions would continuously fire and our state machine would likely look either glitchy, or only play a single animation. Conditions require us to define some inputs, which you can read more about here.

​

Adding a new condition

To add a new condition to a transition, hit the plus button next to the Conditions section. Adding a new Condition Each new condition provides a dropdown showing all of the inputs you’ve added to the State Machine. The configuration options will be different depending on the input type you select. Note that you can add multiple conditions to a single transition to create an “and” transition.

​

Configuring a Boolean

When you configure a boolean, you can decide if the transition happens when said boolean is either true or false.

​

Configuring a Number

When you configure a number input, you can tell the transition to happen when a numerical condition happens such as equalling a specific number, being greater than or less than a specific number.

​

Configuring a Trigger

When you add a trigger input to a transition, you are telling the transition to fire when that trigger occurs.

​

Custom Transitions

Transition Condition Scripts let you define custom conditions when built-in comparisons aren’t enough—such as transitions that depend on complex logic or multiple view model properties evaluated together.

​

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 hold interpolations. Note that the interpolation between states is most effective when your transition duration is longer. If you are unfamiliar with the basics of Interpolation, read more Interpolation (Easing).

​

Disabling a Transition

You can temporarily disable a transition without deleting it. A disabled transition is ignored by the state machine — its conditions will not be evaluated and it will not fire — until you re-enable it. There are two ways to toggle a transition’s enabled state:

• From the transition panel: select the transition and click the enable/disable icon in the panel.
• From the canvas: right-click the transition and choose Disable transition (or Enable transition if it’s already disabled).

Both actions do the same thing. Disabling is useful when you want to isolate part of a state machine for testing, or temporarily remove a path without losing its configuration.