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! 🙏✨

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?

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 🥹

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.

Hey Rive,
I was on a monthly plan and recently canceled it in the process of trying to upgraded to an annual plan.
Now I seem to be stuck in a kind of billin limbo, where my monthly plan will end at the end of march, but I can't pay for an annual plan.

Can you help me out?

Hi, we have an app in beta test using rive artboards and animations, and they take noticeable time to load, how can we improve this? The animals below are all imported with Rive (animals in the round button -> animals to select on a square background and animals running / celebrating. They are the same riv file on different artboards, some nested artboards.

We're using reactNative with Expo.

Look below at 3 seconds, 8 seconds and 15 seconds:

Thank you!

Uploaded a .riv file to Webflow.
The .riv runtime file looks good on a shared link, but elements that have feathered stroke and elements that have an overlay blend mode look wrong when imported into Webflow.

wrong:

what it looks like in Rive:

I've created a Main artboard and nested 3 other artboards into it to achieve some sort of scene switching. I noticed several issues with that workflow:

- the loops are not playing at all - had to switch to "One shot" animation
- the animations are not as smooth as the original, there's a lot of twitching - had to turn mix down to 80%
- suddenly, some animations are not working at all or just partially working

What am I missing?

Here's the link to the REV file:
https://u.pcloud.link/publink/show?code=XZt7K45ZE72J4dgL6w4dqGQthKHPRmY7MU6k

MacOS Ventura, Desktop App

Hello,

I just started using Rive and the text is very hard to read.

Also the vector graphics antialiasing is very far from what browsers typically render.

Is there a way to mitigate this?

When I create text it looks nothing like your text in the editor.

It also seems that your editor application uses flutter.
So that is the reason why the editor text is readable while the rive text is not?

We are producing a service which allows fans to take captioned pictures of sports players where the caption tells a specific story. To do this we use the feature of text in runtimes being variable. The service includes the ability to post clips and pictures however, we have a question about how to set the runtime to jump to the end point of animation if the user is taking a picture, so the caption is not caught midway through the build.

Can you advise how to do this in Flutter, so that it can be triggered off the shutter button.

Is it possible to jump around State Machine in Flutter this way?

Hi! I'm new to Rive and as somebody who lacks knowledge in coding, I was wondering if there were beginner-friendly ressources available anywhere that explain how to embed a Rive element on Wordpress without having to upgrade your account?

Hi,

I am a Rive rookie so I don't know what I'm talking about but I created a Rive-Animation (red circle with an outside gradient to transparency).

On my website it came out with a crisp edge, no outside Feather-Effect.

Is it possible the web runtime does not support outside gradients/feather ?

If designers rename or remove events/state machines etc. The devs are relying on magic strings to hook up those events/state machines. As the project grows it becomes difficult to rely purely on communication between the teams.

Is there a tool or API we can use to get an exhaustive list of events/state machines in the file? This also applies to event property names, artboards, etc.

I took a look at the Web (JS) API and low-level API but couldn't see anything.

If it turns out I need to parse the rive file manually and build something, could someone point me to some docs I could look at?