Property Groups

2m 00sPublished May 20, 2025

SummaryVersion Notes (Draft)

This lesson introduces the functionality of Property Groups within Rive. The core objective is to address a specific production bottleneck: while Data Binding is typically designed to consume external runtime data (such as APIs or user info), designers often need to animate those data-driven variables directly inside Rive's Timelines. By establishing an animate-ready number inside a Property Group and mapping it onto a View Model property, the video showcases how to use layout animations to dynamically update variables and drive interface text elements.

Keyframing Data Fields: The fundamental architectural purpose of Property Groups is to offer keyframe-capable variables within timelines. While baseline View Models serve as ingestion pipes for external data, Property Groups give design teams the autonomy to simulate data behaviors locally.
Critical Bind Direction Adjustment: When wiring a Property Group parameter into a View Model slot, switching the Bind Direction configuration to Target to Source is mandatory. This tells the system that the layout target (the timeline animation loop) is driving the data source. Leaving this on default breaks the pipeline.
Multi-Tiered Data Pipeline: This tutorial outlines a sophisticated procedural connection chain: Timeline Keyframes -> Property Group Variable -> View Model Property -> String Converter -> Text Run Primitive. Mastering this topology is essential for scaling complex responsive interfaces.

📌 Key Points

Group related properties together to make larger data models easier to manage.

📝 Notes

Markdown

0 chars

Step by Step

00:00:02

Problem Statement and Context:

Ross reviews the existing data binding architecture where a view model number property is formatted via a converter to drive a Text Run. He highlights that while standard view model properties receive external code cleanly, they cannot be natively keyframed inside the timeline editor.
00:00:46

Creating a Property Group:

Clicking the layout tools panel to instantiate a new Property Group directly on the Artboard. The right-side inspector reveals it contains standard structural attributes like Position (left unaltered for this exercise).
00:00:58

Adding an Animatable Number:

Within the Property Group header options, users can add numbers, strings, or booleans. Click to generate a new Number property—this specific subset variable is completely exposed to keyframe operations in timelines.
00:01:04

Keyframing the Variable:

Opening up the Timeline workspace and changing the animation loop type to Ping-Pong. Drop an initial timeline keyframe at 0, slide to the end of the timeline to update the value to 100, and drop a closing keyframe to create a shifting numerical loop.
00:01:27

Mapping Property Group to View Model:

Right-click the animated number within the Property Group configuration and trigger Data Bind. Pair it to the active View Model number property, and explicitly toggle the mapping execution flag to Target to Source.
00:01:45

State Machine Integration Testing:

Accessing the active State Machine graph and hitting play. The keyframed timeline number cleanly drives the view model parameter, which subsequently channels data through the string converter to automatically step the text readout, bridging design interpolation with data fields.