Align Target

2m 47sPublished Sep 25, 2025

SummaryVersion Notes (Draft)

This lesson introduces the advanced Align Target capability within Rive's Listeners system. Instead of strictly manipulating variables, listeners can directly capture a pointer's runtime coordinates to drive another layer's position. This zero-code mapping framework streamlines the design of micro-interactions like eye-tracking or reactive cursor UI without complex web geometry scripting.

Zero-Code Coordinate Space Projection: Traditionally, cross-platform mouse tracking demands registering global container listeners and mapping raw mouse client coordinates into localized canvas vectors. Rive handles this layout calculation under the hood, passing pure spatial updates directly to target nodes.
Industry Practice (The Invisible Hitbox): Using an un-filled, un-stroked, or hidden shape layer as a proxy container is a standard approach. Scaling it to fit the background isolates interactive zones from rendering pipelines, giving you a safe boundary for user interface triggers.
Advanced Rigging Extensions: Align Target shines brightest when combined with bone constraints. For instance, binding a custom controller to follow the pointer while constraining it via a Distance Constraint allows teams to animate eyes, hair, or limbs that dynamically lean towards user focus nodes effortlessly.

📌 Key Points

Use Align Target to make objects follow cursor position.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Establishing the Trigger Source:

Select the Square layer on the artboard and click the plus button in the Listeners panel, which automatically defines the selected shape as the listener's interaction boundary.
00:00:40

Shifting to Align Target Mode:

Click the minus icon to clear the default View Model property assignment, open the actions dropdown, and swap the behavior mode to Align Target.
00:01:02

Binding the Target Object:

Click the target input field within the Align Target block, navigate into the object hierarchy tree, and pick the Circle layer to establish the follower linkage.
00:01:22

Evaluating Pointer Entry Snap:

Retain the default Pointer Enter event and preview the state machine. The instant the cursor enters the Square's perimeter, the Circle snaps immediately to the exact entrance coordinate.
00:01:47

Configuring Continuous Frame Tracking:

Change the listener's event type to Pointer Move. Run the instance again to confirm that the Circle tracks the cursor smoothly across every frame as long as the mouse stays inside the bounds.
00:02:11

Full-Canvas Invisible Integration:

Scale the Square up until it covers the entire Artboard, then toggle its visibility off. Play the state machine to verify that the Circle continuously follows the pointer seamlessly across the entire canvas.