
Product
A Fresh Look for the Socket Dashboard
We’ve redesigned the Socket dashboard with simpler navigation, less visual clutter, and a cleaner UI that highlights what really matters.
A repository for Angular built around the rive canvas runtime.
Animations built before version 0.7.0 rive-canvas will not work with new versions of ng-rive.
Angular | Rive-canvas | ng-rive |
---|---|---|
>14 | 0.7.* | 0.2.* |
12 | 0.7.* | 0.1.* |
<12 | 0.6.* | 0.0.* |
npm install ng-rive @rive-app/canvas-advanced
RiveModule
:import { RiveModule } from 'ng-rive';
@NgModule({
declarations: [MyComponent],
imports: [
CommonModule,
RiveModule,
],
})
export class MyModule { }
|-- assets
| |--rive
| |-- knight.riv
If you want to change the path you can specify it with the RIVE_FOLDER
provider:
import { RiveModule, RIVE_FOLDER } from 'ng-rive';
@NgModule({
declarations: [MyComponent],
imports: [
CommonModule,
RiveModule,
],
providers: [{
provide: RIVE_FOLDER,
useValue: 'assets/animations',
}]
})
export class MyModule { }
<canvas riv="knight" width="500" height="500">
<riv-animation name="idle" play></riv-animation>
</canvas>
Error: Can't resolve 'fs'
, add this in your package.json
:"browser": {
"fs": false,
"path": false
}
The RiveCanvas
loads a .riv
animation file into it's canvas tag :
[riv]
: The .riv
file or it's name if in the asset. Full path is managed by the RIVE_FOLDER
token.[artboard]
: The name of the artboard to used. If not specified, the default one is used.[width]
: The width of the canvas in pixel.[height]
: The height of the canvas in pixel.[fit]
: How the animation should fit inside the canvas.[alignment]
: Where the animation should be positioned inside the canvas.[lazy]
: If provided, the file will only be loaded when canvas is visible in the viewport.[viewbox]
: Enable zoom in the canvas. Expect a string minX minY maxX maxY
. Default 0 0 100% 100%
.⚠️ The lazy
input use the IntersectionObserver
API which will not work in all browser.
(artboardChange)
: Emit the new ArtboardCanvas zoomed from "25% 25%" (top left), to "75% 75%" (bottom right).
<canvas riv="knight" viewbox="25% 25% 75% 75%" width="500" height="500"></canvas>
Run an animation inside a canvas based on name
or index
:
<canvas riv="knight" width="500" height="500">
<riv-animation name="idle" play speed="0.5"></riv-animation>
</canvas>
[name]
: The name of the animation in the file loaded by the canvas.[index]
The index of the animation in the file loaded by the canvas (used if name is not provided).[play]
: Bind the player to a boolean (playing: true
, paused: false
).[speed]
: The speed at which the animation should play. Negative values cause the animation to play backward.[mix]
: The weight of this application over another in the same Artboard
.(load)
: Emitted the loaded LinearAnimation
.Provide more control over the animation
<canvas riv="poison-loader" width="500" height="500">
<riv-player #player="rivPlayer" name="idle" [time]="time" mode="one-shot"></riv-player>
</canvas>
<input type="range" step="0.1" (input)="time = $event.target.value" [min]="player.startTime" [max]="player.endTime" />
[(time)]
: Bind the animation to a specific time[(play)]
: Bind the player to a boolean (playing: true
, paused: false
).[(speed)]
: The speed at which the animation should play. Negative values cause the animation to play backward.Based on the mode, the play, time & speed might change automatically.
[name]
: The name of the animation in the file loaded by the canvas.[index]
The index of the animation in the file loaded by the canvas (used if name is not provided).[mix]
: The weight of this application over another in the same Artboard
.⚠️ Deprecated: These input will be remove in the next version
(load)
: Emitted the loaded LinearAnimation
.(timeChange)
: Emitted just before refreshing the canvas when play
is true. This output will be triggered for every frame if listened to. As every output create a rendering cycle, use it with care.The RiveNode
directive give you access to one node :
<canvas riv="knight">
<riv-animation name="idle" play></riv-animation>
<riv-node name="cloud" x="300"></riv-node>
</canvas>
This example will set the position of the cloud to 300px of its origin.
Important: You need to have at least one animation playing to modify a node.
[x]
The x position of the node.[y]
The y position of the node.[scaleX]
The scaleX of the node.[scaleY]
The scaleX of the node.[scale]
Apply scaleX & scaleY.[rotation]
Apply rotation on the node. If value is below 2*PI use radians, else degrees.⚠️ If the property of the node is updated by the animation, the animation wins.
You can manipulate the state of a state machine animation though inputs:
<canvas riv="skills">
<riv-state-machine name="move" play>
<riv-input name="Level" [value]="level.value"><riv-input>
</riv-state-machine>
</canvas>
<input type="radio" formControl="level" value="0" > Beginner
<input type="radio" formControl="level" value="1"> Intermediate
<input type="radio" formControl="level" value="2"> Expert
[name]
The name of the state machine in the file loaded by the canvas.[index]
The index of the state machine in the file loaded by the canvas (used if name is not provided).[play]
: Bind the player to a boolean (playing: true
, paused: false
).[speed]
: The speed at which the animation should play. Negative values cause the animation to play backward.(load)
: Emitted the loaded StateMachine
.(stateChange)
: Emitted the names of the states that have changed.The riv-input
enables you to manipulated the state machine:
<canvas riv="skills">
<riv-state-machine name="move" play>
<riv-input #trigger="rivInput" name="Level"><riv-input>
</riv-state-machine>
</canvas>
<button (click)="tigger.fire()">Trigger change</button>
[name]
The name of the input[value]
The value of the input, only if the type of the input is Boolean
or Number
(load)
Emit the State Machine Input object when it's loaded from the rive file.(change)
Emit when the input value is changed or if fired.fire()
Trigger a change, only if the type of the input is Trigger
By default all State Machine defined in the template that have event listener will be triggered. (⚠️ You need to add your state machine in the template to start listening on it):
<canvas riv="skills">
<riv-state-machine name="move"></riv-state-machine>
</canvas>
Canvas will listen on all event listeners from the state machine "move", but not other in the same artboard.
To save ressources you can play the animation only when the canvas is visible in the viewport :
<canvas #canvas="rivCanvas" riv="knight" width="500" height="500">
<riv-animation name="idle" [name]="canvas.isVisible | async"></riv-animation>
</canvas>
You can run multiple animations within the same canvas :
<canvas riv="knight">
<riv-player name="idle" play></riv-player>
<riv-player name="day_night" play mode="ping-pong" speed="0.5"></riv-player>
</canvas>
FAQs
Angular Rive
The npm package ng-rive receives a total of 678 weekly downloads. As such, ng-rive popularity was classified as not popular.
We found that ng-rive demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Product
We’ve redesigned the Socket dashboard with simpler navigation, less visual clutter, and a cleaner UI that highlights what really matters.
Industry Insights
Terry O’Daniel, Head of Security at Amplitude, shares insights on building high-impact security teams, aligning with engineering, and why AI gives defenders a fighting chance.
Security News
MCP spec updated with structured tool output, stronger OAuth 2.1 security, resource indicators, and protocol cleanups for safer, more reliable AI workflows.