Rive Guide
Search…
Rive Parameters
You can set any of the following parameters on the Rive object when instantiating:
export interface RiveParameters {
canvas: HTMLCanvasElement | OffscreenCanvas, // required
src?: string, // one of src or buffer is required
buffer?: ArrayBuffer, // one of src or buffer is required
artboard?: string,
animations?: string | string[],
stateMachines?: string | string[],
layout?: Layout,
autoplay?: boolean,
onLoad?: EventCallback,
onLoadError?: EventCallback,
onPlay?: EventCallback,
onPause?: EventCallback,
onStop?: EventCallback,
onLoop?: EventCallback,
onStateChange?: EventCallback,
useOffscreenRenderer?: boolean,
}
  • canvas - (required) Canvas element to draw Rive animations onto.
  • src? - (optional) File path or URL to the .riv file to use. One of src or buffer must be provided.
  • buffer? - (optional) ArrayBuffer containing the raw bytes from a .riv file. One of src or buffer must be provided.
  • artboard? - (optional) Name of the artboard to use.
  • animations? - (optional) Name or list of names of animations to play.
  • stateMachines? - (optional) Name or list of names of state machines to load.
  • layout? - (optional) Layout object to define how animations are displayed on the canvas.
  • autoplay? - (optional) If true, the animation will automatically start playing when loaded. Defaults to false.
  • onLoad? - (optional) Callback that gets fired when the .riv file loads.
  • onLoadError? - (optional) Callback that gets fired when an error occurs loading the .riv file.
  • onPlay? - (optional) Callback that gets fired when the animation starts playing.
  • onPause? - (optional) Callback that gets fired when the animation pauses.
  • onStop? - (optional) Callback that gets fired when the animation stops playing.
  • onLoop? - (optional) Callback that gets fired when the animation completes a loop.
  • onStateChange? - (optional) Callback that gets fired when a state change occurs.
  • useOffscreenRenderer? - (optional) Boolean flag to determine whether to use a shared offscreen WebGL context rather than create its own WebGL context for this instance of Rive. This is only relevant for the @rive-app/webgl package. If you are displaying multiple Rive animations, it is highly encouraged to set this flag to true. Defaults to false.
Copy link