Bind Direction

3m 19sPublished Oct 1, 2025

SummaryVersion Notes (Draft)

This lesson covers the concept and application of Bind Directions inside Rive's Data Binding framework. The primary objective is to teach users how data flows between the View Model (Source) and the graphical canvas elements (Target). By walking through a clear example connecting a circle's X position to a numerical input variable, the video breaks down default source control, target-to-source mapping, bidirectional synchronization, and bind-once initializations, providing full control over interactive data architecture.

Directional Use Cases: Default workflow (Source to Target) works best for driving dashboard UI elements via code inputs. Target to Source is optimal when visual interactions need to export variables to code (e.g., custom controller joysticks). Bidirectional handles multi-input synchronized controllers, while Bind Once is highly recommended for static components requiring one-off layout placement upon loading to save resources.
Bidirectional Value Resolution: When establishing a bidirectional stream, data conflicts can arise during the initial frame if canvas layouts and database defaults don't match. Choosing between Prefer Target or Prefer Source guarantees clean rendering pipelines without unexpected visual jumps.
Workflow Navigation Tips: Managing data links requires jumping between layout elements and values. Utilizing the Command + 1 shortcut brings instantaneous focus back to the primary Hierarchy tree, helping keep layouts organized.

📌 Key Points

Understand one-way vs two-way binding and when each bind direction makes sense.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Default Bind Direction Flow:

Setting up the baseline environment. The current Artboard is mapped to view model one with a default number input at 0. Select the circle, navigate to its X Position parameter, right-click to trigger Data Bind, and pair it with the number. Upon hitting play, the circle snaps from 250px to 0px because the source controls the target by default.
00:00:57

Target to Source Mode:

Right-click the X position parameter and select Update Bind. Toggle the workflow direction configuration to Target to Source. When hitting play, the logic inverts: the circle's spatial layout now drives the property value, leaving the circle at 250px while changing the view model number to 250.
00:01:35

Bidirectional Setup and Conflict Preferences:

Open the bind settings again and activate the Bidirectional toggle. Note that bidirectional bindings introduce two conflict resolution flags: Prefer Target Value and Prefer Source Value. Set it to prefer the target value for this setup so the circle holds its canvas coordinates on play.
00:02:06

Bidirectional Data Stream Testing:

Witnessing the synchronization power of the two-way data stream. Switch to the Hierarchy panel by pressing Command + 1, select the circle, and drag it manually to an X position of 93—the numeric field updates to 93 simultaneously. Conversely, changing the value inside the data panel actively translates the canvas circle in reverse.
00:02:39

Bind Once Operational Flow:

Updating the active link parameters and selecting the Bind Once calculation pattern (configured with source-to-target tracking). Hitting play triggers an instantaneous one-time update, snap-formatting the circle's initial location to match the default variable value of 0.
00:02:53

Verifying Bind Once Expiry:

Demonstrating the decoupling effect of single bindings. While playback runs live, manipulating the view model variable no longer changes the circle's transform parameters. Selecting the circle via the structural tree and dragging it manually proves that the connection expired completely after the initial frame.