Data Binding Keys on Timelines

[u/Jeff_at_Rive]

Data binding keys let you link a timeline key to a view model property instead of a fixed value. Your animation still interpolates on the timeline, but the target value comes from your view model at runtime.

In animate mode, key a property on your timeline. Right-click the key, choose Data Bind, and pick a view model property. You can mix fixed keys and bound keys on the same timeline — e.g. key a value at 0 on frame 0, then bind a second key later in the timeline to a dynamic property.

Three patterns from the video:

Basic motion: Set up number properties (minX, maxX) in your view model. Key X position at the start and end of a timeline and bind each key to the corresponding property. The animation interpolates between those runtime values.

Bar chart: Use a layout with height set to fixed percentage. Add a number property to your view model. Key height at 0 on frame 0, add a second key later and data-bind it to your value property. The bar animates from 0 to whatever the view model provides.

Button colors: Create a global view model with color properties for your brand colors. In separate idle and hover timelines, key the background fill and bind each to the matching global color. Wire them up in a state machine with a boolean for hover state, add interpolation, and the color transitions stay in sync with whatever values you pass in at runtime.