Skip to main content
Listeners let you respond to interactions, property changes, and other events in your Rive file. When a listener is triggered, it can perform actions such as updating property values, firing Rive events, or running other logic. A listener has three main parts:
  • Target: what the listener watches
  • Listen to: what needs to happen to trigger the listener
  • Action: what happens in response
Use listeners to create dynamic experiences that react to user input and changes in state.

​
Creating a Listener

1
Select the element you want the listener to respond to.
To listen for a view model property change or Rive event, select the artboard or nested component instead.
2
In the Animations panel, click the icon next to the State Machine to show listeners.
3
Click the + icon to create a new listener and select the action the listener should perform.
4
With the listener selected, set its Target, Listen To, and other options in the right sidebar.
With a listener selected, you’ll see its options in the right sidebar.

​
Target

The Target determines what the listener watches. The target can be an element in your scene, an artboard, or a nested component. Use an element as the target when you want to listen for interactions on that element, such as clicks or drags. Use an artboard or nested component as the target when you want to listen for view model property changes, Rive events, or other events that belong to that artboard or component.

​
Opaque Target

Opaque Target controls whether pointer events stop at this listener’s hit area or continue through to elements behind it. When Opaque Target is enabled, pointer events stop at the target. When it’s disabled, pointer events can pass through the target and trigger other listeners underneath.

​
Listen To

Listen to is the condition the listener watches for. When the condition is met, the listener is triggered. Listen to options include:
  • Pointer events, such as Click and Pointer Up
  • View model property changes, when the target is an artboard or nested component
  • Rive events, when the target is an artboard or nested component
We strongly recommend using Data Binding to communicate between artboards instead of relying on nested Rive events.
You can’t specify an expected value for a view model property change. The listener fires whenever the property changes, regardless of the direction of the change. For example, a Boolean listener fires whether the value changes from true to false or from false to true.

​
Listener Actions

A listener action runs when a listener is triggered. Actions include:
  • Changing a view model property
  • Aligning an element to a target
  • Reporting an event
  • Triggering a scripted action
  • Firing a Rive event
  • Updating an input value (deprecated)
To add a listener action, click the + icon in the panel below the State Machine Graph. You can add multiple actions to a single listener.
You can data bind values in listener actions.

​
Align Target

The Align Target action positions an object so it follows the pointer when the listener is triggered within the listener area. Use the Target Picker to select the object you want to align. Enable Preserve Offset to maintain the original distance between the object and the pointer when the action is triggered. When Preserve Offset is disabled, the object aligns directly to the pointer.