Framer and Rive
Learn more about the Rive integration into Framer
Framer allows users to build functional websites fast in a low/no-code platform. Integrate Rives into Framer sites to build and control animations and interactive content without having to write custom code with runtimes. See more below on how to get started.
Demo of the Rive and Framer integration
With the Framer integration, you get control over Rives with options such as:
- Playback controls
- Configuration options that affect the Rive layout on a canvas
- State machine inputs
To start, generate a new share link in the Rive editor and copy the Framer code snippet from the Rive editor.
Framer code snippet generated from the Rive editor
In your Framer project on the left-side panel, click on the Assets tab, and in the Code section, add a new Code component file.
Adding a Code component in Framer
In the new code file, replace all of the boilerplate code with the copied Framer code snippet from Rive and save the file. You should see the preview of your Rive file playing the animation or state machine set when generating a share link in the Rive editor.
Rive Framer snippet pasted in a new component
You'll now have access to embed this newly created Rive component in any of your Framer pages. Drag and drop the component into your page and size as needed.
Adding a Rive code component to a page
When you drop in a Rive component, you'll notice on the properties panel (right-hand side) some new options that are specific to the Rive component. The view will likely look different for every Rive component, as some properties are dynamically generated. See more below on configuration options when it comes to controlling Rives.
There are two settings for controlling how animations are rendered on the canvas display:
Fit- How Rive content is fitted into the view size
Alignment- How Rive content aligns with respect to view bounds
By default, Rives will autoplay the animation/state machine specified when the share link was generated. However, you have the ability to control when Rives will play and/or pause if needed. There are two playback control options:
Playback- Play or pause Rives in the Framer Preview/Published mode
Play on Canvas- Play or pause Rives in the Framer canvas mode
If you generate a share link with a state machine, you get access to all of the associated state machine inputs to manipulate on the Framer page. This means you can connect state machine input values to Framer component variants via interactions, such as users clicking or hovering a button.
For example, say we want to activate the switch example below to turn on when a user hovers a "Hover Me" button below the canvas. To accomplish this, we'll create a new Framer component by grouping the Rive component with the button.
Grouped Rive and button component
In this Primary variant, we keep the default state machine input
falseon the Rive component in the Properties panel. Next, we'll create another variant of this group,
isPressedis set to "Yes" (
Adding a variant where
isPressedis set to "Yes"
Finally, we'll create a transition from the button in the
Primaryvariant to the
SwitchOnvariant when a
Connecting button interactions to the SwitchOn variant
This effectively connects the hover state of the button to the
truevalue of the
isPressedstate machine input, and changes the Rive component's state machine accordingly.
Button toggling a Rive state machine input
Note that in the example scenario above, a similar outcome could have been achieved through using Listeners in the Rive editor, but because we want to advance a state machine from outside of the Rive canvas, we need to manipulate state machine inputs manually.