[bug]: View interpolation doesn't work with some "to" variables in coming up with a final transform

[varunarora]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.4.5

What's Wrong?

I tried using the to spring "variables" named scale3dValue and translate3dY to use for interpolation to come up with a final transform value. It doesn't work. The value itself springs from start to finish, but it disrupts the creation of a final transform.

Changing it to less descriptive variables like o (described here: https://react-spring.io/basics#view-interpolation), xyz, a, b, etc. works. Why?

---

To Reproduce

const [props, api] = useSpring(() => ({
  from: {
    // Had this be 'a: 0', and every `scale3dValue` below replaced with `a`,
    // the transform would apply just fine.
    scale3dValue: 0,
  },
})

// Later, say in an event callback, particularly with the use of interpolation.
props.transform.set(
  props.scale3dValue.to(value => `scale3d(${value})`)
)

api.start({ scale3dValue: 1 })

/*
I'd imagine similar behavior from the following

return <animated.div
  style={{
    transform: scale3dValue.to(value => `scale3d(${value})`)
  }}
/>
*/

Expected Behaviour

The creation of the final transform value not be disrupted by what variable named are used, as long as they are not CSS style props.

Link to repo

https://codesandbox.io/s/focused-estrela-yy950s?file=/src/App.js

[joshuaellis]

Thanks for the report! Looking at your sandbox, I think the issue is because you're passing props to animated component that it does not know how to handle e.g. scale3dValue that are closely related to props it does handle e.g. scale3d.

So this is probably a misinterpretation of the parsing of shorthand props as opposed to our Interpolation functions. In the meantime you can omit spreading these props like shown here: https://codesandbox.io/s/relaxed-water-in7g9g?file=/src/App.js or alternatively use more ambiguous names such as a, i appreciate the latter makes the code harder to read.

If you're interested in fixing this issue as it will be some time before I get to it, it's probably these regexs that are causing the issues:

react-spring/targets/web/src/AnimatedStyle.ts

Line 23 in 818069a

const domTransforms = /^(matrix|translate|scale|rotate|skew)/

Which is used in this class:

react-spring/targets/web/src/AnimatedStyle.ts

Line 59 in 818069a

export class AnimatedStyle extends AnimatedObject {

Also i've removed your extra part as i felt it wasn't constructive in the issue it was just a rant of your frustrations.

[varunarora]

Thank you, Joshua! Completely a misinterpretation of the parsing, and not a problem with the interpolation functions.

The reason I added a mention of the interpolations piece and the rant (sorry it felt that way!) is because often the turnaround to such bugs/feature reqs is: "but what are you trying to do here?". I wanted to give you the larger context, and explain what the larger goal is, because you probably think 5 steps ahead of the users like me about API design. Apologies for adding the sentiment that I felt. But without explaining that I am doing interpolations, to recreate CSS-keyframe style animation, using unconventional use of the imperative API, you wouldn't understand why I am using these funky variable names. So I do think it was constructive to establish context in the extra; although I could've worded it neutrally.

❤️ The pointer to where I could submit a fix for this! Helping with navigating the codebase is one of the most useful things. Thank you! No promises, but if it continues to trouble me, I'll submit a fix. Meanwhile, as you suggested, using the as and the bs.