Skip to content
charmotion
Get started

How to Add a Rive Animation to Wix Studio

By the Charmotion team · Updated

Cover illustration for the guide: How to Add a Rive Animation to Wix Studio, with Charmotion demo characters

Wix Studio has a native Rive element: open Add Elements, choose Media, then Rive, upload your .riv to the Media Manager, and pick the artboard and state machine in Settings. It plays the file and any pointer interactions built into it, but exposes no inputs, so changing a mood from page events needs an HTML embed running Rive's web runtime.

Key takeaways

  • The Rive element lives under Add Elements, Media, Rive in the Studio Editor.
  • Settings cover the file, artboard, state machine, fit, alignment, autoplay, touch scroll and an accessible name.
  • Wix Interactions move the whole element; only listeners built into the .riv react inside it.
  • The Velo $w reference lists no Rive element, so code-driven moods go through an HTML iFrame element and postMessage.
  • Wix documents the Rive element for the Studio Editor only; the classic Wix Editor uses Embed HTML.

Already have a character or logo? See your character in real app screens: splash, onboarding, loading and empty-state screens. It's free, runs in your browser and uploads nothing.

Does Wix Studio have a built-in Rive element?

Yes. Wix Studio added a Rive integration, and its help center documents a Rive element in the Studio Editor. If a tutorial tells you Wix Studio needs an HTML embed for every Rive file, it predates that element.

  1. Click Add Elements on the left of the editor.
  2. Click Media, then Rive, then the Add to Site icon next to Rive Animations.
  3. Click Change File and choose a .riv from the Media Manager, or upload one with + Upload Media.
  4. Click Add to Page.

Uploading the .riv to the Media Manager first is optional; you can upload during setup. The file must be a .riv exported from Rive, not the editor's .rev project file or a Lottie JSON. You can place several Rive elements on one page.

The element is contained in its bounding box, so resize it with the drag handles and the animation scales inside. The editor preview only shows loop or entrance animations, according to Wix's own tutorial, so check reactions on the published site.

Which artboard and state machine should I pick?

Select the element and open Settings. Wix lists these options:

SettingWhat it does
MediaSwaps the .riv file
ArtboardChooses which canvas to show when the file has several
State machineChooses which state machine plays when the file has several
Fit and AlignmentHow the artwork fills and sits in the box (cover, fill, center, bottom left)
AutoplayPlays on load, or stays paused on the live site
Enable touch scrollLets the page scroll when a visitor drags on the element on touch devices
AccessibilityAn accessible name, or mark it as decorative

Because nothing in Wix sets an input, pick the state machine that looks right with its starting values. A file driven by a number and triggers simply sits in its first state.

A Charmotion file shows the choice clearly. It contains three state machines: CharacterStateMachine (classic mood input plus triggers), CharacterViewModelMachine (the same states through a Character view model for Data Binding) and LaunchStateMachine (an intro of about 2.6 seconds that ends on the resting pose and fires no end event). In the native element, choose CharacterStateMachine for a looping idle character, since its mood starts at 0 (idle), or LaunchStateMachine for a one-time intro. Wix doesn't document whether the element binds view models, so test CharacterViewModelMachine in a published preview before relying on it.

Can Wix interactions change the mood without code?

No. Wix Studio's interactions (entrance, loop, hover, click, scroll) animate elements as boxes: they fade, move or scale the whole Rive element. They don't reach inside the file to set a number or fire a trigger.

What does work without code is interactivity built into the .riv itself. Rive listeners react to pointer movement and clicks on the canvas, and Wix's tutorial shows a file where dots follow the mouse and clicking a toggle changes the background. If you want hover or click reactions without code, add them in the Rive editor as listeners on the artwork, then upload the new file.

Two things affect this on phones. With Enable touch scroll on, dragging over the element scrolls the page; turn it off only if the file needs drag gestures. And keep tappable regions large, since a small character is easy to miss on a phone.

Anything that depends on the rest of the page, such as celebrating after a form submission or switching to a thinking pose while a booking loads, needs code.

Do I need Velo to set inputs or Data Binding?

Yes, and not through the Rive element. As of October 2026, the Velo $w API reference lists elements such as Lottie and HtmlComponent but no Rive element, so there is no documented way to set a Rive input or view model property from page code. The working route is to run Rive's web runtime yourself inside an HTML iFrame element and send it messages.

