[bug]: Several rAF calls per one frame

[quebits]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.4.2

What's Wrong?

When using animation with conditional switching between immediate states it's looks like some kind of race condition happens. It cause inertia animation to accidentally stops on a half way (especially in Safari 15.3&15.4, Chrome is less affected). Debugging shows that two rAF handlers executes in one animation frame.

To Reproduce

Use provided sandox. Its not mine but reproducible.
Select "@react-spring/web" version newer then 9.4-alpha.0.
And try to drag & release.
Animation will stops almost immediately.

Expected Behaviour

Smooth & continuous animation.

Link to repo

https://codesandbox.io/s/react-spring-920-beta-touch-scrolling-example-5riij?file=/src/App.tsx

[joshuaellis]

Hi there, thanks for the report.

Your sandbox provided is a little complicated and doesn't really show the bug very clearly:

Debugging shows that two rAF handlers executes in one animation frame.

This should be made immediately apparent in your sandbox e.g by logging to the console. Therefore, please look at revisiting your sandbox to boil it down to it's most simplest form showing the issue.

[quebits]

here simplified sandbox: https://codesandbox.io/s/react-spring-9-4-drag-momentum-32ydg?file=/src/App.tsx

Try to drag with 9.4.2. You'll see something like this in console:

There is a pairs of onChange events which happens in one frame. Look at elapsed time.

Also try 9.3.2 for comparison.

[joshuaellis]

Hey @quebits I think this might have been related to #1844 which was resolved with v9.5.0 would you be able to test that version and see if it resolves your issue?

[joshuaellis]

resolved by 9.5.0