How to Add Rive Animations to a Statamic CMS Site

Install Statamic Rive Addon

You can search for the Rive Animation Field 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

Allow .riv File Types

In the config/statamic/assets.php file add "riv" to the additional_uploadable_extensions array.

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

Add the Field to a Blueprint

Use this Rive Animation field in one of your blue prints.

Name the field handle rive_animation for this example.

Configure the Asset Container

You must then configure an asset container.

Install Rive NPM Package

Head over to your terminal and install the Rive package.

npm install @rive-app/canvas

Or Install the lite version, see more information on the lite version here.

npm install @rive-app/canvas-lite

Import Rive

In your app.js entry point file where you have other module imports. Import Rive and then set the Rive object to the window.Rive property, making it globally accessible. See the example below.

Create Template File

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

This example below utilizes Alpine.js to create the Rive instance.

*Notice: The rive.resizeDrawingSurfaceToCanvas(); function called onLoad, this is necessary and corrects blurry or incorrectly scaled graphics, especially on high-DPI or retina displays.

Add Rive Animation to Entry

The last step is to populate the new Rive Animation field you created with a test Rive animation you can download here.

Use the configuration options to set the Width, Height, and State Machine fields according to the file information provided. To learn more about these configuration options visit the Rive documentation here.

All Done!

Save the entry, and visit the page to see your new Rive animation living on the page! This example should get you going with a nice Alpine.js approach to loading Rive animations on your Statamic CMS site. If you have any issues with the addon or getting this to work please make a Github Issue here.