'background' css style property expecting a number not a string

[dufferbrady]

Problem or feature description

I think there seems to be an issues with when transitioning colors, mainly the background css style property. It seems to be expecting a number for this property rather than a string?

Could this be an issue with PropTypes?

Steps to reproduce (only needed for problems)

Versions (only needed for problems)

• React-Move: 5.2.1
• React: 16.8.4
• Browser: Chrome 72

[sghall]

In the latest react-move you can set your interpolation how ever you like. If you just want to have the interpolation found in earlier versions...install d3-interpolate and pass an interpolation prop.

This is how earlier versions worked with d3-interpolate. But notice you could use any color interpolation library or custom function you want.

import { NodeGroup } from 'react-move'
import { interpolate, interpolateTransformSvg } from 'd3-interpolate'

...
<NodeGroup
  data={this.state.data}
  keyAccessor={(d) => d.name}

  start={(data, index) => ({
    ...
  })}

  enter={(data, index) => ([ // An array
    ...
  ])}

  update={(data) => ({
    ...
  })}

  leave={() => ({
    ...
  })}

  interpolation ={(begValue, endValue, attr) => { // pass as prop
    if (attr === 'transform') {
      return interpolateTransformSvg(begValue, endValue)
    }

    return interpolate(begValue, endValue) // detects colors automatically
  }}
>
  ...children
</NodeGroup>

[dufferbrady]

This solved the issue I was having perfectly. My animations are running very well now. Thanks for the help