title: Have one element fade in on top of the other one with Framer Motion
body: <p>I am trying to fade out one div in the same space as I am trying to fade another div in using Framer Motion. Even with a delay on the transition, the object itself renders immediately which causes the other object in the same space to jump around.</p>
  <p>Here is a small code example of what I'm trying to do:</p>
  <pre><code>  const [short, setShort] = useState(false);
  
    return (
      &lt;div&gt;
        &lt;img src=&quot;image.jpg&quot; /&gt;
        &lt;AnimatePresence&gt;
          {!short &amp;&amp; (
            &lt;motion.span
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ delay: 1.5 }}
              key=&quot;logoText&quot;
            &gt;
              TEXT
            &lt;/motion.span&gt;
          )}
          {short &amp;&amp; (
            &lt;motion.span
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{delay: 1.5}}
              key=&quot;searchBox&quot;
            &gt;
              SOME DIFFERENT TEXT
            &lt;/motion.span&gt;
          )}
        &lt;/AnimatePresence&gt;
  
        &lt;Button onClick={() =&gt; setShort(!short)}&gt;Toggle&lt;/Button&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Essentially the space taken up by <code>SOME DIFFERENT TEXT</code> instantly appears, pushing the Toggle button out to the right, and then pushes in once <code>TEXT</code> has disappeared. And then <code>SOME DIFFERENT TEXT</code> is pushed out again to the right as soon as the button is clicked.</p>
  <p>How can I get both items to take up the same space, so they seamlessly transition into each other?</p>