Motion your developers
can work with.

How a character reacts to app inputs

The application owns product truth: a request has started, a task is complete, or audio is playing. The animation receives that state and presents a suitable reaction. Keep business logic outside the animation so the UI remains correct when motion is paused or unavailable.

Boolean, Number and Trigger controls

Existing input-based files can use a Boolean for a persistent condition, a Number for a measured or blended value and a Trigger for a one-off action. These are control types, not guaranteed names in your asset.

Rive’s current Web API recommends data binding for new work. The older input inspection API remains available but is deprecated. For new assets, agree on named view-model properties and observers rather than assuming a legacy input list.

Transitions and completion

A state machine needs entry, resting and recovery behaviour. Decide whether actions queue, interrupt or ignore repeated events. Do not infer a successful payment, form submission or completed task from an animation reaching its final frame.

For new exports, use agreed data-bound signals and property observers for communication from the graphic. Older Rive Events and loop callbacks are deprecated in the current Web API. If an existing asset uses them, document the event names and migrate deliberately rather than inventing callbacks.

Expressions and gaze

Specify how face controls combine. For example, an expression blend might affect the brows and mouth while gaze remains independent. State the allowed numeric range and the neutral value. Every control name must come from the actual delivery file.

Runtime considerations

Confirm renderer and runtime version against the file’s features. Rive recommends WebGL2 for most Web projects; feature support differs across runtimes. Check fonts, images, audio and external dependencies, and test on the actual native platform when applicable.

Performance and reduced motion

Reserve a stable canvas size. Resize its drawing surface for the display, defer nonessential runtime loading, pause off-screen work and clean up instances when a screen is removed. Offer a manual pause option and a quiet alternative when reduced motion is requested. Keep all important status in readable UI.

Asset delivery contract

• Approved .riv file, permission to publish and a static fallback
• Exact artboard and state machine names
• Input or view-model property names, types, ranges and defaults
• Transition, interruption and return-to-rest rules
• Available completion signals and their meaning
• Runtime, renderer and tested package versions
• Source artwork, licences and ownership as agreed in scope

Prepared integration, with a clear limit

This website includes a lazy-loaded adapter in assets/rive-demo.js. It inspects legacy inputs, builds matching controls, handles load errors, pauses hidden playback and cleans up the instance. The supplied BarkGoals file is connected on the homepage and demo lab. Its actual input names and types are shown under Technical controls. No asset-specific integration snippet is presented as a complete application.

A data-bound asset requires a dedicated property mapping and review. The site does not fabricate controls or use hypothetical names as if they were verified.

Official references

Rive Web runtime getting started · Current Web API reference · Data binding