No Repeat/OnComplete support.

[Tom Whiting]

Hello!

I was wondering if the Rive-React player has built-in support for repeating animations, and for triggering callbacks once an animation is complete.

For repeating, we'd like to perform an animation upon button click, and perform it again for subsequent clicks. We can do this with the following;

onClick={() => {
  rive.reset()
  rive.play()
}

Which gives us the intended behavior.

On the other hand, we are able to perform an onComplete check by using the onStop listener provided by useRive, as it is triggered upon animation completion. However, if we use the above reset/play logic, onStop is triggered twice.

Is there any built-in support for these use-cases, or a recommended approach to accomplish this?

Thanks.

[Zachary Plata]

Hi @KwehDev - while what you're doing might work, the way we'd recommend to simplify your workflow is to use the state machine and set it up so that you have perhaps a trigger input that plays the animation you want to repeat, and the state machine (set up in the editor for your Rive file) handles the logic to transition from your repeated animation to an idle animation, as an example. And when the trigger input is invoked via .fire(), the state machine handles going back to play the repeated animation.

This makes it so that you're not manually having to control singular animation playback. The logic of how an animation repeats and what happens at the end of an animation can all be controlled in the editor at design-time, and you simply have to manipulate state machine inputs in your code to transition from one state to the next.