I have a large rive file I am loading for a cutscene in my HTML game. It seems fine but right before it starts playing it renders pink for several seconds. This happens on shorter ones as well but this is by far the largest file with lots of images.

This is what it looks like:

This is my code to load the cutscene:

static async showCutscene(name, callback = null) { var bytes = await (await fetch('assets/rive/cutscenes/' + name + '.riv')).arrayBuffer(); this.cutscene = await this.rive.load(new Uint8Array(bytes)); this.cutscene.artboard = this.cutscene.artboardByName('Cutscene'); this.cutscene.artboard.volume = Sound.GetSoundVolume() * 0.01; this.cutscene.stateMachine = new this.rive.StateMachineInstance( this.cutscene.artboard.stateMachineByName('State'), this.cutscene.artboard ); this.cutscene.callback = callback; this.cutscene.loaded = true; }

As soon as the loaded variable is true, I start rendering. I figured the rive.load wouldn't return until the file was ready. Is there something else I need to wait for to ensure it is ready to render?

Thanks!

Hi there,

I just recently started creating with Rive and am now facing problems for the first time. I have two related questions, both involving triggers. To be totally honest, I haven't really got the hang of the whole trigger, listener, event thing yet.

I want to start in an idle state and when the trigger fires, play an animation. I want to be able to trigger the animation again at any time, even if it is still running. I came up with this solution and would like to hear your opinion. Is there a "more correct" way of doing this?

The second question is the main problem I'm dealing with at the moment. I have three artboards which change depending on the input number. The first two have looping animations, no problems there. The third one is the one from above. It has an animation that is only played once and therefore must not start until the artboard is in view. That's why I added the trigger. I just have no clue how to trigger the animation at the right time, and so that it triggers from the beginning every time the artboard is shown again.

Any help would be much appreciated. Thank you for your time and happy animating! Cheers, Sam

Facing issue while exporting the rive file transperancy is not working

Hi, I recently created an animation with text value and I'm hoping can be synced with a database to change the string value and update daily. How do you suggest I Set this up to handoff to my developers to add to this app? For context: It's for an expo react native app.

The new feathering feature obviously doesnt work in flutter due to skia/impeller renderer. im trying to look into using the flutter rive_native package which says it supports state machine inputs.

However none of the examples in the package showcase how to do this and the API is completely different to the Rive Flutter package so porting my code to rive_native will atleast require some decent documentation.

Please provide some basic snippet examples for how to implement controlled inputs on pre-loaded rive assets into a riveRenderer widget

I have a problem with the new feather tool. Everything works fine in Rive, but when I upload it to Webflow, it loses the effects.
Could you please help me?
I am on desktop app 0.8.2495 R on Mac OS Sequoia 15.1

Hello, I am trying out the new vector feathering feature, it works just fine in the design and animate playback. However when I export it to share / embed links, the feather doesnt render at all in those links, showing just a normal stroke.

Is this normal? or am I missing some kind of setting?

I am on desktop app 0.8.2495 R in Mac OS Sequoia 15.2

in the share link

in rive app playback

Hi, I'm collaborating with a friend on a project. We don't share the same team, we own two different companies but each one of us has his own Voyager paid acocunt. If I invite hit to collaborate I need to pay for a new seat, but it's a full price for just sharing a file (by the end we are already paying as two team members). Is it possible that there is not a way to share a file online to collaborate between two Voyager accounts? I understand its a team thing, but the price should at least be different if that person is already paying, we have already unlocked the "benefits" of the paid versions, I don't understand why should we pay for those benefits again.

Thank you,

I want to control the 'Hide' property in a timeline animation that's being triggered from the state machine. In the timeline, I'm hiding one layout element and unhiding another at exactly 1s. however, this hiding and unhiding is happening immediately on the state transition, rather than waiting for 1s into the new state to hide and unhide. all of the keyframes used are hold keyframes. i don't want to set multiple keyframes on each element because the state machine transitions will happen from the 'any state' block. how do i achieve this?

i have multiple nested artboards, each with in and out animations. I want the main composite artboard to transition states with interpolation, and have the current nested artboard animate OUT, and then at exactly 1s hides, while the new nested artboard is unhidden and animates IN.
I'm guessing that this might require multiple layers to achieve, but not sure how to do it. Thanks for your help!!

I updated to V 0.8.2495 today. I exported a .riv to upload to my wix site (not using wix studio) and I receive the error: "Files are not supported. Try a Different file."

I uploaded old .riv files I knew were accepted by Wix before and they were accepted again. I then exported those same files from the current Rive version and received the error. Attempted this with both the desktop and web versions of the app.

