react-spring Example

import { Spring, animated, config } from 'react-spring'
import { TimingAnimation, Easing } from 'react-spring/dist/addons'




const myComponent = () => {
  
  return(
      <Spring
        native // with out this native flag animation will aplly every frame , which will cause ripping and laggin , by using native your element needs to be use like <animated.div> or any other element
        from={{ top: '0vh' }} // this is optional , if you dont have proper style dont use from={{ ... }}
        to={{ top: showSearch ? '-100vh' : '0vh' }}
        impl={TimingAnimation} 
        // config={{ duration: 500 }}
        config={{tension: 280, friction: 60, duration: 750}} // you can use config that you imported abpve like config={config.slow} but since we are using time so we n eed to do this
      >
        { styles =>
          <animated.section id='searchPart' style={styles}>
            <div className='searchContainer'>
              <h1>this is search => {location.search}</h1>
            </div>
          </animated.section>
        }
      </Spring>
    )
}