Angular

Community-driven Angular runtime for Rive.

Overview

This guide documents how to get started using the community-built Angular runtime library. The source is available in its GitHub repository. This library contains modules to help integrate Rive into your Angular web application.

Getting Started

Follow the steps below for a quick start on integrating Rive into your Angular app.

1. Install the dependency

npm install ng-rive

2. Import the module

import { RiveModule } from 'ng-rive';

@NgModule({
  declarations: [AnimationComponent],
  imports: [
    CommonModule,
    RiveModule,
  ],
})
export class AnimationModule { }

3. Add the Rive file to assets

|-- assets
|   |--rive
|      |-- vehicles.riv

4. Render the Rive template

<canvas riv="vehicles" width="500" height="500">
  <riv-animation name="idle" play></riv-animation>
</canvas>

Resources

Github: https://github.com/dappsnation/ng-rive

API Docs: https://github.com/dappsnation/ng-rive#api

Android

Vue