1

I am trying to do a simple animation with react-three-fiber and react-spring where there are a bunch of 3d objects in a grid, and each one scales up when hovered/selected and back to normal when it is not hovered/selected. This was working when I was just setting the mesh scale to the min or max value on the corresponding interactions.

When I implemented spring, the values started to desync from what they should be. If you quickly mouse over the boxes in the example below you will see what I mean.

https://codesandbox.io/s/r3f-rs-bug-zrlvd

I am very new to the react ecosystem so I am hoping that I am just doing something wrong, but when I compare my setup to a working example, I can't figure out what I could be doing incorrectly.

Working mouse over script: https://codesandbox.io/s/9y8vkjykyy

I could just create my own tween system that eases between the values but I would love to get react-spring to play nicely.

Any input would be appreciated

Turmolt
  • 113
  • 9
  • is this a bug with react-spring? If I change the spring to a float instead of an array and just set the mesh scale each frame it works as expected. – Turmolt Feb 04 '21 at 20:09

1 Answers1

0

This was a confirmed bug in react-spring. It is fixed in v9

Turmolt
  • 113
  • 9