"Warning: NaN is an invalid value for the opacity css style property" in @react-spring/web but it works 100% as intended

[revosw]

I found an example on the web about flipping a card, and adapted it to my project.

const { transform, opacity } = useSpring({
  opacity: isFlipped ? 1 : 0,
  transform: `perspective(700px) rotateY(${isFlipped ? 180 : 0}deg)`,
  config: { mass: 3, tension: 1000, friction: 80 }
})

Here is the offending code

<StyledFrontFace  style={{
  opacity: opacity - 1,
  transform
}} color={cardColor}>
  ...
</StyledFrontFace>

Since opacity is a SpringValue and not a Number, it spits out the NaN error, but it works completely fine.

If I instead write this, no error is shown in the console.

<StyledFrontFace  style={{
  opacity,
  transform
}} color={cardColor}>
  ...
</StyledFrontFace>

Am I doing something wrong here that I should solve in a different way?

[joshuaellis]

if you wanted to do the following:

<StyledFrontFace  style={{
  opacity: opacity - 1,
  transform
}} color={cardColor}>
  ...
</StyledFrontFace>

You should use the to method of the SpringValue:

<StyledFrontFace  style={{
  opacity: opacity.to(o => o - 1),
  transform
}} color={cardColor}>
  ...
</StyledFrontFace>

I think that should work.

[revosw]

That was super quick feedback, and it worked!! Very much appreciated, thanks a lot 😎