A few examples of implementing Rive animations on the web! Includes examples with both the JS and WASM variants.
Rive's JS runtime is the simplest way to get your animations running in the web. Alternatvely, make use of Rive's WASM runtime for lower level control of your animations.
Currently, there are theee sample animations:
MartyAnimation
continuously plays a looping animation:
animation = new RiveAnimation({
src: '/marty.riv',
canvas: canvas.current,
autoplay: true,
});
KnightAnimation
introduces multiple animations with basic interaction. When the animation is clicked, it toggles between two animations, mixing in, and transforming between, multiple animations within the Rive file.
const toggle = () => {
animation.current.play(sunshine ? 'day_night' : 'night_day');
sunshine = !sunshine;
};
The EyeAnimation
demonstrates managing the run loop with the rive-canvas
package for maximum control of a range of animations within the Rive file. It mixes a range of animations that are either looping, triggered by clicking, or mapped to the cursor position.
instances.lookY.time = e.clientY / window.innerHeight;
instances.lookX.time = e.clientX / window.innerWidth;
instances.lookY.apply(artboard, 1.0);
instances.lookX.apply(artboard, 1.0);
This project was bootstrapped with Create React App.
npm install
will pull down the necessary dependencies.
npm start
runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits and you will also see any lint errors in the console.
-
Rive's web runtime uses Wasm to create a small, performant engine. Not all web bundlers play nicely with Wasm; if you run into difficulties, check your pipeline's documentation. In this example, we load the Wasm file from the unpkg cdn, but could just as easily load it from your hosting environment. Take a look at the RiveLoader.js source file.
-
If you get an error along the lines of
Module not found: Can't resolve 'fs'
and you're using webpack, try adding"node": { "fs": "empty" }
to you config (webpack.config.js).