title: How to animate input field using React spring
body: <p>Currently I'm working on React Weather app and I'm trying to animate input field from the middle of app to the top of the app. This animation should fire when Axios call will be full-filled. In this input field you are supposed to type name of the city, for which you want to know forecast.</p>
  <p>When the city is found, this input field should move to the top of the App and all other information from api response should fade in from bottom. But first things first.</p>
  <p>I've tried everything past 3 hours and I just can't make it done.</p>
  <p><strong>Declaring animation</strong></p>
  <pre><code>  const [moveInput, setMoveInput] = useState(true)
  
    const inputTransitions = useTransition(moveInput, null, {
      from: { transform: 'translateY(-50%)' },
      enter: { transform: 'translateY(100)' },
      leave: { transform: 'translateY(-100%)' },
    })
  </code></pre>
  <p>I don't really know what numbers I have to insert in that from ,enter and leave variables. I've tried everything and it didn't even move.</p>
  <p><strong>Here is my axios call</strong></p>
  <pre><code>  axios.get(
      `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&amp;lon=${lon}&amp;exclude=minutely&amp;units=metric&amp;appid=${apiKey}`
    ).then(response =&gt; {
      //Push results to state
      setForecast(prevState =&gt; ({
        ...prevState,
        week:response.data.daily,
        humidity: response.data.current.humidity+'%'
      }))
  
      setMoveInput(false);
    })
  </code></pre>
  <p>I guess with that setMoveInput function I'm able to fire this animation.</p>
  <p><strong>In render</strong></p>
  <pre><code>{inputTransitions.map(({ item, key, props }) =&gt;
              item &amp;&amp; &lt;animated.div
                           key={key} 
                           style={props}
                           &gt;  
                                  &lt;SearchForm 
                                    searchCity={searchCity} 
                                  /&gt;
                           &lt;/animated.div&gt;
              )}
  </code></pre>
  <p><strong>input css</strong></p>
  <pre><code>input{
      left: 50%;
      top: 50%;
      position: absolute;
      -webkit-transform: translate3d(-50%, -50%, 0);
      -moz-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
  }
  </code></pre>
  <p>When i put SearchInput component inside that animated div it means that div is supposed to be animated.</p>
  <p>Can please somebody please explain to me how is this working? I've tried to understand it from official documentation but there is no example like this case..</p>
  <p>Thank you very much</p>