Rive is getting increasingly capable of creating a fully functional UI system. However, it takes a lot of manual labor to get this to work. A pre-made UI framework containing common UI items would be very useful to speedup the workflow.

Hi.

If I have 10 fonts that I would like to be able to choose from at runtime. Wondering, do all of these 10 fonts need to be added in to the rive project and set to referenced? Or can I just use 1 font in the rive project, set that to referenced, and use code to create more font choice? I couldn't quite see in the documentation about whether referenced fonts must be added to the rive project to be able to be referenced.

Our website also uses google translate support up to 30 languages. Our Rive files (using Inter) work for several of these languages (French, Spanish etc) but wondering what is the best workflow for 'fall back / system fonts' for when glyphs aren't supported. (e.g. Chinese) Hoping there is a way to not have to import all fonts in to rive. (Noto Sans SC is extensive but still doesn't cover all 30 fonts).

If there are any recommendations of best practise or direct examples you could share of the code setup for the above, that would be great. simple JS or React. I did see this example from Gordon Hayes on Code Sandbox with the out of band fonts swapping out but assuming these fonts need to be added to the rive proj?

Thank you.

Craig

I did an illustration which has grain texture effect. The image size is 256x256 px and simple black and white illustration. When I import svg in Rive, the grain texture is not visible although there seems to be a group layer.

I’m unable to attach the image here, but I want to create an outline with thin values and an inner feather. However, I’m unable to do so because the black outlines of the layout feature overlap it.

I can see the "Copied Style" notification, but can do with it nothing.

I've been trying to get rive methods working with a web asset

My code is basically below, however nothing happens when I press my button. I can see the asset rendering but not moving

import Rive, { RiveRef } from 'rive-react-native';


function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handlePlay = () => { riveRef.current?.play() };

  return (
    <>
      <Rive ref={riveRef} url="https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv" autoplay={false} artboardName="Avatar 1"
            stateMachineName="avatar" />
      <Button onPress={handlePlay} title="Play">
    </>
  );
}

I'm following this tutorial: https://www.youtube.com/watch?v=hdhmp78jbqs and this repository https://github.com/pedroalpera/rive-followmouse-outside-canvas to create tracking outside of the canvas on web.

For some reason when I use my version of the cat, it no longer wants to track the eyes outside the canvas. It works fine with the rive file supplied in the repository though.

I think it has to do with the node Mouse_Target not existing, but in the video tutorial that's not mentioned.

I don't know where I should add Mouse_Target. Is there a way to view export .rive files or can you point me in the right direction here?

Hi everyone,

I'm trying to navigate the Rive editor more efficiently and was wondering if there is a way to scroll horizontally using the mouse wheel.

In many other apps (like Figma, Adobe tools, etc.), holding Shift + Scroll moves the viewport sideways. But in Rive, this doesn’t seem to work for me.

Is there a shortcut or setting to enable this? Or is it just not supported?

Thanks in advance!

(Desktop App version 0.8.2511)

I found that Option + Align short cuts are not working on Bitmap based files (png, jpg ..)

so I use Freeze tools instead. but i hope this is fixed soon.

thx.

Rive version 0.8.2511, Desktop app on MacOS 15.3

I have a very simple file, with just an artboard and a textfield.

If I copy this file in the same project (Personal Files), nothing weird happens.

But if I copy the same file in another project, the text field flattens to a height of 0, and the text seems to have... disappeared. Still shows up in the "Text run", has normal properties, but nothing on the screen.

Ever since the feather feature was introduced, I started using it. However, when I export and play it on my device (Mobile or Web), the feather effect doesn’t appear—it only shows the fill color.

I want to delete a user from my account

I'm trying to log into my account, but it says it doesn't exist, and some animations I had embedded on certain pages are also showing as if they don't exist. I need help.

this is an example of the code that does not work anymore:
https://rive.app/s/J70utS8eeUelVIQXc5O-sQ/embed

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