Listeners

Listeners let designers create interactive behavior without the use of code.

Listeners let designers create interactive behaviors—like clicks, hovers, and drags—directly within Rive, without needing code. For example, you can attach Pointer Enter, Pointer Exit, and Click listeners to a button. When triggered, these listeners can update data bindings, set inputs, fire events, and more—enabling dynamic, interactive experiences at runtime.

Creating a new Listener

1. In the Animations tab, select your State Machine.
2. In the Listeners tab, click the plus icon.

If you have an object selected when creating a listener, it will automatically be designated as the target.

With the new listener selected, you’ll see its options displayed in a new panel at the bottom of the State Machine Graph and to the right of the Graph.

Elements of a Listener

A listener consists of three parts: a Target, a Listener Condition, and a Listener Action.

Target

The Target determines where to listen for the Listener Condition.

Hit Areas

In most cases the Target defines the interactive area that responds to user interactions—similar to a hitbox in game development. When a user interacts with this area (e.g., by clicking or hovering), the associated listener is triggered.

It’s usually best to use shapes as targets—for example, an ellipse or rectangle with 0% opacity. If you use a Group as a target, the shapes within the group will serve as the interactive area.

To select a target, click the Target icon and choose an object from the artboard or the Hierarchy panel.

Note that having an object selected when you create a listener will automatically assign the selected object as the target of the listener.

Listening to Events on Components

We strongly recommend using data binding to communicate between artboards, rather than relying on nested Events.

Setting an Artboard or Component as the target allows you to listen for Events fired from that Artboard.

Opaque Target

The Opaque Target option determines whether or not pointer events will pass through the hit area, potentially triggering multiple Listeners at once.

Listener Condition

The Listener Condition defines what the listener is listening for. This includes pointer-based interactions as well as data-driven triggers such as View Model property changes. The drop-down menu below the Target button allows you to change which Listener Condition the listener checks for.

Available actions include:

Pointer Down – Mouse down or finger press.

Pointer Up – Releasing a mouse click or finger press.

Pointer Enter – A mouse or finger entering the target area.

Pointer Exit – A mouse or finger exiting the target area.

Pointer Move – Any mouse or finger movement within the target area.

Click – A combination of pointer down and pointer up within the same target area.

Listen for Event – Only visible if the target is an Artboard or Component. If multiple events exist, use the dropdown to select the specific one.

View Model Property Change – Triggers when a selected View Model property changes. Only available when the Artboard is set as the Target. Use the dropdown to select the specific property to listen to.

Note that it is not possible to specify an expected value—the listener fires whenever the property changes, regardless of the direction of the change. For example, a Boolean listener will fire whether the value changes from true to false or from false to true.

Since General Events are deprecated, View Model Property Change is the recommended way to react to changes happening inside a State Machine. In particular, Triggers are a direct replacement for Events: a Trigger can be fired from within the State Machine (e.g. on a state transition), and a listener set to View Model Property Change on that Trigger property will fire in response—giving you the same notification pattern without relying on Events.

Listener Action

A Listener Action defines what happens when the user interaction occurs.

To add a Listener Action, click the plus icon in the panel below the State Machine Graph. You can add multiple actions to a single listener.

View Model Change

Updates values within your View Model Instance. This is the preferred way to communicate from your Rive file to your runtime code. By default, listeners are set to View Model Change, unless an artboard or component instance is the target of the Listener.

View Model Dropdown

The View Model Dropdown lets you select which View Model Property you want the Listener to change.

Note that listeners can change the properties of any View Model in the file, even if it isn’t assigned to the Artboard.

Value vs Property

Once you’ve selected which property you’d like the Listener to modify, you can set it to a specific Value or to equal a different view model property.

Value

If you select Value, you can use the input field to change the specific value you’d like the property set to. The value type changes depending on the property.

View Model Property

Selecting a property will set the View Model Property in the listener equal to another.

Note that we can set the View Model Property to be equal to itself.

Adding a Converter

If we choose to set a View Model Property equal to another View Model Property, the converter icon appears to the right of the View Model Property. This lets us apply a converter to a property.

For example, we can set Number to Number, but attach an add one converter. Every time this listener fires, we can increase our Number property by one.

Report Event

Fires an event each time the Listener Condition is met. This is the default option when an artboard or component instance is the target of a listener.

Align Target

The Align Target action positions a target object to follow the pointer when the Listener Condition is met 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 was triggered. When unchecked, the object will align directly to the pointer’s center.

Input Change

Allows the listener to change a defined input—such as toggling a boolean, firing a trigger, or setting a number input to a specific value.

This is useful for creating interactive behaviors like hover states or click effects directly on the Artboard.