How to animate input field using React spring

Question

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.

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.

I've tried everything past 3 hours and I just can't make it done.

Declaring animation

  const [moveInput, setMoveInput] = useState(true)

  const inputTransitions = useTransition(moveInput, null, {
    from: { transform: 'translateY(-50%)' },
    enter: { transform: 'translateY(100)' },
    leave: { transform: 'translateY(-100%)' },
  })

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.

Here is my axios call

  axios.get(
    `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely&units=metric&appid=${apiKey}`
  ).then(response => {
    //Push results to state
    setForecast(prevState => ({
      ...prevState,
      week:response.data.daily,
      humidity: response.data.current.humidity+'%'
    }))

    setMoveInput(false);
  })

I guess with that setMoveInput function I'm able to fire this animation.

In render

{inputTransitions.map(({ item, key, props }) =>
            item && <animated.div
                         key={key} 
                         style={props}
                         >  
                                <SearchForm 
                                  searchCity={searchCity} 
                                />
                         </animated.div>
            )}

input css

input{
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

When i put SearchInput component inside that animated div it means that div is supposed to be animated.

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..

Thank you very much

Answer 1

If you want to move the same element, you should use the useSpring instead of useTransition. And if you translate the div with 50% then it will move it with 50% of the div height. So it will move it just a little bit. I recommend to use vh (viewport height) insted of %.

  const props = useSpring({
    transform: moveInput ? "translateY(50vh)" : "translateY(1vh)"
  });

You should be aware also, that your css is on the inside of the div. You might want to add it to the animated div.

Here is my example: https://codesandbox.io/s/animate-search-between-top-and-center-jj4eh