How to animate a child element in React-Spring?

Question

React

Hi friends! Please help me understand: I have an animated element and it contains a number. I want to animate the number every time it changes without triggering the animation of the parent. I am unable to do this. I have prepared a sandbox. Show the logic please

https://codesandbox.io/s/boring-frog-f3h7x?file=/s...

Answer 1

Wrap the div with the number in a separate Spring instance with the number itself as key:

<Spring
  key={this.state.number}
  from={{ opacity: 0, marginTop: 50 }}
  to={{ opacity: 1, marginTop: 0 }}
>
  {({ opacity, marginTop }) => (
    <div style={{ opacity, marginTop }}>{this.state.number}</div>
  )}
</Spring>