Explore our ✨new Community✨by signing in with your Rive account: https://community.rive.app. Snappy, searchable, and mobile-friendly. Yes, really.

➡️ No need to create a new/separate account
➡️ Official support
➡️ Early Access discussions
➡️ Showcase for sharing work
➡️ Job listings, tutorials, and resources
➡️ Discord isn’t going anywhere

Environment

Unity 6000.0.40f1

rive-unity: 0.3.3-canary.80 (0.3.3 stable)

Issue confirmed occurring on Firefox, Safari & Chrome

Issue:

When attempting to render any Rive widget as a texture on a mesh through a WebGL build, it renders as a blank grey texture with the error:
OPENGL NATIVE PLUG-IN ERROR: GL_INVALID_OPERATION: Operation illegal in current state

See build here:
https://russcork.itch.io/rive-demo
& project here:
https://github.com/ross-kirk/UnityRive

Assets/Scenes/3D.unity has been setup with the issue in question

Steps to repro

1. Launch the build linked above

2. Click 'Open 3D Demo' button in top right

3. Observe issue & console with errors

Notes

Have added repo in current state, feel free to let me know if it is an issue with the config or player settings.

Works correctly when built to MacOS and Windows native, seems to be WebGL rendering issue.

Hi everyone! 😊

I’m racking my brain trying to figure out how to create an animation with a cutout in an icon. I’ve tried everything I could think of, but just can’t find a solution.

I’d be super grateful for any help! If you have a screen recording or a link to a tutorial video, please share it!

Thank you so much in advance! 🙏✨

I use Rive desktop 0.8.2618 on MBP M2 Pro macOS 15.3.1, when I open a rive file and click a group or group something, Rive just broken and quit.

Any rive file even create new one could trigger this error.

I try to start from /Applications/Rive.app/Contents/MacOS/Rive to see the log and got this when broken:

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[AXPlatformNodeCocoa startEditing]: unrecognized selector sent to instance 0x6000002f7520'

*** First throw call stack:

(

0 CoreFoundation 0x0000000197172e80 __exceptionPreprocess + 176

1 libobjc.A.dylib 0x0000000196c5acd8 objc_exception_throw + 88

2 CoreFoundation 0x00000001972281d8 -[NSObject(NSObject) __retain_OA] + 0

3 CoreFoundation 0x00000001970df830 ___forwarding___ + 1568

4 CoreFoundation 0x00000001970df150 CFforwarding_prep_0 + 96

5 FlutterMacOS 0x0000000102ecdc04 FlutterMacOS + 7172

6 FlutterMacOS 0x0000000102ecd604 FlutterMacOS + 5636

7 FlutterMacOS 0x0000000103747a88 InternalFlutterGpu_Texture_AsImage + 34256

8 FlutterMacOS 0x0000000102f0324c FlutterMacOS + 225868

9 FlutterMacOS 0x0000000102ee55dc FlutterMacOS + 103900

10 FlutterMacOS 0x000000010375a074 InternalFlutterGpu_Texture_AsImage + 109500

11 FlutterMacOS 0x000000010376cc64 InternalFlutterGpu_Texture_AsImage + 186284

12 FlutterMacOS 0x0000000103679fb4 ZdaPvSt11alignval_t + 7609916

13 FlutterMacOS 0x000000010376a364 InternalFlutterGpu_Texture_AsImage + 175788

14 FlutterMacOS 0x0000000103752fc0 InternalFlutterGpu_Texture_AsImage + 80648

15 FlutterMacOS 0x0000000102ee4e40 FlutterMacOS + 101952

16 FlutterMacOS 0x0000000102ee4ff4 FlutterMacOS + 102388

17 libdispatch.dylib 0x0000000196e63854 dispatchcall_block_and_release + 32

18 libdispatch.dylib 0x0000000196e655b4 dispatchclient_callout + 20

19 libdispatch.dylib 0x0000000196e74040 dispatchmain_queue_drain + 984

20 libdispatch.dylib 0x0000000196e73c58 dispatchmain_queue_callback_4CF + 44

21 CoreFoundation 0x000000019713f9d0 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 16

22 CoreFoundation 0x00000001970ff5bc __CFRunLoopRun + 1996

23 CoreFoundation 0x00000001970fe734 CFRunLoopRunSpecific + 588

24 HIToolbox 0x00000001a266d530 RunCurrentEventLoopInMode + 292

25 HIToolbox 0x00000001a2673348 ReceiveNextEventCommon + 676

26 HIToolbox 0x00000001a2673508 _BlockUntilNextEventMatchingListInModeWithFilter + 76

27 AppKit 0x000000019ac76848 _DPSNextEvent + 660

28 AppKit 0x000000019b5dcc24 -[NSApplication(NSEventRouting) _nextEventMatchingEventMask:untilDate:inMode:dequeue:] + 688

29 AppKit 0x000000019ac69874 -[NSApplication run] + 480

30 AppKit 0x000000019ac40068 NSApplicationMain + 888

31 Rive 0x0000000102a0d1a4 Rive + 20900

32 dyld 0x0000000196c98274 start + 2840

)

libc++abi: terminating due to uncaught exception of type NSException

[sentry] INFO entering breakpad minidump callback

[sentry] DEBUG merging scope into event

[sentry] DEBUG adding attachments to envelope

[sentry] DEBUG sending envelope

[sentry] INFO crash has been captured

After adding a simple move on path animation, the size of the .riv file has grown over 20 times, and it keeps getting bigger even after removing that animation.
How to get rid of unused content?

