I have built an interactive map that has sound effects that are triggered when a user clicks on a room.

How could I add a mute button, so that all sound effects can be muted by the user?

I have built an interactive map of a building. The map is split into multiple room. Rooms can be selected and interacted with. Each room has multiple states: unselected, hover, selected, visited.

How can I make it possible to zoom in and out of the map on mobile devices?

The map is embedded in a web app. When viewed on a mobile device, it is impossible to pinch and zoom, is there a way to enable this?

Or is there an straightforward way to add zooming functionality within Rive?

Audio Not playing in rive.rip nor embebed links.

Hi guys, I wonder if there is a preview app other than rive.rip to check if our animations are playing correctly embebed audios.
We have a series of shorts animations (about 3or 4 secs.) with multiple characters, we had set up key frame for playing audio events, we see them working perfectly on rive.app, we were ask no to use state machine, justa different timelines for each character´s animation. The issue comes when we try to preview animations outside rive.app, they play with no sound. So, is there any way to check if they are working propertly?
All sound assets are set as embebed, all sound events have event key frame play, and all perform perfeclty on timelines.

Any clue?
Thanks

Hey! Not sure if this is a bug or not... Adding .riv files into Webflow... If I add my .riv file into a parent div block that has initial state display: none on page load, the Rive file does not display (a nav dropdown menu, for example, that is set to display: none on page load, when opened by click or hover, the .riv is not visible - I can see it in Inspect but it's not visible on the page)... This is also the case when my .riv files are inside Webflow tab elements (Rive files do not display in the 'not-current' tabs) - .riv files are working fine when added to non-hidden elements, etc. NOTE: I'm using the built-in Webflow 'Rive' element, not an embed... also, this is not just a 'my project' issue but one that affects all Webflow projects

My subscription was just renewed by mistake, I never used the software please refund me

I am in the process of integrating Rive on our website. I can find some sparse documentation regarding CSP rules (https://help.rive.app/runtimes/overview/web-js/faq#i-have-content-security-policy-set-to-block-unsafe-eval-and-now-rive-fails-to-load.-what-do-i-do) but I would need a full CSP rule set listing all the directives and the corresponding values. Can anyone please point me somewhere it has documented?

Is it possible to export just one artboard at a time for runtime, instead of the whole file?

I'm missing the grid functionality (fixed, responsive etc.).

I'd like to design in Rive but it looks like I'll have to keep using Figma for precision.

I want to have a circle move from the center of an animation, to the top right corner of an animation, over time (let's say 1 second).

However, I want it to be responsive, based on the new layouts features. No matter how wide or tall the artboard is, the circle starts in the center, and ends in the top right corner of that artboard.

Currently this doesn't seem possible, as you can't keyframe/interpolate between alignments, though it seems pretty important. Am I missing something?

I need to know if events have IDs when called in code, I have 5k instances of an artboard inside a parent artboard, I want to get which did the user interact with to put them in an array.

Unfortunately I cant share any files for the NDA

I've updated the Rive editor a few minutes ago and since then I can't seem to open/edit my file from the desktop app, it just crashes/freezes. I've sent the .Rev to the support email.

Thanks for your help! I've got a lot of urgent work to get done on this so I'm hoping it'll be quick 😊

William

I'm new to Rive, so I need help with an issue.

1. I have a button for left reactions (similar to Instagram Live stream).

2. I have 5 different timelines for smile animations flying from different positions along the X-axis (Smile1, Smile2, Smile3, etc.).

What I Want:

1. Each button press should trigger an emoji animation that "flies" out, similar to reactions in an Instagram Live stream.
   I want the timelines (Smile1-Smile5) to play on each button tap.
   E.g. I tap 1st time to button = Smile1 fly out, I tap one more time - Smile2 fly out and so on.
   
   2. These emoji animations should not stop or interrupt one another; instead, each animation should play independently and in parallel.
   
   My problem is:
   The duration of timeline for flying smile is 1 second. When I press the button state machine waits when Smile1 animation finish. I can press the button (trigger) 2-3 times per second but only Smile1 timeline plays. So I need a smile to fly every time I press this button. How I can do it?
   

'm trying to use the Rive component inside a TouchableOpacity in my React Native app, but the onPress event doesn't seem to trigger when I wrap the Rive component inside TouchableOpacity. This issue is specifically happening on iOS.

Here is the code I'm working with:

<TouchableOpacity

activeOpacity={0.6}

onPress={() => {

if (game?.turn !== userInfo?.gamerTag) {

handlePressOut();

return;

}

if (item.id === selectedCard?.id) {

handlePressOut();

} else {

setSelectedCard(item);

}

}}

style={[

{

width: 63,

height: 98,

},

]}

>

<Rive

ref={frontRef}

url=""

artboardName="Front AB"

stateMachineName="Front SM"

autoplay={false}

style={[{ width: 63, height: 98 }]}

fit={Fit.Cover}

/>

</TouchableOpacity>

Frequently while working in Rive I will set a keyframe on a timeline but later realize I want to remove the keyframes from that parameter. To find this keyframe, I need to know which timeline it was keyed in, this gets hard the more timelines I have. It would be great if I could right-click on the keyframe icon on the parameter in the side panel and get a dependency tree of which timelines have keyframes for that parameter.

I run into this problem a lot when working with many layers. If several layers have timelines with keyframes on the same parameter, the top one blocks the ones below. I often have to hunt down and remove keyframes so only timelines on a single layer have keyframes on any given parameter.

I am defining a spec for a flutter App and was suggested to use Rive as the tool to provide animated caption graphics to be captured on video clips recording on a smartphone.

I can add the text at runtime, so my question is about how to combine the camera feed and the animation into the same output file saved to the device. Am I reliant on screen_recording or is there a better method?

Hi everyone,

I’ve created an animation in Rive and successfully uploaded it to my Webflow site. The animation includes three buttons that appear at different stages to control specific actions (these buttons never appear at the same time):

1. "Start": Triggers the animation to start.

2. "Let's do it": Acts as a decision point to progress the animation.

3. "Restart": Restarts the animation after it ends.

In Rive, I’ve set up trigger inputs for each action and added listeners to ensure that the correct button triggers the corresponding action and it works as planned.

When I test the setup in Webflow (after importing the .riv file and assigning 3 click interactions to the .riv element, all actions are triggered by clicking anywhere on the .riv element, instead of just within their respective button target areas.

My suspicion is that Webflow treats the .riv file as a single element, and since the layers aren’t visible, the interactions aren’t recognizing the button-specific target zones.

Has anyone encountered this issue? Is it even possible to get accurate, target-specific interactions in Webflow when using Rive animations? I’d love to hear any insights or solutions you might have!

Thanks in advance!

IOS and Riv files used in UICollectionViewCell will flash when refreshed