Buttons, state machines and data binding

A Rive file can respond: to the pointer, to taps, and to values your app sets. Your assistant builds the interaction, then drives it in Rive's own runtime to show it really responds before you ship it.

You bring
A description, or a Rive file to make interactive.
You get
A .riv (or .rev) with state machines, listeners and view models, and proof that it responds.
Needs
Nothing beyond the install. Testing draws in Chrome or Edge.

Ask your assistant

  • Make a like button that pops when tapped and stays filled.
  • Add hover and press to the shape called Card in menu.riv.
  • Make a toggle switch and a progress bar my app can set.
  • My file still uses state machine inputs. Move it to data binding and tell me what to change in my React code.
  • My toggle doesn't respond when I click it. Test it and tell me why.

How it works

The fastest routes

  • A ready-made component: spawn_ui_component places a button, toggle switch, checkbox, slider, text input, progress bar and more, each with its own state machine. list_ui_prefabs lists them all.
  • Make an existing shape react: add_interaction with hover, press, tap, or hover and press together. It builds the animations, state machine, inputs, listeners and transitions in one go.

Built by hand

  1. One animation per state, with create_animation and add_keyframe.
  2. A state machine with create_state_machine, and its inputs: add_trigger, add_bool_input, add_number_input.
  3. States with add_state, and transitions between them by name with add_transition: on a condition, or when an animation ends.
  4. add_listener turns pointer events (enter, exit, down, up) on a shape into input changes.

Lists of cards filled from data use add_artboard_component_list; scrolling panels use add_scroll_constraint; nested components use add_nested_artboard.

Data binding (view models)

Rive is moving from state machine inputs to view models: properties your app reads and sets by name.

  • add_view_model and add_view_model_property for each value (number, true/false, text, colour, trigger, list, image), an instance with add_view_model_instance, and add_data_bind to connect a property to what it drives.
  • add_image_slot makes a picture your app swaps at run time.
  • verify_data_binding catches bindings that would never update.
  • migrate_to_data_binding moves an existing file off inputs. It rewrites the inputs, conditions, listeners and text runs onto a view model, runs the old and new file side by side in Rive's runtime, and refuses to write one that behaves differently. It also writes the code changes your app needs, for Web, React, Android, iOS and Flutter.

Prove it responds

Good to know

  • Name your shapes. Listeners and keyframes find things by name.
  • inspect_riv_interface lists what an app can set on a file: its state machines, inputs, view models and events.
  • Opening an existing file to change its interactions: see Edit a file you have.

Related