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?

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:

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.

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.

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

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

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

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")

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

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

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

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

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!

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

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!