Listeners

Respond to interactions, property changes, and events in your Rive file.

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	Description
View Model Property Change*	Fires whenever the selected view model property changes.**
Rive Event*	Fires when a Rive event is fired.
Pointer Enter	Fires when the pointer enters the target area.
Pointer Exit	Fires when the pointer leaves the target area.
Pointer Move	Fires repeatedly while the pointer moves over the target area.
Pointer Down	Fires when the pointer is pressed down on the target.
Pointer Up	Fires when the pointer is released over the target.
Click	Fires when the target is clicked or tapped.

* Available when the listener target is an artboard or nested component.
** View Model Property Change listeners fire whenever the selected property changes. You can’t specify an expected value or direction of change. For example, a Boolean listener fires when the value changes from true to false or from false to true.

Pointer Exit only fires while Rive can read the pointer position. If the target touches the edge of the canvas or container, moving the pointer out of the container may not trigger Pointer Exit because the pointer has left the area Rive is tracking.

We strongly recommend using Data Binding to communicate between artboards instead of relying on nested Rive events.

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.