Skip to main content
a
5mo ago

Works in editor but not in the player

We have an animation that runs well on the Rive editor app but it doesn't go past "Click the Delivery button" step when running it via the player on React or JavaScript. Has anyone else encountered this issue before?

Editor:

https://editor.rive.app/file/jpd-product-roadmap-animation/910106

Via the player:

4 replies
a
C
5mo ago

Hello, I can't access the rive file through the editor link. Could you share a .rev or .riv file so we could look at the project?

C
5mo ago

There are a few layers in the state machine that have Animation States that are undefined, for example, in the Nudge Card Drag layer you can see that two nodes have the default "Animation State" labels. You should set the animations for each of those nodes and then see if the issue in your project is resolved. The other thing to look out for is an "exceeded max iterations" error which currently appears in the state machine console (to the right of the main state machine window), and appears in the browser's devtools console when previewing your codesandbox example. This error occurs when a state machine transitions back and forth between two nodes repeatedly due to some logic on the transition conditions that causes the state machine to always transition from node x to node y, then always transition from node y to node x, and then repeat this cycle over and over. It's challenging for us to suggest specific changes to your state machine's logic, so you'll need to review the current logic to see how you might edit the transitions to avoid this error.

a
5mo ago

I simplified and reworked the state machines, went through process of elimination down to only single button interaction with nothing else on-screen, and I found out that the "click" listener is the root cause. I worked around this by changing all "click" listeners to "Pointer down" listeners. Is this a known thing that "click" doesn't work in the web player?

C
5mo ago

What version of the runtime are you using?