A wild listener appears!

A few weeks ago, we added listeners to the Rive state machine, making it easier than ever to create interactive motion graphics. Today we’ve added a new Listener type: pointer move, and a new Listener action: align target.

These new features enable mouse tracking that works directly on the artboard. In this post, I’ll quickly show you how to utilize these new features.

Creating mouse tracking

Like other listener types, the pointer move listener type allows us to fire off our inputs to change states in the state machine. We’ve already covered how to set up listeners in a previous blog, but let’s look at this new listener action: align target.

The align target action tells the target to align itself with the mouse cursor. This allows us to create several things like animations at a pointer location or 2.5d depth effects.

To add this action to a listener, or add to an existing listener, hit the plus button next to the actions section in the properties panel, and select align target.

Now, we need to configure the listener.

First, we need to define the area where this listener will work. Create a hitbox using one of the procedural shape tools, or create a custom area with the pen tool. Be sure to remove the fill.

Next, use the target button on the listener to define the area it should be listening to.

Change the listener type to pointer move. This will ensure that the listener works when the cursor is moving.

Now, use the target option under the listener action and target the object you want to clamp to the cursor.

When you play the state machine, you’ll notice that the assigned target now moves with the cursor. Combine this with bones, groups, and constraints to make some cool effects!