With this package you can bring the power of Rive / Flare to the browser and enhance your users experience with beautiful animations.
Get the package with
npm i rive-web-component
and check your frameworks documentation on how to use Web Components
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
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
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!!)
- 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
This package is based on the flare_flutter package from rive.app
Thanks to Flutter Web its possible to compile Flutter Apps for Web.
Because the available package from 2dimensions to use rive/flare animations in web is not well maintained and documented and hard to setup
-
Unit/Integration/e2e Tests (zero tests currently)
-
Very big bundle size thanks to Flutter
Because this package is based on flare_flutter it's possible that by studding the documentation of that package your problem could be solved.