Skip to main content
Support
8mo ago

How to get support

Please post your general support questions.

  1. Explain in detail what you need help with.

  2. Tell us what browser/desktop app/OS/runtime you're using.

  3. Include a screenshot, video, code snippet, or a .rev backup file.

For help with your account or billing questions, please contact us here.

0 replies
L
1h ago

Basic steps for this animation

Hi folks! I'm experienced in Figma and the basics of Adobe animation but new to Rive, have just been playing around with the mouse interactivity features. Stumbled upon this cool animation in a website recently - anyone mind outlining the basic steps for me to recreate it in Rive?

0 replies
13h ago

Return to first frame in the default state?

I've been struggling with this for days. My original animation was a bit complex so I made a brand new animation with 2 states, each one with a timeline:

- Idle: Looping animation shows a green triangle that doesn't move.

- Hover: One shot animation that shows a red triangle spinning. 

I have defined a Boolean input (isHover) and two transitions:

- From Idle to Hover with condition "isHover" = true

- From Hover to Idle with condition "isHover" = false

If I play the animation and click on the input when the animation is in the Hover state the triangle changes to green and the Idle state is active in the state machine visualiser. However the green triangle is in whatever position the red triangle was instead of going back to the Idle animation position.

I want the animation to return to the original state with the first triangle in the default position, this should be easy because it seems basic but I've seriously tried a million different things and can't make it work so any help would be appreciated.

You can see it here: https://rive.app/community/files/12687-24042-failed-test

State Machine:

2 replies
14h ago

Custom path vertex values ignored

There’s an issue with Rive rendering vertexes without length on iOS, where a circular path gets each vertex sharpened down to a right angle corner. In the top image you can see the length of 19.74, in the bottom you see that changing this length to 0 sharpens the corner. My guess is that vertex length is sometimes being ignored across all custom paths.

0 replies
P
15h ago

Full Animation is Not Exporting

I'm having issues with Rive not exporting my full animation on 2 out of 4 Rive files I'm working with. In my Rive account, in both browser and desktop app (version Beta 0.8.1808 R), the full animation plays after hitting play on a selected scene. However, when I export that scene as a riv file and upload it to my hosting platform, only a partial amount of the animation plays. I'm exporting these files all the same way, so I don't understand why 2 of them are not fully exporting.

Using Chrome Browser (Version 128.0.6613.120) and Runtime version 2.20.0

Full Animation from Rive preview:



On my site via WebJS (autoplay is on):

I want to note that using a Rive Share link shows the full animation. However, I'm needing to use WebJS to have control over the animation via the parameters available.

0 replies
20h ago

Not able to render animation with sound

Hello,

I designed an interactive animation, and I am rendering it on a Wordpress website.

I managed to render the animation without audio, but when I render the animation with audio the animation starts and stop immediately, without rendering any audio.

This is the link to the animation in Rive: https://rive.app/community/files/12682-24036-abstract-communication

This is the link of the website where I am rendering the animation: https://kontradiktion.fi/2024/09/sara-sssimone/

And this is the code I have been writing:
<div class="sscontainer">

<canvas id="sscanvas" width="700" height="397"></canvas>

</div>

<script src="https://unpkg.com/@rive-app/canvas@2.9.1"></script>

<script>

const r = new rive.Rive({

src: "https://kontradiktion.fi/wp/wp-content/uploads/2024/09/Sara-Sssimone-animation-with-audio.riv",

canvas: document.getElementById("sscanvas"),

autoplay: true,

stateMachines: "State Machine 1",

onLoad: () => {

r.resizeDrawingSurfaceToCanvas();

},

});

</script>

I tried to render the animation on Firefox 130.0 (64-bit) and Google Chrome 128.0.6613.120 (Official Build) (64-bit). I used Rive app v 0.8.1780

Could someone help me to solve the issue?

Thanks a lot,
Sssimone

0 replies
n
20h ago

How do I delete a Render preset?

Stupid question, but I cant find a way to delete a render preset from the right panel after creating it.

1 reply
F
21h ago

Exit Time not working

I have a very simple state machine. Only 2 states. I want the first state to play and then at one point it will be interrupted by a boolean or a trigger and it should instantaneously cut to the 2nd animation, no transition, 0 exit time.

Even with Exit time set to 0 and I've tried using Pause when exiting, nothing works. The transition does happen when I want, BUT the first animation always keeps playing for a few seconds simultaneously with the 2nd state. So why isn't the Exit time working? Ive been at it for hours and watched many tutorials.

Ideas? I'm desperate.

Specs:

Mackbook Pro / Ventura 13.5 / Rive BETA 0.8.1808 R

3 replies
P
23h ago

Edit Image in Runtime in Unity

In Rive docs on Unity, I saw there is PNG images feature support, but I cannot find how to use them within Unity.

Can I edit Images within Rive in Unity? Similar to TextRun?
artboard.SetTextRun("textRunName", "newValue")

4 replies
F
1d ago

Timelines and assets overlapping in Animation mode and in State machine

So my setup is this, I have 2 animations (each in their own art board) and 1 main stage art board where both animation timelines are in. I have set up a simple state machine (First animation loops and then when there is a Boolean triggered then the next animation plays only once) That is my goal.

Problems:

1. The first frame of the 2nd animation is always there (in Front of everything) until the 2nd animation starts playing. Therefore it is blocking the 1st looping animation. 2nd animation plays perfectly on its own in its own timeline.

2. The 1st looping animation never stops looping, even after the Boolean is triggered and the 2nd animation starts. The 1st animation is also blocked visually by the 2nd animation. Why would looping animation keep playing after the state machine already moved on? How could the 2nd animation's first frame be inside a different timeline and in front blocking?

