Rive + Framer

This article is out of date. Check out the Rive plugin in the Framer marketplace here.

Introduction

At Rive, we ❤️ Framer! They allow users to build functional websites fast in a low/no-code platform and have options to create custom components and integrations for a more powerful toolset. In this blog, we’ll dig into how you can combine the power of interactive content built with Rive and the flexibility of the Framer platform to build websites, all without having to write custom code with runtimes!

I’ll repeat that louder - you can integrate your Rives and have control of your interactive content on websites without writing a single line of code. WHAT!

In many platforms today, such as Webflow, Tome, Notion, and others, share links are a convenient option to embed Rives and display a simple animation or even a state machine driven by Listeners. Our new feature creates a Framer component from the Rive editor, allowing you to control Rive beyond the frame of the canvas.

Getting Started

Ok, this new sharing option involves some code, and I know; I said no code. But really, this solution is just copying and pasting it! Don’t worry about what it means; we want to abstract as much of this as possible. With this method, when you generate a share link in Rive, we provide a Framer code option for you to copy/paste into a new Framer component.

In Framer, create a new code component and replace the boilerplate Framer code with the snippet from Rive. Then, drag and drop this new component into your page like any other component from Framer.

Once you’ve dropped the new component onto your page, you'll notice some new settings on the right-side configuration options panel. If your Rive component is a state machine, you'll notice the state machine inputs are represented as controls based on the input type. These controls should look very similar to what you see in the Rive editor in the state machine panel, where you can set state machine input values.

💡 Currently, trigger inputs from Rive are represented in Framer as number inputs, similar to actual number inputs from Rive. To trigger these inputs, change the number value.

Rive editor view

This is how the state machine appears in Rive.

Framer editor view

These are the Rive configuration options in Framer.

With your state machine inputs exposed in Framer, you’ll get finer control over your state machine and drive it as you would in Rive, but on an actual website of your own! Before this solution, you had to use code to hook up the .riv file export, instance a state machine, grab input references, and manually drive the inputs at runtime. Here, you can utilize all Framer functionality to help drive controls on your Rive state machine.

Notice how the Rive file in Framer animates accordingly as we change the state machine input's value.

For more on this, check out the video at the top of the blog to see the co-founder and CEO of Rive, Guido, demonstrate how to attach state machine boolean input values to buttons created in Framer.

In addition to state machine inputs, you can also control layout options and playback. These features are currently only exposed in the Framer component, which makes it a great reason to use this option instead of the embed link.

Notice how adjusting Rive layout options affects how the file is rendered.

Summary

We’re excited to continue investing in integrations that make it easy to bring Rive to all platforms! With Framer, you get more control over adding interactive content on websites, whether you want to display simple looping animations or hook up state machines and inputs, all without needing to know how to write runtime code. We can’t wait to see what you build with this new integration!

📖 Learn more about how to integrate Rive into Framer in our help docs.
🧑‍🎨 Grab the Rive asset used in this post.