React-spring: Error when trying to customize a keyframe: rangeValue.replace is not a function

[ssynix]

I'm trying to create something like this animation using the hooks API:

1. Immediately change a prop to value1.
2. Then animate it to value2.

Here's my attempt: https://codesandbox.io/embed/m7rl0rv2lp

I can't seem to be able to make the first piece of animation execute immediately, reproducing what immediate: true accomplished in Keyframes.

Passing immediate or config in to, from, or the to prop shortcut (to: [{...}, {..., config }]) produces this error:

TypeError: rangeValue.replace is not a function
...
  at createStringInterpolator

Is there a concise way of scripting an animation that may not use the same config for every frame? It'd also be nice if the error was more human-readable.

[ssynix]

I realized that my code sample above is actually producing the effect that I wanted, I just have to tweak the duration to see it. But nevertheless, it seems like it's not possible to individually tweak animations using the to prop shortcut and an attempt to do so results in cryptic error messages.

[drcmda]

@ssynix sorry for the delay, was super busy. i am looking into it right now ...

[drcmda]

It's fixed: https://codesandbox.io/s/98j7vny35w

was a small bug somewhere in the controller that thought "immediate" was a prop it should animate.

PS. note that the "from" prop is important here. without that the first render wouldn't get animated props, because arrays are executed async.

Another thing that changed (and probably used to be wrong) is that properties always "stick", if you set immediate: true once, it will remain true. So you have to set it to "false" in the second part of the chain. In the render-props version you posted it weirdly cancels out the immediate flag ... it shouldn't. 🤐

[ssynix]

Thanks for the quick fix! I'd definitely run into the issue of not setting from and sticky props before, so it's great to know what I was missing (would be nice to have them added to the docs) 👍

[drcmda]

It's there: https://www.react-spring.io/docs/hooks/use-spring (under async chains)