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.

​
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.

​
View Model Change

This Listen to option is only available when the listener target is an artboard or nested component. View Model 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.

​
Rive Event

This Listen to option is only available when the listener target is an artboard or nested component. We strongly recommend using Data Binding to communicate between artboards instead of relying on nested Rive events.

​
Pointer Exit

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.

​
Focus

Turn on Focusable for an element to add it to the focus order. Use Focus listeners to react when the element gains focus and Blur listeners to react when it loses focus. The Focus Target action moves focus to a specific element, and Focus Traversal steps through the focus order.

​
Keyboard

To react to keys, add a Keyboard listener and choose On Key Down or On Key Up. Keys go to the element that has focus. To try keyboard input in the editor, press Option+Space to play with keyboard capture on, or click Toggle Keyboard Capture in the playback header. This lets keys reach your file instead of triggering editor shortcuts.

​
Gamepad

Add a Gamepad listener to drive a state machine from a controller’s buttons and sticks. Scripts can listen to gamepad events too. The gamepad icon at the bottom of an open file turns green when Rive can see your controller.

​
Text Input

Pick the Text Input tool in the toolbar and draw an editable text field. Draw it over a layout to add it to that layout. Use the Text Input section of the Inspector to set the field’s font, colors, placeholder, selection color, background, and single line or multiline mode. Add a Text Input listener to react when text is entered while the field has focus.

​
Semantic Action

The Semantic section of the Inspector gives an element a role, such as button, checkbox, slider, or text, plus its traits and state. This helps screen readers read and navigate your file. Use Semantic Tap, Semantic Increase, and Semantic Decrease listeners to respond to screen reader actions. See Semantics for details on configuring semantic actions.

​
Listener actions

A listener action runs when a listener is triggered. 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, and 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.