Statamic Rive Field

Statamic Rive Field is a Statamic addon that accepts an a .riv file upload, displays an animiation preview and gives configuration options for the Rive animation.

Features

This addon does:

• Upload a .riv Rive file
• Configure settings for the Rive Model
• Display a preview of the Rive animation
• Display file information about the Rive animation

How to Install

You can search for this addon in the Tools > Addons section of the Statamic control panel and click install, or run the following command from your project root:

composer require darinlarimore/statamic-rive

How to Use

Allow .riv file types in config/statamic/assets.php

'additional_uploadable_extensions' => [
		'riv',
],

Add the field to a blueprint

Name the field handle rive_animation or whatever you like.

Configure the field settings

Choose an asset container.

Use the field in your template

Use the rive_animation handle in your template. The field will have the following properties:

• url - The URL of the Rive animation
• width - The width of the animation
• height - The height of the animation
• stateMachine - The state machine of the animation
• animation - The timeline name of the animation
• artboard - The artboard of the animation
• shouldDisableRiveListeners - Whether or not to disable Rive listeners

Install Rive.js from NPM or CDN

npm install @rive-app/canvas

Import Rive.js into your project

import { Rive } from "@rive-app/canvas";

window.Rive = Rive;

Example Usage

Using Alpine.js to initialize the Rive animation:

	<div x-data x-init="() => {
		const rive = new window.Rive({
			src: '{{ rive_animation.url }}',
			canvas: $refs.riveCanvas,
			autoplay: true,
			onLoad: () => {
				rive.resizeDrawingSurfaceToCanvas();
			},
			{{ if rive_animation.stateMachine }}
				stateMachines: '{{ rive_animation.stateMachine }}',
			{{ /if }}
			{{ if rive_animation.animation }}
				animations: '{{ rive_animation.animation }}',
			{{ /if }}
			{{ if rive_animation.artboard }}
				artboard: '{{ rive_animation.artboard }}',
			{{ /if }}
			shouldDisableRiveListeners: '{{ rive_animation.shouldDisableRiveListeners }}',
		});
	}">
		<canvas x-ref="riveCanvas" width="{{rive_animation.width}}" height="{{rive_animation.height}}"></canvas>
	</div>