Next JS Framer Motion Fade Out

Question

I'm trying to use framer-motion and Next js to create a fade in out effect but it never fades out. I understand AnimatePresence allows components to animate out when they're removed from the React tree. 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...

_app.js

export default class BookingApp extends App {
render() {
return (
    <Provider session={pageProps.session}>
      <ThemeProvider theme={myTheme}>
        <GlobalStyles />
          <Layout>
            <AnimatePresence exitBeforeEnter>
              <Component {...pageProps} key={router.route} />
            </AnimatePresence>
          </Layout>
      </ThemeProvider>
    </Provider>
)
}}

Some simple page

class TestPage extends React.Component {
render () {
return <motion.div 
  exit={{ opacity:0 }}
  initial={{ opacity:0 }}
  animate={{ opacity:1 }}
>
  {resultsList}
</motion.div>;
}}

Answer 1

I just faced similar issue. You motion.div must have a key prop. Check the documentation here. https://www.framer.com/docs/animate-presence/

<motion.div 
  key={"my_unique_key"}
  exit={{ opacity:0 }}
  initial={{ opacity:0 }}
  animate={{ opacity:1 }}
>
  {resultsList}
</motion.div>;