rive-web-component v0.1.3
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.
Install
NPM
Get the package with
npm i rive-web-component
and check your frameworks documentation on how to use Web Components
CDN
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.