CODEWITHSUNDEEP
svgreact-motion
Kuan
Kuan

Reputation: 11389

How react-motion determine the initial value to interpolate

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

Upvotes: 0

Views: 85

Answers (1)

phtn458
phtn458

Reputation: 505

You can set the initial value to defaultStyle property.

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

Upvotes: 0

Related Questions