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.

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 User Action, and a Listener Action.

​

Target

The Target determines where to listen for the user action. Hit Areas In most cases the Target defines the interactive area that responds to user actions—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 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.

​

User Action

User Actions are the interactions the listener is listening for. The drop-down menu below the Target button allows you to change which User Action 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.

​

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 Drop Down

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 user action is triggered. 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 specified user action occurs 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.