React-motion: Repeating animation on re-rendering

[Phoelpis]

I have read in a previous post this is not a priority right now. But maybe someone can suggest me a possible solution. Thank you.

I am trying to represent an animated chart using the spring component. But would like to replay the animation at every re-rendering (when a state changes)

I am using <Motion defaultStyle={{x: 0}} style={{x: spring(calculatedValue)}}>
But when the calculatedValue changes the spring component goes from the last calculatedValue to the new one but i would like it to start again from the default value of 0.

Any ideas are much appreciated. Thank you!

[davnn]

Simple thing would be to set the state back to the default value before changing to the new value. Probably not the most effective way though.

[threepointone]

try using the calculatedValue as a key for the component -

<Motion key={calculatedValue} defaultStyle={{x: 0}} style={{x: spring(calculatedValue)}}>...

this will make sure react drops the previous <Motion/>, and renders a new one whenever calculatedValue changes.

[alansouzati]

thanks @threepointone your suggestion fixed my issue.

[chenglou]

onRest is now in Motion, in the release v0.4.3 =)