React-spring: useTransition: How to start / stop; and performance issue

[chenesan]

I'm building bar chart race animation with useTransition. here is the source and demo. I have the following questions:

1. I'd like to build a play / stop button for it. But I couldn't find a way to play / stop the transition in the document. Is there any way to do it?

2. The animation is janky on firefox android(at least on my device) but smooth on chrome android. I found out (with react profiler) that render <RacingBarGroup> (which call useTransition for animating the bars) cost lots of time. Is there any idea for optimizing performance?

   I noticed that the other bar chart race implementation using vanilla js and d3 is smooth on firefox android (for example https://observablehq.com/@d3/bar-chart-race), so I'm not sure this issue is due to my code, react-spring or react.

I previously posted this on spectrum, but I got no answer there so I created a new issue here. Sorry for bombing if you've read my questions on spectrum :-/

[aleclarson]

There is a pausing mechanism in the latest canary (see the SpringValue#pause and SpringValue#resume methods), but it's not integrated with the useTransition API yet.

Eventually, it will be, and if you have time to implement it, you can open a PR that adds pause/resume methods to the useTransition ref API here. Of course, you'll need to get acquainted with the internals to do that, and I try to keep the source code relatively understandable.

Hope that helps. ✌️

[chenesan]

Thanks for the information! That helps a lot. I will try to look into this and maybe make a PR in recent days. Which branch should I work on?
And, how about the perfomance issue? Is there any performance tip for useTransition?

[aleclarson]

The feat/spring-class branch holds the latest changes and should be stable. You can build your PR on that.

I'm not aware of any performance problems, so I suspect it's specific to the browser and OS. If you can create a demo that reproduces the issue, I'll take a closer look if I get time.

LMK if you have any problem setting up the repo locally.

[chenesan]

Closed by #911