rive-app / rive-app/rive-react

No Repeat/OnComplete support.

Open
#170 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.2k
Forks
58
Avg merge
3h 23m
Merged PRs (30d)
6

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with useRive and its onStop listener, then trace how rive.reset() and rive.play() are handled. Determine how repeating button-triggered animations and a single completion callback should be exposed; done means both use cases work without duplicate onStop notifications.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.