title: Next JS Framer Motion Fade Out
body: <p>I'm trying to use framer-motion and Next js to create a fade in out effect but it never fades out. I understand <code>AnimatePresence allows components to animate out when they're removed from the React tree.</code> which is probably my issue but I don't know react well enough to know how to fix my structure. Can anyone recommend a way to get it fading out? Here are some pages...</p>
  <p>_app.js</p>
  <pre><code>export default class BookingApp extends App {
  render() {
  return (
      &lt;Provider session={pageProps.session}&gt;
        &lt;ThemeProvider theme={myTheme}&gt;
          &lt;GlobalStyles /&gt;
            &lt;Layout&gt;
              &lt;AnimatePresence exitBeforeEnter&gt;
                &lt;Component {...pageProps} key={router.route} /&gt;
              &lt;/AnimatePresence&gt;
            &lt;/Layout&gt;
        &lt;/ThemeProvider&gt;
      &lt;/Provider&gt;
  )
  }}
  </code></pre>
  <p>Some simple page</p>
  <pre><code>class TestPage extends React.Component {
  render () {
  return &lt;motion.div 
    exit={{ opacity:0 }}
    initial={{ opacity:0 }}
    animate={{ opacity:1 }}
  &gt;
    {resultsList}
  &lt;/motion.div&gt;;
  }}
  </code></pre>