How to Use Rive Animations in WordPress Without a Plugin (Complete Guide)

Rive is a powerful tool for creating lightweight, interactive animations—but integrating it into a WordPress site without relying on plugins can seem tricky at first. In this guide, I’ll show you how to embed Rive animations directly into your WordPress site with clean, performance-friendly code—no plugins needed.

🚀 Why Use Rive Animations?

Rive lets you design animations that respond to user input in real time—ideal for interactive UIs, loading screens, or animated icons. It exports animations as .riv files, which are super lightweight compared to traditional video or Lottie formats.

🔧 What You’ll Need

A .riv file (exported from the Rive web or desktop editor)

WordPress access (either via a custom theme or the block editor)

A basic understanding of HTML & JavaScript

Rive’s JavaScript runtime

📁 Step 1: Upload Your Rive File to WordPress

Since WordPress blocks .riv files by default, you need to allow it first:

Allow .riv Uploads:

Add this to your theme’s functions.php:

*function allow_riv_upload($mime_types){
$mime_types['riv'] = 'application/octet-stream';
return $mime_types;
}
*

add_filter('upload_mimes', 'allow_riv_upload');

Then upload your .riv file via the Media Library or directly through FTP.

🧠 Step 2: Embed the Rive Runtime

You need to include the Rive JavaScript library to render your animations.

Add This to Your

or HTML Block:

🖼️ Step 3: Add a Canvas for Your Animation

Paste this inside a WordPress HTML block or theme file:

🧩 Step 4: Load and Control the Animation with JavaScript

Here’s how to render your .riv file and control its animations:

`
<br> const canvas = document.getElementById(&#39;rive-canvas&#39;);</p> <p>const rive = new rive.Rive({<br> src: &#39;/wp-content/uploads/2025/07/your-animation.riv&#39;,<br> canvas: canvas,<br> autoplay: true,<br> stateMachines: [&#39;State Machine 1&#39;], // Replace with your state machine name<br> onLoad: () =&gt; {<br> console.log(&#39;Rive animation loaded!&#39;);<br> }<br> });<br> `

Advanced: Smooth Transitions Between Multiple Rive State Machines
If you’re switching between different animations on the same page:

Use a single .riv file with multiple artboards or state machines

Hide/show canvases using CSS transitions (opacity, transition)

Preload all assets to avoid delays

Use JavaScript to coordinate timing (setTimeout, rive.pause() / rive.play())

SEO Best Practices for Rive + WordPress

Add descriptive alt text for animations for accessibility and SEO

Use lazy loading if animations are below the fold

Optimize .riv file size in Rive by trimming unused artboards or assets

Combine with structured data (if animation supports user interaction)

Using Rive animations in WordPress without a plugin is absolutely possible—and actually offers more control and better performance. Whether you’re animating logos, buttons, or full-page transitions, this method keeps your site fast and interactive.

Want help with a specific animation setup? Drop your details in the comments and I’ll try to help!

Praneeth Kawya Thathsara
Rive Animator | riveanimator.com