Rive

Rive is a real-time, interactive design and animation tool that allows creators to build and run interactive content across various platforms. It’s designed for designers and developers to collaboratively create animations and graphics that respond to user input and data. Rive is particularly known for its dynamic approach to animation and its runtime-focused editor, which makes it suitable for complex and interactive experiences.

🔗 Live demo: https://rive-demo-woad.vercel.app/

🛠️ Project: Plasmic Studio | Rive Demo

Full support for state machines and variables

Plasmic is the only no-code integration which exposes the internal Rive animation state to our studio, which allows for a seamless bi-directional state management between Rive and Plasmic.

You can read and modify the Rive animation state variables directly within Plasmic Studio. You can also trigger Rive animations using Plasmic elements as controls, all while retaining the ability to interact with the animation through the elements defined in the .riv file.

Create your animation in the Rive studio

First, head over to Rive and sign in or create a free account. Once inside your workspace, create a new file to bring up the Rive editor, where you’ll see a clean, intuitive interface designed to help you bring your ideas to life.

You can also use one of the projects built by the Rive community. To get the animated avatar used in this guide just click the “Remix” button and it will create a copy of the project in your workspace, ready for you to customize.

Rive’s workspace is divided into several key panels:

• Toolbar: Located at the top, this is where you’ll find tools to draw, select, and manipulate shapes, as well as options to customize your artboard and export your work.
• Hierarchy: On the left, the Hierarchy panel displays all the objects, groups, and animations in your file. It’s a tree view that helps you organize and manage the structure of your project.
• Inspector: On the right, the Inspector lets you tweak properties of the currently selected object—like color, size, or animation settings. The options here change depending on what you’ve selected.
• Stage: The central canvas is called the Stage. Here, you’ll create and arrange your artboards, draw shapes, and see your animation come to life.
• Timeline: When you switch to Animate mode, a Timeline appears at the bottom. This is where you’ll create new animations, set keyframes, and control playback.

For a deeper dive, check out the official Rive documentation for more tips and advanced features.

Exporting your animation

When you’re done with your animation, you can either export it as a link if you’re using a paid Rive account, or download the animation as a .riv file and host it yourself. You will be able to find both option in Rive editor on the top right corner when clicking on the “Export” button.

As a quick option for testing things out you can serve your file through the app host connected to your local server, or upload to any publicly available file storage CDN.

Drop Rive into your pages

Flip back to Plasmic Studio. Go to the page where you want to use the animation and open up the insertion panel. Then search for “Rive” component and drag it into your page. You’ll now see a Rive element with default .riv file in your artboard. Plasmic treats it like any built-in or custom component, letting you combine it with text, buttons, and more. Select the element on the artboard, and paste the link to your .riv file into the “Source URL” field.

Rive component settings explained

When you select the Rive component in Plasmic Studio, you’ll see a variety of settings in the right-hand panel. Here’s what each one means:

• Source URL: The link to your .riv animation file. Paste your animation’s URL here to load it into the component.
• State Machines: If your Rive file contains state machines (for interactive or multi-state animations), select which one to use. This enables advanced interactivity, letting you control animation states from Plasmic or via user input.
• Autoplay: When enabled, the animation will start playing automatically as soon as it loads. Turn this off if you want to trigger playback manually or via interactions.
• Studio Autoplay: This option controls whether the animation autoplays inside Plasmic Studio’s editor. It’s useful for previewing animations while designing, without affecting the published site’s behavior.
• Artboard: If your Rive file contains multiple artboards, you can select which one to display. Leaving it unset will show the default artboard.
• Layout: Controls how the animation fits within its bounding box. Options like contain / center ensure the animation scales to fit while maintaining its aspect ratio and centering it in the component area.
• Animations: If your Rive file includes multiple named animations, you can select which animation(s) to play. This is useful for switching between different animation sequences within the same file. This flow is not recommended by Rive, and instead in most cases you should be able to get by with animation state machine inputs — we left this option available to make sure you get as most flexibility as possible.

And below you can see how the interaction handling works in Plasmic Studio. On the left side you can see an OnClick interaction that will trigger the Play action on the Rive component, and on the right side you can see how the Rive component is configured to update the Plasmic state whenever animation state changes:

Map UI controls to Rive inputs

Now for the magic: add some elements from the insertion panel, in our case this will be a header and a select component, tweak them to your liking. A few more steps, and you will be able to customize your Rive animation using Plasmic elements:

1. Focus on the ‘Select component’
2. Scroll down to the’ Interactions’ section in the right panel
3. Create a new interaction by clicking the + button and selecting On change event.
4. Select Run element action for an action
5. Select Rive as an element to run action On
6. In our example we will set the number, so the action will be Set number
7. For the arguments we need to specify the input name from your state machine, case sensitive, in our case it’s Fire Color
8. For the input value you will need to specify the dynamic value of the select component.
9. Specify the state machine name, in our case it’s State Machine 1

Done! You will end up seeing something like this:

Previewing your animation

Now that you’ve mapped your controls, it’s time to see your animation in action. In order to do that you would either need to enable the Studio Autoplay option in the Rive component settings or preview your changes by clicking the “Play” button on the top right corner, or hitting the “L” hotkey.

Shout out to the Rive community

We’d like to thank the Rive team and the community for their support a warm welcome. We’re excited to see what you’ll build with Rive in Plasmic. Special shoutout to Jakub Matias for working on this integration from Rive’s end, and making this whole experience possible.

Original animation used in this guide was created by @seranggapatah

Have feedback on this page? Let us know on our forum.