Smart inputs

What are Smart Inputs?

A Smart Input acts as a bridge between your resources and your animation.

Each Smart Input is tied to a specific collection and then linked to an element or property in your Rive animation.

How It Works

1. Create a Smart Input
   Name it clearly (e.g., teamName, scoreBlue, backgroundColor).

2. Bind it to a Resource Field
   Choose a resource and the specific field to bind.

3. Link to Rive Animation
   Select the artboard and state machine. Then, choose the element (text, image, shape, etc.) that will be updated.

4. Save & Trigger
   Once set, the Smart Input will automatically respond to updates—manually or via scenes.

How to Create a Smart Input

1. Create a new animation
   During the configuration scroll down to the node editor.

2. Click "Create Smart Input"
   Give your Smart Input a clear name, like scoreTeamA, playerPhoto, or highlightColor and press Enter.

3. Bind it to a Collection

   • Select the collection(e.g., a Player or Team)

4. Connect the Smart Input attributes to your View models.

5. Optionally Add User Inputs
   You can add User Inputs.

Tip: If you create multiple Smart Inputs with the same name, and link them to the same collection, they will be controlled by the same controller.

This means:

• You can control multiple elements across different animations or artboards in sync

• Updating one Smart Input value will automatically update every linked instance

Here is a simple example of a smart input set up:

Best Practices

• Use descriptive names for your Smart Inputs (avoid vague names like input1).

• Group related Smart Inputs for clarity (e.g., prefix with teamRed_, player1_).

• Reuse Smart Inputs across scenes where possible for consistent control.