@rive-app/canvas

What is @rive-app/canvas?

@rive-app/canvas is an npm package that allows developers to integrate Rive animations into their web applications using the HTML5 canvas element. Rive is a powerful tool for creating interactive animations and graphics, and this package provides the necessary tools to render and control these animations within a web environment.

What are @rive-app/canvas's main functionalities?

Loading and Rendering Animations

This feature allows you to load and render a Rive animation onto an HTML5 canvas element. The 'src' attribute specifies the path to the .riv file, and 'autoplay' determines whether the animation should start playing automatically.

const rive = new Rive({
  src: 'path/to/animation.riv',
  canvas: document.getElementById('canvas'),
  autoplay: true
});

Controlling Animations

This feature provides methods to control the playback of the animation. You can play, pause, and stop the animation programmatically.

const animation = new Rive({
  src: 'path/to/animation.riv',
  canvas: document.getElementById('canvas'),
  autoplay: false
});

// Play the animation
animation.play();

// Pause the animation
animation.pause();

// Stop the animation
animation.stop();

Interactivity

This feature allows you to interact with the animation by triggering inputs in the state machine. This can be used to create interactive animations that respond to user input.

const rive = new Rive({
  src: 'path/to/animation.riv',
  canvas: document.getElementById('canvas'),
  autoplay: true,
  stateMachines: 'StateMachineName'
});

// Trigger an input in the state machine
rive.stateMachineInputs('StateMachineName').find(input => input.name === 'inputName').fire();

Other packages similar to @rive-app/canvas

lottie-web

Lottie-web is a library for rendering Adobe After Effects animations exported as JSON with Bodymovin. It provides similar functionality to @rive-app/canvas in terms of rendering and controlling animations, but it uses a different animation format and toolset.

three.js

Three.js is a JavaScript library that allows you to create and display animated 3D graphics in a web browser using WebGL. While it is more focused on 3D graphics and scenes, it can also be used to create complex animations and interactive experiences similar to those created with Rive.

pixi.js

Pixi.js is a 2D rendering engine that allows you to create interactive graphics and animations. It is highly performant and can be used to create similar interactive animations as @rive-app/canvas, but it requires more manual setup and coding.

README

Rive

High-level Rive API using CanvasRenderingContext2D. Please see https://github.com/rive-app/rive-wasm for a list of all the available web runtimes and their details.

Canvas

npm install @rive-app/canvas

An easy-to-use high-level Rive API using a backing CanvasRenderingContext2D renderer. This lets Rive use the browser's native high-level vector graphics renderer. Some benefits of this package:

• Extremely small download size
• Great for displaying many animated canvases concurrently on the screen. This is ideal for when you want to render lists or grids of Rive animations on the screen, as there is no context limit by the browser (as opposed to WebGL)
• Support for simple vector graphics animations, raster, and mesh deformations
• Requests the Web Assembly (WASM) backing dependency for you

Getting Started