<Rive resourceName={'skills'} autoplay={true} stateMachineName="Designer's Test" />
from the docs stateMachineName property can only refer to one stateMachine. The behaviour described in the Flutter component stateMachines: ['bumpy'] with the ability to pass an array to stateMachine property

Please point me in the right direction if this is possible in the editor, but I often find myself wishing I could make an artboard a component that I could spawn variants from.

I have a button that will need differing icons, but i will either have to make individual artboards to preserve the original state machine, or animate the buttons in the main scene all with differing icons.

This is fine, but the the issue arises if I want to go back and tweak how the button looks. In that situation I'd have to edit X amount of buttons with the same exact change if I want a consistent edit in my already developed project. It would be even more of a headache if it's an animation change as I would have to tweak X amount of state machines/timelines exactly the same.

I would LOVE a feature like this, and I think Figma is the poster child for this sort of feature.

When we add feathers in the Rive editor, it works well. However, when we export it as a .riv file and try to use it in our Flutter app, we experience all sorts of visual issues, such as layers disappearing. We also get errors in the console.

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════

The following RangeError was thrown during paint():

RangeError (length): Invalid value: Not in inclusive range 0..1:

2

In the editor it runs perfectly but in flutter, its like the timelines are not behaving to the booleans correctly. Timelines running with other timelines when theyre on the same layer, I would love to send videos and the files, but I cant for secrecy, and theyre releasing the game in 4 days 🥹

Hey Rive! We would love to see support for defining Global Tokens, similar to Figma, that would allow for reusable value references across multiple animation projects in the same workspace.

For example, with Color Token support, I would be able to select text-primary in any Color pop-up and automatically have it use the #000000 color that I have added as text-primary.

It would be useful to, then, have Light/Dark mode toggling supported for the usage of these tokens. This way, I can define #000000 as my Light mode text-primary token and #FFFFFF as my Dark mode text-primary token. As of now, we have been using a boolean value to manually swap between colors for Light/Dark mode support but I could see this being supported at the editor and runtime level as Light/Dark mode is very common in mobile apps these days!

This would be most immediately helpful for defining color tokens but I could see the system also being expanded to include px sizing tokens as well (S, M, L, XL, etc.) for padding between elements.

Thanks for all that you do!

Whenever I scale down elements which have x/y stroke offsets set in the feather dialogue - the x/y position doesn't scale relative to the element and I end up with designs that have strokes in the wrong places

With the addition of feathering it became clear that the gradient editing, especially with multiple stops became too complicated.

ISSUE:
In Design mode there is no way to precisely place the stops - there is no output where the placement of the stops can be manipulated.

SOLUTION:
Add fields to adjust the place of gradient stops in percent of the gradient length

ISSUE
When I have a lot of gradient stops and they are near each other, it is:
(i) very difficult to grab the correct stop
(ii) it is generally difficult to work with stops since the window for the stops is pretty small so the gradient line representation is very short
(iii) when animating gradients, every time I click away to advance the timeline or move the artboard, the color window disappears.

SOLUTION:
make the window for color/gradient editing resizable, and add an ability to "pin" it so it can remain open consistently.


Please consider these improvement

Thanks in advance!

In Rive desktop my text looks centered. I export and put it in Flutter and the text moves off center.

Rive Desktop App: Mac: 0.8.2618 R

Flutter

Hey, I'm using the WebGL2 renderer for my game. I've got a tooltip artboard that is set to hug it's contents so it will change based on the size of the text. This works well normally, but I want to render it to the left of the mouse if it's close to the edge of the screen or above if it's below. The artboard scales to fit the text in the editor, but the artboard object always reports the size I set it to. Is there a way to get the size that it hugs to for the layout in code?

And this is my JavaScript code:

this.height = this.artboard.height;
            this.width = this.artboard.width;

            // ensure tooltip is on screen
            if(Game.VisualMouseY + this.height > window.innerHeight) {
                this.stateMachine.offsetTransform.ty = Game.VisualMouseY - this.height;
            }
            if(Game.VisualMouseX + this.width > window.innerWidth) {
                this.stateMachine.offsetTransform.tx = Game.VisualMouseX - this.width + this.xOffset;
            }

            this.renderer.save();
            this.renderer.transform(this.stateMachine.offsetTransform);

            this.stateMachine.advance(elapsedTimeSec);
            this.artboard.advance(elapsedTimeSec);
            this.artboard.draw(this.renderer);
            this.renderer.restore();

In this case it always returns 491 and 221 even though it has shrunk to fit the size of the text.

Hello, I've been scouting Rive to become the foundation of my UI system for my next Unreal project. I have been trying to evaluate the performance of Rive and feel like there's a problem that needs to be solved.

Rive does not seem to be giving any details for Unreal Insights about what is expensive. Take these two screenshots for example. The first one is extremely expensive, but the second one isn't. It's hard to evaluate why the first one is expensive due to the lack of details.

For developers to understand what to do, and what NOT to do, we need numbers, and these Unreal Insights numbers aren't enough to help developers like me understand what is slow and what is fast.

I have a state machine to randomly select a color for character customization. This was initially not working even though I could see the events fire. To fix this I added 100ms to the transition time.

I feel like this has been the case for a while because I have some sound effects at the very end of an animation for things like Complete and they no longer work. It seems like they need a bit of time for Rive to process them. My solution in other instances was to fire the event in the transition.

Steps to reproduce

1. Create a timeline with an event trigger on the first frame.

2. Create a transition that goes to the timeline and back on a trigger.

3. The event lights up but is never registered.

Expected behavior

No matter how long an event is in a timeline, it should register as fired if it gets to that frame since it is a one time event.