Skip to content

a-animation

AnimationElement

A simple interface to include Rive animations in html, as if it was just an image.

Example

<a-animation
  height="200"
  width="200"
  src="/loading.riv"
/>

Attributes

Name	Type	Default value	Description
`artboard`	string	undefined	artboard name
`autoplay`	boolean	undefined	wether to autoplay on load
`height`	number	undefined	height in pixel
`layout`	"cover" \| "fill" \| "contain"	undefined	fit
`src`	string	undefined	url to .riv file
`stateMachine`	string	undefined	name of state machine
`width`	number	undefined	width in pixel

Events

Name	Description
`load`	Emitted when animation has loaded.
`play`	Emitted when animation has started playing.
`pause`	Emitted when animation has been paused.

Methods

`AnimationElement.cleanup()`

src/AnimationElement.ts:365

`AnimationElement.input(name: string)`

src/AnimationElement.ts:194

Retrieve a rive input by name

`AnimationElement.pause()`

src/AnimationElement.ts:161

Pause the animation

`AnimationElement.play()`

src/AnimationElement.ts:154

Play the animation

`AnimationElement.text(name: string, text: string)`

src/AnimationElement.ts:176

Get or set the text of a rive textrun by name

`AnimationElement.trigger(name: string)`

src/AnimationElement.ts:168

Trigger a rive input by name

Examples

Different example confugrations of rive animations.

Doaload example riv

Lauout Cover

Lauout Fill

Lauout Contain