title: how to animate below element's position smoothly when upper element is removed from DOM In framer Motion
body: <p><strong>Problem</strong></p>
  <p>Layout prop animates position change of the pink div when the App component is rendered or Re-rendered but when an element is removed from the DOM it doesn't cause App re-render hence when purple div is removed from DOM the pink div snaps to top instead of animating.</p>
  <p>How to animate pink div when purple div is removed from DOM ?</p>
  <p>Click on toggle button to remove Purple Div</p>
  <p>codeSandBox-- <a href="https://codesandbox.io/s/amazing-shirley-6e3oqi?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/amazing-shirley-6e3oqi?file=/src/App.js</a></p>