0

All:

Im pretty new to react-motion, I wonder when I use Motion like:

<Motion style={{x: spring(10)}}>
  {interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>

How do I know which value is the initial value it uses to interpolate for the next value? And how can I interpolate an array(the purpose is to use that array with D3.js to generate a SVG path), something like:

<Motion style={{data: spring([final data])}}>
  {interpolatingStyle => <div d={linegenerator(interpolatingStyle.data)} />}
</Motion>

Thanks

Kuan
  • 11,149
  • 23
  • 93
  • 201

1 Answers1

0

You can set the initial value to defaultStyle property.

<Motion
  defaultStyle={{x: 0}}
  style={{x: spring(10)}}>
  {interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>
phtn458
  • 475
  • 5
  • 11