Is there a way to rollback the desktop app to a previous version?

Hi there I'm needing a bit of help with getting Vector Feathering working with a local HTML preview of my .riv file.

I'm working on confidential work that cannot be uploaded to online previewers so I made a simple HTML Template to drop my files into to ensure the rendering is working. However i'm unable to see the Vector Feathering in the Preview.

I've enabled the WebGL Draft Flag in chrome and it didn't seem to change anything.

This is my code below,


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Rive Animation Player - Interactive</title>

<style>

body {

height: 100vh;

margin: 0;

display: grid;

place-items: center;

background-color: #222; /* Dark Dark Grey Background */

}

canvas {

/* You can adjust canvas styling here if needed */

width: 200px; /* Example width */

display: block; /* Important for event listeners to work correctly on canvas */

}

</style>

</head>

<body>

<canvas id="canvas" width="500" height="500"></canvas>

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

<script>

const r = new rive.Rive({

src: "Button.riv", // Your animation file

canvas: document.getElementById("canvas"),

autoplay: true, // Set to false if you want the SM to control initial state

stateMachines: "State Machine 1", // <-- UPDATED State Machine Name: "State Machine 1"

onLoad: () => {

r.resizeDrawingSurfaceToCanvas();

const canvas = document.getElementById('canvas');

const stateMachineName = 'State Machine 1'; // <-- UPDATED State Machine Name: "State Machine 1"

const inputName = 'Play enter'; // <-- UPDATED Input Name: "Boolean 1"

const stateMachine = r.stateMachine(stateMachineName);

const hoverInput = stateMachine.input(inputName);

if (hoverInput) {

canvas.addEventListener('mouseenter', () => {

hoverInput.value = true; // Mouse enter - set 'Boolean 1' Input to true

stateMachine.advance(); // Need to advance SM to apply input change

});

canvas.addEventListener('mouseleave', () => {

hoverInput.value = false; // Mouse exit - set 'Boolean 1' Input to false

stateMachine.advance(); // Need to advance SM to apply input change

});

} else {

console.error(`Input named "${inputName}" not found in state machine "${stateMachineName}".`);

}

},

});

</script>

</body>

</html>

Hello Rive Community,

I'm currently working on integrating Rive into an Unreal Engine project and I have a few questions about the capabilities of the Rive C++ API. Is there a way to dynamically create new elements (like shapes, paths, or groups) directly on an artboard using the C++ API? If so, could you provide an example or point me to the relevant documentation or API functions? Can I directly manipulate the transforms (position, rotation, scale) of individual elements on the artboard through the C++ API?

I have managed to access the inputs, but changes made to them don’t seem to be applied. Is there a specific method or procedure to ensure these changes take effect? When traversing through the objects in artboards it seems like none of them returns their proper name, first one returns artboards name and the rest of them just an empty string.

What am I missing?

How would one identify, transform and apply changes to an element on an artboard?

I've ran into is this problem: while the canvas is sizing properly to fit various browser w/h params, the animation itself does not resize to accommodate the new size, despite the canvas being set using CSS to the 100vh/100vw... and using resizeDrawingSurfaceToCanvas() in conjunction with the matchmedia/change event listener. So what I've ended up doing is coming up with a function that would calculate the layoutScaleFactor dynamically based on viewport height and adjust it based on the window being resized, but I feel like this is not the proper way to do it... In addition when using the this workaround, the hitboxes in the nested artboards are not updating properly during the sizing so the animation triggerS incorectly…

so I need some help figuring out what I did wrong - be it on the animation side or on the renderer setup side…

I used to be able to right click->copy, then right click -> paste.

Paste no longer exists.

Hi,

Does anyone know when the newest rive version will come out to support react ^18.2.0?

Right now it is

This library supports React versions ^16.8.0 through ^18.0.0.

I'm new in Rive. And I want to use Rive on iOS, but something confusing me.

When I play a animation that created with loop mode `One Shot`, with following code:

rViewModel.play(animationName: "animation_name", loop: .pingPong, direction: .autoDirection) 

But the animate still playing in `oneshot` mode ???

Environment:

• iOS 18.0;

• RiveRuntime v6.5.11, from SPM

Did I do something wrong ?

Here is the comment of the method:

    /// Starts the active Animation or StateMachine from it's last position. It will start
    /// from the beginning if the active Animation has ended or a new one is provided.
    /// - Parameters:
    ///   - animationName: The name of a new Animation to play on the current Artboard
    ///   - loop: The loop mode for the active Animation
    @objc open func play(animationName: String? = nil, loop: RiveLoop = .autoLoop, direction: RiveDirection = .autoDirection)