title: How to start react-spring animation only on startup
body: <p>I'm trying to figure out how to trigger the animation only <strong>once</strong> at the startup of the app..</p>
  <p>Currently I'm facing the problem that If I switch to another view(another component, using <code>React-router-dom</code>) and then switch back to Home component, animation fires again. I'm using react-spring for this animation.</p>
  <p>I just want to make that animation fire only once on start of the app. Not after every switch to Home. Is there any config in React-spring, or do you guys know how to prevent this? I can't really find anything helpful.</p>
  <p><strong>Setting the animation</strong></p>
  <pre class="lang-js prettyprint-override"><code>//State for animation
  const [showGameOptions, setShowGameOptions] = useState(true);
  
  //Starting animation
  const gameOptionsTransitions = useTransition(showGameOptions, null, {
    from: { opacity: 0, transform: 'translateY(200px)' },
    enter: { opacity: 1, transform: 'translateY(0)' },
    leave: { opacity: 0, transform: 'translateY(200px)' },
  });
  </code></pre>
  <p>I've set the initial state to true, because I want to trigger that animation on start. To this part it works nice.</p>
  <p><strong>Home Component's return()</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;div className=&quot;homeScreen&quot;&gt;
    &lt;h1&gt;Tic Tac Toe&lt;/h1&gt;
    &lt;p&gt;Select game mode&lt;/p&gt;
    {gameOptionsTransitions.map(
      ({ item, key, props }) =&gt;
        item &amp;&amp; (
          &lt;animated.div key={key} style={props}&gt;
            &lt;Link to=&quot;/play&quot; className=&quot;setGameMode-btn&quot; onClick={playPlayerVsComputer}&gt;
              Player vs. Computer
            &lt;/Link&gt;
  
            &lt;Link to=&quot;/play&quot; className=&quot;setGameMode-btn&quot; onClick={playPlayerVsPlayer}&gt;
              Player vs. Player
            &lt;/Link&gt;
          &lt;/animated.div&gt;
        ),
    )}
  &lt;/div&gt;
  </code></pre>