Add the HTML iFrame element, choose the code option, and paste a canvas plus the runtime. Wix's embed docs say only HTTPS code and URLs display, so host the .riv on an HTTPS CDN that allows cross-origin requests:

<style>html, body { margin: 0; height: 100%; }</style>
<canvas id="mascot" style="width: 100%; height: 100%"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://YOUR-CDN.example.com/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
  // Page code sends { mood: 3 } or { trigger: "success" }.
  window.addEventListener("message", (event) => {
    const vmi = r.viewModelInstance;
    const msg = event.data || {};
    if (!vmi) return;
    if (typeof msg.mood === "number") vmi.number("mood").value = msg.mood;
    if (typeof msg.trigger === "string") vmi.trigger(msg.trigger)?.trigger();
  });
</script>

Then send messages from page code. Wix documents postMessage() on the HTML element for page-to-embed messages, received in the embed by a message listener:

// Page code. #mascotEmbed is the HTML iFrame element's ID.
$w.onReady(() => {
  $w("#helpButton").onClick(() => {
    $w("#mascotEmbed").postMessage({ mood: 3 });          // thinking
  });
  $w("#joinButton").onClick(() => {
    $w("#mascotEmbed").postMessage({ trigger: "success" });
  });
});

The embed runs in an iframe, so it can't read other page elements directly; messages are the bridge. If you also post from the embed back to the page, Wix says to pass your site's URL as the target origin rather than "*".

success: a trigger that plays once, then returns to the current mood.

How do I add Rive in the classic Wix Editor?

Wix's Rive article is written for the Studio Editor, and we found no Rive element documented for the classic Wix Editor. Use an HTML embed there:

  1. Click Add Elements, then Embed Code, then Popular Embeds.
  2. Choose Embed HTML and add it to the page.
  3. Click the embed, then Enter Code, paste the snippet from the previous section under Add your code here, and click Apply.

Wix notes that the HTML element is an iframe, so its content isn't responsive, and fixed pixel sizes can crop it. That is why the snippet sizes the canvas to 100% width and height and lets you resize the element per screen. The same postMessage bridge works with Velo page code.

If you don't need reactions at all, a muted, looping MP4 in a video element is simpler and works in both editors.

Will the background be transparent, and how do I handle breakpoints?

The element draws the artboard as it was designed. If the artboard has a background fill, you see that fill; if it has none, the section behind shows through. Wix's own tutorial picks a light artboard over one with a black background for this reason. Remove the artboard fill in Rive, or choose an artboard without one, when the character should sit on your page color.

For breakpoints, Wix says Rive settings apply to all breakpoints by default. Use Responsive behavior in the Inspector panel so the element scales with its container, and let Fit and Alignment keep the character in view. If the file uses Rive layouts, set Fit to Layout and its layout options carry over.

Wix's settings list has no reduced-motion option. For a large looping hero, keep the motion calm, or use the embed route, where the snippet checks prefers-reduced-motion and skips autoplay.

Add a Rive animation to Wix Studio

  1. Add the element. In the Studio Editor, click Add Elements, then Media, then Rive, and add Rive Animations to the page.
  2. Upload the file. Click Change File and pick or upload your .riv in the Media Manager, then click Add to Page.
  3. Choose artboard and state machine. Open Settings and pick the artboard and a state machine that looks right with its starting values.
  4. Set playback. Set Fit, Alignment, Autoplay and Enable touch scroll, and give the element an accessible name or mark it decorative.
  5. Make it responsive. Set Responsive behavior in the Inspector and check every breakpoint.
  6. Add code only if needed. For moods driven by page events, use an HTML iFrame element with Rive's web runtime and send it messages with postMessage from page code.

Frequently asked questions

Can I upload a .riv file to the Wix Media Manager?

Yes. In the Rive element, click Change File and either pick a .riv already in the Media Manager or upload one with + Upload Media. Wix asks for a .riv exported correctly from Rive, so export from the Rive editor rather than uploading the project file.

Why does my Wix Studio Rive element show the wrong animation?

Wix's checklist is the artboard, the state machine and the element size. A file can hold several artboards and state machines, and the element plays the ones selected in Settings. If those are right and it still fails, re-export the .riv from Rive in case the file is damaged.

Does a Rive element in Wix slow the page down?

It adds the Rive runtime and your .riv file to the page, which is usually far smaller than an equivalent video. Keep the number of animated elements on one page modest, use a small file, and avoid making a large animation the first thing visitors must wait for.

Quick answers from this guide

Sources

Related guides