title: React Spring: dynamic values in useTransition() when using it alongside react-router
body: <p>In <a href="https://codesandbox.io/s/react-spring-transition-with-routes-0diem" rel="nofollow noreferrer">this example</a> you can see some nice transition between pages triggered by the route change. (took from <a href="https://www.leveluptutorials.com/" rel="nofollow noreferrer">LevelUp Tutorials</a>' React Animation course, thanks a lot Scott Tolinski).</p>
  
  <p>Now I'd like to make these transitions happen in both directions, depending on which page it's transitioning to (and from), for instance:</p>
  
  <ul>
  <li>Page One -> Page Two (both pages transition from left to right)</li>
  <li>Page Three -> Page One (both pages transition from right to left)</li>
  <li>etc</li>
  </ul>
  
  <p>From that first example I created <a href="https://codesandbox.io/s/react-spring-transition-with-routes-dynamic-from-and-leave-gxhoy" rel="nofollow noreferrer">this example</a> where the value of <code>x</code> is dynamic and should be evaluated to either <code>100</code> or <code>-100</code>, based on the direction of the transition.</p>
  
  <p>I haven't fundamentally understood how <code>useTransition()</code> works, and the <a href="https://www.react-spring.io/docs/hooks/use-transition" rel="nofollow noreferrer">documentation</a> is rather limited. The examples look amazing but are quite hard to understand. </p>
  
  <p><a href="https://codesandbox.io/s/1wqpz5mzqj" rel="nofollow noreferrer">This example</a> seems to do a similar thing to what I'm trying to achieve but the code feels like black magic: the <code>y</code> property of each object returned from <code>rows.map()</code> appears to be related to the <code>y</code> value on the functions assigned to <code>enter</code> and <code>update</code> properties because if I remove that I get the error: <code>Cannot read property 'replace' of undefined</code>. How does that work?</p>