useSpring chokes under load

[J-Sek]

System info

- Operating System: Linux
- Node Version:     v18.20.3
- Nuxt Version:     3.13.0
- CLI Version:      3.13.1
- Nitro Version:    2.9.7
- Package Manager:  [email protected]
- User Config:      modules
- Runtime Modules:  @nuxtjs/[email protected]

Reproduction

Circle follows the mouse coordinates only if I move very slowly

demo

---

Edit: I managed to get somewhat decent result with transition: all 0.1s linear on circle and bounce at least 1.0, but it is far from perfect.

Describe the bug

But despite the best efforts it only works if I throttle set(...) calls with delay of at least the spring duration which defeats the goal of this code. When throttle is low (just enough to avoid stressing the browser... maybe it should not be necessary) with regular mouse movements, the coordinates get null values.

Additional context

I was looking for a way to reproduce spring effect I can see in Svelte tutorial.

[J-Sek]

Ok, I think I get it... the parameters copied from example in docs (bounce and duration) are actually quite uncommon for spring animation. Any of the following helps resolve the issue:

• no options at all
• use any of the following: stiffness, damping, or mass (they seem to make the algorithm ignore both duration and bounce)

Fixed demo uses all three to get the closest match to the example from Svelte.