Rive Web Component: Create and use beautiful animations

With this package you can bring the power of Rive / Flare to the browser and enhance your users experience with beautiful animations.

Animation

Install

NPM

Get the package with

npm i rive-web-component

and check your frameworks documentation on how to use Web Components

CDN

https://unpkg.com/rive-web-component@latest

How to use

Attributes

All attributes that the HTMLElement accepts:

• file: string

• animation: string | undefined

• color: string | undefined

• artboard: string | undefined

• bounds-node: string | undefined

• antialias: boolean | undefined

• snap-to-end: boolean | undefined

• should-clip: boolean | undefined

• paused: boolean | undefined

• on-animation-end: function | undefined

• on-ready: function | undefined

Properties

All Properties the HTMLElement has (Changing those will update the HTMLElement):

• playing: string | undefined // currently playing animation

• paused: boolean

• antialias: boolean

• color: string| undefined

• artboard: string | undefined

• boundsNode: string | undefined

• snapToEnd: boolean

• shouldClip: boolean

Methods

All Methods the HTMLElement has:

• play(animation?: string): Promise< void >

Will resume the animation if paused or will play the animation given by the first parameter and return a promise which resolves when the animation ended (when the current animations gets override the promise will get rejected!!)

• pause(): void

Will pause the animation

• changeAnimation(animation?: string): Promise< void >

Will change (override) the currently playing animation and return a promise which resolves when the animation ended (when the current animations gets override the promise will get rejected!!)

Events

• on-ready

Will fire when the element is ready to play animations Wait until this event has been fired before calling methods or changing properties

• animation-end

gets fired when the currently animation ends. Will never fire on looped animations

How does it work?

This package is based on the flare_flutter package from rive.app

Thanks to Flutter Web its possible to compile Flutter Apps for Web.

Why?

Because the available package from 2dimensions to use rive/flare animations in web is not well maintained and documented and hard to setup

Whats missing / Problems

• Unit/Integration/e2e Tests (zero tests currently)

• Very big bundle size thanks to Flutter

Problems?

Because this package is based on flare_flutter it's possible that by studding the documentation of that package your problem could be solved.