Adding a fade in to after component mounts

[tnorlund]

I'd like to get data from the DB under useEffect and then fade the data in. The current implementation I have just pops the data in with no animation. Could you guys let me know what I'm doing incorrectly?

export default function Follow( { slug, title } ) {
...
  // Set whether to show or not.
  const [ show, setShow ] = useState( false )
  // React-spring
  const fade = useSpring( {
    config: config.wobbly,
    opacity: show ? 1 : 0,
    delay: 800,
    duration: 1000
  } )
...
  useEffect( () => {
    console.log(`getting data`)
    getProject( slug, title ).then( ( { project, error } ) => {
      if ( error == "Project does not exist" ) {
        console.log(error)
      }
      else setProjectDetails( { numberFollowers: project.numberFollows } )
      setShow( true )
      console.log(`got data`)
    } )
  }, [] )
...
  return(
    <FollowDiv style={{...fade}}>
...

[tomdohnal]

Do you use something like animated.div in the FollowDiv component? A codesandbox link with your example would be helpful :)