I am new to Rive so its very possible Im overlooking or making some noob mistake, any ideas? need more info or context? Thanks!

Setup:

Macbook Pro / Ventura 13.5 / Rive BETA 0.8.1808 R

1 reply
R
4d ago

RIVE UE5.4

Is there any update on when you guys will release a UE5.4 version?

0 replies
B
5d ago

Rive in Unreal Engine 5.3 for Android

Hey everyone,

I am trying to use Rive for the game UI of an UE 5.3 project that is targeting android devices (for testing purposes a Samsung Galaxy Tab S7+). I can cook and build the project just fine and install it on my tablet, but the widgets are just not there. I get no warnings/errors when building or during the game itself, the widgets are just missing.

To see if it's an issue with rive or with widgets on my android tab in general, I placed the rive widget and a simple button beneath it and tried building, below the result from the Mobile Preview PIE. The button and Rive widget appear as they should, but on the android device itself only the button appears.

I am building from a Windows 10 PC, I set RHI to DirectX11, disabled Vulkan Support for Mobile, ensured that Support OpenGL is enabled...I am kind of lost where to look. The Cook and Build logs give no clues because I get no errors or warnings.

Thanks in advance for your help!

Android Build
Mobile Preview PIE
0 replies
H
5d ago

Getting fatal errors "Error Domain=rive.app.ios.runtime Code=600"

Rive: v0.8.1780 browser and app
OS: macOS 14.6.1 (23G93)

Hi everyone 👋

First time Rive-user here. My team and I are getting this error constantly from Xcode:

Thread 1: Fatal error: 'try!' expression unexpectedly raised an error: Error Domain=rive.app.ios.runtime Code=600 "Malformed Rive File." UserInfo={name=Malformed, NSLocalizedDescription=Malformed Rive File.}

My file is super simple. One timeline with small opacity-transitions. I have even done a stripped-down version with no anim, and still we get the same error.

I've made a small bounce-scale-effect that I placed into a separate Artboard. Is this a no-no?

All my layers have unique names.

Any heeeelp please!

Best, Henriko

0 replies
L
7d ago

Very thin outline around clipped shape

So I followed this color setup here: https://www.youtube.com/watch?v=6ywY_ziweoc

And everything works great! ... Except I can't seem to remove the very thin outlines that appeared around the shapes.

I notice that it happens when 2 identical shapes are directly on top of each other and the shape under is in a darker color. I could make the under shape smaller to prevent it... but I need them to be exact same for this setup to work properly. It's also happening to the eye example from the video; becomes more visible if you make the iris all white :(

Is there any way to remove the outline? Any thoughts would help a lot, thanks!

4 replies
M
10d ago

Nested Artboard with no events

Hello, I am getting a message saying my nested artboard has no "events", so I cant add a listener to it. Yet the artboard does have animations and a functioning state machine, its fully animated and even gets triggered in the parent artboard. I want to add another layer of interaction in the parent artboard

6 replies
D
11d ago

Mobile Display Issue

Hey!

I just launched my site that uses blend states in Rive to transform the artboard and the contents inside it depending on browser window width. I have the canvas locked at a fixed width and heights as the Rive project adjusts itself inside the given canvas (1920x3000).

On desktop, the site is functional and responsive as intended. On mobile/tablet however, the canvas is loading, but not displaying the rive project.

Is there a potential fix for this? I have tried it using Safari on an IPhone 11 Pro and my buddy's IPad.

Any help is much appreciated. This is my first true experience with web development outside of no-code tools.

Here's the site: www.drewgib.com

The Rev:

The Code:

<html>
  <head>
    <title>Drew Gibson</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
      body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow-x: hidden;
      }
      canvas {
        display: block;
        margin-top: 0;
        width: 1920px; /* Keep the width fixed */
        height: 3000px; /* Keep the height fixed */
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="1920" height="3000"></canvas>


    <script src="https://unpkg.com/@rive-app/canvas@2.20.0"></script>
    <script>
      const { Rive, EventType } = rive;

      let widthInput;

      const r = new Rive({
        src: "new_responsive_design.riv",
        canvas: document.getElementById("canvas"),
        autoplay: true,
        stateMachines: "Cards",
        onLoad: () => {
          r.resizeDrawingSurfaceToCanvas();

          const inputs = r.stateMachineInputs("Cards");

          widthInput = inputs.find(i => i.name === "windowWidth");

          if (widthInput) {
            widthInput.value = window.innerWidth;
            console.log(`Initial Width set to: ${widthInput.value}px`);
          }
        },
      });

      function updateWidth() {
        if (widthInput) {
          widthInput.value = window.innerWidth;
          console.log(`Width updated: ${widthInput.value}px`);
        }
      }

      window.addEventListener("resize", updateWidth); // Keep this to update Rive's windowWidth input

      function onLinkedinClick() {
        console.log("Linkedin clicked!");
        window.open("https://www.linkedin.com/in/link-drew-gibson/", "_blank");
      }

      function onEmailClick() {
        console.log("Email clicked!");
        window.location.href = "mailto:drew.gib@outlook.com";
      }

      r.on(EventType.RiveEvent, (event) => {
        const eventName = event.data.name;
        
        if (eventName === "LinkedIn") {
          onLinkedinClick();
        } else if (eventName === "Email") {
          onEmailClick();
        }
      });
    </script>
  </body>
</html>
1 reply
Y
11d ago

Unwanted black outline/contour around .PNG files

Hi everyone, I'm having a problem with the .PNG images I'm importing, which are all surrounded by a black outline, which is very annoying. I'd like to point out that the images don't have this outline in the first place, I've tested with several images and the problem is still there. Do you have any idea how I can correct the issue ?

Thanks in advance!

2 replies