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:343

`AnimationElement.input(name: string)`

src/AnimationElement.ts:173

Retrieve a rive input by name

`AnimationElement.pause()`

src/AnimationElement.ts:158

Pause the animation

`AnimationElement.play()`

src/AnimationElement.ts:151

Play the animation

`AnimationElement.trigger(name: string)`

src/AnimationElement.ts:165

Trigger a rive input by name

Examples

Different example confugrations of rive animations.

Doaload example riv

Lauout Cover

Lauout Fill

Lauout Contain