title: What does "animated" do in react-spring?
body: <p>I am currently getting to grips with the <a href="http://react-spring.surge.sh/spring" rel="noreferrer">react-spring animation library</a>. </p>
  
  <p>In some of the CodeSandbox demos (e.g. <a href="https://codesandbox.io/embed/j150ykxrv" rel="noreferrer">https://codesandbox.io/embed/j150ykxrv</a>) in the documentation, something is imported called "animated":</p>
  
  <pre><code>import { Transition, animated } from 'react-spring'
  </code></pre>
  
  <p>and then used like so:</p>
  
  <pre><code>  {this.state.items.map(item =&gt; styles =&gt; &lt;animated.li style={{ ...defaultStyles, ...styles }}&gt;{item}&lt;/animated.li&gt;)}
  </code></pre>
  
  <p>In other examples this isn't used:</p>
  
  <pre><code>import { Spring } from 'react-spring'
  
  &lt;Spring
    from={{ opacity: 0 }}
    to={{ opacity: 1 }}&gt;
    {props =&gt; &lt;div style={props}&gt;✌️&lt;/div&gt;}
  &lt;/Spring&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Are the uses in the documentation part of a legacy version?</p>