![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Rive's web runtime.
Detailed runtime documentation can be found in Rive's help center.
Please see the changelog for info on latest updates.
If you're looking for information on our low-level WASM runtime, or you're interested in contributing and building this repo locally, please check out these docs.
If you're using Rive files in v6 format, then please use the 0.6.1
version of this package. Versions older than this have a breaking bug.
The easiest way to run this is to copy dist/rive.min.js
into your project and embed with a script
tag:
<script src="https://unpkg.com/rive-js@0.7.16/dist/rive.min.js"></script>
If you're using npm, you can include it in your dependencies:
{
"name": "my-app",
"dependencies": {
"rive-js": "0.7.16"
}
}
Play the first animation in the default artboard:
<canvas id="canvas" width="400" height="300"></canvas>
<script src="https://unpkg.com/rive-js@0.7.16/dist/rive.min.js"></script>
<script>
// autoplays the first animation in the default artboard
new rive.Rive({
src: 'https://cdn.rive.app/animations/off_road_car_v7.riv',
canvas: document.getElementById('canvas'),
autoplay: true,
});
</script>
Rive.js lets you decide how your animations will be laid out in the canvas. The Layout
objects lets you set the fit, alignment and optinonally the min and max of the x/y coordinates.
These can be set when a Rive object is first created:
new rive.Rive({
src: 'https://cdn.rive.app/animations/off_road_car_v7.riv',
canvas: document.getElementById('canvas'),
layout: new rive.Layout({fit: 'contain', alignment: 'topRight'}),
autoplay: true,
});
Options for fit
are:
Options for alignment
are:
Depending on the size of your artboard and the size of the canvas into which it's rendering, some of the fit and alignment values may produce the same layout.
The layout can be updated at any time with the layout
setter:
const r = new rive.Rive({
src: 'https://cdn.rive.app/animations/off_road_car_v7.riv',
canvas: document.getElementById('canvas'),
autoplay: true,
});
r.layout = new rive.Layout({fit: rive.Fit.Cover, alignment: rive.Alignment.BottomCenter});
Note that either strings or enums can be used for the fit and alignment parameters.
Rive.js requires two things: a link to the Rive file, and a canvas element where the animation should be rendered. Setting autoplay: true
will play a one-shot animation once, or a looping animation continuously.
If you want to specify which artboard or animation to play:
new rive.Rive({
src: 'https://cdn.rive.app/animations/off_road_car_v7.riv',
canvas: document.getElementById('canvas'),
artboard: 'New Artboard',
animations: 'idle',
autoplay: true,
});
animations
can also take a list of animations, which will be mixed together:
new rive.Rive({
src: 'https://cdn.rive.app/animations/off_road_car_v7.riv',
canvas: document.getElementById('canvas'),
animations: ['idle', 'windshield_wipers', 'bouncing'],
autoplay: true,
});
animations
can take either a string for a single animation, or a list of strings for multiple animations.
You can manually start and pause playback, and check if playback is active:
const r = new rive.Rive({
src: 'https://cdn.rive.app/animations/off_road_car_v7.riv',
canvas: document.getElementById('canvas'),
});
r.play();
r.pause();
r.isPlaying ? console.log('Playing') : console.log('Not playing');
If you want to play, or mix in, more animations, play
can take an array of animation names:
r.play(['windshield_wipers']);
If you want to pause animations, while still have others playing, pause
can also take an array of animation names:
r.pause(['windshield_wipers', 'bouncing']);
Same goes for stopping animations:
r.stop(['idle']);
It's important to note that unless you specifically pause or stop looping animations, they'll play forever. one-shot animations will automatically stop when they reach the end of the animation, so you can repeatedly call play([<one-shot>])
and it will replay the animation so long at it has finished its animation.
If Rive's data is being loaded by other means, you can pass in an ArrayBuffer:
const reader = new FileReader();
reader.onload = () => {
const riveArrayBuffer = reader.result;
new rive.Rive({
buffer: riveArrayBuffer,
canvas: document.getElementById('canvas'),
});
};
reader.readAsArrayBuffer(file);
Playing state machines is much like animations; you can specify which state machine to play when creating a Rive object:
new rive.Rive({
src: 'https://cdn.rive.app/animations/skills_v7.riv',
canvas: document.getElementById('canvas'),
stateMachines: 'Designer\'s Test',
autoplay: true,
});
You can start, pause, and stop state machines with the play
, pause
, and stop
functions:
const r = new rive.Rive({
src: 'https://cdn.rive.app/animations/skills_v7.riv',
canvas: document.getElementById('canvas'),
});
r.play('Designer\'s Test');
r.pause();
State machine inputs can be retrieved with stateMachineInputs
. Trigger inputs can be fired with fire
and boolean/number inputs can have their values set with value
:
const inputs = r.stateMachineInputs('Designer\'s Test');
inputs.forEach((input) => {
// Trigger
if (input.type === rive.StateMachineInputType.Trigger) {
input.fire();
}
// Number
else if (input.type === rive.StateMachineInputType.Number) {
input.value = 10;
}
// Boolean
else if (input.type === rive.StateMachineInputType.Boolean) {
input.value = true;
}
});
See this example for more details.
Rive.js has a number of events that you can listen for:
const r = new rive.Rive({
src: 'https://cdn.rive.app/animations/off_road_car_v7.riv',
canvas: document.getElementById('canvas'),
});
// See what animations are on the artboard once the Rive file loads
r.on('load', () => {
console.log('Animations ' + r.animationNames());
});
// onloop will pass the name of the looped animation and loop type; useful when mixing multiple animations together
r.on('loop', (event) => {
console.log(event.data.animation + ' has looped as a ' + event.data.type);
});
Event callbacks currently supported are:
LoopEvent
)You can unsubscribe from a single callback, all callbacks of a specific type, or every callback using:
unsubscribe(type, callback)
unsubscribeAll(type)
: if type
is omitted, all callbacks are unsubscribedPaused animations can be manually advanced (scrubbed) by a specified amount of time:
animation.scrub(myAnimationName, timeInSeconds);
To run the examples in the examples
folder, run a HTTP server at the root of the js
directory. If you have Python installed, the following works nicely:
python3 -m http.server 8000
or Node:
npx http-server
and then navigate to the examples, e.g.: http://localhost:8000/examples/hello_world/index.html
.
FAQs
Rive's web api.
We found that rive-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.