What does "animated" do in react-spring?

Question

I am currently getting to grips with the react-spring animation library.

In some of the CodeSandbox demos (e.g. https://codesandbox.io/embed/j150ykxrv) in the documentation, something is imported called "animated":

import { Transition, animated } from 'react-spring'

and then used like so:

  {this.state.items.map(item => styles => <animated.li style={{ ...defaultStyles, ...styles }}>{item}</animated.li>)}

In other examples this isn't used:

import { Spring } from 'react-spring'

<Spring
  from={{ opacity: 0 }}
  to={{ opacity: 1 }}>
  {props => <div style={props}>✌️</div>}
</Spring>

I can't find any mention in the documentation of what this does or why it is used, as it seems you can animate by just passing animated style props into a component.

Are the uses in the documentation part of a legacy version?

Answer 1

Native is optional, if you set it (and then you need the component to extend from animated.xxx) it won't render out the animation like normally react animation libs would do, in other words they call forceUpdate or setState on every frame, which is expensive. With native it will render the component once, then animate in the background using a requestAnimationFrame-loop which sets the styles directly. The values you pass to your target div (or whatever) are not numeric values but classes that receive update events, this is why you need to extend.

Rendering through react is not obsolete, though, it is the only way you can animate React component props. If you have a foreign control, or a D3 graph for instance, you would simply blow props into it while the spring renders them out.