J
3mo ago

Canvas Problem

Hi, I've made a nice interactive floating menu in Rive and I'm trying to integrate it into my react app, placing it at the bottom of the screen but there's a problem, the canvas that displays the rive component/floating menu is covering everything. This means that no other UI elements can be interactive and in order to have any other elements working, I have to set them at a higher z-index, however this is very problematic as they will then obstruct the menu itself.

Is this typical behaviour or have I (hopefully) just not learned some key information yet? I would like my Rive floating menu to be above everything but allow other interactive elements to sit beneath it in the z-index. Furthermore I may potentially add more Rive components in the future and would like them to not entirely obstruct everything else, the floating menu of course included.

4 replies
3mo ago

Hi The developers are checking this. I will let you know when I have more information.

3mo ago

Hi , this is something we will look into better supporting. We've chatted internally around how we can make this easier, but will need a bit more investigation from our side to make this an easy process and part of the exposed API.

While we're working on that I can give you a work around. It'll require some extra code. The idea is that you disable pointer events on the Canvas you draw Rive to, and instead wrap the canvas with a div that has the correct size. Then you listen to the correct pointer events and manually pass that to the Rive canvas. This will allow components that are beneath the canvas to still receive pointer events.

In the example linked it's a simple graphic that changes color on hover on/off, and you can see that you can still interact with the HTML button below the Rive graphic.

3mo ago

I have not had the time to expose all touch/pointer logic to this demo (it only does mouse hover), but you can find info on how we internally manage pointer logic and passing it to a state machine. The same listeners will be needed in this custom code to make it cover all cases: https://github.com/rive-app/rive-wasm/blob/master/js/src/utils/registerTouchInteractions.ts

3mo ago

A different option would also be to handle it on a case-by-case basis. For example, on Rive's website we dynamically update the CSS pointer-event property to behave correctly depending on where the user is hovering. You can see that you can hover things directly below our Get Started nav button (where the canvas extends to) but if you’re interacting with the button then pointer events are active. This can be extended using custom Rive events, for example the Rive graphic can send an event to indicate if what the pointer-event should listen to.