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

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 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'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>

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!

I am trying to figure out the code for a rive animation with nested artboards. I made sure this is the path:

Inspecting Rive File: assets/rsvp3.riv

Root Artboard: Artboard

• Nested Artboard: notgoingartboard

  • Animations: State Machine: notstate

    • Input Path: notgoingartboard -> notgoing_click (SMITrigger)

    • Input Path: notgoingartboard -> notgoing_turnoff (SMITrigger)

• Nested Artboard: maybeartboard

  • Animations: State Machine: maybestate

    • Input Path: maybeartboard -> maybe_click (SMITrigger)

    • Input Path: maybeartboard -> maybe_turnoff (SMITrigger)

• Nested Artboard: goingartboard

  • Animations: Animation: going

    • Input Path: goingartboard -> going_click (SMITrigger)

    • Input Path: goingartboard -> going_turnoff (SMITrigger)

this is how the rive looks like:

I can't figure out the code to show the nested artboards and for it to work.

I've been using Rive from @rive-app/react-canvas in my codebase and I've dynamically imported it (deferring the loading of the library function until it is needed), which does not seem to work for the useRive hook so I am only using the default export Rive function. I can render an animation successfully but I am trying to be able to set the state machine input and text runs without being able to import any new hooks. Every time I try to use useRef it doesn't find a defined ref for Rive and/or throws this:
 Warning: Function components cannot be given refs

. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?  

TLDR: Does anyone know how to change state machine inputs & text runs without using useRive or any of the hooks?

I'm trying to create a film reel that is pliable and able to bend in different shapes. When I create a rectangle inside of a rectangle and then connect bones to the bezier handles inside of the outer rectangle, only the outer rectangle moves with the bone. I assumed that because the other rectangle was inside of the outer rectangle that the path would also move with the outer rectangle. This is strange as I would imaging that creating different shapes inside of shapes would allow for the paths to stay inline with each other. Can you shed some light on how you would achieve this?

I can upload a file, however, I'm not sure where do to that in this thread.

Thanks!

Using the Follow Path constraint I have a circle going in a loop on a very simple path(an oval)

I'm looking for a way to smoothly increase and decrease the speed of the circle on hover on/off

I've tried blending and transitioning to the same timeline with higher speed but I always get a stutter depending on when the action happens

Am I trying to do something not yet possible?

A gif of the desired outcome bellow
https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExbzBveXl2eXBzdjY2MTBuN2kxdnNvMnhjODdoaWQzemJ4aG9remo2byZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZFA6TDmqYWEBOCciEq/giphy.gif

Hi, I’m currently exploring Rive to see if it’s a viable option for our game UI engine.

Is it possible to dynamically add a component to a layout at runtime?
From my review of the JavaScript API, it doesn’t seem like this is supported.

I'm experiencing an issue with Rive iframe share links. All my links embed on my website doesn't work. Same issue on Chrome, firefox, Edge, Android, Windows...

We use a Wordpress site with Elementor.
We integrate <iframe> links to integrate rive into HTML.

Today, all links no longer work.

"Firefox cannot open this page

To protect your security, rive.app will not allow Firefox to display the page if it is integrated by another site. To view this page, you must open it in a new window."

I’m experiencing an issue with Rive animations embedded on my website (https://biztek.no) via iframes using share links. The animations used to work perfectly, but now they fail to load and show the following error:

rive.app nektet å koble til

ERR_BLOCKED_BY_RESPONSE

Has anyone else encountered this issue, or are there updates from Rive regarding embedding requirements? Any advice or solutions would be greatly appreciated!

Have tested the following browsers: Chrome (not working), Firefox (not working), Safari (not working), Opera (not working), Brave (not working)