Interpolating between strings of differing arity

[timuric]

🐛 Bug Report

Swapping transition configurations causes an error when the amount of transform values changes between configuration.

Uncaught TypeError: Cannot read property 'push' of undefined

So in the case of my demo I would need to add rotate in both configurations in order to avoid an error.

Link to repro

https://codesandbox.io/s/jjl90qmm7y?fontsize=14

[aleclarson]

Currently, each animation starts from the current value of its Animated node (except when the reset prop is true). The interpolation code does not support animating between two strings with a different number of numbers (eg: "1px" cannot animate from/to "1px 2px").

In your code, the transform key might be animated to "translateX(100%)" on enter, and then there's a chance that it animates to "rotateX(40deg) translateX(-20%)" on leave. This type of interpolation is not yet possible, but PRs are welcome!

[aleclarson]

I've added two commits to the v9 branch that were inspired by this issue:

• Warn about failed string interpolation instead of throwing (62a728c)
• Avoid reusing AnimatedInterpolation instances (ec804f8)

[aleclarson]

I tried implementing this function, but I realized shortly after that CSS transforms can have multiple occurrences of the same key (eg: "rotateX(10deg) rotateX(-10deg)"), which that function doesn't account for. I'm sure there's a way around it, but now I'm out of time. 😢

[aleclarson]

When I get the time (or have the need), I'm gonna wrap rematrix with a little script that injects itself into react-spring using the Globals object. If anyone wants to give it a go, let me know. 😄

[aleclarson]

#782 (available in ^9.0.0-beta.33) solves the OP's use case, since it lets you animate transform props separately. I'm gonna close this issue for now, but if anyone has another use case for animating strings with different arity, please comment below.