Bind your data for Quadraviz

TL;DR — Build a Main view model in Rive with nested children. Populate it with instances and triggers. Bind it to the artboard. Quadraviz pushes data straight in.

#What you're building

This walkthrough uses a waiting-screen example with:

in and out animations
An ads loop
A gradient loop
An idle state

Dynamic elements:

Team logos, names, and colors
Event name and stage
Sponsor / advertisement images
A countdown timer
Animation triggers

#A note on opacity

All layers start at 0% opacity. Set 100% opacity keyframes on every animation state where the layer should be visible. If a layer disappears unexpectedly, this is usually why.

#Step 1 — Create view models

In the Rive editor, build a parent view model called Main. Add children:

Team
EventData
Ad

Make these instances of reusable view models, not duplicated structures. Instances let you bind the same shape multiple times without rebuilding.

#Step 2 — Populate Main

Inside Main, add:

Team instances (one per team in the match)
Ad instances (one per sponsor slot)
Event data (name, stage, round)
A timer (number type)
Two triggers: in and out

#Step 3 — Bind to Rive elements

Wire each piece of data to the right element:

Bind Main to the artboard. This is the root connection.
Ad images — connect via data binding to each ad slot's image layer.
Team colors and names — bind to their respective text and shape layers.
Event data — attach to the event name and stage text layers.
Timer — pipe the number through a converter into the timer text layer (numbers display as strings).
Triggers — wire the in and out triggers to the state machine transitions of the same name.

#Step 4 — Test it

Before uploading, fire each animation in the Rive editor and confirm:

Logos appear when their bind fires
Names and colors swap correctly
The timer shows
in and out transitions run cleanly

Anything that doesn't update is almost always a missing keyframe or an unbound element. Fix it before exporting, not after.

#Next steps

Upload your Rive file — Bring this animation into Quadraviz
Smart Inputs — Bind Quadraviz resources to your view model fields