How to get support
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
For help with your account or billing questions, please contact us here.
Сreate an animation with a cutout in an icon
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! 🙏✨
Riv file size jumped from 41kb to 942kb
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?
How to detect joystick reaching the end ?
https://rive.app/community/forums/support/fsnLLkXUaA62/events-in-joystick-driven-timeline/ftMtGkStQsFe
Following this thread, I'm trying to detect when a joystick driven timeline reaches the end to trigger an isDone event but so far I have not managed to find a way to do this. Would someone have an idea on how to do this ?
Thanks for the help
Im having runtime issues with flutter
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 🥹
Text Run Moving After Export
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
State machine unsyncs if you move to a different tab in any browser
Hey. so I've got a few nested inputs and nested artboards plus events. The problem is the animation sequences work perfectly as long as you remain in the tab. Once you leave the tab I think the events appear to pause, while other animations keep playing. So when you return to the tab, perhaps the events start firing again, resulting in crazy unsynced behavior. Can you help me figure out why? Thanks
https://rive.app/s/FlaDStqjo0_R3ME7GfEKdA/embed?runtime=rive-renderer
I tried both linux and windows browsers same issue
Here's the rev also
How to get artboard set to hug width and height during runtime
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.
Nested inputs exposed to parent artboard not working
Hi Rive Team!
I wanted to ask for your help with the following issue:
I have an animation where I have exposed a number of inputs from the nested dartboard to parent aboard. When I am working in the parent state machine, I see all the nested dartboard inputs visible in the "inputs" tab, however, when I try to set any one of them as a condition for a transition, the list that opens in the dropdown doesn't have any nested inputs - only direct dartboard inputs...
What can I do to fix?
Thanks in advance!
Pointer Down vs Pointer Up conflict
Hello, I have a state machine set up, where on pointer down (mouse is held down) an animation using solos and SVG's gets triggered and plays forwards while the mouse is held down, then when released it plays the animation backwards/reverse. The problem is that if you just click on it once, it triggers the forward animation but almost instantly goes to the reverse animation. If i set the forward animation to Exit Time 100%, it will not go to the backwards animation right away, but then it becomes a one click interaction, instead of the press down and hold interaction that i am trying to achieve. Not sure if i need to use a blend state or some additional listeners/triggers? Any help would be appreciated.
Running ver 0.8.2618, MAC OS, Chrom browser.
Billing Upgrade Issue
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?
Rive artboards slow to load on ReactNative app
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!
Feathered strokes and overlay blend mode look wrong in Webflow
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:
Problem loading file; may be corrupt! [Javascipt]
logs from browser:
rive.js:5453 Problem loading file; may be corrupt!
overrideMethod @ hook.js:608
(anonymous) @ rive.js:5453
step @ rive.js:3892
(anonymous) @ rive.js:3873
fulfilled @ rive.js:3864
Promise.then
step @ rive.js:3866
(anonymous) @ rive.js:3867
__awaiter @ rive.js:3863
Rive.initData @ rive.js:5408
(anonymous) @ rive.js:5326
Promise.then
Rive.init @ rive.js:5311
Rive @ rive.js:5268
(anonymous) @ yetti/:75Understand this warningAI
rive.js:5329 Problem loading file; may be corrupt!
The code below is a simple static HTML file with JavaScript. I have already recreated the Rive file multiple times, tried various CDN links, and ended up using a JS file. The strange thing is that this issue appeared after I rebooted my PC, even though I didn’t change any code. I tested it on Chrome, Firefox, and also used different deployment servers like serve
, http-server
, and the VSCode extension (Five Server).
live - https://vixkosla.github.io/yetti/
https://github.com/vixkosla/yetti/
Nested artboards - Export issues
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
Text readability
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?
Sports captioning - clips and pics: jumping to set end point in runtime
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?
[SOLVED] Wordpress integration
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?
Rendered Output vs Expectations
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 ?
Is there a tool or some other way to track differences between .riv files?
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?