Using multiple values in `useTrail` fails to animate

[tomdohnal]

🐛 Bug Report

I want to animate a list of items using opacity and transform: translate(...). However, it only animates opacity correctly. As for transform: translate(...), it only animates the first item. It applies for other values, too. (I tried animating opacity and color and an anallogical glitch occurs.)

The very same code works just fine in v8 (just change the dependency version in the attach CodeSandbox to see it in action).

To Reproduce

See the Link to repro section

Expected behavior

Both values should ve animated smoothly.

Link to repro (highly encouraged)

https://codesandbox.io/s/quizzical-pare-p6cxz

Click the "animate" button to trigger the animation

Environment

• react-spring v9.0.0.-rc3
• react v16.12.0

[BiscuitNick]

It looks like a timing issue with the toggle variable updating after setting the new Trail values. Adding the new toggle variable before the Trail values are updated seems to work. Then set the updated toggle value.

https://codesandbox.io/s/romantic-microservice-4gjhe?file=/src/App.js

[CodyJasonBennett]

I'm able to recreate this issue on v9.0.0-rc3, and this is fixed for v9.1.0.

Sandbox (broken for rc3 but works on v9.1.0, see below)